@builder.io/mitosis 0.0.0-dev-20260605060721

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

@@ -0,0 +1,187 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceNodes = exports.replacePropsIdentifier = exports.replaceStateIdentifier = exports.replaceIdentifiers = void 0;
+const core_1 = require("@babel/core");
+const generator_1 = __importDefault(require("@babel/generator"));
+const function_1 = require("fp-ts/lib/function");
+const babel_transform_1 = require("./babel-transform");
+/**
+ * Given a `to` function given by the user, figure out the best argument to provide to the `to` function.
+ * This function makes a best guess based on the AST structure it's dealing with.
+ */
+const getToParam = (path) => {
+    if (core_1.types.isMemberExpression(path.node) || core_1.types.isOptionalMemberExpression(path.node)) {
+        if (core_1.types.isIdentifier(path.node.property)) {
+            // if simple member expression e.g. `props.foo`, returns `foo`
+            const propertyName = path.node.property.name;
+            return propertyName;
+        }
+        else {
+            // if nested member expression e.g. `props.foo.bar.baz`, returns `foo.bar.baz`
+            const x = (0, generator_1.default)(path.node.property).code;
+            return x;
+        }
+    }
+    else {
+        // if naked identifier e.g. `foo`, returns `foo`
+        const nodeName = path.node.name;
+        return nodeName;
+    }
+};
+const _replaceIdentifiers = (path, { from, to }) => {
+    var _a, _b;
+    const memberExpressionObject = core_1.types.isIdentifier(path.node) ? path.node : path.node.object;
+    const normalizedFrom = Array.isArray(from) ? from : [from];
+    if (!core_1.types.isIdentifier(memberExpressionObject) ||
+        ((_b = (_a = path.node) === null || _a === void 0 ? void 0 : _a._builder_meta) === null || _b === void 0 ? void 0 : _b.newlyGenerated)) {
+        return;
+    }
+    const matchesFrom = normalizedFrom.includes(memberExpressionObject.name);
+    if (matchesFrom) {
+        if (to) {
+            // `props.foo` to `state`, e.g. `state.foo`
+            if (typeof to === 'string') {
+                const cleanedIdentifier = (0, function_1.pipe)(
+                // Remove trailing `.` if it exists in the user-provided string, as the dot is generated
+                // by babel from the AST
+                to.endsWith('.') ? to.substring(0, to.length - 1) : to, core_1.types.identifier);
+                if (core_1.types.isIdentifier(path.node)) {
+                    path.replaceWith(cleanedIdentifier);
+                }
+                else {
+                    path.replaceWith(core_1.types.memberExpression(cleanedIdentifier, path.node.property));
+                }
+                // `props.foo` to (name) => `state.${name}.bar`, e.g. `state.foo.bar`
+            }
+            else {
+                try {
+                    const newMemberExpression = (0, function_1.pipe)(getToParam(path), (x) => to(x, memberExpressionObject.name), (expression) => {
+                        const [head, ...tail] = expression.split('.');
+                        return [head, tail.join('.')];
+                    }, ([obj, prop]) => {
+                        const objIdentifier = core_1.types.identifier(obj);
+                        if (prop === '') {
+                            return objIdentifier;
+                        }
+                        else {
+                            return core_1.types.memberExpression(objIdentifier, core_1.types.identifier(prop));
+                        }
+                    });
+                    /**
+                     * If both `path` and `newMemberExpression` are equal nodes, do nothing.
+                     * This is to prevent infinite loops when the user-provided `to` function returns the same identifier.
+                     *
+                     * The infinite loop probably happens because we end up traversing the new `Identifier` node again?
+                     */
+                    if ((0, generator_1.default)(path.node).code === (0, generator_1.default)(newMemberExpression).code) {
+                        return;
+                    }
+                    newMemberExpression._builder_meta = { newlyGenerated: true };
+                    path.replaceWith(newMemberExpression);
+                }
+                catch (err) {
+                    console.debug('Could not replace node.');
+                    // throw err;
+                }
+            }
+        }
+        else {
+            if (!core_1.types.isIdentifier(path.node)) {
+                // if we're looking at a member expression, e.g. `props.foo` and no `to` was provided, then we want to strip out
+                // the identifier and end up with `foo`. So we replace the member expression with just its `property` value.
+                path.replaceWith(path.node.property);
+            }
+        }
+    }
+};
+/**
+ * @deprecated Use `replaceNodes` instead.
+ */
+const replaceIdentifiers = ({ code, from, to }) => {
+    try {
+        return (0, function_1.pipe)((0, babel_transform_1.babelTransformExpression)(code, {
+            MemberExpression(path) {
+                _replaceIdentifiers(path, { from, to });
+            },
+            OptionalMemberExpression(path) {
+                _replaceIdentifiers(path, { from, to });
+            },
+            Identifier(path) {
+                // we only want to ignore certain identifiers:
+                if (
+                // (optional) member expressions are already handled in other visitors
+                !core_1.types.isMemberExpression(path.parent) &&
+                    !core_1.types.isOptionalMemberExpression(path.parent) &&
+                    // function declaration identifiers shouldn't be transformed
+                    !core_1.types.isFunctionDeclaration(path.parent) &&
+                    // variable declaration identifiers shouldn't be transformed
+                    // !(types.isVariableDeclarator(path.parent) && path.parent.id === path.node)
+                    // object -> { detail: { state: 'something' } } shouldn't be transformed to { detail: { this: 'something' } }
+                    !core_1.types.isObjectProperty(path.parent)) {
+                    _replaceIdentifiers(path, { from, to });
+                }
+            },
+        }), 
+        // merely running `babel.transform` will add spaces around the code, even if we don't end up replacing anything.
+        // we have some other code downstream that cannot have untrimmed spaces, so we need to trim the output.
+        (code) => code.trim());
+    }
+    catch (err) {
+        throw err;
+    }
+};
+exports.replaceIdentifiers = replaceIdentifiers;
+const replaceStateIdentifier = (to) => (code) => (0, exports.replaceIdentifiers)({ code, from: 'state', to });
+exports.replaceStateIdentifier = replaceStateIdentifier;
+const replacePropsIdentifier = (to) => (code) => (0, exports.replaceIdentifiers)({ code, from: 'props', to });
+exports.replacePropsIdentifier = replacePropsIdentifier;
+const isNewlyGenerated = (node) => { var _a; return (_a = node === null || node === void 0 ? void 0 : node._builder_meta) === null || _a === void 0 ? void 0 : _a.newlyGenerated; };
+/**
+ * Replaces all instances of a Babel AST Node with a new Node within a code string.
+ * Uses `generate()` to convert the Node to a string and compare them.
+ */
+const replaceNodes = ({ code, nodeMaps }) => {
+    const searchAndReplace = (path) => {
+        if (isNewlyGenerated(path.node) || isNewlyGenerated(path.parent))
+            return;
+        for (const { from, to, condition } of nodeMaps) {
+            if (isNewlyGenerated(path.node) || isNewlyGenerated(path.parent))
+                return;
+            // if (path.node.type !== from.type) return;
+            const matchesCondition = condition ? condition(path) : true;
+            if ((0, generator_1.default)(path.node).code === (0, generator_1.default)(from).code && matchesCondition) {
+                const x = core_1.types.cloneNode(to);
+                x._builder_meta = { newlyGenerated: true };
+                try {
+                    path.replaceWith(x);
+                }
+                catch (err) {
+                    console.log('error replacing', {
+                        code,
+                        orig: (0, generator_1.default)(path.node).code,
+                        to: (0, generator_1.default)(x).code,
+                    });
+                    // throw err;
+                }
+            }
+        }
+    };
+    return (0, babel_transform_1.babelTransformExpression)(code, {
+        ThisExpression(path) {
+            searchAndReplace(path);
+        },
+        MemberExpression(path) {
+            searchAndReplace(path);
+        },
+        Identifier(path) {
+            searchAndReplace(path);
+        },
+        OptionalMemberExpression(path) {
+            searchAndReplace(path);
+        },
+    });
+};
+exports.replaceNodes = replaceNodes;

package/dist/src/helpers/replace-new-lines-in-strings.d.ts

@@ -0,0 +1 @@
+export declare function stripNewlinesInStrings(string: string): string;

package/dist/src/helpers/replace-new-lines-in-strings.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stripNewlinesInStrings = void 0;
+function stripNewlinesInStrings(string) {
+    let inString = null;
+    return string
+        .split('')
+        .map((char, index) => {
+        if (inString) {
+            if (char === '\n') {
+                return ' ';
+            }
+        }
+        // Prior char is escape char and the char before that is not escaping it
+        const isEscaped = string[index - 1] === '\\' && string[index - 2] !== '\\';
+        if (!inString && (char === '"' || char === "'") && !isEscaped) {
+            inString = char;
+        }
+        else if (inString && char === inString && !isEscaped) {
+            inString = null;
+        }
+        return char;
+    })
+        .join('');
+}
+exports.stripNewlinesInStrings = stripNewlinesInStrings;

package/dist/src/helpers/set.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Minimal implementation of lodash's _.set
+ * https://lodash.com/docs/4.17.15#set
+ *
+ * See ./set.test.ts for usage examples
+ */
+export declare const set: (obj: any, _path: string | string[], value: any) => any;

package/dist/src/helpers/set.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.set = void 0;
+/**
+ * Minimal implementation of lodash's _.set
+ * https://lodash.com/docs/4.17.15#set
+ *
+ * See ./set.test.ts for usage examples
+ */
+const set = (obj, _path, value) => {
+    if (Object(obj) !== obj) {
+        return obj;
+    }
+    const path = Array.isArray(_path)
+        ? _path
+        : _path.toString().match(/[^.[\]]+/g);
+    path
+        .slice(0, -1)
+        .reduce((a, c, i) => Object(a[c]) === a[c]
+        ? a[c]
+        : (a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}), obj)[path[path.length - 1]] = value;
+    return obj;
+};
+exports.set = set;

package/dist/src/helpers/signals/index.d.ts

@@ -0,0 +1 @@
+export * from './signals';

package/dist/src/helpers/signals/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./signals"), exports);

package/dist/src/helpers/signals/signals.d.ts

@@ -0,0 +1,22 @@
+import { Target } from '../../types/config';
+export declare const getSignalMitosisImportForTarget: (target: Target) => import("../..").MitosisImport | undefined;
+export declare const getSignalImportName: (code: string) => string | undefined;
+/**
+ * Finds all `Signal` types and replaces them with the correct type for the given target.
+ * e.g. `Signal<string>` becomes `Writable<string>` for Svelte.
+ */
+export declare const mapSignalType: ({ code, target, signalImportName, }: {
+    code: string;
+    target: Target;
+    signalImportName?: string | undefined;
+}) => string;
+/**
+ * Processes the `Signal` type usage in a plain TS file:
+ * - Finds the `Signal` import name
+ * - Maps the `Signal` type to the target's equivalent
+ * - Adds the equivalent of the `Signal` import to the file
+ */
+export declare const mapSignalTypeInTSFile: ({ code, target }: {
+    code: string;
+    target: Target;
+}) => string;

package/dist/src/helpers/signals/signals.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapSignalTypeInTSFile = exports.mapSignalType = exports.getSignalImportName = exports.getSignalMitosisImportForTarget = void 0;
+const core_1 = require("@babel/core");
+const function_1 = require("fp-ts/lib/function");
+const babel_transform_1 = require("../../helpers/babel-transform");
+const mitosis_imports_1 = require("../mitosis-imports");
+const getSignalMappingForTarget = (target) => {
+    switch (target) {
+        case 'svelte':
+            const importDeclaration = core_1.types.importDeclaration([core_1.types.importSpecifier(core_1.types.identifier('Writable'), core_1.types.identifier('Writable'))], core_1.types.stringLiteral('svelte/store'));
+            importDeclaration.importKind = 'type';
+            return {
+                getTypeReference: (generics = []) => core_1.types.tsTypeReference(core_1.types.identifier('Writable'), core_1.types.tsTypeParameterInstantiation(generics)),
+                importDeclaration,
+            };
+        default:
+            return undefined;
+    }
+};
+const getSignalMitosisImportForTarget = (target) => {
+    const signalType = getSignalMappingForTarget(target);
+    if (!signalType) {
+        return undefined;
+    }
+    return (0, mitosis_imports_1.mapImportDeclarationToMitosisImport)(signalType.importDeclaration);
+};
+exports.getSignalMitosisImportForTarget = getSignalMitosisImportForTarget;
+const getSignalImportName = (code) => {
+    let foundSignalUsage = false;
+    let signalImportName = undefined;
+    (0, babel_transform_1.babelTransformExpression)(code, {
+        ImportSpecifier(path) {
+            if (core_1.types.isIdentifier(path.node.imported) && path.node.imported.name === 'Signal') {
+                if (path.parentPath.isImportDeclaration() &&
+                    path.parentPath.node.source.value === '@builder.io/mitosis') {
+                    /**
+                     * in case the import is aliased, we need to use the local name,
+                     * e.g. `import { Signal as MySignal } from '../..'`
+                     */
+                    signalImportName = path.node.local.name;
+                    path.stop();
+                }
+            }
+        },
+    });
+    if (!signalImportName) {
+        return undefined;
+    }
+    (0, babel_transform_1.babelTransformExpression)(code, {
+        TSTypeReference(path) {
+            if (core_1.types.isIdentifier(path.node.typeName) && path.node.typeName.name === signalImportName) {
+                foundSignalUsage = true;
+                path.stop();
+            }
+        },
+    });
+    return foundSignalUsage ? signalImportName : undefined;
+};
+exports.getSignalImportName = getSignalImportName;
+const addSignalImport = ({ code, target }) => {
+    const signalType = getSignalMappingForTarget(target);
+    if (!signalType) {
+        return code;
+    }
+    return (0, babel_transform_1.babelTransformExpression)(code, {
+        Program(path) {
+            path.node.body.unshift(signalType.importDeclaration);
+        },
+    });
+};
+/**
+ * Finds all `Signal` types and replaces them with the correct type for the given target.
+ * e.g. `Signal<string>` becomes `Writable<string>` for Svelte.
+ */
+const mapSignalType = ({ code, target, signalImportName = (0, exports.getSignalImportName)(code), }) => {
+    const signalType = getSignalMappingForTarget(target);
+    const map = (path) => {
+        var _a;
+        if (core_1.types.isIdentifier(path.node.typeName) && path.node.typeName.name === signalImportName) {
+            const params = ((_a = path.node.typeParameters) === null || _a === void 0 ? void 0 : _a.params) || [];
+            const newType = (signalType === null || signalType === void 0 ? void 0 : signalType.getTypeReference)
+                ? signalType.getTypeReference(params)
+                : // if no mapping exists, drop `Signal` and just use the generic type passed to `Signal` as-is.
+                    params[0];
+            path.replaceWith(newType);
+        }
+    };
+    return (0, babel_transform_1.babelTransformExpression)(code, {
+        TSTypeReference(path) {
+            map(path);
+        },
+    });
+};
+exports.mapSignalType = mapSignalType;
+/**
+ * Processes the `Signal` type usage in a plain TS file:
+ * - Finds the `Signal` import name
+ * - Maps the `Signal` type to the target's equivalent
+ * - Adds the equivalent of the `Signal` import to the file
+ */
+const mapSignalTypeInTSFile = ({ code, target }) => {
+    const signalImportName = (0, exports.getSignalImportName)(code);
+    if (!signalImportName) {
+        return code;
+    }
+    return (0, function_1.pipe)((0, exports.mapSignalType)({ target, code, signalImportName }), (code) => addSignalImport({ code, target }));
+};
+exports.mapSignalTypeInTSFile = mapSignalTypeInTSFile;

package/dist/src/helpers/slots.d.ts

@@ -0,0 +1,5 @@
+export type SlotMapper = (slotName: string) => string;
+export declare const isSlotProperty: (key: string, slotPrefix?: string) => boolean;
+export declare const stripSlotPrefix: (key: string, slotPrefix?: string) => string;
+export declare const toKebabSlot: (key: string, slotPrefix?: string) => string;
+export declare function replaceSlotsInString(code: string, mapper: SlotMapper): string;

package/dist/src/helpers/slots.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceSlotsInString = exports.toKebabSlot = exports.stripSlotPrefix = exports.isSlotProperty = void 0;
+const core_1 = require("@babel/core");
+const function_1 = require("fp-ts/function");
+const lodash_1 = require("lodash");
+const babel_transform_1 = require("./babel-transform");
+const SLOT_PREFIX = 'slot';
+const isSlotProperty = (key, slotPrefix = SLOT_PREFIX) => key.startsWith(slotPrefix);
+exports.isSlotProperty = isSlotProperty;
+const stripSlotPrefix = (key, slotPrefix = SLOT_PREFIX) => (0, exports.isSlotProperty)(key, slotPrefix) ? key.substring(slotPrefix.length) : key;
+exports.stripSlotPrefix = stripSlotPrefix;
+const toKebabSlot = (key, slotPrefix = SLOT_PREFIX) => (0, function_1.pipe)((0, exports.stripSlotPrefix)(key, slotPrefix), lodash_1.kebabCase);
+exports.toKebabSlot = toKebabSlot;
+function replaceSlotsInString(code, mapper) {
+    return (0, babel_transform_1.babelTransformExpression)(code, {
+        Identifier(path) {
+            const name = path.node.name;
+            const isSlot = (0, exports.isSlotProperty)(name);
+            if (isSlot) {
+                path.replaceWith(core_1.types.identifier(mapper((0, exports.stripSlotPrefix)(name).toLowerCase())));
+            }
+        },
+    });
+}
+exports.replaceSlotsInString = replaceSlotsInString;

package/dist/src/helpers/state.d.ts

@@ -0,0 +1,2 @@
+import { MitosisComponent } from '../types/mitosis-component';
+export declare const checkHasState: (component: MitosisComponent) => boolean;

package/dist/src/helpers/state.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkHasState = void 0;
+const checkHasState = (component) => Boolean(Object.keys(component.state).length);
+exports.checkHasState = checkHasState;

package/dist/src/helpers/strip-meta-properties.d.ts

@@ -0,0 +1,2 @@
+import { MitosisComponent } from '../types/mitosis-component';
+export declare const stripMetaProperties: (json: MitosisComponent) => MitosisComponent;

package/dist/src/helpers/strip-meta-properties.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stripMetaProperties = void 0;
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const is_mitosis_node_1 = require("./is-mitosis-node");
+const stripMetaProperties = (json) => {
+    (0, legacy_1.default)(json).forEach((item) => {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            for (const property in item.properties) {
+                if (property.startsWith('$')) {
+                    delete item.properties[property];
+                }
+            }
+            for (const property in item.bindings) {
+                if (property.startsWith('$')) {
+                    delete item.bindings[property];
+                }
+            }
+        }
+    });
+    return json;
+};
+exports.stripMetaProperties = stripMetaProperties;

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

@@ -0,0 +1,38 @@
+export type StripStateAndPropsRefsOptions = {
+    replaceWith?: string | ((name: string) => string);
+    includeProps?: boolean;
+    includeState?: boolean;
+};
+/**
+ * Do not use this anywhere. We are migrating to AST transforms and should avoid Regex String.replace() as they are
+ * very brittle.
+ *
+ * If you need to re-use this, re-create it as an AST tranform first.
+ */
+export declare const DO_NOT_USE_CONTEXT_VARS_TRANSFORMS: ({ code, contextVars, context, }: {
+    code: string;
+    contextVars?: string[] | undefined;
+    context: string;
+}) => string;
+export type DO_NOT_USE_ARGS = {
+    outputVars?: string[];
+    domRefs?: string[];
+    stateVars?: string[];
+    contextVars?: string[];
+    context?: string;
+};
+/**
+ * Do not use these anywhere. We are migrating to AST transforms and should avoid Regex String.replace() as they are
+ * very brittle.
+ *
+ * If you need to re-use a part of this, re-create it as an AST tranform first.
+ */
+export declare const DO_NOT_USE_VARS_TRANSFORMS: (newCode: string, { context, domRefs, outputVars, stateVars, contextVars }: DO_NOT_USE_ARGS) => string;
+/**
+ * Remove state. and props. from expressions, e.g.
+ * state.foo -> foo
+ *
+ * This is for support for frameworks like Vue, Svelte, liquid, etc
+ *
+ */
+export declare const stripStateAndPropsRefs: (code?: string, _options?: StripStateAndPropsRefsOptions) => string;

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

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stripStateAndPropsRefs = exports.DO_NOT_USE_VARS_TRANSFORMS = exports.DO_NOT_USE_CONTEXT_VARS_TRANSFORMS = void 0;
+const replace_identifiers_1 = require("./replace-identifiers");
+const DEFAULT_OPTIONS = {
+    replaceWith: '',
+    includeProps: true,
+    includeState: true,
+};
+/**
+ * Do not use this anywhere. We are migrating to AST transforms and should avoid Regex String.replace() as they are
+ * very brittle.
+ *
+ * If you need to re-use this, re-create it as an AST tranform first.
+ */
+const DO_NOT_USE_CONTEXT_VARS_TRANSFORMS = ({ code, contextVars, context, }) => {
+    contextVars === null || contextVars === void 0 ? void 0 : contextVars.forEach((_var) => {
+        code = code.replace(
+        // determine expression edge cases - https://regex101.com/r/iNcTSM/1
+        new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' + _var + '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g'), '$1' + context + _var + '$2');
+    });
+    return code;
+};
+exports.DO_NOT_USE_CONTEXT_VARS_TRANSFORMS = DO_NOT_USE_CONTEXT_VARS_TRANSFORMS;
+/**
+ * Do not use these anywhere. We are migrating to AST transforms and should avoid Regex String.replace() as they are
+ * very brittle.
+ *
+ * If you need to re-use a part of this, re-create it as an AST tranform first.
+ */
+const DO_NOT_USE_VARS_TRANSFORMS = (newCode, { context = 'this.', domRefs, outputVars, stateVars, contextVars }) => {
+    newCode = (0, exports.DO_NOT_USE_CONTEXT_VARS_TRANSFORMS)({ code: newCode, context, contextVars });
+    outputVars === null || outputVars === void 0 ? void 0 : outputVars.forEach((_var) => {
+        // determine expression edge cases onMessage( to this.onMessage.emit(
+        const regexp = '(^|\\s|;|\\()(props\\.?)' + _var + '\\(';
+        const replacer = '$1' + context + _var + '.emit(';
+        newCode = newCode.replace(new RegExp(regexp, 'g'), replacer);
+    });
+    const matchPropertyAccessorsArguments = '\\?\\.|,|\\.|\\(| |;|\\)|\\]|$'; // foo?.stuff | foo) | foo | foo] etc.
+    const matchVariableUseInClass = '^|\\n|\\r| |;|\\(|\\[|!|,'; //  foo | (foo | !foo | foo, | [foo etc.
+    domRefs === null || domRefs === void 0 ? void 0 : domRefs.forEach((_var) => {
+        newCode = newCode.replace(new RegExp(`(${matchVariableUseInClass})${_var}(${matchPropertyAccessorsArguments})`, 'g'), '$1' + 'this.' + _var + '$2');
+    });
+    stateVars === null || stateVars === void 0 ? void 0 : stateVars.forEach((_var) => {
+        newCode = newCode.replace(
+        /*
+          1. Skip anything that is a class variable declaration
+            myClass() {
+              stuff = 'hi'
+              foo = 'bar'  <-- in the event that formatting is off
+            }
+          2. Skip anything that is the name of a function declaration or a getter
+            stuff = function stuff() {}  or  get stuff
+          3. If the conditions are met then try to match all use cases of the class variables, see above.
+        */
+        new RegExp(`(?!^${_var}|^ ${_var})(?<!function|get)(${matchVariableUseInClass})${_var}(${matchPropertyAccessorsArguments})`, 'g'), '$1' + 'this.' + _var + '$2');
+    });
+    return newCode;
+};
+exports.DO_NOT_USE_VARS_TRANSFORMS = DO_NOT_USE_VARS_TRANSFORMS;
+/**
+ * Remove state. and props. from expressions, e.g.
+ * state.foo -> foo
+ *
+ * This is for support for frameworks like Vue, Svelte, liquid, etc
+ *
+ */
+const stripStateAndPropsRefs = (code, _options = {}) => {
+    let newCode = code || '';
+    const { replaceWith, includeProps, includeState } = {
+        ...DEFAULT_OPTIONS,
+        ..._options,
+    };
+    if (includeProps) {
+        newCode = (0, replace_identifiers_1.replacePropsIdentifier)(replaceWith)(newCode);
+        // TODO: webcomponent edge-case
+        if (/el\.this\.props/.test(newCode)) {
+            newCode = newCode.replace(/el\.this\.props/g, 'el.props');
+        }
+    }
+    if (includeState) {
+        newCode = (0, replace_identifiers_1.replaceStateIdentifier)(replaceWith)(newCode);
+    }
+    return newCode;
+};
+exports.stripStateAndPropsRefs = stripStateAndPropsRefs;

package/dist/src/helpers/styles/collect-css.d.ts

@@ -0,0 +1,7 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+type CollectStyleOptions = {
+    prefix?: string;
+};
+export declare function normalizeName(name: string | undefined): string;
+export declare const collectCss: (json: MitosisComponent, options?: CollectStyleOptions) => string;
+export {};