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

.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. | :star: |
 | [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/.eslintrc.js

@@ -6,5 +6,7 @@ module.exports = {
     "node/no-unsupported-features/es-syntax": "off",
     "require-jsdoc": "off",
     "node/no-missing-import": "off",
+    "@ota-meshi/missing-module-for-config": "off",
+    "prettier/prettier": "off",
   },
 }

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. | :star: |
 | [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.
+
+- :gear: This rule is included in `"plugin:svelte/recommended"`.
+
+## :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.71,
+    "atLeast": 98.69,
     "cache": true,
     "detail": true,
     "ignoreAsAssertion": true,

src/configs/recommended.ts

@@ -12,6 +12,7 @@ export = {
     "svelte/no-dupe-else-if-blocks": "error",
     "svelte/no-dupe-style-properties": "error",
     "svelte/no-dynamic-slot-name": "error",
+    "svelte/no-export-load-in-svelte-module-in-kit-pages": "error",
     "svelte/no-inner-declarations": "error",
     "svelte/no-not-function-handler": "error",
     "svelte/no-object-in-text-mustaches": "error",

src/rules/kit-helpers/kit-helpers.ts

@@ -0,0 +1,35 @@
+import type { RuleContext } from "../../types"
+import fs from "fs"
+
+/**
+ * return true if it's a Svelte Kit page component.
+ * @param context
+ * @returns
+ */
+export function isKitPageComponent(context: RuleContext): boolean {
+  // return false if it's not a Svelte Kit page component.
+  const routes =
+    context.settings?.kit?.files?.routes?.replace(/^\//, "") ?? "src/routes"
+  const filePath = context
+    .getFilename()
+    .replace(context.getCwd?.() ?? "", "")
+    .replace(/^\//, "")
+  return filePath.startsWith(routes)
+}
+
+export const hasSvelteKit = (() => {
+  // Hack: if it runs on browser, it regards as Svelte Kit project.
+  if (!fs.readFileSync) return true
+  try {
+    const packageJson = JSON.parse(fs.readFileSync("./package.json", "utf8"))
+    // Hack: CI removes `@sveltejs/kit` and it returns false and test failed.
+    // So always it returns true if it runs on the package.
+    if (packageJson.name === "eslint-plugin-svelte") return true
+    return Boolean(
+      packageJson.dependencies["@sveltejs/kit"] ??
+        packageJson.devDependencies["@sveltejs/kit"],
+    )
+  } catch (_e) {
+    return false
+  }
+})()

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

@@ -0,0 +1,54 @@
+import type * as ESTree from "estree"
+import { createRule } from "../utils"
+import { isKitPageComponent, hasSvelteKit } from "./kit-helpers/kit-helpers"
+
+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",
+      recommended: true,
+    },
+    schema: [],
+    messages: {
+      unexpected:
+        "Disallow exporting load functions in `*.svelte` module in Svelte Kit page components.",
+    },
+    type: "problem",
+  },
+  create(context) {
+    if (!hasSvelteKit || !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 > SvelteStartTag > SvelteAttribute[key.name="context"] > SvelteLiteral[value!="module"]`]:
+        () => {
+          isModule = false
+        },
+
+      // </script>
+      ["SvelteEndTag"]: () => {
+        isModule = false
+      },
+
+      // export function load() {}
+      // export const load = () => {}
+      [`ExportNamedDeclaration :matches(FunctionDeclaration, VariableDeclaration > VariableDeclarator) > Identifier[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/rules.ts

@@ -15,6 +15,7 @@ import noAtHtmlTags from "../rules/no-at-html-tags"
 import noDupeElseIfBlocks from "../rules/no-dupe-else-if-blocks"
 import noDupeStyleProperties from "../rules/no-dupe-style-properties"
 import noDynamicSlotName from "../rules/no-dynamic-slot-name"
+import noExportLoadInSvelteModuleInKitPages from "../rules/no-export-load-in-svelte-module-in-kit-pages"
 import noExtraReactiveCurlies from "../rules/no-extra-reactive-curlies"
 import noInnerDeclarations from "../rules/no-inner-declarations"
 import noNotFunctionHandler from "../rules/no-not-function-handler"
@@ -58,6 +59,7 @@ export const rules = [
   noDupeElseIfBlocks,
   noDupeStyleProperties,
   noDynamicSlotName,
+  noExportLoadInSvelteModuleInKitPages,
   noExtraReactiveCurlies,
   noInnerDeclarations,
   noNotFunctionHandler,

tests/fixtures/rules/html-self-closing/invalid/presets/html/preset-html-errors.yaml

@@ -0,0 +1,16 @@
+- message: Disallow self-closing on HTML elements.
+  line: 3
+  column: 3
+  suggestions: null
+- message: Require self-closing on HTML void elements.
+  line: 4
+  column: 3
+  suggestions: null
+- message: Disallow self-closing on Svelte custom components.
+  line: 5
+  column: 3
+  suggestions: null
+- message: Require self-closing on Svelte special elements.
+  line: 8
+  column: 1
+  suggestions: null

tests/fixtures/rules/html-self-closing/invalid/presets/none/preset-none-errors.yaml

@@ -0,0 +1,16 @@
+- message: Disallow self-closing on HTML elements.
+  line: 3
+  column: 3
+  suggestions: null
+- message: Disallow self-closing on Svelte custom components.
+  line: 4
+  column: 3
+  suggestions: null
+- message: Disallow self-closing on HTML void elements.
+  line: 5
+  column: 3
+  suggestions: null
+- message: Disallow self-closing on Svelte special elements.
+  line: 8
+  column: 1
+  suggestions: null

tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/invalid/_config.json

@@ -0,0 +1,9 @@
+{
+  "settings": {
+    "kit": {
+      "files": {
+        "routes": "tests/fixtures"
+      }
+    }
+  }
+}

tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/invalid/test01-errors.yaml

@@ -0,0 +1,4 @@
+- message: "Disallow exporting load functions in `*.svelte` module in Svelte Kit page components."
+  line: 2
+  column: 19
+  suggestions: null

tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/invalid/test01-input.svelte

@@ -0,0 +1,3 @@
+<script context="module">
+  export function load() {}
+</script>

tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/invalid/test02-errors.yaml

@@ -0,0 +1,4 @@
+- message: "Disallow exporting load functions in `*.svelte` module in Svelte Kit page components."
+  line: 2
+  column: 16
+  suggestions: null

tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/invalid/test02-input.svelte

@@ -0,0 +1,3 @@
+<script context="module">
+  export const load = () => {}
+</script>

tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/valid/_config.json

@@ -0,0 +1,9 @@
+{
+  "settings": {
+    "kit": {
+      "files": {
+        "routes": "tests/fixtures"
+      }
+    }
+  }
+}

tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/valid/not-page/_config.json

@@ -0,0 +1,9 @@
+{
+  "settings": {
+    "kit": {
+      "files": {
+        "routes": "some-path"
+      }
+    }
+  }
+}

tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/valid/not-page/test01-input.svelte

@@ -0,0 +1,3 @@
+<script context="module">
+  export function load() {}
+</script>

tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/valid/not-page/test02-input.svelte

@@ -0,0 +1,3 @@
+<script context="module">
+  export const load = () => {}
+</script>

tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/valid/test01-input.svelte

@@ -0,0 +1,3 @@
+<script>
+  export function load() {}
+</script>

tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/valid/test02-input.svelte

@@ -0,0 +1,3 @@
+<script>
+  export const load = () => {}
+</script>