Improve DEMO site

Author: ota-meshi

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
     "no-lonely-if": "off",
     "new-cap": "off",
     "no-shadow": "off",
+    "no-void": ["error", { allowAsStatement: true }],
     "prettier/prettier": [
       "error",
       {},

docs-svelte-kit/build-system/src/process-shim.mjs

@@ -1,4 +1,8 @@
 export let process = {
   env: {},
   cwd: () => "",
+  stdout: {},
+}
+if (typeof window !== "undefined") {
+  window.process = process
 }

docs-svelte-kit/shim/fs.mjs

@@ -0,0 +1,4 @@
+/* eslint require-jsdoc:0 -- shim */
+
+export {}
+export default {}

docs-svelte-kit/shim/globby.mjs

@@ -0,0 +1,4 @@
+/* eslint require-jsdoc:0 -- shim */
+
+export {}
+export default {}

docs-svelte-kit/shim/path.mjs

@@ -16,9 +16,17 @@ function resolve(s) {
   return s
 }
 
+function isAbsolute() {
+  return false
+}
+
+function join(...args) {
+  return args.join("/")
+}
+
 const sep = "/"
 
-const posix = { dirname, extname, resolve, relative, sep }
+const posix = { dirname, extname, resolve, relative, sep, isAbsolute, join }
 posix.posix = posix
-export { dirname, extname, posix, resolve, relative, sep }
+export { dirname, extname, posix, resolve, relative, sep, isAbsolute, join }
 export default posix

docs-svelte-kit/src/lib/components/ESLintPlayground.svelte

@@ -9,8 +9,17 @@
     preprocess,
     postprocess,
   } from "../eslint/scripts/linter.js"
-
-  const linter = createLinter()
+  import { loadModulesForBrowser } from "../../../../src/shared/svelte-compile-warns/transform/load-module"
+  const linter = loadModulesForBrowser()
+    .then(async () => {
+      const parser = await import("@typescript-eslint/parser")
+      if (typeof window !== "undefined") {
+        window.require.define("@typescript-eslint/parser", parser)
+      }
+    })
+    .then(() => {
+      return createLinter()
+    })
 
   const DEFAULT_CODE =
     `<!-- Welcome to @ota-meshi/eslint-plugin-svelte -->
@@ -161,6 +170,10 @@
           parserOptions: {
             ecmaVersion: 2020,
             sourceType: "module",
+            parser: {
+              ts: "@typescript-eslint/parser",
+              typescript: "@typescript-eslint/parser",
+            },
           },
           rules,
           env: {

docs-svelte-kit/src/lib/eslint/ESLintEditor.svelte

@@ -82,7 +82,7 @@
   /** message to marker */
   async function messageToMarker(message, messageMap) {
     const monaco = await loadMonacoEditor()
-    const rule = message.ruleId && linter.getRules().get(message.ruleId)
+    const rule = message.ruleId && (await linter).getRules().get(message.ruleId)
     const docUrl = rule && rule.meta && rule.meta.docs && rule.meta.docs.url
     const startLineNumber = ensurePositiveInt(message.line, 1)
     const startColumn = ensurePositiveInt(message.column, 1)

src/shared/svelte-compile-warns/transform/load-module.ts

@@ -2,7 +2,8 @@ import type { AST } from "svelte-eslint-parser"
 import Module from "module"
 import path from "path"
 import type { RuleContext } from "../../../types"
-const cache = new WeakMap<AST.SvelteProgram, Record<string, any>>()
+const cache = new WeakMap<AST.SvelteProgram, Record<string, unknown>>()
+const cache4b = new Map<string, unknown>()
 /**
  * Load module
  */
@@ -13,8 +14,8 @@ export function loadModule<R>(context: RuleContext, name: string): R | null {
     modules = {}
     cache.set(key, modules)
   }
-  const mod = modules[name]
-  if (mod) return mod
+  const mod = modules[name] || cache4b.get(name)
+  if (mod) return mod as R
   try {
     const createRequire: (filename: string) => (modName: string) => unknown =
       // Added in v12.2.0
@@ -30,3 +31,13 @@ export function loadModule<R>(context: RuleContext, name: string): R | null {
     return null
   }
 }
+
+/**  Load modules for browser */
+export async function loadModulesForBrowser(): Promise<void> {
+  const [sass, typescript] = await Promise.all([
+    import("sass"),
+    import("typescript"),
+  ])
+  cache4b.set("sass", sass)
+  cache4b.set("typescript", typescript)
+}

svelte.config.esm.mjs

@@ -62,6 +62,9 @@ const config = {
           path: path.join(dirname, "./docs-svelte-kit/shim/path.mjs"),
           url: path.join(dirname, "./docs-svelte-kit/shim/url.mjs"),
           os: path.join(dirname, "./docs-svelte-kit/shim/os.mjs"),
+          fs: path.join(dirname, "./docs-svelte-kit/shim/fs.mjs"),
+          globby: path.join(dirname, "./docs-svelte-kit/shim/globby.mjs"),
+          tslib: path.join(dirname, "./node_modules/tslib/tslib.es6.js"),
         },
       },
       plugins: [