@builder.io/mitosis 0.0.46 → 0.0.49

package/dist/src/generators/react.js

@@ -183,6 +183,15 @@ var getRefsString = function (json, refs) {
     }
     return str;
 };
+/**
+ * Removes all `this.` references.
+ */
+var stripThisRefs = function (str, options) {
+    if (options.stateType !== 'useState') {
+        return str;
+    }
+    return str.replace(/this\.([a-zA-Z_\$0-9]+)/g, '$1');
+};
 var processBinding = function (str, options) {
     if (options.stateType !== 'useState') {
         return str;
@@ -196,29 +205,32 @@ var getUseStateCode = function (json, options) {
     var str = '';
     var state = json.state;
     var valueMapper = function (val) {
-        return processBinding(updateStateSettersInCode(val, options), options);
+        var x = processBinding(updateStateSettersInCode(val, options), options);
+        return stripThisRefs(x, options);
     };
-    var keyValueDelimiter = '=';
     var lineItemDelimiter = '\n\n\n';
     for (var key in state) {
         var value = state[key];
+        var defaultCase = "const [".concat(key, ", set").concat((0, capitalize_1.capitalize)(key), "] = useState(() => (").concat(valueMapper(json5_1.default.stringify(value)), "))");
         if (typeof value === 'string') {
             if (value.startsWith(function_literal_prefix_1.functionLiteralPrefix)) {
                 var useValue = value.replace(function_literal_prefix_1.functionLiteralPrefix, '');
-                str += "".concat(valueMapper(useValue), " ").concat(lineItemDelimiter);
+                var mappedVal = valueMapper(useValue);
+                str += mappedVal;
             }
             else if (value.startsWith(method_literal_prefix_1.methodLiteralPrefix)) {
                 var methodValue = value.replace(method_literal_prefix_1.methodLiteralPrefix, '');
                 var useValue = methodValue.replace(/^(get )?/, 'function ');
-                str += "".concat(valueMapper(useValue), " ").concat(lineItemDelimiter);
+                str += valueMapper(useValue);
             }
             else {
-                str += "const [".concat(key, ", set").concat((0, capitalize_1.capitalize)(key), "] ").concat(keyValueDelimiter, " useState(() => (").concat(valueMapper(json5_1.default.stringify(value)), "))").concat(lineItemDelimiter, " ");
+                str += defaultCase;
             }
         }
         else {
-            str += "const [".concat(key, ", set").concat((0, capitalize_1.capitalize)(key), "] ").concat(keyValueDelimiter, " useState(() => (").concat(valueMapper(json5_1.default.stringify(value)), "))").concat(lineItemDelimiter, " ");
+            str += defaultCase;
         }
+        str += lineItemDelimiter;
     }
     return str;
 };
@@ -282,14 +294,19 @@ function hasContext(component) {
         Object.keys(component.context.set).length);
 }
 var getInitCode = function (json, options) {
-    return processBinding(json.hooks.init || '', options);
+    var _a;
+    return processBinding(((_a = json.hooks.init) === null || _a === void 0 ? void 0 : _a.code) || '', options);
+};
+var DEFAULT_OPTIONS = {
+    stateType: 'useState',
+    stylesType: 'styled-jsx',
 };
 var componentToReact = function (reactOptions) {
     if (reactOptions === void 0) { reactOptions = {}; }
     return function (_a) {
         var component = _a.component;
         var json = (0, fast_clone_1.fastClone)(component);
-        var options = __assign({ stateType: 'useState', stylesType: 'styled-jsx' }, reactOptions);
+        var options = __assign(__assign({}, DEFAULT_OPTIONS), reactOptions);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
@@ -327,6 +344,7 @@ var componentToReact = function (reactOptions) {
 };
 exports.componentToReact = componentToReact;
 var _componentToReact = function (json, options, isSubComponent) {
+    var _a, _b, _c, _d, _e, _f;
     if (isSubComponent === void 0) { isSubComponent = false; }
     (0, process_http_requests_1.processHttpRequests)(json);
     (0, handle_missing_state_1.handleMissingState)(json);
@@ -367,14 +385,16 @@ var _componentToReact = function (json, options, isSubComponent) {
     if (refs.size) {
         reactLibImports.add('useRef');
     }
-    if (json.hooks.onMount || json.hooks.onUnMount) {
+    if (((_a = json.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code) ||
+        ((_b = json.hooks.onUnMount) === null || _b === void 0 ? void 0 : _b.code) ||
+        ((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.code)) {
         reactLibImports.add('useEffect');
     }
     var wrap = wrapInFragment(json) || (componentHasStyles && stylesType === 'styled-jsx');
     var nativeStyles = stylesType === 'react-native' &&
         componentHasStyles &&
         (0, react_native_1.collectReactNativeStyles)(json);
-    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "function ", "(props) {\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }\n\n    ", "\n\n    ", "\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "function ", "(props) {\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }\n\n    ", "\n\n    ", "\n  "])), options.type !== 'native'
+    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "function ", "(props) {\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }\n\n    ", "\n\n    ", "\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "function ", "(props) {\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }\n\n    ", "\n\n    ", "\n  "])), options.type !== 'native'
         ? ''
         : "\n  import * as React from 'react';\n  import { View, StyleSheet, Image, Text } from 'react-native';\n  ", styledComponentsCode ? "import styled from 'styled-components';\n" : '', reactLibImports.size
         ? "import { ".concat(Array.from(reactLibImports).join(', '), " } from 'react'")
@@ -397,10 +417,12 @@ var _componentToReact = function (json, options, isSubComponent) {
                     : stateType === 'builder'
                         ? "var state = useBuilderState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
                         : "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
-        : '', getContextString(json, options), getRefsString(json), getInitCode(json, options), json.hooks.onMount
-        ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onMount, options), options), "\n          }, [])")
-        : '', json.hooks.onUnMount
-        ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onUnMount, options), options), "\n          }, [])")
+        : '', getContextString(json, options), getRefsString(json), getInitCode(json, options), ((_d = json.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code)
+        ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onMount.code, options), options), "\n          }, [])")
+        : '', ((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.code)
+        ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onUpdate.code, options), options), "\n          }, ").concat(json.hooks.onUpdate.deps, ")")
+        : '', ((_f = json.hooks.onUnMount) === null || _f === void 0 ? void 0 : _f.code)
+        ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onUnMount.code, options), options), "\n          }, [])")
         : '', wrap ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToReact)(item, options); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'
         ? "<style jsx>{`".concat(css, "`}</style>")
         : '', wrap ? '</>' : '', !nativeStyles

package/dist/src/generators/solid.js

@@ -150,6 +150,7 @@ var getRefsString = function (json, refs) {
 var componentToSolid = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
+        var _b, _c;
         var component = _a.component;
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
@@ -169,9 +170,11 @@ var componentToSolid = function (options) {
         var hasForComponent = componentsUsed.has('For');
         var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      \n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      \n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "])), !(hasShowComponent || hasForComponent)
             ? ''
-            : "import { \n          ".concat(!hasShowComponent ? '' : 'Show, ', "\n          ").concat(!hasForComponent ? '' : 'For, ', "\n          ").concat(!json.hooks.onMount ? '' : 'onMount, ', "\n         } from 'solid-js';"), !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", !hasState ? '' : "import { createMutable } from 'solid-js/store';", !componentHasStyles
+            : "import { \n          ".concat(!hasShowComponent ? '' : 'Show, ', "\n          ").concat(!hasForComponent ? '' : 'For, ', "\n          ").concat(!((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : 'onMount, ', "\n         } from 'solid-js';"), !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", !hasState ? '' : "import { createMutable } from 'solid-js/store';", !componentHasStyles
             ? ''
-            : "import { css } from \"solid-styled-components\";", (0, render_imports_1.renderPreComponent)(json), json.name, !hasState ? '' : "const state = createMutable(".concat(stateString, ");"), getRefsString(json), !json.hooks.onMount ? '' : "onMount(() => { ".concat(json.hooks.onMount, " })"), addWrapper ? '<>' : '', json.children.map(function (item) { return blockToSolid(item, options); }).join('\n'), addWrapper ? '</>' : '');
+            : "import { css } from \"solid-styled-components\";", (0, render_imports_1.renderPreComponent)(json), json.name, !hasState ? '' : "const state = createMutable(".concat(stateString, ");"), getRefsString(json), !((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code)
+            ? ''
+            : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), addWrapper ? '<>' : '', json.children.map(function (item) { return blockToSolid(item, options); }).join('\n'), addWrapper ? '</>' : '');
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
         }

package/dist/src/generators/svelte.js

@@ -143,6 +143,7 @@ var useBindValue = function (json, options) {
 var componentToSvelte = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
+        var _b, _c, _d, _e, _f, _g;
         var component = _a.component;
         var useOptions = __assign(__assign({}, options), { stateType: 'variables' });
         // Make a copy we can safely mutate, similar to babel's toolchain
@@ -195,7 +196,7 @@ var componentToSvelte = function (options) {
         });
         var hasData = dataString.length > 4;
         var props = Array.from((0, get_props_1.getProps)(json));
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <script>\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n    <script>\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), !json.hooks.onMount ? '' : "import { onMount } from 'svelte'", !json.hooks.onUnMount ? '' : "import { onDestroy } from 'svelte'", (0, render_imports_1.renderPreComponent)(json), !hasData || useOptions.stateType === 'variables'
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <script>\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n    <script>\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : "import { onMount } from 'svelte'", !((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.code) ? '' : "import { afterUpdate } from 'svelte'", !((_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : "import { onDestroy } from 'svelte'", (0, render_imports_1.renderPreComponent)(json), !hasData || useOptions.stateType === 'variables'
             ? ''
             : "import onChange from 'on-change'", refs
             .concat(props)
@@ -204,13 +205,17 @@ var componentToSvelte = function (options) {
             ? dataString.length < 4
                 ? ''
                 : "let state = onChange(".concat(dataString, ", () => state = state)")
-            : dataString, !json.hooks.onMount
+            : dataString, !((_e = json.hooks.onMount) === null || _e === void 0 ? void 0 : _e.code)
             ? ''
-            : "onMount(() => { ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.hooks.onMount, {
+            : "onMount(() => { ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.hooks.onMount.code, {
                 includeState: useOptions.stateType === 'variables',
-            }), " });"), !json.hooks.onUnMount
+            }), " });"), !((_f = json.hooks.onUpdate) === null || _f === void 0 ? void 0 : _f.code)
             ? ''
-            : "onDestroy(() => { ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.hooks.onUnMount, {
+            : "afterUpdate(() => { ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.hooks.onUpdate.code, {
+                includeState: useOptions.stateType === 'variables',
+            }), " });"), !((_g = json.hooks.onUnMount) === null || _g === void 0 ? void 0 : _g.code)
+            ? ''
+            : "onDestroy(() => { ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.hooks.onUnMount.code, {
                 includeState: useOptions.stateType === 'variables',
             }), " });"), json.children.map(function (item) { return (0, exports.blockToSvelte)(item, useOptions); }).join('\n'), !css.trim().length
             ? ''

package/dist/src/generators/vue.js

@@ -30,6 +30,7 @@ var replace_idenifiers_1 = require("../helpers/replace-idenifiers");
 var filter_empty_text_nodes_1 = require("../helpers/filter-empty-text-nodes");
 var json5_1 = __importDefault(require("json5"));
 var process_http_requests_1 = require("../helpers/process-http-requests");
+var patterns_1 = require("../helpers/patterns");
 function getContextNames(json) {
     return Object.keys(json.context.get);
 }
@@ -215,7 +216,7 @@ var componentToVue = function (options) {
     // hack while we migrate all other transpilers to receive/handle path
     // TO-DO: use `Transpiler` once possible
     return function (_a) {
-        var _b, _c, _d, _e, _f;
+        var _b, _c, _d, _e, _f, _g;
         var component = _a.component, path = _a.path;
         // Make a copy we can safely mutate, similar to babel's toolchain can be used
         component = (0, fast_clone_1.fastClone)(component);
@@ -242,7 +243,7 @@ var componentToVue = function (options) {
             getters: true,
             functions: false,
             valueMapper: function (code) {
-                return processBinding(code.replace(/^get /, ''), options, component);
+                return processBinding(code.replace(patterns_1.GETTER, ''), options, component);
             },
         });
         var functionsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
@@ -279,7 +280,7 @@ var componentToVue = function (options) {
             functionsString = functionsString.replace(/}\s*$/, "_classStringToObject(str) {\n        const obj = {};\n        if (typeof str !== 'string') { return obj }\n        const classNames = str.trim().split(/\\s+/); \n        for (const name of classNames) {\n          obj[name] = true;\n        } \n        return obj;\n      }  }");
         }
         var builderRegister = Boolean(options.builderRegister && component.meta.registerComponent);
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <template>\n      ", "\n    </template>\n    <script>\n      ", "\n      ", "\n\n      export default ", "{\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n      }", "\n    </script>\n    ", "\n  "], ["\n    <template>\n      ", "\n    </template>\n    <script>\n      ", "\n      ", "\n\n      export default ", "{\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n      }", "\n    </script>\n    ", "\n  "])), template, (0, render_imports_1.renderPreComponent)(component), component.meta.registerComponent
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <template>\n      ", "\n    </template>\n    <script>\n      ", "\n      ", "\n\n      export default ", "{\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n      }", "\n    </script>\n    ", "\n  "], ["\n    <template>\n      ", "\n    </template>\n    <script>\n      ", "\n      ", "\n\n      export default ", "{\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n      }", "\n    </script>\n    ", "\n  "])), template, (0, render_imports_1.renderPreComponent)(component), component.meta.registerComponent
             ? (_d = options.registerComponentPrepend) !== null && _d !== void 0 ? _d : ''
             : '', !builderRegister ? '' : 'registerComponent(', !component.name
             ? ''
@@ -299,10 +300,12 @@ var componentToVue = function (options) {
             ? "provide() {\n                const _this = this;\n                return ".concat(getContextProvideString(component, options), "\n              },")
             : '', (0, lodash_1.size)(component.context.get)
             ? "inject: ".concat(getContextInjectString(component, options), ",")
-            : '', component.hooks.onMount
-            ? "mounted() {\n                ".concat(processBinding(component.hooks.onMount, options, component), "\n              },")
+            : '', ((_g = component.hooks.onMount) === null || _g === void 0 ? void 0 : _g.code)
+            ? "mounted() {\n                ".concat(processBinding(component.hooks.onMount.code, options, component), "\n              },")
+            : '', component.hooks.onUpdate
+            ? "updated() {\n                ".concat(processBinding(component.hooks.onUpdate.code, options, component), "\n              },")
             : '', component.hooks.onUnMount
-            ? "unmounted() {\n                ".concat(processBinding(component.hooks.onUnMount, options, component), "\n              },")
+            ? "unmounted() {\n                ".concat(processBinding(component.hooks.onUnMount.code, options, component), "\n              },")
             : '', getterString.length < 4
             ? ''
             : "\n          computed: ".concat(getterString, ",\n        "), functionsString.length < 4

package/dist/src/helpers/create-jsx-lite-component.d.ts

@@ -0,0 +1,2 @@
+import { JSXLiteComponent } from '../types/jsx-lite-component';
+export declare const createJSXLiteComponent: (options?: Partial<JSXLiteComponent> | undefined) => JSXLiteComponent;

package/dist/src/helpers/create-jsx-lite-component.js

@@ -0,0 +1,16 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createJSXLiteComponent = void 0;
+var createJSXLiteComponent = function (options) { return (__assign({ '@type': '@jsx-lite/component', imports: [], meta: {}, state: {}, children: [], hooks: {}, context: { get: {}, set: {} }, name: (options === null || options === void 0 ? void 0 : options.name) || 'MyComponent', subComponents: [] }, options)); };
+exports.createJSXLiteComponent = createJSXLiteComponent;

package/dist/src/helpers/create-jsx-lite-context.d.ts

@@ -0,0 +1,4 @@
+import { JSXLiteContext } from '../types/jsx-lite-context';
+export declare function createJsxLiteContext(options: Partial<JSXLiteContext> & {
+    name: string;
+}): JSXLiteContext;

package/dist/src/helpers/create-jsx-lite-context.js

@@ -0,0 +1,18 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createJsxLiteContext = void 0;
+function createJsxLiteContext(options) {
+    return __assign({ '@type': '@jsx-lite/context', value: {} }, options);
+}
+exports.createJsxLiteContext = createJsxLiteContext;

package/dist/src/helpers/create-jsx-lite-node.d.ts

@@ -0,0 +1,2 @@
+import { JSXLiteNode } from '../types/jsx-lite-node';
+export declare const createJSXLiteNode: (options: Partial<JSXLiteNode>) => JSXLiteNode;

package/dist/src/helpers/create-jsx-lite-node.js

@@ -0,0 +1,16 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createJSXLiteNode = void 0;
+var createJSXLiteNode = function (options) { return (__assign({ '@type': '@jsx-lite/node', name: 'div', meta: {}, properties: {}, bindings: {}, children: [] }, options)); };
+exports.createJSXLiteNode = createJSXLiteNode;

package/dist/src/helpers/get-state-object-string.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -7,51 +18,53 @@ exports.getStateObjectStringFromComponent = exports.getMemberObjectString = void
 var json5_1 = __importDefault(require("json5"));
 var function_literal_prefix_1 = require("../constants/function-literal-prefix");
 var method_literal_prefix_1 = require("../constants/method-literal-prefix");
-var getMemberObjectString = function (object, options) {
-    if (options === void 0) { options = {}; }
-    var format = options.format || 'object';
-    var str = format === 'object' ? '{' : '';
+var patterns_1 = require("./patterns");
+var convertStateMemberToString = function (options) { return function (_a) {
+    var key = _a[0], value = _a[1];
     var valueMapper = options.valueMapper || (function (val) { return val; });
-    var keyValueDelimiter = format === 'object' ? ':' : '=';
-    var lineItemDelimiter = format === 'object' ? ',' : '\n';
+    var keyValueDelimiter = options.format === 'object' ? ':' : '=';
     var keyPrefix = options.keyPrefix || '';
-    for (var key in object) {
-        var value = object[key];
-        if (typeof value === 'string') {
-            if (value.startsWith(function_literal_prefix_1.functionLiteralPrefix)) {
-                if (options.functions === false) {
-                    continue;
-                }
-                var functionValue = value.replace(function_literal_prefix_1.functionLiteralPrefix, '');
-                str += " ".concat(keyPrefix, " ").concat(key, " ").concat(keyValueDelimiter, " ").concat(valueMapper(functionValue, 'function')).concat(lineItemDelimiter, " ");
-            }
-            else if (value.startsWith(method_literal_prefix_1.methodLiteralPrefix)) {
-                var methodValue = value.replace(method_literal_prefix_1.methodLiteralPrefix, '');
-                var isGet = Boolean(methodValue.match(/^get /));
-                if (isGet && options.getters === false) {
-                    continue;
-                }
-                if (!isGet && options.functions === false) {
-                    continue;
-                }
-                str += "".concat(keyPrefix, " ").concat(valueMapper(methodValue, isGet ? 'getter' : 'function'), " ").concat(lineItemDelimiter);
-            }
-            else {
-                if (options.data === false) {
-                    continue;
-                }
-                str += " ".concat(keyPrefix, " ").concat(key).concat(keyValueDelimiter, " ").concat(valueMapper(json5_1.default.stringify(value), 'data')).concat(lineItemDelimiter, " ");
+    if (typeof value === 'string') {
+        if (value.startsWith(function_literal_prefix_1.functionLiteralPrefix)) {
+            if (options.functions === false) {
+                return undefined;
             }
+            var functionValue = value.replace(function_literal_prefix_1.functionLiteralPrefix, '');
+            return "".concat(keyPrefix, " ").concat(key, " ").concat(keyValueDelimiter, " ").concat(valueMapper(functionValue, 'function'));
         }
-        else {
-            if (options.data === false) {
-                continue;
+        else if (value.startsWith(method_literal_prefix_1.methodLiteralPrefix)) {
+            var methodValue = value.replace(method_literal_prefix_1.methodLiteralPrefix, '');
+            var isGet = Boolean(methodValue.match(patterns_1.GETTER));
+            if (isGet && options.getters === false) {
+                return undefined;
+            }
+            if (!isGet && options.functions === false) {
+                return undefined;
             }
-            str += " ".concat(keyPrefix, " ").concat(key).concat(keyValueDelimiter, " ").concat(valueMapper(json5_1.default.stringify(value), 'data')).concat(lineItemDelimiter, " ");
+            return "".concat(keyPrefix, " ").concat(valueMapper(methodValue, isGet ? 'getter' : 'function'));
         }
     }
-    str += format === 'object' ? '}' : '';
-    return str;
+    if (options.data === false) {
+        return undefined;
+    }
+    return "".concat(keyPrefix, " ").concat(key).concat(keyValueDelimiter, " ").concat(valueMapper(json5_1.default.stringify(value), 'data'));
+}; };
+var getMemberObjectString = function (object, options) {
+    if (options === void 0) { options = {}; }
+    var format = options.format || 'object';
+    var lineItemDelimiter = format === 'object' ? ',' : '\n';
+    var stringifiedProperties = Object.entries(object)
+        .map(convertStateMemberToString(__assign(__assign({}, options), { format: format })))
+        .filter(function (x) { return x !== undefined; })
+        .join(lineItemDelimiter);
+    var prefix = format === 'object' ? '{' : '';
+    var suffix = format === 'object' ? '}' : '';
+    // NOTE: we add a `lineItemDelimiter` at the very end because other functions will sometimes append more properties.
+    // If the delimiter is a comma and the format is `object`, then we need to make sure we have an extra comma at the end,
+    // or the object will become invalid JS.
+    // We also have to make sure that `stringifiedProperties` isn't empty, or we will get `{,}` which is invalid
+    var extraDelimiter = stringifiedProperties.length > 0 ? lineItemDelimiter : '';
+    return "".concat(prefix).concat(stringifiedProperties).concat(extraDelimiter).concat(suffix);
 };
 exports.getMemberObjectString = getMemberObjectString;
 var getStateObjectStringFromComponent = function (component, options) {

package/dist/src/helpers/is-jsx-lite-node.d.ts

@@ -0,0 +1,2 @@
+import { JSXLiteNode } from '../types/jsx-lite-node';
+export declare const isJsxLiteNode: (thing: unknown) => thing is JSXLiteNode;

package/dist/src/helpers/is-jsx-lite-node.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isJsxLiteNode = void 0;
+var isJsxLiteNode = function (thing) {
+    return Boolean(thing && thing['@type'] === '@jsx-lite/node');
+};
+exports.isJsxLiteNode = isJsxLiteNode;

package/dist/src/helpers/map-refs.js

@@ -30,6 +30,7 @@ var is_mitosis_node_1 = require("./is-mitosis-node");
 var method_literal_prefix_1 = require("../constants/method-literal-prefix");
 var function_literal_prefix_1 = require("../constants/function-literal-prefix");
 var babel_transform_1 = require("./babel-transform");
+var patterns_1 = require("./patterns");
 var tsPreset = require('@babel/preset-typescript');
 var replaceRefsInString = function (code, refs, mapper) {
     return (0, babel_transform_1.babelTransformExpression)(code, {
@@ -43,15 +44,16 @@ var replaceRefsInString = function (code, refs, mapper) {
     });
 };
 var mapRefs = function (component, mapper) {
+    var _a;
     var refs = Array.from((0, get_refs_1.getRefs)(component));
-    for (var _i = 0, _a = Object.keys(component.state); _i < _a.length; _i++) {
-        var key = _a[_i];
+    for (var _i = 0, _b = Object.keys(component.state); _i < _b.length; _i++) {
+        var key = _b[_i];
         var value = component.state[key];
         if (typeof value === 'string') {
             if (value.startsWith(method_literal_prefix_1.methodLiteralPrefix)) {
                 var methodValue = value.replace(method_literal_prefix_1.methodLiteralPrefix, '');
-                var isGet = Boolean(methodValue.match(/^get /));
-                var isSet = Boolean(methodValue.match(/^set /));
+                var isGet = Boolean(methodValue.match(patterns_1.GETTER));
+                var isSet = Boolean(methodValue.match(patterns_1.SETTER));
                 component.state[key] =
                     method_literal_prefix_1.methodLiteralPrefix +
                         replaceRefsInString(methodValue.replace(/^(get |set )?/, 'function '), refs, mapper).replace(/^function /, isGet ? 'get ' : isSet ? 'set ' : '');
@@ -74,11 +76,11 @@ var mapRefs = function (component, mapper) {
             }
         }
     });
-    for (var _b = 0, _c = Object.keys(component.hooks); _b < _c.length; _b++) {
-        var key = _c[_b];
-        var hookCode = component.hooks[key];
+    for (var _c = 0, _d = Object.keys(component.hooks); _c < _d.length; _c++) {
+        var key = _d[_c];
+        var hookCode = (_a = component.hooks[key]) === null || _a === void 0 ? void 0 : _a.code;
         if (hookCode) {
-            component.hooks[key] = replaceRefsInString(hookCode, refs, mapper);
+            component.hooks[key].code = replaceRefsInString(hookCode, refs, mapper);
         }
     }
 };

package/dist/src/helpers/patterns.d.ts

@@ -0,0 +1,2 @@
+export declare const GETTER: RegExp;
+export declare const SETTER: RegExp;

package/dist/src/helpers/patterns.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SETTER = exports.GETTER = void 0;
+exports.GETTER = /^get /;
+exports.SETTER = /^set /;

package/dist/src/helpers/process-http-requests.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.processHttpRequests = void 0;
 function processHttpRequests(json) {
-    var _a;
+    var _a, _b;
     var httpRequests = (_a = json.meta
         .useMetadata) === null || _a === void 0 ? void 0 : _a.httpRequests;
-    var onMount = json.hooks.onMount || '';
+    var onMount = ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? json.hooks.onMount : { code: '' };
     if (httpRequests) {
         for (var key in httpRequests) {
             if (!json.state[key]) {
@@ -14,7 +14,7 @@ function processHttpRequests(json) {
             var value = httpRequests[key];
             // TODO: unravel our proxy. aka parse out methods, header, etc
             // and remove our proxy from being used anymore
-            onMount += "\n        fetch(\"".concat(value, "\").then(res => res.json()).then(result => {\n          state.").concat(key, " = result;\n        })\n      ");
+            onMount.code += "\n        fetch(\"".concat(value, "\").then(res => res.json()).then(result => {\n          state.").concat(key, " = result;\n        })\n      ");
         }
     }
     json.hooks.onMount = onMount;

package/dist/src/helpers/process-tag-references.js

@@ -13,14 +13,15 @@ function getRefName(path) {
 function processTagReferences(json) {
     var namesFound = new Set();
     (0, traverse_1.default)(json).forEach(function (el) {
+        var _a;
         if ((0, is_mitosis_node_1.isMitosisNode)(el)) {
             if (el.name.includes('.')) {
                 if (!namesFound.has(el.name)) {
                     namesFound.add(el.name);
-                    if (typeof json.hooks.init !== 'string') {
-                        json.hooks.init = '';
+                    if (typeof ((_a = json.hooks.init) === null || _a === void 0 ? void 0 : _a.code) !== 'string') {
+                        json.hooks.init = { code: '' };
                     }
-                    json.hooks.init += "\n            const ".concat(getRefName(el.name), " = ").concat(el.name, ";\n          ");
+                    json.hooks.init.code += "\n            const ".concat(getRefName(el.name), " = ").concat(el.name, ";\n          ");
                 }
                 el.name = getRefName(el.name);
             }

package/dist/src/index.d.ts

@@ -9,10 +9,10 @@ export declare const setContext: (key: any, value: {
     [key: string]: any;
 }) => any;
 export declare const onMount: (fn: () => any) => any;
+export declare const onUpdate: (fn: () => any, deps?: any[] | undefined) => any;
 export declare const onCreate: (fn: () => any) => any;
 export declare const onInit: (fn: () => any) => any;
 export declare const onUnMount: (fn: () => any) => any;
-export declare const afterUnmount: (fn: () => any) => any;
 export declare const useDynamicTag: (fn: () => any) => any;
 export declare const onError: (fn: () => any) => any;
 export declare const useMetadata: (obj: object) => null;
@@ -30,6 +30,7 @@ export * from './generators/solid';
 export * from './generators/liquid';
 export * from './generators/builder';
 export * from './generators/qwik/index';
+export * from './symbols/symbol-processor';
 export * from './generators/html';
 export * from './generators/svelte';
 export * from './generators/mitosis';

package/dist/src/index.js

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMetadata = exports.onError = exports.useDynamicTag = exports.afterUnmount = exports.onUnMount = exports.onInit = exports.onCreate = exports.onMount = exports.setContext = exports.createContext = exports.useContext = exports.useRef = exports.useState = void 0;
+exports.useMetadata = exports.onError = exports.useDynamicTag = exports.onUnMount = exports.onInit = exports.onCreate = exports.onUpdate = exports.onMount = exports.setContext = exports.createContext = exports.useContext = exports.useRef = exports.useState = void 0;
 __exportStar(require("./flow"), exports);
 // These compile away
 var useState = function (obj) { return obj; };
@@ -27,14 +27,14 @@ var setContext = function (key, value) {
 exports.setContext = setContext;
 var onMount = function (fn) { return null; };
 exports.onMount = onMount;
+var onUpdate = function (fn, deps) { return null; };
+exports.onUpdate = onUpdate;
 var onCreate = function (fn) { return null; };
 exports.onCreate = onCreate;
 var onInit = function (fn) { return null; };
 exports.onInit = onInit;
 var onUnMount = function (fn) { return null; };
 exports.onUnMount = onUnMount;
-var afterUnmount = function (fn) { return null; };
-exports.afterUnmount = afterUnmount;
 var useDynamicTag = function (fn) { return null; };
 exports.useDynamicTag = useDynamicTag;
 var onError = function (fn) { return null; };
@@ -55,6 +55,7 @@ __exportStar(require("./generators/solid"), exports);
 __exportStar(require("./generators/liquid"), exports);
 __exportStar(require("./generators/builder"), exports);
 __exportStar(require("./generators/qwik/index"), exports);
+__exportStar(require("./symbols/symbol-processor"), exports);
 __exportStar(require("./generators/html"), exports);
 __exportStar(require("./generators/svelte"), exports);
 __exportStar(require("./generators/mitosis"), exports);

package/dist/src/jsx-types.d.ts

@@ -1,5 +1,5 @@
 declare type CSS = Partial<CSSStyleDeclaration> & {
-    [key: string]: string;
+    [key: string]: Partial<CSSStyleDeclaration> | string;
 };
 declare global {
     /**