From a07c05c4cb6ae1572884c9ffc3f7da19ecfe486d Mon Sep 17 00:00:00 2001 From: Monkatraz <34875062+Monkatraz@users.noreply.github.com> Date: Thu, 29 Oct 2020 19:50:33 -0600 Subject: [PATCH 1/3] (feat) improved Svelte-Pug syntax highlighting Adds improved syntax highlighting when using Pug with Svelte. Uses injected grammars - this way the original Pug grammar is kept as it is, and does not have to be cloned. --- packages/svelte-vscode/package.json | 32 ++ .../syntaxes/pug-svelte-dotblock.json | 55 ++++ .../syntaxes/pug-svelte-tags.json | 201 ++++++++++++ .../svelte-vscode/syntaxes/pug-svelte.json | 293 ++++++++++++++++++ 4 files changed, 581 insertions(+) create mode 100644 packages/svelte-vscode/syntaxes/pug-svelte-dotblock.json create mode 100644 packages/svelte-vscode/syntaxes/pug-svelte-tags.json create mode 100644 packages/svelte-vscode/syntaxes/pug-svelte.json diff --git a/packages/svelte-vscode/package.json b/packages/svelte-vscode/package.json index d1e3f774c..d2868ca09 100644 --- a/packages/svelte-vscode/package.json +++ b/packages/svelte-vscode/package.json @@ -298,6 +298,38 @@ "source.ts": "typescript" } }, + { + "scopeName": "svelte.pug", + "path": "./syntaxes/pug-svelte.json", + "injectTo": [ + "source.svelte" + ], + "embeddedLanguages": { + "source.ts": "typescript", + "text.pug": "jade" + } + }, + { + "scopeName": "svelte.pug.tags", + "path": "./syntaxes/pug-svelte-tags.json", + "injectTo": [ + "source.svelte" + ], + "embeddedLanguages": { + "source.ts": "typescript", + "text.pug": "jade" + } + }, + { + "scopeName": "svelte.pug.dotblock", + "path": "./syntaxes/pug-svelte-dotblock.json", + "injectTo": [ + "source.svelte" + ], + "embeddedLanguages": { + "source.ts": "typescript" + } + }, { "scopeName": "markdown.svelte.codeblock", "path": "./syntaxes/markdown-svelte.json", diff --git a/packages/svelte-vscode/syntaxes/pug-svelte-dotblock.json b/packages/svelte-vscode/syntaxes/pug-svelte-dotblock.json new file mode 100644 index 000000000..74d0d56c5 --- /dev/null +++ b/packages/svelte-vscode/syntaxes/pug-svelte-dotblock.json @@ -0,0 +1,55 @@ +{ + "scopeName": "svelte.pug.dotblock", + "fileTypes": [], + "injectionSelector": "L:text.block.pug -meta.embedded.ts", + "patterns": [ + { + "include": "#interp-object-literal" + }, + { + "include": "#interp" + } + ], + "repository": { + "interp-object-literal": { + "contentName": "meta.interpolation meta.embedded.ts", + "begin": "(?![!$#]){\\s*?(?={)", + "beginCaptures": { + "0": { + "name": "punctuation.section.interpolation.begin" + } + }, + "end": "(?<=})\\s*?}", + "endCaptures": { + "0": { + "name": "punctuation.section.interpolation.end" + } + }, + "patterns": [ + { + "include": "source.ts#object-literal" + } + ] + }, + "interp": { + "contentName": "meta.interpolation meta.embedded.ts", + "begin": "(?![!$#]){", + "beginCaptures": { + "0": { + "name": "punctuation.section.interpolation.begin" + } + }, + "end": "}", + "endCaptures": { + "0": { + "name": "punctuation.section.interpolation.end" + } + }, + "patterns": [ + { + "include": "source.ts" + } + ] + } + } +} \ No newline at end of file diff --git a/packages/svelte-vscode/syntaxes/pug-svelte-tags.json b/packages/svelte-vscode/syntaxes/pug-svelte-tags.json new file mode 100644 index 000000000..dd2b19c61 --- /dev/null +++ b/packages/svelte-vscode/syntaxes/pug-svelte-tags.json @@ -0,0 +1,201 @@ +{ + "scopeName": "svelte.pug.tags", + "fileTypes": [], + "injectionSelector": "L:meta.tag.other -meta.embedded.ts", + "patterns": [ + { + "include": "#interp-object-literal" + }, + { + "include": "#interp" + }, + { + "include": "#attr-function" + }, + { + "include": "#attr-interp" + }, + { + "include": "#attr-interp-invalid-quotes" + }, + { + "include": "#attr-interp-invalid-noquotes" + }, + { + "include": "#attr-event" + }, + { + "include": "#attr-variable" + } + ], + "repository": { + "interp-object-literal": { + "contentName": "meta.interpolation meta.embedded.ts", + "begin": "(?![!$#]){\\s*?(?={)", + "beginCaptures": { + "0": { + "name": "punctuation.section.interpolation.begin" + } + }, + "end": "(?<=})\\s*?}", + "endCaptures": { + "0": { + "name": "punctuation.section.interpolation.end" + } + }, + "patterns": [ + { + "include": "source.ts#object-literal" + } + ] + }, + "interp": { + "contentName": "meta.interpolation meta.embedded.ts", + "begin": "(?![!$#]){", + "beginCaptures": { + "0": { + "name": "punctuation.section.interpolation.begin" + } + }, + "end": "}", + "endCaptures": { + "0": { + "name": "punctuation.section.interpolation.end" + } + }, + "patterns": [ + { + "include": "source.ts" + } + ] + }, + "attr-interp": { + "match": "\\b(?<=[\\w$\\-_]*)\\s*?(!=|=)\\s*?([`'\"])((?![$!#]){.*})(\\k<2>)", + "captures": { + "1": { + "patterns": [ + { + "match": "=", + "name": "invalid.illegal" + }, + { + "match": "!=", + "name": "keyword.operator.assignment" + } + ] + }, + "2": { + "name": "punctuation.section.interpolation.begin" + }, + "3": { + "patterns": [ + { + "include": "#interp" + } + ] + }, + "4": { + "name": "punctuation.section.interpolation.begin" + } + } + }, + "attr-interp-invalid-quotes": { + "match": "\\b(?<=[\\w$\\-_]*)\\s*?(!=|=)\\s*?([`'\"])((?![$!#]){.*})(?!\\k<2>)", + "captures": { + "1": { + "patterns": [ + { + "match": "=", + "name": "invalid.illegal" + }, + { + "match": "!=", + "name": "keyword.operator.assignment" + } + ] + }, + "2": { + "name": "punctuation.section.interpolation.begin" + }, + "3": { + "name": "invalid.illegal" + }, + "4": { + "name": "invalid.illegal" + } + } + }, + "attr-interp-invalid-noquotes": { + "match": "\\b(?<=[\\w$\\-_]*)\\s*?(!=|=)\\s*?(?![`'\"])((?![$!#]){.*})(?![`'\"])", + "captures": { + "1": { + "patterns": [ + { + "match": "=", + "name": "invalid.illegal" + }, + { + "match": "!=", + "name": "keyword.operator.assignment" + } + ] + }, + "2": { + "name": "invalid.illegal" + }, + "3": { + "patterns": [ + { + "include": "#interp" + } + ] + }, + "4": { + "name": "invalid.illegal" + } + } + }, + "attr-function": { + "match": "\\b(use|transition|in|out|animate)(:)(\\w+)", + "captures": { + "1": { + "name": "entity.other.attribute-name" + }, + "2": { + "name": "keyword.operator.assignment" + }, + "3": { + "name": "variable.function" + } + } + }, + "attr-event": { + "match": "\\b(on)(:)(\\w+)", + "captures": { + "1": { + "name": "entity.other.attribute-name" + }, + "2": { + "name": "keyword.operator.assignment" + }, + "3": { + "name": "entity.name.type" + } + } + }, + "attr-variable": { + "match": "\\b(bind|class|let)(:)(\\w+)", + "captures": { + "1": { + "name": "entity.other.attribute-name" + }, + "2": { + "name": "keyword.operator.assignment" + }, + "3": { + "name": "variable.parameter" + } + } + } + } +} \ No newline at end of file diff --git a/packages/svelte-vscode/syntaxes/pug-svelte.json b/packages/svelte-vscode/syntaxes/pug-svelte.json new file mode 100644 index 000000000..79a42c702 --- /dev/null +++ b/packages/svelte-vscode/syntaxes/pug-svelte.json @@ -0,0 +1,293 @@ +{ + "scopeName": "svelte.pug", + "fileTypes": [], + "injectionSelector": "L:text.pug -meta.embedded.ts -meta.tag.other -text.block.pug, L:inline.pug -meta.embedded.ts -meta.tag.other", + "patterns": [ + { + "include": "#interp-object-literal" + }, + { + "include": "#interp" + }, + { + "include": "#tag-component" + }, + { + "include": "#tag-component-no-params" + }, + { + "include": "#mixin-svelte" + }, + { + "include": "#mixin-else" + } + ], + "repository": { + "interp-object-literal": { + "contentName": "meta.interpolation meta.embedded.ts", + "begin": "(?![!$#]){\\s*?(?={)", + "beginCaptures": { + "0": { + "name": "punctuation.section.interpolation.begin" + } + }, + "end": "(?<=})\\s*?}", + "endCaptures": { + "0": { + "name": "punctuation.section.interpolation.end" + } + }, + "patterns": [ + { + "include": "source.ts#object-literal" + } + ] + }, + "interp": { + "contentName": "meta.interpolation meta.embedded.ts", + "begin": "(?![!$#]){", + "beginCaptures": { + "0": { + "name": "punctuation.section.interpolation.begin" + } + }, + "end": "}", + "endCaptures": { + "0": { + "name": "punctuation.section.interpolation.end" + } + }, + "patterns": [ + { + "include": "source.ts" + } + ] + }, + "tag-component": { + "name": "meta.tag.svelte", + "begin": "(?<=^\\s*?|#\\[\\s*?|:\\s*?)([A-Z][a-zA-Z0-9_]*)\\s*?(?=\\()", + "beginCaptures": { + "0": { + "name": "support.class.component.svelte" + } + }, + "end": "(?<=\\))", + "endCaptures": { + "0": { + "name": "constant.name.attribute.tag" + } + }, + "patterns": [ + { + "include": "text.pug#tag_attributes" + } + ] + }, + "tag-component-no-params": { + "name": "meta.tag.svelte", + "match": "(?<=^\\s*?|#\\[\\s*?|:\\s*?)([A-Z][a-zA-Z0-9_]*)", + "captures": { + "0": { + "name": "support.class.component.svelte" + } + } + }, + "mixin-svelte": { + "match": "(?<=^\\s*?|#\\[\\s*?|:\\s*?)(\\+)(debug|if|elseif|then|catch|each|await|html|key)\\s*?(\\()\\s*?([`'\"])(.*?)(\\k<4>)\\s*?(\\))", + "captures": { + "1": { + "name": "punctuation.definition.keyword" + }, + "2": { + "patterns": [ + { + "match": "debug", + "name": "keyword.other.debugger" + }, + { + "match": "if|elseif", + "name": "keyword.control.conditional" + }, + { + "match": "then|catch|await", + "name": "keyword.control.flow" + }, + { + "match": "each", + "name": "keyword.control" + }, + { + "match": "html|key", + "name": "support.function" + } + ] + }, + "3": { + "name": "meta.brace.round" + }, + "4": { + "name": "punctuation.definition.generic.begin" + }, + "5": { + "patterns": [ + { + "match": "(?<=each\\s*?\\(\\s*?')(.*)\\s+?(as\\s+?(.*?)(\\s*?,\\s*?)(.*?|)(\\s+?\\(.*\\)|)$)", + "captures": { + "1": { + "name": "meta.embedded.ts", + "patterns": [ + { + "include": "source.ts" + } + ] + }, + "2": { + "name": "keyword.control.as" + }, + "3": { + "name": "meta.embedded.t", + "patterns": [ + { + "include": "source.ts" + } + ] + }, + "4": { + "name": "punctuation.separator" + }, + "5": { + "name": "meta.embedded.t", + "patterns": [ + { + "include": "source.ts" + } + ] + }, + "6": { + "patterns": [ + { + "match": "(\\()(.*)(\\))", + "captures": { + "1": { + "name": "meta.brace.round" + }, + "2": { + "name": "variable" + }, + "3": { + "name": "meta.brace.round" + } + } + } + ] + } + } + }, + { + "match": "(?<=each\\s*?\\(\\s*?')(.*)\\s+?(as\\s+?(.*?)(\\s+?\\(.*\\)|)$)", + "captures": { + "1": { + "name": "meta.embedded.ts", + "patterns": [ + { + "include": "source.ts" + } + ] + }, + "2": { + "name": "keyword.control.as" + }, + "3": { + "name": "meta.embedded.t", + "patterns": [ + { + "include": "source.ts" + } + ] + }, + "4": { + "patterns": [ + { + "match": "(\\()(.*)(\\))", + "captures": { + "1": { + "name": "meta.brace.round" + }, + "2": { + "name": "variable" + }, + "3": { + "name": "meta.brace.round" + } + } + } + ] + } + } + }, + { + "match": "(?<=await\\s*?\\(\\s*?')(.*)\\s+?(then(.*)$)", + "captures": { + "1": { + "name": "meta.embedded.ts", + "patterns": [ + { + "include": "source.ts" + } + ] + }, + "2": { + "name": "keyword.control.flow" + }, + "3": { + "name": "variable" + } + } + }, + { + "match": "(?<=debug\\s*?\\(\\s*?')(\\w+?)(,|$)", + "captures": { + "1": { + "name": "variable" + }, + "2": { + "name": "punctuation.separator" + } + } + }, + { + "match": "(.*)$", + "captures": { + "0": { + "name": "meta.embedded.ts", + "patterns": [ + { + "include": "source.ts" + } + ] + } + } + } + ] + }, + "6": { + "name": "punctuation.definition.generic.end" + }, + "7": { + "name": "meta.brace.round" + } + } + }, + "mixin-else": { + "match": "(?<=^\\s*?|#\\[\\s*?|:\\s*?)(\\+)(else)", + "captures": { + "1": { + "name": "punctuation.definition.keyword" + }, + "2": { + "name": "keyword.control.conditional" + } + } + } + } +} \ No newline at end of file From 472c09b988b75f4cc4c73e7302e89040ccb81627 Mon Sep 17 00:00:00 2001 From: Monkatraz <34875062+Monkatraz@users.noreply.github.com> Date: Fri, 30 Oct 2020 06:39:27 -0600 Subject: [PATCH 2/3] (fix) fixed Pug syntax highlighting injecting incorrectly --- packages/svelte-vscode/syntaxes/pug-svelte-tags.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/svelte-vscode/syntaxes/pug-svelte-tags.json b/packages/svelte-vscode/syntaxes/pug-svelte-tags.json index dd2b19c61..6fe465f2f 100644 --- a/packages/svelte-vscode/syntaxes/pug-svelte-tags.json +++ b/packages/svelte-vscode/syntaxes/pug-svelte-tags.json @@ -1,7 +1,7 @@ { "scopeName": "svelte.pug.tags", "fileTypes": [], - "injectionSelector": "L:meta.tag.other -meta.embedded.ts", + "injectionSelector": "L:text.pug meta.tag.other -meta.embedded.ts", "patterns": [ { "include": "#interp-object-literal" From 1657c588c6b215d47d21b25271459446949dddca Mon Sep 17 00:00:00 2001 From: Monkatraz <34875062+Monkatraz@users.noreply.github.com> Date: Fri, 30 Oct 2020 06:42:55 -0600 Subject: [PATCH 3/3] (fix) require a space before shorthand Pug element nesting --- packages/svelte-vscode/syntaxes/pug-svelte.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/svelte-vscode/syntaxes/pug-svelte.json b/packages/svelte-vscode/syntaxes/pug-svelte.json index 79a42c702..0a34fd74a 100644 --- a/packages/svelte-vscode/syntaxes/pug-svelte.json +++ b/packages/svelte-vscode/syntaxes/pug-svelte.json @@ -65,7 +65,7 @@ }, "tag-component": { "name": "meta.tag.svelte", - "begin": "(?<=^\\s*?|#\\[\\s*?|:\\s*?)([A-Z][a-zA-Z0-9_]*)\\s*?(?=\\()", + "begin": "(?<=^\\s*?|#\\[\\s*?|:\\s+?)([A-Z][a-zA-Z0-9_]*)\\s*?(?=\\()", "beginCaptures": { "0": { "name": "support.class.component.svelte" @@ -85,7 +85,7 @@ }, "tag-component-no-params": { "name": "meta.tag.svelte", - "match": "(?<=^\\s*?|#\\[\\s*?|:\\s*?)([A-Z][a-zA-Z0-9_]*)", + "match": "(?<=^\\s*?|#\\[\\s*?|:\\s+?)([A-Z][a-zA-Z0-9_]*)", "captures": { "0": { "name": "support.class.component.svelte" @@ -93,7 +93,7 @@ } }, "mixin-svelte": { - "match": "(?<=^\\s*?|#\\[\\s*?|:\\s*?)(\\+)(debug|if|elseif|then|catch|each|await|html|key)\\s*?(\\()\\s*?([`'\"])(.*?)(\\k<4>)\\s*?(\\))", + "match": "(?<=^\\s*?|#\\[\\s*?|:\\s+?)(\\+)(debug|if|elseif|then|catch|each|await|html|key)\\s*?(\\()\\s*?([`'\"])(.*?)(\\k<4>)\\s*?(\\))", "captures": { "1": { "name": "punctuation.definition.keyword" @@ -279,7 +279,7 @@ } }, "mixin-else": { - "match": "(?<=^\\s*?|#\\[\\s*?|:\\s*?)(\\+)(else)", + "match": "(?<=^\\s*?|#\\[\\s*?|:\\s+?)(\\+)(else)", "captures": { "1": { "name": "punctuation.definition.keyword"