class and action

src/htmlxtojsx.ts

@@ -27,15 +27,49 @@ export function convertHtmlxToJsx(str: MagicString, ast: Node) {
         }
     }
 
+    const handleClassDirective = (attr: Node) => {
+        let needCurly = (attr.expression.start == attr.start + "class:".length);
+        str.overwrite(attr.start, attr.expression.start, `{...__sveltets_ensureType(Boolean, `)
+        str.appendLeft(attr.expression.end, `)${ needCurly ? "}" : "" }`)
+    }
+
+    const handleActionDirective = (attr: Node) => {
+        str.overwrite(attr.start, attr.start + "use:".length, "{...__sveltets_ensureAction(")
+
+        if (!attr.expression) {
+            str.appendLeft(attr.end, ")}");
+            return;
+        }
+
+        str.overwrite(attr.start + `use:${attr.name}`.length, attr.expression.start, ",")
+        str.appendLeft(attr.expression.end, ")");
+    }
+
+
     const handleBinding = (attr: Node, el: Node) => {
         //bind group on input
         if (attr.name == "group" && el.name == "input") {
             str.remove(attr.start, attr.start+"bind:group=".length);
-            str.prependRight(attr.expression.start,"...__sveltets_ensureString(")
+            str.prependRight(attr.expression.start,"...__sveltets_ensureType(String, ")
             str.appendLeft(attr.expression.end,")")
             return;
         }
 
+        //bind this on element
+        if (attr.name == "this" && el.type == "Element") {
+            str.remove(attr.start, attr.start + "bind:this=".length)
+            str.prependRight(attr.expression.start, "...__sveltets_ensureType(HTMLElement, ");
+            str.appendLeft(attr.expression.end, ")");
+            return;
+        }
+
+         //bind this on component
+         if (attr.name == "this" && el.type == "InlineComponent") {
+            str.remove(attr.start, attr.start + "bind:this=".length)
+            str.prependRight(attr.expression.start, `...__sveltets_ensureType(${el.name}, `);
+            str.appendLeft(attr.expression.end, ")");
+            return;
+        }
 
 
         str.remove(attr.start,attr.start+"bind:".length);
@@ -44,6 +78,7 @@ export function convertHtmlxToJsx(str: MagicString, ast: Node) {
         }
     }
 
+
     const handleComponentEventHandler = (attr: Node) => {
         if (attr.expression) {
             //for handler assignment, we changeIt to call to our __sveltets_ensureFunction
@@ -163,28 +198,28 @@ export function convertHtmlxToJsx(str: MagicString, ast: Node) {
                 handleRaw(node);
             if (node.type == "DebugTag")
                 handleDebug(node);
-            if (node.type == "Element") {
+            if (node.type == "Element" || node.type == "InlineComponent") {
                 for(let attr of node.attributes) {
                     if (attr.type == "EventHandler") {
-                        handleElementEventHandler(attr);
+                        if (node.type == "Element") {
+                            handleElementEventHandler(attr);
+                        } else {
+                            handleComponentEventHandler(attr);
+                        }
                     }
                     if (attr.type == "Binding") {
                         handleBinding(attr, node);
                     }
-                }
-            }
 
-            if (node.type == "InlineComponent") {
-                for(let attr of node.attributes) {
-                    if (attr.type == "EventHandler") {
-                        handleComponentEventHandler(attr);
+                    if (attr.type == "Class") {
+                        handleClassDirective(attr);
                     }
-                    if (attr.type == "Binding") {
-                        handleBinding(attr, node);
+
+                    if (attr.type == "Action") {
+                        handleActionDirective(attr);
                     }
                 }
             }
-
         }
     });
 }

svelte-shims.d.ts

@@ -4,5 +4,15 @@ declare module '*.svelte' {
     }
 }
 
+type AConstructorTypeOf<T> = new (...args:any[]) => T;
+
+type SvelteAction<U extends any[]> = (node: HTMLElement, ...args:U) => {
+	update?: (...args:U) => void,
+	destroy?: () => void
+}
+
+declare function __sveltets_ensureAction<U extends any[]>(action: SvelteAction<U>, ...args: U): any[];
+
 declare function __sveltets_ensureFunction(expression: (e: Event) => unknown ):any[];
-declare function __sveltets_ensureString(expression: String ):any[];
+
+declare function __sveltets_ensureType<T>(type: AConstructorTypeOf<T>, el: T): any[];

test/htmlx2jsx/samples/action-bare/expected.jsx

@@ -0,0 +1 @@
+<><h1 {...__sveltets_ensureAction(blink)}>Hello</h1></>

test/htmlx2jsx/samples/action-bare/input.svelte

@@ -0,0 +1 @@
+<h1 use:blink>Hello</h1>

test/htmlx2jsx/samples/action-params/expected.jsx

@@ -0,0 +1 @@
+<><h1 {...__sveltets_ensureAction(blink,500,2)}>Hello</h1></>

test/htmlx2jsx/samples/action-params/input.svelte

@@ -0,0 +1 @@
+<h1 use:blink={500,2}>Hello</h1>

test/htmlx2jsx/samples/binding-group/expected.jsx

@@ -1 +1 @@
-<><input type="radio" {...__sveltets_ensureString(tortilla)} value="Plain"/></>
+<><input type="radio" {...__sveltets_ensureType(String, tortilla)} value="Plain"/></>

test/htmlx2jsx/samples/binding-this-component/expected.jsx

@@ -0,0 +1 @@
+<><Component type="radio" {...__sveltets_ensureType(Component, element)} value="Plain"/></>

test/htmlx2jsx/samples/binding-this-component/input.svelte

@@ -0,0 +1 @@
+<Component type="radio" bind:this={element} value="Plain"/>

test/htmlx2jsx/samples/binding-this/expected.jsx

@@ -0,0 +1 @@
+<><input type="radio" {...__sveltets_ensureType(HTMLElement, element)} value="Plain"/></>

test/htmlx2jsx/samples/binding-this/input.svelte

@@ -0,0 +1 @@
+<input type="radio" bind:this={element} value="Plain"/>

test/htmlx2jsx/samples/class-bare/expected.jsx

@@ -0,0 +1 @@
+<><h1 {...__sveltets_ensureType(Boolean, active)}>Hello</h1></>

test/htmlx2jsx/samples/class-bare/input.svelte

@@ -0,0 +1 @@
+<h1 class:active>Hello</h1>

test/htmlx2jsx/samples/class/expected.jsx

@@ -0,0 +1 @@
+<><h1 {...__sveltets_ensureType(Boolean, "test"=="test")}>Hello</h1></>

test/htmlx2jsx/samples/class/input.svelte

@@ -0,0 +1 @@
+<h1 class:active={"test"=="test"}>Hello</h1>