@builder.io/mitosis 0.0.56-64 → 0.0.56-68

package/dist/src/__tests__/data/basic-for-show.raw.jsx

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function MyBasicForShowComponent() {
     var state = (0, mitosis_1.useStore)({
-        name: "PatrickJS",
+        name: 'PatrickJS',
         names: ['Steve', 'PatrickJS'],
     });
     return (<div>

package/dist/src/__tests__/data/blocks/form.raw.jsx

@@ -45,7 +45,7 @@ var _fake_4 = require("@fake");
 function FormComponent(props) {
     var _a;
     var state = (0, mitosis_1.useStore)({
-        state: "unsubmitted",
+        state: 'unsubmitted',
         // TODO: separate response and error?
         responseData: null,
         formErrorMessage: '',

package/dist/src/__tests__/data/types/foo-type.d.ts

@@ -0,0 +1 @@
+export declare type Foo = null;

package/dist/src/__tests__/data/types/foo-type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/__tests__/data/types/type-dependency.raw.d.ts

@@ -0,0 +1,7 @@
+import type { Foo } from './foo-type';
+import type { Foo as Foo2 } from './type-export.lite';
+export declare type TypeDependencyProps = {
+    foo: Foo;
+    foo2: Foo2;
+};
+export default function TypeDependency(props: TypeDependencyProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/types/type-dependency.raw.jsx

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function TypeDependency(props) {
+    return <div>{props.foo}</div>;
+}
+exports.default = TypeDependency;

package/dist/src/__tests__/data/types/type-export.lite.d.ts

@@ -0,0 +1,3 @@
+export interface Foo {
+}
+export default function MyComponent(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/types/type-export.lite.jsx

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function MyComponent() {
+    return <div></div>;
+}
+exports.default = MyComponent;

package/dist/src/__tests__/shared.js

@@ -7,6 +7,7 @@ var basicOnMountUpdate = require('./data/basic-onMount-update.raw');
 var basicContext = require('./data/basic-context.raw');
 var basicOutputsMeta = require('./data/basic-outputs-meta.raw');
 var basicOutputs = require('./data/basic-outputs.raw');
+var subComponent = require('./data/sub-component.lite.jsx');
 var basic = require('./data/basic.raw');
 var basicMitosis = require('./data/basic-custom-mitosis-package.raw');
 var basicChildComponent = require('./data/basic-child-component.raw');
@@ -21,6 +22,7 @@ var preserveExportOrLocalStatement = require('./data/basic-preserve-export-or-lo
 var propsType = require('./data/types/component-props-type.raw');
 var propsInterface = require('./data/types/component-props-interface.raw');
 var preserveTyping = require('./data/types/preserve-typing.raw');
+var typeDependency = require('./data/types/type-dependency.raw');
 var classRaw = require('./data/styles/class.raw');
 var className = require('./data/styles/className.raw');
 var classAndClassName = require('./data/styles/class-and-className.raw');
@@ -86,6 +88,8 @@ var BASIC_TESTS = {
     propsType: propsType,
     propsInterface: propsInterface,
     preserveTyping: preserveTyping,
+    typeDependency: typeDependency,
+    subComponent: subComponent,
     propsDestructure: propsDestructure,
     'onInit & onMount': onInitonMount,
     'Basic Context': basicContext,

package/dist/src/generators/solid.d.ts

@@ -1,4 +1,5 @@
 import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
 export interface ToSolidOptions extends BaseTranspilerOptions {
+    stylesType?: 'styled-components' | 'style-tag';
 }
-export declare const componentToSolid: (options?: ToSolidOptions) => Transpiler;
+export declare const componentToSolid: (_options?: ToSolidOptions) => Transpiler;

package/dist/src/generators/solid.js

@@ -48,6 +48,7 @@ var babel_transform_1 = require("../helpers/babel-transform");
 var core_1 = require("@babel/core");
 var lodash_1 = require("lodash");
 var state_1 = require("../helpers/state");
+var collect_css_1 = require("../helpers/styles/collect-css");
 // Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
 function processDynamicComponents(json, options) {
     var found = false;
@@ -71,7 +72,7 @@ function getContextString(component, options) {
 }
 // This should really be a preprocessor mapping the `class` attribute binding based on what other values have
 // to make this more pluggable
-var collectClassString = function (json) {
+var collectClassString = function (json, options) {
     var _a, _b, _c;
     var staticClasses = [];
     if (json.properties.class) {
@@ -91,7 +92,9 @@ var collectClassString = function (json) {
         dynamicClasses.push(json.bindings.className.code);
         delete json.bindings.className;
     }
-    if (typeof ((_c = json.bindings.css) === null || _c === void 0 ? void 0 : _c.code) === 'string' && json.bindings.css.code.trim().length > 4) {
+    if (typeof ((_c = json.bindings.css) === null || _c === void 0 ? void 0 : _c.code) === 'string' &&
+        json.bindings.css.code.trim().length > 4 &&
+        options.stylesType === 'styled-components') {
         dynamicClasses.push("css(".concat(json.bindings.css.code, ")"));
     }
     delete json.bindings.css;
@@ -137,7 +140,7 @@ var blockToSolid = function (json, options) {
     if (json.name === 'Show' && json.meta.else) {
         str += "fallback={".concat(blockToSolid(json.meta.else, options), "}");
     }
-    var classString = collectClassString(json);
+    var classString = collectClassString(json, options);
     if (classString) {
         str += " class=".concat(classString, " ");
     }
@@ -222,23 +225,25 @@ function addProviderComponents(json, options) {
         ];
     }
 }
-var componentToSolid = function (options) {
-    if (options === void 0) { options = {}; }
+var componentToSolid = function (_options) {
+    if (_options === void 0) { _options = {}; }
     return function (_a) {
         var _b, _c, _d;
         var component = _a.component;
+        var options = __assign({ stylesType: 'styled-components' }, _options);
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
         addProviderComponents(json, options);
         var componentHasStyles = (0, helpers_1.hasCss)(json);
-        var addWrapper = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).length !== 1;
+        var addWrapper = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).length !== 1 || options.stylesType === 'style-tag';
         if (options.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
         (0, strip_meta_properties_1.stripMetaProperties)(json);
         var foundDynamicComponents = processDynamicComponents(json, options);
+        var css = options.stylesType === 'style-tag' && (0, collect_css_1.collectCss)(json);
         var stateString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json);
         var hasState = (0, state_1.checkHasState)(json);
         var componentsUsed = (0, get_components_used_1.getComponentsUsed)(json);
@@ -251,9 +256,11 @@ var componentToSolid = function (options) {
             hasForComponent ? 'For' : undefined,
             ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? 'onMount' : undefined
         ], (((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length) ? ['on', 'createEffect'] : []), true).filter(Boolean);
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "])), solidJSImports.length > 0
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "])), solidJSImports.length > 0
             ? "import { \n          ".concat(solidJSImports.map(function (item) { return item; }).join(', '), "\n         } from 'solid-js';")
-            : '', !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", !hasState ? '' : "import { createMutable } from 'solid-js/store';", !componentHasStyles ? '' : "import { css } from \"solid-styled-components\";", (0, render_imports_1.renderPreComponent)({ component: json, target: 'solid' }), json.name, !hasState ? '' : "const state = createMutable(".concat(stateString, ");"), getRefsString(json), getContextString(json, options), !((_d = json.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), json.hooks.onUpdate
+            : '', !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", !hasState ? '' : "import { createMutable } from 'solid-js/store';", !componentHasStyles && options.stylesType === 'styled-components'
+            ? ''
+            : "import { css } from \"solid-styled-components\";", (0, render_imports_1.renderPreComponent)({ component: json, target: 'solid' }), json.name, !hasState ? '' : "const state = createMutable(".concat(stateString, ");"), getRefsString(json), getContextString(json, options), !((_d = json.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), json.hooks.onUpdate
             ? json.hooks.onUpdate
                 .map(function (hook, index) {
                 if (hook.deps) {
@@ -269,7 +276,10 @@ var componentToSolid = function (options) {
             : '', addWrapper ? '<>' : '', json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return blockToSolid(item, options); })
-            .join('\n'), addWrapper ? '</>' : '', json.name);
+            .join('\n'), options.stylesType === 'style-tag' && css && css.trim().length > 4
+            ? // We add the jsx attribute so prettier formats this nicely
+                "<style jsx>{`".concat(css, "`}</style>")
+            : '', addWrapper ? '</>' : '', json.name);
         // HACK: for some reason we are generating `state.state.foo` instead of `state.foo`
         // need a full fix, but this unblocks a lot in the short term
         str = str.replace(/state\.state\./g, 'state.');
@@ -279,7 +289,7 @@ var componentToSolid = function (options) {
         if (options.prettier !== false) {
             str = (0, standalone_1.format)(str, {
                 parser: 'typescript',
-                plugins: [require('prettier/parser-typescript')],
+                plugins: [require('prettier/parser-typescript'), require('prettier/parser-postcss')],
             });
         }
         if (options.plugins) {

package/dist/src/generators/vue.js

@@ -64,6 +64,7 @@ var patterns_1 = require("../helpers/patterns");
 var method_literal_prefix_1 = require("../constants/method-literal-prefix");
 var function_1 = require("fp-ts/lib/function");
 var get_custom_imports_1 = require("../helpers/get-custom-imports");
+var slots_1 = require("../helpers/slots");
 function encodeQuotes(string) {
     return string.replace(/"/g, '"');
 }
@@ -122,7 +123,7 @@ var NODE_MAPPERS = {
         switch (options.vueVersion) {
             case 3:
                 return "\n        <template ".concat(SPECIAL_PROPERTIES.V_IF, "=\"").concat(encodeQuotes(ifValue), "\">\n          ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n        </template>\n        ").concat((0, is_mitosis_node_1.isMitosisNode)(json.meta.else)
-                    ? "\n            <template ".concat(SPECIAL_PROPERTIES.V_ELSE, "> \n              ").concat((0, exports.blockToVue)(json.meta.else, options), "\n            </template>")
+                    ? "\n            <template ".concat(SPECIAL_PROPERTIES.V_ELSE, ">\n              ").concat((0, exports.blockToVue)(json.meta.else, options), "\n            </template>")
                     : '', "\n        ");
             case 2:
                 // Vue 2 can only handle one root element, so we just take the first one.
@@ -165,7 +166,7 @@ var NODE_MAPPERS = {
                     var elseString = firstChildOfFirstChild
                         ? (0, function_1.pipe)(firstChildOfFirstChild, addPropertiesToJson((_c = {}, _c[SPECIAL_PROPERTIES.V_ELSE] = '', _c)), function (block) { return (0, exports.blockToVue)(block, options); })
                         : '';
-                    return "\n            \n            ".concat(ifString, "\n            \n            ").concat(elseIfString, "\n            \n            ").concat(elseString, "\n            \n          ");
+                    return "\n\n            ".concat(ifString, "\n\n            ").concat(elseIfString, "\n\n            ").concat(elseString, "\n\n          ");
                 }
                 else {
                     var ifString = firstChild
@@ -259,7 +260,7 @@ var blockToVue = function (node, options, scope) {
         return nodeMapper(node, options, scope);
     }
     if ((0, is_children_1.default)(node)) {
-        return "<slot></slot>";
+        return "<slot/>";
     }
     if (node.name === 'style') {
         // Vue doesn't allow <style>...</style> in templates, but does support the synonymous
@@ -270,8 +271,13 @@ var blockToVue = function (node, options, scope) {
     if (node.properties._text) {
         return "".concat(node.properties._text);
     }
-    if ((_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
-        return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(node.bindings._text.code), "}}");
+    var textCode = (_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
+    if (textCode) {
+        var strippedTextCode = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(textCode);
+        if ((0, slots_1.isSlotProperty)(strippedTextCode)) {
+            return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(strippedTextCode).toLowerCase(), "\"/>");
+        }
+        return "{{".concat(strippedTextCode, "}}");
     }
     var str = '';
     str += "<".concat(node.name, " ");
@@ -452,7 +458,7 @@ var componentToVue = function (userOptions) {
             .join('\n');
         var includeClassMapHelper = template.includes('_classStringToObject');
         if (includeClassMapHelper) {
-            functionsString = functionsString.replace(/}\s*$/, "_classStringToObject(str) {\n        const obj = {};\n        if (typeof str !== 'string') { return obj }\n        const classNames = str.trim().split(/\\s+/); \n        for (const name of classNames) {\n          obj[name] = true;\n        } \n        return obj;\n      }  }");
+            functionsString = functionsString.replace(/}\s*$/, "_classStringToObject(str) {\n        const obj = {};\n        if (typeof str !== 'string') { return obj }\n        const classNames = str.trim().split(/\\s+/);\n        for (const name of classNames) {\n          obj[name] = true;\n        }\n        return obj;\n      }  }");
         }
         if (localVarAsFunc.length) {
             functionsString = functionsString.replace(/}\s*$/, "".concat(localVarAsFunc.join(','), "}"));

package/dist/src/helpers/json.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tryParseJson = void 0;
-var json_6_1 = __importDefault(require("json-6"));
+var json5_1 = __importDefault(require("json5"));
 var tryParseJson = function (jsonStr) {
     try {
-        return json_6_1.default.parse(jsonStr);
+        return json5_1.default.parse(jsonStr);
     }
     catch (err) {
         console.error('Could not JSON5 parse object:\n', jsonStr);

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

@@ -1 +1,2 @@
 export declare const isSlotProperty: (key: string) => boolean;
+export declare const stripSlotPrefix: (key: string) => string;

package/dist/src/helpers/slots.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isSlotProperty = void 0;
+exports.stripSlotPrefix = exports.isSlotProperty = void 0;
 var SLOT_PREFIX = 'slot';
 var isSlotProperty = function (key) { return key.startsWith(SLOT_PREFIX); };
 exports.isSlotProperty = isSlotProperty;
+var stripSlotPrefix = function (key) { return key.substring(SLOT_PREFIX.length); };
+exports.stripSlotPrefix = stripSlotPrefix;

package/dist/src/parsers/jsx/component-types.d.ts

@@ -1,6 +1,7 @@
 import * as babel from '@babel/core';
 import { Context } from './types';
 export declare const getPropsTypeRef: (node: babel.types.FunctionDeclaration) => string | undefined;
+export declare const isTypeImport: (node: babel.Node) => boolean;
 export declare const isTypeOrInterface: (node: babel.Node) => boolean;
 export declare const collectTypes: (node: babel.Node, context: Context) => void;
 export declare const collectInterfaces: (node: babel.Node, context: Context) => void;

package/dist/src/parsers/jsx/component-types.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.collectInterfaces = exports.collectTypes = exports.isTypeOrInterface = exports.getPropsTypeRef = void 0;
+exports.collectInterfaces = exports.collectTypes = exports.isTypeOrInterface = exports.isTypeImport = exports.getPropsTypeRef = void 0;
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
 var types = babel.types;
@@ -46,6 +46,14 @@ var getPropsTypeRef = function (node) {
     return undefined;
 };
 exports.getPropsTypeRef = getPropsTypeRef;
+var isTypeImport = function (node) {
+    var _a;
+    return types.isImportDeclaration(node) &&
+        node.importKind === 'type' &&
+        // Babel adds an implicit JSX type import that we don't want
+        ((_a = node.specifiers[0]) === null || _a === void 0 ? void 0 : _a.local.name) !== 'JSX';
+};
+exports.isTypeImport = isTypeImport;
 var isTypeOrInterface = function (node) {
     return types.isTSTypeAliasDeclaration(node) ||
         types.isTSInterfaceDeclaration(node) ||

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

@@ -506,6 +506,17 @@ function parseJsx(jsx, options) {
                             component: (0, create_mitosis_component_1.createMitosisComponent)(),
                         };
                         var keepStatements = path.node.body.filter(function (statement) { return isImportOrDefaultExport(statement) || (0, component_types_1.isTypeOrInterface)(statement); });
+                        for (var _i = 0, _a = path.node.body; _i < _a.length; _i++) {
+                            var statement = _a[_i];
+                            if ((0, component_types_1.isTypeImport)(statement)) {
+                                var importDeclaration = statement;
+                                // Remove .lite from path if exists, as that will be stripped
+                                if (importDeclaration.source.value.endsWith('.lite')) {
+                                    importDeclaration.source.value = importDeclaration.source.value.replace(/\.lite$/, '');
+                                }
+                                (0, component_types_1.collectTypes)(statement, context);
+                            }
+                        }
                         var exportsOrLocalVariables = path.node.body.filter(function (statement) {
                             return !isImportOrDefaultExport(statement) &&
                                 !(0, component_types_1.isTypeOrInterface)(statement) &&

package/dist/src/targets.d.ts

@@ -14,7 +14,7 @@ export declare const targets: {
     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;
+    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;