@builder.io/mitosis 0.1.1 → 0.1.3

package/dist/src/helpers/component-file-extensions.d.ts

@@ -1,4 +1,4 @@
-import { MitosisConfig, Target } from '..';
+import { MitosisConfig, Target } from '../types/config';
 export declare const COMPONENT_IMPORT_EXTENSIONS: string[];
 export declare const checkIsSvelteComponentFilePath: (filePath: string) => boolean;
 export declare const checkIsLiteComponentFilePath: (filePath: string) => boolean;

package/dist/src/helpers/component-file-extensions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getComponentFileExtensionForTarget = exports.renameImport = exports.renameComponentFile = exports.INPUT_EXTENSION_REGEX = exports.checkIsMitosisComponentFilePath = exports.checkIsLiteComponentFilePath = exports.checkIsSvelteComponentFilePath = exports.COMPONENT_IMPORT_EXTENSIONS = void 0;
-var mitosis_1 = require("..");
+var output_1 = require("./output");
 var COMPONENT_EXTENSIONS = {
     jsx: ['.lite.tsx', '.lite.jsx'],
     svelte: ['.svelte'],
@@ -30,7 +30,7 @@ var renameComponentFile = function (_a) {
     return path.replace(exports.INPUT_EXTENSION_REGEX, (0, exports.getComponentFileExtensionForTarget)({
         type: 'filename',
         target: target,
-        isTypescript: (0, mitosis_1.checkShouldOutputTypeScript)({ options: options, target: target }),
+        isTypescript: (0, output_1.checkShouldOutputTypeScript)({ options: options, target: target }),
     }));
 };
 exports.renameComponentFile = renameComponentFile;

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

@@ -1,5 +1,5 @@
+import { MitosisComponent, MitosisState } from '../../types/mitosis-component';
 import { BuilderContent, BuilderElement } from '@builder.io/sdk';
-import { MitosisComponent, MitosisState } from '../..';
 import { MitosisNode } from '../../types/mitosis-node';
 type InternalOptions = {
     skipMapper?: boolean;

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

@@ -47,12 +47,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.builderContentToMitosisComponent = exports.isBuilderElement = exports.createBuilderElement = exports.convertExportDefaultToReturn = exports.extractStateHook = exports.builderElementToMitosisNode = exports.symbolBlocksAsChildren = void 0;
+var mitosis_1 = require("../../generators/mitosis");
+var symbol_processor_1 = require("../../symbols/symbol-processor");
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
 var json5_1 = __importDefault(require("json5"));
 var lodash_1 = require("lodash");
 var traverse_1 = __importDefault(require("traverse"));
-var __1 = require("../..");
 var media_sizes_1 = require("../../constants/media-sizes");
 var bindings_1 = require("../../helpers/bindings");
 var capitalize_1 = require("../../helpers/capitalize");
@@ -532,7 +533,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
                 // For now, stringify to Mitosis nodes even though that only really works in React, due to syntax overlap.
                 // the correct long term solution is to hold on to the Mitosis Node, and have a plugin for each framework
                 // which processes any Mitosis nodes set into the attribute and moves them as slots when relevant (Svelte/Vue)
-                return (0, __1.blockToMitosis)(node, {}, null);
+                return (0, mitosis_1.blockToMitosis)(node, {}, null);
             };
             if ((0, exports.isBuilderElement)(value)) {
                 bindings[key] = (0, bindings_1.createSingleBinding)({ code: transformBldrElementToBinding(value) });
@@ -751,7 +752,7 @@ function extractSymbols(json) {
         subComponents: subComponents,
     };
 }
-var createBuilderElement = function (options) { return (__assign({ '@type': '@builder.io/sdk:Element', id: 'builder-' + (0, __1.hashCodeAsString)(options) }, options)); };
+var createBuilderElement = function (options) { return (__assign({ '@type': '@builder.io/sdk:Element', id: 'builder-' + (0, symbol_processor_1.hashCodeAsString)(options) }, options)); };
 exports.createBuilderElement = createBuilderElement;
 var isBuilderElement = function (el) {
     return (el === null || el === void 0 ? void 0 : el['@type']) === '@builder.io/sdk:Element';

package/dist/src/parsers/jsx/hooks/use-target.js

@@ -29,7 +29,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getUseTargetStatements = exports.getIdFromMatch = exports.USE_TARGET_MAGIC_REGEX = exports.USE_TARGET_MAGIC_STRING = exports.getMagicString = exports.getTargetId = void 0;
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
-var targets_1 = require("../../../targets");
+var TARGETS = {
+    alpine: null,
+    angular: null,
+    customElement: null,
+    html: null,
+    mitosis: null,
+    liquid: null,
+    react: null,
+    reactNative: null,
+    solid: null,
+    svelte: null,
+    swift: null,
+    template: null,
+    webcomponent: null,
+    vue: null,
+    stencil: null,
+    qwik: null,
+    marko: null,
+    preact: null,
+    lit: null,
+    rsc: null,
+    taro: null,
+};
 var types = babel.types;
 var getTargetId = function (component) {
     var latestId = Object.keys(component.targetBlocks || {}).length;
@@ -76,7 +98,7 @@ var getUseTargetStatements = function (path) {
         if (!types.isIdentifier(prop.key)) {
             throw new Error('ERROR Parsing `useTarget()`: Expected an identifier, instead got: ' + prop.key);
         }
-        if (!Object.keys(targets_1.targets).concat('default').includes(prop.key.name)) {
+        if (!Object.keys(TARGETS).concat('default').includes(prop.key.name)) {
             throw new Error('ERROR Parsing `useTarget()`: Invalid target: ' + prop.key.name);
         }
         var keyName = prop.key.name;

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

@@ -39,7 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseStateObjectToMitosisState = exports.mapStateIdentifiers = void 0;
 var babel = __importStar(require("@babel/core"));
-var generator_1 = __importDefault(require("@babel/generator"));
 var function_1 = require("fp-ts/lib/function");
 var traverse_1 = __importDefault(require("traverse"));
 var babel_transform_1 = require("../../helpers/babel-transform");
@@ -79,12 +78,13 @@ function mapStateIdentifiersInExpression(expression, stateProperties) {
                         path.replaceWith(newExpression);
                     }
                     catch (err) {
-                        console.log('err: ', {
-                            from: (0, generator_1.default)(path.parent).code,
-                            fromChild: (0, generator_1.default)(path.node).code,
-                            to: newExpression,
-                            // err,
-                        });
+                        console.error(err);
+                        // console.log('err: ', {
+                        //   from: generate(path.parent).code,
+                        //   fromChild: generate(path.node).code,
+                        //   to: newExpression,
+                        //   // err,
+                        // });
                     }
                 }
             }

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

@@ -256,8 +256,8 @@ exports.components = {
         }), components);
     },
     Image: function (node, context, components) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var _h = node.properties, backgroundSize = _h.backgroundSize, backgroundPosition = _h.backgroundPosition;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _k = node.properties, backgroundSize = _k.backgroundSize, backgroundPosition = _k.backgroundPosition;
         var srcset = node.properties.srcset;
         var aspectRatio = ((_a = node.bindings.aspectRatio) === null || _a === void 0 ? void 0 : _a.code)
             ? parseFloat(node.bindings.aspectRatio.code)
@@ -281,12 +281,13 @@ exports.components = {
             bindings: noUndefined({
                 src: ((_c = node.bindings.image) === null || _c === void 0 ? void 0 : _c.code) && { code: (_d = node.bindings.image) === null || _d === void 0 ? void 0 : _d.code },
                 sizes: ((_e = node.bindings.sizes) === null || _e === void 0 ? void 0 : _e.code) && { code: (_f = node.bindings.sizes) === null || _f === void 0 ? void 0 : _f.code },
+                style: ((_g = node.bindings.style) === null || _g === void 0 ? void 0 : _g.code) && { code: (_h = node.bindings.style) === null || _h === void 0 ? void 0 : _h.code },
                 css: (0, bindings_1.createSingleBinding)({
                     code: JSON.stringify(__assign(__assign({ aspectRatio: aspectRatio ? String((0, lodash_1.round)(1 / aspectRatio, 2)) : undefined, objectFit: backgroundSize || 'cover', objectPosition: backgroundPosition || 'center', width: '100%' }, css), { display: undefined, flexDirection: undefined, position: css.position === 'relative' ? undefined : css.position })),
                 }),
             }),
         });
-        if (!((_g = node.children) === null || _g === void 0 ? void 0 : _g.length)) {
+        if (!((_j = node.children) === null || _j === void 0 ? void 0 : _j.length)) {
             return img;
         }
         // TODO: deal with links: anchor tag and href

package/package.json

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