@builder.io/mitosis 0.0.56-99 → 0.0.56

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

@@ -37,25 +37,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseStateObjectToMitosisState = exports.parseStateObject = exports.createFunctionStringLiteralObjectProperty = exports.mapReactIdentifiers = void 0;
+exports.parseStateObjectToMitosisState = exports.parseStateObject = exports.mapStateIdentifiers = void 0;
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
-var function_literal_prefix_1 = require("../../constants/function-literal-prefix");
-var method_literal_prefix_1 = require("../../constants/method-literal-prefix");
+var outdated_prefixes_1 = require("../constants/outdated-prefixes");
 var traverse_1 = __importDefault(require("traverse"));
 var babel_transform_1 = require("../../helpers/babel-transform");
 var capitalize_1 = require("../../helpers/capitalize");
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
-var replace_idenifiers_1 = require("../../helpers/replace-idenifiers");
+var replace_identifiers_1 = require("../../helpers/replace-identifiers");
 var helpers_1 = require("./helpers");
 var function_1 = require("fp-ts/lib/function");
-var state_1 = require("../../helpers/state");
+var state_1 = require("../helpers/state");
 var types = babel.types;
-function mapReactIdentifiersInExpression(expression, stateProperties) {
+function mapStateIdentifiersInExpression(expression, stateProperties) {
     var setExpressions = stateProperties.map(function (propertyName) { return "set".concat((0, capitalize_1.capitalize)(propertyName)); });
     return (0, babel_transform_1.babelTransformExpression)(
     // foo -> state.foo
-    (0, replace_idenifiers_1.replaceIdentifiers)(expression, stateProperties, function (name) { return "state.".concat(name); }), {
+    (0, replace_identifiers_1.replaceIdentifiers)({ code: expression, from: stateProperties, to: function (name) { return "state.".concat(name); } }), {
         CallExpression: function (path) {
             if (types.isIdentifier(path.node.callee)) {
                 if (setExpressions.includes(path.node.callee.name)) {
@@ -74,15 +73,13 @@ function mapReactIdentifiersInExpression(expression, stateProperties) {
  *   text -> state.text
  *   setText(...) -> state.text = ...
  */
-function mapReactIdentifiers(json) {
-    var _a;
+function mapStateIdentifiers(json) {
     var stateProperties = Object.keys(json.state);
     for (var key in json.state) {
-        var value = (_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.code;
-        if (typeof value === 'string' && value.startsWith(function_literal_prefix_1.functionLiteralPrefix)) {
+        var stateVal = json.state[key];
+        if (typeof (stateVal === null || stateVal === void 0 ? void 0 : stateVal.code) === 'string' && stateVal.type === 'function') {
             json.state[key] = {
-                code: function_literal_prefix_1.functionLiteralPrefix +
-                    mapReactIdentifiersInExpression(value.replace(function_literal_prefix_1.functionLiteralPrefix, ''), stateProperties),
+                code: mapStateIdentifiersInExpression(stateVal.code, stateProperties),
                 type: 'function',
             };
         }
@@ -94,7 +91,7 @@ function mapReactIdentifiers(json) {
                 var value = item.bindings[key];
                 if (value) {
                     item.bindings[key] = {
-                        code: mapReactIdentifiersInExpression(value.code, stateProperties),
+                        code: mapStateIdentifiersInExpression(value.code, stateProperties),
                     };
                     if ((_a = value.arguments) === null || _a === void 0 ? void 0 : _a.length) {
                         item.bindings[key].arguments = value.arguments;
@@ -126,22 +123,18 @@ function mapReactIdentifiers(json) {
         }
     });
 }
-exports.mapReactIdentifiers = mapReactIdentifiers;
-var createFunctionStringLiteral = function (node) {
-    return types.stringLiteral("".concat(function_literal_prefix_1.functionLiteralPrefix).concat((0, generator_1.default)(node).code));
-};
+exports.mapStateIdentifiers = mapStateIdentifiers;
 var createFunctionStringLiteralObjectProperty = function (key, node) {
-    return types.objectProperty(key, createFunctionStringLiteral(node));
+    return types.objectProperty(key, types.stringLiteral("".concat(outdated_prefixes_1.__DO_NOT_USE_FUNCTION_LITERAL_PREFIX).concat((0, generator_1.default)(node).code)));
 };
-exports.createFunctionStringLiteralObjectProperty = createFunctionStringLiteralObjectProperty;
 var parseStateValue = function (item) {
     if (types.isObjectProperty(item)) {
         if (types.isFunctionExpression(item.value) || types.isArrowFunctionExpression(item.value)) {
-            return (0, exports.createFunctionStringLiteralObjectProperty)(item.key, item.value);
+            return createFunctionStringLiteralObjectProperty(item.key, item.value);
         }
     }
     if (types.isObjectMethod(item)) {
-        return types.objectProperty(item.key, types.stringLiteral("".concat(method_literal_prefix_1.methodLiteralPrefix).concat((0, generator_1.default)(__assign(__assign({}, item), { returnType: null })).code)));
+        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)));
     }
     // Remove typescript types, e.g. from
     // { foo: ('string' as SomeType) }

package/dist/src/plugins/compile-away-builder-components.js

@@ -164,11 +164,17 @@ exports.components = {
         });
     },
     CustomCode: function (node, context, components) {
+        var _a;
+        var bindings = {};
+        if ((_a = node === null || node === void 0 ? void 0 : node.bindings) === null || _a === void 0 ? void 0 : _a.code) {
+            bindings.innerHTML = node.bindings.code;
+        }
         return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
             name: node.properties.builderTag || 'div',
             properties: {
                 innerHTML: node.properties.code || '',
             },
+            bindings: bindings,
         }), components);
     },
     CoreSection: function (node, context, components) {

package/dist/src/symbols/symbol-processor.js

@@ -130,6 +130,9 @@ function convertBuilderElementToMitosisComponent(element) {
                 name: componentName,
                 options: symbolValue.data,
             },
+            properties: {
+                'builder-content-id': id,
+            },
         }),
     ];
     var mitosisComponent = __assign(__assign({}, (0, builder_1.builderContentToMitosisComponent)(elContent, {

package/dist/src/targets.d.ts

@@ -1,30 +1,23 @@
+export declare const builder: (options?: import("./generators/builder").ToBuilderOptions) => ({ component }: import(".").TranspilerArgs) => import("@builder.io/sdk").BuilderContent;
 export declare const targets: {
-    angular: (options?: import("./generators/angular").ToAngularOptions) => import(".").Transpiler;
-    builder: (options?: import("./generators/builder").ToBuilderOptions) => ({ component }: import(".").TranspilerArgs) => {
-        data: {
-            httpRequests: import("./types/json")._JSON;
-            jsCode: string;
-            tsCode: string;
-            blocks: import("@builder.io/sdk").BuilderElement[];
-        };
-    };
-    customElement: (options?: import("./generators/html").ToHtmlOptions) => import(".").Transpiler;
-    html: (options?: import("./generators/html").ToHtmlOptions) => import(".").Transpiler;
-    mitosis: (toMitosisOptions?: Partial<import("./generators/mitosis").ToMitosisOptions>) => import(".").Transpiler;
-    liquid: (options?: import("./generators/liquid").ToLiquidOptions) => import(".").Transpiler;
-    react: (reactOptions?: import("./generators/react").ToReactOptions) => import(".").Transpiler;
-    reactNative: (options?: import("./generators/react-native").ToReactNativeOptions) => import(".").Transpiler;
-    solid: (_options?: import("./generators/solid").ToSolidOptions) => import(".").Transpiler;
-    svelte: ({ plugins, ...userProvidedOptions }?: import("./generators/svelte").ToSvelteOptions) => import(".").Transpiler;
-    swift: (options?: import("./generators/swift-ui").ToSwiftOptions) => import(".").Transpiler;
-    template: (options?: import("./generators/template").ToTemplateOptions) => import(".").Transpiler;
-    webcomponent: (options?: import("./generators/html").ToHtmlOptions) => import(".").Transpiler;
-    vue: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler;
-    vue2: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler;
-    vue3: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler;
-    stencil: (options?: import("./generators/stencil").ToStencilOptions) => import(".").Transpiler;
-    qwik: (userOptions?: import("./generators/qwik/component-generator").ToQwikOptions) => import(".").Transpiler;
-    marko: (userOptions?: import("./generators/marko").ToMarkoOptions) => import(".").Transpiler;
-    preact: (reactOptions?: import("./generators/react").ToReactOptions) => import(".").Transpiler;
-    lit: (options?: import("./generators/lit").ToLitOptions) => import(".").Transpiler;
+    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>;
+    readonly mitosis: import(".").TranspilerGenerator<Partial<import("./generators/mitosis").ToMitosisOptions>, string>;
+    readonly liquid: import(".").TranspilerGenerator<import("./generators/liquid").ToLiquidOptions, string>;
+    readonly react: import(".").TranspilerGenerator<import("./generators/react").ToReactOptions, string>;
+    readonly reactNative: import(".").TranspilerGenerator<import("./generators/react-native").ToReactNativeOptions, string>;
+    readonly solid: import(".").TranspilerGenerator<Partial<import("./generators/solid/types").ToSolidOptions>, string>;
+    readonly svelte: import(".").TranspilerGenerator<import("./generators/svelte").ToSvelteOptions, string>;
+    readonly swift: import(".").TranspilerGenerator<import(".").BaseTranspilerOptions, string>;
+    readonly template: import(".").TranspilerGenerator<import("./generators/template").ToTemplateOptions, string>;
+    readonly webcomponent: import(".").TranspilerGenerator<import("./generators/html").ToHtmlOptions, string>;
+    readonly vue: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler<string>;
+    readonly vue2: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler<string>;
+    readonly vue3: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler<string>;
+    readonly stencil: import(".").TranspilerGenerator<import("./generators/stencil").ToStencilOptions, string>;
+    readonly qwik: import(".").TranspilerGenerator<import("./generators/qwik/component-generator").ToQwikOptions, string>;
+    readonly marko: import(".").TranspilerGenerator<import("./generators/marko").ToMarkoOptions, string>;
+    readonly preact: import(".").TranspilerGenerator<import("./generators/react").ToReactOptions, string>;
+    readonly lit: import(".").TranspilerGenerator<import("./generators/lit").ToLitOptions, string>;
 };

package/dist/src/targets.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.targets = void 0;
+exports.targets = exports.builder = void 0;
 var angular_1 = require("./generators/angular");
 var builder_1 = require("./generators/builder");
 var html_1 = require("./generators/html");
@@ -18,9 +18,9 @@ var stencil_1 = require("./generators/stencil");
 var qwik_1 = require("./generators/qwik");
 var marko_1 = require("./generators/marko");
 var lit_1 = require("./generators/lit");
+exports.builder = builder_1.componentToBuilder;
 exports.targets = {
     angular: angular_1.componentToAngular,
-    builder: builder_1.componentToBuilder,
     customElement: html_1.componentToCustomElement,
     html: html_1.componentToHtml,
     mitosis: mitosis_1.componentToMitosis,

package/dist/src/types/config.d.ts

@@ -1,8 +1,8 @@
+import { MitosisComponent } from './mitosis-component';
 export declare type Format = 'esm' | 'cjs';
 export declare type Language = 'js' | 'ts';
 interface TranspilerOptions {
     format?: Format;
-    languages?: Language[];
 }
 declare type Targets = typeof import('../targets').targets;
 export declare type Target = keyof Targets;
@@ -50,5 +50,15 @@ export declare type MitosisConfig = {
      * ```
      */
     options: Partial<GeneratorOptions>;
+    /**
+     * Configure the extension of the files you want to compile
+     * Default value: 'lite.tsx'
+     */
+    extension?: string;
+    /**
+     * Configure a custom parser function which takes a string and returns MitosisJSON
+     * Defaults to the JSXParser of this project (src/parsers/jsx)
+     */
+    parser?: (code: string) => MitosisComponent;
 };
 export {};

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

@@ -34,7 +34,7 @@ export interface ContextGetInfo {
 }
 export interface ContextSetInfo {
     name: string;
-    value?: JSONObject;
+    value?: MitosisState;
     ref?: string;
 }
 export declare type ContextGet = {
@@ -58,12 +58,18 @@ export declare type MitosisExport = {
         isFunction?: boolean;
     };
 };
-declare type StateValueType = 'function' | 'getter' | 'method' | 'property';
+export declare type StateValueType = 'function' | 'getter' | 'method' | 'property';
 export declare type StateCode = _JSON;
-export interface StateValue {
+declare type CodeValue = {
+    code: string;
+    type: Exclude<StateValueType, 'property'>;
+};
+export declare const checkIsCodeValue: (value: unknown) => value is CodeValue;
+export declare type StateValue = CodeValue | {
     code: StateCode;
-    type: StateValueType;
-}
+    type: Extract<StateValueType, 'property'>;
+};
+export declare type MitosisState = Dictionary<StateValue | undefined>;
 export declare type MitosisComponent = {
     '@type': '@builder.io/mitosis/component';
     name: string;
@@ -73,7 +79,7 @@ export declare type MitosisComponent = {
         useMetadata?: JSONObject;
     };
     inputs: MitosisComponentInput[];
-    state: Dictionary<StateValue | undefined>;
+    state: MitosisState;
     context: {
         get: ContextGet;
         set: ContextSet;

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

@@ -1,2 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkIsCodeValue = void 0;
+var checkIsCodeValue = function (value) {
+    return typeof value === 'object' &&
+        value &&
+        Object.keys(value).length === 2 &&
+        'type' in value &&
+        'code' in value
+        ? ['function', 'getter', 'method'].includes(value.type)
+        : false;
+};
+exports.checkIsCodeValue = checkIsCodeValue;

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

@@ -1,6 +1,6 @@
-import { JSONObject } from './json';
+import { MitosisState } from './mitosis-component';
 export declare type MitosisContext = {
     '@type': '@builder.io/mitosis/context';
     name: string;
-    value: JSONObject;
+    value: MitosisState;
 };

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

@@ -1,11 +1,9 @@
 import { JSONObject } from './json';
-export declare type MitosisNode = {
+export declare type BaseNode = {
     '@type': '@builder.io/mitosis/node';
-    name: string;
     meta: JSONObject;
-    scope: {
-        [key: string]: Array<string>;
-    };
+    name: string;
+    scope: {};
     /**
      * Key-value store of string values for DOM attributes.
      * ```js
@@ -38,3 +36,14 @@ export declare type MitosisNode = {
     };
     children: MitosisNode[];
 };
+export declare type SpecialNodesNames = 'For' | 'Fragment' | 'Show' | 'Slot';
+export declare type ForNode = BaseNode & {
+    name: 'For';
+    scope: {
+        forName: string | undefined;
+        indexName: string | undefined;
+        collectionName: string | undefined;
+    };
+};
+export declare type MitosisNode = BaseNode | ForNode;
+export declare const checkIsForNode: (node: MitosisNode) => node is ForNode;

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

@@ -1,2 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkIsForNode = void 0;
+var checkIsForNode = function (node) { return node.name === 'For'; };
+exports.checkIsForNode = checkIsForNode;

package/dist/src/types/transpiler.d.ts

@@ -4,11 +4,16 @@ export interface TranspilerArgs {
     path?: string;
     component: MitosisComponent;
 }
-export declare type Transpiler = (args: TranspilerArgs) => string;
+export declare type Transpiler<R = string> = (args: TranspilerArgs) => R;
+/**
+ * This type guarantees that all code generators receive the same base options
+ */
+export declare type TranspilerGenerator<X extends BaseTranspilerOptions, Y = string> = (args?: X) => Transpiler<Y>;
 export interface BaseTranspilerOptions {
     experimental?: {
         [key: string]: any;
     };
     prettier?: boolean;
     plugins?: Plugin[];
+    typescript?: boolean;
 }