@builder.io/mitosis 0.0.56-13 → 0.0.56-16

package/package.json

@@ -25,7 +25,7 @@
   "engines": {
     "npm": "99999999.9.9"
   },
-  "version": "0.0.56-13",
+  "version": "0.0.56-16",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {
@@ -77,9 +77,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",
@@ -103,8 +106,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-12"
+  "stableVersion": "0.0.56-15"
 }

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/content-slot.raw.d.ts

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

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

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var mitosis_1 = require("@builder.io/mitosis");
-function ContentSlotCode(props) {
-    return (<div>
-      <mitosis_1.Slot name={props.slotTesting}/>
-      <div>
-        <hr />
-      </div>
-      <div>{props.children}</div>
-    </div>);
-}
-exports.default = ContentSlotCode;

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.d.ts

@@ -1,29 +0,0 @@
-import * as CSS from 'csstype';
-import { MitosisComponent } from '../types/mitosis-component';
-export declare const hasStyles: (component: MitosisComponent) => boolean;
-/**
- * e.g.:
- * {
- *  display: 'none',
- *  '@media (max-width: 500px)': {
- *    '& .sub-class': {
- *      display: 'block'
- *    }
- *  }
- * }
- */
-declare type StyleMap = {
-    [className: string]: CSS.Properties | StyleMap;
-};
-/**
- * { 'my-class': { display: 'block', '&.foo': { display: 'none' } }}
- */
-export declare type ClassStyleMap = {
-    [key: string]: StyleMap;
-};
-declare type CollectStyleOptions = {
-    prefix?: string;
-};
-export declare const collectStyledComponents: (json: MitosisComponent) => string;
-export declare const collectCss: (json: MitosisComponent, options?: CollectStyleOptions) => string;
-export {};