Add rules to help migrate Svelte Kit (v1.0.0-next.405)

[ota-meshi]

Motivation

Before migrating the Svelte Kit, it might be useful to check the migration requirements in advance and let users know that migration is necessary.

Description

Perhaps we should add some rules.
For example:

• no-export-load-in-svelte-module-in-kit-pages... Disallow exporting load functions in *.svelte module in Svelte Kit page components.
  See SvelteKit 1.0 migration guide (from SvelteKit alpha) kit#5774 (comment)
• naming-convention-in-kit-routes ... Require route files follow naming conventions in Svelte Kit routes.
  See SvelteKit 1.0 migration guide (from SvelteKit alpha) kit#5774 (comment)
  Note that essentially, even files under routes can be named freely. It's just not treated as a page. So checking it can be difficult. https://kit.svelte.dev/docs/routing#other-files Unable to check if migrated.
• no-not-data-props-in-kit-pages ... Disallow props other than data in Svelte Kit page components.
  See SvelteKit 1.0 migration guide (from SvelteKit alpha) kit#5774 (comment)

It would be best to be able to automatically locate the svelte.config file if possible, read it, and locate the routes directory. If that's difficult, we'll have to ask the user to configure it with overrides in the eslint configuration.

If you have any other rules you need to migrate or ideas for rules that ESLint can check, please let me know.

Examples

<script context="module">
/* eslint svelte/no-export-load-in-svelte-module-in-kit-pages: error */

/* ✗ BAD */
export function load() { /* ... */}
export const load = () => { /* ... */}
</script>

<!-- ✗ BAD -->
<!-- Filename: index.svelte -->
<script>
/* eslint svelte/naming-convention-in-kit-routes: error */
</script>

/* ✗ BAD */
/* Filename: index.js */
/* eslint svelte/naming-convention-in-kit-routes: error */

<!-- ✓ GOOD -->
<!-- Filename: +page.svelte -->
<script>
/* eslint svelte/naming-convention-in-kit-routes: error */
</script>

/* ✓ GOOD */
/* Filename: +page.js */
/* eslint svelte/naming-convention-in-kit-routes: error */

<script>
/* eslint svelte/no-not-data-props-in-kit-pages: error */

/* ✗ BAD */
export let foo;

/* ✓ GOOD */
export let data;
$: ({foo} = data)
</script>

Additional comments

sveltejs/kit#5774

[marekvospel]

If I have some time this week I might be able to implement some of these

[marekvospel]

Hey, @ota-meshi I've started creating the svelte/naming-convention-in-kit-routes rule, but I'm not sure whether using any asynchronous logic inside an eslint plugin is safe. I'm trying to import the svelte.config.js, and the only way to do that that I'm aware of is to use import(), which is asynchronous.

I wouldn't want to introduce any problem where the rule wouldn't work in case loading of the eslint configuration takes longer than the lint process.

My current code

export default createRule(..., {
  ...,
  create(context) {
    const file = parse(context.getFilename())
    const cwd = resolve(context.getCwd ? context.getCwd() : process.cwd())
    const name = file.name

    // This is an asynchronous function that returns the svelte configuration object if it exists (it tries to find it recursively)
    getSvelteConfig(cwd)

    return {}
  }
}

[baseballyama]

For instance, svelte.config.js may depends on some environment variable then maybe the parse process raise error?
I think most of users use routes directory, I suggest that we will add ESLint config.
Only few users need to use this config, so I think sum of setting cost is not high.

What do you think?

[ota-meshi]

I was thinking how to parse the export default in svelte.config.js using espree (ESLint's standard parser), but it might be difficult.

I suggest that we will add ESLint config.

I think that makes a lot of sense 👍

[baseballyama]

@marekvospel

I also consider implementing part of these rules.
But I don't want to make conflict between us.

Can I start to implement no-export-load-in-svelte-module-in-kit-pages ?

[marekvospel]

@baseballyama sure, I've started doing naming-convention-in-kit-routes. However the rules are going to have some shared logic such as isFileInKitRoutes (or simillarly named) utility function.

[baseballyama]

naming-convention-in-kit-routes

I don't have any idea way to check it properly.
Could you please share your idea on how to check it?

The SvelteKit demo site also uses non-page components in the routes directory, so this is a pretty normal situation I think.
https://github.com/sveltejs/kit/tree/master/sites/kit.svelte.dev/src/routes

I thought that just checking only index.svelte, but this is really half-baked...

[ota-meshi]

The SvelteKit demo site also uses non-page components in the routes directory, so this is a pretty normal situation I think.
https://github.com/sveltejs/kit/tree/master/sites/kit.svelte.dev/src/routes

I didn't take into account that non-page components are placed in the routes directory 😓.
I think that without a way to identify page components from content, it would be difficult to implement rule.