(feat) support svelte:element (#285)

Author: dummdidumm

CHANGELOG.md

@@ -1,7 +1,8 @@
 # prettier-plugin-svelte changelog
 
-## 2.6.1 (Unreleased)
+## 2.7.0 (Unreleased)
 
+* (feat) support `<svelte:element>` ([#284](https://github.com/sveltejs/prettier-plugin-svelte/pull/284)) 
 * (fix) respect whitespace "ignore" setting for components ([#281](https://github.com/sveltejs/prettier-plugin-svelte/issues/281)) 
 
 ## 2.6.0

package-lock.json

@@ -37,7 +37,7 @@
         "prettier": "^2.4.1",
         "rollup": "2.36.0",
         "rollup-plugin-typescript": "1.0.1",
-        "svelte": "^3.46.1",
+        "svelte": "^3.47.0",
         "ts-node": "^9.1.1",
         "tslib": "^2.0.3",
         "typescript": "4.1.3"

package.json

@@ -202,6 +202,25 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
             const possibleThisBinding =
                 node.type === 'InlineComponent' && node.expression
                     ? concat([line, 'this=', ...printJsExpression()])
+                    : node.type === 'Element' && node.tag
+                    ? concat([
+                          line,
+                          'this=',
+                          ...(typeof node.tag === 'string'
+                              ? [`"${node.tag}"`]
+                              : [
+                                    open,
+                                    printJS(
+                                        path,
+                                        print,
+                                        options.svelteStrictMode,
+                                        false,
+                                        false,
+                                        'tag',
+                                    ),
+                                    close,
+                                ]),
+                      ])
                     : '';
 
             if (isSelfClosingTag) {

src/print/index.ts

@@ -17,6 +17,10 @@ export interface ElementNode extends BaseNode {
     name: string;
     attributes: Node[];
     children: Node[];
+    /**
+     * only on svelte:element
+     */
+    tag?: Node;
 }
 
 export interface TextNode extends BaseNode {

src/print/nodes.ts

@@ -0,0 +1,10 @@
+<script>
+    let tag = "div";
+</script>
+
+<svelte:element this={tag} />
+<svelte:element this="hello" />
+<svelte:element this={"hello"} />
+<!-- Bug, will be fixed soon: -->
+<!-- <svelte:element this="asd{tag}" /> -->
+<svelte:element this={`asd${tag}`} />