From d385dd2102f4272a41a7ec471158cdd19ad7d4af Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Mon, 26 Sep 2022 21:35:31 +0900
Subject: [PATCH 1/2] chore: improve svelte syntax in demo

---
 .../src/lib/components/ESLintCodeBlock.svelte |   4 +-
 .../src/lib/eslint/ESLintEditor.svelte        |   2 +-
 .../src/lib/eslint/scripts/monaco-loader.js   |  18 +-
 .../src/lib/eslint/scripts/syntax.js          | 296 ++++++++++++++++++
 4 files changed, 312 insertions(+), 8 deletions(-)
 create mode 100644 docs-svelte-kit/src/lib/eslint/scripts/syntax.js

diff --git a/docs-svelte-kit/src/lib/components/ESLintCodeBlock.svelte b/docs-svelte-kit/src/lib/components/ESLintCodeBlock.svelte
index 3bd311ef8..ea58b0167 100644
--- a/docs-svelte-kit/src/lib/components/ESLintCodeBlock.svelte
+++ b/docs-svelte-kit/src/lib/components/ESLintCodeBlock.svelte
@@ -17,10 +17,10 @@
   let code = ""
   export let rules = {}
   export let fix = false
-  export let language = "html"
+  export let language = "svelte"
   let time = ""
   $: options = {
-    filename: language === "html" ? "example.svelte" : "example.js",
+    filename: language === "svelte" ? "example.svelte" : "example.js",
     preprocess,
     postprocess,
   }
diff --git a/docs-svelte-kit/src/lib/eslint/ESLintEditor.svelte b/docs-svelte-kit/src/lib/eslint/ESLintEditor.svelte
index b55ec7a76..f269ce5a2 100644
--- a/docs-svelte-kit/src/lib/eslint/ESLintEditor.svelte
+++ b/docs-svelte-kit/src/lib/eslint/ESLintEditor.svelte
@@ -11,7 +11,7 @@
   export let options = {}
   export let fix = true
   export let showDiff = true
-  export let language = "html"
+  export let language = "svelte"
 
   let fixedValue = code
   let leftMarkers = []
diff --git a/docs-svelte-kit/src/lib/eslint/scripts/monaco-loader.js b/docs-svelte-kit/src/lib/eslint/scripts/monaco-loader.js
index c69372bc5..877bc84a0 100644
--- a/docs-svelte-kit/src/lib/eslint/scripts/monaco-loader.js
+++ b/docs-svelte-kit/src/lib/eslint/scripts/monaco-loader.js
@@ -1,3 +1,5 @@
+import { language } from "./syntax.js"
+
 async function setupMonaco() {
   if (typeof window !== "undefined") {
     const monacoScript =
@@ -24,7 +26,7 @@ function appendMonacoEditorScript() {
   return new Promise((resolve) => {
     const script = document.createElement("script")
     script.src =
-      "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js"
+      "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/loader.min.js"
     script.onload = () => {
       script.onload = null
 
@@ -49,10 +51,16 @@ export function loadMonacoEngine() {
   return setupedMonaco || (setupedMonaco = setupMonaco())
 }
 export function loadMonacoEditor() {
-  return (
-    editorLoaded ||
-    (editorLoaded = loadModuleFromMonaco("vs/editor/editor.main"))
-  )
+  if (editorLoaded) {
+    return editorLoaded
+  }
+  return (editorLoaded = (async () => {
+    const monaco = await loadModuleFromMonaco("vs/editor/editor.main")
+
+    monaco.languages.register({ id: "svelte" })
+    monaco.languages.setMonarchTokensProvider("svelte", language)
+    return monaco
+  })())
 }
 
 export async function loadModuleFromMonaco(moduleName) {
diff --git a/docs-svelte-kit/src/lib/eslint/scripts/syntax.js b/docs-svelte-kit/src/lib/eslint/scripts/syntax.js
new file mode 100644
index 000000000..44ee9b7e5
--- /dev/null
+++ b/docs-svelte-kit/src/lib/eslint/scripts/syntax.js
@@ -0,0 +1,296 @@
+export const language = {
+  defaultToken: "",
+  tokenPostfix: ".html",
+  ignoreCase: true,
+
+  // The main tokenizer for our languages
+  tokenizer: {
+    root: [
+      [/<!DOCTYPE/, "metatag", "@doctype"],
+      [/<!--/, "comment", "@comment"],
+      [/\{/, "delimiter", "@svelteMustache"],
+      [
+        /(<)((?:[\w-]+:)?[\w-]+)(\s*)(\/>)/,
+        ["delimiter", "tag", "", "delimiter"],
+      ],
+      [/(<)(script)/, ["delimiter", { token: "tag", next: "@script" }]],
+      [/(<)(style)/, ["delimiter", { token: "tag", next: "@style" }]],
+      [
+        /(<)((?:[\w-]+:)?[\w-]+)/,
+        ["delimiter", { token: "tag", next: "@otherTag" }],
+      ],
+      [
+        /(<\/)((?:[\w-]+:)?[\w-]+)/,
+        ["delimiter", { token: "tag", next: "@otherTag" }],
+      ],
+      [/</, "delimiter"],
+      [/[^<{]+/], // text
+    ],
+
+    svelteMustache: [
+      [/(:)(else if)/, ["delimiter.svelte", "keyword"]],
+      [/([#/:@])([^\s}]+)/, ["delimiter.svelte", "keyword"]],
+      [/\}/, "delimiter", "@pop"],
+      [/\{/, "delimiter.bracket", "@svelteMustacheInBrackets"],
+      [
+        /[^{}]/,
+        {
+          token: "@rematch",
+          next: "@svelteScriptEmbedded",
+          nextEmbedded: "text/javascript",
+        },
+      ],
+    ],
+    svelteMustacheInBrackets: [
+      [/\}/, "delimiter.bracket", "@pop"],
+      [/\{/, "delimiter.bracket", "@push"],
+      [
+        /[^{}]/,
+        {
+          token: "@rematch",
+          next: "@svelteScriptEmbedded",
+          nextEmbedded: "text/javascript",
+        },
+      ],
+    ],
+    svelteScriptEmbedded: [
+      [
+        /[{}]/,
+        {
+          token: "@rematch",
+          next: "@pop",
+          nextEmbedded: "@pop",
+        },
+      ],
+      [/[^{}]+/],
+    ],
+
+    doctype: [
+      [/[^>]+/, "metatag.content"],
+      [/>/, "metatag", "@pop"],
+    ],
+
+    comment: [
+      [/-->/, "comment", "@pop"],
+      [/[^-]+/, "comment.content"],
+      [/./, "comment.content"],
+    ],
+
+    otherTag: [
+      [/\/?>/, "delimiter", "@pop"],
+      [
+        /([=])\s*(["'])/,
+        [
+          "delimiter",
+          {
+            token: "attribute.value",
+            next: "@attributeValue.$2",
+          },
+        ],
+      ],
+      [/[=]\s*\{/, "delimiter", "@svelteMustache"],
+      [/"([^"]*)"/, "attribute.value"],
+      [/'([^']*)'/, "attribute.value"],
+      [/[\w-]+/, "attribute.name"],
+      [/[=]/, "delimiter"],
+      [/[\t\n\r ]+/], // whitespace
+    ],
+
+    attributeValue: [
+      [
+        /[\s\S]/,
+        {
+          cases: {
+            "$0==$S2": { token: "attribute.value", next: "@pop" },
+            "$0=={": { token: "delimiter", next: "@svelteMustache" },
+            "@default": { token: "attribute.value" },
+          },
+        },
+      ],
+    ],
+
+    // -- BEGIN <script> tags handling
+
+    // After <script
+    script: [
+      [/type/, "attribute.name", "@scriptAfterType"],
+      [/"([^"]*)"/, "attribute.value"],
+      [/'([^']*)'/, "attribute.value"],
+      [/[\w-]+/, "attribute.name"],
+      [/[=]/, "delimiter"],
+      [
+        />/,
+        {
+          token: "delimiter",
+          next: "@scriptEmbedded",
+          nextEmbedded: "text/javascript",
+        },
+      ],
+      [/[\t\n\r ]+/], // whitespace
+      [
+        /(<\/)(script\s*)(>)/,
+        ["delimiter", "tag", { token: "delimiter", next: "@pop" }],
+      ],
+    ],
+
+    // After <script ... type
+    scriptAfterType: [
+      [/[=]/, "delimiter", "@scriptAfterTypeEquals"],
+      [
+        />/,
+        {
+          token: "delimiter",
+          next: "@scriptEmbedded",
+          nextEmbedded: "text/javascript",
+        },
+      ], // cover invalid e.g. <script type>
+      [/[\t\n\r ]+/], // whitespace
+      [/<\/script\s*>/, { token: "@rematch", next: "@pop" }],
+    ],
+
+    // After <script ... type =
+    scriptAfterTypeEquals: [
+      [
+        /"([^"]*)"/,
+        {
+          token: "attribute.value",
+          switchTo: "@scriptWithCustomType.$1",
+        },
+      ],
+      [
+        /'([^']*)'/,
+        {
+          token: "attribute.value",
+          switchTo: "@scriptWithCustomType.$1",
+        },
+      ],
+      [
+        />/,
+        {
+          token: "delimiter",
+          next: "@scriptEmbedded",
+          nextEmbedded: "text/javascript",
+        },
+      ], // cover invalid e.g. <script type=>
+      [/[\t\n\r ]+/], // whitespace
+      [/<\/script\s*>/, { token: "@rematch", next: "@pop" }],
+    ],
+
+    // After <script ... type = $S2
+    scriptWithCustomType: [
+      [
+        />/,
+        {
+          token: "delimiter",
+          next: "@scriptEmbedded.$S2",
+          nextEmbedded: "$S2",
+        },
+      ],
+      [/"([^"]*)"/, "attribute.value"],
+      [/'([^']*)'/, "attribute.value"],
+      [/[\w-]+/, "attribute.name"],
+      [/[=]/, "delimiter"],
+      [/[\t\n\r ]+/], // whitespace
+      [/<\/script\s*>/, { token: "@rematch", next: "@pop" }],
+    ],
+
+    scriptEmbedded: [
+      [/<\/script/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
+      [/[^<]+/, ""],
+    ],
+
+    // -- END <script> tags handling
+
+    // -- BEGIN <style> tags handling
+
+    // After <style
+    style: [
+      [/type/, "attribute.name", "@styleAfterType"],
+      [/"([^"]*)"/, "attribute.value"],
+      [/'([^']*)'/, "attribute.value"],
+      [/[\w-]+/, "attribute.name"],
+      [/[=]/, "delimiter"],
+      [
+        />/,
+        {
+          token: "delimiter",
+          next: "@styleEmbedded",
+          nextEmbedded: "text/css",
+        },
+      ],
+      [/[\t\n\r ]+/], // whitespace
+      [
+        /(<\/)(style\s*)(>)/,
+        ["delimiter", "tag", { token: "delimiter", next: "@pop" }],
+      ],
+    ],
+
+    // After <style ... type
+    styleAfterType: [
+      [/[=]/, "delimiter", "@styleAfterTypeEquals"],
+      [
+        />/,
+        {
+          token: "delimiter",
+          next: "@styleEmbedded",
+          nextEmbedded: "text/css",
+        },
+      ], // cover invalid e.g. <style type>
+      [/[\t\n\r ]+/], // whitespace
+      [/<\/style\s*>/, { token: "@rematch", next: "@pop" }],
+    ],
+
+    // After <style ... type =
+    styleAfterTypeEquals: [
+      [
+        /"([^"]*)"/,
+        {
+          token: "attribute.value",
+          switchTo: "@styleWithCustomType.$1",
+        },
+      ],
+      [
+        /'([^']*)'/,
+        {
+          token: "attribute.value",
+          switchTo: "@styleWithCustomType.$1",
+        },
+      ],
+      [
+        />/,
+        {
+          token: "delimiter",
+          next: "@styleEmbedded",
+          nextEmbedded: "text/css",
+        },
+      ], // cover invalid e.g. <style type=>
+      [/[\t\n\r ]+/], // whitespace
+      [/<\/style\s*>/, { token: "@rematch", next: "@pop" }],
+    ],
+
+    // After <style ... type = $S2
+    styleWithCustomType: [
+      [
+        />/,
+        {
+          token: "delimiter",
+          next: "@styleEmbedded.$S2",
+          nextEmbedded: "$S2",
+        },
+      ],
+      [/"([^"]*)"/, "attribute.value"],
+      [/'([^']*)'/, "attribute.value"],
+      [/[\w-]+/, "attribute.name"],
+      [/[=]/, "delimiter"],
+      [/[\t\n\r ]+/], // whitespace
+      [/<\/style\s*>/, { token: "@rematch", next: "@pop" }],
+    ],
+
+    styleEmbedded: [
+      [/<\/style/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
+      [/[^<]+/, ""],
+    ],
+
+    // -- END <style> tags handling
+  },
+}

From 173181a4619a46cb55bcc86aad621ff141c5a13c Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Tue, 27 Sep 2022 09:02:50 +0900
Subject: [PATCH 2/2] chore: improve

---
 docs-svelte-kit/src/lib/eslint/scripts/syntax.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs-svelte-kit/src/lib/eslint/scripts/syntax.js b/docs-svelte-kit/src/lib/eslint/scripts/syntax.js
index 44ee9b7e5..3d00738f8 100644
--- a/docs-svelte-kit/src/lib/eslint/scripts/syntax.js
+++ b/docs-svelte-kit/src/lib/eslint/scripts/syntax.js
@@ -28,8 +28,8 @@ export const language = {
     ],
 
     svelteMustache: [
-      [/(:)(else if)/, ["delimiter.svelte", "keyword"]],
-      [/([#/:@])([^\s}]+)/, ["delimiter.svelte", "keyword"]],
+      [/(:)(else if)/, ["delimiter.svelte", "keyword.flow"]],
+      [/([#/:@])([^\s}]+)/, ["delimiter.svelte", "keyword.flow"]],
       [/\}/, "delimiter", "@pop"],
       [/\{/, "delimiter.bracket", "@svelteMustacheInBrackets"],
       [
@@ -91,6 +91,10 @@ export const language = {
       [/[=]\s*\{/, "delimiter", "@svelteMustache"],
       [/"([^"]*)"/, "attribute.value"],
       [/'([^']*)'/, "attribute.value"],
+      [
+        /(\w+)(:)([\w-]+)/,
+        ["keyword.flow", "delimiter.svelte", "attribute.name"],
+      ],
       [/[\w-]+/, "attribute.name"],
       [/[=]/, "delimiter"],
       [/[\t\n\r ]+/], // whitespace