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

package/dist/src/__tests__/shared.js

@@ -161,6 +161,17 @@ var TESTS_FOR_TARGET = {
         ADVANCED_REF,
         ON_UPDATE_RETURN,
     ],
+    lit: [
+        BASIC_TESTS,
+        SLOTS_TESTS,
+        SHOW_TESTS,
+        FORWARD_REF_TESTS,
+        MULTI_ON_UPDATE_TESTS,
+        FORM_BLOCK_TESTS,
+        FOR_SHOW_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
+    ],
     marko: [
         BASIC_TESTS,
         SLOTS_TESTS,

package/dist/src/__tests__/solid.test.js

@@ -4,4 +4,7 @@ var solid_1 = require("../generators/solid");
 var shared_1 = require("./shared");
 describe('Solid', function () {
     (0, shared_1.runTestsForTarget)('solid', (0, solid_1.componentToSolid)());
+    (0, shared_1.runTestsForTarget)('solid', (0, solid_1.componentToSolid)({
+        stylesType: 'style-tag',
+    }));
 });

package/dist/src/generators/lit/collect-class-string.d.ts

@@ -0,0 +1,2 @@
+import { MitosisNode } from '../../types/mitosis-node';
+export declare function collectClassString(json: MitosisNode, bindingOpenChar?: string, bindingCloseChar?: string): string | null;

package/dist/src/generators/lit/collect-class-string.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectClassString = void 0;
+// This should really be a preprocessor mapping the `class` attribute binding based on what other values have
+// to make this more pluggable
+function collectClassString(json, bindingOpenChar, bindingCloseChar) {
+    var _a, _b;
+    if (bindingOpenChar === void 0) { bindingOpenChar = '{'; }
+    if (bindingCloseChar === void 0) { bindingCloseChar = '}'; }
+    var staticClasses = [];
+    var hasStaticClasses = Boolean(staticClasses.length);
+    if (json.properties.class) {
+        staticClasses.push(json.properties.class);
+        delete json.properties.class;
+    }
+    if (json.properties.className) {
+        staticClasses.push(json.properties.className);
+        delete json.properties.className;
+    }
+    var dynamicClasses = [];
+    if (typeof ((_a = json.bindings.class) === null || _a === void 0 ? void 0 : _a.code) === 'string') {
+        dynamicClasses.push(json.bindings.class.code);
+        delete json.bindings.class;
+    }
+    if (typeof ((_b = json.bindings.className) === null || _b === void 0 ? void 0 : _b.code) === 'string') {
+        dynamicClasses.push(json.bindings.className.code);
+        delete json.bindings.className;
+    }
+    var staticClassesString = staticClasses.join(' ');
+    var dynamicClassesString = dynamicClasses.join(" + ' ' + ");
+    var hasDynamicClasses = Boolean(dynamicClasses.length);
+    if (hasStaticClasses && !hasDynamicClasses) {
+        return "\"".concat(staticClassesString, "\"");
+    }
+    if (hasDynamicClasses && !hasStaticClasses) {
+        return "".concat(bindingOpenChar).concat(dynamicClassesString).concat(bindingCloseChar);
+    }
+    if (hasDynamicClasses && hasStaticClasses) {
+        return "".concat(bindingOpenChar, "\"").concat(staticClassesString, " \" + ").concat(dynamicClassesString).concat(bindingCloseChar);
+    }
+    return null;
+}
+exports.collectClassString = collectClassString;

package/dist/src/generators/lit/generate.d.ts

@@ -0,0 +1,4 @@
+import { BaseTranspilerOptions, Transpiler } from '../../types/transpiler';
+export interface ToLitOptions extends BaseTranspilerOptions {
+}
+export declare const componentToLit: (options?: ToLitOptions) => Transpiler;

package/dist/src/generators/lit/generate.js

@@ -0,0 +1,195 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToLit = void 0;
+var dedent_1 = __importDefault(require("dedent"));
+var standalone_1 = require("prettier/standalone");
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var render_imports_1 = require("../../helpers/render-imports");
+var jsx_1 = require("../../parsers/jsx");
+var plugins_1 = require("../../modules/plugins");
+var fast_clone_1 = require("../../helpers/fast-clone");
+var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+var collect_class_string_1 = require("./collect-class-string");
+var get_props_1 = require("../../helpers/get-props");
+var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+var dash_case_1 = require("../../helpers/dash-case");
+var collect_css_1 = require("../../helpers/styles/collect-css");
+var indent_1 = require("../../helpers/indent");
+var map_refs_1 = require("../../helpers/map-refs");
+var get_refs_1 = require("../../helpers/get-refs");
+var lodash_1 = require("lodash");
+var is_upper_case_1 = require("../../helpers/is-upper-case");
+var blockToLit = function (json, options) {
+    var _a, _b, _c, _d, _e;
+    if (options === void 0) { options = {}; }
+    if (json.properties._text) {
+        return json.properties._text;
+    }
+    if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
+        return "${".concat(processBinding((_b = json.bindings) === null || _b === void 0 ? void 0 : _b._text.code), "}");
+    }
+    if (json.name === 'For') {
+        return "${".concat(processBinding((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), "?.map((").concat(json.properties._forName, ", index) => (\n      html`").concat(json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map(function (item) { return blockToLit(item, options); })
+            .join('\n'), "`\n    ))}");
+    }
+    else if (json.name === 'Show') {
+        return "${".concat(processBinding((_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code), " ?\n      html`").concat(json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map(function (item) { return blockToLit(item, options); })
+            .join('\n'), "`\n    ) : ").concat(!json.meta.else ? 'null' : blockToLit(json.meta.else, options), "}");
+    }
+    var str = '';
+    var tagName = (0, is_upper_case_1.isUpperCase)(json.name[0]) ? (0, dash_case_1.dashCase)(json.name) : json.name;
+    str += "<".concat(tagName, " ");
+    var classString = (0, collect_class_string_1.collectClassString)(json);
+    if (classString) {
+        str += " class=".concat(classString, " ");
+    }
+    if ((_e = json.bindings._spread) === null || _e === void 0 ? void 0 : _e.code) {
+        // Lit currently does not support spread, it's been an open PR
+        // for a year https://github.com/lit/lit/pull/1960/files
+        // str += ` \${...(${json.bindings._spread.code})} `;
+    }
+    for (var key in json.properties) {
+        var value = json.properties[key];
+        str += " ".concat(key, "=\"").concat(value, "\" ");
+    }
+    for (var key in json.bindings) {
+        var _f = json.bindings[key], code = _f.code, _g = _f.arguments, cusArgs = _g === void 0 ? ['event'] : _g;
+        if (key === '_spread' || key === '_forName') {
+            continue;
+        }
+        if (key === 'ref') {
+            str += " ref=\"".concat(code, "\" ");
+        }
+        else if (key.startsWith('on')) {
+            var useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
+            useKey = '@' + useKey.substring(2).toLowerCase();
+            str += " ".concat(useKey, "=${").concat(cusArgs.join(','), " => ").concat(processBinding(code), "} ");
+        }
+        else {
+            str += " ".concat(key, "=${").concat(processBinding(code), "} ");
+        }
+    }
+    if (jsx_1.selfClosingTags.has(json.name)) {
+        return str + ' />';
+    }
+    str += '>';
+    if (json.children) {
+        str += json.children.map(function (item) { return blockToLit(item, options); }).join('\n');
+    }
+    str += "</".concat(tagName, ">");
+    return str;
+};
+function processBinding(code) {
+    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, { replaceWith: 'this.' });
+}
+var componentToLit = function (options) {
+    if (options === void 0) { options = {}; }
+    return function (_a) {
+        var _b, _c, _d, _e;
+        var component = _a.component;
+        var json = (0, fast_clone_1.fastClone)(component);
+        if (options.plugins) {
+            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+        }
+        var props = (0, get_props_1.getProps)(component);
+        var css = (0, collect_css_1.collectCss)(json);
+        var domRefs = (0, get_refs_1.getRefs)(json);
+        (0, map_refs_1.mapRefs)(component, function (refName) { return "this.".concat((0, lodash_1.camelCase)(refName)); });
+        if (options.plugins) {
+            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+        }
+        (0, strip_meta_properties_1.stripMetaProperties)(json);
+        var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            format: 'class',
+            data: true,
+            functions: false,
+            getters: false,
+            keyPrefix: '@state() ',
+            valueMapper: function (code) { return processBinding(code); },
+        });
+        var methodsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            format: 'class',
+            data: false,
+            functions: true,
+            getters: true,
+            valueMapper: function (code) { return processBinding(code); },
+        });
+        if (options.prettier !== false) {
+            try {
+                css = (0, standalone_1.format)(css, {
+                    parser: 'css',
+                    plugins: [require('prettier/parser-postcss')],
+                });
+            }
+            catch (err) {
+                console.warn('Could not format css', err);
+            }
+        }
+        var html = json.children.map(function (item) { return blockToLit(item, options); }).join('\n');
+        if (options.prettier !== false) {
+            try {
+                css = (0, standalone_1.format)(css, {
+                    parser: 'css',
+                    plugins: [require('prettier/parser-postcss')],
+                });
+            }
+            catch (err) {
+                console.warn('Could not format css', err);
+            }
+            try {
+                html = (0, standalone_1.format)(html, {
+                    parser: 'html',
+                    plugins: [require('prettier/parser-html')],
+                });
+            }
+            catch (err) {
+                console.warn('Could not format html', err);
+            }
+        }
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    import { LitElement, html } from 'lit';\n    import { customElement, property, css, state } from 'lit/decorators.js';\n\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html`\n          ", "\n        `\n      }\n    }\n  "], ["\n    ", "\n    import { LitElement, html } from 'lit';\n    import { customElement, property, css, state } from 'lit/decorators.js';\n\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html\\`\n          ", "\n        \\`\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'lit' }), ((_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName) || (0, dash_case_1.dashCase)(json.name), json.name, css.length
+            ? "static styles = css`\n      ".concat((0, indent_1.indent)(css, 8), "`;")
+            : '', Array.from(domRefs)
+            .map(function (refName) { return "\n          @query('[ref=\"".concat(refName, "\"]')\n          ").concat((0, lodash_1.camelCase)(refName), "!: HTMLElement;\n          "); })
+            .join('\n'), Array.from(props)
+            .map(function (item) { return "@property() ".concat(item, ": any"); })
+            .join('\n'), dataString, methodsString, !((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code)
+            ? ''
+            : "connectedCallback() { ".concat(processBinding(json.hooks.onMount.code), " }"), !((_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code)
+            ? ''
+            : "disconnectedCallback() { ".concat(processBinding(json.hooks.onUnMount.code), " }"), !((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
+            ? ''
+            : json.hooks.onUpdate.map(function (hook) { return "updated() { ".concat(processBinding(hook.code), " }"); }), (0, indent_1.indent)(html, 8));
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+        }
+        if (options.prettier !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'typescript',
+                    plugins: [require('prettier/parser-typescript')],
+                });
+            }
+            catch (err) {
+                console.warn('Could not format Lit typescript', err);
+            }
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+        }
+        return str;
+    };
+};
+exports.componentToLit = componentToLit;
+var templateObject_1;

package/dist/src/generators/lit/index.d.ts

@@ -0,0 +1 @@
+export * from './generate';

package/dist/src/generators/lit/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("./generate"), exports);

package/dist/src/generators/solid.js

@@ -49,6 +49,7 @@ 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");
+var hash_sum_1 = __importDefault(require("hash-sum"));
 // Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
 function processDynamicComponents(json, options) {
     var found = false;
@@ -243,7 +244,10 @@ var componentToSolid = function (_options) {
         }
         (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 css = options.stylesType === 'style-tag' &&
+            (0, collect_css_1.collectCss)(json, {
+                prefix: (0, hash_sum_1.default)(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);

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

@@ -35,6 +35,8 @@ var getFileExtensionForTarget = function (target) {
             return '.vue';
         case 'marko':
             return '.marko';
+        case 'lit':
+            return '.js';
         case 'angular':
             return '';
         // these `.lite` extensions are handled in the `transpile` step of the CLI.
@@ -97,6 +99,11 @@ var renderImport = function (_a) {
     var importValue = getImportValue(importedValues);
     var isComponentImport = checkIsComponentImport(theImport);
     var shouldBeAsyncImport = asyncComponentImports && isComponentImport;
+    // For lit (components) we just want to do a plain import
+    // https://lit.dev/docs/components/rendering/#composing-templates
+    if (isComponentImport && target === 'lit') {
+        return "import '".concat(path, "';");
+    }
     if (shouldBeAsyncImport) {
         var isVueImport = target === 'vue';
         if (isVueImport && importedValues.namedImports) {

package/dist/src/index.d.ts

@@ -45,6 +45,7 @@ export * from './generators/marko';
 export * from './generators/mitosis';
 export * from './generators/template';
 export * from './generators/swift-ui';
+export * from './generators/lit';
 export * from './generators/react-native';
 export * from './helpers/parse-reactive-script';
 export * from './helpers/is-mitosis-node';

package/dist/src/index.js

@@ -84,6 +84,7 @@ __exportStar(require("./generators/marko"), exports);
 __exportStar(require("./generators/mitosis"), exports);
 __exportStar(require("./generators/template"), exports);
 __exportStar(require("./generators/swift-ui"), exports);
+__exportStar(require("./generators/lit"), exports);
 __exportStar(require("./generators/react-native"), exports);
 __exportStar(require("./helpers/parse-reactive-script"), exports);
 __exportStar(require("./helpers/is-mitosis-node"), exports);

package/dist/src/targets.d.ts

@@ -26,4 +26,5 @@ export declare const targets: {
     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;
 };

package/dist/src/targets.js

@@ -17,6 +17,7 @@ var vue_1 = require("./generators/vue");
 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.targets = {
     angular: angular_1.componentToAngular,
     builder: builder_1.componentToBuilder,
@@ -38,4 +39,5 @@ exports.targets = {
     qwik: qwik_1.componentToQwik,
     marko: marko_1.componentToMarko,
     preact: react_2.componentToPreact,
+    lit: lit_1.componentToLit,
 };