Replace documentation example with vue-eslint-editor (#153)

* Replace documentation example with `vue-eslint-editor`

* fix script

* update

* fix

* Add since version

Author: ota-meshi

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

@@ -0,0 +1,251 @@
+<template>
+  <div class="eslint-code-container">
+    <eslint-editor
+      ref="editor"
+      :linter="linter"
+      :config="config"
+      v-model="code"
+      :style="{ height }"
+      class="eslint-code-block"
+      :filename="resplvedFilename"
+      :language="language"
+      dark
+      :format="format"
+      :fix="fix"
+    />
+  </div>
+</template>
+
+<script>
+import './setup'
+import EslintEditor from 'vue-eslint-editor'
+import { rules } from '../../../'
+import { setTimeouts } from '../../../dist/utils/default-timeouts'
+import { setFileContents } from '../shim/fs/fake-fs'
+
+setTimeouts({ CACHE_LOADER: -1, MTIME_MS_CHECK: -1 })
+export default {
+  name: 'ESLintCodeBlock',
+  components: { EslintEditor },
+  inject: {
+    $resourceGroup: {
+      from: '$resourceGroup',
+      default: null
+    }
+  },
+
+  props: {
+    fix: {
+      type: Boolean,
+      default: false
+    },
+    rules: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    filename: {
+      type: String
+    },
+    language: {
+      type: String,
+      default: 'html'
+    },
+    localeKey: {
+      type: String,
+      default: 'file'
+    },
+    messageSyntaxVersion: {
+      type: String,
+      default: '^9'
+    }
+  },
+
+  data() {
+    return {
+      linter: null,
+      format: {
+        insertSpaces: true,
+        tabSize: 2
+      },
+      code: ''
+    }
+  },
+
+  watch: {
+    code(newCode) {
+      if (this.$resourceGroup) {
+        this.$resourceGroup.set(this.resplvedFilename, newCode)
+      }
+    }
+  },
+
+  computed: {
+    isResource() {
+      return this.language === 'json' || this.language === 'yaml'
+    },
+    resplvedFilename() {
+      return (
+        this.filename ||
+        (this.language === 'json'
+          ? 'example.json'
+          : this.language === 'yaml'
+          ? 'example.yaml'
+          : this.language === 'javascript'
+          ? 'example.js'
+          : 'example.vue')
+      )
+    },
+    config() {
+      return {
+        globals: {
+          console: false,
+          // ES2015 globals
+          ArrayBuffer: false,
+          DataView: false,
+          Float32Array: false,
+          Float64Array: false,
+          Int16Array: false,
+          Int32Array: false,
+          Int8Array: false,
+          Map: false,
+          Promise: false,
+          Proxy: false,
+          Reflect: false,
+          Set: false,
+          Symbol: false,
+          Uint16Array: false,
+          Uint32Array: false,
+          Uint8Array: false,
+          Uint8ClampedArray: false,
+          WeakMap: false,
+          WeakSet: false,
+          // ES2017 globals
+          Atomics: false,
+          SharedArrayBuffer: false
+        },
+        rules: this.rules,
+        parser:
+          this.language === 'json'
+            ? 'jsonc-eslint-parser'
+            : this.language === 'yaml'
+            ? 'yaml-eslint-parser'
+            : 'vue-eslint-parser',
+        parserOptions: {
+          ecmaVersion: 2020,
+          sourceType: 'module',
+          ecmaFeatures: {
+            jsx: true
+          }
+        },
+        settings: {
+          'vue-i18n': {
+            localeDir: (this.$resourceGroup
+              ? this.$resourceGroup
+                  .getFiles()
+                  .filter(file => /\.(?:json5?|ya?ml)$/i.test(file))
+              : this.isResource
+              ? [this.resplvedFilename]
+              : []
+            ).map(pattern => ({ pattern, localeKey: this.localeKey })),
+            messageSyntaxVersion: this.messageSyntaxVersion
+          }
+        }
+      }
+    },
+
+    height() {
+      const lines = this.code.split('\n').length
+      return `${Math.max(120, 19 * lines)}px`
+    }
+  },
+
+  methods: {
+    computeCodeFromSlot(nodes) {
+      if (!Array.isArray(nodes)) {
+        return ''
+      }
+      return nodes
+        .map(node => node.text || this.computeCodeFromSlot(node.children))
+        .join('')
+    },
+    verifyHook() {
+      setFileContents(
+        this.$resourceGroup ? this.$resourceGroup.getFileContents() : {}
+      )
+    },
+    lint() {
+      this.$refs.editor.lint()
+    }
+  },
+
+  async mounted() {
+    if (this.$resourceGroup) {
+      this.$resourceGroup.addEditor(this)
+    }
+    this.code = `${this.computeCodeFromSlot(this.$slots.default).trim()}\n`
+    this.$refs.editor.$watch('monaco', monaco => {
+      monaco.languages.register({ id: 'yaml' })
+      monaco.languages.setMonarchTokensProvider(
+        'yaml',
+        require('monaco-editor/esm/vs/basic-languages/yaml/yaml').language
+      )
+    })
+    // Load linter.
+    const [
+      { default: Linter },
+      { default: coreRules },
+      vueESLintParser,
+      jsoncESLintParser,
+      yamlESLintParser
+    ] = await Promise.all([
+      import('eslint4b/dist/linter'),
+      import('eslint4b/dist/core-rules'),
+      import('espree').then(() => import('vue-eslint-parser')),
+      import('espree').then(() => import('jsonc-eslint-parser')),
+      import('yaml-eslint-parser')
+    ])
+
+    const linter = (this.linter = new Linter({ cwd: '/path' }))
+
+    linter.defineRules(coreRules)
+    for (const ruleId of Object.keys(rules)) {
+      linter.defineRule(`@intlify/vue-i18n/${ruleId}`, rules[ruleId])
+    }
+    linter.defineParser('vue-eslint-parser', vueESLintParser)
+    linter.defineParser('jsonc-eslint-parser', jsoncESLintParser)
+    linter.defineParser('yaml-eslint-parser', yamlESLintParser)
+
+    const verifyHook = this.verifyHook
+
+    const verify = linter.verify
+    linter.verify = function (...args) {
+      verifyHook()
+      return verify.apply(this, args)
+    }
+    const verifyAndFix = linter.verifyAndFix
+    linter.verifyAndFix = function (...args) {
+      verifyHook()
+      return verifyAndFix.apply(this, args)
+    }
+  }
+}
+</script>
+
+<style>
+.eslint-code-container {
+  border-radius: 6px;
+  padding: 1.25rem 0;
+  margin: 1em 0;
+  background-color: #1e1e1e;
+}
+
+.eslint-code-block {
+  width: 100%;
+}
+
+.eslint-editor-actions {
+  bottom: -0.9rem;
+}
+</style>

docs/.vuepress/components/resource-group.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+export default {
+  provide() {
+    let waitSeq = 0
+    const data = Vue.observable({ fileContents: {} })
+    const editors = new Set()
+    return {
+      $resourceGroup: {
+        async set(fileName, code) {
+          Vue.set(data.fileContents, fileName, code)
+
+          const timeSeq = ++waitSeq
+          await Vue.nextTick()
+          if (timeSeq !== waitSeq) {
+            return
+          }
+
+          for (const editor of editors) {
+            editor.lint()
+          }
+        },
+        getFileContents() {
+          return data.fileContents
+        },
+        getFiles() {
+          return Object.keys(data.fileContents)
+        },
+        addEditor(editor) {
+          editors.add(editor)
+        }
+      }
+    }
+  }
+}
+</script>

docs/.vuepress/components/setup.js

@@ -0,0 +1,7 @@
+if (typeof window !== 'undefined') {
+  window.process = {
+    cwd() {
+      return ''
+    }
+  }
+}

docs/.vuepress/config.js

@@ -5,11 +5,28 @@
 'use strict'
 
 require('ts-node').register()
+const path = require('path')
 const { withCategories } = require('../../scripts/lib/rules')
-require('../../scripts/update-docs-headers')
+require('../../scripts/update-rule-docs')
 require('../../scripts/update-docs-index')
 
 module.exports = {
+  configureWebpack(_config, _isServer) {
+    return {
+      resolve: {
+        alias: {
+          module: require.resolve('./shim/module'),
+          glob: require.resolve('./shim/glob'),
+          eslint: path.resolve(__dirname, './shim/eslint'),
+          fs: require.resolve('./shim/fs'),
+          [path.resolve(
+            __dirname,
+            '../../dist/utils/glob-utils'
+          )]: require.resolve('./shim/eslint-plugin-vue-i18n/utils/glob-utils')
+        }
+      }
+    }
+  },
   base: '/',
   title: 'eslint-plugin-vue-i18n',
   description: 'ESLint plugin for Vue I18n',

docs/.vuepress/shim/eslint-plugin-vue-i18n/utils/glob-utils.js

@@ -0,0 +1,6 @@
+import { getFiles } from '../../fs/fake-fs'
+export function listFilesToProcess() {
+  return getFiles()
+    .filter(filename => /\.(?:vue|js)$/i.test(filename))
+    .map(filename => ({ filename, ignored: false }))
+}

docs/.vuepress/shim/eslint/index.js

@@ -0,0 +1,13 @@
+import { SourceCode } from '../../../../node_modules/eslint/lib/source-code'
+export { SourceCode }
+export class CLIEngine {
+  addPlugin() {}
+  getConfigForFile() {
+    return {
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        sourceType: 'module'
+      }
+    }
+  }
+}

docs/.vuepress/shim/fs/fake-fs.js

@@ -0,0 +1,22 @@
+export function statSync(filename) {
+  return {
+    mtimeMs: Date.now()
+  }
+}
+
+let files = {}
+
+export function existsSync(filename) {
+  return Boolean(files[filename]) || filename === '.'
+}
+export function readFileSync(filename) {
+  return files[filename] || ''
+}
+
+// utility
+export function setFileContents(filesMap) {
+  files = filesMap
+}
+export function getFiles() {
+  return Object.keys(files)
+}

docs/.vuepress/shim/fs/index.js

@@ -0,0 +1,4 @@
+const fakeFS = require('./fake-fs')
+fakeFS.default = fakeFS
+
+module.exports = fakeFS

docs/.vuepress/shim/glob.js

@@ -0,0 +1,5 @@
+export default {
+  sync(p) {
+    return [p]
+  }
+}

docs/.vuepress/shim/module.js

@@ -0,0 +1,3 @@
+module.exports = {
+  createRequire: () => () => null
+}