Chore: ts-parser support in demo (#1972)

* Chore: ts-parser support in demo

* refactor

* format

Author: ota-meshi

docs/.vuepress/components/eslint-code-block.vue

@@ -3,7 +3,7 @@
     <eslint-editor
       :linter="linter"
       :config="config"
-      :code="code"
+      v-model="code"
       :style="{ height }"
       class="eslint-code-block"
       :filename="filename"
@@ -43,23 +43,50 @@ export default {
     language: {
       type: String,
       default: 'html'
+    },
+    /**
+     * If enabled, `@typescript-eslint/parser` will be used.
+     * This must be enabled when used for `ts` code blocks.
+     */
+    typescript: {
+      type: Boolean,
+      default: false
     }
   },
 
   data() {
+    const code = this.computeCodeFromSlot()
+    // The height is determined in the initial processing.
+    // This is because later code changes do not change the height.
+    const lines = code.split('\n').length
+    const height = `${Math.max(120, 19 * lines)}px`
     return {
+      code,
+      height,
       linter: null,
       preprocess: processors['.vue'].preprocess,
       postprocess: processors['.vue'].postprocess,
       format: {
         insertSpaces: true,
         tabSize: 2
-      }
+      },
+      tsEslintParser: null
     }
   },
 
   computed: {
     config() {
+      let parser = null // Use default parser (`espree`)
+      if (this.typescript) {
+        // Use `@typescript-eslint/parser`.
+        parser = this.tsEslintParser
+      } else if (this.langTs) {
+        // Use `@typescript-eslint/parser` only when `<script lang="ts">` or `<script lang="typescript">`.
+        parser = {
+          ts: this.tsEslintParser,
+          typescript: this.tsEslintParser
+        }
+      }
       return {
         globals: {
           console: false,
@@ -90,6 +117,7 @@ export default {
         rules: this.rules,
         parser: 'vue-eslint-parser',
         parserOptions: {
+          parser,
           ecmaVersion: 'latest',
           sourceType: 'module',
           ecmaFeatures: {
@@ -99,24 +127,37 @@ export default {
       }
     },
 
-    code() {
-      return `${this.computeCodeFromSlot(this.$slots.default).trim()}\n`
-    },
+    /**
+     * Checks whether code may be using lang="ts" or lang="typescript".
+     * @returns {boolean} If `true`, may be using lang="ts" or lang="typescript".
+     */
+    langTs() {
+      return /lang\s*=\s*(?:"ts"|ts|'ts'|"typescript"|typescript|'typescript')/u.test(
+        this.code
+      )
+    }
+  },
 
-    height() {
-      const lines = this.code.split('\n').length
-      return `${Math.max(120, 19 * lines)}px`
+  watch: {
+    typescript(value) {
+      if (value) {
+        this.loadTypescriptESLint()
+      }
+    },
+    langTs(value) {
+      if (value) {
+        this.loadTypescriptESLint()
+      }
     }
   },
 
   methods: {
-    computeCodeFromSlot(nodes) {
-      if (!Array.isArray(nodes)) {
-        return ''
-      }
-      return nodes
-        .map((node) => node.text || this.computeCodeFromSlot(node.children))
-        .join('')
+    computeCodeFromSlot() {
+      return `${computeCodeFromSlot(this.$slots.default).trim()}\n`
+    },
+
+    async loadTypescriptESLint() {
+      this.tsEslintParser = await import('@typescript-eslint/parser')
     }
   },
 
@@ -126,6 +167,9 @@ export default {
       import('eslint/lib/linter'),
       import('espree').then(() => import('vue-eslint-parser'))
     ])
+    if (this.langTs || this.typescript) {
+      await this.loadTypescriptESLint()
+    }
 
     const linter = (this.linter = new Linter())
 
@@ -136,6 +180,15 @@ export default {
     linter.defineParser('vue-eslint-parser', { parseForESLint })
   }
 }
+
+function computeCodeFromSlot(nodes) {
+  if (!Array.isArray(nodes)) {
+    return ''
+  }
+  return nodes
+    .map((node) => node.text || computeCodeFromSlot(node.children))
+    .join('')
+}
 </script>
 
 <style>

docs/.vuepress/config.js

@@ -132,7 +132,8 @@ module.exports = {
           '@eslint/eslintrc/universal': path.resolve(
             __dirname,
             '../../node_modules/@eslint/eslintrc/dist/eslintrc-universal.cjs'
-          )
+          ),
+          globby: require.resolve('./shim/globby')
         }
       }
     }

docs/.vuepress/enhanceApp.js

@@ -12,7 +12,7 @@ export default (
     window.process = new Proxy(
       {
         env: {},
-        cwd: () => undefined
+        cwd: () => ''
       },
       {
         get(target, name) {

docs/.vuepress/shim/globby.js

@@ -0,0 +1 @@
+module.exports = {}

docs/.vuepress/shim/module.js

@@ -1,3 +1,11 @@
 module.exports = {
-  createRequire: () => () => null
+  createRequire: () => (module) => {
+    if (module === 'espree') {
+      return require('espree')
+    }
+    if (module === 'eslint-scope') {
+      return require('eslint-scope')
+    }
+    throw new Error(`Not implemented: ${module}`)
+  }
 }

docs/rules/valid-define-emits.md

@@ -45,13 +45,17 @@ This rule reports `defineEmits` compiler macros in the following cases:
 
 </eslint-code-block>
 
+<eslint-code-block :rules="{'vue/valid-define-emits': ['error']}">
+
 ```vue
 <script setup lang="ts">
   /* ✓ GOOD */
   defineEmits<(e: 'notify')=>void>()
 </script>
 ```
 
+</eslint-code-block>
+
 <eslint-code-block :rules="{'vue/valid-define-emits': ['error']}">
 
 ```vue
@@ -78,13 +82,17 @@ This rule reports `defineEmits` compiler macros in the following cases:
 
 </eslint-code-block>
 
+<eslint-code-block :rules="{'vue/valid-define-emits': ['error']}">
+
 ```vue
 <script setup lang="ts">
   /* ✗ BAD */
   defineEmits<(e: 'notify')=>void>({ submit: null })
 </script>
 ```
 
+</eslint-code-block>
+
 <eslint-code-block :rules="{'vue/valid-define-emits': ['error']}">
 
 ```vue

docs/rules/valid-define-props.md

@@ -45,13 +45,17 @@ This rule reports `defineProps` compiler macros in the following cases:
 
 </eslint-code-block>
 
+<eslint-code-block :rules="{'vue/valid-define-props': ['error']}">
+
 ```vue
 <script setup lang="ts">
   /* ✓ GOOD */
   defineProps<{ msg?:string }>()
 </script>
 ```
 
+</eslint-code-block>
+
 <eslint-code-block :rules="{'vue/valid-define-props': ['error']}">
 
 ```vue
@@ -78,13 +82,17 @@ This rule reports `defineProps` compiler macros in the following cases:
 
 </eslint-code-block>
 
+<eslint-code-block :rules="{'vue/valid-define-props': ['error']}">
+
 ```vue
 <script setup lang="ts">
   /* ✗ BAD */
   defineProps<{ msg?:string }>({ msg: String })
 </script>
 ```
 
+</eslint-code-block>
+
 <eslint-code-block :rules="{'vue/valid-define-props': ['error']}">
 
 ```vue