@builder.io/mitosis 0.0.56-55 → 0.0.56-57

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

@@ -10,7 +10,7 @@ declare type InternalOptions = {
 export declare const blockToBuilder: (json: MitosisNode, options?: ToBuilderOptions, _internalOptions?: InternalOptions) => BuilderElement;
 export declare const componentToBuilder: (options?: ToBuilderOptions) => ({ component }: TranspilerArgs) => {
     data: {
-        httpRequests: import("../types/json").JSON;
+        httpRequests: import("../types/json")._JSON;
         jsCode: string;
         tsCode: string;
         blocks: BuilderElement[];

package/dist/src/generators/builder.js

@@ -34,6 +34,7 @@ var builder_1 = require("../parsers/builder");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var traverse_1 = __importDefault(require("traverse"));
 var symbol_processor_1 = require("../symbols/symbol-processor");
+var state_1 = require("../helpers/state");
 var omitMetaProperties = function (obj) {
     return (0, lodash_1.omitBy)(obj, function (_value, key) { return key.startsWith('$'); });
 };
@@ -233,7 +234,7 @@ var componentToBuilder = function (options) {
     return function (_a) {
         var _b, _c, _d, _e;
         var component = _a.component;
-        var hasState = Boolean(Object.keys(component.state).length);
+        var hasState = (0, state_1.checkHasState)(component);
         var result = (0, fast_clone_1.fastClone)({
             data: {
                 httpRequests: (_c = (_b = component === null || component === void 0 ? void 0 : component.meta) === null || _b === void 0 ? void 0 : _b.useMetadata) === null || _c === void 0 ? void 0 : _c.httpRequests,

package/dist/src/generators/context/react.js

@@ -7,7 +7,7 @@ var contextToReact = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
         var context = _a.context;
-        var str = "\n  import { createContext } from 'react';\n\n  export default createContext(".concat((0, get_state_object_string_1.getMemberObjectString)(context.value), ")\n  ");
+        var str = "\n  import { createContext } from 'react';\n\n  export default createContext(".concat((0, get_state_object_string_1.stringifyContextValue)(context.value), ")\n  ");
         if (options.format !== false) {
             try {
                 str = (0, standalone_1.format)(str, {

package/dist/src/generators/context/solid.js

@@ -7,7 +7,7 @@ var contextToSolid = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
         var context = _a.context;
-        var str = "\n    import { createContext } from 'solid-js';\n\n    export default createContext(".concat((0, get_state_object_string_1.getMemberObjectString)(context.value), ")\n    ");
+        var str = "\n    import { createContext } from 'solid-js';\n\n    export default createContext(".concat((0, get_state_object_string_1.stringifyContextValue)(context.value), ")\n    ");
         if (options.format !== false) {
             try {
                 str = (0, standalone_1.format)(str, {

package/dist/src/generators/context/svelte.js

@@ -7,7 +7,7 @@ var contextToSvelte = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
         var context = _a.context;
-        var str = "\n  const key = Symbol();  \n\n  export default {\n    ".concat(context.name, ": ").concat((0, get_state_object_string_1.getMemberObjectString)(context.value), ", \n    key \n  }\n  ");
+        var str = "\n  const key = Symbol();  \n\n  export default {\n    ".concat(context.name, ": ").concat((0, get_state_object_string_1.stringifyContextValue)(context.value), ", \n    key \n  }\n  ");
         if (options.prettier !== false) {
             try {
                 str = (0, standalone_1.format)(str, {

package/dist/src/generators/marko/generate.js

@@ -34,34 +34,16 @@ var indent_1 = require("../../helpers/indent");
 var map_refs_1 = require("../../helpers/map-refs");
 var dash_case_1 = require("../../helpers/dash-case");
 var has_props_1 = require("../../helpers/has-props");
-var function_literal_prefix_1 = require("../../constants/function-literal-prefix");
-var method_literal_prefix_1 = require("../../constants/method-literal-prefix");
-var patterns_1 = require("../../helpers/patterns");
 var get_refs_1 = require("../../helpers/get-refs");
 // Having issues with this, so off for now
 var USE_MARKO_PRETTIER = false;
-function getStateTypeOfValue(value) {
-    if (typeof value === 'string') {
-        if (value.startsWith(function_literal_prefix_1.functionLiteralPrefix)) {
-            return 'function';
-        }
-        else if (value.startsWith(method_literal_prefix_1.methodLiteralPrefix)) {
-            var isGet = Boolean(value.replace(method_literal_prefix_1.methodLiteralPrefix, '').match(patterns_1.GETTER));
-            if (isGet) {
-                return 'getter';
-            }
-            return 'method';
-        }
-    }
-    return 'property';
-}
 /**
  * Return the names of methods and functions on state
  */
 function getStateMethodNames(json) {
     return Object.keys(json.state).filter(function (key) {
-        var value = json.state[key];
-        var type = getStateTypeOfValue(value);
+        var _a;
+        var type = (_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.type;
         return type === 'function' || type === 'method';
     });
 }
@@ -69,13 +51,13 @@ function getStateMethodNames(json) {
  * Return the names of getter and functions on state
  */
 function getStateGetterNames(json) {
-    return Object.keys(json.state).filter(function (key) { return getStateTypeOfValue(json.state[key]) === 'getter'; });
+    return Object.keys(json.state).filter(function (key) { var _a; return ((_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'getter'; });
 }
 /**
  * Return the names of properties (basic literal values) on state
  */
 function getStatePropertyNames(json) {
-    return Object.keys(json.state).filter(function (key) { return getStateTypeOfValue(json.state[key]) === 'property'; });
+    return Object.keys(json.state).filter(function (key) { var _a; return ((_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'property'; });
 }
 var blockToMarko = function (json, options) {
     var _a, _b, _c, _d, _e;

package/dist/src/generators/mitosis.js

@@ -39,6 +39,7 @@ var map_refs_1 = require("../helpers/map-refs");
 var render_imports_1 = require("../helpers/render-imports");
 var jsx_1 = require("../parsers/jsx");
 var react_1 = require("./react");
+var state_1 = require("../helpers/state");
 exports.DEFAULT_FORMAT = 'legacy';
 // Special isValidAttributeName for Mitosis so we can allow for $ in names
 var isValidAttributeName = function (str) {
@@ -152,7 +153,7 @@ var componentToMitosis = function (toMitosisOptions) {
         var components = Array.from((0, get_components_1.getComponents)(json));
         var mitosisComponents = components.filter(function (item) { return mitosisCoreComponents.includes(item); });
         var otherComponents = components.filter(function (item) { return !mitosisCoreComponents.includes(item); });
-        var hasState = Boolean(Object.keys(component.state).length);
+        var hasState = (0, state_1.checkHasState)(component);
         var needsMitosisCoreImport = Boolean(hasState || refs.length || mitosisComponents.length);
         var stringifiedUseMetadata = json5_1.default.stringify(component.meta.useMetadata);
         // TODO: smart only pull in imports as needed

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

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 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)) {
@@ -10,19 +21,21 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToQwik = void 0;
-var collect_css_1 = require("../../helpers/styles/collect-css");
-var convertMethodToFunction_1 = require("./convertMethodToFunction");
-var jsx_1 = require("./jsx");
-var src_generator_1 = require("./src-generator");
 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");
 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);
@@ -37,24 +50,36 @@ var componentToQwik = function (userOptions) {
         try {
             emitImports(file, component);
             emitTypes(file, component);
-            var state_1 = emitStateMethodsAndRewriteBindings(file, component);
-            var hasState_1 = Boolean(Object.keys(component.state).length);
+            var metadata_1 = component.meta.useMetadata || {};
+            var isLightComponent = ((_c = (_b = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.isLight) || false;
+            var imports_1 = (_d = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.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_1);
+            var hasState_1 = (0, state_1.checkHasState)(component);
             var css_1 = null;
-            file.src.const(component.name, (0, src_generator_1.invoke)(file.import(file.qwikModule, 'component$'), [
-                (0, src_generator_1.arrowFnBlock)(['props'], [
-                    function () {
-                        css_1 = emitUseStyles(file, component);
-                        emitUseContext(file, component);
-                        emitUseRef(file, component);
-                        hasState_1 && emitUseStore(file, state_1);
-                        emitUseContextProvider(file, component);
-                        emitUseMount(file, component);
-                        emitUseWatch(file, component);
-                        emitUseCleanup(file, component);
-                        emitJSX(file, component);
-                    },
-                ], [component.propsTypeRef || 'any']),
-            ]), true, true);
+            var topLevelElement_1 = isLightComponent ? null : getTopLevelElement(component);
+            var componentBody = (0, src_generator_1.arrowFnBlock)(['props'], [
+                function () {
+                    var _a, _b;
+                    if ((_b = (_a = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.useHostElement)
+                        emitUseHostElement(file);
+                    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, topLevelElement_1);
+                },
+            ], [component.propsTypeRef || 'any']);
+            file.src.const(component.name, isLightComponent
+                ? componentBody
+                : (0, src_generator_1.invoke)(file.import(file.qwikModule, 'component$'), __spreadArray([
+                    componentBody
+                ], (topLevelElement_1 ? ["{tagName:\"".concat(topLevelElement_1, "\"}")] : []), true)), true, true);
             file.exportDefault(component.name);
             emitStyles(file, css_1);
             DEBUG && file.exportConst('COMPONENT', JSON.stringify(component, null, 2));
@@ -67,6 +92,13 @@ var componentToQwik = function (userOptions) {
     };
 };
 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
@@ -78,9 +110,10 @@ function emitUseMount(file, component) {
 function emitUseWatch(file, component) {
     if (component.hooks.onUpdate) {
         component.hooks.onUpdate.forEach(function (onUpdate) {
-            file.src.emit(file.import(file.qwikModule, 'useWatch$').localName, '((track)=>{');
+            file.src.emit(file.import(file.qwikModule, 'useWatch$').localName, '(({track})=>{');
             emitTrackExpressions(file.src, onUpdate.deps);
-            file.src.emit(convertTypeScriptToJS(onUpdate.code), '});');
+            file.src.emit(convertTypeScriptToJS(onUpdate.code));
+            file.src.emit('});');
         });
     }
 }
@@ -89,9 +122,11 @@ function emitTrackExpressions(src, deps) {
         var dependencies = deps.substring(1, deps.length - 1).split(',');
         dependencies.forEach(function (dep) {
             var lastDotIdx = dep.lastIndexOf('.');
-            var objExp = dep.substring(0, lastDotIdx).replace(/\?$/, '');
-            var objProp = dep.substring(lastDotIdx + 1);
-            src.emit(objExp, '&&track(', objExp, ',"', objProp, '");');
+            if (lastDotIdx > 0) {
+                var objExp = dep.substring(0, lastDotIdx).replace(/\?$/, '');
+                var objProp = dep.substring(lastDotIdx + 1);
+                objExp && src.emit(objExp, '&&track(', objExp, ',"', objProp, '");');
+            }
         });
     }
 }
@@ -101,11 +136,17 @@ function emitUseCleanup(file, component) {
         file.src.emit(file.import(file.qwikModule, 'useCleanup$').localName, '(()=>{', code, '});');
     }
 }
-function emitJSX(file, component) {
+function emitJSX(file, component, topLevelElement) {
     var directives = new Map();
     var handlers = new Map();
     var styles = new Map();
     var parentSymbolBindings = {};
+    var children = component.children;
+    if (topLevelElement && children.length == 1) {
+        var child = children[0];
+        children[0] = __assign(__assign({}, child), { name: 'Host' });
+        file.import(file.qwikModule, 'Host');
+    }
     file.src.emit('return ', (0, jsx_1.renderJSXNodes)(file, directives, handlers, component.children, styles, parentSymbolBindings));
 }
 function emitUseContextProvider(file, component) {
@@ -117,9 +158,7 @@ function emitUseContextProvider(file, component) {
                 var propValue = context.value[prop];
                 file.src.emit(prop, ':');
                 if (isGetter(propValue)) {
-                    var methodMap = stateToMethodOrGetter(component.state);
-                    var code = (0, convertMethodToFunction_1.convertMethodToFunction)(extractGetterBody(propValue), methodMap, getLexicalScopeVars(component));
-                    file.src.emit('(()=>{', code, '})(),');
+                    file.src.emit('(()=>{', extractGetterBody(propValue), '})(),');
                 }
                 else if (typeof propValue == 'function') {
                     throw new Error('Qwik: Functions are not supported in context');
@@ -143,9 +182,9 @@ function emitUseRef(file, component) {
     });
 }
 function emitUseStyles(file, component) {
-    var css = (0, collect_css_1.collectCss)(component);
+    var css = (0, collect_css_1.collectCss)(component, { prefix: component.name });
     if (css) {
-        file.src.emit(file.import(file.qwikModule, 'useScopedStyles$').localName, '(STYLES);');
+        file.src.emit(file.import(file.qwikModule, 'useStylesScoped$').localName, '(STYLES);');
     }
     return css;
 }
@@ -154,19 +193,22 @@ function emitStyles(file, css) {
         file.exportConst('STYLES', '`' + css.replace(/`/g, '\\`') + '`');
     }
 }
+/**
+ * @param file
+ * @param stateInit
+ */
 function emitUseStore(file, stateInit) {
     var state = stateInit[0];
-    file.src.emit('const state=', file.import(file.qwikModule, 'useStore').localName, '(');
-    if (stateInit.length == 1) {
+    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 {
-        file.src.emit('()=>{const state=', JSON.stringify(state), ';');
-        file.src.emitList(stateInit.slice(1), ';');
-        file.src.emit(';return state;');
-        file.src.emit('}');
+        // TODO hack for now so that `state` variable is defined, even though it is never read.
+        file.src.emit('const state={};');
     }
-    file.src.emit(');');
 }
 function emitTypes(file, component) {
     var _a, _b;
@@ -175,14 +217,35 @@ function emitTypes(file, component) {
         (_b = component.interfaces) === null || _b === void 0 ? void 0 : _b.forEach(function (i) { return file.src.emit(i); });
     }
 }
-function emitStateMethodsAndRewriteBindings(file, component) {
+function emitStateMethodsAndRewriteBindings(file, component, metadata) {
     var _a;
     var lexicalArgs = getLexicalScopeVars(component);
     var state = emitStateMethods(file, component.state, lexicalArgs);
     var methodMap = stateToMethodOrGetter(component.state);
-    (_a = component.children) === null || _a === void 0 ? void 0 : _a.forEach(function (node) { return rewriteBindings(node, methodMap, lexicalArgs); });
+    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);
 }
@@ -202,11 +265,12 @@ var FUNCTION = CODE_PREFIX + 'function:';
 var METHOD = CODE_PREFIX + 'method:';
 var GETTER = CODE_PREFIX + 'method:get ';
 function emitStateMethods(file, componentState, lexicalArgs) {
-    var state = {};
-    var stateInit = [state];
+    var stateValues = {};
+    var stateInit = [stateValues];
     var methodMap = stateToMethodOrGetter(componentState);
     Object.keys(componentState).forEach(function (key) {
-        var code = componentState[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;
@@ -217,7 +281,7 @@ function emitStateMethods(file, componentState, lexicalArgs) {
                 prefixIdx += 'function '.length;
             }
             code = code.substring(prefixIdx);
-            code = (0, convertMethodToFunction_1.convertMethodToFunction)(code, methodMap, lexicalArgs).replace('(', "(".concat(lexicalArgs.join(','), ","));
+            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(','), ")"));
@@ -229,14 +293,12 @@ function emitStateMethods(file, componentState, lexicalArgs) {
             file.exportConst(functionName, 'function ' + code, true);
         }
         else {
-            state[key] = code;
+            stateValues[key] = code;
         }
     });
     return stateInit;
 }
 function convertTypeScriptToJS(code) {
-    // HACK, proper implementation should use Babel
-    // return code.replace(/(\w+):\s+[\w\[\]"']+/gm, (_, ident) => ident);
     return (0, babel_transform_1.babelTransformExpression)(code, {});
 }
 function isGetter(code) {
@@ -256,26 +318,36 @@ function extractGetterBody(code) {
 function stateToMethodOrGetter(state) {
     var methodMap = {};
     Object.keys(state).forEach(function (key) {
-        var code = state[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;
 }
-function rewriteBindings(node, methodMap, lexicalArgs) {
+/**
+ * Return a top-level element for the component.
+ *
+ * WHAT: If the component has a single root element, then this returns the element name.
+ *
+ * WHY: This is useful to pull the root element into the component's host and thus saving unnecessary wrapping.
+ *
+ * @param component
+ */
+function getTopLevelElement(component) {
     var _a;
-    Object.keys(node.bindings).forEach(function (key) {
-        var binding = node.bindings[key];
-        if (binding === null || binding === void 0 ? void 0 : binding.code) {
-            binding.code = (0, convertMethodToFunction_1.convertMethodToFunction)(binding.code, methodMap, lexicalArgs);
-        }
-        if (key.startsWith('on') && (binding === null || binding === void 0 ? void 0 : binding.code)) {
-            var args = (binding === null || binding === void 0 ? void 0 : binding.arguments) || [];
-            binding.code = "(".concat(args.join(','), ") => ").concat(binding.code);
-            delete node.bindings[key];
-            node.bindings[key + '$'] = binding;
+    if (((_a = component.children) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+        var child = component.children[0];
+        if (child['@type'] === '@builder.io/mitosis/node' && startsLowerCase(child.name)) {
+            return child.name;
         }
-    });
-    (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { return rewriteBindings(child, methodMap, lexicalArgs); });
+    }
+    return null;
+}
+function startsLowerCase(name) {
+    return name.length > 0 && name[0].toLowerCase() === name[0];
+}
+function emitUseHostElement(file) {
+    file.src.emit('const hostElement=', file.import(file.qwikModule, 'useHostElement').localName, '();');
 }

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);