@builder.io/mitosis 0.0.48 → 0.0.50-1

package/dist/src/symbols/symbol-processor.js

@@ -0,0 +1,177 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getJsxSymbolComponentName = exports.convertBuilderElementToMitosisComponent = exports.convertBuilderContentToSymbolHierarchy = exports.ensureAllSymbolsHaveIds = void 0;
+var traverse_1 = require("traverse");
+var builder_1 = require("../parsers/builder");
+var minify_1 = require("../generators/minify");
+/**
+ * Ensure every symbol in a BuilderContent tree has a unique ID.
+ * Mutates the data tree directly.
+ */
+function ensureAllSymbolsHaveIds(content) {
+    var ids = new Set();
+    (0, traverse_1.forEach)(content, function (el) {
+        var _a, _b, _c;
+        if (this.key === 'jsCode' &&
+            isString(el) &&
+            el.endsWith('return _virtual_index')) {
+            // Sometimes rollup adds a final `return _virtual_index` but that causes VM evaluation to fail.
+            // Instead of a return on the last line, it needs a plain expression on the last line. Luckily
+            // because the rollup compile behavior is consistent this works pretty reliably
+            el = el.replace(/return _virtual_index$/, '_virtual_index');
+            this.parent && (this.parent.node.jsCode = el);
+        }
+        if ((0, builder_1.isBuilderElement)(el)) {
+            if (((_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.name) === 'Symbol') {
+                var id = getIdFromSymbol(el);
+                if (id) {
+                    if (ids.has(id)) {
+                        if ((_c = (_b = el.component) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.symbol) {
+                            var id_1 = generateId();
+                            el.component.options.symbol.entry = id_1;
+                            if (el.component.options.symbol.content) {
+                                el.component.options.symbol.content.id = id_1;
+                            }
+                            ids.add(id_1);
+                        }
+                    }
+                    else {
+                        ids.add(id);
+                    }
+                }
+            }
+        }
+    });
+}
+exports.ensureAllSymbolsHaveIds = ensureAllSymbolsHaveIds;
+//TODO(misko): needs test
+function convertBuilderContentToSymbolHierarchy(content, _a) {
+    var _b;
+    var _c = _a === void 0 ? {} : _a, collectComponentStyles = _c.collectComponentStyles, collectComponentState = _c.collectComponentState;
+    var path = [-1, content.id];
+    var hierarchy = (_b = {
+            depthFirstSymbols: []
+        },
+        _b[content.id] = [],
+        _b);
+    (0, traverse_1.forEach)(content, function (el) {
+        var _a, _b, _c;
+        var cssCode = el === null || el === void 0 ? void 0 : el.cssCode;
+        if (cssCode) {
+            collectComponentStyles && collectComponentStyles.push((0, minify_1.minify)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), cssCode));
+        }
+        while (path[0 /* DEPTH */] >= this.path.length) {
+            path.shift();
+            path.shift();
+        }
+        if ((0, builder_1.isBuilderElement)(el)) {
+            if (((_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.name) === 'Symbol') {
+                if (collectComponentState) {
+                    var symbol = el.component.options.symbol;
+                    var props = symbol.data;
+                    var state = (_c = (_b = symbol.content) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.state;
+                    if (state) {
+                        var id = toHash(state);
+                        props['serverStateId'] = id;
+                        collectComponentState[id] = state;
+                    }
+                }
+                if (path[0 /* DEPTH */] < this.path.length) {
+                    var id = getIdFromSymbol(el);
+                    hierarchy[id] = [];
+                    addIfMissing(hierarchy[path[1 /* ID */]], id);
+                    path.unshift(this.path.length, id);
+                }
+                // TODO(misko): This should be `el.content` not `el`
+                // Because we don't wante to take the `<Symbol>` with us.
+                // TODO(misko): Do we really want to add ALL symbols? Even duplicates?
+                hierarchy.depthFirstSymbols.unshift(el);
+            }
+        }
+    });
+    return hierarchy;
+}
+exports.convertBuilderContentToSymbolHierarchy = convertBuilderContentToSymbolHierarchy;
+function convertBuilderElementToMitosisComponent(element) {
+    var _a, _b;
+    var symbolValue = (_b = (_a = element.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.symbol;
+    var elContent = symbolValue === null || symbolValue === void 0 ? void 0 : symbolValue.content;
+    if (!elContent) {
+        console.warn('Symbol missing content', element.id);
+        delete element.component; // TODO(misko): Should this be assign `undefined` for perf?
+        element.children = [];
+        return null;
+    }
+    var id = getIdFromSymbol(element);
+    var componentName = getJsxSymbolComponentName(id);
+    delete element.component; // TODO(misko): Should this be assign `undefined` for perf?
+    element.children = [
+        (0, builder_1.createBuilderElement)({
+            component: {
+                name: componentName,
+                options: symbolValue.data,
+            },
+        }),
+    ];
+    var mitosisComponent = __assign(__assign({}, (0, builder_1.builderContentToMitosisComponent)(elContent, {
+        includeBuilderExtras: true,
+        preserveTextBlocks: true,
+    })), { name: componentName });
+    mitosisComponent.meta.builderElId = element.id;
+    return mitosisComponent;
+}
+exports.convertBuilderElementToMitosisComponent = convertBuilderElementToMitosisComponent;
+function getJsxSymbolComponentName(id) {
+    return 'Component' + id.toUpperCase().replace(/-/g, '');
+}
+exports.getJsxSymbolComponentName = getJsxSymbolComponentName;
+function getIdFromSymbol(el) {
+    var _a, _b, _c;
+    // TODO(misko): Don't use entry us el.id???
+    return (_c = (_b = (_a = el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.symbol) === null || _c === void 0 ? void 0 : _c.entry;
+}
+function addIfMissing(array, value) {
+    if (array.indexOf(value) == -1) {
+        array.push(value);
+    }
+}
+function isString(value) {
+    return typeof value == 'string';
+}
+function generateId() {
+    return (
+    // TODO(misko): For now I have removed the data as I think it is overkill
+    // and makes the output unnecessarily big.
+    // new Date().getTime().toString(36) +
+    Math.round(Math.random() * Number.MAX_SAFE_INTEGER).toString(36));
+}
+function toHash(obj) {
+    return hashCode(JSON.stringify(obj));
+}
+function hashCode(text) {
+    var hash = 0, i, chr;
+    if (text.length === 0)
+        return String(hash);
+    for (i = 0; i < text.length; i++) {
+        chr = text.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return Number(Math.abs(hash)).toString(36);
+}
+var templateObject_1;

package/dist/src/types/jsx-lite-component.d.ts

@@ -0,0 +1,63 @@
+import { JSONObject } from './json';
+import { JSXLiteNode } from './jsx-lite-node';
+/**
+ * @example
+ *  // import core, { useState, someThing as someAlias } from '@jsx-lite/core'
+ *  {
+ *    path: '@jsx-lite/core',
+ *    imports: {
+ *      useState: 'useState',
+ *      someAlias: 'someThing',
+ *      core: 'default',
+ *    }
+ *  }
+ *
+ * @example
+ *  // import * as core from '@jsx-lite/core'
+ *  {
+ *    path: '@jsx-lite/core',
+ *    imports: {
+ *      core: '*',
+ *    }
+ *  }
+ */
+export interface JSXLiteImport {
+    path: string;
+    imports: {
+        [key: string]: string | undefined;
+    };
+}
+declare type ContextInfo = {
+    name: string;
+    path: string;
+};
+export declare type JSXLiteComponent = {
+    '@type': '@jsx-lite/component';
+    name: string;
+    imports: JSXLiteImport[];
+    meta: JSONObject & {
+        metadataHook?: JSONObject;
+    };
+    state: JSONObject;
+    context: {
+        get: {
+            [key: string]: ContextInfo;
+        };
+        set: {
+            [key: string]: {
+                name: string;
+                value?: JSONObject;
+            };
+        };
+    };
+    hooks: {
+        init?: string;
+        onMount?: string;
+        onUnMount?: string;
+        preComponent?: string;
+        postComponent?: string;
+    };
+    children: JSXLiteNode[];
+    subComponents: JSXLiteComponent[];
+};
+export {};

package/dist/src/types/jsx-lite-component.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/types/jsx-lite-context.d.ts

@@ -0,0 +1,6 @@
+import { JSONObject } from '../types/json';
+export declare type JSXLiteContext = {
+    '@type': '@jsx-lite/context';
+    name: string;
+    value: JSONObject;
+};

package/dist/src/types/jsx-lite-context.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/types/jsx-lite-node.d.ts

@@ -0,0 +1,13 @@
+import { JSONObject } from './json';
+export declare type JSXLiteNode = {
+    '@type': '@jsx-lite/node';
+    name: string;
+    meta: JSONObject;
+    properties: {
+        [key: string]: string | undefined;
+    };
+    bindings: {
+        [key: string]: string | undefined;
+    };
+    children: JSXLiteNode[];
+};

package/dist/src/types/jsx-lite-node.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/types/jsx-lite-styles.d.ts

@@ -0,0 +1 @@
+export declare type JSXLiteStyles = Omit<Partial<CSSStyleDeclaration>, 'length' | 'getPropertyPriority' | 'getPropertyValue' | 'item' | 'removeProperty' | 'setProperty'>;

package/dist/src/types/jsx-lite-styles.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/types/mitosis-component.d.ts

@@ -31,6 +31,10 @@ declare type ContextInfo = {
     name: string;
     path: string;
 };
+declare type extendedHook = {
+    code: string;
+    deps?: string;
+};
 export declare type MitosisComponent = {
     '@type': '@builder.io/mitosis/component';
     name: string;
@@ -51,11 +55,12 @@ export declare type MitosisComponent = {
         };
     };
     hooks: {
-        init?: string;
-        onMount?: string;
-        onUnMount?: string;
-        preComponent?: string;
-        postComponent?: string;
+        init?: extendedHook;
+        onMount?: extendedHook;
+        onUnMount?: extendedHook;
+        preComponent?: extendedHook;
+        postComponent?: extendedHook;
+        onUpdate?: extendedHook;
     };
     children: MitosisNode[];
     subComponents: MitosisComponent[];

package/dist/test/qoot/Todo/bundle.js

@@ -0,0 +1,88 @@
+import { Component, injectMethod, jsxFactory, QRL, injectEventHandler, provideEvent, markDirty } from '@builder.io/qwik';
+
+function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+class TodoComponent$1 extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty$1(this, "editing", false);
+  }
+
+  toggle() {
+    this.todo.completed = !this.todo.completed;
+  }
+
+  $newState() {
+    return {}; // TODO
+  }
+
+}
+
+_defineProperty$1(TodoComponent$1, "$templateQRL", "ui:/Todo/bundle.template");
+
+const template = injectMethod(TodoComponent$1, function () {
+  return jsxFactory("li", {
+    class: `${this.todo.completed ? "completed" : ""} ${this.editing ? "editing" : ""}`
+  }, jsxFactory("div", {
+    class: "view"
+  }, jsxFactory("input", {
+    class: "toggle",
+    type: "checkbox",
+    checked: this.todo.completed,
+    "on:click": QRL`ui:/Todo/bundle.onInputClick`
+  }), jsxFactory("label", {
+    "on:dblclick": QRL`ui:/Todo/bundle.onLabelDblClick`
+  }, this.todo.text), jsxFactory("button", {
+    class: "destroy",
+    "on:click": QRL`ui:/Todo/bundle.onButtonClick`
+  })), this.editing ? jsxFactory(null, null, jsxFactory("input", {
+    class: "edit",
+    value: this.todo.text,
+    "on:blur": QRL`ui:/Todo/bundle.onInput2Blur`,
+    "on:keyup": QRL`ui:/Todo/bundle.onInput2KeyUp`
+  })) : undefined);
+});
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+class TodoComponent extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "editing", false);
+  }
+
+  toggle() {
+    this.todo.completed = !this.todo.completed;
+  }
+
+  $newState() {
+    return {}; // TODO
+  }
+
+}
+
+_defineProperty(TodoComponent, "$templateQRL", "ui:/Todo/bundle.template");
+
+const onInputClick = injectEventHandler(TodoComponent$1, provideEvent(), async function (event) {
+  this.toggle();
+});
+
+const onLabelDblClick = injectEventHandler(TodoComponent$1, provideEvent(), async function (event) {
+  this.editing = true;
+  markDirty(this);
+});
+
+const onButtonClick = injectEventHandler(TodoComponent$1, provideEvent(), async function (event) {
+  todosState.todos.splice(todosState.todos.indexOf(this.todo));
+});
+
+const onInput2Blur = injectEventHandler(TodoComponent$1, provideEvent(), async function (event) {
+  this.editing = false;
+  markDirty(this);
+});
+
+const onInput2KeyUp = injectEventHandler(TodoComponent$1, provideEvent(), async function (event) {
+  this.todo.text = event.target.value;
+});
+
+export { TodoComponent, onButtonClick, onInput2Blur, onInput2KeyUp, onInputClick, onLabelDblClick, template };

package/dist/test/qoot/Todo/component.ts

@@ -0,0 +1,17 @@
+import { Component, QRL } from "@builder.io/qwik";
+
+export class TodoComponent extends Component<any, any> {
+  static $templateQRL = "ui:/Todo/template";
+
+  editing = false;
+  toggle() {
+    this.todo.completed = !this.todo.completed;
+  }
+
+  $newState() {
+    return {}; // TODO
+  }
+}
+
+  }
+}

package/dist/test/qoot/Todo/onButtonClick.ts

@@ -0,0 +1,13 @@
+import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
+import { TodoComponent } from "./component.js";
+
+export default injectEventHandler(
+  TodoComponent,
+  provideEvent(),
+  async function (this: TodoComponent, event: Event) {
+    todosState.todos.splice(todosState.todos.indexOf(this.todo));
+  }
+);
+odo));
+  }
+);

package/dist/test/qoot/Todo/onInput2Blur.ts

@@ -0,0 +1,11 @@
+import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
+import { TodoComponent } from "./component.js";
+
+export const onInput2Blur = injectEventHandler(
+  TodoComponent,
+  provideEvent(),
+  async function (this: TodoComponent, event: Event) {
+    this.editing = false;
+    markDirty(this);
+  }
+);

package/dist/test/qoot/Todo/onInput2KeyUp.ts

@@ -0,0 +1,10 @@
+import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
+import { TodoComponent } from "./component.js";
+
+export const onInput2KeyUp = injectEventHandler(
+  TodoComponent,
+  provideEvent(),
+  async function (this: TodoComponent, event: Event) {
+    this.todo.text = event.target.value;
+  }
+);

package/dist/test/qoot/Todo/onInputClick.ts

@@ -0,0 +1,10 @@
+import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
+import { TodoComponent } from "./component.js";
+
+export const onInputClick = injectEventHandler(
+  TodoComponent,
+  provideEvent(),
+  async function (this: TodoComponent, event: Event) {
+    this.toggle();
+  }
+);

package/dist/test/qoot/Todo/onLabelDblClick.ts

@@ -0,0 +1,11 @@
+import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
+import { TodoComponent } from "./component.js";
+
+export const onLabelDblClick = injectEventHandler(
+  TodoComponent,
+  provideEvent(),
+  async function (this: TodoComponent, event: Event) {
+    this.editing = true;
+    markDirty(this);
+  }
+);

package/dist/test/qoot/Todo/public.ts

@@ -0,0 +1,4 @@
+import { jsxDeclareComponent, QRL } from "@builder.io/qwik";
+
+export const Todo = jsxDeclareComponent(QRL`ui:/Todo/template`, "todo");
+odo");

package/dist/test/qoot/Todo/template.tsx

@@ -0,0 +1,46 @@
+import { injectMethod, QRL, jsxFactory } from "@builder.io/qwik";
+import { TodoComponent } from "./component.js";
+
+import { TodosState as todosState } from "../TodosState/public.js";
+
+export const template = injectMethod(
+  TodoComponent,
+  function (this: TodoComponent) {
+    return (
+      <li
+        class={`${this.todo.completed ? "completed" : ""} ${
+          this.editing ? "editing" : ""
+        }`}
+      >
+        <div class="view">
+          <input
+            class="toggle"
+            type="checkbox"
+            checked={this.todo.completed}
+            on:click={QRL`ui:/Todo/bundle.onInputClick`}
+          />
+
+          <label on:dblclick={QRL`ui:/Todo/bundle.onLabelDblClick`}>
+            {this.todo.text}
+          </label>
+
+          <button
+            class="destroy"
+            on:click={QRL`ui:/Todo/bundle.onButtonClick`}
+          ></button>
+        </div>
+
+        {this.editing ? (
+          <>
+            <input
+              class="edit"
+              value={this.todo.text}
+              on:blur={QRL`ui:/Todo/bundle.onInput2Blur`}
+              on:keyup={QRL`ui:/Todo/bundle.onInput2KeyUp`}
+            />
+          </>
+        ) : undefined}
+      </li>
+    );
+  }
+);

package/dist/test/qoot/Todos/component.ts

@@ -0,0 +1,9 @@
+import { Component, QRL } from "@builder.io/qwik";
+
+export class TodosComponent extends Component<any, any> {
+  static $templateQRL = "ui:/Todos/template";
+
+  $newState() {
+    return {}; // TODO
+  }
+}

package/dist/test/qoot/Todos/onInputClick.ts

@@ -0,0 +1,14 @@
+import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
+import { TodosComponent } from "./component.js";
+
+export default injectEventHandler(
+  TodosComponent,
+  provideEvent(),
+  async function (this: TodosComponent, event: Event) {
+    const newValue = !todosState.allCompleted;
+
+    for (const todoItem of todosState.todos) {
+      todoItem.completed = newValue;
+    }
+  }
+);

package/dist/test/qoot/Todos/public.ts

@@ -0,0 +1,3 @@
+import { jsxDeclareComponent, QRL } from "@builder.io/qwik";
+
+export const Todos = jsxDeclareComponent(QRL`ui:/Todos/template`, "todos");

package/dist/test/qoot/Todos/template.tsx

@@ -0,0 +1,30 @@
+import { injectMethod, QRL, jsxFactory } from "@builder.io/qwik";
+import { TodosComponent } from "./component.js";
+
+import { TodosState as todosState } from "../TodosState/public.js";
+import { Todo } from "../Todo/public.js";
+
+export default injectMethod(TodosComponent, function (this: TodosComponent) {
+  return (
+    <section class="main">
+      {todosState.todos.length ? (
+        <>
+          <input
+            class="toggle-all"
+            type="checkbox"
+            checked={todosState.allCompleted}
+            on:click={QRL`ui:/Todos/onInputClick`}
+          />
+        </>
+      ) : undefined}
+
+      <ul class="todo-list">
+        {todosState.todos.map((todo) => (
+          <>
+            <Todo todo={todo}></Todo>
+          </>
+        ))}
+      </ul>
+    </section>
+  );
+});