Chore: Fix order-in-components rule doc page demo not working (#2078)

Author: ota-meshi

.eslintignore

@@ -9,3 +9,4 @@
 /docs/.vitepress/build-system/shim/eslint.mjs
 /docs/.vitepress/build-system/shim/assert.mjs
 /docs/.vitepress/.temp
+/docs/.vitepress/cache

.gitignore

@@ -11,4 +11,5 @@ yarn-error.log
 /docs/.vitepress/build-system/shim/eslint.mjs
 /docs/.vitepress/build-system/shim/assert.mjs
 /docs/.vitepress/.temp
+/docs/.vitepress/cache
 typings/eslint/lib/rules

docs/.vitepress/vite-plugin.ts

@@ -1,7 +1,7 @@
 import type { UserConfig } from 'vitepress'
 import path from 'path'
 import { fileURLToPath } from 'url'
-import { viteCommonjs as baseViteCommonjs } from '@originjs/vite-plugin-commonjs'
+import esbuild from 'esbuild'
 type Plugin = Extract<
   NonNullable<NonNullable<UserConfig['vite']>['plugins']>[number],
   { name: string }
@@ -27,27 +27,63 @@ export function vitePluginRequireResolve(): Plugin {
 }
 
 export function viteCommonjs(): Plugin {
-  const base = baseViteCommonjs({
-    include: [libRoot],
-    skipPreBuild: true
-  }) as Plugin
   return {
-    ...base,
-    // The `@originjs/vite-plugin-commonjs` is 'serve' only, but use it in 'build' as well.
+    name: 'vite-plugin-cjs-to-esm',
     apply: () => true,
-    async transform(code, id, options) {
-      if (typeof base.transform !== 'function') {
-        return null
+    async transform(code, id) {
+      if (!id.startsWith(libRoot)) {
+        return undefined
       }
-      const result = await base.transform.call(this, code, id, options)
-      if (result && typeof result === 'object' && result.code) {
-        return {
-          ...result,
-          // Replace it with null, because blanks can be given to the sourcemap and cause an error.
-          map: undefined
-        }
+      const base = transformRequire(code)
+      try {
+        const transformed = esbuild.transformSync(base, {
+          format: 'esm'
+        })
+        return transformed.code
+      } catch (e) {
+        console.error('Transform error. base code:\n' + base, e)
       }
-      return result
+      return undefined
     }
   }
 }
+
+/**
+ * Transform `require()` to `import`
+ */
+function transformRequire(code: string) {
+  if (!code.includes('require')) {
+    return code
+  }
+  const modules = new Map()
+  const replaced = code.replace(
+    /(\/\/[^\n\r]*|\/\*[\s\S]*?\*\/)|\brequire\s*\(\s*(["'].*?["'])\s*\)/gu,
+    (match, comment, moduleString) => {
+      if (comment) {
+        return match
+      }
+
+      let id =
+        '__' +
+        moduleString.replace(/[^a-zA-Z0-9_$]+/gu, '_') +
+        Math.random().toString(32).substring(2)
+      while (code.includes(id) || modules.has(id)) {
+        id += Math.random().toString(32).substring(2)
+      }
+      modules.set(id, moduleString)
+      return id
+    }
+  )
+
+  return (
+    [...modules]
+      .map(([id, moduleString]) => {
+        return `import * as __temp_${id} from ${moduleString};
+const ${id} = __temp_${id}.default || __temp_${id};
+`
+      })
+      .join('') +
+    ';\n' +
+    replaced
+  )
+}

package.json

@@ -63,7 +63,6 @@
     "xml-name-validator": "^4.0.0"
   },
   "devDependencies": {
-    "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@ota-meshi/site-kit-eslint-editor-vue": "^0.1.0",
     "@types/eslint": "^8.4.2",
     "@types/eslint-visitor-keys": "^1.0.0",