(feat) add support for svelte:element (#1437)

#1435

packages/language-server/package.json

@@ -53,9 +53,9 @@
         "fast-glob": "^3.2.7",
         "lodash": "^4.17.21",
         "prettier": "2.5.1",
-        "prettier-plugin-svelte": "~2.6.0",
+        "prettier-plugin-svelte": "~2.7.0",
         "source-map": "^0.7.3",
-        "svelte": "^3.46.1",
+        "svelte": "^3.47.0",
         "svelte-preprocess": "~4.10.1",
         "svelte2tsx": "~0.5.0",
         "typescript": "*",

packages/language-server/src/plugins/html/dataProvider.ts

@@ -85,6 +85,18 @@ const svelteTags: ITagData[] = [
             }
         ]
     },
+    {
+        name: 'svelte:element',
+        description:
+            'Renders a DOM element dynamically, using the string as the this property. When the property changes, the element is destroyed and recreated.\n\nIf this is falsy, no element is rendered.',
+        attributes: [
+            {
+                name: 'this',
+                description:
+                    'DOM element to render.\n\nWhen this property changes, the element is destroyed and recreated.\nIf this is falsy, no element is rendered.'
+            }
+        ]
+    },
     {
         name: 'svelte:window',
         description:

packages/language-server/test/plugins/svelte/features/getDiagnostics.test.ts

@@ -471,12 +471,11 @@ describe('SveltePlugin#getDiagnostics', () => {
 
         assert.deepStrictEqual(diagnostics, [
             {
-                range: { start: { line: 1, character: 15 }, end: { line: 1, character: 27 } },
-                message:
-                    "Component has unused export property 'name'. If it is for external reference only, please consider using `export const name`",
+                range: { start: { line: 1, character: 4 }, end: { line: 1, character: 26 } },
+                message: '$: has no effect in a module script',
                 severity: 2,
                 source: 'svelte',
-                code: 'unused-export-let'
+                code: 'module-script-reactive-declaration'
             }
         ]);
     });

packages/language-server/test/plugins/svelte/testfiles/diagnostics-module.svelte

@@ -1,3 +1,3 @@
 <script context="module" lang="ts">
-    export let name: string;
+    $: console.log('foo');
 </script>

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/svelte-element/expected.json

@@ -0,0 +1,9 @@
+[
+    {
+        "range": { "start": { "line": 10, "character": 0 }, "end": { "line": 10, "character": 0 } },
+        "severity": 1,
+        "source": "js",
+        "message": "<svelte:element> must have a 'this' attribute",
+        "code": -1
+    }
+]

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/svelte-element/expectedv2.json

@@ -0,0 +1,9 @@
+[
+    {
+        "range": { "start": { "line": 10, "character": 0 }, "end": { "line": 10, "character": 0 } },
+        "severity": 1,
+        "source": "js",
+        "message": "<svelte:element> must have a 'this' attribute",
+        "code": -1
+    }
+]

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/svelte-element/input.svelte

@@ -0,0 +1,11 @@
+<script>
+  let tag = 'div';
+</script>
+
+<!-- valid -->
+<svelte:element this={tag} />
+<svelte:element this={tag}>{tag}</svelte:element>
+<svelte:element this={tag} on:click={() => tag} />
+
+<!-- error -->
+<svelte:element />

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.46.1",
+        "svelte": "~3.47.0",
         "tiny-glob": "^0.2.6",
         "tslib": "^1.10.0",
         "typescript": "^4.6.2"

packages/svelte2tsx/src/htmlxtojsx/index.ts

@@ -111,6 +111,9 @@ export function convertHtmlxToJsx(
                         );
                         break;
                     case 'Element':
+                        if (node.name === 'svelte:element') {
+                            handleSvelteTag(htmlx, str, node);
+                        }
                         templateScopeManager.componentOrSlotTemplateOrElementEnter(node);
                         handleElement(
                             htmlx,

packages/svelte2tsx/src/htmlxtojsx/nodes/svelte-tag.ts

@@ -3,7 +3,7 @@ import { BaseNode } from '../../interfaces';
 
 /**
  * `<svelte:window>...</svelte:window>`   ---->    `<sveltewindow>...</sveltewindow>`
- * (same for :head, :body, :options, :fragment)
+ * (same for :head, :body, :options, :fragment, :element)
  */
 export function handleSvelteTag(htmlx: string, str: MagicString, node: BaseNode): void {
     const colon = htmlx.indexOf(':', node.start);

packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts

@@ -11,7 +11,7 @@ import {
 const voidTags = 'area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr'.split(',');
 
 /**
- * Handles HTML elements as well as svelte:options, svelte:head, svelte:window, svelte:body
+ * Handles HTML elements as well as svelte:options, svelte:head, svelte:window, svelte:body, svelte:element
  *
  * Children of this element should call the methods on this class to add themselves to the correct
  * position within the transformation.
@@ -94,6 +94,7 @@ export class Element {
             case 'svelte:head':
             case 'svelte:window':
             case 'svelte:body':
+            case 'svelte:element':
             case 'svelte:fragment': {
                 // remove the colon: svelte:xxx -> sveltexxx
                 const nodeName = `svelte${this.node.name.substring(7)}`;

packages/svelte2tsx/svelte-jsx.d.ts

@@ -298,6 +298,7 @@ declare namespace svelteHTML {
     sveltefragment: { slot?: string; };
     svelteoptions: { [name: string]: any };
     sveltehead: { [name: string]: any };
+    svelteelement: { 'this': string | undefined | null; } & HTMLProps<any> & SVGProps<any>;
 
     [name: string]: { [name: string]: any };
   }
@@ -1453,6 +1454,7 @@ declare namespace svelte.JSX {
       sveltefragment: { slot?: string; };
       svelteoptions: { [name: string]: any };
       sveltehead: { [name: string]: any };
+      svelteelement: { 'this': string | undefined | null; } & HTMLProps<any> & SVGProps<any>;
 
       [name: string]: { [name: string]: any };
     }

packages/svelte2tsx/test/svelte2tsx/samples/svelte-element/expected.tsx

@@ -0,0 +1,14 @@
+///<reference types="svelte" />
+<></>;function render() {
+
+  let tag = 'div';
+;
+() => (<>
+
+<svelteelement this={tag} />
+<svelteelement this={tag}>{tag}</svelteelement>
+<svelteelement this={tag} onclick={() => tag} /></>);
+return { props: {}, slots: {}, getters: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {
+}

packages/svelte2tsx/test/svelte2tsx/samples/svelte-element/expectedv2.ts

@@ -0,0 +1,14 @@
+///<reference types="svelte" />
+;function render() {
+
+  let tag = 'div';
+;
+async () => {
+
+ { svelteHTML.createElement("svelteelement", { });}
+ { svelteHTML.createElement("svelteelement", { });tag; }
+ { svelteHTML.createElement("svelteelement", {   "onclick":() => tag,});}};
+return { props: {}, slots: {}, getters: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {
+}

packages/svelte2tsx/test/svelte2tsx/samples/svelte-element/input.svelte

@@ -0,0 +1,7 @@
+<script>
+  let tag = 'div';
+</script>
+
+<svelte:element this={tag} />
+<svelte:element this={tag}>{tag}</svelte:element>
+<svelte:element this={tag} on:click={() => tag} />

yarn.lock

@@ -2093,10 +2093,10 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier-plugin-svelte@~2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.6.0.tgz#0e845b560b55cd1d951d6c50431b4949f8591746"
-  integrity sha512-NPSRf6Y5rufRlBleok/pqg4+1FyGsL0zYhkYP6hnueeL1J/uCm3OfOZPsLX4zqD9VAdcXfyEL2PYqGv8ZoOSfA==
+prettier-plugin-svelte@~2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.7.0.tgz#ecfa4fe824238a4466a3497df1a96d15cf43cabb"
+  integrity sha512-fQhhZICprZot2IqEyoiUYLTRdumULGRvw0o4dzl5jt0jfzVWdGqeYW27QTWAeXhoupEZJULmNoH3ueJwUWFLIA==
 
 prettier@2.3.2:
   version "2.3.2"
@@ -2533,10 +2533,10 @@ svelte-preprocess@~4.10.1:
     sorcery "^0.10.0"
     strip-indent "^3.0.0"
 
-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==
+svelte@^3.47.0, svelte@~3.47.0:
+  version "3.47.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.47.0.tgz#ba46fe4aea99fc650d6939c215cd4694f5325a19"
+  integrity sha512-4JaJp3HEoTCGARRWZQIZDUanhYv0iyoHikklVHVLH9xFE9db22g4TDv7CPeNA8HD1JgjXI1vlhR1JZvvhaTu2Q==
 
 table@^5.2.3:
   version "5.4.6"