Refactor

Author: ota-meshi

explorer/src/components/ESLintEditor.vue

@@ -37,7 +37,7 @@ export default {
             type: Boolean,
         },
     },
-    emits: ["update:modelValue", "updateMessages"],
+    emits: ["update:modelValue", "updateMessages", "time"],
     data() {
         return {
             fixedValue: this.modelValue,
@@ -85,7 +85,12 @@ export default {
             const options = this.useEslintPluginSvelte3
                 ? await this.getEslintPluginSvelte3Options()
                 : {}
+
+            const start = Date.now()
             const messages = linter.verify(code, config, options)
+            const time = Date.now() - start
+
+            this.$emit("time", time)
 
             this.$emit("updateMessages", messages)
 

explorer/src/components/ESLintPlayground.vue

@@ -13,6 +13,7 @@
                     >svelte-eslint-parser is not used.</span
                 >
             </template>
+            <span style="margin-left: 16px">{{ time }}</span>
         </div>
         <div class="playground-content">
             <RulesSettings
@@ -27,6 +28,7 @@
                     class="eslint-playground"
                     :use-eslint-plugin-svelte3="useEslintPluginSvelte3"
                     @update-messages="onUpdateMessages"
+                    @time="(t) => (time = `${t}ms`)"
                 />
                 <div class="messages">
                     <ol>
@@ -91,6 +93,7 @@ export default {
             rules: state.rules || Object.assign({}, DEFAULT_RULES_CONFIG),
             messages: [],
             useEslintPluginSvelte3: Boolean(state.useEslintPluginSvelte3),
+            time: "",
         }
     },
     computed: {

src/context/index.ts

@@ -4,18 +4,19 @@ import type ESTree from "estree"
 import type { ScopeManager } from "eslint-scope"
 import { TemplateScopeManager } from "./template-scope-manager"
 
+type ContextSourceCode = {
+    svelte: string
+    script: {
+        code: string
+        attrs: Record<string, string | undefined>
+    }
+}
 export class Context {
     public readonly code: string
 
     public readonly parserOptions: any
 
-    public readonly sourceCode: {
-        svelte: string
-        script: {
-            code: string
-            attrs: Record<string, string | undefined>
-        }
-    }
+    public readonly sourceCode: ContextSourceCode
 
     public readonly tokens: Token[] = []
 
@@ -31,43 +32,30 @@ export class Context {
         this.code = code
         this.parserOptions = parserOptions
         this.locs = new LinesAndColumns(code)
-        const sourceCode: {
-            svelte: string
-            script: {
-                code: string
-                ranges: {
-                    code: [number, number]
-                    tag: [number, number]
-                }[]
-                attrs: Record<string, string | undefined>
-            }
-        } = {
-            svelte: code,
+
+        let svelteCode = ""
+        let scriptCode = ""
+        let scriptAttrs: Record<string, string | undefined> = {}
+
+        let start = 0
+        for (const script of extractScriptBlocks(code)) {
+            const before = code.slice(start, script.codeRange[0])
+            svelteCode += before + script.code.replace(/[^\n\r ]/g, " ")
+            scriptCode += before.replace(/[^\n\r ]/g, " ") + script.code
+            scriptAttrs = Object.assign(scriptAttrs, script.attrs)
+            start = script.codeRange[1]
+        }
+        const before = code.slice(start)
+        svelteCode += before
+        scriptCode += before.replace(/[^\n\r ]/g, " ")
+
+        this.sourceCode = {
+            svelte: svelteCode,
             script: {
-                code: code.replace(/[^\n\r ]/g, " "),
-                ranges: [],
-                attrs: {},
+                code: scriptCode,
+                attrs: scriptAttrs,
             },
         }
-        for (const script of extractScriptBlocks(code)) {
-            sourceCode.svelte =
-                sourceCode.svelte.slice(0, script.codeRange[0]) +
-                script.code.replace(/[^\n\r ]/g, " ") +
-                sourceCode.svelte.slice(script.codeRange[1])
-            sourceCode.script.code =
-                sourceCode.script.code.slice(0, script.codeRange[0]) +
-                script.code +
-                sourceCode.script.code.slice(script.codeRange[1])
-            sourceCode.script.ranges.push({
-                code: script.codeRange,
-                tag: script.tagRange,
-            })
-            sourceCode.script.attrs = Object.assign(
-                sourceCode.script.attrs,
-                script.attrs,
-            )
-        }
-        this.sourceCode = sourceCode
     }
 
     public getLocFromIndex(index: number): { line: number; column: number } {

src/parser/converts/root.ts

@@ -170,7 +170,7 @@ function extractAttributes(
 ) {
     const script = element.type === "SvelteScriptElement"
     const code =
-        ctx.sourceCode.svelte.slice(0, element.range[0]).replace(/./g, " ") +
+        " ".repeat(element.range[0]) +
         ctx.sourceCode.svelte
             .slice(...element.range)
             .replace(

src/parser/espree.ts

@@ -17,7 +17,7 @@ export interface ESLintCustomParser {
 
 const createRequire: (filename: string) => (modName: string) => any =
     // Added in v12.2.0
-    (Module as any).createRequire ||
+    Module.createRequire ||
     // Added in v10.12.0, but deprecated in v12.2.0.
     Module.createRequireFromPath ||
     // Polyfill - This is not executed on the tests on node@>=10.