sinho 0.2.2 → 0.3.0
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/array_mutation.js +1 -1
- package/dist/array_mutation.js.map +1 -1
- package/dist/bundle.d.ts +16 -5
- package/dist/bundle.js +99 -80
- package/dist/bundle.min.js +1 -1
- package/dist/component.js +4 -1
- package/dist/component.js.map +1 -1
- package/dist/intrinsic/Dynamic.d.ts +33 -0
- package/dist/intrinsic/Dynamic.js +53 -0
- package/dist/intrinsic/Dynamic.js.map +1 -0
- package/dist/intrinsic/ErrorBoundary.d.ts +14 -0
- package/dist/intrinsic/ErrorBoundary.js +36 -0
- package/dist/intrinsic/ErrorBoundary.js.map +1 -0
- package/dist/intrinsic/For.js +21 -36
- package/dist/intrinsic/For.js.map +1 -1
- package/dist/intrinsic/Fragment.d.ts +1 -1
- package/dist/intrinsic/Fragment.js +5 -3
- package/dist/intrinsic/Fragment.js.map +1 -1
- package/dist/intrinsic/If.js +11 -7
- package/dist/intrinsic/If.js.map +1 -1
- package/dist/intrinsic/Portal.js +4 -4
- package/dist/intrinsic/Portal.js.map +1 -1
- package/dist/intrinsic/TagComponent.js +3 -3
- package/dist/intrinsic/TagComponent.js.map +1 -1
- package/dist/mod.d.ts +2 -2
- package/dist/mod.js +1 -0
- package/dist/mod.js.map +1 -1
- package/dist/scope.d.ts +9 -3
- package/dist/scope.js +32 -22
- package/dist/scope.js.map +1 -1
- package/dist/template.d.ts +7 -2
- package/dist/template.js +16 -0
- package/dist/template.js.map +1 -1
- package/package.json +1 -1
- package/src/array_mutation.ts +7 -4
- package/src/component.ts +4 -2
- package/src/intrinsic/For.ts +26 -43
- package/src/intrinsic/Fragment.ts +6 -4
- package/src/intrinsic/If.ts +22 -8
- package/src/intrinsic/Portal.ts +6 -4
- package/src/intrinsic/TagComponent.ts +4 -3
- package/src/mod.ts +2 -2
- package/src/scope.ts +52 -28
- package/src/template.ts +31 -2
- package/tsconfig.json +2 -1
- package/web/dist/shingo.min.d.ts +1131 -0
- package/web/dist/shingo.min.js +1 -0
- package/web/static/dist/bundle.d.ts +1126 -0
- package/web/static/dist/bundle.min.js +1 -0
package/dist/array_mutation.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"array_mutation.js","sourceRoot":"","sources":["../src/array_mutation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEtE,MAAM,WAAW,GAAG,CAClB,KAAmB,EACnB,KAA2C,EACrB,EAAE;IACxB,MAAM,MAAM,GAAG,IAAI,GAAG,EAAmB,CAAC;IAE1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACtC,MAAM,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAE/B,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YACpB,MAAM,IAAI,KAAK,CAAC,kBAAkB,GAAG,GAAG,CAAC,CAAC;QAC5C,CAAC;QAED,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IACrB,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAoBF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,KAA+B,EAC/B,KAA2C,EACd,EAAE;IAC/B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"array_mutation.js","sourceRoot":"","sources":["../src/array_mutation.ts"],"names":[],"mappings":"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"}
|
package/dist/bundle.d.ts
CHANGED
|
@@ -18,6 +18,12 @@ interface Signal<out T> extends SignalLike<T> {
|
|
|
18
18
|
*/
|
|
19
19
|
peek(): T;
|
|
20
20
|
}
|
|
21
|
+
interface SignalOptions<T> extends SetSignalOptions {
|
|
22
|
+
/**
|
|
23
|
+
* A custom equality function to compare the new value with the old value.
|
|
24
|
+
*/
|
|
25
|
+
equals?: (a: T, b: T) => boolean;
|
|
26
|
+
}
|
|
21
27
|
interface SetSignalOptions {
|
|
22
28
|
/**
|
|
23
29
|
* Whether to force the update of the signal even if the new value has the
|
|
@@ -64,7 +70,7 @@ declare const useScope: <T = {}>() => Scope<T>;
|
|
|
64
70
|
* Creates a new signal with the given value.
|
|
65
71
|
* @returns A tuple with the signal and its setter.
|
|
66
72
|
*/
|
|
67
|
-
declare const useSignal: (<T>(value: T, opts?:
|
|
73
|
+
declare const useSignal: (<T>(value: T, opts?: SignalOptions<T>) => readonly [Signal<T>, SignalSetter<T>]) & (<T>(value?: T, opts?: SignalOptions<T | undefined>) => readonly [Signal<T | undefined>, SignalSetter<T | undefined>]);
|
|
68
74
|
/**
|
|
69
75
|
* Runs the given function in a batch.
|
|
70
76
|
*
|
|
@@ -78,7 +84,7 @@ declare const flushBatch: () => void;
|
|
|
78
84
|
*
|
|
79
85
|
* @param fn The computation function.
|
|
80
86
|
*/
|
|
81
|
-
declare const useMemo: <T>(fn: () => T, opts?:
|
|
87
|
+
declare const useMemo: <T>(fn: () => T, opts?: SignalOptions<T>) => Signal<T>;
|
|
82
88
|
/**
|
|
83
89
|
* Executes a function inside a subscope which can be manually destroyed.
|
|
84
90
|
*
|
|
@@ -107,7 +113,7 @@ interface RefSignalSetter<in T> {
|
|
|
107
113
|
/**
|
|
108
114
|
* Creates a new signal with write capabilities.
|
|
109
115
|
*/
|
|
110
|
-
declare const useRef: (<T>(value: T, opts?:
|
|
116
|
+
declare const useRef: (<T>(value: T, opts?: SignalOptions<T>) => RefSignal<T>) & (<T>(value?: T, opts?: SignalOptions<T | undefined>) => RefSignal<T | undefined>);
|
|
111
117
|
/**
|
|
112
118
|
* Represents a value that can be a signal or a constant value.
|
|
113
119
|
*
|
|
@@ -753,6 +759,11 @@ interface Context<in out T> {
|
|
|
753
759
|
declare const createContext: (<T>(value: T, opts?: SetSignalOptions) => Context<T>) & (<T>(value?: T, opts?: SetSignalOptions) => Context<T | undefined>);
|
|
754
760
|
declare const useContext: <T>(context: Context<T>) => Signal<T>;
|
|
755
761
|
|
|
762
|
+
type TemplateNodes = (Node | TemplateNodes)[];
|
|
763
|
+
declare namespace TemplateNodes {
|
|
764
|
+
const forEach: (nodes: TemplateNodes, fn: (node: Node) => void) => void;
|
|
765
|
+
const last: (nodes: TemplateNodes, lastIndex?: number) => Node | undefined;
|
|
766
|
+
}
|
|
756
767
|
/**
|
|
757
768
|
* Represents a render result of a component.
|
|
758
769
|
*/
|
|
@@ -760,7 +771,7 @@ interface Template {
|
|
|
760
771
|
/**
|
|
761
772
|
* Build the DOM elements represented by this template.
|
|
762
773
|
*/
|
|
763
|
-
build():
|
|
774
|
+
build(): TemplateNodes;
|
|
764
775
|
}
|
|
765
776
|
|
|
766
777
|
interface Tagged<in out T> {
|
|
@@ -1132,4 +1143,4 @@ declare namespace JSX {
|
|
|
1132
1143
|
}
|
|
1133
1144
|
}
|
|
1134
1145
|
|
|
1135
|
-
export { type AttributeOptions, type Children, type Cleanup, Component, type ComponentConstructor, type ComponentOptions, type Context, type DangerousHtml, Else, ElseIf, type EventConstructor, For, Fragment, type FunctionalComponent, If, JSX, MaybeSignal, type Metadata, Portal, type PropOptions, type RefSignal, type RefSignalSetter, type SetSignalOptions, type Signal, type SignalLike, type SignalSetter, Style, type Styles, type SubscopeOptions, type Template, createContext, createElement, css, defineComponents, event, flushBatch, h, isComponent, jsx, jsx as jsxDEV, jsx as jsxs, prop, useBatch, useContext, useMountEffect as useEffect, useMemo, useRef, useSignal, useSubscope };
|
|
1146
|
+
export { type AttributeOptions, type Children, type Cleanup, Component, type ComponentConstructor, type ComponentOptions, type Context, type DangerousHtml, Else, ElseIf, type EventConstructor, For, Fragment, type FunctionalComponent, If, JSX, MaybeSignal, type Metadata, Portal, type PropOptions, type RefSignal, type RefSignalSetter, type SetSignalOptions, type Signal, type SignalLike, type SignalSetter, Style, type Styles, type SubscopeOptions, type Template, TemplateNodes, createContext, createElement, css, defineComponents, event, flushBatch, h, isComponent, jsx, jsx as jsxDEV, jsx as jsxs, prop, useBatch, useContext, useMountEffect as useEffect, useMemo, useRef, useSignal, useSubscope };
|
package/dist/bundle.js
CHANGED
|
@@ -52,25 +52,33 @@ const useSignal = (value, opts) => {
|
|
|
52
52
|
signal._effects = new Set();
|
|
53
53
|
signal.peek = () => value;
|
|
54
54
|
const setter = (arg, innerOpts) => {
|
|
55
|
-
|
|
55
|
+
const allOpts = { ...opts, ...innerOpts };
|
|
56
|
+
allOpts.equals ??= (a, b) => a === b;
|
|
56
57
|
if (currBatch) {
|
|
57
58
|
const newValue = typeof arg == "function"
|
|
58
59
|
? arg(signal.peek())
|
|
59
60
|
: arg;
|
|
60
|
-
if (
|
|
61
|
-
if (
|
|
61
|
+
if (allOpts?.force || !allOpts.equals(newValue, signal.peek())) {
|
|
62
|
+
if (allOpts?.force) {
|
|
62
63
|
value = newValue;
|
|
63
64
|
}
|
|
64
65
|
else {
|
|
65
66
|
currBatch._setters.push(() => (value = newValue));
|
|
66
67
|
}
|
|
67
|
-
if (!
|
|
68
|
-
signal._effects.forEach((effect) =>
|
|
68
|
+
if (!allOpts?.silent) {
|
|
69
|
+
signal._effects.forEach((effect) => {
|
|
70
|
+
if (effect._pure) {
|
|
71
|
+
currBatch._pureEffects.add(effect);
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
currBatch._effects.add(effect);
|
|
75
|
+
}
|
|
76
|
+
});
|
|
69
77
|
}
|
|
70
78
|
}
|
|
71
79
|
}
|
|
72
80
|
else {
|
|
73
|
-
useBatch(() => setter(arg,
|
|
81
|
+
useBatch(() => setter(arg, allOpts));
|
|
74
82
|
}
|
|
75
83
|
};
|
|
76
84
|
return [signal, setter];
|
|
@@ -84,7 +92,11 @@ const useSignal = (value, opts) => {
|
|
|
84
92
|
const useBatch = (fn) => {
|
|
85
93
|
if (currBatch)
|
|
86
94
|
return fn();
|
|
87
|
-
currBatch = {
|
|
95
|
+
currBatch = {
|
|
96
|
+
_setters: [],
|
|
97
|
+
_effects: new Set(),
|
|
98
|
+
_pureEffects: new Set(),
|
|
99
|
+
};
|
|
88
100
|
try {
|
|
89
101
|
const result = fn();
|
|
90
102
|
flushBatch();
|
|
@@ -95,25 +107,23 @@ const useBatch = (fn) => {
|
|
|
95
107
|
}
|
|
96
108
|
};
|
|
97
109
|
const flushBatch = () => {
|
|
98
|
-
|
|
99
|
-
|
|
110
|
+
while (currBatch &&
|
|
111
|
+
currBatch._setters.length +
|
|
112
|
+
currBatch._effects.size +
|
|
113
|
+
currBatch._pureEffects.size >
|
|
114
|
+
0) {
|
|
100
115
|
// Clean effect subscope
|
|
101
116
|
currBatch._effects.forEach((effect) => effect._clean?.());
|
|
102
117
|
// Run signal updates
|
|
103
118
|
currBatch._setters.forEach((setter) => setter());
|
|
104
119
|
currBatch._setters = [];
|
|
105
120
|
// Run next effect
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
currBatch._effects.delete(effect);
|
|
110
|
-
continue a;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
for (const effect of currBatch._effects) {
|
|
121
|
+
const effect = currBatch._pureEffects.values().next().value ??
|
|
122
|
+
currBatch._effects.values().next().value;
|
|
123
|
+
if (effect) {
|
|
114
124
|
effect._run();
|
|
125
|
+
currBatch._pureEffects.delete(effect);
|
|
115
126
|
currBatch._effects.delete(effect);
|
|
116
|
-
break;
|
|
117
127
|
}
|
|
118
128
|
}
|
|
119
129
|
};
|
|
@@ -174,12 +184,12 @@ const useEffect = (fn, deps) => {
|
|
|
174
184
|
* @param fn The computation function.
|
|
175
185
|
*/
|
|
176
186
|
const useMemo = (fn, opts) => {
|
|
177
|
-
const [memo, setMemo] = useSignal();
|
|
187
|
+
const [memo, setMemo] = useSignal(undefined, opts);
|
|
178
188
|
let firstTime = true;
|
|
179
189
|
pureEffectFlag = true;
|
|
180
190
|
try {
|
|
181
191
|
useEffect(() => {
|
|
182
|
-
setMemo(fn, firstTime ? {
|
|
192
|
+
setMemo(fn, firstTime ? { force: true } : {});
|
|
183
193
|
firstTime = false;
|
|
184
194
|
});
|
|
185
195
|
}
|
|
@@ -221,11 +231,11 @@ const useSubscope = (fn, opts) => {
|
|
|
221
231
|
/**
|
|
222
232
|
* Creates a new signal with write capabilities.
|
|
223
233
|
*/
|
|
224
|
-
const useRef = (value, opts) => {
|
|
234
|
+
const useRef = ((value, opts) => {
|
|
225
235
|
const [signal, setter] = useSignal(value, opts);
|
|
226
236
|
signal.set = setter;
|
|
227
237
|
return signal;
|
|
228
|
-
};
|
|
238
|
+
});
|
|
229
239
|
/**
|
|
230
240
|
* @namespace
|
|
231
241
|
*/
|
|
@@ -322,6 +332,29 @@ const useContext = (context) => {
|
|
|
322
332
|
});
|
|
323
333
|
};
|
|
324
334
|
|
|
335
|
+
var TemplateNodes;
|
|
336
|
+
(function (TemplateNodes) {
|
|
337
|
+
TemplateNodes.forEach = (nodes, fn) => nodes.forEach((node) => Array.isArray(node) ? TemplateNodes.forEach(node, fn) : fn(node));
|
|
338
|
+
TemplateNodes.last = (nodes, lastIndex = nodes.length - 1) => {
|
|
339
|
+
if (!nodes.length)
|
|
340
|
+
return;
|
|
341
|
+
for (let i = lastIndex; i >= 0; i--) {
|
|
342
|
+
const last = nodes[i];
|
|
343
|
+
if (!Array.isArray(last))
|
|
344
|
+
return last;
|
|
345
|
+
const lastNode = TemplateNodes.last(last);
|
|
346
|
+
if (lastNode)
|
|
347
|
+
return lastNode;
|
|
348
|
+
}
|
|
349
|
+
};
|
|
350
|
+
})(TemplateNodes || (TemplateNodes = {}));
|
|
351
|
+
const createTemplate = (build) => ({
|
|
352
|
+
build() {
|
|
353
|
+
const nodes = build();
|
|
354
|
+
return nodes.build?.() ?? nodes;
|
|
355
|
+
},
|
|
356
|
+
});
|
|
357
|
+
|
|
325
358
|
/**
|
|
326
359
|
* Defines a property in your component metadata that can be set from outside
|
|
327
360
|
* of the component.
|
|
@@ -530,7 +563,9 @@ const Component = ((tagName, metadata = {}, opts = {}) => {
|
|
|
530
563
|
const prevMountEffects = mountEffects;
|
|
531
564
|
mountEffects = [];
|
|
532
565
|
try {
|
|
533
|
-
|
|
566
|
+
TemplateNodes.forEach(this.render().build(), (node) => {
|
|
567
|
+
renderParent.append(node);
|
|
568
|
+
});
|
|
534
569
|
// Run mount effects
|
|
535
570
|
mountEffects.forEach(([fn, opts]) => useEffect(fn, opts));
|
|
536
571
|
}
|
|
@@ -669,13 +704,6 @@ const setAttr = (node, name, value, heuristic) => {
|
|
|
669
704
|
}
|
|
670
705
|
};
|
|
671
706
|
|
|
672
|
-
const createTemplate = (build) => ({
|
|
673
|
-
build() {
|
|
674
|
-
const nodes = build();
|
|
675
|
-
return nodes.build?.() ?? nodes;
|
|
676
|
-
},
|
|
677
|
-
});
|
|
678
|
-
|
|
679
707
|
const Text = ({ text, marker }) => createTemplate(() => {
|
|
680
708
|
const renderer = useRenderer();
|
|
681
709
|
const anchor = marker && renderer._node(() => document.createComment(""));
|
|
@@ -709,9 +737,11 @@ const Fragment = ({ children }) => createTemplate(() => {
|
|
|
709
737
|
return !Array.isArray(children)
|
|
710
738
|
? children == null
|
|
711
739
|
? []
|
|
712
|
-
:
|
|
713
|
-
|
|
714
|
-
|
|
740
|
+
: [
|
|
741
|
+
typeof children == "object"
|
|
742
|
+
? children.build()
|
|
743
|
+
: Text({ text: children }).build(),
|
|
744
|
+
]
|
|
715
745
|
: children.flatMap((children) => Fragment({ children }).build());
|
|
716
746
|
});
|
|
717
747
|
|
|
@@ -760,10 +790,10 @@ const hydrateElement = (node, svg, props, heuristic) => {
|
|
|
760
790
|
});
|
|
761
791
|
}
|
|
762
792
|
if (props.children != null) {
|
|
763
|
-
|
|
793
|
+
TemplateNodes.forEach(runWithRenderer({
|
|
764
794
|
_svg: svg,
|
|
765
795
|
_nodes: node.childNodes.values(),
|
|
766
|
-
}, () => Fragment({ children: props.children }).build()));
|
|
796
|
+
}, () => Fragment({ children: props.children }).build()), (subnode) => node.append(subnode));
|
|
767
797
|
}
|
|
768
798
|
return node;
|
|
769
799
|
};
|
|
@@ -837,7 +867,7 @@ const useArrayMutation = (array, keyFn) => {
|
|
|
837
867
|
const [result, setResult] = useSignal({
|
|
838
868
|
_mutations: [],
|
|
839
869
|
_map: new Map(),
|
|
840
|
-
});
|
|
870
|
+
}, { force: true });
|
|
841
871
|
let indexMap = new Map();
|
|
842
872
|
useEffect(() => {
|
|
843
873
|
const mutations = [];
|
|
@@ -904,33 +934,21 @@ const For = (props) => createTemplate(() => {
|
|
|
904
934
|
const items = MaybeSignal.upgrade(props.each ?? []);
|
|
905
935
|
const anchor = renderer._node(() => document.createComment(""));
|
|
906
936
|
const keyFn = props.key ?? ((_, i) => i);
|
|
907
|
-
const nodes = [anchor];
|
|
937
|
+
const nodes = [anchor, []];
|
|
908
938
|
const keyMap = new Map();
|
|
909
939
|
const mutationResult = useArrayMutation(items, keyFn);
|
|
910
|
-
const lookForAnchor = (index) =>
|
|
911
|
-
for (let i = index - 1; i >= 0; i--) {
|
|
912
|
-
const key = keyFn(items()[index - 1], index - 1);
|
|
913
|
-
const nodes = keyMap.get(key)?._subnodes ?? [];
|
|
914
|
-
if (nodes.length > 0) {
|
|
915
|
-
return nodes[nodes.length - 1];
|
|
916
|
-
}
|
|
917
|
-
}
|
|
918
|
-
return anchor;
|
|
919
|
-
};
|
|
940
|
+
const lookForAnchor = (index) => TemplateNodes.last(nodes[1], index - 1) ?? anchor;
|
|
920
941
|
useEffect(() => {
|
|
921
942
|
for (const mutation of mutationResult()._mutations) {
|
|
922
943
|
if (mutation._type == "r") {
|
|
923
|
-
const { _subnodes
|
|
944
|
+
const { _subnodes, _destroy } = keyMap.get(mutation._key) ?? {};
|
|
924
945
|
_destroy?.();
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
nodes.splice(index, _subnodes.length);
|
|
928
|
-
}
|
|
929
|
-
_subnodes.forEach((node) => node.parentNode?.removeChild(node));
|
|
946
|
+
nodes[1].splice(mutation._index, 1);
|
|
947
|
+
TemplateNodes.forEach(_subnodes ?? [], (node) => node.parentNode?.removeChild(node));
|
|
930
948
|
keyMap.delete(mutation._key);
|
|
931
949
|
}
|
|
932
950
|
else if (mutation._type == "a") {
|
|
933
|
-
let _subnodes
|
|
951
|
+
let _subnodes;
|
|
934
952
|
const [, destroy] = useSubscope(() => {
|
|
935
953
|
const [index, setIndex] = useSignal(mutation._index);
|
|
936
954
|
const [item, setItem] = useSignal(items()[mutation._index]);
|
|
@@ -946,27 +964,24 @@ const For = (props) => createTemplate(() => {
|
|
|
946
964
|
}
|
|
947
965
|
});
|
|
948
966
|
_subnodes = props.children?.(item, index, items).build() ?? [];
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
967
|
+
nodes[1].splice(mutation._index, 0, _subnodes);
|
|
968
|
+
let itemAnchor = lookForAnchor(mutation._index);
|
|
969
|
+
TemplateNodes.forEach(_subnodes, (node) => {
|
|
970
|
+
itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling);
|
|
971
|
+
itemAnchor = node;
|
|
972
|
+
});
|
|
955
973
|
});
|
|
956
974
|
keyMap.set(mutation._key, { _subnodes, _destroy: destroy });
|
|
957
975
|
}
|
|
958
976
|
else if (mutation._type == "m") {
|
|
959
|
-
const { _subnodes
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
nodes.splice(anchorIndex + 1, 0, ..._subnodes);
|
|
968
|
-
}
|
|
969
|
-
_subnodes.forEach((node) => itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling));
|
|
977
|
+
const { _subnodes } = keyMap.get(mutation._key) ?? {};
|
|
978
|
+
nodes[1].splice(mutation._from, 1);
|
|
979
|
+
nodes[1].splice(mutation._to, 0, _subnodes ?? []);
|
|
980
|
+
let itemAnchor = lookForAnchor(mutation._to);
|
|
981
|
+
TemplateNodes.forEach(_subnodes ?? [], (node) => {
|
|
982
|
+
itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling);
|
|
983
|
+
itemAnchor = node;
|
|
984
|
+
});
|
|
970
985
|
}
|
|
971
986
|
}
|
|
972
987
|
}, [mutationResult]);
|
|
@@ -993,16 +1008,20 @@ const ElseIf = (props) => {
|
|
|
993
1008
|
renderer._ifConditions = [...conditions, condition];
|
|
994
1009
|
return runWithRenderer({ _ifConditions: [] }, () => createTemplate(() => {
|
|
995
1010
|
const anchor = renderer._node(() => document.createComment(""));
|
|
996
|
-
const nodes = [anchor];
|
|
1011
|
+
const nodes = [anchor, []];
|
|
997
1012
|
const template = useMemo(() => condition() ? Fragment({ children: props.children }) : null);
|
|
998
1013
|
let subnodes = [];
|
|
999
1014
|
useEffect(() => {
|
|
1000
|
-
|
|
1001
|
-
nodes
|
|
1015
|
+
TemplateNodes.forEach(subnodes, (node) => node.parentNode?.removeChild(node));
|
|
1016
|
+
nodes[1] = [];
|
|
1002
1017
|
const [, destroy] = useSubscope(() => {
|
|
1003
1018
|
subnodes = template()?.build() ?? [];
|
|
1004
|
-
|
|
1005
|
-
|
|
1019
|
+
nodes[1] = subnodes;
|
|
1020
|
+
let before = anchor;
|
|
1021
|
+
TemplateNodes.forEach(subnodes, (node) => {
|
|
1022
|
+
before.parentNode?.insertBefore(node, before.nextSibling);
|
|
1023
|
+
before = node;
|
|
1024
|
+
});
|
|
1006
1025
|
});
|
|
1007
1026
|
return destroy;
|
|
1008
1027
|
}, [template]);
|
|
@@ -1019,11 +1038,11 @@ const Else = ({ children, }) => {
|
|
|
1019
1038
|
const Portal = ({ mount, children }) => createTemplate(() => runWithRenderer({ _nodes: undefined }, () => {
|
|
1020
1039
|
const nodes = Fragment({ children }).build();
|
|
1021
1040
|
useEffect(() => {
|
|
1022
|
-
|
|
1041
|
+
TemplateNodes.forEach(nodes, (node) => mount.appendChild(node));
|
|
1023
1042
|
return () => {
|
|
1024
|
-
|
|
1043
|
+
TemplateNodes.forEach(nodes, (node) => node.parentNode?.removeChild(node));
|
|
1025
1044
|
};
|
|
1026
|
-
});
|
|
1045
|
+
}, []);
|
|
1027
1046
|
return [];
|
|
1028
1047
|
}));
|
|
1029
1048
|
|
|
@@ -1099,4 +1118,4 @@ const jsx = (type, props, key) => {
|
|
|
1099
1118
|
return createElement(type, props);
|
|
1100
1119
|
};
|
|
1101
1120
|
|
|
1102
|
-
export { Component, Else, ElseIf, For, Fragment, If, MaybeSignal, Portal, Style, createContext, createElement, css, defineComponents, event, flushBatch, h, isComponent, jsx, jsx as jsxDEV, jsx as jsxs, prop, useBatch, useContext, useMountEffect as useEffect, useMemo, useRef, useSignal, useSubscope };
|
|
1121
|
+
export { Component, Else, ElseIf, For, Fragment, If, MaybeSignal, Portal, Style, TemplateNodes, createContext, createElement, css, defineComponents, event, flushBatch, h, isComponent, jsx, jsx as jsxDEV, jsx as jsxs, prop, useBatch, useContext, useMountEffect as useEffect, useMemo, useRef, useSignal, useSubscope };
|
package/dist/bundle.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const t=t=>({t:t,o:[],i:[],l:{...t?.l},u(t){const n=o;o=this;try{return t()}finally{o=n}},h(){for(let t=this.i.length-1;t>=0;t--)this.i[t].h();this.i=[];for(let t=this.o.length-1;t>=0;t--){const n=this.o[t];n._?.(),n.u=()=>{},n.p.forEach((t=>t.o.delete(n))),n.p.clear()}this.o=[]}});let n,e,o=t(),s=!1;const r=()=>o,c=(t,o)=>{const r=()=>(!s&&n&&(n.p.add(r),r.o.add(n)),r.peek());r.o=new Set,r.peek=()=>t;const c=(n,s)=>{
|
|
1
|
+
const t=t=>({t:t,o:[],i:[],l:{...t?.l},u(t){const n=o;o=this;try{return t()}finally{o=n}},h(){for(let t=this.i.length-1;t>=0;t--)this.i[t].h();this.i=[];for(let t=this.o.length-1;t>=0;t--){const n=this.o[t];n._?.(),n.u=()=>{},n.p.forEach((t=>t.o.delete(n))),n.p.clear()}this.o=[]}});let n,e,o=t(),s=!1;const r=()=>o,c=(t,o)=>{const r=()=>(!s&&n&&(n.p.add(r),r.o.add(n)),r.peek());r.o=new Set,r.peek=()=>t;const c=(n,s)=>{const l={...o,...s};if(l.equals??=(t,n)=>t===n,e){const o="function"==typeof n?n(r.peek()):n;!l?.force&&l.equals(o,r.peek())||(l?.force?t=o:e.m.push((()=>t=o)),l?.silent||r.o.forEach((t=>{t.v?e.S.add(t):e.o.add(t)})))}else i((()=>c(n,l)))};return[r,c]},i=t=>{if(e)return t();e={m:[],o:new Set,S:new Set};try{const n=t();return l(),n}finally{e=void 0}},l=()=>{for(;e&&e.m.length+e.o.size+e.S.size>0;){e.o.forEach((t=>t._?.())),e.m.forEach((t=>t())),e.m=[];const t=e.S.values().next().value??e.o.values().next().value;t&&(t.u(),e.S.delete(t),e.o.delete(t))}};let u=!1;const f=(t,e)=>{const r=!!e,c={M:o,v:u,p:new Set,u(){const o=n,c=s;n=this;try{this.p.forEach((t=>t.o.delete(this))),this.p.clear(),e&&(s=!1,e.forEach((t=>t()))),s=r,this._?.();const n=this.M.u((()=>i(t)));this._=n?()=>{this.M.u((()=>i(n))),this._=null}:null}finally{n=o,s=c}}};o.o.push(c),c.u(),c.p.size||c._||o.o.pop()},a=(t,n)=>{const[e,o]=c(void 0,n);let s=!0;u=!0;try{f((()=>{o(t,s?{force:!0}:{}),s=!1}))}finally{u=!1}return e},d=(n,s)=>{const r=e;e=void 0;const c=o,i=t(c);Object.assign(i.l,s?.details);try{c.i.push(i);return[i.u(n),()=>{const t=c.i.indexOf(i);t>=0&&c.i.splice(t,1),i.h()}]}finally{e=r}},h=(t,n)=>{const[e,o]=c(t,n);return e.set=o,e},_={upgrade:t=>()=>_.get(t),get:t=>"function"==typeof t?t():t,peek(t){const n=s;s=!0;try{return this.get(t)}finally{s=n}}},p=(t={})=>({k:[],C(t){return this.N?.next().value??t()},...t}),y=()=>{const t=r();return t.l.j??=p()},m=(t,n)=>{const e=y(),o=p({...e,...t}),[s,r]=d(n,{details:{j:o}});return f((()=>r)),s},w=t=>(t[0]??"").toLowerCase()+t.slice(1).replace(/[A-Z]/g,(t=>"-"+t.toLowerCase())),b=t=>t.startsWith("on:")?t.slice(3):w(t.slice(2)),v=Symbol(),g=(t,n)=>({[v]:Math.random().toString(36).slice(2),A:t,H:n}),x=t=>!!t?.[v],S=(t,n,e)=>{n.addEventListener(t[v],(t=>{const n=_.get(e);void 0!==n&&(t.stopPropagation(),t.detail(n))}))},M=t=>{const n=y();return a((()=>{let e=t.A;return n.L?.dispatchEvent(new CustomEvent(t[v],{detail:t=>e=t,bubbles:!0,composed:!0})),e}))};var k;!function(t){t.forEach=(n,e)=>n.forEach((n=>Array.isArray(n)?t.forEach(n,e):e(n))),t.last=(n,e=n.length-1)=>{if(n.length)for(let o=e;o>=0;o--){const e=n[o];if(!Array.isArray(e))return e;const s=t.last(e);if(s)return s}}}(k||(k={}));const C=t=>({build(){const n=t();return n.build?.()??n}}),E=(t,n)=>({T:"p",O:t,...n}),N=(t=CustomEvent)=>({T:"e",D:t}),j=Symbol();let A;const H=(t,n)=>{A?A.push([t,n]):f(t,n)},L=(t,n={},e={})=>{const o=[],s=new Map;for(const t in n){const e=n[t];if("p"==e.T&&e.attribute){"function"==typeof e.attribute&&(e.attribute={transform:e.attribute});const n=e.attribute={name:w(t),static:!1,transform:t=>t,...e.attribute};s.set(n.name,{name:t,meta:e}),n.static||o.push(n.name)}}e.shadow??={mode:"open"};class i extends HTMLElement{static[j]={I:t};static observedAttributes=o;props={};events={};[j]={};constructor(){super();for(const t in n){const e=n[t];if("p"==e.T){const n=x(e.O)?e.O:null,[o,s]=c(n?void 0:e.O);this.props[t]=o,n&&S(n,this,o),Object.defineProperty(this,t,{get:o.peek,set:t=>s((()=>t),{force:!0})})}else if("e"==e.T&&t.startsWith("on")){const n=b(t);this.events[t]=t=>this.dispatchEvent(new e.D(n,t))}}}connectedCallback(){const t=(n=this,e.shadow?n.shadowRoot??n.attachShadow(e.shadow):n);var n;this[j].$=d((()=>m({P:!1,L:this,N:t.childNodes.values()},(()=>{this[j].M=r();const n=A;A=[];try{k.forEach(this.render().build(),(n=>{t.append(n)})),A.forEach((([t,n])=>f(t,n)))}finally{A=n}}))))[1]}disconnectedCallback(){this[j].$?.()}attributeChangedCallback(t,n,e){const o=s.get(t);o&&(this[o.name]=null!=e?o.meta.attribute.transform.call(this,e):x(o.meta.O)?void 0:o.meta.O)}}return i},T=t=>!!t?.[j],O=(...t)=>{const[n,e]="string"==typeof t[0]?[t[0],t.slice(1)]:["",t];for(const t of e)customElements.define(n+t[j].I,t)},D=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,I=(t,n,e)=>{"-"==n[0]?t.style.setProperty(n,""+e):t.style[n]=null==e?"":"number"!=typeof e||D.test(n)?""+e:e+"px"},$=(t,n,e,o)=>{const s=null==e||!1===e&&!n.includes("-");if(n.startsWith("prop:"))t[n.slice(5)]=e;else if(n.startsWith("attr:"))n=n.slice(5),s?t.removeAttribute(n):t.setAttribute(n,e);else if(!["innerHTML","outerHTML"].includes(n)){if(!["tabIndex","role",...o?["width","height","href","list","form","download","rowSpan","colSpan"]:[]].includes(n)&&n in t)try{return void(t[n]=e)}catch(t){}"function"==typeof e||(s?t.removeAttribute(n):t.setAttribute(n,e))}},z=({text:t,marker:n})=>C((()=>{const e=y(),o=n&&e.C((()=>document.createComment(""))),s=e.C((()=>document.createTextNode("")));return f((()=>{const n=""+(_.get(t)??"");s.textContent!=n&&(s.textContent=n)})),o?[o,s]:[s]})),P=({children:t})=>C((()=>Array.isArray(t)?t.flatMap((t=>P({children:t}).build())):null==t?[]:["object"==typeof t?t.build():z({text:t}).build()])),V=(t,n,e,o)=>{const{ref:s,style:c,children:l,dangerouslySetInnerHTML:u,...a}=e;for(const n in c??{}){const e=c[n];f((()=>{I(t,n,_.get(e))}))}for(const n in a){const e=a[n];if(n.startsWith("on")){const o=r(),s=t=>{o.u((()=>i((()=>e(t)))))},c=b(n);f((()=>(t.addEventListener(c,s),()=>t.removeEventListener(c,s))))}else f((()=>{$(t,n,_.get(e),o)}))}return u&&f((()=>{const n=_.get(u).__html;t.innerHTML!=n&&(t.innerHTML=n)})),s&&f((()=>(s.set(t),()=>s.set(void 0)))),null!=e.children&&k.forEach(m({P:n,N:t.childNodes.values()},(()=>P({children:e.children}).build())),(n=>t.append(n))),t},Z=(t,n={},e)=>(null!=e&&(n.children=e),T(t)?((t,n)=>C((()=>{const e=y().C((()=>new t));return customElements.upgrade(e),V(e,!1,n),[e]})))(t,n):"function"==typeof t?C((()=>t(n))):((t,n={})=>C((()=>{const e=y(),o="svg"==t||!!e.P;return[V(e.C((()=>o?document.createElementNS("http://www.w3.org/2000/svg",t):document.createElement(t))),o,n,!0)]})))(t,n)),q=new Proxy(Z,{get:(t,n)=>(e,o)=>t(n,e,o)}),B=(t,n)=>{const[e,o]=c({V:[],Z:new Map},{force:!0});let s=new Map;return f((()=>{const e=[],r=s,c=((t,n)=>{const e=new Map;for(let o=0;o<t.length;o++){const s=n(t[o],o);if(e.has(s))throw Error(`Duplicate key '${s}'`);e.set(s,o)}return e})(t(),n),i=(t=NaN)=>e.map((t=>"r"==t.q?n=>n<t.B?n:n==t.B?NaN:n-1:"a"==t.q?n=>n<t.B?n:n+1:"m"==t.q?n=>t.F<=n&&n<t.G?n+1:n==t.G?t.F:n:t=>t)).reduce(((t,n)=>n(t)),t);for(const t of r.keys()){const n=i(r.get(t));c.has(t)||e.push({q:"r",J:t,B:n})}for(let o=0;o<t().length;o++){const s=n(t()[o],o),c=i(r.get(s));isNaN(c)?e.push({q:"a",J:s,B:o}):c!=o&&e.push({q:"m",J:s,G:c,F:o})}e.length>0&&o({V:e,Z:c}),s=c})),e},F=t=>C((()=>{const n=y(),e=_.upgrade(t.each??[]),o=n.C((()=>document.createComment(""))),s=t.key??((t,n)=>n),r=[o,[]],i=new Map,l=B(e,s),u=t=>k.last(r[1],t-1)??o;return f((()=>{for(const n of l().V)if("r"==n.q){const{K:t,$:e}=i.get(n.J)??{};e?.(),r[1].splice(n.B,1),k.forEach(t??[],(t=>t.parentNode?.removeChild(t))),i.delete(n.J)}else if("a"==n.q){let o;const[,s]=d((()=>{const[s,i]=c(n.B),[a,d]=c(e()[n.B]);f((()=>{0<=s()&&s()<e().length&&d((()=>e()[s()]))})),f((()=>{const t=l().Z.get(n.J);null!=t&&i(t)})),o=t.children?.(a,s,e).build()??[],r[1].splice(n.B,0,o);let h=u(n.B);k.forEach(o,(t=>{h.parentNode?.insertBefore(t,h.nextSibling),h=t}))}));i.set(n.J,{K:o,$:s})}else if("m"==n.q){const{K:t}=i.get(n.J)??{};r[1].splice(n.G,1),r[1].splice(n.F,0,t??[]);let e=u(n.F);k.forEach(t??[],(t=>{e.parentNode?.insertBefore(t,e.nextSibling),e=t}))}}),[l]),r})),G=t=>(y().k=[],J({condition:t.condition,children:t.children})),J=t=>{const n=y(),e=n.k,o=a((()=>e.every((t=>!t()))&&_.get(t.condition)));return n.k=[...e,o],m({k:[]},(()=>C((()=>{const e=n.C((()=>document.createComment(""))),s=[e,[]],r=a((()=>o()?P({children:t.children}):null));let c=[];return f((()=>{k.forEach(c,(t=>t.parentNode?.removeChild(t))),s[1]=[];const[,t]=d((()=>{c=r()?.build()??[],s[1]=c;let t=e;k.forEach(c,(n=>{t.parentNode?.insertBefore(n,t.nextSibling),t=n}))}));return t}),[r]),s}))))},K=({children:t})=>J({condition:!0,children:t}),Q=({mount:t,children:n})=>C((()=>m({N:void 0},(()=>{const e=P({children:n}).build();return f((()=>(k.forEach(e,(n=>t.appendChild(n))),()=>{k.forEach(e,(t=>t.parentNode?.removeChild(t)))})),[]),[]})))),R=Symbol(),U=new Map,W=t=>{const n=t.children;if("function"==typeof n){const e=Z("style",{},z({text:n,marker:!1}));return t.light?Q({mount:document.head,children:e}):e}if(n){const o=y(),s=t.light?document:o.L?.shadowRoot??document,r=((t,n,e)=>{if(!U.has(n)){const t=new CSSStyleSheet;t.replaceSync(n),U.set(n,{R:t,U:0})}const o=U.get(n);o.U++,t.has(n)||t.set(n,{R:o.R,U:0});const s=t.get(n);return s.U++,f((()=>()=>{--s.U||(t.delete(n),e()),--o.U||U.delete(n)})),s.R})((e=s,e[R]??=new Map),n,(()=>{s.adoptedStyleSheets=s.adoptedStyleSheets.filter((t=>t!=r))}));s.adoptedStyleSheets.push(r)}var e;return P({})},X=(t,...n)=>{const e=()=>t.reduce(((t,e,o)=>t+e+(_.get(n[o])??"")),"");return n.some((t=>"function"==typeof t))?e:e()},Y=(t,n,e)=>(n&&null!=e&&(n.key=e),Z(t,n));export{L as Component,K as Else,J as ElseIf,F as For,P as Fragment,G as If,_ as MaybeSignal,Q as Portal,W as Style,k as TemplateNodes,g as createContext,Z as createElement,X as css,O as defineComponents,N as event,l as flushBatch,q as h,T as isComponent,Y as jsx,Y as jsxDEV,Y as jsxs,E as prop,i as useBatch,M as useContext,H as useEffect,a as useMemo,h as useRef,c as useSignal,d as useSubscope};
|
package/dist/component.js
CHANGED
|
@@ -3,6 +3,7 @@ import { runWithRenderer } from "./renderer.js";
|
|
|
3
3
|
import { camelCaseToKebabCase, jsxPropNameToEventName, } from "./utils.js";
|
|
4
4
|
import { useScope } from "./scope.js";
|
|
5
5
|
import { isContext, provideContext } from "./context.js";
|
|
6
|
+
import { TemplateNodes } from "./template.js";
|
|
6
7
|
/**
|
|
7
8
|
* Defines a property in your component metadata that can be set from outside
|
|
8
9
|
* of the component.
|
|
@@ -211,7 +212,9 @@ export const Component = ((tagName, metadata = {}, opts = {}) => {
|
|
|
211
212
|
const prevMountEffects = mountEffects;
|
|
212
213
|
mountEffects = [];
|
|
213
214
|
try {
|
|
214
|
-
|
|
215
|
+
TemplateNodes.forEach(this.render().build(), (node) => {
|
|
216
|
+
renderParent.append(node);
|
|
217
|
+
});
|
|
215
218
|
// Run mount effects
|
|
216
219
|
mountEffects.forEach(([fn, opts]) => useEffect(fn, opts));
|
|
217
220
|
}
|
package/dist/component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EACT,WAAW,EACX,SAAS,GAEV,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EACL,oBAAoB,EAEpB,sBAAsB,GACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAW,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"component.js","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { FunctionalComponent } from "../component.js";
|
|
2
|
+
import { MaybeSignal } from "../scope.js";
|
|
3
|
+
import { Template } from "../template.js";
|
|
4
|
+
/**
|
|
5
|
+
* `Dynamic` is a component that can be used to render conditionally.
|
|
6
|
+
*
|
|
7
|
+
* On every change, it will replace all previously rendered nodes with new ones.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* const App = () => (
|
|
12
|
+
* const [count, setCount] = useSignal(100);
|
|
13
|
+
*
|
|
14
|
+
* <Dynamic
|
|
15
|
+
* render={() =>
|
|
16
|
+
* count() === 1 ? (
|
|
17
|
+
* <>
|
|
18
|
+
* <h3>Details</h3>
|
|
19
|
+
* { … }
|
|
20
|
+
* </>
|
|
21
|
+
* ) : count() > 1 ? (
|
|
22
|
+
* <p>Multiple items selected</p>
|
|
23
|
+
* ) : (
|
|
24
|
+
* <p>No items</p>
|
|
25
|
+
* )
|
|
26
|
+
* }
|
|
27
|
+
* />
|
|
28
|
+
* );
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
export declare const Dynamic: FunctionalComponent<{
|
|
32
|
+
render?: MaybeSignal<Template | undefined | void | null>;
|
|
33
|
+
}>;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { MaybeSignal, useEffect, useMemo, useSubscope } from "../scope.js";
|
|
2
|
+
import { useRenderer } from "../renderer.js";
|
|
3
|
+
import { createTemplate } from "../template.js";
|
|
4
|
+
/**
|
|
5
|
+
* `Dynamic` is a component that can be used to render conditionally.
|
|
6
|
+
*
|
|
7
|
+
* On every change, it will replace all previously rendered nodes with new ones.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* const App = () => (
|
|
12
|
+
* const [count, setCount] = useSignal(100);
|
|
13
|
+
*
|
|
14
|
+
* <Dynamic
|
|
15
|
+
* render={() =>
|
|
16
|
+
* count() === 1 ? (
|
|
17
|
+
* <>
|
|
18
|
+
* <h3>Details</h3>
|
|
19
|
+
* { … }
|
|
20
|
+
* </>
|
|
21
|
+
* ) : count() > 1 ? (
|
|
22
|
+
* <p>Multiple items selected</p>
|
|
23
|
+
* ) : (
|
|
24
|
+
* <p>No items</p>
|
|
25
|
+
* )
|
|
26
|
+
* }
|
|
27
|
+
* />
|
|
28
|
+
* );
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
export const Dynamic = (props) => createTemplate(() => {
|
|
32
|
+
const renderer = useRenderer();
|
|
33
|
+
const anchor = renderer._node(() => document.createComment(""));
|
|
34
|
+
const nodes = [anchor];
|
|
35
|
+
const template = useMemo(() => MaybeSignal.get(props.render));
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
const [subnodes, destroy] = useSubscope(() => {
|
|
38
|
+
const subnodes = template()?.build() ?? [];
|
|
39
|
+
anchor.after(...subnodes);
|
|
40
|
+
nodes.push(...subnodes);
|
|
41
|
+
return subnodes;
|
|
42
|
+
});
|
|
43
|
+
return () => {
|
|
44
|
+
destroy();
|
|
45
|
+
for (const node of subnodes ?? []) {
|
|
46
|
+
node.parentNode?.removeChild(node);
|
|
47
|
+
}
|
|
48
|
+
nodes.length = 1;
|
|
49
|
+
};
|
|
50
|
+
}, [template]);
|
|
51
|
+
return nodes;
|
|
52
|
+
});
|
|
53
|
+
//# sourceMappingURL=Dynamic.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dynamic.js","sourceRoot":"","sources":["../../src/intrinsic/Dynamic.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAY,MAAM,gBAAgB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,OAAO,GAEf,CAAC,KAAK,EAAE,EAAE,CACb,cAAc,CAAC,GAAG,EAAE;IAClB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC;IAChE,MAAM,KAAK,GAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,WAAW,CAAC,GAAG,EAAE;YAC3C,MAAM,QAAQ,GAAG,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;YAC3C,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,CAAC;YAC1B,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC;YACxB,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,OAAO,EAAE,CAAC;YAEV,KAAK,MAAM,IAAI,IAAI,QAAQ,IAAI,EAAE,EAAE,CAAC;gBAClC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;YACrC,CAAC;YAED,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,KAAK,CAAC;AACf,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { FunctionalComponent } from "../component.js";
|
|
2
|
+
import { Children } from "./Fragment.js";
|
|
3
|
+
/**
|
|
4
|
+
* `ErrorBoundary` is a component that can be used to catch errors in the
|
|
5
|
+
* component tree.
|
|
6
|
+
*/
|
|
7
|
+
export declare const ErrorBoundary: FunctionalComponent<{
|
|
8
|
+
fallback?: FunctionalComponent<{
|
|
9
|
+
error: unknown;
|
|
10
|
+
reset: () => void;
|
|
11
|
+
}>;
|
|
12
|
+
children?: Children;
|
|
13
|
+
}>;
|
|
14
|
+
export declare const useErrorBoundary: () => readonly [show: (err: unknown) => void, reset: () => void];
|