@builder.io/mitosis 0.0.75 → 0.0.77-0

package/dist/src/helpers/render-imports.js

@@ -95,7 +95,7 @@ var getImportValue = function (_a) {
     }
 };
 var renderImport = function (_a) {
-    var theImport = _a.theImport, target = _a.target, asyncComponentImports = _a.asyncComponentImports, _b = _a.preserveFileExtensions, preserveFileExtensions = _b === void 0 ? false : _b;
+    var theImport = _a.theImport, target = _a.target, asyncComponentImports = _a.asyncComponentImports, _b = _a.preserveFileExtensions, preserveFileExtensions = _b === void 0 ? false : _b, _c = _a.component, component = _c === void 0 ? undefined : _c, _d = _a.componentsUsed, componentsUsed = _d === void 0 ? [] : _d, importMapper = _a.importMapper;
     var importedValues = getImportedValues({ theImport: theImport });
     var path = transformImportPath(theImport, target, preserveFileExtensions);
     var importValue = getImportValue(importedValues);
@@ -115,11 +115,14 @@ var renderImport = function (_a) {
             return "const ".concat(importValue, " = () => import('").concat(path, "')\n      .then(x => x.default)\n      .catch(err => { \n        console.error('Error while attempting to dynamically import component ").concat(importValue, " at ").concat(path, "', err);\n        throw err;\n      });");
         }
     }
+    if (importMapper) {
+        return importMapper(component, theImport, importedValues, componentsUsed);
+    }
     return importValue ? "import ".concat(importValue, " from '").concat(path, "';") : "import '".concat(path, "';");
 };
 exports.renderImport = renderImport;
 var renderImports = function (_a) {
-    var imports = _a.imports, target = _a.target, asyncComponentImports = _a.asyncComponentImports, excludeMitosisComponents = _a.excludeMitosisComponents, _b = _a.preserveFileExtensions, preserveFileExtensions = _b === void 0 ? false : _b;
+    var imports = _a.imports, target = _a.target, asyncComponentImports = _a.asyncComponentImports, excludeMitosisComponents = _a.excludeMitosisComponents, _b = _a.preserveFileExtensions, preserveFileExtensions = _b === void 0 ? false : _b, component = _a.component, componentsUsed = _a.componentsUsed, importMapper = _a.importMapper;
     return imports
         .filter(function (theImport) {
         if (
@@ -137,20 +140,31 @@ var renderImports = function (_a) {
         }
     })
         .map(function (theImport) {
-        return (0, exports.renderImport)({ theImport: theImport, target: target, asyncComponentImports: asyncComponentImports, preserveFileExtensions: preserveFileExtensions });
+        return (0, exports.renderImport)({
+            theImport: theImport,
+            target: target,
+            asyncComponentImports: asyncComponentImports,
+            preserveFileExtensions: preserveFileExtensions,
+            component: component,
+            componentsUsed: componentsUsed,
+            importMapper: importMapper,
+        });
     })
         .join('\n');
 };
 exports.renderImports = renderImports;
 var renderPreComponent = function (_a) {
     var _b;
-    var component = _a.component, target = _a.target, excludeMitosisComponents = _a.excludeMitosisComponents, _c = _a.asyncComponentImports, asyncComponentImports = _c === void 0 ? false : _c, _d = _a.preserveFileExtensions, preserveFileExtensions = _d === void 0 ? false : _d;
+    var component = _a.component, target = _a.target, excludeMitosisComponents = _a.excludeMitosisComponents, _c = _a.asyncComponentImports, asyncComponentImports = _c === void 0 ? false : _c, _d = _a.preserveFileExtensions, preserveFileExtensions = _d === void 0 ? false : _d, _e = _a.componentsUsed, componentsUsed = _e === void 0 ? [] : _e, importMapper = _a.importMapper;
     return "\n    ".concat((0, exports.renderImports)({
         imports: component.imports,
         target: target,
         asyncComponentImports: asyncComponentImports,
         excludeMitosisComponents: excludeMitosisComponents,
         preserveFileExtensions: preserveFileExtensions,
+        component: component,
+        componentsUsed: componentsUsed,
+        importMapper: importMapper,
     }), "\n    ").concat((0, exports.renderExportAndLocal)(component), "\n    ").concat(((_b = component.hooks.preComponent) === null || _b === void 0 ? void 0 : _b.code) || '', "\n  ");
 };
 exports.renderPreComponent = renderPreComponent;

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]: {