@builder.io/mitosis 0.0.48 → 0.0.49

package/dist/src/generators/jsx-lite.js

@@ -0,0 +1,176 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToJsxLite = exports.blockToJsxLite = exports.DEFAULT_FORMAT = void 0;
+var dedent_1 = __importDefault(require("dedent"));
+var json5_1 = __importDefault(require("json5"));
+var standalone_1 = require("prettier/standalone");
+var fast_clone_1 = require("../helpers/fast-clone");
+var get_components_1 = require("../helpers/get-components");
+var get_refs_1 = require("../helpers/get-refs");
+var get_state_object_string_1 = require("../helpers/get-state-object-string");
+var map_refs_1 = require("../helpers/map-refs");
+var render_imports_1 = require("../helpers/render-imports");
+var jsx_1 = require("../parsers/jsx");
+var react_1 = require("./react");
+exports.DEFAULT_FORMAT = 'legacy';
+// Special isValidAttributeName for JSX Lite so we can allow for $ in names
+var isValidAttributeName = function (str) {
+    return Boolean(str && /^[$a-z0-9\-_:]+$/i.test(str));
+};
+var blockToJsxLite = function (json, toJsxLiteOptions) {
+    if (toJsxLiteOptions === void 0) { toJsxLiteOptions = {}; }
+    var options = __assign({ format: exports.DEFAULT_FORMAT }, toJsxLiteOptions);
+    if (options.format === 'react') {
+        return react_1.blockToReact(json, {
+            format: 'lite',
+            stateType: 'useState',
+            stylesType: 'emotion',
+            prettier: options.prettier,
+        });
+    }
+    if (json.name === 'For') {
+        var needsWrapper = json.children.length !== 1;
+        return "<For each={" + json.bindings.each + "}>\n    {(" + json.properties._forName + ", index) =>\n      " + (needsWrapper ? '<>' : '') + "\n        " + json.children.map(function (child) { return exports.blockToJsxLite(child, options); }) + "}\n      " + (needsWrapper ? '</>' : '') + "\n    </For>";
+    }
+    if (json.properties._text) {
+        return json.properties._text;
+    }
+    if (json.bindings._text) {
+        return "{" + json.bindings._text + "}";
+    }
+    var str = '';
+    str += "<" + json.name + " ";
+    if (json.bindings._spread) {
+        str += " {...(" + json.bindings._spread + ")} ";
+    }
+    for (var key in json.properties) {
+        var value = (json.properties[key] || '')
+            .replace(/"/g, '&quot;')
+            .replace(/\n/g, '\\n');
+        if (!isValidAttributeName(key)) {
+            console.warn('Skipping invalid attribute name:', key);
+        }
+        else {
+            str += " " + key + "=\"" + value + "\" ";
+        }
+    }
+    for (var key in json.bindings) {
+        var value = json.bindings[key];
+        if (key === '_spread') {
+            continue;
+        }
+        if (key.startsWith('on')) {
+            str += " " + key + "={event => " + value.replace(/\s*;$/, '') + "} ";
+        }
+        else {
+            if (!isValidAttributeName(key)) {
+                console.warn('Skipping invalid attribute name:', key);
+            }
+            else {
+                str += " " + key + "={" + value + "} ";
+            }
+        }
+    }
+    if (jsx_1.selfClosingTags.has(json.name)) {
+        return str + ' />';
+    }
+    // Self close by default if no children
+    if (!json.children.length) {
+        str += ' />';
+        return str;
+    }
+    str += '>';
+    if (json.children) {
+        str += json.children
+            .map(function (item) { return exports.blockToJsxLite(item, options); })
+            .join('\n');
+    }
+    str += "</" + json.name + ">";
+    return str;
+};
+exports.blockToJsxLite = blockToJsxLite;
+var getRefsString = function (json, refs) {
+    if (refs === void 0) { refs = get_refs_1.getRefs(json); }
+    var str = '';
+    for (var _i = 0, _a = Array.from(refs); _i < _a.length; _i++) {
+        var ref = _a[_i];
+        str += "\nconst " + ref + " = useRef();";
+    }
+    return str;
+};
+var jsxLiteCoreComponents = ['Show', 'For'];
+var componentToJsxLite = function (componentJson, toJsxLiteOptions) {
+    if (toJsxLiteOptions === void 0) { toJsxLiteOptions = {}; }
+    var options = __assign({ format: exports.DEFAULT_FORMAT }, toJsxLiteOptions);
+    if (options.format === 'react') {
+        return react_1.componentToReact(componentJson, {
+            format: 'lite',
+            stateType: 'useState',
+            stylesType: 'emotion',
+            prettier: options.prettier,
+        });
+    }
+    var json = fast_clone_1.fastClone(componentJson);
+    var refs = get_refs_1.getRefs(json);
+    map_refs_1.mapRefs(json, function (refName) { return refName + ".current"; });
+    var addWrapper = json.children.length !== 1;
+    var components = Array.from(get_components_1.getComponents(json));
+    var jsxLiteComponents = components.filter(function (item) {
+        return jsxLiteCoreComponents.includes(item);
+    });
+    var otherComponents = components.filter(function (item) { return !jsxLiteCoreComponents.includes(item); });
+    var hasState = Boolean(Object.keys(componentJson.state).length);
+    var needsJsxLiteCoreImport = Boolean(hasState || refs.size || jsxLiteComponents.length);
+    // TODO: smart only pull in imports as needed
+    var str = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "], ["\n    ",
+        "\n    ",
+        "\n    ", "\n\n    ",
+        "\n\n    export default function ", "(props) {\n      ",
+        "\n      ", "\n\n      ", "\n\n      ",
+        "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "])), !needsJsxLiteCoreImport
+        ? ''
+        : "import { " + (!hasState ? '' : 'useState, ') + " " + (!refs.size ? '' : 'useRef, ') + " " + jsxLiteComponents.join(', ') + " } from '@jsx-lite/core';", !otherComponents.length
+        ? ''
+        : "import { " + otherComponents.join(',') + " } from '@components';", render_imports_1.renderPreComponent(json), !componentJson.meta.metadataHook
+        ? ''
+        : jsx_1.METADATA_HOOK_NAME + "(" + json5_1.default.stringify(componentJson.meta.metadataHook) + ")", componentJson.name, !hasState
+        ? ''
+        : "const state = useState(" + get_state_object_string_1.getStateObjectStringFromComponent(json) + ");", getRefsString(json), !json.hooks.onMount ? '' : "onMount(() => { " + json.hooks.onMount + " })", !json.hooks.onUnMount
+        ? ''
+        : "onUnMount(() => { " + json.hooks.onUnMount + " })", addWrapper ? '<>' : '', json.children.map(function (item) { return exports.blockToJsxLite(item, options); }).join('\n'), addWrapper ? '</>' : '');
+    if (options.prettier !== false) {
+        try {
+            str = standalone_1.format(str, {
+                parser: 'typescript',
+                plugins: [
+                    require('prettier/parser-typescript'), // To support running in browsers
+                ],
+            });
+        }
+        catch (err) {
+            console.error('Format error for file:', str, JSON.stringify(json, null, 2));
+            throw err;
+        }
+    }
+    return str;
+};
+exports.componentToJsxLite = componentToJsxLite;
+var templateObject_1;

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

@@ -0,0 +1 @@
+export declare function minify(messageParts: TemplateStringsArray, ...expressions: readonly any[]): string;

package/dist/src/generators/minify.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.minify = void 0;
+function minify(messageParts) {
+    var expressions = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        expressions[_i - 1] = arguments[_i];
+    }
+    var text = '';
+    for (var i = 0; i < messageParts.length; i++) {
+        var part = messageParts[i];
+        text += part;
+        if (i < expressions.length) {
+            text += expressions[i];
+        }
+    }
+    return text
+        .replace('\n', ' ')
+        .replace(/^\s+/, '')
+        .replace(/\s+$/, '')
+        .replace(/\s+/g, ' ')
+        .replace(/\s?([,;\:\-\{\}\(\)\<\>])\s?/g, function (_, match) { return match; });
+}
+exports.minify = minify;

package/dist/src/generators/mitosis.js

@@ -120,6 +120,7 @@ var mitosisCoreComponents = ['Show', 'For'];
 var componentToMitosis = function (toMitosisOptions) {
     if (toMitosisOptions === void 0) { toMitosisOptions = {}; }
     return function (_a) {
+        var _b, _c;
         var component = _a.component;
         var options = __assign({ format: exports.DEFAULT_FORMAT }, toMitosisOptions);
         if (options.format === 'react') {
@@ -150,9 +151,11 @@ var componentToMitosis = function (toMitosisOptions) {
             ? ''
             : "".concat(jsx_1.METADATA_HOOK_NAME, "(").concat(json5_1.default.stringify(component.meta.metadataHook), ")"), component.name, !hasState
             ? ''
-            : "const state = useState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");"), getRefsString(json), !json.hooks.onMount ? '' : "onMount(() => { ".concat(json.hooks.onMount, " })"), !json.hooks.onUnMount
+            : "const state = useState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");"), getRefsString(json), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code)
             ? ''
-            : "onUnMount(() => { ".concat(json.hooks.onUnMount, " })"), addWrapper ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToMitosis)(item, options); }).join('\n'), addWrapper ? '</>' : '');
+            : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), !((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code)
+            ? ''
+            : "onUnMount(() => { ".concat(json.hooks.onUnMount.code, " })"), addWrapper ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToMitosis)(item, options); }).join('\n'), addWrapper ? '</>' : '');
         if (options.prettier !== false) {
             try {
                 str = (0, standalone_1.format)(str, {

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

@@ -0,0 +1,21 @@
+import { Plugin } from '../modules/plugins';
+import { JSXLiteComponent } from '../types/jsx-lite-component';
+declare type ToQootOptions = {
+    prettier?: boolean;
+    plugins?: Plugin[];
+    qootLib?: string;
+    qrlPrefix?: string;
+    cssNamespace?: string;
+    minifyStyles?: boolean;
+    qrlSuffix?: string;
+    bundle?: boolean;
+    format?: 'builder' | 'default';
+};
+export declare type File = {
+    path: string;
+    contents: string;
+};
+export declare const componentToQoot: (componentJson: JSXLiteComponent, toQootOptions?: ToQootOptions) => Promise<{
+    files: File[];
+}>;
+export {};