@builder.io/mitosis 0.0.56-2 → 0.0.56-22

package/package.json

@@ -25,12 +25,13 @@
   "engines": {
     "npm": "99999999.9.9"
   },
-  "version": "0.0.56-2",
+  "version": "0.0.56-22",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {
     ".": "./dist/src/index.js",
-    "./lib/*": "./dist/src/*"
+    "./lib/*": "./dist/src/*",
+    "./jsx-runtime": "./jsx-runtime.d.ts"
   },
   "types": "./dist/src/index.d.ts",
   "license": "MIT",
@@ -40,11 +41,12 @@
   },
   "scripts": {
     "test": "jest",
+    "snapupdate": "jest --updateSnapshot",
     "build": "tsc --build tsconfig.build.json",
     "clean": "tsc --build --clean tsconfig.build.json",
     "remove-stableVersion": "./scripts/remove-stableVersion.sh",
-    "release:dev": "yarn build && yarn run remove-stableVersion && yarn version prerelease && ALLOW_PUBLISH=true yarn npm publish --tag dev",
-    "release:patch": "yarn build && yarn run remove-stableVersion && yarn version patch && ALLOW_PUBLISH=true yarn npm publish",
+    "release:dev": "yarn build && yarn run remove-stableVersion && yarn version prerelease && yarn npm publish --tag dev",
+    "release:patch": "yarn build && yarn run remove-stableVersion && yarn version patch && yarn npm publish",
     "mitosis-save-artifacts": "node -r esbuild-register ../../scripts/mitosis-save-artifacts.ts",
     "start": "yarn build --watch",
     "script": "ts-node -O '{\"module\": \"commonjs\"}'"
@@ -76,9 +78,12 @@
     "prettier-plugin-svelte": "^1.4.1",
     "svelte": "^3.30.0",
     "traverse": "^0.6.6",
+    "typescript": "^4.7.3",
+    "vue": "^2",
     "vue-template-compiler": "^2.6.12"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.6.0",
     "@builder.io/sdk": "^1.1.26",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-virtual": "^2.1.0",
@@ -102,8 +107,8 @@
     "rollup": "^2.70.1",
     "ts-jest": "^26.4.4",
     "ts-node": "^9.1.1",
-    "typescript": "4.7.0-dev.20220325",
+    "typescript": "^4",
     "universalify": "^2.0.0"
   },
-  "stableVersion": "0.0.56-1"
+  "stableVersion": "0.0.56-21"
 }

package/README.md

@@ -1,239 +0,0 @@
-<p align="center"><img width="400" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fbd8709e610d44cde8f623ebcc960e7dd"></p>
-
-<p align="center">
-  Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and Liquid. 
-</p>
-
-<p align="center">
-  <a href="https://github.com/prettier/prettier"><img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg" /></a>
-  <a href="https://github.com/BuilderIO/mitosis/pulls"><img alt="PRs Welcome" src="https://img.shields.io/badghttps://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fbd8709e610d44cde8f623ebcc960e7dde/PRs-welcome-brightgreen.svg" /></a>
-  <a href="https://github.com/BuilderIO/mitosis"><img alt="License" src="https://img.shields.io/github/license/BuilderIO/mitosis" /></a>
-  <a href="https://www.npmjs.com/package/@builder.io/mitosis"><img alt="Types" src="https://img.shields.io/npm/types/@builder.io/mitosis" /></a>
-  <a href="https://www.npmjs.com/package/@builder.io/mitosis" rel="nofollow"><img src="https://img.shields.io/npm/v/@builder.io/mitosis.svg?sanitize=true"></a>
-</p>
-
-<br />
-<h3 align="center">Try it out</h2>
-
-<table>
-  <tbody>
-  <tr>
-      <td>
-        <p>&nbsp;</p> <!-- spacer -->
-        <p align="center">
-          <img height="50" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Ffb77e93c28e044178e4694cc939bf4cf" />
-        </p>
-        <p align="center">
-        Use our <a href="https://github.com/builderio/figma-html"><b>Figma plugin</b></a> to turn designs into code!
-        </p>
-      </td>
-      <td>
-        <p>&nbsp;</p> <!-- spacer -->
-        <p align="center">
-          <img height="50" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F467c9b604d4e486abfc39d27a2fddc12" />
-        </p>
-        <p align="center">
-          Try our  <a href="https://jsx-lite.builder.io/"><b>interactive fiddle</b></a>
-        </p>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <a href="https://github.com/builderio/figma-html"><img width="400" alt="Figma plugin" src="https://i.imgur.com/BoKsLFs.gif" /></a>
-      </td>
-      <td>
-        <a href="https://jsx-lite.builder.io/"><img width="400" alt="Fiddle" src="https://imgur.com/H1WTtGe.gif" /></a>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <p>&nbsp;</p> <!-- spacer -->
-        <p align="center">
-        <img height="50" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Ff83e94a9c504427cbc8a557f682efec3" />
-        </p>
-        <p align="center">
-          Try our <a href="https://github.com/BuilderIO/vscode"><b>VS Code extension</b></a> for in-IDE visual coding
-        </p>
-      </td>
-      <td>
-        <p>&nbsp;</p> <!-- spacer -->
-        <p align="center">
-          <img height="50" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F0f577e84eb4e4aa4a69d602dd376aa11" />
-        </p>
-        <p align="center">
-          Try our <a href="https://apps.shopify.com/builder-2"><b>Shopify app</b></a> for visual Shopify store building
-      </td>
-    </tr>
-    <tr>
-    <td>
-        <a href="https://github.com/BuilderIO/vscode"><img width="400" alt="Vscode plugin" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F1d59909e2a214c79ad2b1e8ad3fb8245" /></a>
-      </td>
-      <td>
-        <a href="https://apps.shopify.com/builder-2"><img width="400" alt="Vscode plugin" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F97c87a29d88e463b9c1ad22b0329b2f7" /></a>
-      </td>
-    </tr>
-    <tr>
-      <td>
-      <p>&nbsp;</p> <!-- spacer -->
-        <p align="center">
-          <img height="50" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F084b1ebc3de4422185f9d36a409f3a24" />
-        </p>
-        <p align="center">
-          Try our <a href="https://github.com/builderio/builder"><b>headless CMS</b></a> for no-code APIs for all sites and apps
-        </p>
-      </td>
-      <td>
-      <p>&nbsp;</p> <!-- spacer -->
-        <p align="center">
-          <img height="50" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F2025f53be0ab472ca8fbb87381bfbc00" />
-        </p>
-        <p align="center">
-          View our upcoming ecommerce integrations
-        </p>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <a href="https://github.com/builderio/builder"><img width="400" alt="Vscode plugin" src="https://cdn.builder.io/api/v1/image/assets%2F444142b2cae54a19aeb8b5ba245feffe%2F8c2699f47fea48b296b43dbb422336e8" /></a>
-      </td>
-      <td>
-        <a href="https://headlessapp.store"><img width="400" alt="Vscode plugin" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd416b330ae7543089f70af8b930d8d85" /></a>
-      </td>
-    </tr>
-    </tbody>
-  </table>
-
-## Why
-
-### Component libraries
-
-Managing support for libraries that provide UI components across frameworks is a _pain_, esp when webcomponents are not an option (e.g. for server side rendering, best performance, etc). With Mitosis you can write once, and run everywhere with full compatibilty
-
-### Modern workflows for all platforms
-
-JSX lite allows you to incrementally adopt modern and familiar workflows for many different platforms, for for Shopify instance you can server side render to liquid and hydrate with React
-
-### JS framework fatigue
-
-If you have ever had to migrate a huge codebase from one framework to another, it's an absolute nightmare. Writing at a higher level of abstraction allows you to move from one to another with ease
-
-### Design to code
-
-With JSX lite, you can convert designs from [Figma](https://github.com/BuilderIO/html-to-figma) or Sketch and convert it to clean code for the framework of your choice. You can even use [Builder.io](https://github.com/builderio/builder) to visually drag/drop to build UIs and edit the code _side by side_
-
-<p align="center">
-<img src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F28066781f8584569b131fb4bffd893eb" />
-</p>
-
-## How does it work
-
-Mitosis uses a static subset of JSX, inspired by [Solid](https://github.com/ryansolid/solid/blob/master/documentation/rendering.md). This means we can parse it to a simple JSON structure that it is easy easy to build stringifers off of for various frameworks and implementations
-
-```tsx
-export function MyComponent() {
-  const state = useState({
-    name: 'Steve',
-  });
-
-  return (
-    <div>
-      <input
-        value={state.name}
-        onChange={(e) => (state.name = e.target.value)}
-      />
-    </div>
-  );
-}
-```
-
-becomes:
-
-```json
-{
-  "@type": "@builder.io/mitosis/component",
-  "state": {
-    "name": "Steve"
-  },
-  "nodes": [
-    {
-      "@type": "@builder.io/mitosis/node",
-      "name": "div",
-      "children": [
-        {
-          "@type": "@builder.io/mitosis/node",
-          "bindings": {
-            "value": "state.name",
-            "onChange": "state.name = event.target.value"
-          }
-        }
-      ]
-    }
-  ]
-}
-```
-
-Which can be reserialized into many languges and framworks. For instance, to support angular, we just make a serializer that loops over the json and produces:
-
-```ts
-@Component({
-  template: `
-    <div>
-      <input [value]="name" (change)="name = $event.target.value" />
-    </div>
-  `,
-})
-class MyComponent {
-  name = 'Steve';
-}
-```
-
-Adding framework support is surprisingly easy with our plugins (docs coming soon!)
-
-## No-code tooling
-
-Mitosis's static JSON format also enables no-code tooling for visual code editing and importing, for instance with [Builder.io](https://github.com/builderio/builder) or [Figma](https://github.com/BuilderIO/html-to-figma)
-
-<img src="https://imgur.com/3TjfY2H.gif" >
-
-<img src="https://i.imgur.com/vsAKt7f.gif" >
-
-## Formatting options
-
-Mitosis supports settings for generating code to match your preferred formatting, libraries, etc. These output options will be customizable and extensible with plugins soon too
-
-<img src="https://imgur.com/hWXfNF3.gif "/>
-
-## Who uses it
-
-- [Builder.io](https://github.com/builderio/builder)
-- [Snap](https://github.com/builderio/snap)
-- [HTML <> Figma](https://github.com/builderio/html-to-figma)
-- [Build.](https://github.com/builderio/build.) (coming soon)
-
-## Status
-
-| Framework     | Status       |
-| ------------- | ------------ |
-| React         | Alpha        |
-| Vue           | Alpha        |
-| Liquid        | Alpha        |
-| Builder.io    | Alpha        |
-| Solid         | Alpha        |
-| Figma         | Alpha        |
-| Angular       | Alpha        |
-| Svelte        | Alpha        |
-| HTML/CSS/JS   | Alpha        |
-| Webcomponents | Alpha        |
-| React Native  | Alpha        |
-| SwiftUI       | Experimental |
-
-## Coming soon
-
-- Stable (v1) release
-- Plugin API docs for custom syntaxes and extensions
-- VS code plugin
-
-<br />
-<p align="center">
-  Made with ❤️ by <a target="_blank" href="https://www.builder.io/">Builder.io</a>
-</p>

package/dist/src/__tests__/data/blocks/onUpdate.raw copy.d.ts

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

package/dist/src/__tests__/data/blocks/onUpdate.raw copy.jsx

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var mitosis_1 = require("@builder.io/mitosis");
-function OnUpdate() {
-    (0, mitosis_1.onUpdate)(function () {
-        console.log('Runs on every update/rerender');
-    });
-    return <div />;
-}
-exports.default = OnUpdate;

package/dist/src/__tests__/data/blocks/slot.raw.d.ts

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

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

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-function SlotCode(props) {
-    return <div>{props.children}</div>;
-}
-exports.default = SlotCode;

package/dist/src/__tests__/data/blocks/styles.raw.d.ts

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

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

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var mitosis_1 = require("@builder.io/mitosis");
-function OnUpdate() {
-    (0, mitosis_1.onUpdate)(function () {
-        console.log('Runs on every update/rerender');
-    });
-    return <div />;
-}
-exports.default = OnUpdate;

package/dist/src/helpers/babel-transform copy.d.ts

@@ -1,8 +0,0 @@
-import * as babel from '@babel/core';
-declare type Visitor<ContextType = any> = {
-    [key: string]: (path: any, context: ContextType) => void;
-};
-export declare const babelTransform: <VisitorContextType = any>(code: string, visitor?: Visitor<VisitorContextType> | undefined) => babel.BabelFileResult | null;
-export declare const babelTransformCode: <VisitorContextType = any>(code: string, visitor?: Visitor<VisitorContextType> | undefined) => string;
-export declare const babelTransformExpression: <VisitorContextType = any>(code: string, visitor: Visitor<VisitorContextType>, type?: 'expression' | 'unknown' | 'block' | 'functionBody') => string;
-export {};

package/dist/src/helpers/babel-transform copy.js

@@ -1,138 +0,0 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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.babelTransformExpression = exports.babelTransformCode = exports.babelTransform = void 0;
-var babel = __importStar(require("@babel/core"));
-var lodash_1 = require("lodash");
-var jsxPlugin = require('@babel/plugin-syntax-jsx');
-var tsPreset = require('@babel/preset-typescript');
-var decorators = require('@babel/plugin-syntax-decorators');
-var babelTransform = function (code, visitor) {
-    return babel.transform(code, {
-        sourceFileName: 'file.tsx',
-        configFile: false,
-        babelrc: false,
-        presets: [[tsPreset, { isTSX: true, allExtensions: true }]],
-        plugins: __spreadArray([
-            [decorators, { legacy: true }],
-            jsxPlugin
-        ], (visitor ? [function () { return ({ visitor: visitor }); }] : []), true),
-    });
-};
-exports.babelTransform = babelTransform;
-var babelTransformCode = function (code, visitor) {
-    var _a;
-    return ((_a = (0, exports.babelTransform)(code, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '';
-};
-exports.babelTransformCode = babelTransformCode;
-var babelTransformExpression = function (code, visitor, type) {
-    var _a;
-    if (type === void 0) { type = 'unknown'; }
-    if (!code) {
-        return '';
-    }
-    // match for object literal like { foo: ... }
-    if (type === 'unknown' && code.trim().match(/^\s*{\s*[a-z0-9]+:/i)) {
-        type = 'expression';
-    }
-    // For Builder content
-    if (type === 'unknown' &&
-        (code.includes('return _virtual_index') ||
-            code.trim().startsWith('return ')) &&
-        !code.trim().startsWith('function')) {
-        type = 'functionBody';
-    }
-    var useCode = code;
-    if (type === 'functionBody') {
-        useCode = "function(){".concat(useCode, "}");
-    }
-    var result = type === 'expression'
-        ? null
-        : (0, lodash_1.attempt)(function () {
-            var _a;
-            var result = ((_a = (0, exports.babelTransform)(useCode, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '';
-            if (type === 'functionBody') {
-                return result.replace(/^function\(\)\{/, '').replace(/\};$/, '');
-            }
-            else {
-                // Babel addes trailing semicolons, but for expressions we need those gone
-                // TODO: maybe detect if the original code ended with one, and keep it if so, for the case
-                // of appending several fragements
-                return result.replace(/;$/, '');
-            }
-        });
-    if ((0, lodash_1.isError)(result) || type === 'expression') {
-        try {
-            // If it can't, e.g. this is an expression or code fragment, modify the code below and try again
-            // Detect method fragments. These get passed sometimes and otherwise
-            // generate compile errors. They are of the form `foo() { ... }`
-            var isMethod = Boolean(!code.startsWith('function') &&
-                code.match(/^[a-z0-9]+\s*\([^\)]*\)\s*[\{:]/i));
-            if (isMethod) {
-                useCode = "function ".concat(useCode);
-            }
-            // Parse the code as an expression (instead of the default, a block) by giving it a fake variable assignment
-            // e.g. if the code parsed is { ... } babel will treat that as a block by deafult, unless processed as an expression
-            // that is an object
-            useCode = "let _ = ".concat(useCode);
-            result = (((_a = (0, exports.babelTransform)(useCode, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '')
-                // Babel addes trailing semicolons, but for expressions we need those gone
-                .replace(/;$/, '')
-                // Remove our fake variable assignment
-                .replace(/let _ =\s/, '');
-            if (isMethod) {
-                result = result.replace('function', '');
-            }
-        }
-        catch (err) {
-            console.error('Error parsing code:\n', code, '\n', result);
-            try {
-                return (0, exports.babelTransformExpression)(code, visitor, 'functionBody');
-            }
-            catch (err) {
-                throw err;
-            }
-        }
-    }
-    if (type === 'functionBody') {
-        return result.replace(/^function\s*\(\)\s*\{/, '').replace(/\};?$/, '');
-    }
-    else {
-        // Babel addes trailing semicolons, but for expressions we need those gone
-        // TODO: maybe detect if the original code ended with one, and keep it if so, for the case
-        // of appending several fragements
-        return result.replace(/;$/, '');
-    }
-};
-exports.babelTransformExpression = babelTransformExpression;

package/dist/src/helpers/collect-styles.js

@@ -1,178 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.styleMapToCss = exports.collectCss = exports.collectStyles = exports.parseCssObject = exports.collectStyledComponents = exports.hasStyles = exports.nodeHasStyles = void 0;
-var json5_1 = __importDefault(require("json5"));
-var lodash_1 = require("lodash");
-var traverse_1 = __importDefault(require("traverse"));
-var capitalize_1 = require("./capitalize");
-var dash_case_1 = require("./dash-case");
-var is_mitosis_node_1 = require("./is-mitosis-node");
-var is_upper_case_1 = require("./is-upper-case");
-var object_hash_1 = __importDefault(require("object-hash"));
-var nodeHasStyles = function (node) {
-    return Boolean(typeof node.bindings.css === 'string' &&
-        node.bindings.css.trim().length > 6);
-};
-exports.nodeHasStyles = nodeHasStyles;
-var hasStyles = function (component) {
-    var hasStyles = false;
-    (0, traverse_1.default)(component).forEach(function (item) {
-        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
-            if ((0, exports.nodeHasStyles)(item)) {
-                hasStyles = true;
-                this.stop();
-            }
-        }
-    });
-    return hasStyles;
-};
-exports.hasStyles = hasStyles;
-var collectStyledComponents = function (json) {
-    var styledComponentsCode = '';
-    var componentIndexes = {};
-    var componentHashes = {};
-    (0, traverse_1.default)(json).forEach(function (item) {
-        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
-            if ((0, exports.nodeHasStyles)(item)) {
-                var value = (0, exports.parseCssObject)(item.bindings.css);
-                delete item.bindings.css;
-                var normalizedNameProperty = item.properties.$name
-                    ? (0, capitalize_1.capitalize)((0, lodash_1.camelCase)(item.properties.$name.replace(/[^a-z]/gi, '')))
-                    : null;
-                var componentName = normalizedNameProperty
-                    ? normalizedNameProperty
-                    : /^h\d$/.test(item.name || '')
-                        ? item.name
-                        : (0, capitalize_1.capitalize)((0, lodash_1.camelCase)(item.name || 'div'));
-                var index = (componentIndexes[componentName] =
-                    (componentIndexes[componentName] || 0) + 1);
-                var className = "".concat(componentName).concat(componentName !== item.name && index === 1 ? '' : index);
-                var str = '';
-                var styles = getStylesOnly(value);
-                var stylesHash = (0, object_hash_1.default)(styles);
-                if (stylesHash === componentHashes[componentName]) {
-                    return;
-                }
-                if (!componentHashes[componentName]) {
-                    componentHashes[componentName] = stylesHash;
-                }
-                str += "".concat((0, exports.styleMapToCss)(styles), "\n");
-                var nestedSelectors = getNestedSelectors(value);
-                for (var nestedSelector in nestedSelectors) {
-                    var value_1 = nestedSelectors[nestedSelector];
-                    str += "".concat(nestedSelector, " { ").concat((0, exports.styleMapToCss)(value_1), " }");
-                }
-                var prefix = (0, is_upper_case_1.isUpperCase)(item.name[0])
-                    ? "styled(".concat(item.name, ")`")
-                    : "styled.".concat(item.name, "`");
-                item.name = className;
-                styledComponentsCode += "\n          const ".concat(className, " = ").concat(prefix).concat(str, "`\n        ");
-            }
-            delete item.bindings.css;
-        }
-    });
-    return styledComponentsCode;
-};
-exports.collectStyledComponents = collectStyledComponents;
-var parseCssObject = function (css) {
-    try {
-        return json5_1.default.parse(css);
-    }
-    catch (e) {
-        console.warn('Could not parse CSS object', css);
-        throw e;
-    }
-};
-exports.parseCssObject = parseCssObject;
-var collectStyles = function (json, options) {
-    if (options === void 0) { options = {}; }
-    var styleMap = {};
-    var classProperty = options.classProperty || 'class';
-    var componentIndexes = {};
-    var componentHashes = {};
-    (0, traverse_1.default)(json).forEach(function (item) {
-        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
-            if ((0, exports.nodeHasStyles)(item)) {
-                var value = (0, exports.parseCssObject)(item.bindings.css);
-                delete item.bindings.css;
-                var componentName = item.properties.$name
-                    ? (0, dash_case_1.dashCase)(item.properties.$name)
-                    : /^h\d$/.test(item.name || '') // don't dashcase h1 into h-1
-                        ? item.name
-                        : (0, dash_case_1.dashCase)(item.name || 'div');
-                var stylesHash = (0, object_hash_1.default)(value);
-                if (componentHashes[componentName] === stylesHash) {
-                    var className_1 = "".concat(componentName).concat(options.prefix ? "-".concat(options.prefix) : '');
-                    item.properties[classProperty] = "".concat(item.properties[classProperty] || '', " ").concat(className_1)
-                        .trim()
-                        .replace(/\s{2,}/g, ' ');
-                    return;
-                }
-                if (!componentHashes[componentName]) {
-                    componentHashes[componentName] = stylesHash;
-                }
-                var index = (componentIndexes[componentName] =
-                    (componentIndexes[componentName] || 0) + 1);
-                var className = "".concat(componentName).concat(options.prefix ? "-".concat(options.prefix) : '').concat(index === 1 ? '' : "-".concat(index));
-                item.properties[classProperty] = "".concat(item.properties[classProperty] || '', " ").concat(className)
-                    .trim()
-                    .replace(/\s{2,}/g, ' ');
-                styleMap[className] = value;
-            }
-            delete item.bindings.css;
-        }
-    });
-    return styleMap;
-};
-exports.collectStyles = collectStyles;
-var collectCss = function (json, options) {
-    if (options === void 0) { options = {}; }
-    var styles = (0, exports.collectStyles)(json, options);
-    // TODO create and use a root selector
-    return classStyleMapToCss(styles);
-};
-exports.collectCss = collectCss;
-var getNestedSelectors = function (map) {
-    return (0, lodash_1.pickBy)(map, function (value) { return typeof value === 'object'; });
-};
-var getStylesOnly = function (map) {
-    return (0, lodash_1.pickBy)(map, function (value) { return typeof value === 'string'; });
-};
-var classStyleMapToCss = function (map) {
-    var str = '';
-    for (var key in map) {
-        var styles = getStylesOnly(map[key]);
-        str += ".".concat(key, " { ").concat((0, exports.styleMapToCss)(styles), " }");
-        var nestedSelectors = getNestedSelectors(map[key]);
-        for (var nestedSelector in nestedSelectors) {
-            var value = nestedSelectors[nestedSelector];
-            if (nestedSelector.startsWith('@')) {
-                str += "".concat(nestedSelector, " { .").concat(key, " { ").concat((0, exports.styleMapToCss)(value), " } }");
-            }
-            else {
-                var useSelector = nestedSelector.includes('&')
-                    ? nestedSelector.replace(/&/g, ".".concat(key))
-                    : ".".concat(key, " ").concat(nestedSelector);
-                str += "".concat(useSelector, " { ").concat((0, exports.styleMapToCss)(value), " }");
-            }
-        }
-    }
-    return str;
-};
-var styleMapToCss = function (map) {
-    var str = '';
-    for (var key in map) {
-        var value = map[key];
-        if (typeof value === 'string') {
-            str += "\n".concat((0, dash_case_1.dashCase)(key), ": ").concat(value, ";");
-        }
-        else {
-            // TODO: do nothing
-        }
-    }
-    return str;
-};
-exports.styleMapToCss = styleMapToCss;