Chore: upgrade vite to v3 (#183)

* Upgrade vite

* fix lint errors

Author: ota-meshi

.eslintrc.js

@@ -52,7 +52,7 @@ module.exports = {
       },
     },
     {
-      files: ["*.ts"],
+      files: ["*.ts", "*.mts"],
       parser: "@typescript-eslint/parser",
       parserOptions: {
         sourceType: "module",

docs-svelte-kit/.eslintrc.cjs

@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-undef -- ignore
 module.exports = {
   extends: ["plugin:svelte/recommended"],
   env: {
@@ -15,5 +14,6 @@ module.exports = {
     "svelte/prefer-class-directive": "error",
     "svelte/prefer-style-directive": "error",
     "svelte/spaced-html-comment": "error",
+    "node/file-extension-in-import": "off",
   },
 }

docs-svelte-kit/build-system/build.js renamed to docs-svelte-kit/build-system/build.mts

@@ -1,21 +1,28 @@
-const esbuild = require("esbuild")
-const path = require("path")
-const fs = require("fs")
+import esbuild from "esbuild"
+import path from "path"
+import fs from "fs"
 // const babelCore = require("@babel/core")
 // const t = require("@babel/types")
 
+const dirname = path.dirname(
+  new URL(
+    // @ts-expect-error -- Cannot change `module` option
+    import.meta.url,
+  ).pathname,
+)
+
 build(
-  require.resolve("./src/eslint.mjs"),
-  path.join(__dirname, "../shim/eslint.mjs"),
+  path.join(dirname, "./src/eslint.mjs"),
+  path.join(dirname, "../shim/eslint.mjs"),
   ["assert", "util"],
 )
 build(
-  require.resolve("../../node_modules/assert"),
-  path.join(__dirname, "../shim/assert.mjs"),
+  path.join(dirname, "../../node_modules/assert"),
+  path.join(dirname, "../shim/assert.mjs"),
 )
 
 /** build */
-function build(input, out, injects = []) {
+function build(input: string, out: string, injects: string[] = []) {
   // eslint-disable-next-line no-console -- ignore
   console.log(`build@ ${input}`)
   let code = bundle(input, ["path", ...injects])
@@ -24,21 +31,21 @@ function build(input, out, injects = []) {
 }
 
 /** bundle */
-function bundle(entryPoint, externals) {
+function bundle(entryPoint: string, externals: string[]) {
   const result = esbuild.buildSync({
     entryPoints: [entryPoint],
     format: "esm",
     bundle: true,
     external: externals,
     write: false,
-    inject: [require.resolve("./src/process-shim.mjs")],
+    inject: [path.join(dirname, "./src/process-shim.mjs")],
   })
 
   return `${result.outputFiles[0].text}`
 }
 
 /** transform code */
-function transform(code, injects) {
+function transform(code: string, injects: string[]) {
   const newCode = code.replace(/"[a-z]+" = "[a-z]+";/, "")
   // const newCode = babelCore.transformSync(code, {
   //   babelrc: false,

docs-svelte-kit/shim/module.mjs

@@ -1,7 +1,7 @@
 /* eslint require-jsdoc:0 -- shim */
-function createRequire() {
+function _createRequire() {
   return () => null
 }
 
-export { createRequire }
-export default { createRequire }
+export { _createRequire as createRequire }
+export default { createRequire: _createRequire }

docs-svelte-kit/src/lib/eslint/scripts/linter.js

@@ -1,8 +1,7 @@
-// eslint-disable-next-line node/file-extension-in-import -- ignore
 import { rules as pluginRules } from "../../../../../src/utils/rules.ts"
 import { Linter } from "eslint"
 import * as svelteEslintParser from "svelte-eslint-parser"
-// eslint-disable-next-line node/file-extension-in-import -- ignore
+
 export { preprocess, postprocess } from "../../../../../src/processor/index.ts"
 
 const linter = new Linter()

docs-svelte-kit/src/lib/utils.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line node/file-extension-in-import -- ignore
 import { rules } from "../../../src/utils/rules.ts"
 import { readable, writable } from "svelte/store"
 // eslint-disable-next-line node/no-missing-import -- ignore

docs-svelte-kit/tools/highlight.mjs renamed to docs-svelte-kit/tools/highlight.mts

@@ -7,12 +7,12 @@ import "prism-svelte"
 loadLanguages(["markup", "css", "javascript"])
 
 /** Wrap pre tag */
-function wrapPre(code, lang) {
+function wrapPre(code: string, lang: string) {
   const htmlCode = lang === "text" ? escapeHtml(code) : code
   return `<pre class="language-${lang}"><code>${htmlCode}</code></pre>`
 }
 
-const EXTENSION_MAPPINGS = {
+const EXTENSION_MAPPINGS: Record<string, string | undefined> = {
   vue: "markup",
   html: "markup",
   svelte: "svelte",
@@ -28,7 +28,7 @@ const EXTENSION_MAPPINGS = {
   rs: "rust",
 }
 
-export default (str, lang) => {
+export default (str: string, lang: string): string => {
   if (!lang) {
     return wrapPre(str, "text")
   }

docs-svelte-kit/tools/markdown-it-auto-inject-components.mjs renamed to docs-svelte-kit/tools/markdown-it-auto-inject-components.mts

@@ -1,21 +1,23 @@
+import type Md from "markdown-it"
+import type Token from "markdown-it/lib/token"
 /**
  * @param {import('markdown-it')} md
  */
-export default (md) => {
+export default (md: Md): void => {
   md.core.ruler.push("auto_inject_components", (state) => {
     const injected = new Set(extractInjectedComponents(state.tokens))
     for (const component of new Set(
       extractComponents(state.tokens, injected),
     )) {
-      const newToken = new state.Token("auto_inject_component")
+      const newToken = new state.Token("auto_inject_component", "", 0)
       newToken.content = `<script>
 import ${component} from '$lib/components/${component}.svelte'
 </script>`
       state.tokens.unshift(newToken)
     }
 
     /** Extract imported components */
-    function* extractInjectedComponents(tokens) {
+    function* extractInjectedComponents(tokens: Token[]): Iterable<string> {
       for (const token of tokens) {
         if (
           (token.type === "html_inline" || token.type === "html_block") &&
@@ -33,7 +35,10 @@ import ${component} from '$lib/components/${component}.svelte'
     }
 
     /** Extract inject components */
-    function* extractComponents(tokens, injected) {
+    function* extractComponents(
+      tokens: Token[],
+      injected: Set<string>,
+    ): Iterable<string> {
       for (const token of tokens) {
         if (token.type === "html_inline" || token.type === "html_block") {
           const match = /<([A-Z][\w$]*)/u.exec(token.content)
@@ -47,7 +52,7 @@ import ${component} from '$lib/components/${component}.svelte'
       }
     }
   })
-  // eslint-disable-next-line camelcase -- ignore
+
   md.renderer.rules.auto_inject_component = (tokens, idx, _options) => {
     return tokens[idx].content
   }

docs-svelte-kit/tools/markdown-it-container-option.mjs renamed to docs-svelte-kit/tools/markdown-it-container-option.mts

@@ -1,8 +1,13 @@
+import type containerPlugin from "markdown-it-container"
+type ContainerPluginOption = Parameters<typeof containerPlugin>[2]
 /**
  * Generate markdown-it-container option
  * @see https://github.com/markdown-it/markdown-it-container
  */
-export default (type, defaultTitle = type.toUpperCase()) => {
+export default (
+  type: string,
+  defaultTitle = type.toUpperCase(),
+): ContainerPluginOption => {
   return {
     render(tokens, index) {
       const token = tokens[index]

docs-svelte-kit/tools/markdown-it-markdown.mjs renamed to docs-svelte-kit/tools/markdown-it-markdown.mts

@@ -1,15 +1,24 @@
 import path from "path"
 import spawn from "cross-spawn"
+import type Md from "markdown-it"
+
+type TreeItem = {
+  children: TreeItem[]
+}
+type TreeStack = { item: TreeItem; level: number; upper: TreeStack | null }
 
 class TOCRenderer {
-  constructor(name) {
-    const item = { children: [] }
+  private readonly tree: TreeItem
+
+  private stack: TreeStack
+
+  public constructor() {
+    const item: TreeItem = { children: [] }
     this.tree = item
     this.stack = { item, level: 1, upper: null }
-    this.name = name
   }
 
-  addMenu(level, id, title) {
+  public addMenu(level: number, id: string, title: string) {
     if (this.stack.level < level) {
       const parent = this.stack.item
       const item = parent.children[parent.children.length - 1]
@@ -24,53 +33,52 @@ class TOCRenderer {
     this.stack.item.children.push(item)
   }
 
-  toc() {
+  public toc() {
     return this.tree
   }
 }
 /**
  * @param {import('markdown-it')} md
  */
-export default (md) => {
+export default (md: Md): void => {
   md.core.ruler.push("custom_markdown", (state) => {
     const tokens = state.tokens
-    tokens.unshift(new state.Token("custom_markdown_data"))
+    tokens.unshift(new state.Token("custom_markdown_data", "", 0))
   })
-  // eslint-disable-next-line camelcase -- ignore
+
   md.renderer.rules.custom_markdown_data = (
     tokens,
     _idx,
     _options,
     env,
     _self,
   ) => {
-    const name = path.basename(env.id).replace(/\.md$/, "")
-    const renderer = new TOCRenderer(name)
+    const renderer = new TOCRenderer()
     for (let idx = 0; idx < tokens.length; idx++) {
       const token = tokens[idx]
 
       if (token.type !== "heading_open") {
         continue
       }
-      let level = Number(token.tag.substr(1))
+      const level = Number(token.tag.slice(1))
       if (level > 3) {
         continue
       }
       // Aggregate the next token children text.
-      const title = tokens[idx + 1].children
-        .filter(
+      const title = tokens[idx + 1]
+        .children!.filter(
           (token) =>
             token.type === "text" ||
             token.type === "emoji" ||
             token.type === "code_inline",
         )
         .reduce((acc, t) => acc + t.content, "")
 
-      let slug = token.attrGet("id")
+      const slug = token.attrGet("id")!
       renderer.addMenu(level, slug, title)
     }
 
-    const fileInfo = {}
+    const fileInfo: { timestamp?: number; lastUpdated?: string } = {}
     const timestamp = getGitLastUpdatedTimestamp(env.id)
     if (timestamp) {
       fileInfo.timestamp = timestamp
@@ -85,7 +93,7 @@ export default (md) => {
 }
 
 /** Get last updated timestamp */
-function getGitLastUpdatedTimestamp(filePath) {
+function getGitLastUpdatedTimestamp(filePath: string) {
   let lastUpdated
   try {
     lastUpdated =