Add eslint-plugin-svelte3 playground (#24)

ota-meshi · web-flow · commit ac4d625807e0 · 2021-05-07T16:23:40.000+09:00
diff --git a/explorer/shim/eslint/lib/linter/linter.js b/explorer/shim/eslint/lib/linter/linter.js
@@ -0,0 +1,2 @@
+import Linter from "eslint4b"
+export { Linter }
diff --git a/explorer/src/components/ESLintEditor.vue b/explorer/src/components/ESLintEditor.vue
@@ -33,6 +33,9 @@ export default {
                 return {}
             },
         },
+        useEslintPluginSvelte3: {
+            type: Boolean,
+        },
     },
     emits: ["update:modelValue", "updateMessages"],
     data() {
@@ -49,29 +52,44 @@ export default {
             },
             deep: true,
         },
+        useEslintPluginSvelte3() {
+            this.lint(this.modelValue)
+        },
     },
     mounted() {
         this.lint(this.modelValue)
     },
     methods: {
+        async getEslintPluginSvelte3Options() {
+            const pluginSvelte3 = await import("eslint-plugin-svelte3")
+            return {
+                preprocess: pluginSvelte3.processors.svelte3.preprocess,
+                postprocess: pluginSvelte3.processors.svelte3.postprocess,
+            }
+        },
         async lint(code) {
-            const options = {
-                parser: "svelte-eslint-parser",
+            const config = {
+                parser: this.useEslintPluginSvelte3
+                    ? undefined
+                    : "svelte-eslint-parser",
                 parserOptions: {
                     ecmaVersion: 2020,
+                    sourceType: "module",
                 },
                 rules: this.rules,
                 env: {
                     browser: true,
                     es2021: true,
                 },
             }
-
-            const messages = linter.verify(code, options)
+            const options = this.useEslintPluginSvelte3
+                ? await this.getEslintPluginSvelte3Options()
+                : {}
+            const messages = linter.verify(code, config, options)
 
             this.$emit("updateMessages", messages)
 
-            const fixResult = linter.verifyAndFix(code, options)
+            const fixResult = linter.verifyAndFix(code, config, options)
             this.fixedValue = fixResult.output
 
             this.leftMarkers = await Promise.all(messages.map(messageToMarker))
diff --git a/explorer/src/components/ESLintPlayground.vue b/explorer/src/components/ESLintPlayground.vue
@@ -1,6 +1,19 @@
 <template>
     <div class="playground-root">
-        <div class="playground-tools"></div>
+        <div class="playground-tools">
+            <label>
+                <input v-model="useEslintPluginSvelte3" type="checkbox" />
+                See result of
+                <a href="https://github.com/sveltejs/eslint-plugin-svelte3"
+                    >eslint-plugin-svelte3</a
+                >.
+            </label>
+            <template v-if="useEslintPluginSvelte3">
+                <span style="color: red"
+                    >svelte-eslint-parser is not used.</span
+                >
+            </template>
+        </div>
         <div class="playground-content">
             <RulesSettings
                 ref="settings"
@@ -12,6 +25,7 @@
                     v-model="code"
                     :rules="rules"
                     class="eslint-playground"
+                    :use-eslint-plugin-svelte3="useEslintPluginSvelte3"
                     @update-messages="onUpdateMessages"
                 />
                 <div class="messages">
@@ -76,6 +90,7 @@ export default {
             code: state.code || DEFAULT_CODE,
             rules: state.rules || Object.assign({}, DEFAULT_RULES_CONFIG),
             messages: [],
+            useEslintPluginSvelte3: Boolean(state.useEslintPluginSvelte3),
         }
     },
     computed: {
@@ -89,6 +104,7 @@ export default {
             const serializedString = serializeState({
                 code,
                 rules,
+                useEslintPluginSvelte3: this.useEslintPluginSvelte3,
             })
             return serializedString
         },
@@ -127,7 +143,9 @@ export default {
                 this.code = state.code || DEFAULT_CODE
                 this.rules =
                     state.rules || Object.assign({}, DEFAULT_RULES_CONFIG)
-                this.script = state.script
+                this.useEslintPluginSvelte3 = Boolean(
+                    state.useEslintPluginSvelte3,
+                )
             }
         },
     },
diff --git a/explorer/src/components/scripts/state/deserialize.js b/explorer/src/components/scripts/state/deserialize.js
@@ -28,6 +28,10 @@ export function deserializeState(serializedString) {
             if (typeof json.code === "string") {
                 state.code = json.code
             }
+            if (json.useEslintPluginSvelte3 === true) {
+                state.useEslintPluginSvelte3 = true
+            }
+
             if (typeof json.rules === "object" && json.rules != null) {
                 state.rules = {}
                 for (const id of Object.keys(json.rules)) {
diff --git a/explorer/src/components/scripts/state/serialize.js b/explorer/src/components/scripts/state/serialize.js
@@ -23,6 +23,7 @@ export function serializeState(state) {
     const saveData = {
         code: state.code,
         rules: state.rules ? getEnabledRules(state.rules) : undefined,
+        useEslintPluginSvelte3: state.useEslintPluginSvelte3,
     }
     const jsonString = JSON.stringify(saveData)
     // eslint-disable-next-line node/no-unsupported-features/node-builtins -- ignore
diff --git a/explorer/vue.config.js b/explorer/vue.config.js
@@ -12,6 +12,34 @@ module.exports = {
                     module: require.resolve("./shim/module"),
                 },
             },
+            module: {
+                rules: [
+                    {
+                        test: /node_modules\/eslint-plugin-svelte3\/index\.js$/u,
+                        loader: "string-replace-loader",
+                        options: {
+                            search: "require\\(linter_path\\)",
+                            replace: (original) =>
+                                `require(${JSON.stringify(
+                                    require.resolve(
+                                        "./shim/eslint/lib/linter/linter",
+                                    ),
+                                )}) // ${original}`,
+                            flags: "",
+                        },
+                    },
+                    {
+                        test: /node_modules\/eslint-plugin-svelte3\/index\.js$/u,
+                        loader: "string-replace-loader",
+                        options: {
+                            search:
+                                "throw new Error\\('Could not find ESLint Linter in require cache'\\);",
+                            replace: (original) => ` // ${original}`,
+                            flags: "",
+                        },
+                    },
+                ],
+            },
         }
     },
 }
diff --git a/package.json b/package.json
@@ -62,13 +62,15 @@
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-prettier": "^3.2.0",
         "eslint-plugin-regexp": "^0.9.0",
+        "eslint-plugin-svelte3": "^3.2.0",
         "eslint-plugin-vue": "^7.2.0",
         "estree-walker": "^3.0.0",
         "locate-character": "^2.0.5",
         "magic-string": "^0.25.7",
         "mocha": "^8.0.0",
         "nyc": "^15.1.0",
         "prettier": "^2.0.5",
+        "string-replace-loader": "^3.0.1",
         "svelte": "^3.37.0",
         "ts-node": "^9.0.0",
         "typescript": "^4.0.0",

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+import Linter from "eslint4b"`
	`2`	`+export { Linter }`
Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,7 @@ export function serializeState(state) {`
`23`	`23`	`const saveData = {`
`24`	`24`	`code: state.code,`
`25`	`25`	`rules: state.rules ? getEnabledRules(state.rules) : undefined,`
	`26`	`+ useEslintPluginSvelte3: state.useEslintPluginSvelte3,`
`26`	`27`	`}`
`27`	`28`	`const jsonString = JSON.stringify(saveData)`
`28`	`29`	`// eslint-disable-next-line node/no-unsupported-features/node-builtins -- ignore`