@builder.io/mitosis 0.0.45 → 0.0.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/__tests__/builder.test.js +71 -68
- package/dist/src/__tests__/context.test.js +13 -10
- package/dist/src/__tests__/data/basic.raw.jsx +1 -1
- package/dist/src/__tests__/data/blocks/button-with-metadata.raw.jsx +1 -1
- package/dist/src/__tests__/data/blocks/columns.raw.jsx +2 -2
- package/dist/src/__tests__/data/blocks/custom-code.raw.jsx +3 -3
- package/dist/src/__tests__/data/blocks/embed.raw.jsx +3 -3
- package/dist/src/__tests__/data/blocks/form.raw.jsx +5 -5
- package/dist/src/__tests__/data/blocks/image.raw.jsx +4 -4
- package/dist/src/__tests__/data/blocks/stamped-io.raw.jsx +4 -4
- package/dist/src/__tests__/data/context/component-with-context.lite.jsx +2 -2
- package/dist/src/__tests__/data/context/simple.context.lite.js +1 -1
- package/dist/src/__tests__/html.test.js +2 -2
- package/dist/src/__tests__/liquid.test.js +34 -34
- package/dist/src/__tests__/parse-jsx.test.js +1 -1
- package/dist/src/__tests__/qwik.test.js +36 -36
- package/dist/src/__tests__/react-native.test.js +35 -35
- package/dist/src/__tests__/react.test.js +35 -35
- package/dist/src/__tests__/solid.test.js +32 -32
- package/dist/src/__tests__/vue.test.js +35 -34
- package/dist/src/generators/angular.d.ts +4 -7
- package/dist/src/generators/angular.js +77 -81
- package/dist/src/generators/builder.d.ts +4 -4
- package/dist/src/generators/builder.js +57 -57
- package/dist/src/generators/context/react.d.ts +3 -1
- package/dist/src/generators/context/react.js +20 -17
- package/dist/src/generators/html.d.ts +5 -9
- package/dist/src/generators/html.js +205 -199
- package/dist/src/generators/liquid.d.ts +5 -9
- package/dist/src/generators/liquid.js +62 -59
- package/dist/src/generators/mitosis.d.ts +6 -7
- package/dist/src/generators/mitosis.js +61 -63
- package/dist/src/generators/qwik/component.js +13 -13
- package/dist/src/generators/qwik/handlers.js +12 -8
- package/dist/src/generators/qwik/jsx.js +13 -9
- package/dist/src/generators/qwik/styles.js +11 -7
- package/dist/src/generators/react-native.d.ts +4 -7
- package/dist/src/generators/react-native.js +25 -22
- package/dist/src/generators/react.d.ts +4 -8
- package/dist/src/generators/react.js +103 -112
- package/dist/src/generators/solid.d.ts +4 -8
- package/dist/src/generators/solid.js +55 -54
- package/dist/src/generators/svelte.d.ts +4 -7
- package/dist/src/generators/svelte.js +120 -123
- package/dist/src/generators/swift-ui.d.ts +2 -2
- package/dist/src/generators/swift-ui.js +62 -62
- package/dist/src/generators/template.d.ts +4 -8
- package/dist/src/generators/template.js +48 -45
- package/dist/src/generators/vue.d.ts +9 -9
- package/dist/src/generators/vue.js +169 -169
- package/dist/src/helpers/babel-transform.js +9 -9
- package/dist/src/helpers/collect-styles.js +39 -39
- package/dist/src/helpers/dash-case.js +1 -1
- package/dist/src/helpers/generic-format.test.js +2 -2
- package/dist/src/helpers/get-components-used.js +2 -2
- package/dist/src/helpers/get-components.js +3 -3
- package/dist/src/helpers/get-props.js +1 -1
- package/dist/src/helpers/get-refs.js +2 -2
- package/dist/src/helpers/get-state-object-string.js +5 -5
- package/dist/src/helpers/get-state-used.js +1 -1
- package/dist/src/helpers/get-styles.js +1 -1
- package/dist/src/helpers/getters-to-functions.js +4 -4
- package/dist/src/helpers/handle-missing-state.js +1 -1
- package/dist/src/helpers/has-component.js +2 -2
- package/dist/src/helpers/has-props.js +1 -1
- package/dist/src/helpers/is-children.js +1 -1
- package/dist/src/helpers/json.d.ts +1 -0
- package/dist/src/helpers/json.js +17 -0
- package/dist/src/helpers/map-refs.js +4 -4
- package/dist/src/helpers/map-to-attributes.js +4 -4
- package/dist/src/helpers/map-to-css.js +2 -2
- package/dist/src/helpers/parse-node.js +2 -2
- package/dist/src/helpers/parse-reactive-script.js +4 -4
- package/dist/src/helpers/process-http-requests.js +1 -1
- package/dist/src/helpers/process-tag-references.js +4 -4
- package/dist/src/helpers/remove-surrounding-block.test.js +1 -1
- package/dist/src/helpers/render-imports.js +7 -7
- package/dist/src/helpers/replace-idenifiers.js +1 -1
- package/dist/src/helpers/strip-meta-properties.js +2 -2
- package/dist/src/helpers/trace-reference-to-module-path.js +1 -1
- package/dist/src/helpers/traverse-nodes.js +2 -2
- package/dist/src/helpers/try-prettier-format.js +1 -1
- package/dist/src/index.d.ts +2 -0
- package/dist/src/index.js +2 -0
- package/dist/src/modules/plugins.d.ts +2 -10
- package/dist/src/parsers/angular.js +13 -13
- package/dist/src/parsers/builder.js +54 -58
- package/dist/src/parsers/context.js +2 -2
- package/dist/src/parsers/jsx.js +59 -87
- package/dist/src/parsers/liquid.js +191 -194
- package/dist/src/plugins/compile-away-builder-components.js +49 -45
- package/dist/src/plugins/compile-away-components.js +3 -3
- package/dist/src/plugins/map-styles.js +3 -3
- package/dist/src/targets.d.ts +24 -0
- package/dist/src/targets.js +30 -0
- package/dist/src/types/config.d.ts +31 -0
- package/dist/src/types/{jsx-lite-component.js → config.js} +0 -0
- package/dist/{test/qwik/Todo/Todo.js/low.js → src/types/generators.d.ts} +0 -0
- package/dist/src/types/generators.js +1 -0
- package/dist/src/types/plugins.d.ts +11 -0
- package/dist/src/types/{jsx-lite-context.js → plugins.js} +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.cjs/high.cjs +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.cjs/low.cjs +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.cjs/med.cjs +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.js/high.js +0 -0
- package/dist/test/qwik/{qwik/todo → todo}/Todo.js/low.js +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.js/med.js +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.tsx/high.tsx +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.tsx/low.tsx +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.tsx/med.tsx +0 -0
- package/dist/test/qwik/{Todos → todos}/Todo.tsx/high.tsx +0 -0
- package/dist/test/qwik/{Todos → todos}/Todo.tsx/low.tsx +0 -0
- package/dist/test/qwik/{Todos → todos}/Todo.tsx/med.tsx +0 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/dist/src/__tests__/data/blocks/tabs.raw.d.ts +0 -11
- package/dist/src/__tests__/data/blocks/tabs.raw.jsx +0 -24
- package/dist/src/__tests__/qoot.test.d.ts +0 -1
- package/dist/src/__tests__/qoot.test.js +0 -115
- package/dist/src/generators/jsx-lite.d.ts +0 -10
- package/dist/src/generators/jsx-lite.js +0 -176
- package/dist/src/generators/qoot.d.ts +0 -21
- package/dist/src/generators/qoot.js +0 -442
- package/dist/src/generators/qwik.d.ts +0 -21
- package/dist/src/generators/qwik.js +0 -458
- package/dist/src/helpers/create-jsx-lite-component.d.ts +0 -2
- package/dist/src/helpers/create-jsx-lite-component.js +0 -16
- package/dist/src/helpers/create-jsx-lite-context.d.ts +0 -4
- package/dist/src/helpers/create-jsx-lite-context.js +0 -18
- package/dist/src/helpers/create-jsx-lite-node.d.ts +0 -2
- package/dist/src/helpers/create-jsx-lite-node.js +0 -16
- package/dist/src/helpers/is-jsx-lite-node.d.ts +0 -2
- package/dist/src/helpers/is-jsx-lite-node.js +0 -7
- package/dist/src/types/jsx-lite-component.d.ts +0 -63
- package/dist/src/types/jsx-lite-context.d.ts +0 -6
- package/dist/src/types/jsx-lite-node.d.ts +0 -13
- package/dist/src/types/jsx-lite-node.js +0 -2
- package/dist/src/types/jsx-lite-styles.d.ts +0 -1
- package/dist/src/types/jsx-lite-styles.js +0 -2
- package/dist/test/qoot/Todo/bundle.js +0 -88
- package/dist/test/qoot/Todo/component.ts +0 -17
- package/dist/test/qoot/Todo/onButtonClick.ts +0 -13
- package/dist/test/qoot/Todo/onInput2Blur.ts +0 -11
- package/dist/test/qoot/Todo/onInput2KeyUp.ts +0 -10
- package/dist/test/qoot/Todo/onInputClick.ts +0 -10
- package/dist/test/qoot/Todo/onLabelDblClick.ts +0 -11
- package/dist/test/qoot/Todo/public.ts +0 -4
- package/dist/test/qoot/Todo/template.tsx +0 -46
- package/dist/test/qoot/Todos/component.ts +0 -9
- package/dist/test/qoot/Todos/onInputClick.ts +0 -14
- package/dist/test/qoot/Todos/public.ts +0 -3
- package/dist/test/qoot/Todos/template.tsx +0 -30
- package/dist/test/qwik/Todo/bundle.js +0 -46
- package/dist/test/qwik/Todo/component.ts +0 -17
- package/dist/test/qwik/Todo/onButtonClick.ts +0 -10
- package/dist/test/qwik/Todo/onInput2Blur.ts +0 -14
- package/dist/test/qwik/Todo/onInput2KeyUp.ts +0 -10
- package/dist/test/qwik/Todo/onInputClick.ts +0 -13
- package/dist/test/qwik/Todo/onLabelDblClick.ts +0 -11
- package/dist/test/qwik/Todo/public.ts +0 -3
- package/dist/test/qwik/Todo/template.tsx +0 -46
- package/dist/test/qwik/Todo.ts +0 -4
- package/dist/test/qwik/Todo_component.ts +0 -17
- package/dist/test/qwik/Todo_onButtonClick.ts +0 -13
- package/dist/test/qwik/Todo_onInput2Blur.ts +0 -14
- package/dist/test/qwik/Todo_onInput2KeyUp.ts +0 -10
- package/dist/test/qwik/Todo_onInputClick.ts +0 -13
- package/dist/test/qwik/Todo_onLabelDblClick.ts +0 -14
- package/dist/test/qwik/Todo_template.tsx +0 -46
- package/dist/test/qwik/Todos/component.ts +0 -9
- package/dist/test/qwik/Todos/onInputClick.ts +0 -14
- package/dist/test/qwik/Todos/public.ts +0 -3
- package/dist/test/qwik/Todos/template.tsx +0 -30
- package/dist/test/qwik/Todos.ts +0 -3
- package/dist/test/qwik/Todos_component.ts +0 -9
- package/dist/test/qwik/Todos_onInputClick.ts +0 -14
- package/dist/test/qwik/Todos_template.tsx +0 -30
- package/dist/test/qwik/qwik/Image/high.js +0 -1
- package/dist/test/qwik/qwik/Image/low.js +0 -75
- package/dist/test/qwik/qwik/Image/med.js +0 -9
- package/dist/test/qwik/qwik/Image.slow/high.js +0 -1
- package/dist/test/qwik/qwik/Image.slow/low.js +0 -75
- package/dist/test/qwik/qwik/Image.slow/med.js +0 -9
- package/dist/test/qwik/qwik/button/high.js +0 -8
- package/dist/test/qwik/qwik/button/low.js +0 -34
- package/dist/test/qwik/qwik/button/med.js +0 -9
- package/dist/test/qwik/qwik/hello_world/stylesheet/high.jsx +0 -1
- package/dist/test/qwik/qwik/hello_world/stylesheet/low.jsx +0 -24
- package/dist/test/qwik/qwik/hello_world/stylesheet/med.jsx +0 -9
- package/dist/test/qwik/qwik/page-with-symbol/high.js +0 -1
- package/dist/test/qwik/qwik/page-with-symbol/low.js +0 -49
- package/dist/test/qwik/qwik/page-with-symbol/med.js +0 -9
- package/dist/test/qwik/qwik/svg/high.js +0 -1
- package/dist/test/qwik/qwik/svg/low.js +0 -30
- package/dist/test/qwik/qwik/svg/med.js +0 -9
- package/dist/test/qwik/qwik/todo/Todo.cjs/high.cjs +0 -31
- package/dist/test/qwik/qwik/todo/Todo.cjs/low.cjs +0 -1
- package/dist/test/qwik/qwik/todo/Todo.cjs/med.cjs +0 -59
- package/dist/test/qwik/qwik/todo/Todo.js/high.js +0 -5
- package/dist/test/qwik/qwik/todo/Todo.js/med.js +0 -1
- package/dist/test/qwik/qwik/todo/Todo.tsx/high.tsx +0 -30
- package/dist/test/qwik/qwik/todo/Todo.tsx/low.tsx +0 -1
- package/dist/test/qwik/qwik/todo/Todo.tsx/med.tsx +0 -34
- package/dist/test/qwik/qwik/todos/Todo.tsx/high.tsx +0 -12
- package/dist/test/qwik/qwik/todos/Todo.tsx/low.tsx +0 -24
- package/dist/test/qwik/qwik/todos/Todo.tsx/med.tsx +0 -8
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import { Component, injectMethod, jsxFactory, QRL, injectEventHandler, provideEvent, markDirty } from '@builder.io/qwik';
|
|
2
|
-
|
|
3
|
-
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; }
|
|
4
|
-
class TodoComponent$1 extends Component {
|
|
5
|
-
constructor(...args) {
|
|
6
|
-
super(...args);
|
|
7
|
-
|
|
8
|
-
_defineProperty$1(this, "editing", false);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
toggle() {
|
|
12
|
-
this.todo.completed = !this.todo.completed;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
$newState() {
|
|
16
|
-
return {}; // TODO
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
_defineProperty$1(TodoComponent$1, "$templateQRL", "ui:/Todo/bundle.template");
|
|
22
|
-
|
|
23
|
-
const template = injectMethod(TodoComponent$1, function () {
|
|
24
|
-
return jsxFactory("li", {
|
|
25
|
-
class: `${this.todo.completed ? "completed" : ""} ${this.editing ? "editing" : ""}`
|
|
26
|
-
}, jsxFactory("div", {
|
|
27
|
-
class: "view"
|
|
28
|
-
}, jsxFactory("input", {
|
|
29
|
-
class: "toggle",
|
|
30
|
-
type: "checkbox",
|
|
31
|
-
checked: this.todo.completed,
|
|
32
|
-
"on:click": QRL`ui:/Todo/bundle.onInputClick`
|
|
33
|
-
}), jsxFactory("label", {
|
|
34
|
-
"on:dblclick": QRL`ui:/Todo/bundle.onLabelDblClick`
|
|
35
|
-
}, this.todo.text), jsxFactory("button", {
|
|
36
|
-
class: "destroy",
|
|
37
|
-
"on:click": QRL`ui:/Todo/bundle.onButtonClick`
|
|
38
|
-
})), this.editing ? jsxFactory(null, null, jsxFactory("input", {
|
|
39
|
-
class: "edit",
|
|
40
|
-
value: this.todo.text,
|
|
41
|
-
"on:blur": QRL`ui:/Todo/bundle.onInput2Blur`,
|
|
42
|
-
"on:keyup": QRL`ui:/Todo/bundle.onInput2KeyUp`
|
|
43
|
-
})) : undefined);
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
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; }
|
|
47
|
-
class TodoComponent extends Component {
|
|
48
|
-
constructor(...args) {
|
|
49
|
-
super(...args);
|
|
50
|
-
|
|
51
|
-
_defineProperty(this, "editing", false);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
toggle() {
|
|
55
|
-
this.todo.completed = !this.todo.completed;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
$newState() {
|
|
59
|
-
return {}; // TODO
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
_defineProperty(TodoComponent, "$templateQRL", "ui:/Todo/bundle.template");
|
|
65
|
-
|
|
66
|
-
const onInputClick = injectEventHandler(TodoComponent$1, provideEvent(), async function (event) {
|
|
67
|
-
this.toggle();
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
const onLabelDblClick = injectEventHandler(TodoComponent$1, provideEvent(), async function (event) {
|
|
71
|
-
this.editing = true;
|
|
72
|
-
markDirty(this);
|
|
73
|
-
});
|
|
74
|
-
|
|
75
|
-
const onButtonClick = injectEventHandler(TodoComponent$1, provideEvent(), async function (event) {
|
|
76
|
-
todosState.todos.splice(todosState.todos.indexOf(this.todo));
|
|
77
|
-
});
|
|
78
|
-
|
|
79
|
-
const onInput2Blur = injectEventHandler(TodoComponent$1, provideEvent(), async function (event) {
|
|
80
|
-
this.editing = false;
|
|
81
|
-
markDirty(this);
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
const onInput2KeyUp = injectEventHandler(TodoComponent$1, provideEvent(), async function (event) {
|
|
85
|
-
this.todo.text = event.target.value;
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
export { TodoComponent, onButtonClick, onInput2Blur, onInput2KeyUp, onInputClick, onLabelDblClick, template };
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Component, QRL } from "@builder.io/qwik";
|
|
2
|
-
|
|
3
|
-
export class TodoComponent extends Component<any, any> {
|
|
4
|
-
static $templateQRL = "ui:/Todo/template";
|
|
5
|
-
|
|
6
|
-
editing = false;
|
|
7
|
-
toggle() {
|
|
8
|
-
this.todo.completed = !this.todo.completed;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
$newState() {
|
|
12
|
-
return {}; // TODO
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
export default injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
todosState.todos.splice(todosState.todos.indexOf(this.todo));
|
|
9
|
-
}
|
|
10
|
-
);
|
|
11
|
-
odo));
|
|
12
|
-
}
|
|
13
|
-
);
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
export const onInput2Blur = injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
this.editing = false;
|
|
9
|
-
markDirty(this);
|
|
10
|
-
}
|
|
11
|
-
);
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
export const onInput2KeyUp = injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
this.todo.text = event.target.value;
|
|
9
|
-
}
|
|
10
|
-
);
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
export const onInputClick = injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
this.toggle();
|
|
9
|
-
}
|
|
10
|
-
);
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
export const onLabelDblClick = injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
this.editing = true;
|
|
9
|
-
markDirty(this);
|
|
10
|
-
}
|
|
11
|
-
);
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { injectMethod, QRL, jsxFactory } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
import { TodosState as todosState } from "../TodosState/public.js";
|
|
5
|
-
|
|
6
|
-
export const template = injectMethod(
|
|
7
|
-
TodoComponent,
|
|
8
|
-
function (this: TodoComponent) {
|
|
9
|
-
return (
|
|
10
|
-
<li
|
|
11
|
-
class={`${this.todo.completed ? "completed" : ""} ${
|
|
12
|
-
this.editing ? "editing" : ""
|
|
13
|
-
}`}
|
|
14
|
-
>
|
|
15
|
-
<div class="view">
|
|
16
|
-
<input
|
|
17
|
-
class="toggle"
|
|
18
|
-
type="checkbox"
|
|
19
|
-
checked={this.todo.completed}
|
|
20
|
-
on:click={QRL`ui:/Todo/bundle.onInputClick`}
|
|
21
|
-
/>
|
|
22
|
-
|
|
23
|
-
<label on:dblclick={QRL`ui:/Todo/bundle.onLabelDblClick`}>
|
|
24
|
-
{this.todo.text}
|
|
25
|
-
</label>
|
|
26
|
-
|
|
27
|
-
<button
|
|
28
|
-
class="destroy"
|
|
29
|
-
on:click={QRL`ui:/Todo/bundle.onButtonClick`}
|
|
30
|
-
></button>
|
|
31
|
-
</div>
|
|
32
|
-
|
|
33
|
-
{this.editing ? (
|
|
34
|
-
<>
|
|
35
|
-
<input
|
|
36
|
-
class="edit"
|
|
37
|
-
value={this.todo.text}
|
|
38
|
-
on:blur={QRL`ui:/Todo/bundle.onInput2Blur`}
|
|
39
|
-
on:keyup={QRL`ui:/Todo/bundle.onInput2KeyUp`}
|
|
40
|
-
/>
|
|
41
|
-
</>
|
|
42
|
-
) : undefined}
|
|
43
|
-
</li>
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
);
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodosComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
export default injectEventHandler(
|
|
5
|
-
TodosComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodosComponent, event: Event) {
|
|
8
|
-
const newValue = !todosState.allCompleted;
|
|
9
|
-
|
|
10
|
-
for (const todoItem of todosState.todos) {
|
|
11
|
-
todoItem.completed = newValue;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
);
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { injectMethod, QRL, jsxFactory } from "@builder.io/qwik";
|
|
2
|
-
import { TodosComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
import { TodosState as todosState } from "../TodosState/public.js";
|
|
5
|
-
import { Todo } from "../Todo/public.js";
|
|
6
|
-
|
|
7
|
-
export default injectMethod(TodosComponent, function (this: TodosComponent) {
|
|
8
|
-
return (
|
|
9
|
-
<section class="main">
|
|
10
|
-
{todosState.todos.length ? (
|
|
11
|
-
<>
|
|
12
|
-
<input
|
|
13
|
-
class="toggle-all"
|
|
14
|
-
type="checkbox"
|
|
15
|
-
checked={todosState.allCompleted}
|
|
16
|
-
on:click={QRL`ui:/Todos/onInputClick`}
|
|
17
|
-
/>
|
|
18
|
-
</>
|
|
19
|
-
) : undefined}
|
|
20
|
-
|
|
21
|
-
<ul class="todo-list">
|
|
22
|
-
{todosState.todos.map((todo) => (
|
|
23
|
-
<>
|
|
24
|
-
<Todo todo={todo}></Todo>
|
|
25
|
-
</>
|
|
26
|
-
))}
|
|
27
|
-
</ul>
|
|
28
|
-
</section>
|
|
29
|
-
);
|
|
30
|
-
});
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { Component, injectMethod, h, QRL } from '@builder.io/qwik';
|
|
2
|
-
|
|
3
|
-
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; }
|
|
4
|
-
class TodoComponent extends Component {
|
|
5
|
-
constructor(...args) {
|
|
6
|
-
super(...args);
|
|
7
|
-
|
|
8
|
-
_defineProperty(this, "editing", false);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
toggle() {
|
|
12
|
-
this.todo.completed = !this.todo.completed;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
$newState() {
|
|
16
|
-
return {}; // TODO
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
_defineProperty(TodoComponent, "$templateQRL", "ui:/Todo/bundle.template");
|
|
22
|
-
|
|
23
|
-
const template = injectMethod(TodoComponent, function () {
|
|
24
|
-
return h("li", {
|
|
25
|
-
class: `${this.todo.completed ? "completed" : ""} ${this.editing ? "editing" : ""}`
|
|
26
|
-
}, h("div", {
|
|
27
|
-
class: "view"
|
|
28
|
-
}, h("input", {
|
|
29
|
-
type: "checkbox",
|
|
30
|
-
class: "toggle",
|
|
31
|
-
checked: this.todo.completed,
|
|
32
|
-
"on:click": QRL`ui:/Todo/bundle.onInputClick`
|
|
33
|
-
}), h("label", {
|
|
34
|
-
"on:dblclick": QRL`ui:/Todo/bundle.onLabelDblClick`
|
|
35
|
-
}, this.todo.text), h("button", {
|
|
36
|
-
class: "destroy",
|
|
37
|
-
"on:click": QRL`ui:/Todo/bundle.onButtonClick`
|
|
38
|
-
})), this.editing ? h(null, null, h("input", {
|
|
39
|
-
class: "edit",
|
|
40
|
-
value: this.todo.text,
|
|
41
|
-
"on:blur": QRL`ui:/Todo/bundle.onInput2Blur`,
|
|
42
|
-
"on:keyup": QRL`ui:/Todo/bundle.onInput2KeyUp`
|
|
43
|
-
})) : undefined);
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
export { template };
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Component, QRL } from "@builder.io/qwik";
|
|
2
|
-
|
|
3
|
-
export class TodoComponent extends Component<any, any> {
|
|
4
|
-
static $templateQRL = "ui:/Todo/template";
|
|
5
|
-
|
|
6
|
-
editing = false;
|
|
7
|
-
toggle() {
|
|
8
|
-
this.todo.completed = !this.todo.completed;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
$newState() {
|
|
12
|
-
return {}; // TODO
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
export const onButtonClick = injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
todosState.todos.splice(todosState.todos.indexOf(this.todo));
|
|
9
|
-
}
|
|
10
|
-
);
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
export default injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
this.editing = false;
|
|
9
|
-
markDirty(this);
|
|
10
|
-
}
|
|
11
|
-
);
|
|
12
|
-
his);
|
|
13
|
-
}
|
|
14
|
-
);
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
export const onInput2KeyUp = injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
this.todo.text = event.target.value;
|
|
9
|
-
}
|
|
10
|
-
);
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
export default injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
this.toggle();
|
|
9
|
-
}
|
|
10
|
-
);
|
|
11
|
-
le();
|
|
12
|
-
}
|
|
13
|
-
);
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
export const onLabelDblClick = injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
this.editing = true;
|
|
9
|
-
markDirty(this);
|
|
10
|
-
}
|
|
11
|
-
);
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { injectMethod, QRL, jsxFactory } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
import { TodosState as todosState } from "../TodosState/public.js";
|
|
5
|
-
|
|
6
|
-
export const template = injectMethod(
|
|
7
|
-
TodoComponent,
|
|
8
|
-
function (this: TodoComponent) {
|
|
9
|
-
return (
|
|
10
|
-
<li
|
|
11
|
-
class={`${this.todo.completed ? "completed" : ""} ${
|
|
12
|
-
this.editing ? "editing" : ""
|
|
13
|
-
}`}
|
|
14
|
-
>
|
|
15
|
-
<div class="view">
|
|
16
|
-
<input
|
|
17
|
-
class="toggle"
|
|
18
|
-
type="checkbox"
|
|
19
|
-
checked={this.todo.completed}
|
|
20
|
-
on:click={QRL`ui:/Todo/bundle.onInputClick`}
|
|
21
|
-
/>
|
|
22
|
-
|
|
23
|
-
<label on:dblclick={QRL`ui:/Todo/bundle.onLabelDblClick`}>
|
|
24
|
-
{this.todo.text}
|
|
25
|
-
</label>
|
|
26
|
-
|
|
27
|
-
<button
|
|
28
|
-
class="destroy"
|
|
29
|
-
on:click={QRL`ui:/Todo/bundle.onButtonClick`}
|
|
30
|
-
></button>
|
|
31
|
-
</div>
|
|
32
|
-
|
|
33
|
-
{this.editing ? (
|
|
34
|
-
<>
|
|
35
|
-
<input
|
|
36
|
-
class="edit"
|
|
37
|
-
value={this.todo.text}
|
|
38
|
-
on:blur={QRL`ui:/Todo/bundle.onInput2Blur`}
|
|
39
|
-
on:keyup={QRL`ui:/Todo/bundle.onInput2KeyUp`}
|
|
40
|
-
/>
|
|
41
|
-
</>
|
|
42
|
-
) : undefined}
|
|
43
|
-
</li>
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
);
|
package/dist/test/qwik/Todo.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Component, QRL } from "@builder.io/qwik";
|
|
2
|
-
|
|
3
|
-
export class TodoComponent extends Component<any, any> {
|
|
4
|
-
static $templateQRL = "ui:/Todo_template";
|
|
5
|
-
|
|
6
|
-
editing = false;
|
|
7
|
-
toggle() {
|
|
8
|
-
this.todo.completed = !this.todo.completed;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
$newState() {
|
|
12
|
-
return {}; // TODO
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./Todo_component.js";
|
|
3
|
-
|
|
4
|
-
export default injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
todosState.todos.splice(todosState.todos.indexOf(this.todo));
|
|
9
|
-
}
|
|
10
|
-
);
|
|
11
|
-
odo));
|
|
12
|
-
}
|
|
13
|
-
);
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./Todo_component.js";
|
|
3
|
-
|
|
4
|
-
export default injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
this.editing = false;
|
|
9
|
-
markDirty(this);
|
|
10
|
-
}
|
|
11
|
-
);
|
|
12
|
-
his);
|
|
13
|
-
}
|
|
14
|
-
);
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./Todo_component.js";
|
|
3
|
-
|
|
4
|
-
export const onInput2KeyUp = injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
this.todo.text = event.target.value;
|
|
9
|
-
}
|
|
10
|
-
);
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./Todo_component.js";
|
|
3
|
-
|
|
4
|
-
export default injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
this.toggle();
|
|
9
|
-
}
|
|
10
|
-
);
|
|
11
|
-
le();
|
|
12
|
-
}
|
|
13
|
-
);
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./Todo_component.js";
|
|
3
|
-
|
|
4
|
-
export default injectEventHandler(
|
|
5
|
-
TodoComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodoComponent, event: Event) {
|
|
8
|
-
this.editing = true;
|
|
9
|
-
markDirty(this);
|
|
10
|
-
}
|
|
11
|
-
);
|
|
12
|
-
y(this);
|
|
13
|
-
}
|
|
14
|
-
);
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { injectMethod, QRL, h } from "@builder.io/qwik";
|
|
2
|
-
import { TodoComponent } from "./Todo_component.js";
|
|
3
|
-
|
|
4
|
-
import { TodosState as todosState } from "../TodosState/public.js";
|
|
5
|
-
|
|
6
|
-
export const template = injectMethod(
|
|
7
|
-
TodoComponent,
|
|
8
|
-
function (this: TodoComponent) {
|
|
9
|
-
return (
|
|
10
|
-
<li
|
|
11
|
-
class={`${this.todo.completed ? "completed" : ""} ${
|
|
12
|
-
this.editing ? "editing" : ""
|
|
13
|
-
}`}
|
|
14
|
-
>
|
|
15
|
-
<div class="view">
|
|
16
|
-
<input
|
|
17
|
-
type="checkbox"
|
|
18
|
-
class="toggle"
|
|
19
|
-
checked={this.todo.completed}
|
|
20
|
-
on:click={QRL`ui:/Todo/bundle.onInputClick`}
|
|
21
|
-
/>
|
|
22
|
-
|
|
23
|
-
<label on:dblclick={QRL`ui:/Todo/bundle.onLabelDblClick`}>
|
|
24
|
-
{this.todo.text}
|
|
25
|
-
</label>
|
|
26
|
-
|
|
27
|
-
<button
|
|
28
|
-
class="destroy"
|
|
29
|
-
on:click={QRL`ui:/Todo/bundle.onButtonClick`}
|
|
30
|
-
></button>
|
|
31
|
-
</div>
|
|
32
|
-
|
|
33
|
-
{this.editing ? (
|
|
34
|
-
<>
|
|
35
|
-
<input
|
|
36
|
-
class="edit"
|
|
37
|
-
value={this.todo.text}
|
|
38
|
-
on:blur={QRL`ui:/Todo/bundle.onInput2Blur`}
|
|
39
|
-
on:keyup={QRL`ui:/Todo/bundle.onInput2KeyUp`}
|
|
40
|
-
/>
|
|
41
|
-
</>
|
|
42
|
-
) : undefined}
|
|
43
|
-
</li>
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
);
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
|
|
2
|
-
import { TodosComponent } from "./component.js";
|
|
3
|
-
|
|
4
|
-
export default injectEventHandler(
|
|
5
|
-
TodosComponent,
|
|
6
|
-
provideEvent(),
|
|
7
|
-
async function (this: TodosComponent, event: Event) {
|
|
8
|
-
const newValue = !todosState.allCompleted;
|
|
9
|
-
|
|
10
|
-
for (const todoItem of todosState.todos) {
|
|
11
|
-
todoItem.completed = newValue;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
);
|