@builder.io/mitosis 0.0.56-6 → 0.0.56-9

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

@@ -8,11 +8,17 @@ 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 basicOutputs = require('./data/basic-outputs.raw');
 var contentSlotHtml = require('./data/blocks/content-slot-html.raw');
 var contentSlotJsx = require('./data/blocks/content-slot-jsx.raw');
 var slotJsx = require('./data/blocks/slot-jsx.raw');
 // const slotHtml = require('./data/blocks/slot-html.raw');
 describe('Angular', function () {
+    test('basic outputs', function () {
+        var component = (0, jsx_1.parseJsx)(basicOutputs);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
     test('multiple onUpdate', function () {
         var component = (0, jsx_1.parseJsx)(multipleOnUpdate);
         var output = (0, angular_1.componentToAngular)()({ component: component });

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

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

package/dist/src/__tests__/data/basic-outputs.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)({
+    outputs: ['onMessage', 'onEvent'],
+});
+function MyBasicOutputsComponent(props) {
+    var state = (0, mitosis_1.useState)({
+        name: 'PatrickJS',
+    });
+    (0, mitosis_1.onMount)(function () {
+        props.onMessage(state.name);
+        props.onEvent(props.message);
+    });
+    return <div></div>;
+}
+exports.default = MyBasicOutputsComponent;

package/dist/src/__tests__/data/blocks/classname-jsx.raw.d.ts

@@ -0,0 +1,6 @@
+declare type Props = {
+    [key: string]: string | JSX.Element;
+    slotTesting: JSX.Element;
+};
+export default function ClassNameCode(props: Props): JSX.Element;
+export {};

package/dist/src/__tests__/data/blocks/classname-jsx.raw.jsx

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function ClassNameCode(props) {
+    var state = (0, mitosis_1.useState)({
+        bindings: 'a binding',
+    });
+    return (<div>
+      {/*// @ts-ignore */}
+      <div className="no binding">Without Binding</div>
+      {/*// @ts-ignore */}
+      <div className={state.bindings}>With binding</div>
+    </div>);
+}
+exports.default = ClassNameCode;

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

@@ -1,12 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var content_slot_raw_1 = __importDefault(require("./content-slot.raw"));
 function SlotCode(props) {
-    return (<div>
-      <content_slot_raw_1.default slotTesting={<div>Hello</div>}/>
-    </div>);
+    return <div>{props.children}</div>;
 }
 exports.default = SlotCode;

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

@@ -18,6 +18,7 @@ var customCode = require('./data/blocks/custom-code.raw');
 var embed = require('./data/blocks/embed.raw');
 var image = require('./data/blocks/image.raw');
 var columns = require('./data/blocks/columns.raw');
+var show = require('./data/blocks/rootShow.raw');
 describe('Solid', function () {
     test('Basic', function () {
         var component = (0, jsx_1.parseJsx)(basic);
@@ -99,4 +100,9 @@ describe('Solid', function () {
         var output = (0, solid_1.componentToSolid)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('Show', function () {
+        var component = (0, jsx_1.parseJsx)(show);
+        var output = (0, solid_1.componentToSolid)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
 });

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

@@ -2,5 +2,10 @@ import { MitosisNode } from '../types/mitosis-node';
 import { BaseTranspilerOptions, Transpiler } from '../types/config';
 export interface ToAngularOptions extends BaseTranspilerOptions {
 }
-export declare const blockToAngular: (json: MitosisNode, options?: ToAngularOptions) => string;
+interface AngularBlockOptions {
+    contextVars?: string[];
+    outputVars?: string[];
+}
+export declare const blockToAngular: (json: MitosisNode, options?: ToAngularOptions, blockOptions?: AngularBlockOptions) => string;
 export declare const componentToAngular: (options?: ToAngularOptions) => Transpiler;
+export {};

package/dist/src/generators/angular.js

@@ -26,12 +26,12 @@ var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var indent_1 = require("../helpers/indent");
 var mappers = {
-    Fragment: function (json, options) {
+    Fragment: function (json, options, blockOptions) {
         return "<div>".concat(json.children
-            .map(function (item) { return (0, exports.blockToAngular)(item, options); })
+            .map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); })
             .join('\n'), "</div>");
     },
-    Slot: function (json, options) {
+    Slot: function (json, options, blockOptions) {
         return "<ng-content ".concat(Object.keys(json.bindings)
             .map(function (binding) {
             var _a;
@@ -44,11 +44,14 @@ var mappers = {
             .join('\n'), "></ng-content>");
     },
 };
-var blockToAngular = function (json, options) {
+var blockToAngular = function (json, options, blockOptions) {
     var _a;
     if (options === void 0) { options = {}; }
+    if (blockOptions === void 0) { blockOptions = {}; }
+    var contextVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.contextVars) || [];
+    var outputVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.outputVars) || [];
     if (mappers[json.name]) {
-        return mappers[json.name](json, options);
+        return mappers[json.name](json, options, blockOptions);
     }
     if ((0, is_children_1.default)(json)) {
         return "<ng-content></ng-content>";
@@ -61,21 +64,27 @@ var blockToAngular = function (json, options) {
         return "<ng-content select=\"[".concat(selector, "]\"></ng-content>");
     }
     if (json.bindings._text) {
-        return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._text), "}}");
+        return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._text, {
+            contextVars: contextVars,
+            outputVars: outputVars,
+        }), "}}");
     }
     var str = '';
     var needsToRenderSlots = [];
     if (json.name === 'For') {
-        str += "<ng-container *ngFor=\"let ".concat(json.properties._forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.each), "\">");
+        str += "<ng-container *ngFor=\"let ".concat(json.properties._forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.each, {
+            contextVars: contextVars,
+            outputVars: outputVars,
+        }), "\">");
         str += json.children
-            .map(function (item) { return (0, exports.blockToAngular)(item, options); })
+            .map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); })
             .join('\n');
         str += "</ng-container>";
     }
     else if (json.name === 'Show') {
-        str += "<ng-container *ngIf=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.when), "\">");
+        str += "<ng-container *ngIf=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.when, { contextVars: contextVars, outputVars: outputVars }), "\">");
         str += json.children
-            .map(function (item) { return (0, exports.blockToAngular)(item, options); })
+            .map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); })
             .join('\n');
         str += "</ng-container>";
     }
@@ -92,7 +101,12 @@ var blockToAngular = function (json, options) {
                 continue;
             }
             var value = json.properties[key];
-            str += " ".concat(key, "=\"").concat(value, "\" ");
+            if (key === 'className') {
+                str += " class=\"".concat(value, "\" ");
+            }
+            else {
+                str += " ".concat(key, "=\"").concat(value, "\" ");
+            }
         }
         for (var key in json.bindings) {
             if (key === '_spread') {
@@ -103,7 +117,10 @@ var blockToAngular = function (json, options) {
             }
             var value = json.bindings[key];
             // TODO: proper babel transform to replace. Util for this
-            var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value);
+            var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value, {
+                contextVars: contextVars,
+                outputVars: outputVars,
+            });
             if (key.startsWith('on')) {
                 var event_1 = key.replace('on', '').toLowerCase();
                 if (event_1 === 'change' &&
@@ -114,6 +131,9 @@ var blockToAngular = function (json, options) {
                 var finalValue = (0, remove_surrounding_block_1.removeSurroundingBlock)(useValue.replace(/event\./g, '$event.'));
                 str += " (".concat(event_1, ")=\"").concat(finalValue, "\" ");
             }
+            else if (key === 'className') {
+                str += " [class]=\"".concat(useValue, "\" ");
+            }
             else if (key === 'ref') {
                 str += " #".concat(useValue, " ");
             }
@@ -135,7 +155,7 @@ var blockToAngular = function (json, options) {
         }
         if (json.children) {
             str += json.children
-                .map(function (item) { return (0, exports.blockToAngular)(item, options); })
+                .map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); })
                 .join('\n');
         }
         str += "</".concat(json.name, ">");
@@ -146,15 +166,40 @@ exports.blockToAngular = blockToAngular;
 var componentToAngular = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         var component = _a.component;
         // Make a copy we can safely mutate, similar to babel's toolchain
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
+        var outputVars = ((_c = (_b = json.meta) === null || _b === void 0 ? void 0 : _b.useMetadata) === null || _c === void 0 ? void 0 : _c.outputs) || [];
+        var outputs = outputVars.map(function (variableName) {
+            var _a, _b;
+            if ((_a = options === null || options === void 0 ? void 0 : options.experimental) === null || _a === void 0 ? void 0 : _a.outputs) {
+                return (_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.outputs(json, variableName);
+            }
+            return "@Output() ".concat(variableName, " = new EventEmitter<any>()");
+        });
+        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;
+            if ((_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.injectables) {
+                return (_c = options === null || options === void 0 ? void 0 : options.experimental) === null || _c === void 0 ? void 0 : _c.injectables(variableName, variableType);
+            }
+            if ((_d = options === null || options === void 0 ? void 0 : options.experimental) === null || _d === void 0 ? void 0 : _d.inject) {
+                return "@Inject(forwardRef(() => ".concat(variableType, ")) public ").concat(variableName, ": ").concat(variableType);
+            }
+            return "public ".concat(variableName, " : ").concat(variableType);
+        });
         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));
+        // remove props for outputs
+        outputVars.forEach(function (variableName) {
+            props.delete(variableName);
+        });
+        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"); });
         if (options.plugins) {
@@ -164,7 +209,9 @@ var componentToAngular = function (options) {
         if (options.prettier !== false) {
             css = tryFormat(css, 'css');
         }
-        var template = json.children.map(function (item) { return (0, exports.blockToAngular)(item); }).join('\n');
+        var template = json.children
+            .map(function (item) { return (0, exports.blockToAngular)(item, options, { contextVars: contextVars, outputVars: outputVars }); })
+            .join('\n');
         if (options.prettier !== false) {
             template = tryFormat(template, 'html');
         }
@@ -172,38 +219,50 @@ var componentToAngular = function (options) {
         var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             format: 'class',
             valueMapper: function (code) {
-                return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, { replaceWith: 'this.' });
+                return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+                    replaceWith: 'this.',
+                    contextVars: contextVars,
+                    outputVars: outputVars,
+                });
             },
         });
-        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    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  "])), 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    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
             ? "styles: [\n        `".concat((0, indent_1.indent)(css, 8), "`\n      ],")
-            : '', component.name, Array.from(props)
+            : '', component.name, outputs.join('\n'), Array.from(props)
             .filter(function (item) { return !item.startsWith('slot'); })
             .map(function (item) { return "@Input() ".concat(item, ": any"); })
             .join('\n'), refs
             .map(function (refName) { return "@ViewChild('".concat(refName, "') ").concat(refName, ": ElementRef"); })
-            .join('\n'), !hasOnInit
+            .join('\n'), dataString, !hasInjectable ? '' : "constructor(\n".concat(injectables.join(',\n'), ") {}"), !hasOnInit
             ? ''
-            : "ngOnInit() {\n              ".concat(!((_d = component.hooks) === null || _d === void 0 ? void 0 : _d.onInit)
+            : "ngOnInit() {\n              ".concat(!((_h = component.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
                 ? ''
-                : "\n                ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_e = component.hooks.onInit) === null || _e === void 0 ? void 0 : _e.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.',
-                }), "\n                "), "\n              ").concat(!((_f = component.hooks) === null || _f === void 0 ? void 0 : _f.onMount)
+                    contextVars: contextVars,
+                    outputVars: outputVars,
+                }), "\n                "), "\n              ").concat(!((_k = component.hooks) === null || _k === void 0 ? void 0 : _k.onMount)
                 ? ''
-                : "\n                ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_g = component.hooks.onMount) === null || _g === void 0 ? void 0 : _g.code, {
+                : "\n                ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_l = component.hooks.onMount) === null || _l === void 0 ? void 0 : _l.code, {
                     replaceWith: 'this.',
-                }), "\n                "), "\n            }"), !((_h = component.hooks.onUpdate) === null || _h === void 0 ? void 0 : _h.length)
+                    contextVars: contextVars,
+                    outputVars: outputVars,
+                }), "\n                "), "\n            }"), !((_m = component.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.length)
             ? ''
             : "ngAfterContentChecked() {\n              ".concat(component.hooks.onUpdate.reduce(function (code, hook) {
                 code += (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.code, {
                     replaceWith: 'this.',
+                    contextVars: contextVars,
+                    outputVars: outputVars,
                 });
                 return code + '\n';
             }, ''), "\n            }"), !component.hooks.onUnMount
             ? ''
             : "ngOnDestroy() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onUnMount.code, {
                 replaceWith: 'this.',
-            }), "\n            }"), dataString);
+                contextVars: contextVars,
+                outputVars: outputVars,
+            }), "\n            }"));
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
         }

package/dist/src/generators/solid.js

@@ -127,6 +127,9 @@ var blockToSolid = function (json, options) {
     else {
         str += "<".concat(json.name, " ");
     }
+    if (json.name === 'Show' && json.meta.else) {
+        str += "fallback={".concat(blockToSolid(json.meta.else, options), "}");
+    }
     var classString = collectClassString(json);
     if (classString) {
         str += " class=".concat(classString, " ");
@@ -238,9 +241,15 @@ var componentToSolid = function (options) {
         var componentHasContext = (0, context_1.hasContext)(json);
         var hasShowComponent = componentsUsed.has('Show');
         var hasForComponent = componentsUsed.has('For');
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "])), !(hasShowComponent || hasForComponent)
-            ? ''
-            : "import { \n          ".concat(!componentHasContext ? '' : 'useContext, ', "\n          ").concat(!hasShowComponent ? '' : 'Show, ', "\n          ").concat(!hasForComponent ? '' : 'For, ', "\n          ").concat(!((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : 'onMount, ', "\n         } from 'solid-js';"), !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", !hasState ? '' : "import { createMutable } from 'solid-js/store';", !componentHasStyles
+        var solidJSImports = [
+            componentHasContext ? 'useContext' : undefined,
+            hasShowComponent ? 'Show' : undefined,
+            hasForComponent ? 'For' : undefined,
+            ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? 'onMount' : undefined,
+        ].filter(Boolean);
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "])), solidJSImports.length > 0
+            ? "import { \n          ".concat(solidJSImports.map(function (item) { return item; }).join(', '), "\n         } from 'solid-js';")
+            : '', !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", !hasState ? '' : "import { createMutable } from 'solid-js/store';", !componentHasStyles
             ? ''
             : "import { css } from \"solid-styled-components\";", (0, render_imports_1.renderPreComponent)(json), json.name, !hasState ? '' : "const state = createMutable(".concat(stateString, ");"), getRefsString(json), getContextString(json, options), !((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code)
             ? ''

package/dist/src/helpers/render-imports.js

@@ -21,22 +21,27 @@ var getDefaultImport = function (_a) {
     }
     return null;
 };
+var getFileExtensionForTarget = function (target) {
+    switch (target) {
+        case 'svelte':
+            return '.svelte';
+        case 'solid':
+            return '.jsx';
+        // these `.lite` extensions are handled in the `transpile` step of the CLI.
+        // TO-DO: consolidate file-extension renaming to one place.
+        default:
+            return '.lite';
+    }
+};
 var transformImportPath = function (theImport, target) {
     // We need to drop the `.lite` from context files, because the context generator does so as well.
     if (theImport.path.endsWith('.context.lite')) {
         return theImport.path.replace('.lite', '');
     }
-    switch (target) {
-        case 'svelte':
-            if (theImport.path.endsWith('.lite'))
-                // all svelte components have `.svelte` extension
-                return theImport.path.replace('.lite', '.svelte');
-            else {
-                return theImport.path;
-            }
-        default:
-            return theImport.path;
+    if (theImport.path.endsWith('.lite')) {
+        return theImport.path.replace('.lite', getFileExtensionForTarget(target));
     }
+    return theImport.path;
 };
 var renderImport = function (_a) {
     var theImport = _a.theImport, target = _a.target;

package/dist/src/helpers/replace-idenifiers.js

@@ -7,8 +7,9 @@ var replaceIdentifiers = function (code, from, to) {
     return (0, babel_transform_1.babelTransformExpression)(code, {
         Identifier: function (path) {
             if (
-            // This is not a property access - like `foo` in `this.foo`
-            !(core_1.types.isMemberExpression(path.parent) &&
+            // This is not an (optional) property access - like `foo` in `this.foo` or `this?.foo`
+            !((core_1.types.isMemberExpression(path.parent) ||
+                core_1.types.isOptionalMemberExpression(path.parent)) &&
                 path.parent.property === path.node) &&
                 // This is no the function name - like `foo` in `function foo() {}`
                 !(core_1.types.isFunctionDeclaration(path.parent) &&

package/dist/src/helpers/strip-state-and-props-refs.d.ts

@@ -2,6 +2,8 @@ export declare type StripStateAndPropsRefsOptions = {
     replaceWith?: string | ((name: string) => string);
     includeProps?: boolean;
     includeState?: boolean;
+    contextVars?: string[];
+    outputVars?: string[];
 };
 /**
  * Remove state. and props. from expressions, e.g.

package/dist/src/helpers/strip-state-and-props-refs.js

@@ -13,6 +13,23 @@ var stripStateAndPropsRefs = function (code, options) {
     if (options === void 0) { options = {}; }
     var newCode = code || '';
     var replacer = options.replaceWith || '';
+    var contextVars = (options === null || options === void 0 ? void 0 : options.contextVars) || [];
+    var outputVars = (options === null || options === void 0 ? void 0 : options.outputVars) || [];
+    if (contextVars.length) {
+        contextVars.forEach(function (_var) {
+            newCode = newCode.replace(
+            // determine expression edge cases
+            new RegExp('( |;|(\\())' + _var, 'g'), '$1this.' + _var);
+        });
+    }
+    if (outputVars.length) {
+        outputVars.forEach(function (_var) {
+            // determine expression edge cases onMessage( to this.onMessage.emit(
+            var regexp = '( |;|\\()(props\\.?)' + _var + '\\(';
+            var replacer = '$1this.' + _var + '.emit(';
+            newCode = newCode.replace(new RegExp(regexp, 'g'), replacer);
+        });
+    }
     if (options.includeProps !== false) {
         if (typeof replacer === 'string') {
             newCode = newCode.replace(/props\./g, replacer);

package/dist/src/types/config.d.ts

@@ -17,6 +17,9 @@ export interface TranspilerArgs {
 }
 export declare type Transpiler = (args: TranspilerArgs) => string;
 export interface BaseTranspilerOptions {
+    experimental?: {
+        [key: string]: any;
+    };
     prettier?: boolean;
     plugins?: Plugin[];
 }