@builder.io/mitosis 0.0.46 → 0.0.49

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

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

@@ -0,0 +1,46 @@
+import { Component, injectMethod, h, QRL } from '@builder.io/qwik';
+
+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 template = injectMethod(TodoComponent, function () {
+  return h("li", {
+    class: `${this.todo.completed ? "completed" : ""} ${this.editing ? "editing" : ""}`
+  }, h("div", {
+    class: "view"
+  }, h("input", {
+    type: "checkbox",
+    class: "toggle",
+    checked: this.todo.completed,
+    "on:click": QRL`ui:/Todo/bundle.onInputClick`
+  }), h("label", {
+    "on:dblclick": QRL`ui:/Todo/bundle.onLabelDblClick`
+  }, this.todo.text), h("button", {
+    class: "destroy",
+    "on:click": QRL`ui:/Todo/bundle.onButtonClick`
+  })), this.editing ? h(null, null, h("input", {
+    class: "edit",
+    value: this.todo.text,
+    "on:blur": QRL`ui:/Todo/bundle.onInput2Blur`,
+    "on:keyup": QRL`ui:/Todo/bundle.onInput2KeyUp`
+  })) : undefined);
+});
+
+export { template };

package/dist/test/qwik/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/qwik/Todo/onButtonClick.ts

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

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

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

package/dist/test/qwik/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/qwik/Todo/onInputClick.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) {
+    this.toggle();
+  }
+);
+le();
+  }
+);

package/dist/test/qwik/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/qwik/Todo/public.ts

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

package/dist/test/qwik/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/qwik/Todo.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/qwik/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/qwik/Todo_onButtonClick.ts

@@ -0,0 +1,13 @@
+import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
+import { TodoComponent } from "./Todo_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/qwik/Todo_onInput2Blur.ts

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

package/dist/test/qwik/Todo_onInput2KeyUp.ts

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

package/dist/test/qwik/Todo_onInputClick.ts

@@ -0,0 +1,13 @@
+import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
+import { TodoComponent } from "./Todo_component.js";
+
+export default injectEventHandler(
+  TodoComponent,
+  provideEvent(),
+  async function (this: TodoComponent, event: Event) {
+    this.toggle();
+  }
+);
+le();
+  }
+);

package/dist/test/qwik/Todo_onLabelDblClick.ts

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

package/dist/test/qwik/Todo_template.tsx

@@ -0,0 +1,46 @@
+import { injectMethod, QRL, h } from "@builder.io/qwik";
+import { TodoComponent } from "./Todo_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
+            type="checkbox"
+            class="toggle"
+            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>
+    );
+  }
+);