@builder.io/mitosis 0.0.56-10 → 0.0.56-13

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

@@ -8,18 +8,44 @@ var onMount = require('./data/blocks/onMount.raw');
 var onInitonMount = require('./data/blocks/onInit-onMount.raw');
 var onInit = require('./data/blocks/onInit.raw');
 var basicFor = require('./data/basic-for.raw');
+var basic = require('./data/basic.raw');
+var basicChildComponent = require('./data/basic-child-component.raw');
+var basicOutputsMeta = require('./data/basic-outputs-meta.raw');
 var basicOutputs = require('./data/basic-outputs.raw');
 var contentSlotHtml = require('./data/blocks/content-slot-html.raw');
 var contentSlotJsx = require('./data/blocks/content-slot-jsx.raw');
 var slotJsx = require('./data/blocks/slot-jsx.raw');
 var classNameJsx = require('./data/blocks/classname-jsx.raw');
+var text = require('./data/blocks/text.raw');
 // const slotHtml = require('./data/blocks/slot-html.raw');
 describe('Angular', function () {
+    test('Basic', function () {
+        var component = (0, jsx_1.parseJsx)(basic);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Basic Child Component', function () {
+        var component = (0, jsx_1.parseJsx)(basicChildComponent);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('basic outputs meta', function () {
+        var component = (0, jsx_1.parseJsx)(basicOutputsMeta);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
     test('basic outputs', function () {
         var component = (0, jsx_1.parseJsx)(basicOutputs);
         var output = (0, angular_1.componentToAngular)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('basic outputs same as meta', function () {
+        var component = (0, jsx_1.parseJsx)(basicOutputs);
+        var componentMeta = (0, jsx_1.parseJsx)(basicOutputsMeta);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        var outputMeta = (0, angular_1.componentToAngular)()({ component: componentMeta });
+        expect(output).toMatch(outputMeta);
+    });
     test('multiple onUpdate', function () {
         var component = (0, jsx_1.parseJsx)(multipleOnUpdate);
         var output = (0, angular_1.componentToAngular)()({ component: component });
@@ -75,4 +101,9 @@ describe('Angular', function () {
         var output = (0, angular_1.componentToAngular)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('Text', function () {
+        var component = (0, jsx_1.parseJsx)(text);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
 });

package/dist/src/__tests__/data/basic-child-component.raw.jsx

@@ -9,11 +9,13 @@ var basic_onMount_update_raw_1 = __importDefault(require("./basic-onMount-update
 function MyBasicChildComponent() {
     var state = (0, mitosis_1.useState)({
         name: 'Steve',
+        dev: 'PatrickJS',
     });
     return (<div>
-      <basic_raw_1.default />
+      {/*// @ts-ignore */}
+      <basic_raw_1.default id={state.dev}/>
       <div>
-        <basic_onMount_update_raw_1.default />
+        <basic_onMount_update_raw_1.default hi={state.name} bye={state.dev}/>
       </div>
     </div>);
 }

package/dist/src/__tests__/data/basic-onMount-update.raw.d.ts

@@ -1 +1,5 @@
-export default function MyBasicOnMountUpdateComponent(): JSX.Element;
+export interface Props {
+    hi: string;
+    bye: string;
+}
+export default function MyBasicOnMountUpdateComponent(props: Props): JSX.Element;

package/dist/src/__tests__/data/basic-onMount-update.raw.jsx

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
-function MyBasicOnMountUpdateComponent() {
+function MyBasicOnMountUpdateComponent(props) {
     var state = (0, mitosis_1.useState)({
         name: 'PatrickJS',
         names: ['Steve', 'PatrickJS'],
     });
     (0, mitosis_1.onInit)(function () {
-        state.name = 'PatrickJS onInit';
+        state.name = 'PatrickJS onInit' + props.hi;
     });
     (0, mitosis_1.onMount)(function () {
-        state.name = 'PatrickJS onMount';
+        state.name = 'PatrickJS onMount' + props.bye;
     });
     return <div>Hello {state.name}</div>;
 }

package/dist/src/__tests__/data/basic.raw.jsx

@@ -5,8 +5,10 @@ function MyBasicComponent() {
     var state = (0, mitosis_1.useState)({
         name: 'Steve',
     });
-    return (<div>
-      <input value={state.name} onChange={function (event) { return (state.name = event.target.value); }}/>
+    return (<div class="test" css={{
+            padding: '10px',
+        }}>
+      <input value={state.name} onChange={function (myEvent) { return (state.name = myEvent.target.value); }}/>
       Hello! I can run in React, Vue, Solid, or Liquid!
     </div>);
 }

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var sdk_1 = require("@builder.io/sdk");
+var mitosis_1 = require("@builder.io/mitosis");
 function Text(props) {
     var _a, _b, _c, _d, _e, _f;
     var allowEditingText = sdk_1.Builder.isBrowser &&
@@ -9,9 +10,13 @@ function Text(props) {
         !(((_b = (_a = props.builderBlock) === null || _a === void 0 ? void 0 : _a.bindings) === null || _b === void 0 ? void 0 : _b['component.options.text']) ||
             ((_d = (_c = props.builderBlock) === null || _c === void 0 ? void 0 : _c.bindings) === null || _d === void 0 ? void 0 : _d['options.text']) ||
             ((_f = (_e = props.builderBlock) === null || _e === void 0 ? void 0 : _e.bindings) === null || _f === void 0 ? void 0 : _f['text']));
+    var state = (0, mitosis_1.useState)({ name: 'Decadef20' });
     // TODO: Add back dynamic `direction` CSS prop when we add support for some
     //       sort of dynamic CSS
     // css={{ direction: props.rtlMode ? 'rtl' : 'ltr' }}
-    return (<div contentEditable={allowEditingText || undefined} innerHTML={props.text || props.content || ''}/>);
+    return (<div contentEditable={allowEditingText || undefined} data-name={{ test: state.name || 'any name' }} innerHTML={props.text ||
+            props.content ||
+            state.name ||
+            '<p class="text-lg">my name</p>'}/>);
 }
 exports.default = Text;

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

@@ -16,6 +16,6 @@ function Video(props) {
     return (<video {...props.attributes} style={__assign(__assign({ width: '100%', height: '100%' }, (_a = props.attributes) === null || _a === void 0 ? void 0 : _a.style), { objectFit: props.fit, objectPosition: props.position, 
             // Hack to get object fit to work as expected and
             // not have the video overflow
-            borderRadius: 1 })} preload="none" key={props.video || 'no-src'} poster={props.posterImage} autoPlay={props.autoPlay} muted={props.muted} controls={props.controls} loop={props.loop}/>);
+            borderRadius: 1 })} preload="none" key={props.video || 'no-src'} poster={props.posterImage} autoplay={props.autoPlay} muted={props.muted} controls={props.controls} loop={props.loop}/>);
 }
 exports.default = Video;

package/dist/src/__tests__/data/styles/class-and-className.raw.d.ts

@@ -0,0 +1 @@
+export default function MyBasicComponent(): JSX.Element;

package/dist/src/__tests__/data/styles/class-and-className.raw.jsx

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function MyBasicComponent() {
+    return (<div 
+    // @ts-ignore
+    className="test" class="test2" css={{
+            padding: '10px',
+        }}>
+      Hello! I can run in React, Vue, Solid, or Liquid!
+    </div>);
+}
+exports.default = MyBasicComponent;

package/dist/src/__tests__/data/styles/class.raw.d.ts

@@ -0,0 +1 @@
+export default function MyBasicComponent(): JSX.Element;

package/dist/src/__tests__/data/styles/class.raw.jsx

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function MyBasicComponent() {
+    return (<div class="test" css={{
+            padding: '10px',
+        }}>
+      Hello! I can run in React, Vue, Solid, or Liquid!
+    </div>);
+}
+exports.default = MyBasicComponent;

package/dist/src/__tests__/data/styles/className.raw.d.ts

@@ -0,0 +1 @@
+export default function MyBasicComponent(): JSX.Element;

package/dist/src/__tests__/data/styles/className.raw.jsx

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function MyBasicComponent() {
+    return (<div 
+    // @ts-ignore
+    className="test" css={{
+            padding: '10px',
+        }}>
+      Hello! I can run in React, Vue, Solid, or Liquid!
+    </div>);
+}
+exports.default = MyBasicComponent;

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

@@ -4,6 +4,7 @@ var html_1 = require("../generators/html");
 var jsx_1 = require("../parsers/jsx");
 var basic = require('./data/basic.raw');
 var basicFor = require('./data/basic-for.raw');
+var className = require('./data/blocks/classname-jsx.raw');
 var submitButtonBlock = require('./data/blocks/submit-button.raw');
 var inputBlock = require('./data/blocks/input.raw');
 var selectBlock = require('./data/blocks/select.raw');
@@ -26,6 +27,11 @@ var onMount = require('./data/blocks/onMount.raw');
 var stamped = require('./data/blocks/stamped-io.raw');
 var shadowDom = require('./data/blocks/shadow-dom.raw');
 describe('Html', function () {
+    test('className', function () {
+        var component = (0, jsx_1.parseJsx)(className);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
     test('Basic', function () {
         var component = (0, jsx_1.parseJsx)(basic);
         var output = (0, html_1.componentToHtml)()({ component: component });

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

@@ -19,6 +19,7 @@ var stamped = require('./data/blocks/stamped-io.raw');
 var embed = require('./data/blocks/embed.raw');
 var image = require('./data/blocks/image.raw');
 var columns = require('./data/blocks/columns.raw');
+var classNameJsx = require('./data/blocks/classname-jsx.raw');
 describe('Liquid', function () {
     test('Basic', function () {
         var component = (0, jsx_1.parseJsx)(basic);
@@ -105,4 +106,9 @@ describe('Liquid', function () {
         var output = (0, liquid_1.componentToLiquid)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('ClassName', function () {
+        var component = (0, jsx_1.parseJsx)(classNameJsx);
+        var output = (0, liquid_1.componentToLiquid)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
 });

package/dist/src/__tests__/qwik.directive.test.js

@@ -103,5 +103,6 @@ function srcSet(url, additionalSizes) {
         parsedUrl.searchParams.set('width', size);
         return "".concat(parsedUrl, " ").concat(size, "w");
     })
+        .concat([url.replace('?format=webp', '')])
         .join(', ');
 }

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

@@ -395,16 +395,24 @@ describe('qwik', function () {
         });
     }); });
     describe('src-generator', function () {
-        test('should format code', function () {
-            var file = new qwik_1.File('test.js', {
+        var file;
+        beforeEach(function () {
+            return (file = new qwik_1.File('test.js', {
                 isPretty: true,
                 isTypeScript: false,
                 isJSX: true,
                 isModule: true,
-            }, '', '');
+            }, '', ''));
+        });
+        test('should format code', function () {
             file.src.emit('const x=1');
             expect(file.toString()).toEqual('const x = 1;\n');
         });
+        test('should deal with empty bindings', function () {
+            file.src.jsxBegin('Image', {}, { image: '' });
+            file.src.jsxEnd('Image');
+            expect(file.toString()).toEqual('<Image></Image>;\n');
+        });
     });
     describe('helper functions', function () {
         describe('isStatement', function () {

package/dist/src/__tests__/react-native.test.js

@@ -24,7 +24,7 @@ var onUpdateWithDeps = require('./data/blocks/onUpdateWithDeps.raw');
 var multipleOnUpdate = require('./data/blocks/multiple-onUpdate.raw');
 var multipleOnUpdateWithDeps = require('./data/blocks/multiple-onUpdateWithDeps.raw');
 var onMount = require('./data/blocks/onMount.raw');
-describe('React', function () {
+describe('React Native', function () {
     test('Basic', function () {
         var component = (0, jsx_1.parseJsx)(basic);
         var output = (0, react_native_1.componentToReactNative)()({ component: component });

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("../generators/react");
 var jsx_1 = require("../parsers/jsx");
 var basic = require('./data/basic.raw');
+var basicChildComponent = require('./data/basic-child-component.raw');
 var basicFor = require('./data/basic-for.raw');
 var submitButtonBlock = require('./data/blocks/submit-button.raw');
 var inputBlock = require('./data/blocks/input.raw');
@@ -57,6 +58,11 @@ describe('React', function () {
         var output = (0, react_1.componentToReact)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('Basic Child Component', function () {
+        var component = (0, jsx_1.parseJsx)(basicChildComponent);
+        var output = (0, react_1.componentToReact)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
     test('BasicFor', function () {
         var component = (0, jsx_1.parseJsx)(basicFor);
         var output = (0, react_1.componentToReact)()({ component: component });

package/dist/src/__tests__/styles.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_1 = require("../parsers/jsx");
+var classRaw = require('./data/styles/class.raw');
+var className = require('./data/styles/className.raw');
+var classAndClassName = require('./data/styles/class-and-className.raw');
+describe('Styles', function () {
+    test('class and className are equivalent', function () {
+        expect((0, jsx_1.parseJsx)(classRaw)).toMatchSnapshot(className);
+    });
+    test('class and className are merged', function () {
+        var component = (0, jsx_1.parseJsx)(classAndClassName);
+        expect(component).toMatchSnapshot();
+    });
+});

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

@@ -13,6 +13,7 @@ var rootShow = require('./data/blocks/rootShow.raw');
 var simpleExample = require('./data/context/simple.context.lite');
 var componentWithContext = require('./data/context/component-with-context.lite');
 var renderBlock = require('./data/blocks/builder-render-block.raw');
+var text = require('./data/blocks/text.raw');
 describe('Svelte', function () {
     test('onUpdate', function () {
         var component = (0, jsx_1.parseJsx)(onUpdate);
@@ -67,4 +68,9 @@ describe('Svelte', function () {
             expect(output).toMatchSnapshot();
         });
     });
+    test('Text', function () {
+        var component = (0, jsx_1.parseJsx)(text);
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
 });

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var html_1 = require("../generators/html");
 var jsx_1 = require("../parsers/jsx");
 var basic = require('./data/basic.raw');
+var basicChildComponent = require('./data/basic-child-component.raw');
 var basicFor = require('./data/basic-for.raw');
 var basicForShow = require('./data/basic-for-show.raw');
 var basicOnMountUpdate = require('./data/basic-onMount-update.raw');
@@ -35,6 +36,11 @@ describe('webcomponent', function () {
         var output = (0, html_1.componentToCustomElement)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('Basic Child Component', function () {
+        var component = (0, jsx_1.parseJsx)(basicChildComponent);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
     test('BasicFor', function () {
         var component = (0, jsx_1.parseJsx)(basicFor);
         var output = (0, html_1.componentToCustomElement)()({ component: component });

package/dist/src/generators/angular.js

@@ -44,18 +44,22 @@ var mappers = {
     Slot: function (json, options, blockOptions) {
         return "<ng-content ".concat(Object.keys(json.bindings)
             .map(function (binding) {
-            var _a;
+            var _a, _b, _c;
             if (binding === 'name') {
-                var selector = (0, lodash_1.kebabCase)((_a = json.bindings.name) === null || _a === void 0 ? void 0 : _a.replace('props.slot', ''));
+                var selector = (0, lodash_1.kebabCase)((_b = (_a = json.bindings.name) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.replace('props.slot', ''));
                 return "select=\"[".concat(selector, "]\"");
             }
-            return "".concat(json.bindings[binding]);
+            return "".concat((_c = json.bindings[binding]) === null || _c === void 0 ? void 0 : _c.code);
         })
             .join('\n'), "></ng-content>");
     },
 };
+// TODO: Maybe in the future allow defining `string | function` as values
+var BINDINGS_MAPPER = {
+    innerHTML: 'innerHTML',
+};
 var blockToAngular = function (json, options, blockOptions) {
-    var _a;
+    var _a, _b, _c, _d, _e, _f;
     if (options === void 0) { options = {}; }
     if (blockOptions === void 0) { blockOptions = {}; }
     var contextVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.contextVars) || [];
@@ -70,12 +74,12 @@ var blockToAngular = function (json, options, blockOptions) {
     if (json.properties._text) {
         return json.properties._text;
     }
-    if (/props\.slot/.test(json.bindings._text)) {
-        var selector = (0, lodash_1.kebabCase)((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.replace('props.slot', ''));
+    if (/props\.slot/.test((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code)) {
+        var selector = (0, lodash_1.kebabCase)((_c = (_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code) === null || _c === void 0 ? void 0 : _c.replace('props.slot', ''));
         return "<ng-content select=\"[".concat(selector, "]\"></ng-content>");
     }
-    if (json.bindings._text) {
-        return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._text, {
+    if ((_d = json.bindings._text) === null || _d === void 0 ? void 0 : _d.code) {
+        return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._text.code, {
             contextVars: contextVars,
             outputVars: outputVars,
         }), "}}");
@@ -83,7 +87,7 @@ var blockToAngular = function (json, options, blockOptions) {
     var str = '';
     var needsToRenderSlots = [];
     if (json.name === 'For') {
-        str += "<ng-container *ngFor=\"let ".concat(json.properties._forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.each, {
+        str += "<ng-container *ngFor=\"let ".concat(json.properties._forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code, {
             contextVars: contextVars,
             outputVars: outputVars,
         }), "\">");
@@ -93,7 +97,7 @@ var blockToAngular = function (json, options, blockOptions) {
         str += "</ng-container>";
     }
     else if (json.name === 'Show') {
-        str += "<ng-container *ngIf=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.when, { contextVars: contextVars, outputVars: outputVars }), "\">");
+        str += "<ng-container *ngIf=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_f = json.bindings.when) === null || _f === void 0 ? void 0 : _f.code, { contextVars: contextVars, outputVars: outputVars }), "\">");
         str += json.children
             .map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); })
             .join('\n');
@@ -115,12 +119,7 @@ var blockToAngular = function (json, options, blockOptions) {
                 continue;
             }
             var value = json.properties[key];
-            if (key === 'className') {
-                str += " class=\"".concat(value, "\" ");
-            }
-            else {
-                str += " ".concat(key, "=\"").concat(value, "\" ");
-            }
+            str += " ".concat(key, "=\"").concat(value, "\" ");
         }
         for (var key in json.bindings) {
             if (key === '_spread') {
@@ -129,9 +128,9 @@ var blockToAngular = function (json, options, blockOptions) {
             if (key.startsWith('$')) {
                 continue;
             }
-            var value = json.bindings[key];
+            var _g = json.bindings[key], code = _g.code, _h = _g.arguments, cusArgs = _h === void 0 ? ['event'] : _h;
             // TODO: proper babel transform to replace. Util for this
-            var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value, {
+            var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
                 contextVars: contextVars,
                 outputVars: outputVars,
             });
@@ -142,10 +141,10 @@ var blockToAngular = function (json, options, blockOptions) {
                     event_1 = 'input';
                 }
                 // TODO: proper babel transform to replace. Util for this
-                var finalValue = (0, remove_surrounding_block_1.removeSurroundingBlock)(useValue.replace(/event\./g, '$event.'));
+                var finalValue = (0, remove_surrounding_block_1.removeSurroundingBlock)(useValue.replace(new RegExp("".concat(cusArgs[0], "\\."), 'g'), '$event.'));
                 str += " (".concat(event_1, ")=\"").concat(finalValue, "\" ");
             }
-            else if (key === 'className') {
+            else if (key === 'class') {
                 str += " [class]=\"".concat(useValue, "\" ");
             }
             else if (key === 'ref') {
@@ -156,8 +155,11 @@ var blockToAngular = function (json, options, blockOptions) {
                     key.replace('slot', '').substring(1);
                 needsToRenderSlots.push("".concat(useValue.replace(/(\/\>)|\>/, " ".concat(lowercaseKey, ">"))));
             }
+            else if (BINDINGS_MAPPER[key]) {
+                str += " [".concat(BINDINGS_MAPPER[key], "]=\"").concat(useValue.replace(/"/g, "\\'"), "\"  ");
+            }
             else {
-                str += " [".concat(key, "]=\"").concat(useValue, "\" ");
+                str += " [".concat(key, "]='").concat(useValue, "' ");
             }
         }
         if (jsx_1.selfClosingTags.has(json.name)) {

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

@@ -10,7 +10,7 @@ declare type InternalOptions = {
 export declare const blockToBuilder: (json: MitosisNode, options?: ToBuilderOptions, _internalOptions?: InternalOptions) => BuilderElement;
 export declare const componentToBuilder: (options?: ToBuilderOptions) => ({ component }: TranspilerArgs) => {
     data: {
-        httpRequests: any;
+        httpRequests: import("../types/json").JSON;
         jsCode: string;
         tsCode: string;
         blocks: BuilderElement[];

package/dist/src/generators/builder.js

@@ -57,8 +57,7 @@ var componentMappers = __assign(__assign({}, (!builder_1.symbolBlocksAsChildren
     : {
         Symbol: function (node, options) {
             var child = node.children[0];
-            var symbolOptions = (node.bindings.symbol &&
-                json5_1.default.parse(node.bindings.symbol)) ||
+            var symbolOptions = (node.bindings.symbol && json5_1.default.parse(node.bindings.symbol.code)) ||
                 {};
             if (child) {
                 (0, lodash_1.set)(symbolOptions, 'content.data.blocks', child.children.map(function (item) { return (0, exports.blockToBuilder)(item, options); }));
@@ -82,12 +81,13 @@ var componentMappers = __assign(__assign({}, (!builder_1.symbolBlocksAsChildren
         block.children = [];
         return block;
     }, For: function (node, options) {
+        var _a;
         return el({
             component: {
                 name: 'Core:Fragment',
             },
             repeat: {
-                collection: node.bindings.each,
+                collection: (_a = node.bindings.each) === null || _a === void 0 ? void 0 : _a.code,
                 itemName: node.properties._forName,
             },
             children: node.children
@@ -95,13 +95,14 @@ var componentMappers = __assign(__assign({}, (!builder_1.symbolBlocksAsChildren
                 .map(function (node) { return (0, exports.blockToBuilder)(node, options); }),
         }, options);
     }, Show: function (node, options) {
+        var _a;
         return el({
             // TODO: the reverse mapping for this
             component: {
                 name: 'Core:Fragment',
             },
             bindings: {
-                show: node.bindings.when,
+                show: (_a = node.bindings.when) === null || _a === void 0 ? void 0 : _a.code,
             },
             children: node.children
                 .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
@@ -129,20 +130,20 @@ function tryFormat(code) {
 }
 var blockToBuilder = function (json, options, _internalOptions) {
     var _a;
-    var _b;
+    var _b, _c, _d, _e, _f, _g;
     if (options === void 0) { options = {}; }
     if (_internalOptions === void 0) { _internalOptions = {}; }
     var mapper = !_internalOptions.skipMapper && componentMappers[json.name];
     if (mapper) {
         return mapper(json, options);
     }
-    if (json.properties._text || json.bindings._text) {
+    if (json.properties._text || ((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code)) {
         return el({
             tagName: 'span',
-            bindings: __assign({}, (json.bindings._text
+            bindings: __assign({}, (((_c = json.bindings._text) === null || _c === void 0 ? void 0 : _c.code)
                 ? {
-                    'component.options.text': json.bindings._text,
-                    'json.bindings._text': undefined,
+                    'component.options.text': json.bindings._text.code,
+                    'json.bindings._text.code': undefined,
                 }
                 : {})),
             component: {
@@ -158,9 +159,9 @@ var blockToBuilder = function (json, options, _internalOptions) {
     var actions = {};
     for (var key in bindings) {
         var eventBindingKeyRegex = /^on([A-Z])/;
-        var firstCharMatchForEventBindingKey = (_b = key.match(eventBindingKeyRegex)) === null || _b === void 0 ? void 0 : _b[1];
+        var firstCharMatchForEventBindingKey = (_d = key.match(eventBindingKeyRegex)) === null || _d === void 0 ? void 0 : _d[1];
         if (firstCharMatchForEventBindingKey) {
-            actions[key.replace(eventBindingKeyRegex, firstCharMatchForEventBindingKey.toLowerCase())] = (0, remove_surrounding_block_1.removeSurroundingBlock)(bindings[key]);
+            actions[key.replace(eventBindingKeyRegex, firstCharMatchForEventBindingKey.toLowerCase())] = (0, remove_surrounding_block_1.removeSurroundingBlock)((_e = bindings[key]) === null || _e === void 0 ? void 0 : _e.code);
             delete bindings[key];
         }
     }
@@ -172,7 +173,7 @@ var blockToBuilder = function (json, options, _internalOptions) {
                 return "continue";
             }
             var value = bindings[key];
-            var parsed = (0, lodash_1.attempt)(function () { return json5_1.default.parse(value); });
+            var parsed = (0, lodash_1.attempt)(function () { return json5_1.default.parse(value === null || value === void 0 ? void 0 : value.code); });
             if (!(parsed instanceof Error)) {
                 componentOptions[key] = parsed;
             }
@@ -184,12 +185,12 @@ var blockToBuilder = function (json, options, _internalOptions) {
             _loop_1(key);
         }
     }
-    var hasCss = !!bindings.css;
+    var hasCss = !!((_f = bindings.css) === null || _f === void 0 ? void 0 : _f.code);
     var responsiveStyles = {
         large: {},
     };
     if (hasCss) {
-        var cssRules = json5_1.default.parse(bindings.css);
+        var cssRules = json5_1.default.parse((_g = bindings.css) === null || _g === void 0 ? void 0 : _g.code);
         var cssRuleKeys = Object.keys(cssRules);
         for (var _i = 0, cssRuleKeys_1 = cssRuleKeys; _i < cssRuleKeys_1.length; _i++) {
             var ruleKey = cssRuleKeys_1[_i];
@@ -223,9 +224,7 @@ var blockToBuilder = function (json, options, _internalOptions) {
             actions: actions,
         }, properties: thisIsComponent
             ? undefined
-            : omitMetaProperties(json.properties), bindings: thisIsComponent
-            ? builderBindings
-            : (0, lodash_1.omit)(bindings, 'css'), actions: actions, children: json.children
+            : omitMetaProperties(json.properties), bindings: thisIsComponent ? builderBindings : (0, lodash_1.omit)(bindings, 'css'), actions: actions, children: json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (child) { return (0, exports.blockToBuilder)(child, options); }) }), options);
 };