@seahax/elemental 0.2.1 → 0.2.3

package/README.md

@@ -25,6 +25,7 @@ import {
   useRoute,
   useLoading,
   useEffect,
+  useChildEffect,
   h,
 } from '@seahax/elemental';
 
@@ -50,7 +51,7 @@ export const MyComponent = defineComponent((shadow) => {
   });
   const globalStateRef = useStore(myStore, select, mutate);
   const [dataValueRef, ...] = useAttributes('data-value', ...);
-  const [routeMatchRef, routeStateRef] = useRoute('/path/', {
+  const routeMatchRef = useRoute('/path/', {
     match: 'prefix', // 'exact' | 'prefix' | RegExp
     source: 'pathname', // 'pathname' | 'hash'
   });
@@ -83,6 +84,18 @@ export const MyComponent = defineComponent((shadow) => {
       // is disconnected from the document.
     };
   });
+
+  // React to child list changes.
+  useChildEffect(() => {
+    // Reactive code runs when the component is connected to the document,
+    // and when the children of the component change. Access the current
+    // children using the `shadow.host.children` property.
+
+    return () => {
+      // Cleanup before the next effect callback and after the component
+      // is disconnected from the document.
+    };
+  });
 });
 ```
 

package/dist/hooks/core.d.ts

@@ -3,5 +3,7 @@ import { type ReadonlyRef, type Ref, type RefValues } from '../component.ts';
 export declare function useRef<T>(initialValue: T, onChange?: (value: T) => void): Ref<T>;
 /** React to observable (reference) changes. */
 export declare function useEffect<const TDeps extends readonly ReadonlyRef<any>[]>(deps: TDeps, callback: (...values: RefValues<TDeps>) => (() => void) | void): void;
+/** React to child list changes (non-recursive). */
+export declare function useChildEffect(callback: () => (() => void) | void): void;
 /** Observe attribute changes. */
 export declare function useAttributes<TName extends string>(...names: TName[]): Readonly<Record<TName, Ref<string | null>>>;

package/dist/hooks/core.js

@@ -3,36 +3,42 @@ import { $$renderContextStack as t } from "../internal/constants.js";
 import "../component.js";
 //#region src/hooks/core.ts
 function n(e, t) {
-	return a().useRef(e, t);
+	return o().useRef(e, t);
 }
 function r(t, n) {
-	let { onSetRef: r, onDisconnect: i } = a(), o = e(), s = () => o.run({ clear: !0 }), c;
+	let { onSetRef: r, onDisconnect: i } = o(), a = e(), s = () => a.run({ clear: !0 }), c;
 	r.push(() => {
 		let e = t.map((e) => e.value);
 		if (c?.length === e.length && c?.every((t, n) => t === e[n])) return;
 		c = e, s();
 		let r = n(...c);
-		r && o.push(() => r());
+		r && a.push(() => r());
 	}), i.push(s);
 }
-function i(...e) {
+function i(e) {
+	let { host: t } = o(), i = n(0), a = new MutationObserver((e) => {
+		e.some((e) => e.type === "childList") && (i.value = (i.value + 1) % (2 ** 53 - 1));
+	});
+	r([], () => (a.observe(t, { childList: !0 }), () => a.disconnect())), r([i], () => e());
+}
+function a(...e) {
 	if (e.length === 0) return {};
-	let { host: t } = a(), i = Object.fromEntries(e.map((e) => [e, n(t.getAttribute(e), (n) => {
+	let { host: t } = o(), i = Object.fromEntries(e.map((e) => [e, n(t.getAttribute(e), (n) => {
 		n == null ? t.removeAttribute(e) : t.setAttribute(e, n);
-	})])), o = new MutationObserver((e) => {
+	})])), a = new MutationObserver((e) => {
 		for (let { attributeName: n } of e) n != null && Object.hasOwn(i, n) && (i[n].value = t.getAttribute(n));
 	});
-	return r([], () => (o.observe(t, {
+	return r([], () => (a.observe(t, {
 		attributeFilter: e,
 		attributes: !0
-	}), () => o.disconnect())), i;
+	}), () => a.disconnect())), i;
 }
-function a() {
+function o() {
 	let e = window[t].at(-1);
 	if (!e) throw Error("hooks must be called inside a render function");
 	return e;
 }
 //#endregion
-export { i as useAttributes, r as useEffect, n as useRef };
+export { a as useAttributes, i as useChildEffect, r as useEffect, n as useRef };
 
 //# sourceMappingURL=core.js.map

package/dist/hooks/core.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.js","names":[],"sources":["../../src/hooks/core.ts"],"sourcesContent":["import { type ReadonlyRef, type Ref, type RefValues } from '../component.ts';\nimport { createCallbacks } from '../internal/callbacks.ts';\nimport { $$renderContextStack } from '../internal/constants.ts';\n\n/** Create an observable value. */\nexport function useRef<T>(initialValue: T, onChange?: (value: T) => void): Ref<T> {\n  return getHookContext().useRef(initialValue, onChange);\n}\n\n/** React to observable (reference) changes. */\nexport function useEffect<const TDeps extends readonly ReadonlyRef<any>[]>(\n  deps: TDeps,\n  callback: (...values: RefValues<TDeps>) => (() => void) | void,\n): void {\n  const { onSetRef, onDisconnect } = getHookContext();\n  const cleanupCallback = createCallbacks();\n  const cleanup = (): void => cleanupCallback.run({ clear: true });\n  let values: any[] | undefined;\n\n  onSetRef.push((): void => {\n    const newValues = deps.map((dep) => dep.value);\n    if (values?.length === newValues.length && values?.every((value, i) => value === newValues[i])) return;\n    values = newValues;\n    cleanup();\n    const maybeCleanup = callback(...(values as any));\n    if (maybeCleanup) cleanupCallback.push(() => maybeCleanup());\n  });\n\n  onDisconnect.push(cleanup);\n}\n\n/** Observe attribute changes. */\nexport function useAttributes<TName extends string>(...names: TName[]): Readonly<Record<TName, Ref<string | null>>> {\n  if (names.length === 0) return {} as any;\n  const { host } = getHookContext();\n\n  const refs = Object.fromEntries(\n    names.map((name) => [\n      name,\n      useRef(host.getAttribute(name), (value) => {\n        if (value == null) host.removeAttribute(name);\n        else host.setAttribute(name, value);\n      }),\n    ]),\n  );\n\n  const observer = new MutationObserver((mutation) => {\n    for (const { attributeName } of mutation) {\n      if (attributeName != null && Object.hasOwn(refs, attributeName)) {\n        refs[attributeName]!.value = host.getAttribute(attributeName);\n      }\n    }\n  });\n\n  useEffect([], () => {\n    observer.observe(host, { attributeFilter: names, attributes: true });\n    return () => observer.disconnect();\n  });\n\n  return refs as Readonly<Record<TName, Ref<string | null>>>;\n}\n\nfunction getHookContext(): (typeof window)[typeof $$renderContextStack][0] {\n  const context = window[$$renderContextStack].at(-1);\n  if (!context) throw new Error('hooks must be called inside a render function');\n  return context;\n}\n"],"mappings":";;;;AAKA,SAAgB,EAAU,GAAiB,GAAuC;AAChF,QAAO,GAAgB,CAAC,OAAO,GAAc,EAAS;;AAIxD,SAAgB,EACd,GACA,GACM;CACN,IAAM,EAAE,aAAU,oBAAiB,GAAgB,EAC7C,IAAkB,GAAiB,EACnC,UAAsB,EAAgB,IAAI,EAAE,OAAO,IAAM,CAAC,EAC5D;AAWJ,CATA,EAAS,WAAiB;EACxB,IAAM,IAAY,EAAK,KAAK,MAAQ,EAAI,MAAM;AAC9C,MAAI,GAAQ,WAAW,EAAU,UAAU,GAAQ,OAAO,GAAO,MAAM,MAAU,EAAU,GAAG,CAAE;AAEhG,EADA,IAAS,GACT,GAAS;EACT,IAAM,IAAe,EAAS,GAAI,EAAe;AACjD,EAAI,KAAc,EAAgB,WAAW,GAAc,CAAC;GAC5D,EAEF,EAAa,KAAK,EAAQ;;AAI5B,SAAgB,EAAoC,GAAG,GAA6D;AAClH,KAAI,EAAM,WAAW,EAAG,QAAO,EAAE;CACjC,IAAM,EAAE,YAAS,GAAgB,EAE3B,IAAO,OAAO,YAClB,EAAM,KAAK,MAAS,CAClB,GACA,EAAO,EAAK,aAAa,EAAK,GAAG,MAAU;AACzC,EAAI,KAAS,OAAM,EAAK,gBAAgB,EAAK,GACxC,EAAK,aAAa,GAAM,EAAM;GACnC,CACH,CAAC,CACH,EAEK,IAAW,IAAI,kBAAkB,MAAa;AAClD,OAAK,IAAM,EAAE,sBAAmB,EAC9B,CAAI,KAAiB,QAAQ,OAAO,OAAO,GAAM,EAAc,KAC7D,EAAK,GAAgB,QAAQ,EAAK,aAAa,EAAc;GAGjE;AAOF,QALA,EAAU,EAAE,SACV,EAAS,QAAQ,GAAM;EAAE,iBAAiB;EAAO,YAAY;EAAM,CAAC,QACvD,EAAS,YAAY,EAClC,EAEK;;AAGT,SAAS,IAAkE;CACzE,IAAM,IAAU,OAAO,GAAsB,GAAG,GAAG;AACnD,KAAI,CAAC,EAAS,OAAU,MAAM,gDAAgD;AAC9E,QAAO"}
+{"version":3,"file":"core.js","names":[],"sources":["../../src/hooks/core.ts"],"sourcesContent":["import { type ReadonlyRef, type Ref, type RefValues } from '../component.ts';\nimport { createCallbacks } from '../internal/callbacks.ts';\nimport { $$renderContextStack } from '../internal/constants.ts';\n\n/** Create an observable value. */\nexport function useRef<T>(initialValue: T, onChange?: (value: T) => void): Ref<T> {\n  return getHookContext().useRef(initialValue, onChange);\n}\n\n/** React to observable (reference) changes. */\nexport function useEffect<const TDeps extends readonly ReadonlyRef<any>[]>(\n  deps: TDeps,\n  callback: (...values: RefValues<TDeps>) => (() => void) | void,\n): void {\n  const { onSetRef, onDisconnect } = getHookContext();\n  const cleanupCallback = createCallbacks();\n  const cleanup = (): void => cleanupCallback.run({ clear: true });\n  let values: any[] | undefined;\n\n  onSetRef.push((): void => {\n    const newValues = deps.map((dep) => dep.value);\n    if (values?.length === newValues.length && values?.every((value, i) => value === newValues[i])) return;\n    values = newValues;\n    cleanup();\n    const maybeCleanup = callback(...(values as any));\n    if (maybeCleanup) cleanupCallback.push(() => maybeCleanup());\n  });\n\n  onDisconnect.push(cleanup);\n}\n\n/** React to child list changes (non-recursive). */\nexport function useChildEffect(callback: () => (() => void) | void): void {\n  const { host } = getHookContext();\n  const ref = useRef(0);\n\n  const observer = new MutationObserver((mutation) => {\n    if (mutation.some((m) => m.type === 'childList')) {\n      ref.value = (ref.value + 1) % Number.MAX_SAFE_INTEGER;\n    }\n  });\n\n  useEffect([], () => {\n    observer.observe(host, { childList: true });\n    return () => observer.disconnect();\n  });\n\n  useEffect([ref], () => {\n    return callback();\n  });\n}\n\n/** Observe attribute changes. */\nexport function useAttributes<TName extends string>(...names: TName[]): Readonly<Record<TName, Ref<string | null>>> {\n  if (names.length === 0) return {} as any;\n  const { host } = getHookContext();\n\n  const refs = Object.fromEntries(\n    names.map((name) => [\n      name,\n      useRef(host.getAttribute(name), (value) => {\n        if (value == null) host.removeAttribute(name);\n        else host.setAttribute(name, value);\n      }),\n    ]),\n  );\n\n  const observer = new MutationObserver((mutation) => {\n    for (const { attributeName } of mutation) {\n      if (attributeName != null && Object.hasOwn(refs, attributeName)) {\n        refs[attributeName]!.value = host.getAttribute(attributeName);\n      }\n    }\n  });\n\n  useEffect([], () => {\n    observer.observe(host, { attributeFilter: names, attributes: true });\n    return () => observer.disconnect();\n  });\n\n  return refs as Readonly<Record<TName, Ref<string | null>>>;\n}\n\nfunction getHookContext(): (typeof window)[typeof $$renderContextStack][0] {\n  const context = window[$$renderContextStack].at(-1);\n  if (!context) throw new Error('hooks must be called inside a render function');\n  return context;\n}\n"],"mappings":";;;;AAKA,SAAgB,EAAU,GAAiB,GAAuC;AAChF,QAAO,GAAgB,CAAC,OAAO,GAAc,EAAS;;AAIxD,SAAgB,EACd,GACA,GACM;CACN,IAAM,EAAE,aAAU,oBAAiB,GAAgB,EAC7C,IAAkB,GAAiB,EACnC,UAAsB,EAAgB,IAAI,EAAE,OAAO,IAAM,CAAC,EAC5D;AAWJ,CATA,EAAS,WAAiB;EACxB,IAAM,IAAY,EAAK,KAAK,MAAQ,EAAI,MAAM;AAC9C,MAAI,GAAQ,WAAW,EAAU,UAAU,GAAQ,OAAO,GAAO,MAAM,MAAU,EAAU,GAAG,CAAE;AAEhG,EADA,IAAS,GACT,GAAS;EACT,IAAM,IAAe,EAAS,GAAI,EAAe;AACjD,EAAI,KAAc,EAAgB,WAAW,GAAc,CAAC;GAC5D,EAEF,EAAa,KAAK,EAAQ;;AAI5B,SAAgB,EAAe,GAA2C;CACxE,IAAM,EAAE,YAAS,GAAgB,EAC3B,IAAM,EAAO,EAAE,EAEf,IAAW,IAAI,kBAAkB,MAAa;AAClD,EAAI,EAAS,MAAM,MAAM,EAAE,SAAS,YAAY,KAC9C,EAAI,SAAS,EAAI,QAAQ;GAE3B;AAOF,CALA,EAAU,EAAE,SACV,EAAS,QAAQ,GAAM,EAAE,WAAW,IAAM,CAAC,QAC9B,EAAS,YAAY,EAClC,EAEF,EAAU,CAAC,EAAI,QACN,GAAU,CACjB;;AAIJ,SAAgB,EAAoC,GAAG,GAA6D;AAClH,KAAI,EAAM,WAAW,EAAG,QAAO,EAAE;CACjC,IAAM,EAAE,YAAS,GAAgB,EAE3B,IAAO,OAAO,YAClB,EAAM,KAAK,MAAS,CAClB,GACA,EAAO,EAAK,aAAa,EAAK,GAAG,MAAU;AACzC,EAAI,KAAS,OAAM,EAAK,gBAAgB,EAAK,GACxC,EAAK,aAAa,GAAM,EAAM;GACnC,CACH,CAAC,CACH,EAEK,IAAW,IAAI,kBAAkB,MAAa;AAClD,OAAK,IAAM,EAAE,sBAAmB,EAC9B,CAAI,KAAiB,QAAQ,OAAO,OAAO,GAAM,EAAc,KAC7D,EAAK,GAAgB,QAAQ,EAAK,aAAa,EAAc;GAGjE;AAOF,QALA,EAAU,EAAE,SACV,EAAS,QAAQ,GAAM;EAAE,iBAAiB;EAAO,YAAY;EAAM,CAAC,QACvD,EAAS,YAAY,EAClC,EAEK;;AAGT,SAAS,IAAkE;CACzE,IAAM,IAAU,OAAO,GAAsB,GAAG,GAAG;AACnD,KAAI,CAAC,EAAS,OAAU,MAAM,gDAAgD;AAC9E,QAAO"}

package/dist/index.js

@@ -1,9 +1,9 @@
 import { defineComponent as e } from "./component.js";
-import { useAttributes as t, useEffect as n, useRef as r } from "./hooks/core.js";
-import { useLoading as i } from "./hooks/loading.js";
-import { createStore as a } from "./store.js";
-import { getRouter as o } from "./router.js";
-import { useStore as s } from "./hooks/store.js";
-import { useRoute as c } from "./hooks/route.js";
-import { html as l } from "./html.js";
-export { a as createStore, e as defineComponent, o as getRouter, l as h, l as html, t as useAttributes, n as useEffect, i as useLoading, r as useRef, c as useRoute, s as useStore };
+import { useAttributes as t, useChildEffect as n, useEffect as r, useRef as i } from "./hooks/core.js";
+import { useLoading as a } from "./hooks/loading.js";
+import { createStore as o } from "./store.js";
+import { getRouter as s } from "./router.js";
+import { useStore as c } from "./hooks/store.js";
+import { useRoute as l } from "./hooks/route.js";
+import { html as u } from "./html.js";
+export { o as createStore, e as defineComponent, s as getRouter, u as h, u as html, t as useAttributes, n as useChildEffect, r as useEffect, a as useLoading, i as useRef, l as useRoute, c as useStore };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seahax/elemental",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Functional, reactive, web component base library.",
   "repository": {
     "type": "git",