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

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

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

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+var injection_js_1 = require("@dummy/injection-js");
+function MyBasicComponent() {
+    (0, mitosis_1.setContext)(injection_js_1.Injector, (0, injection_js_1.createInjector)());
+    var myService = (0, mitosis_1.useContext)(injection_js_1.MyService);
+    var state = (0, mitosis_1.useState)({
+        name: 'PatrickJS',
+    });
+    (0, mitosis_1.onInit)(function () {
+        var hi = myService.method('hi');
+        console.log(hi);
+    });
+    (0, mitosis_1.onMount)(function () {
+        var bye = myService.method('hi');
+        console.log(bye);
+    });
+    function onChange() {
+        var change = myService.method('change');
+        console.log(change);
+    }
+    return (<div>
+      {myService.method('hello') + state.name}
+      Hello! I can run in React, Vue, Solid, or Liquid!
+      <input onChange={onChange}></input>
+    </div>);
+}
+exports.default = MyBasicComponent;

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

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

package/dist/src/__tests__/data/basic-custom-mitosis-package.raw.jsx

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var custom_mitosis_1 = require("@dummy/custom-mitosis");
+function MyBasicComponent() {
+    var state = (0, custom_mitosis_1.useState)({
+        name: 'PatrickJS',
+    });
+    return (<div>
+      Hello {state.name}! I can run in React, Qwik, Vue, Solid, or Liquid!
+    </div>);
+}
+exports.default = MyBasicComponent;

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

@@ -0,0 +1,5 @@
+export interface Props {
+    showInput: boolean;
+    inputRef: any;
+}
+export default function MyBasicForwardRefComponent(props: Props): JSX.Element;

package/dist/src/__tests__/data/basic-forwardRef-metadata.raw.jsx

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+(0, mitosis_1.useMetadata)({
+    forwardRef: 'inputRef',
+});
+function MyBasicForwardRefComponent(props) {
+    var state = (0, mitosis_1.useState)({
+        name: 'PatrickJS',
+    });
+    return (<div>
+      <input ref={props.inputRef} css={{
+            color: 'red',
+        }} value={state.name} onChange={function (event) { return (state.name = event.target.value); }}/>
+    </div>);
+}
+exports.default = MyBasicForwardRefComponent;

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

@@ -0,0 +1,5 @@
+export interface Props {
+    showInput: boolean;
+    inputRef: any;
+}
+export default function MyBasicForwardRefComponent(props: Props): JSX.Element;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicForwardRefComponent(props) {
+    var state = (0, mitosis_1.useState)({
+        name: 'PatrickJS',
+    });
+    return (<div>
+      <input ref={props.inputRef} css={{
+            color: 'red',
+        }} value={state.name} onChange={function (event) { return (state.name = event.target.value); }}/>
+    </div>);
+}
+exports.default = MyBasicForwardRefComponent;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicComponent() {
+    var state = (0, mitosis_1.useState)({
+        name: 'Steve',
+    });
+    return (<div class="test" css={{
+            padding: '10px',
+        }}>
+      <input value={state.name} onChange={function (myEvent) {
+            state.name = myEvent.target.value;
+        }}/>
+      Hello! I can run in React, Vue, Solid, or Liquid!
+    </div>);
+}
+exports.default = MyBasicComponent;

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

@@ -0,0 +1,4 @@
+export interface Props {
+    name: string;
+}
+export default function MyBasicComponent(props: Props): JSX.Element;

package/dist/src/__tests__/data/basic-onUpdate-deps.raw.jsx

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicComponent(props) {
+    var state = (0, mitosis_1.useState)({
+        name: 'Steve',
+    });
+    (0, mitosis_1.onUpdate)(function () {
+        console.log('name 1');
+        if (state.name === 'Steve') {
+            state.name = 'PatrickJS';
+        }
+    }, [state.name]);
+    (0, mitosis_1.onUpdate)(function () {
+        console.log('name 2');
+        if (state.name === 'PatrickJS') {
+            state.name = 'Hi';
+        }
+    }, [props.name]);
+    return (<div>
+      <input value={state.name} onChange={function (myEvent) { return (state.name = myEvent.target.value); }}/>
+      Hello! I can run in React, Vue, Solid, or Liquid!
+    </div>);
+}
+exports.default = MyBasicComponent;

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

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

package/dist/src/__tests__/data/basic-onUpdate-return.raw.jsx

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicOnUpdateReturnComponent() {
+    var state = (0, mitosis_1.useState)({
+        name: 'PatrickJS',
+    });
+    (0, mitosis_1.onUpdate)(function () {
+        var controller = new AbortController();
+        var signal = controller.signal;
+        fetch('https://patrickjs.com/api/resource.json', { signal: signal })
+            .then(function (response) { return response.json(); })
+            .then(function (data) {
+            state.name = data.name;
+        });
+        return function () {
+            if (!signal.aborted) {
+                controller.abort();
+            }
+        };
+    }, [state.name]);
+    return <div>Hello! {state.name}</div>;
+}
+exports.default = MyBasicOnUpdateReturnComponent;

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

@@ -0,0 +1,4 @@
+export interface Props {
+    showInput: boolean;
+}
+export default function MyBasicRefAssignmentComponent(props: Props): JSX.Element;

package/dist/src/__tests__/data/basic-ref-assignment.raw.jsx

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicRefAssignmentComponent(props) {
+    var holdValueRef = (0, mitosis_1.useRef)('Patrick');
+    function handlerClick(event) {
+        event.preventDefault();
+        console.log('current value', holdValueRef);
+        holdValueRef = holdValueRef + 'JS';
+    }
+    return (<div>
+      <button onClick={function (evt) { return handlerClick(evt); }}>Click</button>
+    </div>);
+}
+exports.default = MyBasicRefAssignmentComponent;

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

@@ -0,0 +1,5 @@
+export interface Props {
+    showInput: boolean;
+}
+export declare function usePrevious<T>(value: T): T;
+export default function MyPreviousComponent(props: Props): JSX.Element;

package/dist/src/__tests__/data/basic-ref-usePrevious.raw.jsx

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrevious = void 0;
+var mitosis_1 = require("@builder.io/mitosis");
+function usePrevious(value) {
+    // The ref object is a generic container whose current property is mutable ...
+    // ... and can hold any value, similar to an instance property on a class
+    var ref = (0, mitosis_1.useRef)(null);
+    // Store current value in ref
+    (0, mitosis_1.onUpdate)(function () {
+        ref = value;
+    }, [value]); // Only re-run if value changes
+    // Return previous value (happens before update in useEffect above)
+    return ref;
+}
+exports.usePrevious = usePrevious;
+function MyPreviousComponent(props) {
+    var state = (0, mitosis_1.useState)({
+        count: 0,
+    });
+    var prevCount = (0, mitosis_1.useRef)(state.count);
+    (0, mitosis_1.onUpdate)(function () {
+        prevCount = state.count;
+    }, [state.count]); //
+    // Get the previous value (was passed into hook on last render)
+    // const prevCount = usePrevious(state.count);
+    // Display both current and previous count value
+    return (<div>
+      <h1>
+        Now: {state.count}, before: {prevCount}
+      </h1>
+      <button onClick={function () { return (state.count += 1); }}>Increment</button>
+    </div>);
+}
+exports.default = MyPreviousComponent;

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

@@ -0,0 +1,4 @@
+export interface Props {
+    showInput: boolean;
+}
+export default function MyBasicRefComponent(props: Props): JSX.Element;

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicRefComponent(props) {
+    var inputRef = (0, mitosis_1.useRef)(null);
+    var inputNoArgRef = (0, mitosis_1.useRef)(null);
+    var state = (0, mitosis_1.useState)({
+        name: 'PatrickJS',
+    });
+    function onBlur() {
+        // Maintain focus
+        inputRef.focus();
+    }
+    function lowerCaseName() {
+        return state.name.toLowerCase();
+    }
+    return (<div>
+      {props.showInput && (<>
+          <input ref={inputRef} css={{
+                color: 'red',
+            }} value={state.name} onBlur={function (event) { return onBlur(); }} onChange={function (event) { return (state.name = event.target.value); }}/>
+
+          <label ref={inputNoArgRef} for="cars">
+            Choose a car:
+          </label>
+
+          <select name="cars" id="cars">
+            <option value="supra">GR Supra</option>
+            <option value="86">GR 86</option>
+          </select>
+        </>)}
+      Hello
+      {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web Component!
+    </div>);
+}
+exports.default = MyBasicRefComponent;

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

@@ -1 +1,4 @@
+export declare const DEFAULT_VALUES: {
+    name: string;
+};
 export default function MyBasicComponent(): JSX.Element;

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

@@ -1,6 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_VALUES = void 0;
 var mitosis_1 = require("@builder.io/mitosis");
+exports.DEFAULT_VALUES = {
+    name: 'Steve',
+};
 function MyBasicComponent() {
     var state = (0, mitosis_1.useState)({
         name: 'Steve',
@@ -8,7 +12,7 @@ function MyBasicComponent() {
     return (<div class="test" css={{
             padding: '10px',
         }}>
-      <input value={state.name} onChange={function (myEvent) { return (state.name = myEvent.target.value); }}/>
+      <input value={exports.DEFAULT_VALUES.name || 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/custom-code.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function CustomCode(props) {
-    var elem = (0, mitosis_1.useRef)();
+    var elem = (0, mitosis_1.useRef)(null);
     var state = (0, mitosis_1.useState)({
         scriptsInserted: [],
         scriptsRun: [],

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function Embed(props) {
-    var elem = (0, mitosis_1.useRef)();
+    var elem = (0, mitosis_1.useRef)(null);
     var state = (0, mitosis_1.useState)({
         scriptsInserted: [],
         scriptsRun: [],

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

@@ -242,7 +242,7 @@ 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}>

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.useState)({
+        // 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/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/generators/angular.js

@@ -30,6 +30,7 @@ var jsx_1 = require("../parsers/jsx");
 var plugins_1 = require("../modules/plugins");
 var is_children_1 = __importDefault(require("../helpers/is-children"));
 var get_props_1 = require("../helpers/get-props");
+var get_props_ref_1 = require("../helpers/get-props-ref");
 var get_prop_functions_1 = require("../helpers/get-prop-functions");
 var lodash_1 = require("lodash");
 var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
@@ -80,7 +81,8 @@ var blockToAngular = function (json, options, blockOptions) {
     }
     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,
+            // the context is the class
+            contextVars: [],
             outputVars: outputVars,
         }), "}}");
     }
@@ -141,7 +143,12 @@ 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(new RegExp("".concat(cusArgs[0], "\\."), 'g'), '$event.'));
+                var eventName = cusArgs[0];
+                var regexp = new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' +
+                    eventName +
+                    '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g');
+                var replacer = '$1$event$2';
+                var finalValue = (0, remove_surrounding_block_1.removeSurroundingBlock)(useValue.replace(regexp, replacer));
                 str += " (".concat(event_1, ")=\"").concat(finalValue, "\" ");
             }
             else if (key === 'class') {
@@ -189,6 +196,7 @@ var componentToAngular = function (options) {
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
+        var _o = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _o[0], hasPropRef = _o[1];
         var childComponents = [];
         json.imports.forEach(function (_a) {
             var imports = _a.imports;
@@ -198,9 +206,12 @@ var componentToAngular = function (options) {
                 }
             });
         });
+        var _p = component.exports, localExports = _p === void 0 ? {} : _p;
+        var localExportVars = Object.keys(localExports)
+            .filter(function (key) { return localExports[key].usedInLocal; })
+            .map(function (key) { return "".concat(key, " = ").concat(key, ";"); });
         var metaOutputVars = ((_c = (_b = json.meta) === null || _b === void 0 ? void 0 : _b.useMetadata) === null || _c === void 0 ? void 0 : _c.outputs) || [];
         var contextVars = Object.keys(((_d = json === null || json === void 0 ? void 0 : json.context) === null || _d === void 0 ? void 0 : _d.get) || {});
-        var hasInjectable = Boolean(contextVars.length);
         var injectables = contextVars.map(function (variableName) {
             var _a, _b, _c, _d;
             var variableType = (_a = json === null || json === void 0 ? void 0 : json.context) === null || _a === void 0 ? void 0 : _a.get[variableName].name;
@@ -212,7 +223,13 @@ var componentToAngular = function (options) {
             }
             return "public ".concat(variableName, " : ").concat(variableType);
         });
+        var hasConstructor = Boolean(injectables.length || ((_e = component.hooks) === null || _e === void 0 ? void 0 : _e.onInit));
         var props = (0, get_props_1.getProps)(component);
+        // prevent jsx props from showing up as @Input
+        if (hasPropRef) {
+            props.delete(forwardProp);
+        }
+        props.delete('children');
         var outputVars = (0, lodash_1.uniq)(__spreadArray(__spreadArray([], metaOutputVars, true), (0, get_prop_functions_1.getPropFunctions)(component), true));
         // remove props for outputs
         outputVars.forEach(function (variableName) {
@@ -225,9 +242,13 @@ var componentToAngular = function (options) {
             }
             return "@Output() ".concat(variableName, " = new EventEmitter()");
         });
-        var hasOnInit = Boolean(((_e = component.hooks) === null || _e === void 0 ? void 0 : _e.onInit) || ((_f = component.hooks) === null || _f === void 0 ? void 0 : _f.onMount));
-        var refs = Array.from((0, get_refs_1.getRefs)(json));
-        (0, map_refs_1.mapRefs)(json, function (refName) { return "this.".concat(refName, ".nativeElement"); });
+        var hasOnMount = Boolean((_f = component.hooks) === null || _f === void 0 ? void 0 : _f.onMount);
+        var domRefs = (0, get_refs_1.getRefs)(json);
+        var jsRefs = Object.keys(json.refs).filter(function (ref) { return !domRefs.has(ref); });
+        (0, map_refs_1.mapRefs)(json, function (refName) {
+            var isDomRef = domRefs.has(refName);
+            return "this.".concat(isDomRef ? '' : '_').concat(refName).concat(isDomRef ? '.nativeElement' : '');
+        });
         if (options.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
@@ -258,22 +279,36 @@ var componentToAngular = function (options) {
                 });
             },
         });
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    @Component({\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    @Component({\n      selector: '", "',\n      template: \\`\n        ", "\n      \\`,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', refs.length ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', (0, render_imports_1.renderPreComponent)(json), (0, lodash_1.kebabCase)(json.name || 'my-component'), (0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), css.length
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    @Component({\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    @Component({\n      selector: '", "',\n      template: \\`\n        ", "\n      \\`,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', (0, render_imports_1.renderPreComponent)(json), (0, lodash_1.kebabCase)(json.name || 'my-component'), (0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), css.length
             ? "styles: [\n        `".concat((0, indent_1.indent)(css, 8), "`\n      ],")
-            : '', component.name, outputs.join('\n'), Array.from(props)
-            .filter(function (item) { return !item.startsWith('slot'); })
+            : '', component.name, localExportVars.join('\n'), Array.from(props)
+            .filter(function (item) { return !item.startsWith('slot') && item !== 'children'; })
             .map(function (item) { return "@Input() ".concat(item, ": any"); })
-            .join('\n'), refs
+            .join('\n'), outputs.join('\n'), Array.from(domRefs)
             .map(function (refName) { return "@ViewChild('".concat(refName, "') ").concat(refName, ": ElementRef"); })
-            .join('\n'), dataString, !hasInjectable ? '' : "constructor(\n".concat(injectables.join(',\n'), ") {}"), !hasOnInit
+            .join('\n'), dataString, jsRefs
+            .map(function (ref) {
+            var argument = component.refs[ref].argument;
+            var typeParameter = component.refs[ref].typeParameter;
+            return "private _".concat(ref).concat(typeParameter ? ": ".concat(typeParameter) : '').concat(argument
+                ? " = ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(argument, {
+                    replaceWith: 'this.',
+                    contextVars: contextVars,
+                    outputVars: outputVars,
+                }))
+                : '', ";");
+        })
+            .join('\n'), !hasConstructor
             ? ''
-            : "ngOnInit() {\n              ".concat(!((_h = component.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
+            : "constructor(\n".concat(injectables.join(',\n'), ") {\n            ").concat(!((_h = component.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
                 ? ''
-                : "\n                ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_j = component.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code, {
+                : "\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_j = component.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code, {
                     replaceWith: 'this.',
                     contextVars: contextVars,
                     outputVars: outputVars,
-                }), "\n                "), "\n              ").concat(!((_k = component.hooks) === null || _k === void 0 ? void 0 : _k.onMount)
+                }), "\n              "), "\n          }\n          "), !hasOnMount
+            ? ''
+            : "ngOnInit() {\n              \n              ".concat(!((_k = component.hooks) === null || _k === void 0 ? void 0 : _k.onMount)
                 ? ''
                 : "\n                ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_l = component.hooks.onMount) === null || _l === void 0 ? void 0 : _l.code, {
                     replaceWith: 'this.',