@builder.io/mitosis 0.7.6 → 0.9.0

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

@@ -9,6 +9,6 @@ const getTextValue = (node) => {
 exports.getTextValue = getTextValue;
 function isChildren({ node, extraMatches = [], }) {
     const textValue = (0, exports.getTextValue)(node);
-    return ['props.children', 'children'].concat(extraMatches).includes(textValue);
+    return ['props.children', 'children', 'children()'].concat(extraMatches).includes(textValue);
 }
 exports.default = isChildren;

package/dist/src/helpers/map-refs.d.ts

@@ -1,3 +1,9 @@
+import type { NodePath } from '@babel/core';
+import { types } from '@babel/core';
+import { CodeType } from '../helpers/plugins/process-code/types';
 import { MitosisComponent } from '../types/mitosis-component';
-export type RefMapper = (refName: string) => string;
+export type RefMapper = (refName: string, extra?: {
+    type?: CodeType;
+    path: NodePath<types.Identifier>;
+}) => string;
 export declare const mapRefs: (component: MitosisComponent, mapper: RefMapper) => void;

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

@@ -10,13 +10,18 @@ const babel_transform_1 = require("./babel-transform");
 const get_refs_1 = require("./get-refs");
 const is_mitosis_node_1 = require("./is-mitosis-node");
 const patterns_1 = require("./patterns");
-const replaceRefsInString = (code, refs, mapper) => {
+const replaceRefsInString = (code, refs, mapper, type) => {
     return (0, babel_transform_1.babelTransformExpression)(code, {
         Identifier(path) {
+            var _a;
             const name = path.node.name;
             const isRef = refs.includes(name);
-            if (isRef) {
-                path.replaceWith(core_1.types.identifier(mapper(name)));
+            if (isRef && !((_a = path.node.extra) === null || _a === void 0 ? void 0 : _a.replaced)) {
+                path.replaceWith(core_1.types.identifier(mapper(name, {
+                    type,
+                    path,
+                })));
+                path.node.extra = { replaced: true };
             }
         },
     });
@@ -59,31 +64,26 @@ const mapRefs = (component, mapper) => {
                 if (typeof value === 'object' && key !== 'ref') {
                     item.bindings[key] = {
                         ...value,
-                        code: replaceRefsInString(value.code, refs, mapper),
+                        code: replaceRefsInString(value.code, refs, mapper, 'bindings'),
                     };
                 }
             }
         }
     });
     for (const key of Object.keys(component.hooks)) {
-        const hooks = component.hooks[key];
-        if (Array.isArray(hooks)) {
-            hooks.forEach((hook) => {
-                if (hook.code) {
-                    hook.code = replaceRefsInString(hook.code, refs, mapper);
-                }
-                if (hook.deps) {
-                    hook.deps = replaceRefsInString(hook.deps, refs, mapper);
-                }
-            });
-        }
-        else {
-            const hookCode = hooks === null || hooks === void 0 ? void 0 : hooks.code;
-            if (hookCode) {
-                hooks.code = replaceRefsInString(hookCode, refs, mapper);
+        const _hook = component.hooks[key];
+        const hooks = Array.isArray(_hook) ? _hook : [_hook];
+        for (const hook of hooks) {
+            if (!hook)
+                continue;
+            if (hook.code) {
+                hook.code = replaceRefsInString(hook.code, refs, mapper);
+            }
+            if (hook.deps) {
+                hook.deps = replaceRefsInString(hook.deps, refs, mapper, 'hooks-deps');
             }
-            if (hooks === null || hooks === void 0 ? void 0 : hooks.deps) {
-                hooks.deps = replaceRefsInString(hooks === null || hooks === void 0 ? void 0 : hooks.deps, refs, mapper);
+            if (hook === null || hook === void 0 ? void 0 : hook.depsArray) {
+                hook.depsArray = hook.depsArray.map((dep) => replaceRefsInString(dep, refs, mapper, 'hooks-deps-array'));
             }
         }
     }

package/dist/src/helpers/plugins/process-code/index.d.ts

@@ -7,6 +7,6 @@ export declare const createCodeProcessorPlugin: (codeProcessor: CodeProcessor, {
 /**
  * Given a `codeProcessor` function, processes all code expressions within a Mitosis component.
  */
-export declare const CODE_PROCESSOR_PLUGIN: (codeProcessor: (codeType: import("./types").CodeType, json: MitosisComponent, node?: import("../../..").MitosisNode | undefined) => (code: string, hookType: string) => string | (() => void), a_1?: {
+export declare const CODE_PROCESSOR_PLUGIN: (codeProcessor: (codeType: import("./types").CodeType, json: MitosisComponent, node?: import("../../..").MitosisNode | undefined) => (code: string, hookType: string, context?: import("neotraverse/legacy").TraverseContext | undefined) => string | (() => void), a_1?: {
     processProperties?: boolean | undefined;
 } | undefined) => MitosisPlugin;

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

@@ -7,6 +7,7 @@ const traverse_nodes_1 = require("../../traverse-nodes");
 const createCodeProcessorPlugin = (codeProcessor, { processProperties } = { processProperties: false }) => (json) => {
     var _a;
     function processHook(key, hook) {
+        var _a;
         const result = codeProcessor('hooks', json)(hook.code, key);
         if (typeof result === 'string') {
             hook.code = result;
@@ -23,6 +24,19 @@ const createCodeProcessorPlugin = (codeProcessor, { processProperties } = { proc
                 result();
             }
         }
+        if ((_a = hook.depsArray) === null || _a === void 0 ? void 0 : _a.length) {
+            hook.depsArray = hook.depsArray
+                .map((dep) => {
+                const innerResult = codeProcessor('hooks-deps-array', json)(dep, key);
+                if (typeof innerResult === 'string') {
+                    return innerResult;
+                }
+                else {
+                    return '';
+                }
+            })
+                .filter((dep) => !!dep);
+        }
     }
     /**
      * process code in hooks
@@ -88,7 +102,7 @@ const createCodeProcessorPlugin = (codeProcessor, { processProperties } = { proc
             }
         }
     }
-    (0, traverse_nodes_1.traverseNodes)(json, (node) => {
+    (0, traverse_nodes_1.traverseNodes)(json, (node, context) => {
         if (processProperties) {
             for (const key in node.properties) {
                 const value = node.properties[key];
@@ -106,7 +120,7 @@ const createCodeProcessorPlugin = (codeProcessor, { processProperties } = { proc
         for (const key in node.bindings) {
             const value = node.bindings[key];
             if (value === null || value === void 0 ? void 0 : value.code) {
-                const result = codeProcessor('bindings', json, node)(value.code, key);
+                const result = codeProcessor('bindings', json, node)(value.code, key, context);
                 if (typeof result === 'string') {
                     value.code = result;
                 }

package/dist/src/helpers/plugins/process-code/types.d.ts

@@ -1,6 +1,7 @@
+import type { TraverseContext } from 'neotraverse/legacy';
 import { MitosisComponent } from '../../../types/mitosis-component';
 import { MitosisNode } from '../../../types/mitosis-node';
-export type CodeType = 'hooks' | 'hooks-deps' | 'bindings' | 'properties' | 'state' | 'types' | 'context-set' | 'dynamic-jsx-elements';
-declare function codeProcessor(codeType: CodeType, json: MitosisComponent, node?: MitosisNode): (code: string, hookType: string) => string | (() => void);
+export type CodeType = 'hooks' | 'hooks-deps' | 'hooks-deps-array' | 'bindings' | 'properties' | 'state' | 'types' | 'context-set' | 'dynamic-jsx-elements';
+declare function codeProcessor(codeType: CodeType, json: MitosisComponent, node?: MitosisNode): (code: string, hookType: string, context?: TraverseContext) => string | (() => void);
 export type CodeProcessor = typeof codeProcessor;
 export {};

package/dist/src/helpers/render-imports.d.ts

@@ -7,6 +7,11 @@ export declare const transformImportPath: ({ theImport, target, preserveFileExte
     preserveFileExtensions: boolean;
     explicitImportFileExtension: boolean;
 }) => string;
+export interface ImportValues {
+    starImport: string | null;
+    defaultImport: string | null;
+    namedImports: string | null;
+}
 type ImportArgs = {
     target: Target;
     asyncComponentImports: boolean;

package/dist/src/helpers/replace-identifiers.js

@@ -89,10 +89,7 @@ const _replaceIdentifiers = (path, { from, to }) => {
             }
         }
         else {
-            if (core_1.types.isIdentifier(path.node)) {
-                console.debug(`Could not replace Identifier with nothing.`);
-            }
-            else {
+            if (!core_1.types.isIdentifier(path.node)) {
                 // if we're looking at a member expression, e.g. `props.foo` and no `to` was provided, then we want to strip out
                 // the identifier and end up with `foo`. So we replace the member expression with just its `property` value.
                 path.replaceWith(path.node.property);

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

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

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

@@ -13,6 +13,12 @@ type BuilderToMitosisOptions = {
     preserveTextBlocks?: boolean;
     includeSpecialBindings?: boolean;
     includeMeta?: boolean;
+    /**
+     * When `true`, invalid bindings will be escaped as strings with special comments.
+     * This can then be used to have LLMs such as Claude attempt to repair the broken code.
+     * Defaults to `false`.
+     */
+    escapeInvalidCode?: boolean;
 };
 export declare const builderElementToMitosisNode: (block: BuilderElement, options: BuilderToMitosisOptions, _internalOptions?: InternalOptions) => MitosisNode;
 export declare const getMetaFromBlock: (block: BuilderElement, options: BuilderToMitosisOptions) => {};

package/dist/src/parsers/builder/builder.js

@@ -127,9 +127,20 @@ const getStyleStringFromBlock = (block, options) => {
             if (!key.includes('.')) {
                 continue;
             }
+            let code = ((_b = (_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings) === null || _b === void 0 ? void 0 : _b[key]) || block.bindings[key];
+            const verifyCode = verifyIsValid(code);
+            if (!verifyCode.valid) {
+                if (options.escapeInvalidCode) {
+                    code = '`' + code + ' [INVALID CODE]`';
+                }
+                else {
+                    console.warn(`Dropping binding "${key}" due to invalid code: ${code}`);
+                    continue;
+                }
+            }
             if (key.includes('style')) {
                 const styleProperty = key.split('.')[1];
-                styleBindings[styleProperty] = convertExportDefaultToReturn(((_b = (_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings) === null || _b === void 0 ? void 0 : _b[key]) || block.bindings[key]);
+                styleBindings[styleProperty] = convertExportDefaultToReturn(code);
                 /**
                  * responsiveStyles that are bound need to be merged into media queries.
                  * Example:
@@ -152,7 +163,7 @@ const getStyleStringFromBlock = (block, options) => {
                 const objKey = `"${mediaKey}"`;
                 responsiveStyles[objKey] = {
                     ...responsiveStyles[objKey],
-                    [prop]: block.bindings[key],
+                    [prop]: code,
                 };
             }
         }
@@ -672,8 +683,19 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
             }
             const useKey = key.replace(/^(component\.)?options\./, '');
             if (!useKey.includes('.')) {
+                let code = blockBindings[key].code || blockBindings[key];
+                const verifyCode = verifyIsValid(code);
+                if (!verifyCode.valid) {
+                    if (options.escapeInvalidCode) {
+                        code = '`' + code + ' [INVALID CODE]`';
+                    }
+                    else {
+                        console.warn(`Dropping binding "${key}" due to invalid code: ${code}`);
+                        continue;
+                    }
+                }
                 bindings[useKey] = (0, bindings_1.createSingleBinding)({
-                    code: blockBindings[key].code || blockBindings[key],
+                    code,
                 });
             }
             else if (useKey.includes('style') && useKey.includes('.')) {

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

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentFunctionToJson = void 0;
 const babel = __importStar(require("@babel/core"));
 const generator_1 = __importDefault(require("@babel/generator"));
+const types_1 = require("@babel/types");
 const hooks_1 = require("../../constants/hooks");
 const create_mitosis_component_1 = require("../../helpers/create-mitosis-component");
 const get_bindings_1 = require("../../helpers/get-bindings");
@@ -155,11 +156,25 @@ const componentFunctionToJson = (node, context, stateToScope) => {
                             if (!secondArg ||
                                 (types.isArrayExpression(secondArg) && secondArg.elements.length > 0)) {
                                 const depsCode = secondArg ? (0, generator_1.default)(secondArg).code : '';
+                                const depsArray = [];
+                                if (secondArg && secondArg.elements) {
+                                    for (const element of secondArg.elements) {
+                                        if ((0, types_1.isIdentifier)(element)) {
+                                            depsArray.push(element.name);
+                                        }
+                                        else if ((0, types_1.isMemberExpression)(element) &&
+                                            (0, types_1.isIdentifier)(element.object) &&
+                                            (0, types_1.isIdentifier)(element.property)) {
+                                            depsArray.push(`${element.object.name}.${element.property.name}`);
+                                        }
+                                    }
+                                }
                                 hooks.onUpdate = [
                                     ...(hooks.onUpdate || []),
                                     {
                                         code,
                                         deps: depsCode,
+                                        depsArray,
                                     },
                                 ];
                             }

package/dist/src/parsers/svelte/html/text.d.ts

@@ -39,4 +39,22 @@ export declare function parseText(node: TemplateNode): {
     localizedValues?: {
         [index: string]: import("../../..").BuilderLocalizedValue;
     } | undefined;
+} | {
+    name: string;
+    properties: {
+        _text: any;
+    };
+    '@type': "@builder.io/mitosis/node";
+    meta: import("../../../types/json").JSONObject;
+    scope: {};
+    bindings: {
+        [key: string]: import("../../..").Binding | undefined;
+    };
+    children: import("../../..").MitosisNode[];
+    slots?: {
+        [key: string]: import("../../..").MitosisNode[];
+    } | undefined;
+    localizedValues?: {
+        [index: string]: import("../../..").BuilderLocalizedValue;
+    } | undefined;
 };

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

@@ -47,6 +47,7 @@ export interface ContextSetInfo extends ContextOptions {
 export type BaseHook = {
     code: string;
     deps?: string;
+    depsArray?: string[];
 };
 export type MitosisComponentInput = {
     name: string;
@@ -155,6 +156,7 @@ export type MitosisComponent = {
             hooks?: {
                 [hookName: string]: BaseHook;
             };
+            extra?: Record<string, any>;
         };
     };
 };

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

@@ -81,7 +81,12 @@ export type BaseNode = {
         [index: string]: BuilderLocalizedValue;
     };
 };
-export type SpecialNodesNames = 'For' | 'Fragment' | 'Show' | 'Slot';
+export declare const ForNodeName = "For";
+export declare const FragmentNodeName = "Fragment";
+export declare const ShowNodeName = "Show";
+export declare const SlotNodeName = "Slot";
+export declare const SpecialNodeNameList: string[];
+export type SpecialNodesNames = (typeof SpecialNodeNameList)[number];
 export type ForNode = BaseNode & {
     name: 'For';
     scope: {
@@ -93,7 +98,7 @@ export type ForNode = BaseNode & {
 export type ShowNode = BaseNode & {
     name: 'Show';
 };
-export type MitosisNode = BaseNode | ForNode;
+export type MitosisNode = BaseNode | ForNode | ShowNode;
 export declare const checkIsForNode: (node: MitosisNode) => node is ForNode;
 export declare const checkIsShowNode: (node: MitosisNode) => node is ShowNode;
 export {};

package/dist/src/types/mitosis-node.js

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkIsShowNode = exports.checkIsForNode = void 0;
-const checkIsForNode = (node) => node.name === 'For';
+exports.checkIsShowNode = exports.checkIsForNode = exports.SpecialNodeNameList = exports.SlotNodeName = exports.ShowNodeName = exports.FragmentNodeName = exports.ForNodeName = void 0;
+exports.ForNodeName = 'For';
+exports.FragmentNodeName = 'Fragment';
+exports.ShowNodeName = 'Show';
+exports.SlotNodeName = 'Slot';
+exports.SpecialNodeNameList = [exports.ForNodeName, exports.FragmentNodeName, exports.ShowNodeName, exports.SlotNodeName];
+const checkIsForNode = (node) => node.name === exports.ForNodeName;
 exports.checkIsForNode = checkIsForNode;
-const checkIsShowNode = (node) => node.name === 'Show';
+const checkIsShowNode = (node) => node.name === exports.ShowNodeName;
 exports.checkIsShowNode = checkIsShowNode;

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.7.6",
+  "version": "0.9.0",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {