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

package/dist/src/__tests__/data/blocks/custom-code.raw.jsx

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function CustomCode(props) {
-    var elem = (0, mitosis_1.useRef)();
-    var state = (0, mitosis_1.useState)({
+    var elem = (0, mitosis_1.useRef)(null);
+    var state = (0, mitosis_1.useStore)({
         scriptsInserted: [],
         scriptsRun: [],
         findAndRunScripts: function () {
@@ -24,11 +24,7 @@ function CustomCode(props) {
                         document.head.appendChild(newScript);
                     }
                     else if (!script.type ||
-                        [
-                            'text/javascript',
-                            'application/javascript',
-                            'application/ecmascript',
-                        ].includes(script.type)) {
+                        ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {
                         if (state.scriptsRun.includes(script.innerText)) {
                             continue;
                         }

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function Embed(props) {
-    var elem = (0, mitosis_1.useRef)();
-    var state = (0, mitosis_1.useState)({
+    var elem = (0, mitosis_1.useRef)(null);
+    var state = (0, mitosis_1.useStore)({
         scriptsInserted: [],
         scriptsRun: [],
         findAndRunScripts: function () {
@@ -24,11 +24,7 @@ function Embed(props) {
                         document.head.appendChild(newScript);
                     }
                     else if (!script.type ||
-                        [
-                            'text/javascript',
-                            'application/javascript',
-                            'application/ecmascript',
-                        ].includes(script.type)) {
+                        ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {
                         if (state.scriptsRun.includes(script.innerText)) {
                             continue;
                         }

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

@@ -44,7 +44,7 @@ var _fake_3 = require("@fake");
 var _fake_4 = require("@fake");
 function FormComponent(props) {
     var _a;
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         state: 'unsubmitted',
         // TODO: separate response and error?
         responseData: null,
@@ -242,11 +242,11 @@ function FormComponent(props) {
             }
         },
     });
-    var formRef = (0, mitosis_1.useRef)();
+    var formRef = (0, mitosis_1.useRef)(null);
     return (<form validate={props.validate} ref={formRef} action={!props.sendWithJs && props.action} method={props.method} name={props.name} onSubmit={function (event) { return state.onSubmit(event); }} {...props.attributes}>
       <mitosis_1.Show when={props.builderBlock && props.builderBlock.children}>
         <mitosis_1.For each={(_a = props.builderBlock) === null || _a === void 0 ? void 0 : _a.children}>
-          {function (block, index) { return (<_fake_1.BuilderBlock key={block.id} block={block} index={index}/>); }}
+          {function (block, index) { return <_fake_1.BuilderBlock key={block.id} block={block} index={index}/>; }}
         </mitosis_1.For>
       </mitosis_1.Show>
 

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

@@ -3,22 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function Image(props) {
     var pictureRef = (0, mitosis_1.useRef)();
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         scrollListener: null,
         imageLoaded: false,
-        load: false,
         setLoaded: function () {
             state.imageLoaded = true;
         },
-        isBrowser: function () {
-            return (typeof window !== 'undefined' &&
-                window.navigator.product != 'ReactNative');
-        },
         useLazyLoading: function () {
             // TODO: Add more checks here, like testing for real web browsers
-            return !!props.lazy && state.isBrowser();
+            return !!props.lazy && isBrowser();
         },
     });
+    function isBrowser() {
+        return typeof window !== 'undefined' && window.navigator.product != 'ReactNative';
+    }
+    var _a = (0, mitosis_1.useState)(false), load = _a[0], setLoad = _a[1];
     (0, mitosis_1.onMount)(function () {
         if (state.useLazyLoading()) {
             // throttled scroll capture listener
@@ -27,7 +26,7 @@ function Image(props) {
                     var rect = pictureRef.getBoundingClientRect();
                     var buffer = window.innerHeight / 2;
                     if (rect.top < window.innerHeight + buffer) {
-                        state.load = true;
+                        setLoad(true);
                         state.scrollListener = null;
                         window.removeEventListener('scroll', listener_1);
                     }
@@ -48,7 +47,7 @@ function Image(props) {
     });
     return (<>
       <picture ref={pictureRef}>
-        <mitosis_1.Show when={!state.useLazyLoading() || state.load}>
+        <mitosis_1.Show when={!state.useLazyLoading() || load}>
           <img alt={props.altText} aria-role={props.altText ? 'presentation' : undefined} css={{
             opacity: '1',
             transition: 'opacity 0.2s ease-in-out',

package/dist/src/__tests__/data/blocks/img-state.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function ImgStateComponent() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         canShow: true,
         images: ['http://example.com/qwik.png'],
     });

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

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 require("@builder.io/mitosis");
 var sdk_1 = require("@builder.io/sdk");
 function FormInputComponent(props) {
-    return (<input {...props.attributes} key={sdk_1.Builder.isEditing && props.defaultValue
-            ? props.defaultValue
-            : 'default-key'} placeholder={props.placeholder} type={props.type} name={props.name} value={props.value} defaultValue={props.defaultValue} required={props.required}/>);
+    return (<input {...props.attributes} key={sdk_1.Builder.isEditing && props.defaultValue ? props.defaultValue : 'default-key'} placeholder={props.placeholder} type={props.type} name={props.name} value={props.value} defaultValue={props.defaultValue} required={props.required}/>);
 }
 exports.default = FormInputComponent;

package/dist/src/__tests__/data/blocks/multiple-onUpdateWithDeps.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function MultipleOnUpdateWithDeps() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         a: 'a',
         b: 'b',
         c: 'c',
@@ -10,9 +10,15 @@ function MultipleOnUpdateWithDeps() {
     });
     (0, mitosis_1.onUpdate)(function () {
         console.log('Runs when a or b changes', state.a, state.b);
+        if (state.a === 'a') {
+            state.a = 'b';
+        }
     }, [state.a, state.b]);
     (0, mitosis_1.onUpdate)(function () {
         console.log('Runs when c or d changes', state.c, state.d);
+        if (state.a === 'a') {
+            state.a = 'b';
+        }
     }, [state.c, state.d]);
     return <div />;
 }

package/dist/src/__tests__/data/blocks/onInit.raw.d.ts

@@ -1 +1,8 @@
-export default function OnInit(): JSX.Element;
+declare type Props = {
+    name: string;
+};
+export declare const defaultValues: {
+    name: string;
+};
+export default function OnInit(props: Props): JSX.Element;
+export {};

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

@@ -1,10 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultValues = void 0;
 var mitosis_1 = require("@builder.io/mitosis");
-function OnInit() {
+exports.defaultValues = {
+    name: 'PatrickJS',
+};
+function OnInit(props) {
+    var state = (0, mitosis_1.useStore)({
+        // name: props.name
+        // name: defaultValues.name || props.name,
+        name: '',
+    });
     (0, mitosis_1.onInit)(function () {
-        console.log('Runs once every update/rerender');
+        state.name = exports.defaultValues.name || props.name;
+        console.log('set defaults with props');
     });
-    return <div />;
+    return <div>Default name defined by parent {state.name}</div>;
 }
 exports.default = OnInit;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function OnUpdateWithDeps() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         a: 'a',
         b: 'b',
     });

package/dist/src/__tests__/data/blocks/section-state.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function SectionStateComponent(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         max: 42,
         items: [42],
     });

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

@@ -3,9 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 var sdk_1 = require("@builder.io/sdk");
 function SelectComponent(props) {
-    return (<select {...props.attributes} value={props.value} key={sdk_1.Builder.isEditing && props.defaultValue
-            ? props.defaultValue
-            : 'default-key'} defaultValue={props.defaultValue} name={props.name}>
+    return (<select {...props.attributes} value={props.value} key={sdk_1.Builder.isEditing && props.defaultValue ? props.defaultValue : 'default-key'} defaultValue={props.defaultValue} name={props.name}>
       <mitosis_1.For each={props.options}>
         {function (option, index) { return (<option value={option.value} data-index={index}>
             {option.name || option.value}

package/dist/src/__tests__/data/blocks/shadow-dom.raw.jsx

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 (0, mitosis_1.useMetadata)({ isAttachedToShadowDom: true });
 function SmileReviews(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         reviews: [],
         name: 'test',
         showReviewPrompt: false,
@@ -17,9 +17,7 @@ function SmileReviews(props) {
         });
     });
     return (<div data-user={state.name}>
-      <button onClick={function () { return (state.showReviewPrompt = true); }}>
-        Write a review
-      </button>
+      <button onClick={function () { return (state.showReviewPrompt = true); }}>Write a review</button>
       <mitosis_1.Show when={state.showReviewPrompt}>
         <input placeholder="Email"/>
 

package/dist/src/__tests__/data/blocks/stamped-io.raw.jsx

@@ -4,7 +4,7 @@ var mitosis_1 = require("@builder.io/mitosis");
 var lodash_1 = require("lodash");
 var lodash_2 = require("lodash");
 function SmileReviews(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         reviews: [],
         name: 'test',
         showReviewPrompt: false,
@@ -24,9 +24,7 @@ function SmileReviews(props) {
         });
     });
     return (<div data-user={state.name}>
-      <button onClick={function () { return (state.showReviewPrompt = true); }}>
-        Write a review
-      </button>
+      <button onClick={function () { return (state.showReviewPrompt = true); }}>Write a review</button>
       <mitosis_1.Show when={state.showReviewPrompt}>
         <input placeholder="Email"/>
 

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

@@ -10,13 +10,10 @@ 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' });
+    var state = (0, mitosis_1.useStore)({ 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} data-name={{ test: state.name || 'any name' }} innerHTML={props.text ||
-            props.content ||
-            state.name ||
-            '<p class="text-lg">my name</p>'}/>);
+    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/styles/class-and-className.raw.jsx

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicComponent() {
+    var _a = (0, mitosis_1.useState)('testClassName'), classState = _a[0], setClassState = _a[1];
+    return (<div class={classState} css={{
+            padding: '10px',
+        }}>
+      Hello! I can run in React, Vue, Solid, or Liquid!
+    </div>);
+}
+exports.default = MyBasicComponent;

package/dist/src/__tests__/data/types/component-props-interface.raw.d.ts

@@ -0,0 +1,6 @@
+interface Person {
+    name: string;
+    age?: number;
+}
+export default function MyBasicComponent(props: Person | never): JSX.Element;
+export {};

package/dist/src/__tests__/data/types/component-props-interface.raw.jsx

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

package/dist/src/__tests__/data/types/component-props-type.raw.d.ts

@@ -0,0 +1,6 @@
+declare type Person = {
+    name: string;
+    age?: number;
+};
+export default function MyBasicComponent(props: Person): JSX.Element;
+export {};

package/dist/src/__tests__/data/types/component-props-type.raw.jsx

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

package/dist/src/__tests__/data/types/preserve-typing.raw.d.ts

@@ -0,0 +1,8 @@
+export declare type A = 'test';
+export interface C {
+    n: 'test';
+}
+export default function MyBasicComponent(props: {
+    name: string;
+    age?: number;
+}): JSX.Element;

package/dist/src/__tests__/data/types/preserve-typing.raw.jsx

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

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

@@ -1,150 +1,7 @@
 "use strict";
 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 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');
-// const formBlock = require('./data/blocks/form.raw');
-var button = require('./data/blocks/button.raw');
-var textarea = require('./data/blocks/textarea.raw');
-var img = require('./data/blocks/img.raw');
-var video = require('./data/blocks/video.raw');
-var section = require('./data/blocks/section.raw');
-var sectionState = require('./data/blocks/section-state.raw');
-var text = require('./data/blocks/text.raw');
-var image = require('./data/blocks/image.raw');
-var imageState = require('./data/blocks/img-state.raw');
-var columns = require('./data/blocks/columns.raw');
-var onUpdate = require('./data/blocks/onUpdate.raw');
-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');
-var stamped = require('./data/blocks/stamped-io.raw');
-var shadowDom = require('./data/blocks/shadow-dom.raw');
+var shared_1 = require("./shared");
 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 });
-        expect(output).toMatchSnapshot();
-    });
-    test('BasicFor', function () {
-        var component = (0, jsx_1.parseJsx)(basicFor);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Input block', function () {
-        var component = (0, jsx_1.parseJsx)(inputBlock);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Submit button block', function () {
-        var component = (0, jsx_1.parseJsx)(submitButtonBlock);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Select block', function () {
-        var component = (0, jsx_1.parseJsx)(selectBlock);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    // test('Form block', () => {
-    //   const component = parseJsx(formBlock);
-    //   const output = componentToHtml()({ component });
-    //   expect(output).toMatchSnapshot();
-    // });
-    test('Button', function () {
-        var component = (0, jsx_1.parseJsx)(button);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Textarea', function () {
-        var component = (0, jsx_1.parseJsx)(textarea);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Img', function () {
-        var component = (0, jsx_1.parseJsx)(img);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('ImageState', function () {
-        var component = (0, jsx_1.parseJsx)(imageState);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Video', function () {
-        var component = (0, jsx_1.parseJsx)(video);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Section', function () {
-        var component = (0, jsx_1.parseJsx)(section);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('SectionState', function () {
-        var component = (0, jsx_1.parseJsx)(sectionState);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Text', function () {
-        var component = (0, jsx_1.parseJsx)(text);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Image', function () {
-        var component = (0, jsx_1.parseJsx)(image);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Columns', function () {
-        var component = (0, jsx_1.parseJsx)(columns);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('onUpdate', function () {
-        var component = (0, jsx_1.parseJsx)(onUpdate);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('onUpdateWithDeps', function () {
-        var component = (0, jsx_1.parseJsx)(onUpdateWithDeps);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('multipleOnUpdate', function () {
-        var component = (0, jsx_1.parseJsx)(multipleOnUpdate);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('multipleOnnUpdateWithDeps', function () {
-        var component = (0, jsx_1.parseJsx)(multipleOnUpdateWithDeps);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('onMount & onUnMount', function () {
-        var component = (0, jsx_1.parseJsx)(onMount);
-        var output = (0, html_1.componentToHtml)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Stamped', function () {
-        var component = (0, jsx_1.parseJsx)(stamped);
-        var html = (0, html_1.componentToHtml)()({ component: component });
-        expect(html).toMatchSnapshot();
-    });
-    test('Shadow DOM', function () {
-        var component = (0, jsx_1.parseJsx)(shadowDom);
-        var html = (0, html_1.componentToHtml)()({ component: component });
-        expect(html).toMatchSnapshot();
-    });
+    (0, shared_1.runTestsForTarget)('html', (0, html_1.componentToHtml)());
 });

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

@@ -1,114 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var liquid_1 = require("../generators/liquid");
-var jsx_1 = require("../parsers/jsx");
-var basic = require('./data/basic.raw');
-var submitButtonBlock = require('./data/blocks/submit-button.raw');
-var inputBlock = require('./data/blocks/input.raw');
-var selectBlock = require('./data/blocks/select.raw');
-var formBlock = require('./data/blocks/form.raw');
-var button = require('./data/blocks/button.raw');
-var textarea = require('./data/blocks/textarea.raw');
-var img = require('./data/blocks/img.raw');
-var video = require('./data/blocks/video.raw');
-var section = require('./data/blocks/section.raw');
-var text = require('./data/blocks/text.raw');
-var rawText = require('./data/blocks/raw-text.raw');
-var customCode = require('./data/blocks/custom-code.raw');
-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');
+var shared_1 = require("./shared");
 describe('Liquid', function () {
-    test('Basic', function () {
-        var component = (0, jsx_1.parseJsx)(basic);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Input block', function () {
-        var component = (0, jsx_1.parseJsx)(inputBlock);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Submit button block', function () {
-        var component = (0, jsx_1.parseJsx)(submitButtonBlock);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Select block', function () {
-        var component = (0, jsx_1.parseJsx)(selectBlock);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Form block', function () {
-        var component = (0, jsx_1.parseJsx)(formBlock);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Button', function () {
-        var component = (0, jsx_1.parseJsx)(button);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Textarea', function () {
-        var component = (0, jsx_1.parseJsx)(textarea);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Img', function () {
-        var component = (0, jsx_1.parseJsx)(img);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Video', function () {
-        var component = (0, jsx_1.parseJsx)(video);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Section', function () {
-        var component = (0, jsx_1.parseJsx)(section);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Text', function () {
-        var component = (0, jsx_1.parseJsx)(text);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('RawText', function () {
-        var component = (0, jsx_1.parseJsx)(rawText);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Stamped.io', function () {
-        var component = (0, jsx_1.parseJsx)(stamped);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('CustomCode', function () {
-        var component = (0, jsx_1.parseJsx)(customCode);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Embed', function () {
-        var component = (0, jsx_1.parseJsx)(customCode);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Image', function () {
-        var component = (0, jsx_1.parseJsx)(image);
-        var output = (0, liquid_1.componentToLiquid)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('Columns', function () {
-        var component = (0, jsx_1.parseJsx)(columns);
-        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();
-    });
+    (0, shared_1.runTestsForTarget)('liquid', (0, liquid_1.componentToLiquid)());
 });