@atomico/hooks - npm Package Compare versions

Comparing version 3.29.0 to 3.30.0

package.json

 {
   "name": "@atomico/hooks",
   "description": "Series of utilities in hooks format to extend the operation of Atomico",
-  "version": "3.29.0",
+  "version": "3.30.0",
   "type": "module",
@@ -6,0 +6,0 @@ "workspaces": [

src/use-slot/use-slot.js

 import { useState, useEffect, Mark } from "atomico";
 import { addListener } from "../use-listener/use-listener.js";
+
 /**
+ * returns the assigned nodes of a slot
  * @template {ChildNode} T
@@ -27,1 +29,49 @@ * @param {import("atomico").Ref<HTMLSlotElement>} ref
 }
+
+/**
+ * creates a persistent list of nodes from a source with the intention of
+ * keeping the node in the list as long as it remains on the host
+ * @template {ChildNode} T
+ * @param {import("atomico").Ref<HTMLSlotElement>} ref
+ * @returns {T[]}
+ */
+export function useProxySlot(ref) {
+  const host = useHost();
+  const children = useSlot(ref);
+  const [currentChildren, setCurrentChildren] = useState(children);
+
+  useEffect(() => {
+    if (!children.length) return;
+
+    const { current } = host;
+    const intoHost = (node) => node.parentElement === current;
+
+    const group = [...currentChildren, ...children].filter(intoHost);
+
+    const slots = group.reduce(
+      (slots, el) =>
+        el.assignedSlot === ref.current
+          ? slots
+          : slots.includes(el.assignedSlot)
+          ? slots
+          : [...slots, el.assignedSlot],
+      []
+    );
+
+    const unlisteners = slots.map((slot) =>
+      addListener(slot, "slotchange", (event) => {
+        setCurrentChildren((children) => {
+          const next = children.filter(intoHost);
+          if (children.length === next.length) return children;
+          return next;
+        });
+      })
+    );
+
+    setCurrentChildren(group);
+
+    return () => unlisteners.map((unlistener) => unlistener());
+  }, children);
+
+  return currentChildren;
+}

types/use-slot/use-slot.d.ts

 /**
+ * returns the assigned nodes of a slot
  * @template {ChildNode} T
@@ -7,1 +8,9 @@ * @param {import("atomico").Ref<HTMLSlotElement>} ref
 export function useSlot<T extends ChildNode>(ref: import("atomico").Ref<HTMLSlotElement>): T[];
+/**
+ * creates a persistent list of nodes from a source with the intention of
+ * keeping the node in the list as long as it remains on the host
+ * @template {ChildNode} T
+ * @param {import("atomico").Ref<HTMLSlotElement>} ref
+ * @returns {T[]}
+ */
+export function useProxySlot<T extends ChildNode>(ref: import("atomico").Ref<HTMLSlotElement>): T[];

No alert changes

Improved metrics

Total package byte prevSize

81790

increased by2.24%

Lines of code

2427

increased by2.06%

No dependency changes