Skip to content

Commit b8615c7

Browse files
ota-meshiota-meshi
authored
chore: improve svelte syntax in demo (#264)
* chore: improve svelte syntax in demo * chore: improve
1 parent d55b2cf commit b8615c7

File tree

4 files changed

+316
-8
lines changed

4 files changed

+316
-8
lines changed

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@
1717
let code = ""
1818
export let rules = {}
1919
export let fix = false
20-
export let language = "html"
20+
export let language = "svelte"
2121
let time = ""
2222
$: options = {
23-
filename: language === "html" ? "example.svelte" : "example.js",
23+
filename: language === "svelte" ? "example.svelte" : "example.js",
2424
preprocess,
2525
postprocess,
2626
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
export let options = {}
1212
export let fix = true
1313
export let showDiff = true
14-
export let language = "html"
14+
export let language = "svelte"
1515
1616
let fixedValue = code
1717
let leftMarkers = []

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

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { language } from "./syntax.js"
2+
13
async function setupMonaco() {
24
if (typeof window !== "undefined") {
35
const monacoScript =
@@ -24,7 +26,7 @@ function appendMonacoEditorScript() {
2426
return new Promise((resolve) => {
2527
const script = document.createElement("script")
2628
script.src =
27-
"https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js"
29+
"https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/loader.min.js"
2830
script.onload = () => {
2931
script.onload = null
3032

@@ -49,10 +51,16 @@ export function loadMonacoEngine() {
4951
return setupedMonaco || (setupedMonaco = setupMonaco())
5052
}
5153
export function loadMonacoEditor() {
52-
return (
53-
editorLoaded ||
54-
(editorLoaded = loadModuleFromMonaco("vs/editor/editor.main"))
55-
)
54+
if (editorLoaded) {
55+
return editorLoaded
56+
}
57+
return (editorLoaded = (async () => {
58+
const monaco = await loadModuleFromMonaco("vs/editor/editor.main")
59+
60+
monaco.languages.register({ id: "svelte" })
61+
monaco.languages.setMonarchTokensProvider("svelte", language)
62+
return monaco
63+
})())
5664
}
5765

5866
export async function loadModuleFromMonaco(moduleName) {

‎docs-svelte-kit/src/lib/eslint/scripts/syntax.js

+300
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,300 @@
1+
export const language = {
2+
defaultToken: "",
3+
tokenPostfix: ".html",
4+
ignoreCase: true,
5+
6+
// The main tokenizer for our languages
7+
tokenizer: {
8+
root: [
9+
[/<!DOCTYPE/, "metatag", "@doctype"],
10+
[/<!--/, "comment", "@comment"],
11+
[/\{/, "delimiter", "@svelteMustache"],
12+
[
13+
/(<)((?:[\w-]+:)?[\w-]+)(\s*)(\/>)/,
14+
["delimiter", "tag", "", "delimiter"],
15+
],
16+
[/(<)(script)/, ["delimiter", { token: "tag", next: "@script" }]],
17+
[/(<)(style)/, ["delimiter", { token: "tag", next: "@style" }]],
18+
[
19+
/(<)((?:[\w-]+:)?[\w-]+)/,
20+
["delimiter", { token: "tag", next: "@otherTag" }],
21+
],
22+
[
23+
/(<\/)((?:[\w-]+:)?[\w-]+)/,
24+
["delimiter", { token: "tag", next: "@otherTag" }],
25+
],
26+
[/</, "delimiter"],
27+
[/[^<{]+/], // text
28+
],
29+
30+
svelteMustache: [
31+
[/(:)(else if)/, ["delimiter.svelte", "keyword.flow"]],
32+
[/([#/:@])([^\s}]+)/, ["delimiter.svelte", "keyword.flow"]],
33+
[/\}/, "delimiter", "@pop"],
34+
[/\{/, "delimiter.bracket", "@svelteMustacheInBrackets"],
35+
[
36+
/[^{}]/,
37+
{
38+
token: "@rematch",
39+
next: "@svelteScriptEmbedded",
40+
nextEmbedded: "text/javascript",
41+
},
42+
],
43+
],
44+
svelteMustacheInBrackets: [
45+
[/\}/, "delimiter.bracket", "@pop"],
46+
[/\{/, "delimiter.bracket", "@push"],
47+
[
48+
/[^{}]/,
49+
{
50+
token: "@rematch",
51+
next: "@svelteScriptEmbedded",
52+
nextEmbedded: "text/javascript",
53+
},
54+
],
55+
],
56+
svelteScriptEmbedded: [
57+
[
58+
/[{}]/,
59+
{
60+
token: "@rematch",
61+
next: "@pop",
62+
nextEmbedded: "@pop",
63+
},
64+
],
65+
[/[^{}]+/],
66+
],
67+
68+
doctype: [
69+
[/[^>]+/, "metatag.content"],
70+
[/>/, "metatag", "@pop"],
71+
],
72+
73+
comment: [
74+
[/-->/, "comment", "@pop"],
75+
[/[^-]+/, "comment.content"],
76+
[/./, "comment.content"],
77+
],
78+
79+
otherTag: [
80+
[/\/?>/, "delimiter", "@pop"],
81+
[
82+
/([=])\s*(["'])/,
83+
[
84+
"delimiter",
85+
{
86+
token: "attribute.value",
87+
next: "@attributeValue.$2",
88+
},
89+
],
90+
],
91+
[/[=]\s*\{/, "delimiter", "@svelteMustache"],
92+
[/"([^"]*)"/, "attribute.value"],
93+
[/'([^']*)'/, "attribute.value"],
94+
[
95+
/(\w+)(:)([\w-]+)/,
96+
["keyword.flow", "delimiter.svelte", "attribute.name"],
97+
],
98+
[/[\w-]+/, "attribute.name"],
99+
[/[=]/, "delimiter"],
100+
[/[\t\n\r ]+/], // whitespace
101+
],
102+
103+
attributeValue: [
104+
[
105+
/[\s\S]/,
106+
{
107+
cases: {
108+
"$0==$S2": { token: "attribute.value", next: "@pop" },
109+
"$0=={": { token: "delimiter", next: "@svelteMustache" },
110+
"@default": { token: "attribute.value" },
111+
},
112+
},
113+
],
114+
],
115+
116+
// -- BEGIN <script> tags handling
117+
118+
// After <script
119+
script: [
120+
[/type/, "attribute.name", "@scriptAfterType"],
121+
[/"([^"]*)"/, "attribute.value"],
122+
[/'([^']*)'/, "attribute.value"],
123+
[/[\w-]+/, "attribute.name"],
124+
[/[=]/, "delimiter"],
125+
[
126+
/>/,
127+
{
128+
token: "delimiter",
129+
next: "@scriptEmbedded",
130+
nextEmbedded: "text/javascript",
131+
},
132+
],
133+
[/[\t\n\r ]+/], // whitespace
134+
[
135+
/(<\/)(script\s*)(>)/,
136+
["delimiter", "tag", { token: "delimiter", next: "@pop" }],
137+
],
138+
],
139+
140+
// After <script ... type
141+
scriptAfterType: [
142+
[/[=]/, "delimiter", "@scriptAfterTypeEquals"],
143+
[
144+
/>/,
145+
{
146+
token: "delimiter",
147+
next: "@scriptEmbedded",
148+
nextEmbedded: "text/javascript",
149+
},
150+
], // cover invalid e.g. <script type>
151+
[/[\t\n\r ]+/], // whitespace
152+
[/<\/script\s*>/, { token: "@rematch", next: "@pop" }],
153+
],
154+
155+
// After <script ... type =
156+
scriptAfterTypeEquals: [
157+
[
158+
/"([^"]*)"/,
159+
{
160+
token: "attribute.value",
161+
switchTo: "@scriptWithCustomType.$1",
162+
},
163+
],
164+
[
165+
/'([^']*)'/,
166+
{
167+
token: "attribute.value",
168+
switchTo: "@scriptWithCustomType.$1",
169+
},
170+
],
171+
[
172+
/>/,
173+
{
174+
token: "delimiter",
175+
next: "@scriptEmbedded",
176+
nextEmbedded: "text/javascript",
177+
},
178+
], // cover invalid e.g. <script type=>
179+
[/[\t\n\r ]+/], // whitespace
180+
[/<\/script\s*>/, { token: "@rematch", next: "@pop" }],
181+
],
182+
183+
// After <script ... type = $S2
184+
scriptWithCustomType: [
185+
[
186+
/>/,
187+
{
188+
token: "delimiter",
189+
next: "@scriptEmbedded.$S2",
190+
nextEmbedded: "$S2",
191+
},
192+
],
193+
[/"([^"]*)"/, "attribute.value"],
194+
[/'([^']*)'/, "attribute.value"],
195+
[/[\w-]+/, "attribute.name"],
196+
[/[=]/, "delimiter"],
197+
[/[\t\n\r ]+/], // whitespace
198+
[/<\/script\s*>/, { token: "@rematch", next: "@pop" }],
199+
],
200+
201+
scriptEmbedded: [
202+
[/<\/script/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
203+
[/[^<]+/, ""],
204+
],
205+
206+
// -- END <script> tags handling
207+
208+
// -- BEGIN <style> tags handling
209+
210+
// After <style
211+
style: [
212+
[/type/, "attribute.name", "@styleAfterType"],
213+
[/"([^"]*)"/, "attribute.value"],
214+
[/'([^']*)'/, "attribute.value"],
215+
[/[\w-]+/, "attribute.name"],
216+
[/[=]/, "delimiter"],
217+
[
218+
/>/,
219+
{
220+
token: "delimiter",
221+
next: "@styleEmbedded",
222+
nextEmbedded: "text/css",
223+
},
224+
],
225+
[/[\t\n\r ]+/], // whitespace
226+
[
227+
/(<\/)(style\s*)(>)/,
228+
["delimiter", "tag", { token: "delimiter", next: "@pop" }],
229+
],
230+
],
231+
232+
// After <style ... type
233+
styleAfterType: [
234+
[/[=]/, "delimiter", "@styleAfterTypeEquals"],
235+
[
236+
/>/,
237+
{
238+
token: "delimiter",
239+
next: "@styleEmbedded",
240+
nextEmbedded: "text/css",
241+
},
242+
], // cover invalid e.g. <style type>
243+
[/[\t\n\r ]+/], // whitespace
244+
[/<\/style\s*>/, { token: "@rematch", next: "@pop" }],
245+
],
246+
247+
// After <style ... type =
248+
styleAfterTypeEquals: [
249+
[
250+
/"([^"]*)"/,
251+
{
252+
token: "attribute.value",
253+
switchTo: "@styleWithCustomType.$1",
254+
},
255+
],
256+
[
257+
/'([^']*)'/,
258+
{
259+
token: "attribute.value",
260+
switchTo: "@styleWithCustomType.$1",
261+
},
262+
],
263+
[
264+
/>/,
265+
{
266+
token: "delimiter",
267+
next: "@styleEmbedded",
268+
nextEmbedded: "text/css",
269+
},
270+
], // cover invalid e.g. <style type=>
271+
[/[\t\n\r ]+/], // whitespace
272+
[/<\/style\s*>/, { token: "@rematch", next: "@pop" }],
273+
],
274+
275+
// After <style ... type = $S2
276+
styleWithCustomType: [
277+
[
278+
/>/,
279+
{
280+
token: "delimiter",
281+
next: "@styleEmbedded.$S2",
282+
nextEmbedded: "$S2",
283+
},
284+
],
285+
[/"([^"]*)"/, "attribute.value"],
286+
[/'([^']*)'/, "attribute.value"],
287+
[/[\w-]+/, "attribute.name"],
288+
[/[=]/, "delimiter"],
289+
[/[\t\n\r ]+/], // whitespace
290+
[/<\/style\s*>/, { token: "@rematch", next: "@pop" }],
291+
],
292+
293+
styleEmbedded: [
294+
[/<\/style/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
295+
[/[^<]+/, ""],
296+
],
297+
298+
// -- END <style> tags handling
299+
},
300+
}

0 commit comments

Comments
 (0)