docs: support type info in demo site

Author: ota-meshi

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

@@ -6,8 +6,13 @@
     preprocess,
     postprocess,
   } from "../eslint/scripts/linter.js"
+  import { loadTsParser } from "../eslint/scripts/ts-parser.js"
+  import { loadModulesForBrowser } from "../../../../src/shared/svelte-compile-warns/transform/load-module"
 
-  const linter = createLinter()
+  const modulesForBrowser = loadModulesForBrowser()
+  const loadLinter = createLinter()
+
+  let tsParser = null
 
   let code = ""
   export let rules = {}
@@ -19,6 +24,18 @@
     preprocess,
     postprocess,
   }
+  $: hasLangTs =
+    /lang\s*=\s*(?:"ts"|ts|'ts'|"typescript"|typescript|'typescript')/u.test(
+      code,
+    )
+  $: linter = modulesForBrowser.then(
+    hasLangTs && !tsParser
+      ? async () => {
+          tsParser = await loadTsParser()
+          return loadLinter
+        }
+      : () => loadLinter,
+  )
   let showDiff = fix
 
   function onLintedResult(evt) {
@@ -48,6 +65,10 @@
       parserOptions: {
         ecmaVersion: 2020,
         sourceType: "module",
+        parser: {
+          ts: tsParser,
+          typescript: tsParser,
+        },
       },
       rules,
       env: {

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

@@ -9,11 +9,12 @@
     preprocess,
     postprocess,
   } from "../eslint/scripts/linter.js"
+  import { loadTsParser } from "../eslint/scripts/ts-parser.js"
   import { loadModulesForBrowser } from "../../../../src/shared/svelte-compile-warns/transform/load-module"
   let tsParser = null
   const linter = loadModulesForBrowser()
     .then(async () => {
-      tsParser = await import("@typescript-eslint/parser")
+      tsParser = await loadTsParser()
     })
     .then(() => {
       return createLinter()

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

@@ -35,6 +35,8 @@
     lint(linter, code, config, options)
   })
 
+  let lastResult = {}
+
   async function lint(linter, code, config, options) {
     messageMap.clear()
     /* eslint-disable no-param-reassign -- ignore */
@@ -69,12 +71,23 @@
       fixedMessages: fixResult.messages,
     })
 
-    leftMarkers = await Promise.all(
+    lastResult = { messages, fixResult }
+
+    const markers = await Promise.all(
       messages.map((m) => messageToMarker(m, messageMap)),
     )
-    rightMarkers = await Promise.all(
+    const fixedMarkers = await Promise.all(
       fixResult.messages.map((m) => messageToMarker(m)),
     )
+    if (
+      lastResult.messages !== messages ||
+      lastResult.fixResult !== fixResult
+    ) {
+      // If the result has changed, don't update the markers
+      return
+    }
+    leftMarkers = markers
+    rightMarkers = fixedMarkers
   }
 
   function applyFix() {

docs-svelte-kit/src/lib/eslint/scripts/monaco-loader.js

@@ -45,17 +45,23 @@ function appendMonacoEditorScript() {
 let setupedMonaco = null
 let editorLoaded = null
 
-export async function loadMonacoEditor() {
-  await (setupedMonaco || (setupedMonaco = setupMonaco()))
+export function loadMonacoEngine() {
+  return setupedMonaco || (setupedMonaco = setupMonaco())
+}
+export function loadMonacoEditor() {
   return (
     editorLoaded ||
-    (editorLoaded = new Promise((resolve) => {
-      if (typeof window !== "undefined") {
-        // eslint-disable-next-line node/no-missing-require -- ignore
-        window.require(["vs/editor/editor.main"], (r) => {
-          resolve(r)
-        })
-      }
-    }))
+    (editorLoaded = loadModuleFromMonaco("vs/editor/editor.main"))
   )
 }
+
+export async function loadModuleFromMonaco(moduleName) {
+  await loadMonacoEngine()
+  return new Promise((resolve) => {
+    if (typeof window !== "undefined") {
+      window.require([moduleName], (r) => {
+        resolve(r)
+      })
+    }
+  })
+}

docs-svelte-kit/src/lib/eslint/scripts/ts-create-program.mts

@@ -0,0 +1,101 @@
+import type typescript from "typescript"
+import type tsvfs from "@typescript/vfs"
+type TS = typeof typescript
+type TSVFS = typeof tsvfs
+
+/** Create Program */
+export function createProgram(
+  {
+    ts,
+    compilerOptions,
+    compilerHost,
+  }: {
+    ts: TS
+    compilerOptions: typescript.CompilerOptions
+    compilerHost: typescript.CompilerHost
+  },
+  options: { filePath: string },
+): typescript.Program {
+  try {
+    const program = ts.createProgram({
+      rootNames: [options.filePath],
+      options: compilerOptions,
+      host: compilerHost,
+    })
+    return program
+  } catch (e) {
+    // eslint-disable-next-line no-console -- Demo debug
+    console.error(e)
+    throw e
+  }
+}
+
+export function createCompilerOptions(ts: TS): typescript.CompilerOptions {
+  const compilerOptions: typescript.CompilerOptions = {
+    target: ts.ScriptTarget.ESNext,
+    module: ts.ModuleKind.ESNext,
+    jsx: ts.JsxEmit.Preserve,
+    strict: true,
+  }
+  compilerOptions.lib = [ts.getDefaultLibFileName(compilerOptions)]
+  return compilerOptions
+}
+
+export async function createVirtualCompilerHost(
+  {
+    ts,
+    tsvfs,
+    compilerOptions,
+  }: {
+    ts: TS
+    tsvfs: TSVFS
+    compilerOptions: typescript.CompilerOptions
+  },
+  { filePath: targetFilePath }: { filePath: string },
+): Promise<{
+  compilerHost: typescript.CompilerHost
+  updateFile: (sourceFile: typescript.SourceFile) => boolean
+  fsMap: Map<string, string>
+}> {
+  const fsMap = await tsvfs.createDefaultMapFromCDN(
+    {
+      lib: Array.from(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- use internal
+        (ts as any).libMap.keys(),
+      ),
+    },
+    ts.version,
+    true,
+    ts,
+  )
+  const system = tsvfs.createSystem(fsMap)
+  const host = tsvfs.createVirtualCompilerHost(system, compilerOptions, ts)
+  // eslint-disable-next-line @typescript-eslint/unbound-method -- backup original
+  const original = { getSourceFile: host.compilerHost.getSourceFile }
+  host.compilerHost.getSourceFile = function (
+    fileName,
+    languageVersionOrOptions,
+    ...args
+  ) {
+    if (targetFilePath === fileName) {
+      // Exclude the target file from caching as it will be modified.
+      const file = this.readFile(fileName) ?? ""
+      return ts.createSourceFile(fileName, file, languageVersionOrOptions, true)
+    }
+    if (this.fileExists(fileName)) {
+      return original.getSourceFile.apply(this, [
+        fileName,
+        languageVersionOrOptions,
+        ...args,
+      ])
+    }
+    // Avoid error
+    // eslint-disable-next-line no-console -- Demo debug
+    console.log(`Not exists: ${fileName}`)
+    return undefined
+  }
+  return {
+    ...host,
+    fsMap,
+  }
+}

docs-svelte-kit/src/lib/eslint/scripts/ts-parser.js

@@ -0,0 +1,54 @@
+import { loadMonacoEngine } from "./monaco-loader"
+import {
+  createProgram,
+  createCompilerOptions,
+  createVirtualCompilerHost,
+} from "./ts-create-program.mts"
+
+let tsParserCache = null
+export function loadTsParser() {
+  return (tsParserCache ??= loadTsParserImpl())
+}
+
+async function loadTsParserImpl() {
+  await loadMonacoEngine()
+  const [ts, tsvfs, tsParser] = await Promise.all([
+    import("typescript"),
+    import("@typescript/vfs"),
+    import("@typescript-eslint/parser"),
+  ])
+  if (typeof window === "undefined") {
+    return tsParser
+  }
+  window.define("typescript", ts)
+
+  const compilerOptions = createCompilerOptions(ts)
+  const filePath = "/demo.ts"
+  const host = await createVirtualCompilerHost(
+    { ts, tsvfs, compilerOptions },
+    { filePath },
+  )
+  return {
+    parseForESLint(code, options) {
+      host.fsMap.set(filePath, code)
+      // Requires its own Program instance to provide full type information.
+      const program = createProgram(
+        { ts, compilerHost: host.compilerHost, compilerOptions },
+        { filePath },
+      )
+
+      try {
+        const result = tsParser.parseForESLint(code, {
+          ...options,
+          filePath: filePath.replace(/^\//u, ""),
+          programs: [program],
+        })
+        return result
+      } catch (e) {
+        // eslint-disable-next-line no-console -- Demo debug
+        console.error(e)
+        throw e
+      }
+    },
+  }
+}

docs/rules/@typescript-eslint/no-unnecessary-condition.md

@@ -14,21 +14,25 @@ description: "disallow conditionals where the type is always truthy or always fa
 
 ## :book: Rule Details
 
-This rule reports ???.
+This rule extends the base `@typescript-eslint`'s [@typescript-eslint/no-unnecessary-condition] rule.
+The [@typescript-eslint/no-unnecessary-condition] rule does not understand reactive or rerendering of Svelte components and has false positives when used with Svelte components. This rule understands reactive and rerendering of Svelte components.
 
 <ESLintCodeBlock fix>
 
 <!--eslint-skip-->
 
 ```svelte
-<script>
+<script lang="ts">
   /* eslint svelte/@typescript-eslint/no-unnecessary-condition: "error" */
+  export let foo: number | null = null
+  /* ✗ BAD */
+  let b = foo || 42
+  /* ✓ GOOD */
+  $: a = foo || 42
 </script>
 
 <!-- ✓ GOOD -->
-
-<!-- ✗ BAD -->
-
+{foo || 42}
 ```
 
 </ESLintCodeBlock>
@@ -37,17 +41,24 @@ This rule reports ???.
 
 ```json
 {
-  "svelte/@typescript-eslint/no-unnecessary-condition": ["error", {
-   
-  }]
+  "@typescript-eslint/no-unnecessary-condition": "off",
+  "svelte/@typescript-eslint/no-unnecessary-condition": [
+    "error",
+    {
+      "allowConstantLoopConditions": false,
+      "allowRuleToRunWithoutStrictNullChecksIKnowWhatIAmDoing": false
+    }
+  ]
 }
 ```
 
-- 
+Same as [@typescript-eslint/no-unnecessary-condition] rule option. See [here](https://typescript-eslint.io/rules/no-unnecessary-condition/#options) for details.
+
+## :couple: Related rules
 
-## :books: Further Reading
+- [@typescript-eslint/no-unnecessary-condition]
 
--
+[@typescript-eslint/no-unnecessary-condition]: https://typescript-eslint.io/rules/no-unnecessary-condition/
 
 ## :mag: Implementation
 

package.json

@@ -112,6 +112,7 @@
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.1-0",
     "@typescript-eslint/parser-v4": "npm:@typescript-eslint/parser@4",
+    "@typescript/vfs": "^1.4.0",
     "assert": "^2.0.0",
     "commitlint": "^17.0.3",
     "env-cmd": "^10.1.0",

tests/fixtures/rules/@typescript-eslint/no-unnecessary-condition/invalid/binary-expression01-errors.yaml

@@ -2,3 +2,7 @@
   line: 4
   column: 13
   suggestions: null
+- message: Unnecessary conditional, both sides of the expression are literal values.
+  line: 8
+  column: 9
+  suggestions: null

tests/fixtures/rules/@typescript-eslint/no-unnecessary-condition/invalid/binary-expression01-input.svelte

@@ -3,4 +3,8 @@
 
   const a = foo == null
   $: b = foo == null
+  $: {
+    let bar: null | boolean = null
+    c = bar == null
+  }
 </script>

tests/fixtures/rules/@typescript-eslint/no-unnecessary-condition/invalid/binary-expression01-output.svelte

@@ -3,4 +3,8 @@
 
   const a = foo == null
   $: b = foo == null
+  $: {
+    let bar: null | boolean = null
+    c = bar == null
+  }
 </script>

tests/fixtures/rules/@typescript-eslint/no-unnecessary-condition/invalid/nullish-coalescing01-errors.yaml

@@ -3,3 +3,8 @@
   line: 5
   column: 13
   suggestions: null
+- message: Unnecessary conditional, left-hand side of `??` operator is always
+    `null` or `undefined`.
+  line: 9
+  column: 9
+  suggestions: null

tests/fixtures/rules/@typescript-eslint/no-unnecessary-condition/invalid/nullish-coalescing01-input.svelte

@@ -4,4 +4,8 @@
 
   const a = foo ?? bar
   $: b = foo ?? bar
+  $: {
+    let baz: null | boolean = null
+    c = baz ?? bar
+  }
 </script>