(feat) rewrite svelte2tsx

packages/svelte2tsx/index.d.ts

@@ -44,8 +44,18 @@ export function svelte2tsx(
          * It is expected to pass the result to TypeScript which should handle emitting the d.ts files.
          * The shims need to be provided by the user ambient-style,
          * for example through `filenames.push(require.resolve('svelte2tsx/svelte-shims.d.ts'))`.
+         * If you pass 'ts', it uses the new transformation which will replace the now deprecated 'tsx'
+         * transformation soon.
          */
-        mode?: 'tsx' | 'dts',
+        mode?: 'ts' | 'tsx' | 'dts',
+        /**
+         * Takes effect when using the new 'ts' mode. Default 'html'.
+         * Tells svelte2tsx which function and corresponding typings to use when doing the transformation.
+         * - 'html' -> ..createElement<..>(..)
+         * - 'native' -> ..createElementNative<..>(..)
+         * - 'any' -> ..createElementAny<..>(..)
+         */
+        typingsNamespace?: 'html' | 'native' | 'any';
         /**
          * The accessor option from svelte config. 
          * Would be overridden by the same config in the svelte:option element if exist

packages/svelte2tsx/repl/debug.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
-import { svelte2tsx } from '../src';
+import { svelte2tsx } from '../src/svelte2tsx/index';
 const content = fs.readFileSync(`${__dirname}/index.svelte`, 'utf-8');
-svelte2tsx(content);
+console.log(svelte2tsx(content).code);
 /**
  * To enable the REPL, simply run the "dev" package script.
  *

packages/svelte2tsx/src/htmlxtojsx_v2/index.ts

@@ -0,0 +1,207 @@
+import MagicString from 'magic-string';
+import { walk } from 'svelte/compiler';
+import { TemplateNode, Text } from 'svelte/types/compiler/interfaces';
+import { Attribute, BaseNode, BaseDirective } from '../interfaces';
+import { parseHtmlx } from '../utils/htmlxparser';
+import { handleActionDirective } from './nodes/Action';
+import { handleAnimateDirective } from './nodes/Animation';
+import { handleAttribute } from './nodes/Attribute';
+import { handleAwait } from './nodes/AwaitPendingCatchBlock';
+import { handleBinding } from './nodes/Binding';
+import { handleClassDirective } from './nodes/Class';
+import { handleComment } from './nodes/Comment';
+import { handleDebug } from './nodes/DebugTag';
+import { handleEach } from './nodes/EachBlock';
+import { Element } from './nodes/Element';
+import { handleEventHandler } from './nodes/EventHandler';
+import { handleElse, handleIf } from './nodes/IfElseBlock';
+import { InlineComponent } from './nodes/InlineComponent';
+import { handleKey } from './nodes/Key';
+import { handleMustacheTag } from './nodes/MustacheTag';
+import { handleRawHtml } from './nodes/RawMustacheTag';
+import { handleText } from './nodes/Text';
+import { handleTransitionDirective } from './nodes/Transition';
+
+type Walker = (node: TemplateNode, parent: BaseNode, prop: string, index: number) => void;
+
+function stripDoctype(str: MagicString): void {
+    const regex = /<!doctype(.+?)>(\n)?/i;
+    const result = regex.exec(str.original);
+    if (result) {
+        str.remove(result.index, result.index + result[0].length);
+    }
+}
+
+/**
+ * Walks the HTMLx part of the Svelte component
+ * and converts it to JSX
+ */
+export function convertHtmlxToJsx(
+    str: MagicString,
+    ast: TemplateNode,
+    onWalk: Walker = null,
+    onLeave: Walker = null,
+    options: { preserveAttributeCase?: boolean; typingsNamespace?: 'html' | 'native' | 'any' } = {}
+): void {
+    const htmlx = str.original;
+    options = { preserveAttributeCase: false, typingsNamespace: 'html', ...options };
+    htmlx;
+    stripDoctype(str);
+
+    let element: Element | InlineComponent | undefined;
+
+    walk(ast, {
+        enter: (node: TemplateNode, parent: BaseNode, prop: string, index: number) => {
+            try {
+                switch (node.type) {
+                    case 'IfBlock':
+                        handleIf(str, node);
+                        break;
+                    case 'EachBlock':
+                        handleEach(str, node);
+                        break;
+                    case 'ElseBlock':
+                        handleElse(str, node, parent);
+                        break;
+                    case 'KeyBlock':
+                        handleKey(str, node);
+                        break;
+                    case 'MustacheTag':
+                        handleMustacheTag(str, node, parent);
+                        break;
+                    case 'RawMustacheTag':
+                        handleRawHtml(str, node);
+                        break;
+                    case 'DebugTag':
+                        handleDebug(str, node);
+                        break;
+                    case 'InlineComponent':
+                        if (element) {
+                            element.child = new InlineComponent(str, node, element);
+                            element = element.child;
+                        } else {
+                            element = new InlineComponent(str, node);
+                        }
+                        break;
+                    case 'Element':
+                        if (node.name !== '!DOCTYPE') {
+                            if (element) {
+                                element.child = new Element(
+                                    str,
+                                    node,
+                                    options.typingsNamespace,
+                                    element
+                                );
+                                element = element.child;
+                            } else {
+                                element = new Element(str, node, options.typingsNamespace);
+                            }
+                        }
+                        break;
+                    case 'Comment':
+                        handleComment(str, node);
+                        break;
+                    case 'Binding':
+                        handleBinding(str, node as BaseDirective, parent, element);
+                        break;
+                    case 'Class':
+                        handleClassDirective(str, node as BaseDirective, element as Element);
+                        break;
+                    case 'Action':
+                        handleActionDirective(str, node as BaseDirective, element as Element);
+                        break;
+                    case 'Transition':
+                        handleTransitionDirective(str, node as BaseDirective, element as Element);
+                        break;
+                    case 'Animation':
+                        handleAnimateDirective(str, node as BaseDirective, element as Element);
+                        break;
+                    case 'Attribute':
+                        handleAttribute(
+                            str.original,
+                            str,
+                            node as Attribute,
+                            parent,
+                            options.preserveAttributeCase,
+                            element
+                        );
+                        break;
+                    case 'EventHandler':
+                        handleEventHandler(str, node as BaseDirective, element);
+                        break;
+                    case 'Options':
+                        break;
+                    case 'Window':
+                        break;
+                    case 'Head':
+                        break;
+                    case 'Body':
+                        break;
+                    case 'SlotTemplate':
+                        break;
+                    case 'Text':
+                        handleText(str, node as Text, parent);
+                        break;
+                }
+                if (onWalk) {
+                    onWalk(node, parent, prop, index);
+                }
+            } catch (e) {
+                console.error('Error walking node ', node, e);
+                throw e;
+            }
+        },
+
+        leave: (node: TemplateNode, parent: BaseNode, prop: string, index: number) => {
+            try {
+                switch (node.type) {
+                    case 'IfBlock':
+                        break;
+                    case 'EachBlock':
+                        break;
+                    case 'AwaitBlock':
+                        handleAwait(str, node);
+                        break;
+                    case 'SlotTemplate':
+                        break;
+                    case 'InlineComponent':
+                    case 'Element':
+                        if (node.name !== '!DOCTYPE') {
+                            element.performTransformation();
+                            element = element.parent;
+                        }
+                        break;
+                }
+                if (onLeave) {
+                    onLeave(node, parent, prop, index);
+                }
+            } catch (e) {
+                console.error('Error leaving node ', node);
+                throw e;
+            }
+        }
+    });
+}
+
+/**
+ * @internal For testing only
+ */
+export function htmlx2jsx(
+    htmlx: string,
+    options?: {
+        emitOnTemplateError?: boolean;
+        preserveAttributeCase: boolean;
+        typingsNamespace: 'html' | 'native' | 'any';
+    }
+) {
+    const ast = parseHtmlx(htmlx, options).htmlxAst;
+    const str = new MagicString(htmlx);
+
+    convertHtmlxToJsx(str, ast, null, null, options);
+    console.log('after');
+
+    return {
+        map: str.generateMap({ hires: true }),
+        code: str.toString()
+    };
+}

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

@@ -0,0 +1,24 @@
+import MagicString from 'magic-string';
+import { BaseDirective } from '../../interfaces';
+import { getDirectiveNameStartEndIdx, TransformationArray } from '../utils/node-utils';
+import { Element } from './Element';
+
+/**
+ * use:xxx={params}   --->    __sveltets_2_ensureAction(xxx(__sveltets_2_mapElementTag('ParentNodeName'),(params)));
+ */
+export function handleActionDirective(
+    str: MagicString,
+    attr: BaseDirective,
+    element: Element
+): void {
+    const transformations: TransformationArray = [
+        '__sveltets_2_ensureAction(',
+        getDirectiveNameStartEndIdx(str, attr),
+        `(__sveltets_2_mapElementTag('${element.tagName}')`
+    ];
+    if (attr.expression) {
+        transformations.push(',(', [attr.expression.start, attr.expression.end], ')');
+    }
+    transformations.push('));');
+    element.appendToStartEnd(transformations);
+}

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

@@ -0,0 +1,24 @@
+import MagicString from 'magic-string';
+import { BaseDirective } from '../../interfaces';
+import { getDirectiveNameStartEndIdx, TransformationArray } from '../utils/node-utils';
+import { Element } from './Element';
+
+/**
+ * animate:xxx(yyy)   --->   __sveltets_2_ensureAnimation(xxx(__sveltets_1_mapElementTag('..'),__sveltets_2_AnimationMove,(yyy)));
+ */
+export function handleAnimateDirective(
+    str: MagicString,
+    attr: BaseDirective,
+    element: Element
+): void {
+    const transformations: TransformationArray = [
+        '__sveltets_2_ensureAnimation(',
+        getDirectiveNameStartEndIdx(str, attr),
+        `(__sveltets_2_mapElementTag('${element.tagName}'),__sveltets_2_AnimationMove,(`
+    ];
+    if (attr.expression) {
+        transformations.push(',(', [attr.expression.start, attr.expression.end], ')');
+    }
+    transformations.push('));');
+    element.appendToStartEnd(transformations);
+}