@builder.io/mitosis 0.5.27 → 0.5.29

package/dist/src/generators/stencil/component.js

@@ -5,6 +5,7 @@ const on_mount_1 = require("../../generators/helpers/on-mount");
 const blocks_1 = require("../../generators/stencil/blocks");
 const helpers_1 = require("../../generators/stencil/helpers");
 const get_code_processor_plugins_1 = require("../../generators/stencil/plugins/get-code-processor-plugins");
+const dash_case_1 = require("../../helpers/dash-case");
 const dedent_1 = require("../../helpers/dedent");
 const fast_clone_1 = require("../../helpers/fast-clone");
 const get_child_components_1 = require("../../helpers/get-child-components");
@@ -15,6 +16,7 @@ const map_refs_1 = require("../../helpers/map-refs");
 const merge_options_1 = require("../../helpers/merge-options");
 const strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
 const collect_css_1 = require("../../helpers/styles/collect-css");
+const attribute_passing_1 = require("../../helpers/web-components/attribute-passing");
 const plugins_1 = require("../../modules/plugins");
 const standalone_1 = require("prettier/standalone");
 const componentToStencil = (_options = {
@@ -55,15 +57,17 @@ const componentToStencil = (_options = {
         functions: true,
         getters: true,
     });
-    const refs = json.refs
+    let refs = json.refs
         ? Object.entries(json.refs)
-            .map(([key, value]) => {
-            var _a;
-            return `private ${key}!: ${(_a = value.typeParameter) !== null && _a !== void 0 ? _a : 'HTMLElement'}`;
-        })
+            .map(([key, value]) => { var _a; return `private ${key}!: ${(_a = value.typeParameter) !== null && _a !== void 0 ? _a : 'HTMLElement'};`; })
             .join('\n')
         : '';
     const wrap = (0, helpers_1.needsWrap)(json.children);
+    const withAttributePassing = !wrap && (0, attribute_passing_1.shouldAddAttributePassing)(json, options);
+    const rootRef = (0, attribute_passing_1.getAddAttributePassingRef)(json, options);
+    if (withAttributePassing && !refs.includes(rootRef)) {
+        refs += `\nprivate ${rootRef}!: HTMLElement;`;
+    }
     if (options.prettier !== false) {
         try {
             css = (0, standalone_1.format)(css, {
@@ -101,10 +105,15 @@ const componentToStencil = (_options = {
         ${(0, helpers_1.getPropsAsCode)(props, defaultProps, json.propsTypeRef)}
         ${dataString}
         ${methodsString}
+        
+        ${withAttributePassing ? (0, attribute_passing_1.getAttributePassingString)(true) : ''}
 
-        ${!json.hooks.onMount.length
-        ? ''
-        : `componentDidLoad() { ${(0, on_mount_1.stringifySingleScopeOnMount)(json)} }`}
+        ${`componentDidLoad() { 
+            ${withAttributePassing
+        ? `this.enableAttributePassing(this.${rootRef}, "${(0, dash_case_1.dashCase)(json.name)}");`
+        : ''}
+            ${json.hooks.onMount.length ? (0, on_mount_1.stringifySingleScopeOnMount)(json) : ''} 
+            }`}
         ${!((_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code)
         ? ''
         : `disconnectedCallback() { ${json.hooks.onUnMount.code} }`}
@@ -116,7 +125,13 @@ const componentToStencil = (_options = {
         return (${wrap ? '<Host>' : ''}
 
           ${json.children
-        .map((item) => (0, blocks_1.blockToStencil)(item, options, true, childComponents))
+        .map((item) => (0, blocks_1.blockToStencil)({
+        json: item,
+        options,
+        insideJsx: true,
+        childComponents,
+        rootRef: withAttributePassing && rootRef === attribute_passing_1.ROOT_REF ? rootRef : undefined, // only pass rootRef if it's not the default
+    }))
         .join('\n')}
 
         ${wrap ? '</Host>' : ''})

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

@@ -0,0 +1,7 @@
+/**
+ * Minimal implementation of lodash's _.set
+ * https://lodash.com/docs/4.17.15#set
+ *
+ * See ./set.test.ts for usage examples
+ */
+export declare const set: (obj: any, _path: string | string[], value: any) => any;

package/dist/src/helpers/set.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.set = void 0;
+/**
+ * Minimal implementation of lodash's _.set
+ * https://lodash.com/docs/4.17.15#set
+ *
+ * See ./set.test.ts for usage examples
+ */
+const set = (obj, _path, value) => {
+    if (Object(obj) !== obj) {
+        return obj;
+    }
+    const path = Array.isArray(_path)
+        ? _path
+        : _path.toString().match(/[^.[\]]+/g);
+    path
+        .slice(0, -1)
+        .reduce((a, c, i) => Object(a[c]) === a[c]
+        ? a[c]
+        : (a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}), obj)[path[path.length - 1]] = value;
+    return obj;
+};
+exports.set = set;

package/dist/src/helpers/web-components/attribute-passing.d.ts

@@ -0,0 +1,6 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+import { BaseTranspilerOptions } from '../../types/transpiler';
+export declare const ROOT_REF = "_root";
+export declare const getAttributePassingString: (typescript?: boolean) => string;
+export declare const shouldAddAttributePassing: (json: MitosisComponent, options: BaseTranspilerOptions) => boolean | undefined;
+export declare const getAddAttributePassingRef: (json: MitosisComponent, options: BaseTranspilerOptions) => string;

package/dist/src/helpers/web-components/attribute-passing.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAddAttributePassingRef = exports.shouldAddAttributePassing = exports.getAttributePassingString = exports.ROOT_REF = void 0;
+exports.ROOT_REF = '_root';
+const getAttributePassingString = (typescript) => {
+    return ('/**\n' +
+        ' * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n' +
+        ' * @param element  the ref for the component\n' +
+        ' * @param customElementSelector  the custom element like `my-component`\n' +
+        ' */\n' +
+        `private enableAttributePassing(element${typescript ? ': HTMLElement | null' : ''}, customElementSelector${typescript ? ': string' : ''}) {
+` +
+        '  const parent = element?.closest(customElementSelector);\n' +
+        '  if (element && parent) {\n' +
+        '    const attributes = parent.attributes;\n' +
+        '    for (let i = 0; i < attributes.length; i++) {\n' +
+        '      const attr = attributes.item(i);\n' +
+        "      if (attr && (attr.name.startsWith('data-') || attr.name.startsWith('aria-'))) {\n" +
+        '        element.setAttribute(attr.name, attr.value);\n' +
+        '        parent.removeAttribute(attr.name);\n' +
+        '      }\n' +
+        "      if (attr && attr.name === 'class') {\n" +
+        "        const isWebComponent = attr.value.includes('hydrated');\n" +
+        "        const value = attr.value.replace('hydrated', '').trim();\n" +
+        "        const currentClass = element.getAttribute('class');\n" +
+        "        element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ''}${value}`);\n" +
+        '        if (isWebComponent) {\n' +
+        '          // Stencil is using this class for lazy loading component\n' +
+        "          parent.setAttribute('class', 'hydrated');\n" +
+        '        } else {\n' +
+        '          parent.removeAttribute(attr.name);\n' +
+        '        }\n' +
+        '      }\n' +
+        '    }\n' +
+        '  }\n' +
+        '};');
+};
+exports.getAttributePassingString = getAttributePassingString;
+const shouldAddAttributePassing = (json, options) => {
+    var _a, _b, _c, _d;
+    const metaAttributePassingAsString = String((_b = (_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.attributePassing) === null || _b === void 0 ? void 0 : _b.enabled);
+    if (((_c = options.attributePassing) === null || _c === void 0 ? void 0 : _c.enabled) && metaAttributePassingAsString !== 'false') {
+        return false;
+    }
+    if (metaAttributePassingAsString === 'true') {
+        return true;
+    }
+    return (_d = options.attributePassing) === null || _d === void 0 ? void 0 : _d.enabled;
+};
+exports.shouldAddAttributePassing = shouldAddAttributePassing;
+const getAddAttributePassingRef = (json, options) => {
+    var _a, _b, _c;
+    return (((_b = (_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.attributePassing) === null || _b === void 0 ? void 0 : _b.customRef) ||
+        ((_c = options.attributePassing) === null || _c === void 0 ? void 0 : _c.customRef) ||
+        exports.ROOT_REF);
+};
+exports.getAddAttributePassingRef = getAddAttributePassingRef;

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

@@ -444,10 +444,11 @@ const componentMappers = {
         });
     },
     Text: (block, options) => {
-        var _a;
+        var _a, _b, _c;
         let css = getCssFromBlock(block);
         const styleString = getStyleStringFromBlock(block, options);
         const actionBindings = getActionBindingsFromBlock(block, options);
+        const localizedValues = {};
         const blockBindings = {
             ...mapBuilderBindingsToMitosisBindingWithCode(block.bindings),
             ...mapBuilderBindingsToMitosisBindingWithCode((_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings),
@@ -471,6 +472,15 @@ const componentMappers = {
             }),
         };
         const properties = { ...block.properties };
+        for (const key in properties) {
+            if (typeof properties[key] === 'object' &&
+                properties[key] !== null &&
+                properties[key]['@type'] === '@builder.io/core:LocalizedValue') {
+                const localizedValue = properties[key];
+                localizedValues[`properties.${key}`] = localizedValue;
+                properties[key] = localizedValue.Default;
+            }
+        }
         if (options.includeBuilderExtras && block.id)
             properties['builder-id'] = block.id;
         if (block.class)
@@ -485,7 +495,13 @@ const componentMappers = {
                 code: wrapBindingIfNeeded(componentOptionsText.code, options),
             });
         }
-        const text = block.component.options.text;
+        let text = ((_b = block.component.options) === null || _b === void 0 ? void 0 : _b.text) || '';
+        if (typeof text === 'object' &&
+            text !== null &&
+            text['@type'] === '@builder.io/core:LocalizedValue') {
+            localizedValues['component.options.text'] = (_c = block.component.options) === null || _c === void 0 ? void 0 : _c.text;
+            text = text.Default;
+        }
         // Builder uses {{}} for bindings, but Mitosis expects {} so we need to convert
         const innerProperties = innerBindings._text
             ? {}
@@ -498,6 +514,7 @@ const componentMappers = {
                 bindings,
                 properties,
                 meta: (0, exports.getMetaFromBlock)(block, options),
+                ...(Object.keys(localizedValues).length && { localizedValues }),
                 children: [
                     (0, create_mitosis_node_1.createMitosisNode)({
                         bindings: innerBindings,
@@ -505,6 +522,7 @@ const componentMappers = {
                             ...innerProperties,
                             class: 'builder-text',
                         },
+                        ...(Object.keys(localizedValues).length && { localizedValues }),
                     }),
                 ],
             });
@@ -534,6 +552,7 @@ const componentMappers = {
                     (0, create_mitosis_node_1.createMitosisNode)({
                         bindings: innerBindings,
                         properties: innerProperties,
+                        ...(Object.keys(localizedValues).length && { localizedValues }),
                     }),
                 ],
             });
@@ -550,12 +569,14 @@ const componentMappers = {
                 ...innerBindings,
             },
             meta: (0, exports.getMetaFromBlock)(block, options),
+            ...(Object.keys(localizedValues).length && { localizedValues }),
         });
     },
 };
 const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     const { includeSpecialBindings = true } = options;
+    const localizedValues = {};
     if (((_a = block.component) === null || _a === void 0 ? void 0 : _a.name) === 'Core:Fragment') {
         block.component.name = 'Fragment';
     }
@@ -671,11 +692,27 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
         }),
         ...(options.includeBuilderExtras && getBuilderPropsForSymbol(block)),
     };
+    for (const key in properties) {
+        if (typeof properties[key] === 'object' &&
+            properties[key] !== null &&
+            properties[key]['@type'] === '@builder.io/core:LocalizedValue') {
+            const localizedValue = properties[key];
+            localizedValues[`properties.${key}`] = localizedValue;
+            properties[key] = localizedValue.Default;
+        }
+    }
     if (block.layerName) {
         properties.$name = block.layerName;
     }
-    if (block.linkUrl) {
-        properties.href = block.linkUrl;
+    const linkUrl = block.linkUrl;
+    if (linkUrl) {
+        if (typeof linkUrl === 'object' && linkUrl['@type'] === '@builder.io/core:LocalizedValue') {
+            properties.href = linkUrl.Default;
+            localizedValues['linkUrl'] = linkUrl;
+        }
+        else {
+            properties.href = linkUrl;
+        }
     }
     if ((_o = block.component) === null || _o === void 0 ? void 0 : _o.options) {
         for (const key in block.component.options) {
@@ -694,6 +731,11 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
             else if (typeof value === 'string') {
                 properties[key] = value;
             }
+            else if (typeof value === 'object' &&
+                value['@type'] === '@builder.io/core:LocalizedValue') {
+                properties[key] = value.Default;
+                localizedValues[`component.options.${key}`] = value;
+            }
             else if (valueIsArrayOfBuilderElements) {
                 const childrenElements = value
                     .filter((item) => {
@@ -748,6 +790,7 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
             ...slots,
         },
         meta: (0, exports.getMetaFromBlock)(block, options),
+        ...(Object.keys(localizedValues).length && { localizedValues }),
     });
     // Has single text node child
     const firstChild = (_r = block.children) === null || _r === void 0 ? void 0 : _r[0];

package/dist/src/parsers/svelte/html/text.d.ts

@@ -14,6 +14,9 @@ export declare function parseText(node: TemplateNode): {
     slots?: {
         [key: string]: import("../../..").MitosisNode[];
     } | undefined;
+    localizedValues?: {
+        [index: string]: import("../../..").BuilderLocalizedValue;
+    } | undefined;
 } | {
     name: string;
     properties: {
@@ -33,4 +36,7 @@ export declare function parseText(node: TemplateNode): {
     slots?: {
         [key: string]: import("../../..").MitosisNode[];
     } | undefined;
+    localizedValues?: {
+        [index: string]: import("../../..").BuilderLocalizedValue;
+    } | undefined;
 };

package/dist/src/types/metadata.d.ts

@@ -15,7 +15,7 @@ import { SvelteMetadata } from '../generators/svelte/types';
 import { SwiftMetadata } from '../generators/swift/types';
 import { TaroMetadata } from '../generators/taro/types';
 import { TemplateMetadata } from '../generators/template/types';
-import { ReactMetadata, Target, VueMetadata } from '..';
+import { AttributePassingType, ReactMetadata, Target, VueMetadata } from '..';
 type Targets = typeof import('../targets').targets;
 type TargetOptions = {
     [K in Target]?: Partial<NonNullable<Parameters<Targets[K]>[0]>>;
@@ -30,6 +30,8 @@ export type ComponentMetadata = {
     forwardRef?: string;
     /** Enables shadowDom for web-components */
     isAttachedToShadowDom?: boolean;
+    /** Enables/disables attribute passing for frameworks with custom elements like angular and stencil */
+    attributePassing?: AttributePassingType;
     alpine?: AlpineMetadata;
     angular?: AngularMetadata;
     builder?: BuilderMetadata;

package/dist/src/types/mitosis-node.d.ts

@@ -28,6 +28,11 @@ type BindingProperties = {
 export type Binding = {
     code: string;
 } & BindingProperties;
+export type BuilderLocalizedValue = {
+    '@type': '@builder.io/core:LocalizedValue';
+    Default: string;
+    [index: string]: string;
+};
 export type BaseNode = {
     '@type': '@builder.io/mitosis/node';
     meta: JSONObject;
@@ -68,6 +73,13 @@ export type BaseNode = {
     slots?: {
         [key: string]: MitosisNode[];
     };
+    /**
+     * Key-value store of localized values
+     * It is used when a Builder content block has localized values.
+     */
+    localizedValues?: {
+        [index: string]: BuilderLocalizedValue;
+    };
 };
 export type SpecialNodesNames = 'For' | 'Fragment' | 'Show' | 'Slot';
 export type ForNode = BaseNode & {

package/dist/src/types/transpiler.d.ts

@@ -9,6 +9,10 @@ export type Transpiler<R = string> = (args: TranspilerArgs) => R;
  * This type guarantees that all code generators receive the same base options
  */
 export type TranspilerGenerator<X extends BaseTranspilerOptions, Y = string> = (args?: X) => Transpiler<Y>;
+export type AttributePassingType = {
+    enabled: boolean;
+    customRef?: string;
+};
 export interface BaseTranspilerOptions {
     experimental?: {
         [key: string]: any;
@@ -25,6 +29,8 @@ export interface BaseTranspilerOptions {
      * Enable `typescript` output
      */
     typescript?: boolean;
+    /** Enables/disables attribute passing for frameworks with custom elements like angular and stencil */
+    attributePassing?: AttributePassingType;
     /**
      * Preserves explicit filename extensions in import statements.
      */

package/package.json

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