@builder.io/mitosis 0.0.76 → 0.0.77

package/dist/src/helpers/babel-transform.js

@@ -32,7 +32,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.babelTransformExpression = exports.babelTransformCode = exports.babelTransform = void 0;
+exports.babelTransformExpression = exports.getType = exports.babelTransformCode = exports.babelTransform = void 0;
 var babel = __importStar(require("@babel/core"));
 var jsxPlugin = require('@babel/plugin-syntax-jsx');
 var tsPreset = require('@babel/preset-typescript');
@@ -63,12 +63,7 @@ var handleErrorOrExpression = function (_a) {
     }
     catch (err) {
         console.error('Error parsing code:\n', code, '\n', result);
-        try {
-            return (0, exports.babelTransformExpression)(code, visitor, 'functionBody');
-        }
-        catch (err) {
-            throw err;
-        }
+        throw err;
     }
 };
 var babelTransform = function (code, visitor) {
@@ -96,25 +91,27 @@ var trimExpression = function (type) { return function (code) {
             return trimSemicolons(code);
     }
 }; };
-var babelTransformExpression = function (code, visitor, type) {
-    if (type === void 0) { type = 'unknown'; }
-    if (!code) {
-        return '';
-    }
+var getType = function (code, initialType) {
     // match for object literal like { foo: ... }
-    if (type === 'unknown' && code.trim().match(/^\s*{\s*[a-z0-9]+:/i)) {
-        type = 'expression';
+    if (initialType === 'unknown' && code.trim().match(/^\s*{\s*[a-z0-9]+:/i)) {
+        return 'expression';
     }
     // For Builder content
-    if (type === 'unknown' &&
+    if (initialType === 'unknown' &&
         (code.includes('return _virtual_index') || code.trim().startsWith('return ')) &&
         !code.trim().startsWith('function')) {
-        type = 'functionBody';
+        return 'functionBody';
     }
-    var useCode = code;
-    if (type === 'functionBody') {
-        useCode = "function(){".concat(useCode, "}");
+    return initialType;
+};
+exports.getType = getType;
+var babelTransformExpression = function (code, visitor, initialType) {
+    if (initialType === void 0) { initialType = 'unknown'; }
+    if (!code) {
+        return '';
     }
+    var type = (0, exports.getType)(code, initialType);
+    var useCode = type === 'functionBody' ? "function(){".concat(code, "}") : code;
     if (type !== 'expression') {
         try {
             return (0, function_1.pipe)((0, exports.babelTransformCode)(useCode, visitor), trimExpression(type));

package/dist/src/helpers/get-state-object-string.d.ts

@@ -4,7 +4,7 @@ interface GetStateObjectStringOptions {
     data?: boolean;
     functions?: boolean;
     getters?: boolean;
-    valueMapper?: (code: string, type: 'data' | 'function' | 'getter') => string;
+    valueMapper?: (code: string, type: 'data' | 'function' | 'getter', typeParameter?: string) => string;
     format?: 'object' | 'class' | 'variables';
     keyPrefix?: string;
 }

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

@@ -32,31 +32,31 @@ var convertStateMemberToString = function (_a) {
         if (!state) {
             return undefined;
         }
-        var code = state.code;
+        var code = state.code, typeParameter = state.typeParameter;
         switch (state.type) {
             case 'function': {
                 if (functions === false || typeof code !== 'string') {
                     return undefined;
                 }
-                return "".concat(keyPrefix, " ").concat(key, " ").concat(keyValueDelimiter, " ").concat(valueMapper(code, 'function'));
+                return "".concat(keyPrefix, " ").concat(key, " ").concat(keyValueDelimiter, " ").concat(valueMapper(code, 'function', typeParameter));
             }
             case 'method': {
                 if (functions === false || typeof code !== 'string') {
                     return undefined;
                 }
-                return "".concat(keyPrefix, " ").concat(valueMapper(code, 'function'));
+                return "".concat(keyPrefix, " ").concat(valueMapper(code, 'function', typeParameter));
             }
             case 'getter': {
                 if (getters === false || typeof code !== 'string') {
                     return undefined;
                 }
-                return "".concat(keyPrefix, " ").concat(valueMapper(code, 'getter'));
+                return "".concat(keyPrefix, " ").concat(valueMapper(code, 'getter', typeParameter));
             }
             case 'property': {
                 if (data === false) {
                     return undefined;
                 }
-                return "".concat(keyPrefix, " ").concat(key).concat(keyValueDelimiter, " ").concat(valueMapper(json5_1.default.stringify(code), 'data'));
+                return "".concat(keyPrefix, " ").concat(key).concat(keyValueDelimiter, " ").concat(valueMapper(json5_1.default.stringify(code), 'data', typeParameter));
             }
             default:
                 break;

package/dist/src/helpers/has-bindings-text.js

@@ -11,7 +11,7 @@ var hasBindingsText = function (json) {
     var has = false;
     (0, traverse_1.default)(json).forEach(function (node) {
         var _a;
-        if ((0, is_mitosis_node_1.isMitosisNode)(node) && !(0, is_children_1.default)(node) && ((_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code)) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(node) && !(0, is_children_1.default)({ node: node }) && ((_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code)) {
             has = true;
             this.stop();
         }

package/dist/src/helpers/is-children.d.ts

@@ -1,2 +1,5 @@
 import { MitosisNode } from '../types/mitosis-node';
-export default function isChildren(node: MitosisNode): boolean;
+export default function isChildren({ node, extraMatches, }: {
+    node: MitosisNode;
+    extraMatches?: string[];
+}): boolean;

package/dist/src/helpers/is-children.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function isChildren(node) {
-    var _a;
-    var textValue = ((_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code) || node.properties.__text || '';
+function isChildren(_a) {
+    var _b;
+    var node = _a.node, _c = _a.extraMatches, extraMatches = _c === void 0 ? [] : _c;
+    var textValue = ((_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.code) || node.properties.__text || '';
     var trimmedTextValue = textValue.replace(/\s+/g, '');
-    return ['props.children', 'children'].includes(trimmedTextValue);
+    return ['props.children', 'children'].concat(extraMatches).includes(trimmedTextValue);
 }
 exports.default = isChildren;

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

@@ -1,4 +1,5 @@
 export declare const GETTER: RegExp;
 export declare const SETTER: RegExp;
+export declare const stripGetter: (str: string) => string;
 export declare const replaceGetterWithFunction: (str: string) => string;
 export declare const prefixWithFunction: (str: string) => string;

package/dist/src/helpers/patterns.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prefixWithFunction = exports.replaceGetterWithFunction = exports.SETTER = exports.GETTER = void 0;
+exports.prefixWithFunction = exports.replaceGetterWithFunction = exports.stripGetter = exports.SETTER = exports.GETTER = void 0;
 exports.GETTER = /^get /;
 exports.SETTER = /^set /;
+var stripGetter = function (str) { return str.replace(exports.GETTER, ''); };
+exports.stripGetter = stripGetter;
 var replaceGetterWithFunction = function (str) { return str.replace(/^(get )?/, 'function '); };
 exports.replaceGetterWithFunction = replaceGetterWithFunction;
 var prefixWithFunction = function (str) { return "function ".concat(str); };

package/dist/src/helpers/plugins/process-code.js

@@ -59,7 +59,7 @@ var CODE_PROCESSOR_PLUGIN = function (codeProcessor) {
                         state.code = codeProcessor('state')(state.code);
                     }
                 }
-                (0, traverse_nodes_1.tarverseNodes)(json, function (node) {
+                (0, traverse_nodes_1.traverseNodes)(json, function (node) {
                     preProcessBlockCode({ json: node, codeProcessor: codeProcessor });
                 });
             },

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

@@ -1,4 +1,3 @@
-/// <reference types="lodash" />
 import * as CSS from 'csstype';
 import { MitosisNode } from '../../types/mitosis-node';
 import { MitosisComponent } from '../../types/mitosis-component';

package/dist/src/helpers/traverse-nodes.d.ts

@@ -1,4 +1,4 @@
 import { MitosisComponent } from '../types/mitosis-component';
 import { MitosisNode } from '../types/mitosis-node';
 import { TraverseContext } from 'traverse';
-export declare function tarverseNodes(component: MitosisComponent | MitosisNode, cb: (node: MitosisNode, context: TraverseContext) => void): void;
+export declare function traverseNodes(component: MitosisComponent | MitosisNode, cb: (node: MitosisNode, context: TraverseContext) => void): void;

package/dist/src/helpers/traverse-nodes.js

@@ -3,14 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tarverseNodes = void 0;
+exports.traverseNodes = void 0;
 var traverse_1 = __importDefault(require("traverse"));
 var is_mitosis_node_1 = require("./is-mitosis-node");
-function tarverseNodes(component, cb) {
+function traverseNodes(component, cb) {
     (0, traverse_1.default)(component).forEach(function (item) {
         if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             cb(item, this);
         }
     });
 }
-exports.tarverseNodes = tarverseNodes;
+exports.traverseNodes = traverseNodes;

package/dist/src/index.d.ts

@@ -21,7 +21,6 @@ export declare const setContext: <T = {
 }>(key: Context<T>, value: Partial<T>) => void;
 export declare const onMount: (fn: () => any) => any;
 export declare const onUpdate: (fn: () => any, deps?: any[]) => 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 useDynamicTag: (fn: () => any) => any;
@@ -36,6 +35,7 @@ export * from './parsers/builder';
 export * from './parsers/angular';
 export * from './parsers/context';
 export * from './generators/vue';
+export * from './generators/alpine';
 export * from './generators/angular';
 export * from './generators/context/react';
 export * from './generators/context/qwik';

package/dist/src/index.js

@@ -14,7 +14,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.useStyle = exports.useDefaultProps = 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 = exports.useStore = void 0;
+exports.useStyle = exports.useDefaultProps = exports.useMetadata = exports.onError = exports.useDynamicTag = exports.onUnMount = exports.onInit = exports.onUpdate = exports.onMount = exports.setContext = exports.createContext = exports.useContext = exports.useRef = exports.useState = exports.useStore = void 0;
 __exportStar(require("./flow"), exports);
 function Provider(props) {
     return null;
@@ -50,8 +50,6 @@ var onMount = function (fn) {
 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; };
@@ -74,6 +72,7 @@ __exportStar(require("./parsers/builder"), exports);
 __exportStar(require("./parsers/angular"), exports);
 __exportStar(require("./parsers/context"), exports);
 __exportStar(require("./generators/vue"), exports);
+__exportStar(require("./generators/alpine"), exports);
 __exportStar(require("./generators/angular"), exports);
 __exportStar(require("./generators/context/react"), exports);
 __exportStar(require("./generators/context/qwik"), exports);

package/dist/src/parsers/builder.d.ts

@@ -42,8 +42,8 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
         inputs: import("..").MitosisComponentInput[];
         state: import("..").MitosisState;
         context: {
-            get: import("..").ContextGet;
-            set: import("..").ContextSet;
+            get: import("../helpers/typescript").Dictionary<import("..").ContextGetInfo>;
+            set: import("../helpers/typescript").Dictionary<import("..").ContextSetInfo>;
         };
         refs: {
             [useRef: string]: {
@@ -77,8 +77,8 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
     inputs: import("..").MitosisComponentInput[];
     state: import("..").MitosisState;
     context: {
-        get: import("..").ContextGet;
-        set: import("..").ContextSet;
+        get: import("../helpers/typescript").Dictionary<import("..").ContextGetInfo>;
+        set: import("../helpers/typescript").Dictionary<import("..").ContextSetInfo>;
     };
     refs: {
         [useRef: string]: {

package/dist/src/parsers/jsx/function-parser.js

@@ -57,6 +57,7 @@ var state_1 = require("./state");
 var helpers_1 = require("./helpers");
 var component_types_1 = require("./component-types");
 var element_parser_1 = require("./element-parser");
+var metadata_1 = require("./metadata");
 var types = babel.types;
 function generateUseStyleCode(expression) {
     return (0, generator_1.default)(expression.arguments[0]).code.replace(/(^("|'|`)|("|'|`)$)/g, '');
@@ -196,6 +197,9 @@ var componentFunctionToJson = function (node, context) {
                     else if (expression.callee.name === hooks_1.HOOKS.STYLE) {
                         context.builder.component.style = generateUseStyleCode(expression);
                     }
+                    else if (expression.callee.name === metadata_1.METADATA_HOOK_NAME) {
+                        context.builder.component.meta[metadata_1.METADATA_HOOK_NAME] = __assign(__assign({}, context.builder.component.meta[metadata_1.METADATA_HOOK_NAME]), (0, helpers_1.parseCodeJson)(expression.arguments[0]));
+                    }
                 }
             }
         }
@@ -233,6 +237,10 @@ var componentFunctionToJson = function (node, context) {
                                 type: 'property',
                             };
                         }
+                        // Typescript Parameter
+                        if (types.isTSTypeParameterInstantiation(init.typeParameters)) {
+                            state[varName].typeParameter = (0, generator_1.default)(init.typeParameters.params[0]).code;
+                        }
                     }
                 }
                 // Legacy format, like:

package/dist/src/parsers/jsx/metadata.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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -59,7 +70,12 @@ var collectMetadata = function (nodes, component, options) {
         if (types.isIdentifier(hook.callee)) {
             if (hookNames.has(hook.callee.name)) {
                 try {
-                    component.meta[hook.callee.name] = (0, helpers_1.parseCodeJson)(hook.arguments[0]);
+                    if (component.meta[hook.callee.name]) {
+                        component.meta[hook.callee.name] = __assign(__assign({}, component.meta[hook.callee.name]), (0, helpers_1.parseCodeJson)(hook.arguments[0]));
+                    }
+                    else {
+                        component.meta[hook.callee.name] = (0, helpers_1.parseCodeJson)(hook.arguments[0]);
+                    }
                     return false;
                 }
                 catch (e) {

package/dist/src/parsers/jsx/state.js

@@ -132,9 +132,14 @@ var createFunctionStringLiteralObjectProperty = function (key, node) {
 };
 var parseStateValue = function (item) {
     if (types.isObjectProperty(item)) {
-        if (types.isFunctionExpression(item.value) || types.isArrowFunctionExpression(item.value)) {
+        if (types.isFunctionExpression(item.value)) {
             return createFunctionStringLiteralObjectProperty(item.key, item.value);
         }
+        else if (types.isArrowFunctionExpression(item.value)) {
+            // convert this to an object method instead
+            var n = babel.types.objectMethod('method', item.key, item.value.params, item.value.body);
+            return types.objectProperty(item.key, types.stringLiteral("".concat(outdated_prefixes_1.__DO_NOT_USE_METHOD_LITERAL_PREFIX).concat((0, generator_1.default)(n).code)));
+        }
     }
     if (types.isObjectMethod(item)) {
         return types.objectProperty(item.key, types.stringLiteral("".concat(outdated_prefixes_1.__DO_NOT_USE_METHOD_LITERAL_PREFIX).concat((0, generator_1.default)(__assign(__assign({}, item), { returnType: null })).code)));

package/dist/src/plugins/map-styles.js

@@ -6,7 +6,7 @@ var traverse_nodes_1 = require("../helpers/traverse-nodes");
 var mapStyles = function (pluginOptions) { return function (options) { return ({
     json: {
         pre: function (json) {
-            (0, traverse_nodes_1.tarverseNodes)(json, function (node, context) {
+            (0, traverse_nodes_1.traverseNodes)(json, function (node, context) {
                 var styles = (0, get_styles_1.getStyles)(node);
                 (0, get_styles_1.setStyles)(node, pluginOptions.map(styles || {}, context));
             });

package/dist/src/targets.d.ts

@@ -1,5 +1,6 @@
 export declare const builder: (options?: import("./generators/builder").ToBuilderOptions) => ({ component }: import(".").TranspilerArgs) => import("@builder.io/sdk").BuilderContent;
 export declare const targets: {
+    readonly alpine: import(".").TranspilerGenerator<import("./generators/alpine").ToAlpineOptions, string>;
     readonly angular: import(".").TranspilerGenerator<import("./generators/angular").ToAngularOptions, string>;
     readonly customElement: import(".").TranspilerGenerator<import("./generators/html").ToHtmlOptions, string>;
     readonly html: import(".").TranspilerGenerator<import("./generators/html").ToHtmlOptions, string>;

package/dist/src/targets.js

@@ -4,6 +4,7 @@ exports.targets = exports.builder = void 0;
 var angular_1 = require("./generators/angular");
 var builder_1 = require("./generators/builder");
 var html_1 = require("./generators/html");
+var alpine_1 = require("./generators/alpine");
 var mitosis_1 = require("./generators/mitosis");
 var liquid_1 = require("./generators/liquid");
 var react_1 = require("./generators/react");
@@ -21,6 +22,7 @@ var lit_1 = require("./generators/lit");
 var rsc_1 = require("./generators/rsc");
 exports.builder = builder_1.componentToBuilder;
 exports.targets = {
+    alpine: alpine_1.componentToAlpine,
     angular: angular_1.componentToAngular,
     customElement: html_1.componentToCustomElement,
     html: html_1.componentToHtml,

package/dist/src/types/mitosis-component.d.ts

@@ -37,12 +37,6 @@ export interface ContextSetInfo {
     value?: MitosisState;
     ref?: string;
 }
-export declare type ContextGet = {
-    [key: string]: ContextGetInfo;
-};
-export declare type ContextSet = {
-    [key: string]: ContextSetInfo;
-};
 export declare type extendedHook = {
     code: string;
     deps?: string;
@@ -64,11 +58,13 @@ export declare type StateCode = _JSON;
 declare type CodeValue = {
     code: string;
     type: Exclude<StateValueType, 'property'>;
+    typeParameter?: string;
 };
 export declare const checkIsCodeValue: (value: unknown) => value is CodeValue;
 export declare type StateValue = CodeValue | {
     code: StateCode;
     type: Extract<StateValueType, 'property'>;
+    typeParameter?: string;
 };
 export declare type MitosisState = Dictionary<StateValue | undefined>;
 export declare type MitosisComponent = {
@@ -82,8 +78,8 @@ export declare type MitosisComponent = {
     inputs: MitosisComponentInput[];
     state: MitosisState;
     context: {
-        get: ContextGet;
-        set: ContextSet;
+        get: Dictionary<ContextGetInfo>;
+        set: Dictionary<ContextSetInfo>;
     };
     refs: {
         [useRef: string]: {