Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs-svelte-kit/src/lib/components/ESLintCodeBlock.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}
Expand Down
2 changes: 1 addition & 1 deletion docs-svelte-kit/src/lib/eslint/ESLintEditor.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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 = []
Expand Down
18 changes: 13 additions & 5 deletions docs-svelte-kit/src/lib/eslint/scripts/monaco-loader.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { language } from "./syntax.js"

async function setupMonaco() {
if (typeof window !== "undefined") {
const monacoScript =
Expand All @@ -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

Expand All @@ -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) {
Expand Down
300 changes: 300 additions & 0 deletions docs-svelte-kit/src/lib/eslint/scripts/syntax.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,300 @@
export const language = {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.flow"]],
[/([#/:@])([^\s}]+)/, ["delimiter.svelte", "keyword.flow"]],
[/\}/, "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+)(:)([\w-]+)/,
["keyword.flow", "delimiter.svelte", "attribute.name"],
],
[/[\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
},
}