elements-kit 0.0.17 → 0.0.19
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/README.md +97 -19
- package/dist/attributes.d.mts +1 -1
- package/dist/{define-CjbTZ3VG.d.mts → custom-elements-bVYOkHKt.d.mts} +2 -2
- package/dist/custom-elements.d.mts +2 -74
- package/dist/custom-elements.mjs +2 -91
- package/dist/{element-CGVy_8TW.mjs → element-DxmInKJw.mjs} +32 -20
- package/dist/for.d.mts +1 -1
- package/dist/for.mjs +3 -2
- package/dist/infer-Dv5Wk-7E.d.mts +618 -0
- package/dist/integrations/react.d.mts +1 -1
- package/dist/integrations/react.mjs +6 -4
- package/dist/jsx-runtime/index.d.mts +2 -73
- package/dist/jsx-runtime/index.mjs +8 -14
- package/dist/{signals-J8dK_rA4.mjs → lib-D6duEs38.mjs} +1 -105
- package/dist/render.d.mts +21 -0
- package/dist/render.mjs +32 -0
- package/dist/scope-DM2gzOkb.mjs +45 -0
- package/dist/signals/index.d.mts +1 -1
- package/dist/signals/index.mjs +115 -1
- package/dist/{slot-C7GQZe-r.d.mts → slot-B5_VHB7E.d.mts} +10 -0
- package/dist/slot.d.mts +1 -1
- package/dist/{test.BmQO5GaM-DfGStnii.mjs → test.BmQO5GaM-BeO5pvCo.mjs} +1 -1
- package/dist/utilities/_observe.mjs +2 -1
- package/dist/utilities/active-element.d.mts +1 -1
- package/dist/utilities/active-element.mjs +2 -1
- package/dist/utilities/active-element.test.mjs +1 -1
- package/dist/utilities/async.d.mts +1 -1
- package/dist/utilities/async.mjs +2 -1
- package/dist/utilities/async.test.mjs +3 -2
- package/dist/utilities/debounced.d.mts +1 -1
- package/dist/utilities/debounced.mjs +2 -1
- package/dist/utilities/debounced.test.mjs +3 -2
- package/dist/utilities/element-rect.d.mts +1 -1
- package/dist/utilities/element-rect.mjs +2 -1
- package/dist/utilities/element-rect.test.mjs +3 -2
- package/dist/utilities/element-scroll.d.mts +1 -1
- package/dist/utilities/element-scroll.test.mjs +3 -2
- package/dist/utilities/event-driven.d.mts +1 -1
- package/dist/utilities/event-driven.mjs +2 -1
- package/dist/utilities/event-listener.d.mts +1 -1
- package/dist/utilities/event-listener.mjs +2 -1
- package/dist/utilities/event-listener.test.mjs +3 -2
- package/dist/utilities/focus-within.d.mts +1 -1
- package/dist/utilities/focus-within.mjs +2 -1
- package/dist/utilities/focus-within.test.mjs +3 -2
- package/dist/utilities/hover.d.mts +1 -1
- package/dist/utilities/hover.mjs +2 -1
- package/dist/utilities/hover.test.mjs +3 -2
- package/dist/utilities/intersection-observer.test.mjs +3 -2
- package/dist/utilities/interval.d.mts +1 -1
- package/dist/utilities/interval.mjs +2 -1
- package/dist/utilities/interval.test.mjs +3 -2
- package/dist/utilities/location.d.mts +1 -1
- package/dist/utilities/location.mjs +2 -1
- package/dist/utilities/location.test.mjs +1 -1
- package/dist/utilities/long-press.test.mjs +3 -2
- package/dist/utilities/media-devices.d.mts +1 -1
- package/dist/utilities/media-devices.mjs +2 -1
- package/dist/utilities/media-devices.test.mjs +3 -2
- package/dist/utilities/media-player.d.mts +1 -1
- package/dist/utilities/media-player.test.mjs +3 -2
- package/dist/utilities/media-query.d.mts +1 -1
- package/dist/utilities/media-query.mjs +2 -1
- package/dist/utilities/mutation-observer.test.mjs +3 -2
- package/dist/utilities/network.d.mts +1 -1
- package/dist/utilities/network.mjs +2 -1
- package/dist/utilities/network.test.mjs +1 -1
- package/dist/utilities/on-click-outside.test.mjs +3 -2
- package/dist/utilities/orientation.d.mts +1 -1
- package/dist/utilities/orientation.mjs +2 -1
- package/dist/utilities/previous.d.mts +1 -1
- package/dist/utilities/previous.mjs +2 -1
- package/dist/utilities/previous.test.mjs +3 -2
- package/dist/utilities/promise.d.mts +1 -1
- package/dist/utilities/promise.mjs +2 -1
- package/dist/utilities/promise.test.mjs +3 -2
- package/dist/utilities/retry.mjs +2 -1
- package/dist/utilities/retry.test.mjs +3 -2
- package/dist/utilities/routing.d.mts +1 -1
- package/dist/utilities/routing.mjs +2 -1
- package/dist/utilities/routing.test.mjs +1 -1
- package/dist/utilities/search-params.d.mts +1 -1
- package/dist/utilities/search-params.test.mjs +3 -2
- package/dist/utilities/ssr.test.mjs +1 -1
- package/dist/utilities/storage.d.mts +1 -1
- package/dist/utilities/storage.test.mjs +3 -2
- package/dist/utilities/throttled.d.mts +1 -1
- package/dist/utilities/throttled.mjs +2 -1
- package/dist/utilities/throttled.test.mjs +3 -2
- package/dist/utilities/timeout.d.mts +1 -1
- package/dist/utilities/timeout.mjs +2 -1
- package/dist/utilities/timeout.test.mjs +3 -2
- package/dist/utilities/window-focus.d.mts +1 -1
- package/dist/utilities/window-focus.mjs +2 -1
- package/dist/utilities/window-size.d.mts +1 -1
- package/dist/utilities/window-size.mjs +2 -1
- package/dist/utilities/window-size.test.mjs +1 -1
- package/package.json +6 -1
- package/dist/index-DydGTqZU.d.mts +0 -315
- package/dist/infer-BfzRJoCn.d.mts +0 -203
- package/dist/polyfill-BVNd6ogU.d.mts +0 -9
- /package/dist/{attributes-Dtn68R1u.d.mts → attributes-aiRoArZz.d.mts} +0 -0
- /package/dist/{magic-string.es-i62WTP6J.mjs → magic-string.es-cTgJnTCj.mjs} +0 -0
|
@@ -1,73 +1,2 @@
|
|
|
1
|
-
import { t as
|
|
2
|
-
|
|
3
|
-
import { n as MaybeReactive } from "../index-DydGTqZU.mjs";
|
|
4
|
-
import { JSX as JSX$1 } from "dom-expressions/src/jsx-h";
|
|
5
|
-
|
|
6
|
-
//#region src/jsx-runtime/element.d.ts
|
|
7
|
-
declare function createElement(type: string | Element | DocumentFragment | ComponentClass | ComponentFn, {
|
|
8
|
-
ref,
|
|
9
|
-
...props
|
|
10
|
-
}?: Record<string | symbol, unknown> & {
|
|
11
|
-
ref?: (el: Element) => void;
|
|
12
|
-
}): Element | DocumentFragment | null;
|
|
13
|
-
//#endregion
|
|
14
|
-
//#region src/jsx-runtime/fragment.d.ts
|
|
15
|
-
/**
|
|
16
|
-
* Used by the JSX transform for `<>...</>` fragments.
|
|
17
|
-
*
|
|
18
|
-
* createElement wraps this in effectScope + attachDisposables, so children's
|
|
19
|
-
* Symbol.dispose functions are collected via onCleanup and fired when the
|
|
20
|
-
* fragment's own dispose is called.
|
|
21
|
-
*/
|
|
22
|
-
declare function Fragment(props: {
|
|
23
|
-
children?: unknown;
|
|
24
|
-
}): DocumentFragment;
|
|
25
|
-
//#endregion
|
|
26
|
-
//#region src/jsx-runtime/index.d.ts
|
|
27
|
-
/** A value or a reactive zero-argument getter. */
|
|
28
|
-
type FunctionMaybe<T> = JSX$1.FunctionMaybe<T>;
|
|
29
|
-
/**
|
|
30
|
-
* Maps slot names to `Child` content.
|
|
31
|
-
* Use this to type `slot:name` JSX props on a custom component.
|
|
32
|
-
*
|
|
33
|
-
* @example
|
|
34
|
-
* ```tsx
|
|
35
|
-
* function Card(props: { title: string } & SlotProps<"header" | "footer">) { … }
|
|
36
|
-
* // caller: <Card title="…" slot:header={<h1>…</h1>} slot:footer={<p>…</p>} />
|
|
37
|
-
* ```
|
|
38
|
-
*/
|
|
39
|
-
type SlotProps<K extends string> = { [P in K as `slot:${P}`]?: Child };
|
|
40
|
-
/**
|
|
41
|
-
* Get the full JSX prop types for a given tag name, including reactive
|
|
42
|
-
* attributes, events, and all our namespace extensions.
|
|
43
|
-
*
|
|
44
|
-
* @example
|
|
45
|
-
* ```ts
|
|
46
|
-
* type InputProps = Attrs<"input">; // typed props for <input>
|
|
47
|
-
* type DivProps = Attrs<"div">; // typed props for <div>
|
|
48
|
-
* ```
|
|
49
|
-
*/
|
|
50
|
-
type Attrs<K extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[K];
|
|
51
|
-
/** Extra props injected into every intrinsic element beyond dom-expressions defaults. */
|
|
52
|
-
type OurProps = {
|
|
53
|
-
ref?: (el: Element) => void;
|
|
54
|
-
[slot: `slot:${string}`]: Child;
|
|
55
|
-
[cls: `class:${string}`]: FunctionMaybe<boolean>;
|
|
56
|
-
[sty: `style:${string}`]: FunctionMaybe<string | null>;
|
|
57
|
-
[prop: `prop:${string}`]: unknown;
|
|
58
|
-
};
|
|
59
|
-
type WithOurProps<T> = T & OurProps;
|
|
60
|
-
declare namespace JSX {
|
|
61
|
-
export type Element = globalThis.Element | globalThis.DocumentFragment | null;
|
|
62
|
-
export type ElementType = Child | ComponentClass;
|
|
63
|
-
export interface ElementChildrenAttribute {
|
|
64
|
-
children: {};
|
|
65
|
-
}
|
|
66
|
-
type RegisteredElements = { [K in keyof CustomElementRegistry]: CustomElementRegistry[K] extends AnyElementCtor ? ElementProps<CustomElementRegistry[K]> : never };
|
|
67
|
-
export type IntrinsicElements = { [K in keyof JSX$1.IntrinsicElements]: WithOurProps<JSX$1.IntrinsicElements[K]> } & RegisteredElements & {
|
|
68
|
-
/** Unregistered custom elements (`x-foo`, `my-component`, …) — loose fallback. */[customElement: `${string}-${string}`]: WithOurProps<JSX$1.DOMAttributes<HTMLElement>> & Record<string, unknown>;
|
|
69
|
-
};
|
|
70
|
-
export {};
|
|
71
|
-
}
|
|
72
|
-
//#endregion
|
|
73
|
-
export { Attrs, type ComponentProps, type ElementProps, Fragment, FunctionMaybe, JSX, type MaybeReactive, type MaybeReactiveProps, type Props, type Require, SlotProps, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };
|
|
1
|
+
import { U as createElement, _ as SlotProps, a as RawProps, b as MaybeReactive, c as ResolveProps, d as ComponentClass, f as ComponentFn, g as JSX, h as Attrs, i as Props, l as Child, m as PropsTarget, n as ElementProps, o as ReactiveProps, p as ComponentInstance, r as MaybeReactiveProps, s as Require, t as ComponentProps, u as Component, v as Fragment } from "../infer-Dv5Wk-7E.mjs";
|
|
2
|
+
export { Attrs, Child, Component, ComponentClass, ComponentFn, ComponentInstance, ComponentProps, ElementProps, Fragment, JSX, MaybeReactive, MaybeReactiveProps, Props, PropsTarget, RawProps, ReactiveProps, Require, ResolveProps, SlotProps, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };
|
|
@@ -1,26 +1,20 @@
|
|
|
1
|
-
import { t as createElement } from "../element-
|
|
2
|
-
import { _ as onCleanup } from "../signals-J8dK_rA4.mjs";
|
|
1
|
+
import { r as mountChild, t as createElement } from "../element-DxmInKJw.mjs";
|
|
3
2
|
//#region src/jsx-runtime/fragment.ts
|
|
4
3
|
/**
|
|
5
4
|
* Used by the JSX transform for `<>...</>` fragments.
|
|
6
5
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
6
|
+
* Each child is routed through `mountChild`, which handles Nodes, strings,
|
|
7
|
+
* numbers, arrays, and reactive getters — matching the behavior of any other
|
|
8
|
+
* JSX container. `mountChild` also wires each child's cleanup via its own
|
|
9
|
+
* `effectScope`, which links to the enclosing `effectScope` created by
|
|
10
|
+
* `createElement(Fragment, ...)` for disposal propagation.
|
|
10
11
|
*/
|
|
11
12
|
function Fragment(props) {
|
|
12
13
|
const fragment = document.createDocumentFragment();
|
|
13
|
-
const raw = props.children;
|
|
14
|
+
const raw = props.children?.();
|
|
14
15
|
if (raw == null) return fragment;
|
|
15
16
|
const nodes = Array.isArray(raw) ? raw.flat(Infinity) : [raw];
|
|
16
|
-
const
|
|
17
|
-
for (const child of nodes) {
|
|
18
|
-
if (!(child instanceof Node)) continue;
|
|
19
|
-
const dispose = child[Symbol.dispose];
|
|
20
|
-
if (dispose) disposes.push(dispose);
|
|
21
|
-
fragment.appendChild(child);
|
|
22
|
-
}
|
|
23
|
-
if (disposes.length) onCleanup(() => disposes.forEach((fn) => fn()));
|
|
17
|
+
for (const child of nodes) mountChild(fragment, child);
|
|
24
18
|
return fragment;
|
|
25
19
|
}
|
|
26
20
|
//#endregion
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import "./polyfill-B1lNNcum.mjs";
|
|
2
1
|
//#region src/signals/system.ts
|
|
3
2
|
/**
|
|
4
3
|
* Creates and returns the five core graph-manipulation functions that together
|
|
@@ -908,107 +907,4 @@ function purgeDeps(sub) {
|
|
|
908
907
|
while (dep !== void 0) dep = unlink(dep, sub);
|
|
909
908
|
}
|
|
910
909
|
//#endregion
|
|
911
|
-
|
|
912
|
-
function isReactive(value) {
|
|
913
|
-
return isSignal(value) || isComputed(value);
|
|
914
|
-
}
|
|
915
|
-
/**
|
|
916
|
-
* A decorator that makes a class field reactive by automatically wrapping its value in a signal.
|
|
917
|
-
*
|
|
918
|
-
* The field behaves like a normal property (get/set) but reactivity is tracked under the hood.
|
|
919
|
-
* Any reads will subscribe to the signal and any writes will trigger updates.
|
|
920
|
-
*
|
|
921
|
-
* @example
|
|
922
|
-
* ```ts
|
|
923
|
-
* class Counter {
|
|
924
|
-
* @reactive()
|
|
925
|
-
* count: number = 0;
|
|
926
|
-
* }
|
|
927
|
-
*
|
|
928
|
-
* const counter = new Counter();
|
|
929
|
-
* counter.count++; // Triggers reactivity
|
|
930
|
-
* console.log(counter.count); // Subscribes to changes
|
|
931
|
-
* ```
|
|
932
|
-
*
|
|
933
|
-
* @remarks
|
|
934
|
-
* Equivalent to manually creating a private signal and getter/setter:
|
|
935
|
-
* ```ts
|
|
936
|
-
* class Counter {
|
|
937
|
-
* #count = signal(0);
|
|
938
|
-
* get count() { return this.#count(); }
|
|
939
|
-
* set count(value) { this.#count(value); }
|
|
940
|
-
* }
|
|
941
|
-
* ```
|
|
942
|
-
*/
|
|
943
|
-
function reactive(source) {
|
|
944
|
-
const signalStore = /* @__PURE__ */ new WeakMap();
|
|
945
|
-
return (_target, context) => {
|
|
946
|
-
context.addInitializer(function() {
|
|
947
|
-
const sig = signalStore.get(this);
|
|
948
|
-
const writable = !isComputed(sig);
|
|
949
|
-
Object.defineProperty(this, context.name, {
|
|
950
|
-
get() {
|
|
951
|
-
return sig();
|
|
952
|
-
},
|
|
953
|
-
...writable && { set(value) {
|
|
954
|
-
sig(value);
|
|
955
|
-
} },
|
|
956
|
-
enumerable: true,
|
|
957
|
-
configurable: true
|
|
958
|
-
});
|
|
959
|
-
});
|
|
960
|
-
return function(initialValue) {
|
|
961
|
-
signalStore.set(this, source ? source(this) : signal(initialValue));
|
|
962
|
-
return initialValue;
|
|
963
|
-
};
|
|
964
|
-
};
|
|
965
|
-
}
|
|
966
|
-
/**
|
|
967
|
-
* Resolve a {@link MaybeReactive} to its current value. Calls the getter
|
|
968
|
-
* when reactive; returns the value as-is when static.
|
|
969
|
-
*
|
|
970
|
-
* @example
|
|
971
|
-
* ```ts
|
|
972
|
-
* resolve(5); // 5
|
|
973
|
-
* resolve(() => count()); // current count value
|
|
974
|
-
* ```
|
|
975
|
-
*/
|
|
976
|
-
function resolve(value) {
|
|
977
|
-
return isReactive(value) ? value() : value;
|
|
978
|
-
}
|
|
979
|
-
/**
|
|
980
|
-
* Turn a reactive-props object into a bag of per-key getters. Callers may
|
|
981
|
-
* pass values or reactive sources (`signal`, `computed`); reading
|
|
982
|
-
* `props.name()` inside an effect or JSX getter subscribes to whatever
|
|
983
|
-
* drives it. Static values become stable thunks, signals and computed pass
|
|
984
|
-
* through unchanged — so identity is preserved (`props.name === props.name`).
|
|
985
|
-
*
|
|
986
|
-
* @example
|
|
987
|
-
* ```tsx
|
|
988
|
-
* import { resolveProps } from "elements-kit/signals";
|
|
989
|
-
*
|
|
990
|
-
* function Greeting(raw: MaybeReactiveProps<{ name: string; excited?: boolean }>) {
|
|
991
|
-
* const props = resolveProps(raw);
|
|
992
|
-
* return (
|
|
993
|
-
* <p>
|
|
994
|
-
* Hello, {props.name}
|
|
995
|
-
* {() => (props.excited() ? "!" : ".")}
|
|
996
|
-
* </p>
|
|
997
|
-
* );
|
|
998
|
-
* }
|
|
999
|
-
* ```
|
|
1000
|
-
*/
|
|
1001
|
-
function resolveProps(raw) {
|
|
1002
|
-
const cache = /* @__PURE__ */ new Map();
|
|
1003
|
-
return new Proxy(raw, { get(target, key) {
|
|
1004
|
-
let getter = cache.get(key);
|
|
1005
|
-
if (!getter) {
|
|
1006
|
-
const v = target[key];
|
|
1007
|
-
getter = isReactive(v) ? v : () => v;
|
|
1008
|
-
cache.set(key, getter);
|
|
1009
|
-
}
|
|
1010
|
-
return getter;
|
|
1011
|
-
} });
|
|
1012
|
-
}
|
|
1013
|
-
//#endregion
|
|
1014
|
-
export { onCleanup as _, COMPUTED as a, untracked as b, SIGNAL as c, effect as d, effectScope as f, isSignal as g, isEffectScope as h, resolveProps as i, batch as l, isEffect as m, reactive as n, EFFECT as o, isComputed as p, resolve as r, EFFECT_SCOPE as s, isReactive as t, computed as u, signal as v, trigger as y };
|
|
910
|
+
export { batch as a, effectScope as c, isEffectScope as d, isSignal as f, untracked as g, trigger as h, SIGNAL as i, isComputed as l, signal as m, EFFECT as n, computed as o, onCleanup as p, EFFECT_SCOPE as r, effect as s, COMPUTED as t, isEffect as u };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
//#region src/render.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* Mount a node into `target` with a scoped lifetime.
|
|
4
|
+
*
|
|
5
|
+
* `setup` runs inside a detached `effectScope`. The returned node is appended
|
|
6
|
+
* to `target`. Calling the returned `unmount` removes the node from the DOM,
|
|
7
|
+
* disposes its `Symbol.dispose` hook (JSX-created elements carry one), and
|
|
8
|
+
* tears down every `effect` / `onCleanup` registered inside `setup`.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* import { render } from "elements-kit/render";
|
|
13
|
+
*
|
|
14
|
+
* const unmount = render(document.getElementById("app")!, () => <App />);
|
|
15
|
+
* // later
|
|
16
|
+
* unmount();
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
declare function render(target: Element | DocumentFragment, setup: () => Node | null | undefined): () => void;
|
|
20
|
+
//#endregion
|
|
21
|
+
export { render };
|
package/dist/render.mjs
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { t as scope } from "./scope-DM2gzOkb.mjs";
|
|
2
|
+
//#region src/render.ts
|
|
3
|
+
/**
|
|
4
|
+
* Mount a node into `target` with a scoped lifetime.
|
|
5
|
+
*
|
|
6
|
+
* `setup` runs inside a detached `effectScope`. The returned node is appended
|
|
7
|
+
* to `target`. Calling the returned `unmount` removes the node from the DOM,
|
|
8
|
+
* disposes its `Symbol.dispose` hook (JSX-created elements carry one), and
|
|
9
|
+
* tears down every `effect` / `onCleanup` registered inside `setup`.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* import { render } from "elements-kit/render";
|
|
14
|
+
*
|
|
15
|
+
* const unmount = render(document.getElementById("app")!, () => <App />);
|
|
16
|
+
* // later
|
|
17
|
+
* unmount();
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
function render(target, setup) {
|
|
21
|
+
const [result, stop] = scope(setup);
|
|
22
|
+
if (result) target.appendChild(result);
|
|
23
|
+
return () => {
|
|
24
|
+
if (result) {
|
|
25
|
+
result[Symbol.dispose]?.();
|
|
26
|
+
result.remove?.();
|
|
27
|
+
}
|
|
28
|
+
stop();
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
//#endregion
|
|
32
|
+
export { render };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { c as effectScope, g as untracked } from "./lib-D6duEs38.mjs";
|
|
2
|
+
//#region src/signals/scope.ts
|
|
3
|
+
/**
|
|
4
|
+
* Run `setup` inside a fresh `effectScope`. Returns `[result, stop]`.
|
|
5
|
+
*
|
|
6
|
+
* Use this wherever you need reactive code with an explicit lifetime outside
|
|
7
|
+
* the JSX element flow — most commonly a custom element's `connectedCallback`.
|
|
8
|
+
* `effect`, `onCleanup`, and any nested reactive registrations made in
|
|
9
|
+
* `setup` are owned by the returned `stop`.
|
|
10
|
+
*
|
|
11
|
+
* `untracked` detaches the new scope from any enclosing effect so it isn't
|
|
12
|
+
* torn down when that effect re-runs — its lifetime belongs solely to the
|
|
13
|
+
* caller.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```ts
|
|
17
|
+
* class Clock extends HTMLElement {
|
|
18
|
+
* #stop?: () => void;
|
|
19
|
+
*
|
|
20
|
+
* connectedCallback() {
|
|
21
|
+
* [, this.#stop] = scope(() => {
|
|
22
|
+
* const id = setInterval(() => (this.textContent = String(Date.now())), 1000);
|
|
23
|
+
* onCleanup(() => clearInterval(id));
|
|
24
|
+
* });
|
|
25
|
+
* }
|
|
26
|
+
*
|
|
27
|
+
* disconnectedCallback() {
|
|
28
|
+
* this.#stop?.();
|
|
29
|
+
* this.#stop = undefined;
|
|
30
|
+
* }
|
|
31
|
+
* }
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
function scope(setup) {
|
|
35
|
+
let result;
|
|
36
|
+
let stop;
|
|
37
|
+
untracked(() => {
|
|
38
|
+
stop = effectScope(() => {
|
|
39
|
+
result = setup();
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
return [result, stop];
|
|
43
|
+
}
|
|
44
|
+
//#endregion
|
|
45
|
+
export { scope as t };
|
package/dist/signals/index.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { A as SIGNAL, B as signal, C as isReactive, D as COMPUTED, E as resolveProps, F as isComputed, H as untracked, I as isEffect, L as isEffectScope, M as computed, N as effect, O as EFFECT, P as effectScope, R as isSignal, S as Updater, T as resolve, V as trigger, b as MaybeReactive, j as batch, k as EFFECT_SCOPE, w as reactive, x as Signal, y as Computed, z as onCleanup } from "../infer-Dv5Wk-7E.mjs";
|
|
2
2
|
export { COMPUTED, Computed, EFFECT, EFFECT_SCOPE, MaybeReactive, SIGNAL, Signal, Updater, batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, resolve, resolveProps, signal, trigger, untracked };
|
package/dist/signals/index.mjs
CHANGED
|
@@ -1,2 +1,116 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { a as batch, c as effectScope, d as isEffectScope, f as isSignal, g as untracked, h as trigger, i as SIGNAL, l as isComputed, m as signal, n as EFFECT, o as computed, p as onCleanup, r as EFFECT_SCOPE, s as effect, t as COMPUTED, u as isEffect } from "../lib-D6duEs38.mjs";
|
|
2
|
+
import "../polyfill-B1lNNcum.mjs";
|
|
3
|
+
//#region src/signals/index.ts
|
|
4
|
+
function isReactive(value) {
|
|
5
|
+
return isSignal(value) || isComputed(value);
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* A decorator that makes a class field reactive by automatically wrapping its value in a signal.
|
|
9
|
+
*
|
|
10
|
+
* The field behaves like a normal property (get/set) but reactivity is tracked under the hood.
|
|
11
|
+
* Any reads will subscribe to the signal and any writes will trigger updates.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```ts
|
|
15
|
+
* class Counter {
|
|
16
|
+
* @reactive()
|
|
17
|
+
* count: number = 0;
|
|
18
|
+
* }
|
|
19
|
+
*
|
|
20
|
+
* const counter = new Counter();
|
|
21
|
+
* counter.count++; // Triggers reactivity
|
|
22
|
+
* console.log(counter.count); // Subscribes to changes
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @remarks
|
|
26
|
+
* Equivalent to manually creating a private signal and getter/setter:
|
|
27
|
+
* ```ts
|
|
28
|
+
* class Counter {
|
|
29
|
+
* #count = signal(0);
|
|
30
|
+
* get count() { return this.#count(); }
|
|
31
|
+
* set count(value) { this.#count(value); }
|
|
32
|
+
* }
|
|
33
|
+
* ```
|
|
34
|
+
*/
|
|
35
|
+
function reactive(source) {
|
|
36
|
+
const signalStore = /* @__PURE__ */ new WeakMap();
|
|
37
|
+
return (_target, context) => {
|
|
38
|
+
context.addInitializer(function() {
|
|
39
|
+
const sig = signalStore.get(this);
|
|
40
|
+
const writable = !isComputed(sig);
|
|
41
|
+
Object.defineProperty(this, context.name, {
|
|
42
|
+
get() {
|
|
43
|
+
return sig();
|
|
44
|
+
},
|
|
45
|
+
...writable && { set(value) {
|
|
46
|
+
sig(value);
|
|
47
|
+
} },
|
|
48
|
+
enumerable: true,
|
|
49
|
+
configurable: true
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
return function(initialValue) {
|
|
53
|
+
signalStore.set(this, source ? source(this) : signal(initialValue));
|
|
54
|
+
return initialValue;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Resolve a {@link MaybeReactive} to its current value. Calls the getter
|
|
60
|
+
* when reactive; returns the value as-is when static.
|
|
61
|
+
*
|
|
62
|
+
* @example
|
|
63
|
+
* ```ts
|
|
64
|
+
* resolve(5); // 5
|
|
65
|
+
* resolve(() => count()); // current count value
|
|
66
|
+
* ```
|
|
67
|
+
*/
|
|
68
|
+
function resolve(value) {
|
|
69
|
+
return isReactive(value) ? value() : value;
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Turn a reactive-props object into a bag of per-key getters. Callers may
|
|
73
|
+
* pass values or reactive sources (`signal`, `computed`); reading
|
|
74
|
+
* `props.name()` inside an effect or JSX getter subscribes to whatever
|
|
75
|
+
* drives it. Static values become stable thunks, signals and computed pass
|
|
76
|
+
* through unchanged — so identity is preserved (`props.name === props.name`).
|
|
77
|
+
*
|
|
78
|
+
* The JSX runtime auto-applies this to function-component props — call
|
|
79
|
+
* directly only for non-JSX call sites or nested prop bags.
|
|
80
|
+
*
|
|
81
|
+
* @example
|
|
82
|
+
* ```ts
|
|
83
|
+
* import { resolveProps } from "elements-kit/signals";
|
|
84
|
+
* import { signal } from "elements-kit/signals";
|
|
85
|
+
*
|
|
86
|
+
* const count = signal(0);
|
|
87
|
+
* const props = resolveProps({ count, label: "n" });
|
|
88
|
+
* props.count(); // 0 — subscribes to count
|
|
89
|
+
* props.label(); // "n"
|
|
90
|
+
* ```
|
|
91
|
+
*/
|
|
92
|
+
function resolveProps(raw) {
|
|
93
|
+
const cache = /* @__PURE__ */ new Map();
|
|
94
|
+
const get = (key) => {
|
|
95
|
+
let getter = cache.get(key);
|
|
96
|
+
if (!getter) {
|
|
97
|
+
const v = raw[key];
|
|
98
|
+
getter = isReactive(v) ? v : () => v;
|
|
99
|
+
cache.set(key, getter);
|
|
100
|
+
}
|
|
101
|
+
return getter;
|
|
102
|
+
};
|
|
103
|
+
return new Proxy(raw, {
|
|
104
|
+
get: (_target, key) => get(key),
|
|
105
|
+
has: (_target, key) => key in raw,
|
|
106
|
+
ownKeys: (_target) => Reflect.ownKeys(raw),
|
|
107
|
+
getOwnPropertyDescriptor: (_target, key) => key in raw ? {
|
|
108
|
+
enumerable: true,
|
|
109
|
+
configurable: true,
|
|
110
|
+
writable: false,
|
|
111
|
+
value: get(key)
|
|
112
|
+
} : void 0
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
//#endregion
|
|
2
116
|
export { COMPUTED, EFFECT, EFFECT_SCOPE, SIGNAL, batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, resolve, resolveProps, signal, trigger, untracked };
|
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
//#region src/lib.d.ts
|
|
2
2
|
type PrimitiveNodeType = Node | string | boolean | number | bigint | symbol | Date | RegExp | null | undefined;
|
|
3
3
|
//#endregion
|
|
4
|
+
//#region src/polyfill.d.ts
|
|
5
|
+
declare global {
|
|
6
|
+
interface SymbolConstructor {
|
|
7
|
+
readonly dispose: symbol;
|
|
8
|
+
}
|
|
9
|
+
interface Disposable {
|
|
10
|
+
[Symbol.dispose](): void;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
//#endregion
|
|
4
14
|
//#region src/slot.d.ts
|
|
5
15
|
/**
|
|
6
16
|
* A lightweight slot that reserves a region in the DOM using comment markers.
|
package/dist/slot.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { i as Slots, n as Slot, r as SlotInstance, t as SLOTS } from "./slot-
|
|
1
|
+
import { i as Slots, n as Slot, r as SlotInstance, t as SLOTS } from "./slot-B5_VHB7E.mjs";
|
|
2
2
|
export { SLOTS, Slot, SlotInstance, Slots };
|
|
@@ -10139,7 +10139,7 @@ function memo(fn) {
|
|
|
10139
10139
|
};
|
|
10140
10140
|
}
|
|
10141
10141
|
async function saveInlineSnapshots(environment, snapshots) {
|
|
10142
|
-
const MagicString = (await import("./magic-string.es-
|
|
10142
|
+
const MagicString = (await import("./magic-string.es-cTgJnTCj.mjs")).default;
|
|
10143
10143
|
const files = new Set(snapshots.map((i) => i.file));
|
|
10144
10144
|
await Promise.all(Array.from(files).map(async (file) => {
|
|
10145
10145
|
const snaps = snapshots.filter((i) => i.file === file);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { o as computed } from "../lib-D6duEs38.mjs";
|
|
2
|
+
import "../signals/index.mjs";
|
|
2
3
|
import { fromEvent, sync } from "./event-driven.mjs";
|
|
3
4
|
import { isBrowser } from "./environment.mjs";
|
|
4
5
|
//#region src/utilities/active-element.ts
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { o as describe, s as it, t as globalExpect } from "../test.BmQO5GaM-
|
|
1
|
+
import { o as describe, s as it, t as globalExpect } from "../test.BmQO5GaM-BeO5pvCo.mjs";
|
|
2
2
|
import { activeElement } from "./active-element.mjs";
|
|
3
3
|
//#region src/utilities/active-element.test.ts
|
|
4
4
|
describe("activeElement (singleton)", () => {
|
package/dist/utilities/async.mjs
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { g as untracked, m as signal, s as effect } from "../lib-D6duEs38.mjs";
|
|
2
|
+
import { resolve } from "../signals/index.mjs";
|
|
2
3
|
import { promise } from "./promise.mjs";
|
|
3
4
|
//#region src/utilities/async.ts
|
|
4
5
|
var Async = class {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { m as signal, p as onCleanup, s as effect } from "../lib-D6duEs38.mjs";
|
|
2
|
+
import "../signals/index.mjs";
|
|
3
|
+
import { n as vi, o as describe, s as it, t as globalExpect } from "../test.BmQO5GaM-BeO5pvCo.mjs";
|
|
3
4
|
import { Async, async } from "./async.mjs";
|
|
4
5
|
import { createInterval } from "./interval.mjs";
|
|
5
6
|
//#region src/utilities/async.test.ts
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { c as effectScope, m as signal } from "../lib-D6duEs38.mjs";
|
|
2
|
+
import "../signals/index.mjs";
|
|
3
|
+
import { a as beforeEach, n as vi, o as describe, r as afterEach, s as it, t as globalExpect } from "../test.BmQO5GaM-BeO5pvCo.mjs";
|
|
3
4
|
import { createDebounced } from "./debounced.mjs";
|
|
4
5
|
//#region src/utilities/debounced.test.ts
|
|
5
6
|
beforeEach(() => {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { c as effectScope } from "../lib-D6duEs38.mjs";
|
|
2
|
+
import "../signals/index.mjs";
|
|
3
|
+
import { n as vi, o as describe, r as afterEach, s as it, t as globalExpect } from "../test.BmQO5GaM-BeO5pvCo.mjs";
|
|
3
4
|
import { createElementRect } from "./element-rect.mjs";
|
|
4
5
|
//#region src/utilities/element-rect.test.ts
|
|
5
6
|
afterEach(() => {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { c as effectScope } from "../lib-D6duEs38.mjs";
|
|
2
|
+
import "../signals/index.mjs";
|
|
3
|
+
import { o as describe, s as it, t as globalExpect } from "../test.BmQO5GaM-BeO5pvCo.mjs";
|
|
3
4
|
import { createElementScroll } from "./element-scroll.mjs";
|
|
4
5
|
//#region src/utilities/element-scroll.test.ts
|
|
5
6
|
describe("createElementScroll", () => {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { h as trigger, i as SIGNAL, m as signal, o as computed, p as onCleanup } from "../lib-D6duEs38.mjs";
|
|
2
|
+
import "../signals/index.mjs";
|
|
2
3
|
//#region src/utilities/event-driven.ts
|
|
3
4
|
/**
|
|
4
5
|
* Returns a `Subscribe` for one or more DOM events on a target.
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { p as onCleanup, s as effect } from "../lib-D6duEs38.mjs";
|
|
2
|
+
import "../signals/index.mjs";
|
|
2
3
|
//#region src/utilities/event-listener.ts
|
|
3
4
|
function on(target, type, handler, options) {
|
|
4
5
|
const add = (t) => options !== void 0 ? t.addEventListener(type, handler, options) : t.addEventListener(type, handler);
|