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.
Files changed (49) hide show
  1. package/dist/array_mutation.js +1 -1
  2. package/dist/array_mutation.js.map +1 -1
  3. package/dist/bundle.d.ts +16 -5
  4. package/dist/bundle.js +99 -80
  5. package/dist/bundle.min.js +1 -1
  6. package/dist/component.js +4 -1
  7. package/dist/component.js.map +1 -1
  8. package/dist/intrinsic/Dynamic.d.ts +33 -0
  9. package/dist/intrinsic/Dynamic.js +53 -0
  10. package/dist/intrinsic/Dynamic.js.map +1 -0
  11. package/dist/intrinsic/ErrorBoundary.d.ts +14 -0
  12. package/dist/intrinsic/ErrorBoundary.js +36 -0
  13. package/dist/intrinsic/ErrorBoundary.js.map +1 -0
  14. package/dist/intrinsic/For.js +21 -36
  15. package/dist/intrinsic/For.js.map +1 -1
  16. package/dist/intrinsic/Fragment.d.ts +1 -1
  17. package/dist/intrinsic/Fragment.js +5 -3
  18. package/dist/intrinsic/Fragment.js.map +1 -1
  19. package/dist/intrinsic/If.js +11 -7
  20. package/dist/intrinsic/If.js.map +1 -1
  21. package/dist/intrinsic/Portal.js +4 -4
  22. package/dist/intrinsic/Portal.js.map +1 -1
  23. package/dist/intrinsic/TagComponent.js +3 -3
  24. package/dist/intrinsic/TagComponent.js.map +1 -1
  25. package/dist/mod.d.ts +2 -2
  26. package/dist/mod.js +1 -0
  27. package/dist/mod.js.map +1 -1
  28. package/dist/scope.d.ts +9 -3
  29. package/dist/scope.js +32 -22
  30. package/dist/scope.js.map +1 -1
  31. package/dist/template.d.ts +7 -2
  32. package/dist/template.js +16 -0
  33. package/dist/template.js.map +1 -1
  34. package/package.json +1 -1
  35. package/src/array_mutation.ts +7 -4
  36. package/src/component.ts +4 -2
  37. package/src/intrinsic/For.ts +26 -43
  38. package/src/intrinsic/Fragment.ts +6 -4
  39. package/src/intrinsic/If.ts +22 -8
  40. package/src/intrinsic/Portal.ts +6 -4
  41. package/src/intrinsic/TagComponent.ts +4 -3
  42. package/src/mod.ts +2 -2
  43. package/src/scope.ts +52 -28
  44. package/src/template.ts +31 -2
  45. package/tsconfig.json +2 -1
  46. package/web/dist/shingo.min.d.ts +1131 -0
  47. package/web/dist/shingo.min.js +1 -0
  48. package/web/static/dist/bundle.d.ts +1126 -0
  49. package/web/static/dist/bundle.min.js +1 -0
@@ -14,7 +14,7 @@ export const useArrayMutation = (array, keyFn) => {
14
14
  const [result, setResult] = useSignal({
15
15
  _mutations: [],
16
16
  _map: new Map(),
17
- });
17
+ }, { force: true });
18
18
  let indexMap = new Map();
19
19
  useEffect(() => {
20
20
  const mutations = [];
@@ -1 +1 @@
1
- {"version":3,"file":"array_mutation.js","sourceRoot":"","sources":["../src/array_mutation.ts"],"names":[],"mappings":"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"}
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?: SetSignalOptions) => readonly [Signal<T>, SignalSetter<T>]) & (<T>(value?: T, opts?: SetSignalOptions) => readonly [Signal<T | undefined>, SignalSetter<T | undefined>]);
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?: SetSignalOptions) => Signal<T>;
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?: SetSignalOptions) => RefSignal<T>) & (<T>(value?: T, opts?: SetSignalOptions) => RefSignal<T | undefined>);
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(): Node[];
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
- innerOpts = { ...opts, ...innerOpts };
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 (innerOpts?.force || newValue !== signal.peek()) {
61
- if (innerOpts?.force) {
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 (!innerOpts?.silent) {
68
- signal._effects.forEach((effect) => currBatch._effects.add(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, innerOpts));
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 = { _setters: [], _effects: new Set() };
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
- a: while (currBatch &&
99
- (currBatch._setters.length > 0 || currBatch._effects.size > 0)) {
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
- for (const effect of currBatch._effects) {
107
- if (effect._pure) {
108
- effect._run();
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 ? { ...opts, force: true } : opts);
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
- renderParent?.append(...this.render().build());
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
- : typeof children == "object"
713
- ? children
714
- : Text({ text: children })
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
- node.append(...runWithRenderer({
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 = [], _destroy } = keyMap.get(mutation._key) ?? {};
944
+ const { _subnodes, _destroy } = keyMap.get(mutation._key) ?? {};
924
945
  _destroy?.();
925
- const index = nodes.indexOf(_subnodes[0]);
926
- if (index > 0) {
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
- const itemAnchor = lookForAnchor(mutation._index);
950
- const anchorIndex = nodes.indexOf(itemAnchor);
951
- if (anchorIndex >= 0) {
952
- nodes.splice(anchorIndex + 1, 0, ..._subnodes);
953
- }
954
- _subnodes.forEach((node) => itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling));
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 = [] } = keyMap.get(mutation._key) ?? {};
960
- const index = nodes.indexOf(_subnodes[0]);
961
- if (index >= 0) {
962
- nodes.splice(index, _subnodes.length);
963
- }
964
- const itemAnchor = lookForAnchor(mutation._to);
965
- const anchorIndex = nodes.indexOf(itemAnchor);
966
- if (anchorIndex >= 0) {
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
- subnodes.forEach((node) => node.parentNode?.removeChild(node));
1001
- nodes.length = 1;
1015
+ TemplateNodes.forEach(subnodes, (node) => node.parentNode?.removeChild(node));
1016
+ nodes[1] = [];
1002
1017
  const [, destroy] = useSubscope(() => {
1003
1018
  subnodes = template()?.build() ?? [];
1004
- anchor.after(...subnodes);
1005
- nodes.push(...subnodes);
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
- nodes.forEach((node) => mount.appendChild(node));
1041
+ TemplateNodes.forEach(nodes, (node) => mount.appendChild(node));
1023
1042
  return () => {
1024
- nodes.forEach((node) => node.parentNode?.removeChild(node));
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 };
@@ -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)=>{if(s={...o,...s},e){const o="function"==typeof n?n(r.peek()):n;(s?.force||o!==r.peek())&&(s?.force?t=o:e.m.push((()=>t=o)),s?.silent||r.o.forEach((t=>e.o.add(t))))}else i((()=>c(n,s)))};return[r,c]},i=t=>{if(e)return t();e={m:[],o:new Set};try{const n=t();return l(),n}finally{e=void 0}},l=()=>{t:for(;e&&(e.m.length>0||e.o.size>0);){e.o.forEach((t=>t._?.())),e.m.forEach((t=>t())),e.m=[];for(const t of e.o)if(t.v){t.u(),e.o.delete(t);continue t}for(const t of e.o){t.u(),e.o.delete(t);break}}};let u=!1;const f=(t,e)=>{const r=!!e,c={S: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.S.u((()=>i(t)));this._=n?()=>{this.S.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();let s=!0;u=!0;try{f((()=>{o(t,s?{...n,force:!0}:n),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={})=>({M:[],k(t){return this.C?.next().value??t()},...t}),m=()=>{const t=r();return t.l.N??=p()},y=(t,n)=>{const e=m(),o=p({...e,...t}),[s,r]=d(n,{details:{N: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)),g=Symbol(),v=(t,n)=>({[g]:Math.random().toString(36).slice(2),j:t,H:n}),x=t=>!!t?.[g],S=(t,n,e)=>{n.addEventListener(t[g],(t=>{const n=_.get(e);void 0!==n&&(t.stopPropagation(),t.detail(n))}))},M=t=>{const n=m();return a((()=>{let e=t.j;return n.L?.dispatchEvent(new CustomEvent(t[g],{detail:t=>e=t,bubbles:!0,composed:!0})),e}))},k=(t,n)=>({T:"p",A:t,...n}),C=(t=CustomEvent)=>({T:"e",O:t}),E=Symbol();let N;const j=(t,n)=>{N?N.push([t,n]):f(t,n)},H=(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[E]={D:t};static observedAttributes=o;props={};events={};[E]={};constructor(){super();for(const t in n){const e=n[t];if("p"==e.T){const n=x(e.A)?e.A:null,[o,s]=c(n?void 0:e.A);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.O(n,t))}}}connectedCallback(){const t=(n=this,e.shadow?n.shadowRoot??n.attachShadow(e.shadow):n);var n;this[E].I=d((()=>y({$:!1,L:this,C:t.childNodes.values()},(()=>{this[E].S=r();const n=N;N=[];try{t?.append(...this.render().build()),N.forEach((([t,n])=>f(t,n)))}finally{N=n}}))))[1]}disconnectedCallback(){this[E].I?.()}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.A)?void 0:o.meta.A)}}return i},L=t=>!!t?.[E],T=(...t)=>{const[n,e]="string"==typeof t[0]?[t[0],t.slice(1)]:["",t];for(const t of e)customElements.define(n+t[E].D,t)},A=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,O=(t,n,e)=>{"-"==n[0]?t.style.setProperty(n,""+e):t.style[n]=null==e?"":"number"!=typeof e||A.test(n)?""+e:e+"px"},D=(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))}},I=t=>({build(){const n=t();return n.build?.()??n}}),$=({text:t,marker:n})=>I((()=>{const e=m(),o=n&&e.k((()=>document.createComment(""))),s=e.k((()=>document.createTextNode("")));return f((()=>{const n=""+(_.get(t)??"");s.textContent!=n&&(s.textContent=n)})),o?[o,s]:[s]})),z=({children:t})=>I((()=>Array.isArray(t)?t.flatMap((t=>z({children:t}).build())):null==t?[]:"object"==typeof t?t:$({text:t}))),P=(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((()=>{O(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((()=>{D(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&&t.append(...y({$:n,C:t.childNodes.values()},(()=>z({children:e.children}).build()))),t},V=(t,n={},e)=>(null!=e&&(n.children=e),L(t)?((t,n)=>I((()=>{const e=m().k((()=>new t));return customElements.upgrade(e),P(e,!1,n),[e]})))(t,n):"function"==typeof t?I((()=>t(n))):((t,n={})=>I((()=>{const e=m(),o="svg"==t||!!e.$;return[P(e.k((()=>o?document.createElementNS("http://www.w3.org/2000/svg",t):document.createElement(t))),o,n,!0)]})))(t,n)),Z=new Proxy(V,{get:(t,n)=>(e,o)=>t(n,e,o)}),q=(t,n)=>{const[e,o]=c({P:[],V:new Map});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.Z?n=>n<t.q?n:n==t.q?NaN:n-1:"a"==t.Z?n=>n<t.q?n:n+1:"m"==t.Z?n=>t.B<=n&&n<t.F?n+1:n==t.F?t.B: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({Z:"r",G:t,q:n})}for(let o=0;o<t().length;o++){const s=n(t()[o],o),c=i(r.get(s));isNaN(c)?e.push({Z:"a",G:s,q:o}):c!=o&&e.push({Z:"m",G:s,F:c,B:o})}e.length>0&&o({P:e,V:c}),s=c})),e},B=t=>I((()=>{const n=m(),e=_.upgrade(t.each??[]),o=n.k((()=>document.createComment(""))),s=t.key??((t,n)=>n),r=[o],i=new Map,l=q(e,s),u=t=>{for(let n=t-1;n>=0;n--){const n=s(e()[t-1],t-1),o=i.get(n)?.J??[];if(o.length>0)return o[o.length-1]}return o};return f((()=>{for(const n of l().P)if("r"==n.Z){const{J:t=[],I:e}=i.get(n.G)??{};e?.();const o=r.indexOf(t[0]);o>0&&r.splice(o,t.length),t.forEach((t=>t.parentNode?.removeChild(t))),i.delete(n.G)}else if("a"==n.Z){let o=[];const[,s]=d((()=>{const[s,i]=c(n.q),[a,d]=c(e()[n.q]);f((()=>{0<=s()&&s()<e().length&&d((()=>e()[s()]))})),f((()=>{const t=l().V.get(n.G);null!=t&&i(t)})),o=t.children?.(a,s,e).build()??[];const h=u(n.q),_=r.indexOf(h);_>=0&&r.splice(_+1,0,...o),o.forEach((t=>h.parentNode?.insertBefore(t,h.nextSibling)))}));i.set(n.G,{J:o,I:s})}else if("m"==n.Z){const{J:t=[]}=i.get(n.G)??{},e=r.indexOf(t[0]);e>=0&&r.splice(e,t.length);const o=u(n.B),s=r.indexOf(o);s>=0&&r.splice(s+1,0,...t),t.forEach((t=>o.parentNode?.insertBefore(t,o.nextSibling)))}}),[l]),r})),F=t=>(m().M=[],G({condition:t.condition,children:t.children})),G=t=>{const n=m(),e=n.M,o=a((()=>e.every((t=>!t()))&&_.get(t.condition)));return n.M=[...e,o],y({M:[]},(()=>I((()=>{const e=n.k((()=>document.createComment(""))),s=[e],r=a((()=>o()?z({children:t.children}):null));let c=[];return f((()=>{c.forEach((t=>t.parentNode?.removeChild(t))),s.length=1;const[,t]=d((()=>{c=r()?.build()??[],e.after(...c),s.push(...c)}));return t}),[r]),s}))))},J=({children:t})=>G({condition:!0,children:t}),K=({mount:t,children:n})=>I((()=>y({C:void 0},(()=>{const e=z({children:n}).build();return f((()=>(e.forEach((n=>t.appendChild(n))),()=>{e.forEach((t=>t.parentNode?.removeChild(t)))}))),[]})))),Q=Symbol(),R=new Map,U=t=>{const n=t.children;if("function"==typeof n){const e=V("style",{},$({text:n,marker:!1}));return t.light?K({mount:document.head,children:e}):e}if(n){const o=m(),s=t.light?document:o.L?.shadowRoot??document,r=((t,n,e)=>{if(!R.has(n)){const t=new CSSStyleSheet;t.replaceSync(n),R.set(n,{K:t,R:0})}const o=R.get(n);o.R++,t.has(n)||t.set(n,{K:o.K,R:0});const s=t.get(n);return s.R++,f((()=>()=>{--s.R||(t.delete(n),e()),--o.R||R.delete(n)})),s.K})((e=s,e[Q]??=new Map),n,(()=>{s.adoptedStyleSheets=s.adoptedStyleSheets.filter((t=>t!=r))}));s.adoptedStyleSheets.push(r)}var e;return z({})},W=(t,...n)=>{const e=()=>t.reduce(((t,e,o)=>t+e+(_.get(n[o])??"")),"");return n.some((t=>"function"==typeof t))?e:e()},X=(t,n,e)=>(n&&null!=e&&(n.key=e),V(t,n));export{H as Component,J as Else,G as ElseIf,B as For,z as Fragment,F as If,_ as MaybeSignal,K as Portal,U as Style,v as createContext,V as createElement,W as css,T as defineComponents,C as event,l as flushBatch,Z as h,L as isComponent,X as jsx,X as jsxDEV,X as jsxs,k as prop,i as useBatch,M as useContext,j as useEffect,a as useMemo,h as useRef,c as useSignal,d as useSubscope};
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
- renderParent?.append(...this.render().build());
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
  }
@@ -1 +1 @@
1
- {"version":3,"file":"component.js","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"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"}
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];