@builder.io/mitosis 0.0.56-2 → 0.0.56-22

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function MyBasicComponent() {
+    return (<div 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(): import("@builder.io/mitosis/jsx-runtime").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(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1 @@
+export default function MyBasicComponent(): import("@builder.io/mitosis/jsx-runtime").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): import("@builder.io/mitosis/jsx-runtime").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): import("@builder.io/mitosis/jsx-runtime").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;
+}): import("@builder.io/mitosis/jsx-runtime").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,18 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var html_1 = require("../generators/html");
-var jsx_1 = require("../parsers/jsx");
-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('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,108 +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 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();
-    });
+    (0, shared_1.runTestsForTarget)('liquid', (0, liquid_1.componentToLiquid)());
 });

package/dist/src/__tests__/parse-jsx.test.js

@@ -3,6 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_1 = require("../parsers/jsx");
 var buttonWithMetadata = require('./data/blocks/button-with-metadata.raw');
 var image = require('./data/blocks/image.raw');
+var basicOnUpdateReturn = require('./data/basic-onUpdate-return.raw');
+var basicMitosis = require('./data/basic-custom-mitosis-package.raw');
+var basicRef = require('./data/basic-ref.raw');
+var basicPropsRaw = require('./data/basic-props.raw');
+var basicPropsDestructureRaw = require('./data/basic-props-destructure.raw');
 describe('Parse JSX', function () {
     test('metadata', function () {
         var json = (0, jsx_1.parseJsx)(buttonWithMetadata);
@@ -12,4 +17,21 @@ describe('Parse JSX', function () {
         var json = (0, jsx_1.parseJsx)(image);
         expect(json).toMatchSnapshot();
     });
+    test('onUpdate return', function () {
+        var json = (0, jsx_1.parseJsx)(basicOnUpdateReturn);
+        expect(json).toMatchSnapshot();
+    });
+    test('useRef', function () {
+        var json = (0, jsx_1.parseJsx)(basicRef);
+        expect(json).toMatchSnapshot();
+    });
+    test('custom mitosis package', function () {
+        var json = (0, jsx_1.parseJsx)(basicMitosis, {
+            compileAwayPackages: ['@dummy/custom-mitosis'],
+        });
+        expect(json).toMatchSnapshot();
+    });
+    test('custom mitosis package', function () {
+        expect((0, jsx_1.parseJsx)(basicPropsRaw)).toEqual((0, jsx_1.parseJsx)(basicPropsDestructureRaw));
+    });
 });

package/dist/src/__tests__/qwik/convertMethodToFunction.test.d.ts

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

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var convertMethodToFunction_1 = require("../../generators/qwik/convertMethodToFunction");
+describe('convertMethodToFunction', function () {
+    var methodMap = {
+        methodA: 'method',
+        getterB: 'getter',
+        getCssFromFont: 'method',
+    };
+    var lexicalArgs = ['props', 'state'];
+    describe('rewrite', function () {
+        test('method', function () {
+            expect((0, convertMethodToFunction_1.convertMethodToFunction)('this.methodA(123)', methodMap, lexicalArgs)).toEqual('methodA(props,state,123)');
+        });
+        test('getter', function () {
+            expect((0, convertMethodToFunction_1.convertMethodToFunction)('this.getterB', methodMap, lexicalArgs)).toEqual('getterB(props,state)');
+        });
+        test('handle comments', function () {
+            expect((0, convertMethodToFunction_1.convertMethodToFunction)('//\nreturn this.getterB;', methodMap, lexicalArgs)).toEqual('//\nreturn getterB(props,state);');
+        });
+        test('braces', function () {
+            var code = 'getFontCss({}: {}) { this.getCssFromFont(font) }';
+            expect((0, convertMethodToFunction_1.convertMethodToFunction)(code, methodMap, lexicalArgs)).toEqual('getFontCss({}: {}) { getCssFromFont(props,state,font) }');
+        });
+    });
+    describe('string', function () {
+        test('should not rewrite string', function () {
+            expect((0, convertMethodToFunction_1.convertMethodToFunction)('"this.getterB"', methodMap, lexicalArgs)).toEqual('"this.getterB"');
+        });
+        test('should rewrite template string', function () {
+            expect((0, convertMethodToFunction_1.convertMethodToFunction)('`${this.getterB}this.getterB`', methodMap, lexicalArgs)).toEqual('`${getterB(props,state)}this.getterB`');
+        });
+    });
+});

package/dist/src/__tests__/qwik/src-generator.test.d.ts

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

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var src_generator_1 = require("../../generators/qwik/src-generator");
+describe('src-generator', function () {
+    describe('isStatement', function () {
+        test('is an expression', function () {
+            expect((0, src_generator_1.isStatement)('a.b')).toBe(false);
+            expect((0, src_generator_1.isStatement)('1?2:"bar"')).toBe(false);
+            expect((0, src_generator_1.isStatement)('"var x; return foo + \'\\"\';"')).toBe(false);
+            expect((0, src_generator_1.isStatement)('"foo" + `bar\nbaz`')).toBe(false);
+            expect((0, src_generator_1.isStatement)('(...)()')).toBe(false);
+        });
+        test('regression', function () {
+            expect((0, src_generator_1.isStatement)('props.attributes?.class || props.attributes?.className')).toBe(false);
+        });
+        test('is a statement', function () {
+            expect((0, src_generator_1.isStatement)('var x; return x;')).toBe(true);
+            expect((0, src_generator_1.isStatement)('var x')).toBe(true);
+        });
+    });
+    describe('import', function () {
+        var options;
+        var src;
+        describe('module', function () {
+            beforeEach(function () {
+                options = {
+                    isJSX: true,
+                    isPretty: false,
+                    isTypeScript: false,
+                    isModule: true,
+                    isBuilder: false,
+                };
+                src = new src_generator_1.SrcBuilder(new src_generator_1.File('test', options, '', ''), options);
+            });
+            test('import to string', function () {
+                src.import('module', [new src_generator_1.Symbol('importName', 'asLocalName')]);
+                expect(src.toString()).toEqual('import{importName as asLocalName}from"module";');
+            });
+            test('import from default', function () {
+                src.import('module', [new src_generator_1.Symbol('default', 'asLocalName')]);
+                expect(src.toString()).toEqual('import asLocalName from"module";');
+            });
+        });
+        describe('require', function () {
+            beforeEach(function () {
+                options = {
+                    isJSX: true,
+                    isPretty: false,
+                    isTypeScript: false,
+                    isModule: false,
+                    isBuilder: false,
+                };
+                src = new src_generator_1.SrcBuilder(new src_generator_1.File('test', options, '', ''), options);
+            });
+            test('import to string', function () {
+                src.import('module', [new src_generator_1.Symbol('importName', 'asLocalName')]);
+                expect(src.toString()).toEqual('const asLocalName=require("module").importName;');
+            });
+            test('import from default', function () {
+                src.import('module', [new src_generator_1.Symbol('default', 'asLocalName')]);
+                expect(src.toString()).toEqual('const asLocalName=require("module");');
+            });
+        });
+    });
+});

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

@@ -38,12 +38,13 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var fs_extra_promise_1 = require("fs-extra-promise");
 var qwik_1 = require("../generators/qwik");
+var component_generator_1 = require("../generators/qwik/component-generator");
 var index_1 = require("../generators/qwik/index");
-var src_generator_1 = require("../generators/qwik/src-generator");
 var builder_1 = require("../parsers/builder");
 var jsx_1 = require("../parsers/jsx");
 var compile_away_builder_components_1 = require("../plugins/compile-away-builder-components");
 var symbol_processor_1 = require("../symbols/symbol-processor");
+var shared_1 = require("./shared");
 var todo = require('../../../../examples/todo/src/components/todo.lite');
 var todos = require('../../../../examples/todo/src/components/todos.lite');
 var debugFiles = true;
@@ -76,6 +77,7 @@ var debugOutput = function (fileSet) { return __awaiter(void 0, void 0, void 0,
     });
 }); };
 describe('qwik', function () {
+    (0, shared_1.runTestsForTarget)('qwik', (0, component_generator_1.componentToQwik)());
     describe('todo', function () {
         test('Todo.tsx', function () { return __awaiter(void 0, void 0, void 0, function () {
             var json, fileSet;
@@ -309,8 +311,7 @@ describe('qwik', function () {
                         fileSet = (0, index_1.createFileSet)({ output: 'mjs', jsx: true });
                         hierarchy.depthFirstSymbols.forEach(function (builderComponent) {
                             var mitosisComponent = (0, symbol_processor_1.convertBuilderElementToMitosisComponent)(builderComponent);
-                            mitosisComponent &&
-                                (0, index_1.addComponent)(fileSet, mitosisComponent, { isRoot: false });
+                            mitosisComponent && (0, index_1.addComponent)(fileSet, mitosisComponent, { isRoot: false });
                         });
                         component = (0, builder_1.builderContentToMitosisComponent)(content, {
                             includeBuilderExtras: true,
@@ -372,13 +373,49 @@ describe('qwik', function () {
         });
     }); });
     test('bindings', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var content, state, fileSet, component;
+        var content, fileSet, component;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     content = require('./qwik.test.bindings.json');
-                    state = {};
-                    expect(state).toMatchSnapshot();
+                    fileSet = (0, index_1.createFileSet)({ output: 'cjs', jsx: false });
+                    component = (0, builder_1.builderContentToMitosisComponent)(content, {
+                        includeBuilderExtras: true,
+                        preserveTextBlocks: true,
+                    });
+                    (0, compile_away_builder_components_1.compileAwayBuilderComponentsFromTree)(component, compile_away_builder_components_1.components);
+                    (0, index_1.addComponent)(fileSet, component);
+                    return [4 /*yield*/, debugOutput(fileSet)];
+                case 1:
+                    _a.sent();
+                    expect(toObj(fileSet)).toMatchSnapshot();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    test('for-loop.bindings', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var component, fileSet;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    component = require('./qwik.test.for-loop.binding.json');
+                    fileSet = (0, index_1.createFileSet)({ output: 'cjs', jsx: false });
+                    (0, compile_away_builder_components_1.compileAwayBuilderComponentsFromTree)(component, compile_away_builder_components_1.components);
+                    (0, index_1.addComponent)(fileSet, component);
+                    return [4 /*yield*/, debugOutput(fileSet)];
+                case 1:
+                    _a.sent();
+                    expect(toObj(fileSet)).toMatchSnapshot();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    test('mount', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var content, fileSet, component;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    content = require('./qwik.test.mount.json');
                     fileSet = (0, index_1.createFileSet)({ output: 'cjs', jsx: false });
                     component = (0, builder_1.builderContentToMitosisComponent)(content, {
                         includeBuilderExtras: true,
@@ -395,30 +432,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,
-            }, '', '');
+                isBuilder: true,
+            }, '', ''));
+        });
+        test('should format code', function () {
             file.src.emit('const x=1');
             expect(file.toString()).toEqual('const x = 1;\n');
         });
-    });
-    describe('helper functions', function () {
-        describe('isStatement', function () {
-            test('is an expression', function () {
-                expect((0, src_generator_1.isStatement)('a.b')).toBe(false);
-                expect((0, src_generator_1.isStatement)('1?2:"bar"')).toBe(false);
-                expect((0, src_generator_1.isStatement)('"var x; return foo + \'\\"\';"')).toBe(false);
-                expect((0, src_generator_1.isStatement)('"foo" + `bar\nbaz`')).toBe(false);
-                expect((0, src_generator_1.isStatement)('(...)()')).toBe(false);
-            });
-            test('is a statement', function () {
-                expect((0, src_generator_1.isStatement)('var x; return x;')).toBe(true);
-                expect((0, src_generator_1.isStatement)('var x')).toBe(true);
-            });
+        test('should deal with empty bindings', function () {
+            file.src.jsxBegin('Image', {}, { image: '' });
+            file.src.jsxEnd('Image');
+            expect(file.toString()).toEqual('<Image></Image>;\n');
         });
     });
 });