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

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

@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var angular_1 = require("../generators/angular");
 var jsx_1 = require("../parsers/jsx");
 var onUpdate = require('./data/blocks/onUpdate.raw');
+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 slot = require('./data/blocks/slot.raw');
 describe('Angular', function () {
     test('onUpdate', function () {
@@ -10,6 +14,26 @@ describe('Angular', function () {
         var output = (0, angular_1.componentToAngular)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('onMount', function () {
+        var component = (0, jsx_1.parseJsx)(onMount);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onInit and onMount', function () {
+        var component = (0, jsx_1.parseJsx)(onInitonMount);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onInit', function () {
+        var component = (0, jsx_1.parseJsx)(onInit);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('BasicFor', function () {
+        var component = (0, jsx_1.parseJsx)(basicFor);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
     test('ng-content', function () {
         var component = (0, jsx_1.parseJsx)(slot);
         var output = (0, angular_1.componentToAngular)()({ component: component });

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicForComponent() {
+    var state = (0, mitosis_1.useState)({
+        name: 'PatrickJS',
+        names: ['Steve', 'PatrickJS'],
+    });
+    (0, mitosis_1.onMount)(function () {
+        console.log('onMount code');
+    });
+    return (<div>
+      <mitosis_1.For each={state.names}>
+        {function (person) { return (<>
+            <input value={state.name} onChange={function (event) {
+                state.name = event.target.value + ' and ' + person;
+            }}/>
+            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid,
+            or Liquid!
+          </>); }}
+      </mitosis_1.For>
+    </div>);
+}
+exports.default = MyBasicForComponent;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function ImgStateComponent() {
+    var state = (0, mitosis_1.useState)({
+        canShow: true,
+        images: ['http://example.com/qwik.png'],
+    });
+    return (<div>
+      <mitosis_1.For each={state.images}>
+        {function (item, itemIndex) { return (<>
+            <img class={'custom-class'} src={item} key={itemIndex}/>
+          </>); }}
+      </mitosis_1.For>
+    </div>);
+}
+exports.default = ImgStateComponent;

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function OnInit() {
+    (0, mitosis_1.onInit)(function () {
+        console.log('onInit');
+    });
+    (0, mitosis_1.onMount)(function () {
+        console.log('onMount');
+    });
+    return <div />;
+}
+exports.default = OnInit;

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

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

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function OnInit() {
+    (0, mitosis_1.onInit)(function () {
+        console.log('Runs once every update/rerender');
+    });
+    return <div />;
+}
+exports.default = OnInit;

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

@@ -0,0 +1,6 @@
+export interface SectionProps {
+    maxWidth?: number;
+    attributes?: any;
+    children?: any;
+}
+export default function SectionStateComponent(props: SectionProps): JSX.Element;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function SectionStateComponent(props) {
+    var state = (0, mitosis_1.useState)({
+        max: 42,
+        items: [42],
+    });
+    return (<mitosis_1.Show when={state.max}>
+      <mitosis_1.For each={state.items}>
+        {function (item) { return (<section {...props.attributes} style={{ maxWidth: item + state.max }}>
+            {props.children}
+          </section>); }}
+      </mitosis_1.For>
+    </mitosis_1.Show>);
+}
+exports.default = SectionStateComponent;

package/dist/src/__tests__/data/context/component-with-context.lite.d.ts

@@ -1 +1,3 @@
-export default function ComponentWithContext(): JSX.Element;
+export default function ComponentWithContext(props: {
+    content: string;
+}): JSX.Element;

package/dist/src/__tests__/data/context/component-with-context.lite.jsx

@@ -6,9 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var _1_1 = __importDefault(require("@dummy/1"));
 var _2_1 = __importDefault(require("@dummy/2"));
 var mitosis_1 = require("@builder.io/mitosis");
-function ComponentWithContext() {
+function ComponentWithContext(props) {
     var foo = (0, mitosis_1.useContext)(_1_1.default);
-    (0, mitosis_1.setContext)(_1_1.default, { foo: 'bar' });
+    (0, mitosis_1.setContext)(_1_1.default, {
+        foo: 'bar',
+        content: function () {
+            return props.content;
+        },
+    });
     return (<_2_1.default.Provider value={{ bar: 'baz' }}>
       <>{foo.value}</>
     </_2_1.default.Provider>);

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

@@ -2,9 +2,135 @@
 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 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');
 describe('Html', function () {
+    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 });

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 basicFor = require('./data/basic-for.raw');
 var submitButtonBlock = require('./data/blocks/submit-button.raw');
 var inputBlock = require('./data/blocks/input.raw');
 var selectBlock = require('./data/blocks/select.raw');
@@ -20,6 +21,7 @@ var embed = require('./data/blocks/embed.raw');
 var image = require('./data/blocks/image.raw');
 var columns = require('./data/blocks/columns.raw');
 var onUpdate = require('./data/blocks/onUpdate.raw');
+var onInit = require('./data/blocks/onInit.raw');
 var onUpdateWithDeps = require('./data/blocks/onUpdateWithDeps.raw');
 var multipleOnUpdate = require('./data/blocks/multiple-onUpdate.raw');
 var multipleOnUpdateWithDeps = require('./data/blocks/multiple-onUpdateWithDeps.raw');
@@ -31,6 +33,11 @@ describe('React', function () {
         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 });
+        expect(output).toMatchSnapshot();
+    });
     test('Input block', function () {
         var component = (0, jsx_1.parseJsx)(inputBlock);
         var output = (0, react_1.componentToReact)()({ component: component });
@@ -119,6 +126,11 @@ describe('React', function () {
         var output = (0, react_1.componentToReact)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('onInit', function () {
+        var component = (0, jsx_1.parseJsx)(onInit);
+        var output = (0, react_1.componentToReact)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
     test('onUpdateWithDeps', function () {
         var component = (0, jsx_1.parseJsx)(onUpdateWithDeps);
         var output = (0, react_1.componentToReact)()({ component: component });

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

@@ -1,36 +1,70 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var svelte_1 = require("../generators/svelte");
+var svelte_1 = require("../generators/context/svelte");
+var context_1 = require("../parsers/context");
+var svelte_2 = require("../generators/svelte");
 var jsx_1 = require("../parsers/jsx");
 var onUpdate = require('./data/blocks/onUpdate.raw');
 var multipleOUpdate = require('./data/blocks/multiple-onUpdate.raw');
 var selfReferencingComponent = require('./data/blocks/self-referencing-component.raw');
 var selfReferencingComponentWithChildren = require('./data/blocks/self-referencing-component-with-children.raw');
 var builderRenderBlock = require('./data/blocks/builder-render-block.raw');
+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');
 describe('Svelte', function () {
     test('onUpdate', function () {
         var component = (0, jsx_1.parseJsx)(onUpdate);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
     test('multipleOnUpdate', function () {
         var component = (0, jsx_1.parseJsx)(multipleOUpdate);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
     test('selfReferencingComponent', function () {
         var component = (0, jsx_1.parseJsx)(selfReferencingComponent);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
     test('selfReferencingComponentWithChildren', function () {
         var component = (0, jsx_1.parseJsx)(selfReferencingComponentWithChildren);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
     test('BuilderRenderBlock', function () {
         var component = (0, jsx_1.parseJsx)(builderRenderBlock);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('rootShow', function () {
+        var component = (0, jsx_1.parseJsx)(rootShow);
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    describe('Context', function () {
+        test('Parse context', function () {
+            var component = (0, context_1.parseContext)(simpleExample, { name: 'SimpleExample' });
+            if (!component) {
+                throw new Error('No parseable context found for simple.context.lite.ts');
+            }
+            expect(component).toMatchSnapshot();
+            var context = (0, svelte_1.contextToSvelte)()({ context: component });
+            expect(context).toMatchSnapshot();
+        });
+        test('Use and set context in components', function () {
+            var component = (0, jsx_1.parseJsx)(componentWithContext);
+            expect(component).toMatchSnapshot();
+            var output = (0, svelte_2.componentToSvelte)()({ component: component });
+            expect(output).toMatchSnapshot();
+        });
+        test('Use and set context in complex components', function () {
+            var component = (0, jsx_1.parseJsx)(renderBlock);
+            expect(component).toMatchSnapshot();
+            var output = (0, svelte_2.componentToSvelte)()({ component: component });
+            expect(output).toMatchSnapshot();
+        });
+    });
 });

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

@@ -2,11 +2,155 @@
 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 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 onInit = require('./data/blocks/onInit.raw');
+var onInitonMount = require('./data/blocks/onInit-onMount.raw');
 var stamped = require('./data/blocks/stamped-io.raw');
+var shadowDom = require('./data/blocks/shadow-dom.raw');
 describe('webcomponent', function () {
+    test('Basic', function () {
+        var component = (0, jsx_1.parseJsx)(basic);
+        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 });
+        expect(output).toMatchSnapshot();
+    });
+    test('Input block', function () {
+        var component = (0, jsx_1.parseJsx)(inputBlock);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Submit button block', function () {
+        var component = (0, jsx_1.parseJsx)(submitButtonBlock);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Select block', function () {
+        var component = (0, jsx_1.parseJsx)(selectBlock);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    // test('Form block', () => {
+    //   const component = parseJsx(formBlock);
+    //   const output = componentToCustomElement()({ component });
+    //   expect(output).toMatchSnapshot();
+    // });
+    test('Button', function () {
+        var component = (0, jsx_1.parseJsx)(button);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Textarea', function () {
+        var component = (0, jsx_1.parseJsx)(textarea);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Img', function () {
+        var component = (0, jsx_1.parseJsx)(img);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Video', function () {
+        var component = (0, jsx_1.parseJsx)(video);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Section', function () {
+        var component = (0, jsx_1.parseJsx)(section);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('SectionState', function () {
+        var component = (0, jsx_1.parseJsx)(sectionState);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Text', function () {
+        var component = (0, jsx_1.parseJsx)(text);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Image', function () {
+        var component = (0, jsx_1.parseJsx)(image);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('ImageState', function () {
+        var component = (0, jsx_1.parseJsx)(imageState);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Columns', function () {
+        var component = (0, jsx_1.parseJsx)(columns);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onUpdate', function () {
+        var component = (0, jsx_1.parseJsx)(onUpdate);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onUpdateWithDeps', function () {
+        var component = (0, jsx_1.parseJsx)(onUpdateWithDeps);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('multipleOnUpdate', function () {
+        var component = (0, jsx_1.parseJsx)(multipleOnUpdate);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('multipleOnnUpdateWithDeps', function () {
+        var component = (0, jsx_1.parseJsx)(multipleOnUpdateWithDeps);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onMount & onUnMount', function () {
+        var component = (0, jsx_1.parseJsx)(onMount);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onInit', function () {
+        var component = (0, jsx_1.parseJsx)(onInit);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onInit & onMount', function () {
+        var component = (0, jsx_1.parseJsx)(onInitonMount);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
     test('Stamped', function () {
         var component = (0, jsx_1.parseJsx)(stamped);
         var html = (0, html_1.componentToCustomElement)()({ component: component });
         expect(html).toMatchSnapshot();
     });
+    test('Shadow DOM', function () {
+        var component = (0, jsx_1.parseJsx)(shadowDom);
+        var html = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(html).toMatchSnapshot();
+    });
 });

package/dist/src/generators/angular.js

@@ -120,7 +120,7 @@ exports.blockToAngular = blockToAngular;
 var componentToAngular = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
-        var _b;
+        var _b, _c, _d, _e, _f, _g, _h;
         var component = _a.component;
         // Make a copy we can safely mutate, similar to babel's toolchain
         var json = (0, fast_clone_1.fastClone)(component);
@@ -128,6 +128,7 @@ var componentToAngular = function (options) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
         var props = (0, get_props_1.getProps)(component);
+        var hasOnInit = Boolean(((_b = component.hooks) === null || _b === void 0 ? void 0 : _b.onInit) || ((_c = component.hooks) === null || _c === void 0 ? void 0 : _c.onMount));
         var refs = Array.from((0, get_refs_1.getRefs)(json));
         (0, map_refs_1.mapRefs)(json, function (refName) { return "this.".concat(refName, ".nativeElement"); });
         if (options.plugins) {
@@ -154,11 +155,17 @@ var componentToAngular = function (options) {
             .map(function (item) { return "@Input() ".concat(item, ": any"); })
             .join('\n'), refs
             .map(function (refName) { return "@ViewChild('".concat(refName, "') ").concat(refName, ": ElementRef"); })
-            .join('\n'), !component.hooks.onMount
+            .join('\n'), !hasOnInit
             ? ''
-            : "ngOnInit() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onMount.code, {
-                replaceWith: 'this.',
-            }), "\n            }"), !((_b = component.hooks.onUpdate) === null || _b === void 0 ? void 0 : _b.length)
+            : "ngOnInit() {\n              ".concat(!((_d = component.hooks) === null || _d === void 0 ? void 0 : _d.onInit)
+                ? ''
+                : "\n                ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_e = component.hooks.onInit) === null || _e === void 0 ? void 0 : _e.code, {
+                    replaceWith: 'this.',
+                }), "\n                "), "\n              ").concat(!((_f = component.hooks) === null || _f === void 0 ? void 0 : _f.onMount)
+                ? ''
+                : "\n                ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_g = component.hooks.onMount) === null || _g === void 0 ? void 0 : _g.code, {
+                    replaceWith: 'this.',
+                }), "\n                "), "\n            }"), !((_h = component.hooks.onUpdate) === null || _h === void 0 ? void 0 : _h.length)
             ? ''
             : "ngAfterContentChecked() {\n              ".concat(component.hooks.onUpdate.map(function (hook) {
                 return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.code, {