diff --git a/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
new file mode 100644
index 0000000000..78cae92833
--- /dev/null
+++ b/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
@@ -0,0 +1,1418 @@
+// Vitest Snapshot v1
+
+exports[`Parse JSX > basic 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "onChange": {
+ "arguments": [
+ "event",
+ ],
+ "code": "state.name = event.target.value",
+ "type": undefined,
+ },
+ "value": {
+ "arguments": undefined,
+ "code": "state.name",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "input",
+ "properties": {},
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "
+ Hello! I can run in React, Vue, Solid, or Liquid!
+",
+ },
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "hooks": {},
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {
+ "name": {
+ "code": "\\"Steve\\"",
+ "type": "property",
+ },
+ },
+ "style": undefined,
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > bindGroup 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "checked": {
+ "code": "state.tortilla === 'Plain'",
+ },
+ "onChange": {
+ "arguments": [
+ "event",
+ ],
+ "code": "state.tortilla = event.target.value",
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "input",
+ "properties": {
+ "type": "radio",
+ "value": "Plain",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "checked": {
+ "code": "state.tortilla === 'Whole wheat'",
+ },
+ "onChange": {
+ "arguments": [
+ "event",
+ ],
+ "code": "state.tortilla = event.target.value",
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "input",
+ "properties": {
+ "type": "radio",
+ "value": "Whole wheat",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "checked": {
+ "code": "state.tortilla === 'Spinach'",
+ },
+ "onChange": {
+ "arguments": [
+ "event",
+ ],
+ "code": "state.tortilla = event.target.value",
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "input",
+ "properties": {
+ "type": "radio",
+ "value": "Spinach",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "br",
+ "properties": {},
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "br",
+ "properties": {},
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "checked": {
+ "code": "state.fillings === 'Rice'",
+ },
+ "onChange": {
+ "arguments": [
+ "event",
+ ],
+ "code": "state.fillings = event.target.value",
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "input",
+ "properties": {
+ "type": "checkbox",
+ "value": "Rice",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "checked": {
+ "code": "state.fillings === 'Beans'",
+ },
+ "onChange": {
+ "arguments": [
+ "event",
+ ],
+ "code": "state.fillings = event.target.value",
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "input",
+ "properties": {
+ "type": "checkbox",
+ "value": "Beans",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "checked": {
+ "code": "state.fillings === 'Cheese'",
+ },
+ "onChange": {
+ "arguments": [
+ "event",
+ ],
+ "code": "state.fillings = event.target.value",
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "input",
+ "properties": {
+ "type": "checkbox",
+ "value": "Cheese",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "checked": {
+ "code": "state.fillings === 'Guac (extra)'",
+ },
+ "onChange": {
+ "arguments": [
+ "event",
+ ],
+ "code": "state.fillings = event.target.value",
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "input",
+ "properties": {
+ "type": "checkbox",
+ "value": "Guac (extra)",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "Tortilla: ",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "_text": {
+ "arguments": undefined,
+ "code": "state.tortilla",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "p",
+ "properties": {},
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "Fillings: ",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "_text": {
+ "arguments": undefined,
+ "code": "state.fillings",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "p",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "hooks": {},
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {
+ "fillings": {
+ "code": "[]",
+ "type": "property",
+ },
+ "tortilla": {
+ "code": "\\"Plain\\"",
+ "type": "property",
+ },
+ },
+ "style": undefined,
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > bindProperty 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "value": {
+ "arguments": undefined,
+ "code": "state.value",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "input",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "hooks": {},
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {
+ "value": {
+ "code": "\\"hello\\"",
+ "type": "property",
+ },
+ },
+ "style": undefined,
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > classDirective 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "class": {
+ "arguments": undefined,
+ "code": "\`form-input \${props.disabled ? 'disabled' : ''} \${state.focus ? 'focus' : ''}\`",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "input",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "defaultProps": {},
+ "hooks": {},
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {
+ "focus": {
+ "code": "true",
+ "type": "property",
+ },
+ },
+ "style": undefined,
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > context 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "_text": {
+ "arguments": undefined,
+ "code": "state.activeTab",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {
+ "disabled": {
+ "name": "'disabled'",
+ "path": "",
+ },
+ },
+ "set": {
+ "activeTab": {
+ "name": "'activeTab'",
+ "ref": "state.activeTab",
+ },
+ },
+ },
+ "hooks": {},
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {
+ "activeTab": {
+ "code": "0",
+ "type": "property",
+ },
+ },
+ "style": undefined,
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > each 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "each": {
+ "arguments": undefined,
+ "code": "state.numbers",
+ "type": undefined,
+ },
+ },
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "_text": {
+ "arguments": undefined,
+ "code": "num",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "li",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "For",
+ "properties": {},
+ "scope": {
+ "forName": "num",
+ },
+ },
+ ],
+ "meta": {},
+ "name": "ul",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "hooks": {},
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {
+ "numbers": {
+ "code": "[\\"one\\",\\"two\\",\\"three\\"]",
+ "type": "property",
+ },
+ },
+ "style": undefined,
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > eventHandlers 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "onClick": {
+ "arguments": [
+ "a",
+ ],
+ "code": "state.log('hi')",
+ "type": undefined,
+ },
+ },
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "Log",
+ },
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "button",
+ "properties": {},
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "onClick": {
+ "arguments": undefined,
+ "code": "state.log(event)",
+ "type": undefined,
+ },
+ },
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "Log",
+ },
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "button",
+ "properties": {},
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "onClick": {
+ "arguments": undefined,
+ "code": "state.log(event)",
+ "type": undefined,
+ },
+ },
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "Log",
+ },
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "button",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "hooks": {},
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {
+ "log": {
+ "arguments": [
+ "msg = 'hello'",
+ ],
+ "code": "function log(msg = 'hello') {
+ console.log(msg);
+}",
+ "type": "function",
+ },
+ },
+ "style": undefined,
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > html 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "innerHTML": {
+ "arguments": undefined,
+ "code": "state.html",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "hooks": {},
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {
+ "html": {
+ "code": "\\"bold\\"",
+ "type": "property",
+ },
+ },
+ "style": undefined,
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > ifElse 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "when": {
+ "arguments": undefined,
+ "code": "state.show",
+ "type": undefined,
+ },
+ },
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "onClick": {
+ "arguments": undefined,
+ "code": "state.toggle(event)",
+ "type": undefined,
+ },
+ },
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": " Hide ",
+ },
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "button",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "meta": {
+ "else": {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "onClick": {
+ "arguments": undefined,
+ "code": "state.toggle(event)",
+ "type": undefined,
+ },
+ },
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": " Show ",
+ },
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "button",
+ "properties": {},
+ "scope": {},
+ },
+ },
+ "name": "Show",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "hooks": {},
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {
+ "show": {
+ "code": "true",
+ "type": "property",
+ },
+ "toggle": {
+ "code": "function toggle() {
+ state.show = !state.show;
+}",
+ "type": "function",
+ },
+ },
+ "style": undefined,
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > imports 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "disabled": {
+ "arguments": undefined,
+ "code": "state.disabled",
+ "type": undefined,
+ },
+ },
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "Slot",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "Button",
+ "properties": {
+ "type": "button",
+ },
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "hooks": {},
+ "imports": [
+ {
+ "imports": {
+ "Button": "default",
+ },
+ "path": "./Button.lite",
+ },
+ ],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {
+ "disabled": {
+ "code": "false",
+ "type": "property",
+ },
+ },
+ "style": undefined,
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > lifecycleHooks 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "hooks": {
+ "onMount": {
+ "code": "
+ console.log('onMount');
+",
+ "deps": "",
+ },
+ "onUnMount": {
+ "code": "
+ console.log('onDestroy');
+",
+ "deps": "",
+ },
+ "onUpdate": [
+ {
+ "code": "
+ console.log('onAfterUpdate');
+",
+ "deps": "",
+ },
+ ],
+ },
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {},
+ "style": undefined,
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > reactive 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "value": {
+ "arguments": undefined,
+ "code": "state.name",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "input",
+ "properties": {},
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "
+ Lowercase: ",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "_text": {
+ "arguments": undefined,
+ "code": "state.lowercaseName",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "hooks": {},
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {
+ "lowercaseName": {
+ "code": "get lowercaseName() {
+ return state.name.toLowerCase()}",
+ "type": "getter",
+ },
+ "name": {
+ "code": "\\"Steve\\"",
+ "type": "property",
+ },
+ },
+ "style": undefined,
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > reactiveWithFn 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "onChange": {
+ "arguments": [
+ "event",
+ ],
+ "code": "state.a = event.target.value",
+ "type": undefined,
+ },
+ "value": {
+ "arguments": undefined,
+ "code": "state.a",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "input",
+ "properties": {
+ "type": "number",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "onChange": {
+ "arguments": [
+ "event",
+ ],
+ "code": "state.b = event.target.value",
+ "type": undefined,
+ },
+ "value": {
+ "arguments": undefined,
+ "code": "state.b",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "input",
+ "properties": {
+ "type": "number",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "
+ Result: ",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "_text": {
+ "arguments": undefined,
+ "code": "state.result",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "hooks": {
+ "onUpdate": [
+ {
+ "code": "state.calculateResult(state.a, state.b);",
+ "deps": "[state.a,state.b]",
+ },
+ ],
+ },
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {
+ "a": {
+ "code": "2",
+ "type": "property",
+ },
+ "b": {
+ "code": "5",
+ "type": "property",
+ },
+ "calculateResult": {
+ "arguments": [
+ "a_",
+ "b_",
+ ],
+ "code": "function calculateResult(a_, b_) {
+ state.result = a_ * b_;
+}",
+ "type": "function",
+ },
+ "result": {
+ "code": "null",
+ "type": "property",
+ },
+ },
+ "style": undefined,
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > slots 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "default",
+ },
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "Slot",
+ "properties": {},
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "default",
+ },
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "Slot",
+ "properties": {
+ "name": "Test",
+ },
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "hooks": {},
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {},
+ "style": undefined,
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > style 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "input",
+ "properties": {
+ "class": "form-input",
+ },
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "hooks": {},
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {},
+ "style": "
+ input {
+ color: red;
+ font-size: 12px;
+ }
+
+ .form-input:focus {
+ outline: 1px solid blue;
+ }
+",
+ "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > textExpressions 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "
+ normal:
+ ",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "_text": {
+ "arguments": undefined,
+ "code": "state.a + state.b",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "br",
+ "properties": {},
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "
+ conditional
+ ",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "_text": {
+ "arguments": undefined,
+ "code": "state.a > 2 ? 'hello' : 'bye'",
+ "type": undefined,
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "hooks": {},
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {
+ "a": {
+ "code": "5",
+ "type": "property",
+ },
+ "b": {
+ "code": "12",
+ "type": "property",
+ },
+ },
+ "style": undefined,
+ "subComponents": [],
+}
+`;
diff --git a/packages/core/src/__tests__/parse-svelte.test.ts b/packages/core/src/__tests__/parse-svelte.test.ts
new file mode 100644
index 0000000000..80692f9596
--- /dev/null
+++ b/packages/core/src/__tests__/parse-svelte.test.ts
@@ -0,0 +1,5 @@
+import { runTestsForSvelteSyntax } from './shared';
+
+describe('Parse JSX', () => {
+ runTestsForSvelteSyntax();
+});
diff --git a/packages/core/src/__tests__/shared.ts b/packages/core/src/__tests__/shared.ts
index d88fb89628..e53f9d92d5 100644
--- a/packages/core/src/__tests__/shared.ts
+++ b/packages/core/src/__tests__/shared.ts
@@ -452,6 +452,14 @@ export const runTestsForJsx = () => {
});
});
};
+export const runTestsForSvelteSyntax = () => {
+ Object.keys(SVELTE_SYNTAX_TESTS).forEach((key) => {
+ test(key, async () => {
+ const component = await parseSvelte(await SVELTE_SYNTAX_TESTS[key]);
+ expect(component).toMatchSnapshot();
+ });
+ });
+};
export const runTestsForTarget = ({
target,
diff --git a/packages/core/src/generators/solid/index.ts b/packages/core/src/generators/solid/index.ts
index af8bb2387b..b7284c71e8 100644
--- a/packages/core/src/generators/solid/index.ts
+++ b/packages/core/src/generators/solid/index.ts
@@ -115,33 +115,6 @@ const collectClassString = (json: MitosisNode, options: ToSolidOptions): string
return null;
};
-const preProcessBlockCode = ({
- json,
- options,
- component,
-}: {
- json: MitosisNode;
- options: ToSolidOptions;
- component: MitosisComponent;
-}) => {
- for (const key in json.properties) {
- const value = json.properties[key];
- if (value) {
- json.properties[key] = updateStateCode({ options, component, updateSetters: false })(value);
- }
- }
- for (const key in json.bindings) {
- const value = json.bindings[key];
- if (value?.code) {
- json.bindings[key] = {
- arguments: value.arguments,
- code: updateStateCode({ options, component, updateSetters: true })(value.code),
- type: value?.type,
- };
- }
- }
-};
-
const blockToSolid = ({
json,
options,