Chore: ts-parser support in demo

.eslintrc.js

@@ -131,7 +131,8 @@ module.exports = {
     'unicorn/no-useless-undefined': 'off',
     'unicorn/prefer-optional-catch-binding': 'off', // not supported by current ESLint parser version
     'unicorn/prefer-module': 'off',
-    'unicorn/prevent-abbreviations': 'off'
+    'unicorn/prevent-abbreviations': 'off',
+    'unicorn/no-nested-ternary': 'off' // conflicts with Prettier
   },
   overrides: [
     {

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,18 +43,24 @@ export default {
     language: {
       type: String,
       default: 'html'
+    },
+    typescript: {
+      type: Boolean,
+      default: false
     }
   },
 
   data() {
     return {
+      code: this.computeCodeFromSlot(),
       linter: null,
       preprocess: processors['.vue'].preprocess,
       postprocess: processors['.vue'].postprocess,
       format: {
         insertSpaces: true,
         tabSize: 2
-      }
+      },
+      tsEslintParser: null
     }
   },
 
@@ -90,6 +96,14 @@ export default {
         rules: this.rules,
         parser: 'vue-eslint-parser',
         parserOptions: {
+          parser: this.typescript
+            ? this.tsEslintParser
+            : this.langTs
+            ? {
+                ts: this.tsEslintParser,
+                typescript: this.tsEslintParser
+              }
+            : null,
           ecmaVersion: 'latest',
           sourceType: 'module',
           ecmaFeatures: {
@@ -99,8 +113,10 @@ export default {
       }
     },
 
-    code() {
-      return `${this.computeCodeFromSlot(this.$slots.default).trim()}\n`
+    langTs() {
+      return /lang\s*=\s*(?:"ts"|ts|'ts'|"typescript"|typescript|'typescript')/u.test(
+        this.code
+      )
     },
 
     height() {
@@ -109,14 +125,26 @@ export default {
     }
   },
 
-  methods: {
-    computeCodeFromSlot(nodes) {
-      if (!Array.isArray(nodes)) {
-        return ''
+  watch: {
+    typescript(value) {
+      if (value) {
+        this.loadTypescriptESLint()
+      }
+    },
+    langTs(value) {
+      if (value) {
+        this.loadTypescriptESLint()
       }
-      return nodes
-        .map((node) => node.text || this.computeCodeFromSlot(node.children))
-        .join('')
+    }
+  },
+
+  methods: {
+    computeCodeFromSlot() {
+      return `${computeCodeFromSlot(this.$slots.default).trim()}\n`
+    },
+
+    async loadTypescriptESLint() {
+      this.tsEslintParser = await import('@typescript-eslint/parser')
     }
   },
 
@@ -126,6 +154,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 +167,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