(feat) support style directive (#1332)

dummdidumm · web-flow · commit e4c2194be4f0 · 2022-01-13T09:45:21.000+01:00
Requires Svelte 3.46.1 or higher
diff --git a/packages/language-server/package.json b/packages/language-server/package.json
@@ -55,7 +55,7 @@
         "prettier": "2.5.1",
         "prettier-plugin-svelte": "~2.5.0",
         "source-map": "^0.7.3",
-        "svelte": "^3.38.2",
+        "svelte": "^3.46.1",
         "svelte-preprocess": "~4.10.1",
         "svelte2tsx": "~0.4.0",
         "typescript": "*",
diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive.only/expected.json b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive.only/expected.json
@@ -0,0 +1,24 @@
+[
+    {
+        "range": {
+            "start": { "line": 13, "character": 11 },
+            "end": { "line": 13, "character": 16 }
+        },
+        "severity": 1,
+        "source": "ts",
+        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String'.",
+        "code": 2345,
+        "tags": []
+    },
+    {
+        "range": {
+            "start": { "line": 14, "character": 18 },
+            "end": { "line": 14, "character": 23 }
+        },
+        "severity": 1,
+        "source": "ts",
+        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String'.",
+        "code": 2345,
+        "tags": []
+    }
+]
diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive.only/input.svelte b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive.only/input.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	let right = 'string';
+	let wrong = true;
+</script>
+
+<!-- ok -->
+<div style:right />
+<div style:right={right} />
+<div style:right="right" />
+<div style:right={`right${right}`} />
+<div style:right=right{right} />
+
+<!-- error -->
+<div style:wrong />
+<div style:wrong={wrong} />
diff --git a/packages/svelte2tsx/package.json b/packages/svelte2tsx/package.json
@@ -34,7 +34,7 @@
         "source-map": "^0.6.1",
         "source-map-support": "^0.5.16",
         "sourcemap-codec": "^1.4.8",
-        "svelte": "~3.44.3",
+        "svelte": "~3.46.1",
         "tiny-glob": "^0.2.6",
         "tslib": "^1.10.0",
         "typescript": "^4.5.3"
diff --git a/packages/svelte2tsx/src/htmlxtojsx/index.ts b/packages/svelte2tsx/src/htmlxtojsx/index.ts
@@ -1,7 +1,7 @@
 import MagicString from 'magic-string';
 import { walk } from 'svelte/compiler';
 import { TemplateNode, Text } from 'svelte/types/compiler/interfaces';
-import { Attribute, BaseDirective, BaseNode } from '../interfaces';
+import { Attribute, BaseDirective, BaseNode, StyleDirective } from '../interfaces';
 import { parseHtmlx } from '../utils/htmlxparser';
 import { getSlotName } from '../utils/svelteAst';
 import { handleActionDirective } from './nodes/action-directive';
@@ -21,6 +21,7 @@ import { IfScope } from './nodes/if-scope';
 import { handleKey } from './nodes/key';
 import { handleRawHtml } from './nodes/raw-html';
 import { handleSlot } from './nodes/slot';
+import { handleStyleDirective } from './nodes/style-directive';
 import { handleSvelteTag } from './nodes/svelte-tag';
 import { TemplateScopeManager } from './nodes/template-scope';
 import { handleText } from './nodes/text';
@@ -130,6 +131,9 @@ export function convertHtmlxToJsx(
                     case 'Class':
                         handleClassDirective(str, node as BaseDirective);
                         break;
+                    case 'StyleDirective':
+                        handleStyleDirective(str, node as StyleDirective);
+                        break;
                     case 'Action':
                         handleActionDirective(htmlx, str, node as BaseDirective, parent);
                         break;
diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/attribute.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/attribute.ts
@@ -1,6 +1,6 @@
 import MagicString from 'magic-string';
 import svgAttributes from '../svgattributes';
-import { isQuote } from '../utils/node-utils';
+import { buildTemplateString } from '../utils/node-utils';
 import { Attribute, BaseNode } from '../../interfaces';
 
 /**
@@ -109,6 +109,7 @@ export function handleAttribute(
     if (attr.value.length == 0) {
         return; //wut?
     }
+
     //handle single value
     if (attr.value.length == 1) {
         const attrVal = attr.value[0];
@@ -203,29 +204,6 @@ export function handleAttribute(
     );
 }
 
-function buildTemplateString(
-    attr: Attribute,
-    str: MagicString,
-    htmlx: string,
-    leadingOverride: string,
-    trailingOverride: string
-) {
-    const equals = htmlx.lastIndexOf('=', attr.value[0].start);
-    str.overwrite(equals, attr.value[0].start, leadingOverride);
-
-    for (const n of attr.value as BaseNode[]) {
-        if (n.type == 'MustacheTag') {
-            str.appendRight(n.start, '$');
-        }
-    }
-
-    if (isQuote(htmlx[attr.end - 1])) {
-        str.overwrite(attr.end - 1, attr.end, trailingOverride);
-    } else {
-        str.appendLeft(attr.end, trailingOverride);
-    }
-}
-
 function sanitizeLeadingChars(attrName: string): string {
     let sanitizedName = '';
     for (let i = 0; i < attrName.length; i++) {
diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/style-directive.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/style-directive.ts
@@ -0,0 +1,48 @@
+import MagicString from 'magic-string';
+import { StyleDirective } from '../../interfaces';
+import { buildTemplateString } from '../utils/node-utils';
+
+/**
+ * style:xx         --->  __sveltets_1_ensureType(String, xx);
+ * style:xx={yy}    --->  __sveltets_1_ensureType(String, yy);
+ * style:xx="yy"    --->  __sveltets_1_ensureType(String, "yy");
+ * style:xx="a{b}"  --->  __sveltets_1_ensureType(String, `a${b}`);
+ */
+export function handleStyleDirective(str: MagicString, style: StyleDirective): void {
+    const htmlx = str.original;
+    if (style.value === true || style.value.length === 0) {
+        str.overwrite(
+            style.start,
+            htmlx.indexOf(':', style.start) + 1,
+            '{...__sveltets_1_ensureType(String, '
+        );
+        str.appendLeft(style.end, ')}');
+        return;
+    }
+
+    if (style.value.length > 1) {
+        buildTemplateString(
+            style,
+            str,
+            htmlx,
+            '{...__sveltets_1_ensureType(String, `',
+            '`)}',
+            style.start
+        );
+        return;
+    }
+
+    const styleVal = style.value[0];
+    if (styleVal.type === 'Text') {
+        str.overwrite(style.start, styleVal.start, '{...__sveltets_1_ensureType(String, "');
+        if (styleVal.end === style.end) {
+            str.appendLeft(style.end, '")}');
+        } else {
+            str.overwrite(styleVal.end, style.end, '")}');
+        }
+    } else {
+        // MustacheTag
+        str.overwrite(style.start, styleVal.start + 1, '{...__sveltets_1_ensureType(String, ');
+        str.overwrite(styleVal.end - 1, style.end, ')}');
+    }
+}
diff --git a/packages/svelte2tsx/src/htmlxtojsx/utils/node-utils.ts b/packages/svelte2tsx/src/htmlxtojsx/utils/node-utils.ts
@@ -1,6 +1,6 @@
 import { Node, walk } from 'estree-walker';
 import MagicString from 'magic-string';
-import { BaseNode } from '../../interfaces';
+import { Attribute, BaseNode } from '../../interfaces';
 import { surroundWithIgnoreComments } from '../../utils/ignore';
 
 /**
@@ -249,3 +249,27 @@ export function getIdentifiersInIfExpression(
 export function usesLet(node: BaseNode): boolean {
     return node.attributes?.some((attr) => attr.type === 'Let');
 }
+
+export function buildTemplateString(
+    attr: Attribute,
+    str: MagicString,
+    htmlx: string,
+    leadingOverride: string,
+    trailingOverride: string,
+    overrideStart?: number
+) {
+    overrideStart = overrideStart ?? htmlx.lastIndexOf('=', attr.value[0].start);
+    str.overwrite(overrideStart, attr.value[0].start, leadingOverride);
+
+    for (const n of attr.value as BaseNode[]) {
+        if (n.type == 'MustacheTag') {
+            str.appendRight(n.start, '$');
+        }
+    }
+
+    if (isQuote(htmlx[attr.end - 1])) {
+        str.overwrite(attr.end - 1, attr.end, trailingOverride);
+    } else {
+        str.appendLeft(attr.end, trailingOverride);
+    }
+}
diff --git a/packages/svelte2tsx/src/interfaces.ts b/packages/svelte2tsx/src/interfaces.ts
@@ -36,3 +36,7 @@ export interface BaseDirective extends BaseNode {
 export interface Attribute extends BaseNode {
     value: BaseNode[] | true;
 }
+
+export interface StyleDirective extends BaseNode {
+    value: BaseNode[] | true;
+}
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/expected.jsx
@@ -0,0 +1,13 @@
+<><div {...__sveltets_1_ensureType(String, shorthand)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, value)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, value)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, value)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, "string")}>Hello</div>
+<div {...__sveltets_1_ensureType(String, "string")}>Hello</div>
+<div {...__sveltets_1_ensureType(String, `string${mixed}`)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, `string${mixed}`)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, `${mixed}string`)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, `string${mixed}string`)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, `template${literal}`)}>Hello</div>
+
+<div {...__sveltets_1_ensureType(String, shorthand)} /></>
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/input.svelte
@@ -0,0 +1,13 @@
+<div style:shorthand>Hello</div>
+<div style:attr={value}>Hello</div>
+<div style:value={value}>Hello</div>
+<div style:attr="{value}">Hello</div>
+<div style:attr="string">Hello</div>
+<div style:attr=string>Hello</div>
+<div style:attr="string{mixed}">Hello</div>
+<div style:attr=string{mixed}>Hello</div>
+<div style:attr="{mixed}string">Hello</div>
+<div style:attr="string{mixed}string">Hello</div>
+<div style:attr={`template${literal}`}>Hello</div>
+
+<div style:shorthand />
diff --git a/yarn.lock b/yarn.lock
@@ -2552,10 +2552,10 @@ svelte-preprocess@~4.10.1:
     sorcery "^0.10.0"
     strip-indent "^3.0.0"
 
-svelte@^3.38.2, svelte@~3.44.3:
-  version "3.44.3"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.44.3.tgz#795b1ced6ed3da44969099e5061b850c93c95e9a"
-  integrity sha512-aGgrNCip5PQFNfq9e9tmm7EYxWLVHoFsEsmKrtOeRD8dmoGDdyTQ+21xd7qgFd8MNdKGSYvg7F9dr+Tc0yDymg==
+svelte@^3.46.1, svelte@~3.46.1:
+  version "3.46.1"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.46.1.tgz#8ea23595824a39d47d04c16c217000fbc4c52c49"
+  integrity sha512-Ue8ivq+G45AfZZL4Z93xNFiC352wPkyGiY9QSuWjxXh6jiaZMrpthinjc1rz0OSTceuST7Pxr1HDBj2KioliZg==
 
 table@^5.2.3:
   version "5.4.6"

Original file line number	Diff line number	Diff line change
`@@ -36,3 +36,7 @@ export interface BaseDirective extends BaseNode {`
`36`	`36`	`export interface Attribute extends BaseNode {`
`37`	`37`	`value: BaseNode[] \| true;`
`38`	`38`	`}`
	`39`	`+`
	`40`	`+export interface StyleDirective extends BaseNode {`
	`41`	`+ value: BaseNode[] \| true;`
	`42`	`+}`