@builder.io/mitosis 0.0.56-1 → 0.0.56-101

package/dist/src/generators/qwik/component-generator.js

@@ -0,0 +1,311 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToQwik = void 0;
+var babel_transform_1 = require("../../helpers/babel-transform");
+var fast_clone_1 = require("../../helpers/fast-clone");
+var collect_css_1 = require("../../helpers/styles/collect-css");
+var state_1 = require("../../helpers/state");
+var add_prevent_default_1 = require("./add-prevent-default");
+var convert_method_to_function_1 = require("./convert-method-to-function");
+var jsx_1 = require("./jsx");
+var src_generator_1 = require("./src-generator");
+var plugins_1 = require("../../modules/plugins");
+Error.stackTraceLimit = 9999;
+// TODO(misko): styles are not processed.
+var DEBUG = false;
+var componentToQwik = function (userOptions) {
+    if (userOptions === void 0) { userOptions = {}; }
+    return function (_a) {
+        var _b, _c, _d;
+        var _component = _a.component, path = _a.path;
+        // Make a copy we can safely mutate, similar to babel's toolchain
+        var component = (0, fast_clone_1.fastClone)(_component);
+        if (userOptions.plugins) {
+            component = (0, plugins_1.runPreJsonPlugins)(component, userOptions.plugins);
+        }
+        (0, add_prevent_default_1.addPreventDefault)(component);
+        if (userOptions.plugins) {
+            component = (0, plugins_1.runPostJsonPlugins)(component, userOptions.plugins);
+        }
+        var file = new src_generator_1.File(component.name + '.js', {
+            isPretty: true,
+            isJSX: true,
+            isTypeScript: false,
+            isModule: true,
+            isBuilder: false,
+        }, '@builder.io/qwik', '');
+        try {
+            emitImports(file, component);
+            emitTypes(file, component);
+            var metadata = component.meta.useMetadata || {};
+            var isLightComponent = ((_c = (_b = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.isLight) || false;
+            var imports_1 = (_d = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _d === void 0 ? void 0 : _d.imports;
+            imports_1 && Object.keys(imports_1).forEach(function (key) { return file.import(imports_1[key], key); });
+            var state_2 = emitStateMethodsAndRewriteBindings(file, component, metadata);
+            var hasState_1 = (0, state_1.checkHasState)(component);
+            var css_1 = null;
+            var componentBody = (0, src_generator_1.arrowFnBlock)(['props'], [
+                function () {
+                    css_1 = emitUseStyles(file, component);
+                    emitUseContext(file, component);
+                    emitUseRef(file, component);
+                    hasState_1 && emitUseStore(file, state_2);
+                    emitUseContextProvider(file, component);
+                    emitUseMount(file, component);
+                    emitUseWatch(file, component);
+                    emitUseCleanup(file, component);
+                    emitTagNameHack(file, component);
+                    emitJSX(file, component);
+                },
+            ], [component.propsTypeRef || 'any']);
+            file.src.const(component.name, isLightComponent
+                ? componentBody
+                : (0, src_generator_1.invoke)(file.import(file.qwikModule, 'component$'), [componentBody]), true, true);
+            file.exportDefault(component.name);
+            emitStyles(file, css_1);
+            DEBUG && file.exportConst('COMPONENT', JSON.stringify(component, null, 2));
+            return '// GENERATED BY MITOSIS\n\n' + file.toString();
+        }
+        catch (e) {
+            console.error(e);
+            return e.stack || String(e);
+        }
+    };
+};
+exports.componentToQwik = componentToQwik;
+function emitTagNameHack(file, component) {
+    var _a;
+    var elementTag = (_a = component.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.elementTag;
+    if (elementTag) {
+        file.src.emit(elementTag, '=', (0, convert_method_to_function_1.convertMethodToFunction)(elementTag, stateToMethodOrGetter(component.state), getLexicalScopeVars(component)), ';');
+    }
+}
+function emitUseMount(file, component) {
+    if (component.hooks.onMount) {
+        // This is called useMount, but in practice it is used as
+        // useClientEffect. Not sure if this is correct, but for now.
+        var code = component.hooks.onMount.code;
+        file.src.emit(file.import(file.qwikModule, 'useClientEffect$').localName, '(()=>{', code, '});');
+    }
+}
+function emitUseWatch(file, component) {
+    if (component.hooks.onUpdate) {
+        component.hooks.onUpdate.forEach(function (onUpdate) {
+            file.src.emit(file.import(file.qwikModule, 'useWatch$').localName, '(({track})=>{');
+            emitTrackExpressions(file.src, onUpdate.deps);
+            file.src.emit(convertTypeScriptToJS(onUpdate.code));
+            file.src.emit('});');
+        });
+    }
+}
+function emitTrackExpressions(src, deps) {
+    if (deps && deps.startsWith('[') && deps.endsWith(']')) {
+        var dependencies = deps.substring(1, deps.length - 1).split(',');
+        dependencies.forEach(function (dep) {
+            var lastDotIdx = dep.lastIndexOf('.');
+            if (lastDotIdx > 0) {
+                var objExp = dep.substring(0, lastDotIdx).replace(/\?$/, '');
+                var objProp = dep.substring(lastDotIdx + 1);
+                objExp && src.emit(objExp, '&&track(', objExp, ',"', objProp, '");');
+            }
+        });
+    }
+}
+function emitUseCleanup(file, component) {
+    if (component.hooks.onUnMount) {
+        var code = component.hooks.onUnMount.code;
+        file.src.emit(file.import(file.qwikModule, 'useCleanup$').localName, '(()=>{', code, '});');
+    }
+}
+function emitJSX(file, component) {
+    var directives = new Map();
+    var handlers = new Map();
+    var styles = new Map();
+    var parentSymbolBindings = {};
+    file.src.emit('return ', (0, jsx_1.renderJSXNodes)(file, directives, handlers, component.children, styles, parentSymbolBindings));
+}
+function emitUseContextProvider(file, component) {
+    Object.keys(component.context.set).forEach(function (ctxKey) {
+        var context = component.context.set[ctxKey];
+        file.src.emit(file.import(file.qwikModule, 'useContextProvider').localName, '(', context.name, ',', file.import(file.qwikModule, 'useStore').localName, '({');
+        context.value &&
+            Object.keys(context.value).forEach(function (prop) {
+                var propValue = context.value[prop];
+                file.src.emit(prop, ':');
+                if (isGetter(propValue)) {
+                    file.src.emit('(()=>{', extractGetterBody(propValue), '})(),');
+                }
+                else if (typeof propValue == 'function') {
+                    throw new Error('Qwik: Functions are not supported in context');
+                }
+                else {
+                    file.src.emit(JSON.stringify(propValue));
+                }
+            });
+        file.src.emit('})', ');');
+    });
+}
+function emitUseContext(file, component) {
+    Object.keys(component.context.get).forEach(function (ctxKey) {
+        var context = component.context.get[ctxKey];
+        file.src.emit('const ', ctxKey, '=', file.import(file.qwikModule, 'useContext').localName, '(', context.name, ');');
+    });
+}
+function emitUseRef(file, component) {
+    Object.keys(component.refs).forEach(function (refKey) {
+        file.src.emit("const ", refKey, '=', file.import(file.qwikModule, 'useRef').localName, '();');
+    });
+}
+function emitUseStyles(file, component) {
+    var css = (0, collect_css_1.collectCss)(component, { prefix: component.name });
+    if (css) {
+        file.src.emit(file.import(file.qwikModule, 'useStylesScoped$').localName, '(STYLES);');
+    }
+    return css;
+}
+function emitStyles(file, css) {
+    if (css) {
+        file.exportConst('STYLES', '`' + css.replace(/`/g, '\\`') + '`');
+    }
+}
+/**
+ * @param file
+ * @param stateInit
+ */
+function emitUseStore(file, stateInit) {
+    var state = stateInit[0];
+    var hasState = state && Object.keys(state).length > 0;
+    if (hasState) {
+        file.src.emit('const state=', file.import(file.qwikModule, 'useStore').localName, '(');
+        file.src.emit(JSON.stringify(state));
+        file.src.emit(');');
+    }
+    else {
+        // TODO hack for now so that `state` variable is defined, even though it is never read.
+        file.src.emit('const state={};');
+    }
+}
+function emitTypes(file, component) {
+    var _a;
+    if (file.options.isTypeScript) {
+        (_a = component.types) === null || _a === void 0 ? void 0 : _a.forEach(function (t) { return file.src.emit(t, '\n'); });
+    }
+}
+function emitStateMethodsAndRewriteBindings(file, component, metadata) {
+    var _a;
+    var lexicalArgs = getLexicalScopeVars(component);
+    var state = emitStateMethods(file, component.state, lexicalArgs);
+    var methodMap = stateToMethodOrGetter(component.state);
+    rewriteCodeExpr(component, methodMap, lexicalArgs, (_a = metadata.qwik) === null || _a === void 0 ? void 0 : _a.replace);
+    return state;
+}
+function rewriteCodeExpr(obj, methodMap, lexicalArgs, replace) {
+    if (obj && typeof obj == 'object') {
+        if (Array.isArray(obj)) {
+            obj.forEach(function (item) { return rewriteCodeExpr(item, methodMap, lexicalArgs, replace); });
+        }
+        else {
+            Object.keys(obj).forEach(function (key) {
+                var value = obj[key];
+                if (typeof value == 'string') {
+                    if (value.startsWith(CODE_PREFIX) || key == 'code') {
+                        var code_1 = (0, convert_method_to_function_1.convertMethodToFunction)(value, methodMap, lexicalArgs);
+                        replace &&
+                            Object.keys(replace).forEach(function (key) { return (code_1 = code_1.replace(key, replace[key])); });
+                        obj[key] = code_1;
+                    }
+                }
+                rewriteCodeExpr(value, methodMap, lexicalArgs, replace);
+            });
+        }
+    }
+}
+function getLexicalScopeVars(component) {
+    return __spreadArray(__spreadArray(['props', 'state'], Object.keys(component.refs), true), Object.keys(component.context.get), true);
+}
+function emitImports(file, component) {
+    var _a;
+    // <SELF> is used for self-referencing within the file.
+    file.import('<SELF>', component.name);
+    (_a = component.imports) === null || _a === void 0 ? void 0 : _a.forEach(function (i) {
+        Object.keys(i.imports).forEach(function (key) {
+            var keyValue = i.imports[key];
+            file.import(i.path.replace('.lite', '').replace('.tsx', ''), keyValue, key);
+        });
+    });
+}
+var CODE_PREFIX = '@builder.io/mitosis/';
+var FUNCTION = CODE_PREFIX + 'function:';
+var METHOD = CODE_PREFIX + 'method:';
+var GETTER = CODE_PREFIX + 'method:get ';
+function emitStateMethods(file, componentState, lexicalArgs) {
+    var stateValues = {};
+    var stateInit = [stateValues];
+    var methodMap = stateToMethodOrGetter(componentState);
+    Object.keys(componentState).forEach(function (key) {
+        var _a;
+        var code = (_a = componentState[key]) === null || _a === void 0 ? void 0 : _a.code;
+        if (isCode(code)) {
+            var codeIisGetter = isGetter(code);
+            var prefixIdx = code.indexOf(':') + 1;
+            if (codeIisGetter) {
+                prefixIdx += 'get '.length;
+            }
+            else if (isFunction(code)) {
+                prefixIdx += 'function '.length;
+            }
+            code = code.substring(prefixIdx);
+            code = (0, convert_method_to_function_1.convertMethodToFunction)(code, methodMap, lexicalArgs).replace('(', "(".concat(lexicalArgs.join(','), ","));
+            var functionName = code.split(/\(/)[0];
+            if (codeIisGetter) {
+                stateInit.push("state.".concat(key, "=").concat(functionName, "(").concat(lexicalArgs.join(','), ")"));
+            }
+            if (!file.options.isTypeScript) {
+                // Erase type information
+                code = convertTypeScriptToJS(code);
+            }
+            file.exportConst(functionName, 'function ' + code, true);
+        }
+        else {
+            stateValues[key] = code;
+        }
+    });
+    return stateInit;
+}
+function convertTypeScriptToJS(code) {
+    return (0, babel_transform_1.babelTransformExpression)(code, {});
+}
+function isGetter(code) {
+    return typeof code === 'string' && code.startsWith(GETTER);
+}
+function isCode(code) {
+    return typeof code === 'string' && code.startsWith(CODE_PREFIX);
+}
+function isFunction(code) {
+    return typeof code === 'string' && code.startsWith(FUNCTION);
+}
+function extractGetterBody(code) {
+    var start = code.indexOf('{');
+    var end = code.lastIndexOf('}');
+    return code.substring(start + 1, end).trim();
+}
+function stateToMethodOrGetter(state) {
+    var methodMap = {};
+    Object.keys(state).forEach(function (key) {
+        var _a;
+        var code = (_a = state[key]) === null || _a === void 0 ? void 0 : _a.code;
+        if (typeof code == 'string' && code.startsWith(METHOD)) {
+            methodMap[key] = code.startsWith(GETTER) ? 'getter' : 'method';
+        }
+    });
+    return methodMap;
+}

package/dist/src/generators/qwik/component.d.ts

@@ -16,6 +16,7 @@ export declare function createFileSet(options?: QwikOptions): FileSet;
 export declare function addComponent(fileSet: FileSet, component: MitosisComponent, opts?: {
     isRoot?: boolean;
     shareStyles?: boolean;
+    hostProps?: Record<string, string>;
 }): void;
 export declare function renderUseLexicalScope(file: File): (this: SrcBuilder) => SrcBuilder;
 export declare function addCommonStyles(fileSet: FileSet): void;

package/dist/src/generators/qwik/component.js

@@ -21,6 +21,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addCommonStyles = exports.renderUseLexicalScope = exports.addComponent = exports.createFileSet = void 0;
+var create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
 var compile_away_builder_components_1 = require("../../plugins/compile-away-builder-components");
 var handlers_1 = require("./handlers");
 var jsx_1 = require("./jsx");
@@ -35,6 +36,7 @@ function createFileSet(options) {
         isModule: opts.output != 'cjs',
         isTypeScript: opts.output == 'ts',
         isJSX: opts.jsx,
+        isBuilder: true,
     };
     var fileSet = {
         high: new src_generator_1.File('high.' + extension, srcOptions, opts.qwikLib, opts.qrlPrefix),
@@ -53,8 +55,11 @@ function getCommonStyles(fileSet) {
 }
 function addComponent(fileSet, component, opts) {
     if (opts === void 0) { opts = {}; }
-    var _opts = __assign({ isRoot: false, shareStyles: false }, opts);
-    (0, compile_away_builder_components_1.compileAwayBuilderComponentsFromTree)(component, __assign(__assign({}, compile_away_builder_components_1.components), { Image: undefined, CoreButton: undefined }));
+    var _opts = __assign({ isRoot: false, shareStyles: false, hostProps: null }, opts);
+    (0, compile_away_builder_components_1.compileAwayBuilderComponentsFromTree)(component, __assign(__assign({}, compile_away_builder_components_1.components), { 
+        // A set of components that should not be compiled away because they are implemented as runtime components.
+        Image: undefined, CoreButton: undefined }));
+    addBuilderBlockClass(component.children);
     var componentName = component.name;
     var handlers = (0, handlers_1.renderHandlers)(fileSet.high, componentName, component.children);
     // If the component has no handlers, than it is probably static
@@ -63,48 +68,60 @@ function addComponent(fileSet, component, opts) {
     var isStatic = Array.from(handlers.keys()).reduce(function (p, v) { return p && v.indexOf('state') == -1; }, true);
     var onRenderFile = isStatic ? fileSet.low : fileSet.med;
     var componentFile = fileSet.med;
-    var styles = _opts.shareStyles
-        ? getCommonStyles(fileSet).styles
-        : new Map();
+    var styles = _opts.shareStyles ? getCommonStyles(fileSet).styles : new Map();
     (0, styles_1.collectStyles)(component.children, styles);
     var useStyles = function () { return null; };
-    if (_opts.shareStyles) {
-        if (_opts.isRoot) {
-            var symbolName = componentName + '_styles';
-            getCommonStyles(fileSet).symbolName = symbolName;
-            useStyles = generateStyles(componentFile, fileSet.low, symbolName, false);
+    if (styles.size) {
+        if (_opts.shareStyles) {
+            if (_opts.isRoot) {
+                var symbolName = componentName + '_styles';
+                getCommonStyles(fileSet).symbolName = symbolName;
+                useStyles = generateStyles(onRenderFile, fileSet.low, symbolName, false);
+            }
         }
-    }
-    else {
-        if (styles.size) {
+        else {
             var symbolName = componentName + '_styles';
             onRenderFile.exportConst(symbolName, (0, styles_1.renderStyles)(styles));
-            useStyles = generateStyles(componentFile, onRenderFile, symbolName, true);
+            useStyles = generateStyles(onRenderFile, onRenderFile, symbolName, true);
         }
     }
-    addComponentOnMount(componentFile, onRenderFile, componentName, component, useStyles);
-    componentFile.exportConst(componentName, (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'componentQrl'), [generateQrl(componentFile, componentName + '_onMount')], ['any', 'any']));
     var directives = new Map();
-    onRenderFile.exportConst(componentName + '_onRender', (0, src_generator_1.arrowFnBlock)([], [
-        renderUseLexicalScope(onRenderFile),
-        function () {
-            return this.emit('return ', (0, jsx_1.renderJSXNodes)(onRenderFile, directives, handlers, component.children, styles, {}), ';');
-        },
-    ]));
+    var rootChildren = component.children;
+    if (_opts.hostProps) {
+        rootChildren = [
+            (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'Host',
+                properties: _opts.hostProps,
+                children: component.children,
+            }),
+        ];
+    }
+    addComponentOnMount(onRenderFile, function () {
+        return this.emit('return ', (0, jsx_1.renderJSXNodes)(onRenderFile, directives, handlers, rootChildren, styles, {}), ';');
+    }, componentName, component, useStyles);
+    componentFile.exportConst(componentName, (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'componentQrl'), [generateQrl(componentFile, onRenderFile, componentName + '_onMount')], ['any', 'any']));
     directives.forEach(function (code, name) {
         fileSet.med.import(fileSet.med.qwikModule, 'h');
         fileSet.med.exportConst(name, code, true);
     });
 }
 exports.addComponent = addComponent;
-function generateStyles(componentFile, styleFile, symbol, scoped) {
+function generateStyles(fromFile, dstFile, symbol, scoped) {
     return function () {
-        this.emit((0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, scoped ? 'withScopedStylesQrl' : 'useStylesQrl'), [generateQrl(styleFile, symbol)]), ';');
+        this.emit((0, src_generator_1.invoke)(fromFile.import(fromFile.qwikModule, scoped ? 'withScopedStylesQrl' : 'useStylesQrl'), [generateQrl(fromFile, dstFile, symbol)]), ';');
     };
 }
+function addBuilderBlockClass(children) {
+    children.forEach(function (child) {
+        var props = child.properties;
+        if (props['builder-id']) {
+            props.class = (props.class ? props.class + ' ' : '') + 'builder-block';
+        }
+    });
+}
 function renderUseLexicalScope(file) {
     return function () {
-        return this.emit('const state=', file.import(file.qwikModule, 'useLexicalScope').name, '()[0]');
+        return this.emit('const state=', file.import(file.qwikModule, 'useLexicalScope').localName, '()[0]');
     };
 }
 exports.renderUseLexicalScope = renderUseLexicalScope;
@@ -116,32 +133,47 @@ function addCommonStyles(fileSet) {
     }
 }
 exports.addCommonStyles = addCommonStyles;
-function addComponentOnMount(componentFile, onRenderFile, componentName, component, useStyles) {
+function addComponentOnMount(componentFile, onRenderEmit, componentName, component, useStyles) {
     var inputInitializer = [];
     if (component.inputs) {
         component.inputs.forEach(function (input) {
             input.defaultValue !== undefined &&
-                inputInitializer.push('if(state.', input.name, '===undefined)state.', input.name, '=', JSON.stringify(input.defaultValue), ';');
+                inputInitializer.push('if(!state.hasOwnProperty("', input.name, '"))state.', input.name, '=', JSON.stringify(input.defaultValue), ';');
         });
     }
     componentFile.exportConst(componentName + '_onMount', function () {
         var _this = this;
-        this.emit((0, src_generator_1.arrowFnValue)(['state'], function () {
+        this.emit((0, src_generator_1.arrowFnValue)(['props'], function () {
             var _a;
-            return _this.emit.apply(_this, __spreadArray(__spreadArray(['{'], inputInitializer, false), ['typeof __STATE__==="object"&&Object.assign(state,__STATE__[state.serverStateId]);',
-                (0, src_generator_1.iif)((_a = component.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code),
-                ';',
+            return _this.emit.apply(_this, __spreadArray(__spreadArray(['{',
+                'const state=',
+                componentFile.import(componentFile.qwikModule, 'useStore').localName,
+                '(()=>{',
+                'const state = Object.assign({},props,typeof __STATE__==="object"?__STATE__[props.serverStateId]:undefined);'], inputInitializer, false), [inlineCode((_a = component.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code),
+                'return state;',
+                '});',
                 useStyles,
-                'return ',
-                generateQrl(onRenderFile, componentName + '_onRender', ['state']),
+                onRenderEmit,
                 ';}'], false));
         }));
     });
 }
-function generateQrl(componentFile, componentName, capture) {
+function inlineCode(code) {
+    return function () {
+        if (code) {
+            // HACK: remove the return value as it is not the state we are creating.
+            code = code
+                .trim()
+                .replace(/return main\(\);?$/, '')
+                .trim();
+            this.emit(code, ';');
+        }
+    };
+}
+function generateQrl(fromFile, dstFile, componentName, capture) {
     if (capture === void 0) { capture = []; }
-    return (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'qrl'), [
-        componentFile.toQrlChunk(),
+    return (0, src_generator_1.invoke)(fromFile.import(fromFile.qwikModule, 'qrl'), [
+        dstFile.toQrlChunk(),
         (0, src_generator_1.quote)(componentName),
         "[".concat(capture.join(','), "]"),
     ]);

package/dist/src/generators/qwik/convert-method-to-function.d.ts

@@ -0,0 +1 @@
+export declare function convertMethodToFunction(code: string, properties: Record<string, 'method' | 'getter'>, lexicalArgs: string[]): string;

package/dist/src/generators/qwik/convert-method-to-function.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertMethodToFunction = void 0;
+function convertMethodToFunction(code, properties, lexicalArgs) {
+    var out = [];
+    var idx = 0;
+    var lastIdx = idx;
+    var end = code.length;
+    var mode = "code" /* Mode.code */;
+    var braceDepth = 0;
+    var stringEndBraceDepth = -1;
+    var stringEndBraceDepthQueue = [];
+    var lastCh = null;
+    while (idx < end) {
+        var ch = code.charCodeAt(idx++);
+        // console.log(mode, code[idx - 1]);
+        switch (mode) {
+            case "code" /* Mode.code */:
+                if (ch === QUOTE_DOUBLE) {
+                    mode = "stringDouble" /* Mode.stringDouble */;
+                }
+                else if (ch === QUOTE_SINGLE) {
+                    mode = "stringSingle" /* Mode.stringSingle */;
+                }
+                else if (ch === QUOTE_BACK_TICK) {
+                    mode = "stringTemplate" /* Mode.stringTemplate */;
+                }
+                else if (ch === OPEN_BRACE) {
+                    braceDepth++;
+                }
+                else if (lastCh == FORWARD_SLASH && ch == FORWARD_SLASH) {
+                    mode = "commentSingleline" /* Mode.commentSingleline */;
+                }
+                else if (lastCh == FORWARD_SLASH && ch == STAR) {
+                    mode = "commentMultiline" /* Mode.commentMultiline */;
+                }
+                else if (ch === CLOSE_BRACE) {
+                    braceDepth--;
+                    if (braceDepth === stringEndBraceDepth) {
+                        stringEndBraceDepth = stringEndBraceDepthQueue.pop();
+                        mode = "stringTemplate" /* Mode.stringTemplate */;
+                    }
+                }
+                else if (isWord(ch, code, idx, 'this') || isWord(ch, code, idx, 'state')) {
+                    idx--;
+                    flush();
+                    consumeIdent();
+                    if (code.charCodeAt(idx) == DOT) {
+                        idx++;
+                        var propEndIdx = findIdentEnd();
+                        var identifier = code.substring(idx, propEndIdx);
+                        var propType = properties[identifier];
+                        if (propType) {
+                            var isGetter = code.charCodeAt(propEndIdx) !== OPEN_PAREN;
+                            lastIdx = idx = propEndIdx + (isGetter ? 0 : 1);
+                            if (isGetter) {
+                                if (propType === 'method') {
+                                    out.push(identifier, ".bind(null,".concat(lexicalArgs.join(','), ")"));
+                                }
+                                else {
+                                    out.push(identifier, "(".concat(lexicalArgs.join(','), ")"));
+                                }
+                            }
+                            else {
+                                out.push(identifier, "(".concat(lexicalArgs.join(','), ","));
+                            }
+                        }
+                        else {
+                            flush();
+                        }
+                    }
+                }
+                break;
+            case "commentSingleline" /* Mode.commentSingleline */:
+                if (ch == EOL)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "commentMultiline" /* Mode.commentMultiline */:
+                if (lastCh == STAR && ch == FORWARD_SLASH)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "stringSingle" /* Mode.stringSingle */:
+                if (lastCh !== BACKSLASH && ch == QUOTE_SINGLE)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "stringDouble" /* Mode.stringDouble */:
+                if (lastCh !== BACKSLASH && ch == QUOTE_DOUBLE)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "stringTemplate" /* Mode.stringTemplate */:
+                if (lastCh !== BACKSLASH && ch == QUOTE_BACK_TICK) {
+                    mode = "code" /* Mode.code */;
+                }
+                else if (lastCh === DOLLAR && ch == OPEN_BRACE) {
+                    mode = "code" /* Mode.code */;
+                    stringEndBraceDepthQueue.push(stringEndBraceDepth);
+                    stringEndBraceDepth = braceDepth;
+                    braceDepth++;
+                }
+                break;
+        }
+        lastCh = ch;
+    }
+    flush();
+    return out.join('');
+    function flush() {
+        out.push(code.substring(lastIdx, idx));
+        lastIdx = idx;
+    }
+    function findIdentEnd() {
+        var scanIdx = idx;
+        while (isIdentCh(code.charCodeAt(scanIdx)) && scanIdx < end) {
+            scanIdx++;
+        }
+        return scanIdx;
+    }
+    function consumeIdent() {
+        while (isIdentCh(code.charCodeAt(idx))) {
+            idx++;
+        }
+    }
+}
+exports.convertMethodToFunction = convertMethodToFunction;
+function isIdentCh(ch) {
+    return ((CHAR_0 <= ch && ch <= CHAR_9) ||
+        (CHAR_a <= ch && ch <= CHAR_z) ||
+        (CHAR_A <= ch && ch <= CHAR_Z) ||
+        ch === UNDERSCORE ||
+        ch === DOLLAR);
+}
+function isWord(ch, code, idx, word) {
+    if (ch !== word.charCodeAt(0))
+        return false;
+    for (var i = 1; i < word.length; i++) {
+        if (code.charCodeAt(idx + i - 1) !== word.charCodeAt(i)) {
+            return false;
+        }
+    }
+    if (isIdentCh(code.charCodeAt(idx + word.length - 1))) {
+        return false;
+    }
+    return true;
+}
+var QUOTE_DOUBLE = '"'.charCodeAt(0);
+var QUOTE_SINGLE = "'".charCodeAt(0);
+var QUOTE_BACK_TICK = '`'.charCodeAt(0);
+var BACKSLASH = "\\".charCodeAt(0);
+var FORWARD_SLASH = "/".charCodeAt(0);
+var EOL = "\n".charCodeAt(0);
+var STAR = "*".charCodeAt(0);
+var CHAR_0 = "0".charCodeAt(0);
+var CHAR_9 = "9".charCodeAt(0);
+var CHAR_a = "a".charCodeAt(0);
+var CHAR_z = "z".charCodeAt(0);
+var CHAR_A = "A".charCodeAt(0);
+var CHAR_Z = "Z".charCodeAt(0);
+var UNDERSCORE = "_".charCodeAt(0);
+var DOLLAR = "$".charCodeAt(0);
+var DOT = ".".charCodeAt(0);
+var OPEN_PAREN = '('.charCodeAt(0);
+var OPEN_BRACE = '{'.charCodeAt(0);
+var CLOSE_BRACE = '}'.charCodeAt(0);