lunet 0.0.11 → 0.0.12
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/index.cjs +42 -42
- package/dist/index.d.ts +199 -6
- package/dist/index.js +42 -42
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -30,27 +30,27 @@ var __export = (target, all) => {
|
|
|
30
30
|
var exports_src = {};
|
|
31
31
|
__export(exports_src, {
|
|
32
32
|
h: () => h,
|
|
33
|
-
fragment: () => fragment,
|
|
34
33
|
createRoot: () => createRoot,
|
|
35
|
-
createComponent: () => createComponent
|
|
34
|
+
createComponent: () => createComponent,
|
|
35
|
+
Fragment: () => Fragment
|
|
36
36
|
});
|
|
37
37
|
module.exports = __toCommonJS(exports_src);
|
|
38
38
|
|
|
39
39
|
// src/jsx/component.ts
|
|
40
40
|
var createComponent = (component) => (props) => [component, props, []];
|
|
41
41
|
// src/jsx/fragment.ts
|
|
42
|
-
var
|
|
42
|
+
var Fragment = (...children) => [null, {}, children];
|
|
43
43
|
// src/jsx/likereact.ts
|
|
44
|
-
var h = (type, props, ...children) => typeof type === "string" ? [type, props ?? {}, children] : type ===
|
|
44
|
+
var h = (type, props, ...children) => typeof type === "string" ? [type, props ?? {}, children] : type === Fragment ? [null, props ?? {}, children] : type(props);
|
|
45
45
|
// src/index.ts
|
|
46
46
|
var createRoot = (el, options) => {
|
|
47
|
-
var createText = (
|
|
48
|
-
const node2 = new Text(
|
|
49
|
-
return [[0,
|
|
47
|
+
var createText = (jsx3) => {
|
|
48
|
+
const node2 = new Text(jsx3);
|
|
49
|
+
return [[0, jsx3, node2], node2];
|
|
50
50
|
};
|
|
51
|
-
var updateText = (dom2,
|
|
52
|
-
if (dom2[1] !==
|
|
53
|
-
dom2[2].textContent = dom2[1] =
|
|
51
|
+
var updateText = (dom2, jsx3) => {
|
|
52
|
+
if (dom2[1] !== jsx3)
|
|
53
|
+
dom2[2].textContent = dom2[1] = jsx3;
|
|
54
54
|
};
|
|
55
55
|
var revokeText = (dom2) => dom2[2].remove();
|
|
56
56
|
var afterText = (dom2, node2) => {
|
|
@@ -117,8 +117,8 @@ var createRoot = (el, options) => {
|
|
|
117
117
|
break;
|
|
118
118
|
}
|
|
119
119
|
};
|
|
120
|
-
var createElement = (
|
|
121
|
-
const [tag, props, children] =
|
|
120
|
+
var createElement = (jsx3) => {
|
|
121
|
+
const [tag, props, children] = jsx3;
|
|
122
122
|
props.$beforeMount?.();
|
|
123
123
|
const element = document.createElement(tag);
|
|
124
124
|
elementEvents.set(element, {});
|
|
@@ -129,11 +129,11 @@ var createRoot = (el, options) => {
|
|
|
129
129
|
setAttribute(element, name, value);
|
|
130
130
|
const rendered_children = children.map(createNode);
|
|
131
131
|
element.append(...rendered_children.map((e) => e[1]));
|
|
132
|
-
return [[1,
|
|
132
|
+
return [[1, jsx3, element, rendered_children.map((e) => e[0])], element];
|
|
133
133
|
};
|
|
134
|
-
var updateElement = (dom2,
|
|
134
|
+
var updateElement = (dom2, jsx3) => {
|
|
135
135
|
const [, [, old_props, old_children], element, rendered_children] = dom2;
|
|
136
|
-
const [, new_props, new_children] =
|
|
136
|
+
const [, new_props, new_children] = jsx3;
|
|
137
137
|
old_props.$beforeUpdate?.call(element, new CustomEvent("beforeupdate", {
|
|
138
138
|
detail: element
|
|
139
139
|
}));
|
|
@@ -167,7 +167,7 @@ var createRoot = (el, options) => {
|
|
|
167
167
|
break;
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
|
-
dom2[1] =
|
|
170
|
+
dom2[1] = jsx3;
|
|
171
171
|
new_props.$update?.call(element, new CustomEvent("update", {
|
|
172
172
|
detail: element
|
|
173
173
|
}));
|
|
@@ -187,8 +187,8 @@ var createRoot = (el, options) => {
|
|
|
187
187
|
dom2[2].after(node2);
|
|
188
188
|
};
|
|
189
189
|
var batch = options?.batch ?? ((cb) => cb());
|
|
190
|
-
var createComponent2 = (
|
|
191
|
-
const [component, init_props, children] =
|
|
190
|
+
var createComponent2 = (jsx3) => {
|
|
191
|
+
const [component, init_props, children] = jsx3;
|
|
192
192
|
let rendered_dom;
|
|
193
193
|
let doc_frag;
|
|
194
194
|
const props = component((jsx22) => {
|
|
@@ -205,9 +205,9 @@ var createRoot = (el, options) => {
|
|
|
205
205
|
}
|
|
206
206
|
return [[3, [component, props, children], rendered_dom], doc_frag];
|
|
207
207
|
};
|
|
208
|
-
var updateComponent = (dom2,
|
|
208
|
+
var updateComponent = (dom2, jsx3) => {
|
|
209
209
|
const old_props = dom2[1][1];
|
|
210
|
-
const new_props =
|
|
210
|
+
const new_props = jsx3[1];
|
|
211
211
|
batch(() => {
|
|
212
212
|
for (const [key, value] of Object.entries(new_props))
|
|
213
213
|
if (old_props[key] !== value)
|
|
@@ -216,35 +216,35 @@ var createRoot = (el, options) => {
|
|
|
216
216
|
};
|
|
217
217
|
var revokeComponent = (dom2) => revokeFragment(dom2[2]);
|
|
218
218
|
var afterComponent = (dom2, node2) => afterFragment(dom2[2], node2);
|
|
219
|
-
var createNode = (
|
|
220
|
-
if (typeof
|
|
221
|
-
return createText(
|
|
222
|
-
if (Array.isArray(
|
|
223
|
-
const [tag] =
|
|
219
|
+
var createNode = (jsx3) => {
|
|
220
|
+
if (typeof jsx3 === "string")
|
|
221
|
+
return createText(jsx3);
|
|
222
|
+
if (Array.isArray(jsx3)) {
|
|
223
|
+
const [tag] = jsx3;
|
|
224
224
|
if (typeof tag === "string")
|
|
225
|
-
return createElement(
|
|
225
|
+
return createElement(jsx3);
|
|
226
226
|
if (typeof tag === "function")
|
|
227
|
-
return createComponent2(
|
|
227
|
+
return createComponent2(jsx3);
|
|
228
228
|
if (tag === null)
|
|
229
|
-
return createFragment(
|
|
229
|
+
return createFragment(jsx3);
|
|
230
230
|
}
|
|
231
231
|
throw new Error(`Unrecognized JSX node`, {
|
|
232
|
-
cause:
|
|
232
|
+
cause: jsx3
|
|
233
233
|
});
|
|
234
234
|
};
|
|
235
|
-
var updateNode = (dom2,
|
|
235
|
+
var updateNode = (dom2, jsx3) => {
|
|
236
236
|
switch (dom2[0]) {
|
|
237
237
|
case 0:
|
|
238
|
-
updateText(dom2,
|
|
238
|
+
updateText(dom2, jsx3);
|
|
239
239
|
break;
|
|
240
240
|
case 1:
|
|
241
|
-
updateElement(dom2,
|
|
241
|
+
updateElement(dom2, jsx3);
|
|
242
242
|
break;
|
|
243
243
|
case 2:
|
|
244
|
-
updateFragment(dom2,
|
|
244
|
+
updateFragment(dom2, jsx3);
|
|
245
245
|
break;
|
|
246
246
|
case 3:
|
|
247
|
-
updateComponent(dom2,
|
|
247
|
+
updateComponent(dom2, jsx3);
|
|
248
248
|
break;
|
|
249
249
|
}
|
|
250
250
|
};
|
|
@@ -280,17 +280,17 @@ var createRoot = (el, options) => {
|
|
|
280
280
|
break;
|
|
281
281
|
}
|
|
282
282
|
};
|
|
283
|
-
var createFragment = (
|
|
284
|
-
const [, , children] =
|
|
283
|
+
var createFragment = (jsx3) => {
|
|
284
|
+
const [, , children] = jsx3;
|
|
285
285
|
const mark = new Comment;
|
|
286
286
|
const el2 = new DocumentFragment;
|
|
287
287
|
const rendered_children = children.map(createNode);
|
|
288
288
|
el2.append(mark, ...rendered_children.map((e) => e[1]));
|
|
289
|
-
return [[2,
|
|
289
|
+
return [[2, jsx3, mark, rendered_children.map((e) => e[0])], el2];
|
|
290
290
|
};
|
|
291
|
-
var updateFragment = (dom2,
|
|
291
|
+
var updateFragment = (dom2, jsx3) => {
|
|
292
292
|
const [, [, , old_children], mark, rendered_children] = dom2;
|
|
293
|
-
const [, , new_children] =
|
|
293
|
+
const [, , new_children] = jsx3;
|
|
294
294
|
for (const [type, idx, jsx22] of diff(old_children, new_children)) {
|
|
295
295
|
switch (type) {
|
|
296
296
|
case 0:
|
|
@@ -311,7 +311,7 @@ var createRoot = (el, options) => {
|
|
|
311
311
|
break;
|
|
312
312
|
}
|
|
313
313
|
}
|
|
314
|
-
dom2[1] =
|
|
314
|
+
dom2[1] = jsx3;
|
|
315
315
|
};
|
|
316
316
|
var revokeFragment = (dom2) => {
|
|
317
317
|
for (const child of dom2[3])
|
|
@@ -328,8 +328,8 @@ var createRoot = (el, options) => {
|
|
|
328
328
|
const [node, dom] = createFragment([null, {}, []]);
|
|
329
329
|
el.append(dom);
|
|
330
330
|
return {
|
|
331
|
-
render(
|
|
332
|
-
updateFragment(node, [null, {}, [
|
|
331
|
+
render(jsx3) {
|
|
332
|
+
updateFragment(node, [null, {}, [jsx3]]);
|
|
333
333
|
},
|
|
334
334
|
unmount() {
|
|
335
335
|
revokeFragment(node);
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
interface Options {
|
|
2
|
-
batch?: (cb: () => void) => void;
|
|
3
|
-
}
|
|
4
1
|
type ComponentFunction<T extends object> = (render: (jsx: JSXNode) => void, initProps: T) => T;
|
|
5
2
|
type Component<T extends object> = (props: T) => JSXComponent;
|
|
6
3
|
declare const createComponent: <T extends object>(component: ComponentFunction<T>) => Component<T>;
|
|
7
|
-
declare const
|
|
8
|
-
type JSXFactoryFunction = <T extends keyof HTMLElementTagNameMap | Component<any> | typeof
|
|
4
|
+
declare const Fragment: (...children: JSXNode[]) => JSXFragment;
|
|
5
|
+
type JSXFactoryFunction = <T extends keyof HTMLElementTagNameMap | Component<any> | typeof Fragment>(type: T, props: null | (T extends Component<infer P> ? P : {
|
|
9
6
|
[key: string]: unknown
|
|
10
7
|
}), ...children: JSXNode[]) => JSXNode;
|
|
11
8
|
declare const h: JSXFactoryFunction;
|
|
@@ -16,8 +13,204 @@ type JSXNode = JSXElement | JSXComponent | JSXFragment | string;
|
|
|
16
13
|
type JSXElement<T extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> = [T, JSX.IntrinsicElements[T], JSXNode[]];
|
|
17
14
|
type JSXComponent = [ComponentFunction<any>, object & Key, JSXNode[]];
|
|
18
15
|
type JSXFragment = [null, Key, JSXNode[]];
|
|
16
|
+
interface HTMLElAttrEvMap {
|
|
17
|
+
"$fullscreenchange": Event;
|
|
18
|
+
"$fullscreenerror": Event;
|
|
19
|
+
"$abort": UIEvent;
|
|
20
|
+
"$animationcancel": AnimationEvent;
|
|
21
|
+
"$animationend": AnimationEvent;
|
|
22
|
+
"$animationiteration": AnimationEvent;
|
|
23
|
+
"$animationstart": AnimationEvent;
|
|
24
|
+
"$auxclick": PointerEvent;
|
|
25
|
+
"$beforeinput": InputEvent;
|
|
26
|
+
"$beforetoggle": ToggleEvent;
|
|
27
|
+
"$blur": FocusEvent;
|
|
28
|
+
"$cancel": Event;
|
|
29
|
+
"$canplay": Event;
|
|
30
|
+
"$canplaythrough": Event;
|
|
31
|
+
"$change": Event;
|
|
32
|
+
"$click": MouseEvent;
|
|
33
|
+
"$close": Event;
|
|
34
|
+
"$compositionend": CompositionEvent;
|
|
35
|
+
"$compositionstart": CompositionEvent;
|
|
36
|
+
"$compositionupdate": CompositionEvent;
|
|
37
|
+
"$contextlost": Event;
|
|
38
|
+
"$contextmenu": PointerEvent;
|
|
39
|
+
"$contextrestored": Event;
|
|
40
|
+
"$copy": ClipboardEvent;
|
|
41
|
+
"$cuechange": Event;
|
|
42
|
+
"$cut": ClipboardEvent;
|
|
43
|
+
"$dblclick": MouseEvent;
|
|
44
|
+
"$drag": DragEvent;
|
|
45
|
+
"$dragend": DragEvent;
|
|
46
|
+
"$dragenter": DragEvent;
|
|
47
|
+
"$dragleave": DragEvent;
|
|
48
|
+
"$dragover": DragEvent;
|
|
49
|
+
"$dragstart": DragEvent;
|
|
50
|
+
"$drop": DragEvent;
|
|
51
|
+
"$durationchange": Event;
|
|
52
|
+
"$emptied": Event;
|
|
53
|
+
"$ended": Event;
|
|
54
|
+
"$error": ErrorEvent;
|
|
55
|
+
"$focus": FocusEvent;
|
|
56
|
+
"$focusin": FocusEvent;
|
|
57
|
+
"$focusout": FocusEvent;
|
|
58
|
+
"$formdata": FormDataEvent;
|
|
59
|
+
"$gotpointercapture": PointerEvent;
|
|
60
|
+
"$input": Event;
|
|
61
|
+
"$invalid": Event;
|
|
62
|
+
"$keydown": KeyboardEvent;
|
|
63
|
+
"$keypress": KeyboardEvent;
|
|
64
|
+
"$keyup": KeyboardEvent;
|
|
65
|
+
"$load": Event;
|
|
66
|
+
"$loadeddata": Event;
|
|
67
|
+
"$loadedmetadata": Event;
|
|
68
|
+
"$loadstart": Event;
|
|
69
|
+
"$lostpointercapture": PointerEvent;
|
|
70
|
+
"$mousedown": MouseEvent;
|
|
71
|
+
"$mouseenter": MouseEvent;
|
|
72
|
+
"$mouseleave": MouseEvent;
|
|
73
|
+
"$mousemove": MouseEvent;
|
|
74
|
+
"$mouseout": MouseEvent;
|
|
75
|
+
"$mouseover": MouseEvent;
|
|
76
|
+
"$mouseup": MouseEvent;
|
|
77
|
+
"$paste": ClipboardEvent;
|
|
78
|
+
"$pause": Event;
|
|
79
|
+
"$play": Event;
|
|
80
|
+
"$playing": Event;
|
|
81
|
+
"$pointercancel": PointerEvent;
|
|
82
|
+
"$pointerdown": PointerEvent;
|
|
83
|
+
"$pointerenter": PointerEvent;
|
|
84
|
+
"$pointerleave": PointerEvent;
|
|
85
|
+
"$pointermove": PointerEvent;
|
|
86
|
+
"$pointerout": PointerEvent;
|
|
87
|
+
"$pointerover": PointerEvent;
|
|
88
|
+
"$pointerup": PointerEvent;
|
|
89
|
+
"$progress": ProgressEvent;
|
|
90
|
+
"$ratechange": Event;
|
|
91
|
+
"$reset": Event;
|
|
92
|
+
"$resize": UIEvent;
|
|
93
|
+
"$scroll": Event;
|
|
94
|
+
"$scrollend": Event;
|
|
95
|
+
"$securitypolicyviolation": SecurityPolicyViolationEvent;
|
|
96
|
+
"$seeked": Event;
|
|
97
|
+
"$seeking": Event;
|
|
98
|
+
"$select": Event;
|
|
99
|
+
"$selectionchange": Event;
|
|
100
|
+
"$selectstart": Event;
|
|
101
|
+
"$slotchange": Event;
|
|
102
|
+
"$stalled": Event;
|
|
103
|
+
"$submit": SubmitEvent;
|
|
104
|
+
"$suspend": Event;
|
|
105
|
+
"$timeupdate": Event;
|
|
106
|
+
"$toggle": ToggleEvent;
|
|
107
|
+
"$touchcancel": TouchEvent;
|
|
108
|
+
"$touchend": TouchEvent;
|
|
109
|
+
"$touchmove": TouchEvent;
|
|
110
|
+
"$touchstart": TouchEvent;
|
|
111
|
+
"$transitioncancel": TransitionEvent;
|
|
112
|
+
"$transitionend": TransitionEvent;
|
|
113
|
+
"$transitionrun": TransitionEvent;
|
|
114
|
+
"$transitionstart": TransitionEvent;
|
|
115
|
+
"$volumechange": Event;
|
|
116
|
+
"$waiting": Event;
|
|
117
|
+
"$webkitanimationend": Event;
|
|
118
|
+
"$webkitanimationiteration": Event;
|
|
119
|
+
"$webkitanimationstart": Event;
|
|
120
|
+
"$webkittransitionend": Event;
|
|
121
|
+
"$wheel": WheelEvent;
|
|
122
|
+
}
|
|
123
|
+
type Attributes<
|
|
124
|
+
N extends keyof HTMLElementTagNameMap,
|
|
125
|
+
T extends object = {}
|
|
126
|
+
> = Partial<HTMLAttributes & T & Key & { [key in keyof HTMLElAttrEvMap] : (this: HTMLElement, ev: HTMLElAttrEvMap[key]) => unknown } & {
|
|
127
|
+
$beforeMount: () => unknown
|
|
128
|
+
$mount: (this: HTMLElementTagNameMap[N], ev: CustomEvent<HTMLElementTagNameMap[N]>) => unknown
|
|
129
|
+
$beforeUpdate: (this: HTMLElementTagNameMap[N], ev: CustomEvent<HTMLElementTagNameMap[N]>) => unknown
|
|
130
|
+
$update: (this: HTMLElementTagNameMap[N], ev: CustomEvent<HTMLElementTagNameMap[N]>) => unknown
|
|
131
|
+
$beforeUnmount: (this: HTMLElementTagNameMap[N], ev: CustomEvent<HTMLElementTagNameMap[N]>) => unknown
|
|
132
|
+
$unmount: () => unknown
|
|
133
|
+
}>;
|
|
134
|
+
type HTMLAttributes = {
|
|
135
|
+
accesskey: string
|
|
136
|
+
autocapitalize: "off" | "none" | "on" | "sentences" | "words" | "characters"
|
|
137
|
+
class: string
|
|
138
|
+
contenteditable: boolean | "" | "plaintext-only"
|
|
139
|
+
dir: "ltr" | "rtl"
|
|
140
|
+
draggable: boolean
|
|
141
|
+
hidden: "" | "hidden" | "until-found"
|
|
142
|
+
id: string
|
|
143
|
+
itemprop: string
|
|
144
|
+
lang: string
|
|
145
|
+
role: string
|
|
146
|
+
slot: string
|
|
147
|
+
spellcheck: boolean
|
|
148
|
+
style: string
|
|
149
|
+
tabindex: number
|
|
150
|
+
title: string
|
|
151
|
+
translate: "yes" | "no"
|
|
152
|
+
};
|
|
153
|
+
type Target = "_self" | "_blank" | "_parent" | "_top";
|
|
154
|
+
declare global {
|
|
155
|
+
namespace JSX {
|
|
156
|
+
type Element = JSXNode;
|
|
157
|
+
type IntrinsicElements = { [key in keyof HTMLElementTagNameMap] : Attributes<key> } & {
|
|
158
|
+
div: Attributes<"div">
|
|
159
|
+
ul: Attributes<"ul">
|
|
160
|
+
ol: Attributes<"ol">
|
|
161
|
+
li: Attributes<"li">
|
|
162
|
+
br: Attributes<"br">
|
|
163
|
+
button: Attributes<"button">
|
|
164
|
+
a: Attributes<"a", {
|
|
165
|
+
href: string
|
|
166
|
+
download: string
|
|
167
|
+
target: Target
|
|
168
|
+
hreflang: string
|
|
169
|
+
media: string
|
|
170
|
+
ping: string
|
|
171
|
+
referrerpolicy: string
|
|
172
|
+
rel: string
|
|
173
|
+
shape: string
|
|
174
|
+
}>
|
|
175
|
+
input: Attributes<"input", {
|
|
176
|
+
accept: string
|
|
177
|
+
alt: string
|
|
178
|
+
autocomplete: "off" | "on" | string
|
|
179
|
+
checked: boolean
|
|
180
|
+
disabled: boolean
|
|
181
|
+
formonvalidate: boolean
|
|
182
|
+
formtarget: Target
|
|
183
|
+
type: "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week"
|
|
184
|
+
value: string
|
|
185
|
+
}>
|
|
186
|
+
form: Attributes<"form", {
|
|
187
|
+
"accept-charset": "UTF-8"
|
|
188
|
+
autocomplete: "off" | "on"
|
|
189
|
+
name: string
|
|
190
|
+
enctype: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain"
|
|
191
|
+
method: "post" | "get" | "dalog"
|
|
192
|
+
target: Target | "_unfencedTop"
|
|
193
|
+
}>
|
|
194
|
+
iframe: Attributes<"iframe", {
|
|
195
|
+
allow: string
|
|
196
|
+
allowfullscreen: boolean
|
|
197
|
+
width: number
|
|
198
|
+
height: number
|
|
199
|
+
loading: "eager" | "lazy"
|
|
200
|
+
name: string
|
|
201
|
+
referrerpolicy: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-orgin" | "usafe-url"
|
|
202
|
+
sandbox: string
|
|
203
|
+
src: string
|
|
204
|
+
srcdoc: string
|
|
205
|
+
}>
|
|
206
|
+
};
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
interface Options {
|
|
210
|
+
batch?: (cb: () => void) => void;
|
|
211
|
+
}
|
|
19
212
|
declare const createRoot: (el: HTMLElement, options?: Options) => {
|
|
20
213
|
render(jsx: JSX.Element): void
|
|
21
214
|
unmount(): void
|
|
22
215
|
};
|
|
23
|
-
export { h,
|
|
216
|
+
export { h, createRoot, createComponent, Key, JSXNode, JSXFragment, JSXElement, JSXComponent, Fragment, Component };
|
package/dist/index.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
// src/jsx/component.ts
|
|
2
2
|
var createComponent = (component) => (props) => [component, props, []];
|
|
3
3
|
// src/jsx/fragment.ts
|
|
4
|
-
var
|
|
4
|
+
var Fragment = (...children) => [null, {}, children];
|
|
5
5
|
// src/jsx/likereact.ts
|
|
6
|
-
var h = (type, props, ...children) => typeof type === "string" ? [type, props ?? {}, children] : type ===
|
|
6
|
+
var h = (type, props, ...children) => typeof type === "string" ? [type, props ?? {}, children] : type === Fragment ? [null, props ?? {}, children] : type(props);
|
|
7
7
|
// src/index.ts
|
|
8
8
|
var createRoot = (el, options) => {
|
|
9
|
-
var createText = (
|
|
10
|
-
const node2 = new Text(
|
|
11
|
-
return [[0,
|
|
9
|
+
var createText = (jsx3) => {
|
|
10
|
+
const node2 = new Text(jsx3);
|
|
11
|
+
return [[0, jsx3, node2], node2];
|
|
12
12
|
};
|
|
13
|
-
var updateText = (dom2,
|
|
14
|
-
if (dom2[1] !==
|
|
15
|
-
dom2[2].textContent = dom2[1] =
|
|
13
|
+
var updateText = (dom2, jsx3) => {
|
|
14
|
+
if (dom2[1] !== jsx3)
|
|
15
|
+
dom2[2].textContent = dom2[1] = jsx3;
|
|
16
16
|
};
|
|
17
17
|
var revokeText = (dom2) => dom2[2].remove();
|
|
18
18
|
var afterText = (dom2, node2) => {
|
|
@@ -79,8 +79,8 @@ var createRoot = (el, options) => {
|
|
|
79
79
|
break;
|
|
80
80
|
}
|
|
81
81
|
};
|
|
82
|
-
var createElement = (
|
|
83
|
-
const [tag, props, children] =
|
|
82
|
+
var createElement = (jsx3) => {
|
|
83
|
+
const [tag, props, children] = jsx3;
|
|
84
84
|
props.$beforeMount?.();
|
|
85
85
|
const element = document.createElement(tag);
|
|
86
86
|
elementEvents.set(element, {});
|
|
@@ -91,11 +91,11 @@ var createRoot = (el, options) => {
|
|
|
91
91
|
setAttribute(element, name, value);
|
|
92
92
|
const rendered_children = children.map(createNode);
|
|
93
93
|
element.append(...rendered_children.map((e) => e[1]));
|
|
94
|
-
return [[1,
|
|
94
|
+
return [[1, jsx3, element, rendered_children.map((e) => e[0])], element];
|
|
95
95
|
};
|
|
96
|
-
var updateElement = (dom2,
|
|
96
|
+
var updateElement = (dom2, jsx3) => {
|
|
97
97
|
const [, [, old_props, old_children], element, rendered_children] = dom2;
|
|
98
|
-
const [, new_props, new_children] =
|
|
98
|
+
const [, new_props, new_children] = jsx3;
|
|
99
99
|
old_props.$beforeUpdate?.call(element, new CustomEvent("beforeupdate", {
|
|
100
100
|
detail: element
|
|
101
101
|
}));
|
|
@@ -129,7 +129,7 @@ var createRoot = (el, options) => {
|
|
|
129
129
|
break;
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
|
-
dom2[1] =
|
|
132
|
+
dom2[1] = jsx3;
|
|
133
133
|
new_props.$update?.call(element, new CustomEvent("update", {
|
|
134
134
|
detail: element
|
|
135
135
|
}));
|
|
@@ -149,8 +149,8 @@ var createRoot = (el, options) => {
|
|
|
149
149
|
dom2[2].after(node2);
|
|
150
150
|
};
|
|
151
151
|
var batch = options?.batch ?? ((cb) => cb());
|
|
152
|
-
var createComponent2 = (
|
|
153
|
-
const [component, init_props, children] =
|
|
152
|
+
var createComponent2 = (jsx3) => {
|
|
153
|
+
const [component, init_props, children] = jsx3;
|
|
154
154
|
let rendered_dom;
|
|
155
155
|
let doc_frag;
|
|
156
156
|
const props = component((jsx22) => {
|
|
@@ -167,9 +167,9 @@ var createRoot = (el, options) => {
|
|
|
167
167
|
}
|
|
168
168
|
return [[3, [component, props, children], rendered_dom], doc_frag];
|
|
169
169
|
};
|
|
170
|
-
var updateComponent = (dom2,
|
|
170
|
+
var updateComponent = (dom2, jsx3) => {
|
|
171
171
|
const old_props = dom2[1][1];
|
|
172
|
-
const new_props =
|
|
172
|
+
const new_props = jsx3[1];
|
|
173
173
|
batch(() => {
|
|
174
174
|
for (const [key, value] of Object.entries(new_props))
|
|
175
175
|
if (old_props[key] !== value)
|
|
@@ -178,35 +178,35 @@ var createRoot = (el, options) => {
|
|
|
178
178
|
};
|
|
179
179
|
var revokeComponent = (dom2) => revokeFragment(dom2[2]);
|
|
180
180
|
var afterComponent = (dom2, node2) => afterFragment(dom2[2], node2);
|
|
181
|
-
var createNode = (
|
|
182
|
-
if (typeof
|
|
183
|
-
return createText(
|
|
184
|
-
if (Array.isArray(
|
|
185
|
-
const [tag] =
|
|
181
|
+
var createNode = (jsx3) => {
|
|
182
|
+
if (typeof jsx3 === "string")
|
|
183
|
+
return createText(jsx3);
|
|
184
|
+
if (Array.isArray(jsx3)) {
|
|
185
|
+
const [tag] = jsx3;
|
|
186
186
|
if (typeof tag === "string")
|
|
187
|
-
return createElement(
|
|
187
|
+
return createElement(jsx3);
|
|
188
188
|
if (typeof tag === "function")
|
|
189
|
-
return createComponent2(
|
|
189
|
+
return createComponent2(jsx3);
|
|
190
190
|
if (tag === null)
|
|
191
|
-
return createFragment(
|
|
191
|
+
return createFragment(jsx3);
|
|
192
192
|
}
|
|
193
193
|
throw new Error(`Unrecognized JSX node`, {
|
|
194
|
-
cause:
|
|
194
|
+
cause: jsx3
|
|
195
195
|
});
|
|
196
196
|
};
|
|
197
|
-
var updateNode = (dom2,
|
|
197
|
+
var updateNode = (dom2, jsx3) => {
|
|
198
198
|
switch (dom2[0]) {
|
|
199
199
|
case 0:
|
|
200
|
-
updateText(dom2,
|
|
200
|
+
updateText(dom2, jsx3);
|
|
201
201
|
break;
|
|
202
202
|
case 1:
|
|
203
|
-
updateElement(dom2,
|
|
203
|
+
updateElement(dom2, jsx3);
|
|
204
204
|
break;
|
|
205
205
|
case 2:
|
|
206
|
-
updateFragment(dom2,
|
|
206
|
+
updateFragment(dom2, jsx3);
|
|
207
207
|
break;
|
|
208
208
|
case 3:
|
|
209
|
-
updateComponent(dom2,
|
|
209
|
+
updateComponent(dom2, jsx3);
|
|
210
210
|
break;
|
|
211
211
|
}
|
|
212
212
|
};
|
|
@@ -242,17 +242,17 @@ var createRoot = (el, options) => {
|
|
|
242
242
|
break;
|
|
243
243
|
}
|
|
244
244
|
};
|
|
245
|
-
var createFragment = (
|
|
246
|
-
const [, , children] =
|
|
245
|
+
var createFragment = (jsx3) => {
|
|
246
|
+
const [, , children] = jsx3;
|
|
247
247
|
const mark = new Comment;
|
|
248
248
|
const el2 = new DocumentFragment;
|
|
249
249
|
const rendered_children = children.map(createNode);
|
|
250
250
|
el2.append(mark, ...rendered_children.map((e) => e[1]));
|
|
251
|
-
return [[2,
|
|
251
|
+
return [[2, jsx3, mark, rendered_children.map((e) => e[0])], el2];
|
|
252
252
|
};
|
|
253
|
-
var updateFragment = (dom2,
|
|
253
|
+
var updateFragment = (dom2, jsx3) => {
|
|
254
254
|
const [, [, , old_children], mark, rendered_children] = dom2;
|
|
255
|
-
const [, , new_children] =
|
|
255
|
+
const [, , new_children] = jsx3;
|
|
256
256
|
for (const [type, idx, jsx22] of diff(old_children, new_children)) {
|
|
257
257
|
switch (type) {
|
|
258
258
|
case 0:
|
|
@@ -273,7 +273,7 @@ var createRoot = (el, options) => {
|
|
|
273
273
|
break;
|
|
274
274
|
}
|
|
275
275
|
}
|
|
276
|
-
dom2[1] =
|
|
276
|
+
dom2[1] = jsx3;
|
|
277
277
|
};
|
|
278
278
|
var revokeFragment = (dom2) => {
|
|
279
279
|
for (const child of dom2[3])
|
|
@@ -290,8 +290,8 @@ var createRoot = (el, options) => {
|
|
|
290
290
|
const [node, dom] = createFragment([null, {}, []]);
|
|
291
291
|
el.append(dom);
|
|
292
292
|
return {
|
|
293
|
-
render(
|
|
294
|
-
updateFragment(node, [null, {}, [
|
|
293
|
+
render(jsx3) {
|
|
294
|
+
updateFragment(node, [null, {}, [jsx3]]);
|
|
295
295
|
},
|
|
296
296
|
unmount() {
|
|
297
297
|
revokeFragment(node);
|
|
@@ -300,7 +300,7 @@ var createRoot = (el, options) => {
|
|
|
300
300
|
};
|
|
301
301
|
export {
|
|
302
302
|
h,
|
|
303
|
-
fragment,
|
|
304
303
|
createRoot,
|
|
305
|
-
createComponent
|
|
304
|
+
createComponent,
|
|
305
|
+
Fragment
|
|
306
306
|
};
|