@builder.io/mitosis 0.5.31 → 0.5.32

package/dist/src/generators/builder/generator.js

@@ -21,6 +21,7 @@ const builder_1 = require("../../parsers/builder");
 const symbol_processor_1 = require("../../symbols/symbol-processor");
 const core_1 = require("@babel/core");
 const generator_1 = __importDefault(require("@babel/generator"));
+const parser_1 = require("@babel/parser");
 const json5_1 = __importDefault(require("json5"));
 const lodash_1 = require("lodash");
 const legacy_1 = __importDefault(require("neotraverse/legacy"));
@@ -285,6 +286,134 @@ const processLocalizedValues = (element, node) => {
     }
     return element;
 };
+/**
+ * Turns a stringified object into an object that can be looped over.
+ * Since values in the stringified object could be JS expressions, all
+ * values in the resulting object will remain strings.
+ * @param input - The stringified object
+ */
+const parseJSObject = (input) => {
+    var _a;
+    const unparsed = [];
+    let parsed = {};
+    try {
+        const ast = (0, parser_1.parseExpression)(`(${input})`, {
+            plugins: ['jsx', 'typescript'],
+            sourceType: 'module',
+        });
+        if (ast.type !== 'ObjectExpression') {
+            return { parsed, unparsed: input };
+        }
+        for (const prop of ast.properties) {
+            /**
+             * If the object includes spread or method, we stop. We can't really break the component into Key/Value
+             * and the whole expression is considered dynamic. We return `false` to signify that.
+             */
+            if (prop.type === 'ObjectMethod' || prop.type === 'SpreadElement') {
+                if (!!prop.start && !!prop.end) {
+                    if (typeof input === 'string') {
+                        unparsed.push(input.slice(prop.start - 1, prop.end - 1));
+                    }
+                }
+                continue;
+            }
+            /**
+             * Ignore shorthand objects when processing incomplete objects. Otherwise we may
+             * create identifiers unintentionally.
+             * Example: When accounting for shorthand objects, "{ color" would become
+             * { color: color } thus creating a "color" identifier that does not exist.
+             */
+            if (prop.type === 'ObjectProperty') {
+                if ((_a = prop.extra) === null || _a === void 0 ? void 0 : _a.shorthand) {
+                    if (typeof input === 'string') {
+                        unparsed.push(input.slice(prop.start - 1, prop.end - 1));
+                    }
+                    continue;
+                }
+                let key = '';
+                if (prop.key.type === 'Identifier') {
+                    key = prop.key.name;
+                }
+                else if (prop.key.type === 'StringLiteral') {
+                    key = prop.key.value;
+                }
+                else {
+                    continue;
+                }
+                if (typeof input === 'string') {
+                    const [val, err] = extractValue(input, prop.value);
+                    if (err === null) {
+                        parsed[key] = val;
+                    }
+                }
+            }
+        }
+        return {
+            parsed,
+            unparsed: unparsed.length > 0 ? `{${unparsed.join('\n')}}` : undefined,
+        };
+    }
+    catch (err) {
+        return {
+            parsed,
+            unparsed: unparsed.length > 0 ? `{${unparsed.join('\n')}}` : undefined,
+        };
+    }
+};
+const extractValue = (input, node) => {
+    var _a, _b;
+    const start = (_a = node === null || node === void 0 ? void 0 : node.loc) === null || _a === void 0 ? void 0 : _a.start;
+    const end = (_b = node === null || node === void 0 ? void 0 : node.loc) === null || _b === void 0 ? void 0 : _b.end;
+    const startIndex = start !== undefined && 'index' in start && typeof start['index'] === 'number'
+        ? start['index']
+        : undefined;
+    const endIndex = end !== undefined && 'index' in end && typeof end['index'] === 'number'
+        ? end['index']
+        : undefined;
+    if (startIndex === undefined || endIndex === undefined || node === null) {
+        const err = `bad value: ${node}`;
+        return [null, err];
+    }
+    const value = input.slice(startIndex - 1, endIndex - 1);
+    return [value, null];
+};
+/**
+ * Maps and styles that are bound with dynamic values onto their respective
+ * binding keys for Builder elements. This function also maps media queries
+ * with dynamic values.
+ * @param - bindings - The bindings object that has your styles. This param
+ * will be modified in-place, and the old "style" key will be removed.
+ */
+const mapBoundStyles = (bindings) => {
+    const styles = bindings['style'];
+    if (!styles) {
+        return;
+    }
+    const { parsed } = parseJSObject(styles.code);
+    for (const key in parsed) {
+        const mediaQueryMatch = key.match(media_sizes_1.mediaQueryRegex);
+        if (mediaQueryMatch) {
+            const { parsed: mParsed } = parseJSObject(parsed[key]);
+            const [_, pixelSize] = mediaQueryMatch;
+            const size = media_sizes_1.sizes.getSizeForWidth(Number(pixelSize));
+            for (const mKey in mParsed) {
+                bindings[`responsiveStyles.${size}.${mKey}`] = {
+                    code: mParsed[mKey],
+                    bindingType: 'expression',
+                    type: 'single',
+                };
+            }
+        }
+        else {
+            bindings[`style.${key}`] = {
+                code: parsed[key],
+                bindingType: 'expression',
+                type: 'single',
+            };
+        }
+    }
+    delete bindings['style'];
+};
 const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const mapper = !_internalOptions.skipMapper && componentMappers[json.name];
@@ -334,6 +463,9 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
                 actionBody;
             delete bindings[key];
         }
+        if (key === 'style') {
+            mapBoundStyles(bindings);
+        }
     }
     const builderBindings = {};
     const componentOptions = omitMetaProperties(json.properties);

package/package.json

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