feat: add no-export-load-in-svelte-module-in-kit-pages (#281)

* feat: add no-export-load-in-svelte-module-in-kit-pages

* chore: add changeset

* chore: add test

* fix: check devDependencies also

* fix: adjust for test

* feat: add config

* chore: fix typo

* fix: bug

* fix: bug

* chore: uupdate docus

* chore: update docs

* chore: add kit helper

* fix: fix for demo

* chore: adjust doc style

* chore: revert .eslintrc.js

* chore: update uppercase -> lowercase

* fix: update recommended

* fix: i did not know :exit

* fix: project root path finding logic

* chore: utilize

* chore: yarn update

* fix: remove needless logic

* chore: simplify

* fix: false positive

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>

Author: baseballyama

.changeset/orange-months-sparkle.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": minor
+---
+
+feat: add `no-export-load-in-svelte-module-in-kit-pages` rule

README.md

@@ -216,6 +216,28 @@ module.exports = {
 }
 ```
 
+#### settings.kit
+
+If you use SvelteKit with not default configuration, you need to set below configurations.
+The schema is subset of SvelteKit's configuration.
+Therefore please check [SvelteKit docs](https://kit.svelte.dev/docs/configuration) for more details.
+
+e.g.
+
+```js
+module.exports = {
+  // ...
+  settings: {
+    kit: {
+      files: {
+        routes: "src/routes",
+      },
+    },
+  },
+  // ...
+}
+```
+
 ### Running ESLint from the command line
 
 If you want to run `eslint` from the command line, make sure you include the `.svelte` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern, because ESLint targets only `.js` files by default.
@@ -266,6 +288,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | [svelte/no-dupe-else-if-blocks](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dupe-else-if-blocks/) | disallow duplicate conditions in `{#if}` / `{:else if}` chains | :star: |
 | [svelte/no-dupe-style-properties](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dupe-style-properties/) | disallow duplicate style properties | :star: |
 | [svelte/no-dynamic-slot-name](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dynamic-slot-name/) | disallow dynamic slot name | :star::wrench: |
+| [svelte/no-export-load-in-svelte-module-in-kit-pages](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-export-load-in-svelte-module-in-kit-pages/) | disallow exporting load functions in `*.svelte` module in Svelte Kit page components. |  |
 | [svelte/no-not-function-handler](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-not-function-handler/) | disallow use of not function in event handler | :star: |
 | [svelte/no-object-in-text-mustaches](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-object-in-text-mustaches/) | disallow objects in text mustache interpolation | :star: |
 | [svelte/no-shorthand-style-property-overrides](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-shorthand-style-property-overrides/) | disallow shorthand style properties that override related longhand properties | :star: |

docs-svelte-kit/src/lib/components/ESLintCodeBlock.svelte

@@ -15,6 +15,7 @@
   let tsParser = null
 
   let code = ""
+  export let config = {}
   export let rules = {}
   export let fix = false
   export let language = "svelte"
@@ -75,6 +76,7 @@
         browser: true,
         es2021: true,
       },
+      ...config,
     }}
     {language}
     {options}

docs/rules.md

@@ -19,6 +19,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | [svelte/no-dupe-else-if-blocks](./rules/no-dupe-else-if-blocks.md) | disallow duplicate conditions in `{#if}` / `{:else if}` chains | :star: |
 | [svelte/no-dupe-style-properties](./rules/no-dupe-style-properties.md) | disallow duplicate style properties | :star: |
 | [svelte/no-dynamic-slot-name](./rules/no-dynamic-slot-name.md) | disallow dynamic slot name | :star::wrench: |
+| [svelte/no-export-load-in-svelte-module-in-kit-pages](./rules/no-export-load-in-svelte-module-in-kit-pages.md) | disallow exporting load functions in `*.svelte` module in Svelte Kit page components. |  |
 | [svelte/no-not-function-handler](./rules/no-not-function-handler.md) | disallow use of not function in event handler | :star: |
 | [svelte/no-object-in-text-mustaches](./rules/no-object-in-text-mustaches.md) | disallow objects in text mustache interpolation | :star: |
 | [svelte/no-shorthand-style-property-overrides](./rules/no-shorthand-style-property-overrides.md) | disallow shorthand style properties that override related longhand properties | :star: |

docs/rules/no-export-load-in-svelte-module-in-kit-pages.md

@@ -0,0 +1,61 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "svelte/no-export-load-in-svelte-module-in-kit-pages"
+description: "disallow exporting load functions in `*.svelte` module in Svelte Kit page components."
+---
+
+# svelte/no-export-load-in-svelte-module-in-kit-pages
+
+> disallow exporting load functions in `*.svelte` module in Svelte Kit page components.
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+
+## :book: Rule Details
+
+This rule reports unexpected exported `load` function at `<script context="module">`.
+At SvelteKit v1.0.0-next.405, `load` function has been moved into a separate file — `+page.js` for pages, `+layout.js` for layouts.
+And the API has changed.
+
+<script>
+  const config = {
+    settings: {
+      kit: {
+        files: {
+          routes: "",
+        },
+      },
+    },
+  }
+</script>
+
+<ESLintCodeBlock config="{config}">
+
+<!--eslint-skip-->
+
+```svelte
+<script context="module">
+  /* eslint svelte/no-export-load-in-svelte-module-in-kit-pages: "error" */
+  /* ✓ GOOD  */
+  export function foo() {}
+  export function bar() {}
+  /* ✗ BAD  */
+  export function load() {}
+  // export const load = () => {}
+</script>
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+Nothing. But if use are using not default routes folder, please set configuration according to the [user guide](../user-guide.md#settings-kit).
+
+## :books: Further Reading
+
+- [SvelteKit Migration Guide (v1.0.0-next.405)](https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292693)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/no-export-load-in-svelte-module-in-kit-pages.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/tests/src/rules/no-export-load-in-svelte-module-in-kit-pages.ts)

docs/user-guide.md

@@ -168,6 +168,28 @@ module.exports = {
 }
 ```
 
+#### settings.kit
+
+If you use SvelteKit with not default configuration, you need to set below configurations.
+The schema is subset of SvelteKit's configuration.
+Therefore please check [SvelteKit docs](https://kit.svelte.dev/docs/configuration) for more details.
+
+e.g.
+
+```js
+module.exports = {
+  // ...
+  settings: {
+    kit: {
+      files: {
+        routes: "src/routes",
+      },
+    },
+  },
+  // ...
+}
+```
+
 ### Running ESLint from the command line
 
 If you want to run `eslint` from the command line, make sure you include the `.svelte` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern, because ESLint targets only `.js` files by default.

package.json

@@ -174,7 +174,7 @@
     "access": "public"
   },
   "typeCoverage": {
-    "atLeast": 98.72,
+    "atLeast": 98.69,
     "cache": true,
     "detail": true,
     "ignoreAsAssertion": true,

src/rules/no-export-load-in-svelte-module-in-kit-pages.ts

@@ -0,0 +1,51 @@
+import type * as ESTree from "estree"
+import { createRule } from "../utils"
+import { isKitPageComponent } from "../utils/svelte-kit"
+
+export default createRule("no-export-load-in-svelte-module-in-kit-pages", {
+  meta: {
+    docs: {
+      description:
+        "disallow exporting load functions in `*.svelte` module in Svelte Kit page components.",
+      category: "Possible Errors",
+      // TODO Switch to recommended in the major version.
+      recommended: false,
+    },
+    schema: [],
+    messages: {
+      unexpected:
+        "disallow exporting load functions in `*.svelte` module in Svelte Kit page components.",
+    },
+    type: "problem",
+  },
+  create(context) {
+    if (!isKitPageComponent(context)) {
+      return {}
+    }
+    let isModule = false
+    return {
+      // <script context="module">
+      [`Program > SvelteScriptElement > SvelteStartTag > SvelteAttribute[key.name="context"] > SvelteLiteral[value="module"]`]:
+        () => {
+          isModule = true
+        },
+
+      // </script>
+      "Program > SvelteScriptElement:exit": () => {
+        isModule = false
+      },
+
+      // export function load() {}
+      // export const load = () => {}
+      [`:matches(ExportNamedDeclaration > FunctionDeclaration, ExportNamedDeclaration > VariableDeclaration > VariableDeclarator) > Identifier.id[name="load"]`]:
+        (node: ESTree.Identifier) => {
+          if (!isModule) return {}
+          return context.report({
+            node,
+            loc: node.loc!,
+            messageId: "unexpected",
+          })
+        },
+    }
+  },
+})

src/types.ts

@@ -128,6 +128,11 @@ export type RuleContext = {
         postcss?: false | { configFilePath?: unknown }
       }
     }
+    ["kit"]?: {
+      files?: {
+        routes?: string
+      }
+    }
   }
   parserPath: string
   parserOptions: Linter.ParserOptions

src/utils/cache.ts

@@ -0,0 +1,63 @@
+/**
+ * Simple cache manager.
+ *
+ * refer: https://github.com/mysticatea/eslint-plugin-node/blob/f45c6149be7235c0f7422d1179c25726afeecd83/lib/util/cache.js
+ */
+
+const SKIP_TIME = 5000
+
+type CacheValue<T> = {
+  expire: number
+  value: T
+}
+
+/**
+ * The cache will dispose of each value if the value has not been accessed
+ * during 5 seconds.
+ * @returns getter and setter ofr the cache.
+ */
+export function createCache<T>(): {
+  get: (key: string) => T | null
+  set: (key: string, value: T) => void
+} {
+  const map: Map<string, CacheValue<T>> = new Map()
+
+  /**
+   * Get the cached value of the given key.
+   * @param key The key to get.
+   * @returns The cached value or null.
+   */
+  function get(key: string): T | null {
+    const entry = map.get(key)
+    const now = Date.now()
+
+    if (entry) {
+      if (entry.expire > now) {
+        entry.expire = now + SKIP_TIME
+        return entry.value
+      }
+      map.delete(key)
+    }
+    return null
+  }
+
+  /**
+   * Set the value of the given key.
+   * @param key The key to set.
+   * @param value The value to set.
+   * @returns
+   */
+  function set(key: string, value: T): void {
+    const entry = map.get(key)
+    const expire = Date.now() + SKIP_TIME
+
+    if (entry) {
+      entry.value = value
+      entry.expire = expire
+    } else {
+      map.set(key, { value, expire })
+    }
+  }
+
+  return { get, set }
+}