, ...]
- * added() // => [...]
- * removed() // => [...]
+ * ```tsx
+ * function Button(props: ParentProps) {
+ * const children = resolveElements(() => props.children)
+ * return
+ * {child => {child.localName}: {child}
}
+ *
+ * }
+ * ```
*/
-export function refs
(
- fn: Accessor>,
-): [
- refs: Accessor[]>,
- added: Accessor[]>,
- removed: Accessor[]>,
-];
-export function refs(
- fn: Accessor>,
- ...types: T
-): [
- refs: Accessor>>[]>,
- added: Accessor>>[]>,
- removed: Accessor>>[]>,
-];
-export function refs(
- fn: Accessor,
- ...types: (typeof Element)[]
-): [refs: Accessor, added: Accessor, removed: Accessor] {
- const resolved = elements(fn, ...types);
- let prev: readonly Element[] = [];
-
- const memo = createMemo(() => {
- const list = resolved();
- const [added, removed] = getChangedItems(prev, list);
- prev = list;
- return { refs: list.slice(), added, removed };
- });
-
- return [() => memo().refs, () => memo().added, () => memo().removed];
+export function resolveElements(fn: Accessor): ResolveChildrenReturn;
+export function resolveElements(
+ fn: Accessor,
+ predicate: (item: JSX.Element) => item is T,
+ serverPredicate?: (item: JSX.Element) => item is T,
+): ResolveChildrenReturn;
+export function resolveElements(
+ fn: Accessor,
+ predicate: (item: JSX.Element | T) => item is T,
+ serverPredicate?: (item: JSX.Element | T) => item is T,
+): ResolveChildrenReturn;
+export function resolveElements(
+ fn: Accessor,
+ predicate = defaultElementPredicate,
+ serverPredicate = defaultElementPredicate,
+): ResolveChildrenReturn {
+ const children = createMemo(fn);
+ const memo = createMemo(() =>
+ getResolvedElements(children(), process.env.SSR ? serverPredicate : predicate),
+ ) as ResolveChildrenReturn;
+ memo.toArray = () => {
+ const value = memo();
+ return Array.isArray(value) ? value : value ? [value] : [];
+ };
+ return memo;
}
/**
- * A directive that calls handler when the element get's unmounted from DOM.
- * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/refs#unmount
- */
-export const unmount: Directive<(el: Element) => void> = (el, handler): void => {
- onCleanup(() => handler()(el));
-};
-
-/**
- * reactively map removed items from a reactive signal array. If the mapping function return an element signal, this element will be placed in the array returned from primitive.
- * @param list array source
- * @param mapFn function executed on elements removed from the source list. Return element to keep it in the array.
- * @returns array signal of elements from source + mapped removed elements
- * @example
- * const combined = mapRemoved(refs, (ref, i) => {
- * const [el, setEl] = createSignal(ref);
- * createEffect(() => {}) // you can create computations in the mapping function
- * return el; // set the signal to undefined to remove it from array
- * });
+ * Utility for resolving recursively nested JSX children in search of the first element that matches a predicate.
+ *
+ * It does **not** create a computation - should be wrapped in one to repeat the resolution on changes.
+ *
+ * @param value JSX children
+ * @param predicate predicate to filter elements
+ * @returns single found element or `null` if no elements were found
*/
-export function mapRemoved(
- list: Accessor>,
- mapFn: (v: T, index: Accessor) => Accessor | undefined | void,
-): Accessor {
- let prevList: T[] = [];
- const saved = new Set();
- const indexes = mapFn.length > 1 ? new Map>() : undefined;
- const owner = getOwner();
- const [items, setItems] = createSignal([]);
-
- createComputed(
- on(list, _list => {
- const { length } = prevList;
- const newList = asArray(_list).slice();
-
- // fast path for empty prev list
- if (!length) return setItems((prevList = newList));
-
- for (let pi = 0, ni = 0; pi < length; ) {
- const item = prevList[pi]!;
- // item already in both lists
- if (newList.includes(item)) pi++, ni++;
- // item saved from previous changes
- else if (saved.has(item)) {
- const x = prevList.indexOf(newList[ni]!);
- if (x !== -1 && x <= pi) ni++;
- else {
- newList.splice(ni, 0, item);
- indexes?.get(item)?.(ni);
- pi++;
- }
- }
- // item removed in this change
- else mapRemovedElement(newList, item, pi), pi++;
- }
-
- setItems((prevList = newList));
- }),
- );
-
- let toRemove: T[] = [];
- const executeToRemove = () => {
- if (!toRemove.length) return;
- setItems(p => removeItems(p, ...toRemove));
- toRemove = [];
- };
-
- function mapRemovedElement(newList: T[], item: T, i: number) {
- createSubRoot(dispose => {
- let signal: Accessor, mapped: T;
- // create index signal
- if (indexes) {
- const [index, setIndex] = createSignal(i);
- const s = mapFn(item, index);
- const m = access(s);
- if (!m) return dispose();
- indexes.set(m, setIndex);
- (signal = s as Accessor), (mapped = m);
- }
- // don't create index signal
- else {
- const s = (mapFn as any)(item);
- const m = access(s);
- if (!m) return dispose();
- (signal = s), (mapped = m);
- }
-
- saved.add(mapped);
- newList.splice(i, 0, mapped);
- let prev: T = mapped;
-
- // prettier-ignore
- createComputed(on(signal, signalValue => {
- saved.delete(prev)
- if (indexes) {
- const set = indexes.get(prev)
- indexes.delete(prev)
- if (signalValue) set && indexes.set(signalValue, set)
- else {
- const listValue = items()
- for (i = listValue.indexOf(prev); i < listValue.length; i++) {
- indexes.get(listValue[i]!)?.(p => --p)
- }
- }
- }
- // remove saved item if changed to undefined
- if (!signalValue) {
- mutableRemove(prevList, prev);
- // batch setItems changes
- toRemove.push(prev);
- queueMicrotask(executeToRemove);
- return dispose();
- }
- saved.add(signalValue);
- setItems(p => remove(p, prev, signalValue));
- prev = signalValue;
- }, { defer: true }));
- }, owner);
+export function getFirstChild(
+ value: JSX.Element,
+ predicate: (item: JSX.Element | T) => item is T,
+): T | null {
+ if (predicate(value)) return value;
+ if (typeof value === "function" && !value.length) return getFirstChild(value(), predicate);
+ if (Array.isArray(value)) {
+ for (const item of value) {
+ const result = getFirstChild(item, predicate);
+ if (result) return result;
+ }
}
-
- return items;
+ return null;
}
/**
- * Solid's `children` helper in component form. Access it's children elements by `get` property.
- * @property `get` – get resolved elements, fired every time the children change
+ * Utility for resolving recursively nested JSX children in search of the first element that matches a predicate.
+ * @param fn Accessor of JSX children
+ * @param predicate predicate to filter elements.
+ * ```ts
+ * // default predicate
+ * (item: JSX.Element): item is Element => item instanceof Element
+ * ```
+ * @param serverPredicate predicate to filter elements on server. {@link defaultElementPredicate}
+ * @returns Signal of a single found element or `null` if no elements were found
+ * ```ts
+ * Accessor
+ * ```
* @example
* ```tsx
- * const [children, setChildren] = createSignal();
- *
- *
- *
- * ...
- *
+ * function Button(props: ParentProps) {
+ * const child = resolveFirst(() => props.children)
+ * return {child()?.localName}: {child()}
+ * }
* ```
*/
-export const Children = (props: {
- get: (resolved: ResolvedChildren) => void;
- children: JSX.Element;
-}): Accessor => {
- const resolved = children(() => props.children);
- createComputed(on(resolved, props.get));
- onCleanup(() => props.get(undefined));
- return resolved;
-};
+export function resolveFirst(fn: Accessor): Accessor;
+export function resolveFirst(
+ fn: Accessor,
+ predicate: (item: JSX.Element) => item is T,
+ serverPredicate?: (item: JSX.Element) => item is T,
+): Accessor;
+export function resolveFirst(
+ fn: Accessor,
+ predicate: (item: JSX.Element | T) => item is T,
+ serverPredicate?: (item: JSX.Element | T) => item is T,
+): Accessor;
+export function resolveFirst(
+ fn: Accessor,
+ predicate = defaultElementPredicate,
+ serverPredicate = defaultElementPredicate,
+): Accessor {
+ const children = createMemo(fn);
+ return createMemo(() => getFirstChild(children(), process.env.SSR ? serverPredicate : predicate));
+}
/**
* Get up-to-date references of the multiple children elements.
- * @param refs Getter of current array of elements
- * @param added Getter of added elements since the last change
- * @param removed Getter of removed elements since the last change
- * @param onChange handle children changes
+ * @param ref Getter of current array of elements
* @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/refs#Refs
+ * @example
+ * ```tsx
+ * const [refs, setRefs] = createSignal([]);
+ *
+ * {props.children}
+ *
+ * ```
*/
-export const Refs = (props: {
- refs?: (els: El[]) => void;
- added?: (els: El[]) => void;
- removed?: (els: El[]) => void;
- onChange?: (changed: { refs: El[]; added: El[]; removed: El[] }) => void;
- children: JSX.Element;
-}): Accessor => {
- const resolved = children(() => props.children);
-
- // calculate changed elements only if user listens for it
- if (props.added || props.removed || props.onChange) {
- const [elementList, added, removed] = refs(resolved);
- const emit = (refValue: El[], addedValue: El[], removedValue: El[]) =>
- untrack(() => {
- props.refs?.(refValue);
- props.added?.(addedValue);
- props.removed?.(removedValue);
- props.onChange?.({ refs: refValue, added: addedValue, removed: removedValue });
- });
- createComputed(() => emit(elementList() as El[], added() as El[], removed() as El[]));
- onCleanup(() => emit([], [], elementList() as El[]));
- }
- // or emit only the current elements
- else if (props.refs) {
- const cb = props.refs;
- const refList = elements(resolved);
- createComputed(() => cb(refList() as El[]));
- onCleanup(() => cb([]));
+export function Refs(props: { ref: Ref; children: JSX.Element }): JSX.Element {
+ if (process.env.SSR) {
+ return props.children;
}
+ const cb = props.ref as (els: Element[]) => void,
+ resolved = children(() => props.children);
+
+ let prev: Element[] = [];
+
+ createComputed(() => {
+ const els = resolved.toArray().filter(defaultElementPredicate);
+ if (!arrayEquals(prev, els)) untrack(() => cb(els));
+ prev = els;
+ }, []);
+ onCleanup(() => prev.length && cb([]));
+
return resolved;
-};
+}
/**
* Get up-to-date reference to a single child element.
* @param ref Getter of current element *(or `undefined` if not mounted)*
- * @param onMount handle the child element getting mounted to the dom
- * @param onUnmount handle the child element getting unmounted from the dom
* @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/refs#Ref
+ * @example
+ * ```tsx
+ * const [ref, setRef] = createSignal();
+ * [
+ * {props.children}
+ * ]
+ * ```
*/
-export const Ref = (props: {
- ref?: (el: U | undefined) => void;
- onMount?: (el: U) => void;
- onUnmount?: (el: U) => void;
- children: JSX.Element;
-}): Accessor => {
- const resolved = children(() => props.children);
- let prev: U | undefined;
+export function Ref(props: { ref: Ref; children: JSX.Element }): JSX.Element {
+ if (process.env.SSR) {
+ return props.children;
+ }
- createComputed(() => {
- const el = (() => {
- let newEl = access(resolved()) as U | undefined;
- if (!(newEl instanceof Element)) newEl = undefined;
- return newEl;
- })();
+ const cb = props.ref as (el: Element | undefined) => void,
+ resolved = children(() => props.children);
+
+ let prev: Element | undefined;
- untrack(() => {
- props.ref?.(el);
- if (el && prev !== el) onMount(() => props.onMount?.(el));
- if (prev && prev !== el && props.onUnmount) props.onUnmount(prev);
- });
+ createComputed(() => {
+ const el = resolved.toArray().find(defaultElementPredicate);
+ if (el !== prev) untrack(() => cb(el));
prev = el;
});
- onCleanup(() => {
- if (prev) {
- props.ref?.(undefined);
- props.onUnmount?.(prev);
- }
- });
+ onCleanup(() => prev && cb(undefined));
return resolved;
-};
+}
diff --git a/packages/refs/test/index.test.ts b/packages/refs/test/index.test.ts
index 32a3d2131..254dd7950 100644
--- a/packages/refs/test/index.test.ts
+++ b/packages/refs/test/index.test.ts
@@ -1,227 +1,58 @@
import { describe, test, expect } from "vitest";
import { createRoot, createSignal } from "solid-js";
-import { push, remove, removeItems } from "@solid-primitives/immutable";
-import {
- elements,
- getAddedItems,
- getChangedItems,
- getRemovedItems,
- mapRemoved,
- refs,
- resolveElements,
-} from "../src";
+import { removeItems } from "@solid-primitives/immutable";
+import { getResolvedElements, resolveElements } from "../src";
const el1 = document.createElement("div");
const el2 = document.createElement("span");
const el3 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
const el4 = document.createElement("h1");
-const el5 = document.createElement("h1");
-describe("get changes helpers", () => {
- test("getAddedItems", () => {
- const from = Array.from({ length: 5 }, () => new Date());
- const add = Array.from({ length: 2 }, () => new Date());
- const to = [from[0], from[1], add[0], from[3], add[1]];
- const added = getAddedItems(from, to);
- expect(added).toEqual(add);
- });
+describe("resolveElements", () => {
+ test("resolves elements", () => {
+ const el1 = document.createElement("div");
+ const el2 = document.createElement("div");
+ const el3 = document.createElement("div");
+ const el4 = document.createElement("div");
+ const el5 = document.createElement("div");
+ const el6 = document.createElement("div");
- test("getRemovedItems", () => {
- const from = Array.from({ length: 5 }, () => new Date());
- const add = Array.from({ length: 2 }, () => new Date());
- const to = [from[0], from[1], add[0], from[3], add[1]];
- const removed = getRemovedItems(from, to);
- expect(removed).toEqual([from[2], from[4]]);
- });
+ const predicate = (el: unknown | Element): el is Element => el instanceof Element;
- test("getChangedItems", () => {
- const from = Array.from({ length: 5 }, () => new Date());
- const add = Array.from({ length: 2 }, () => new Date());
- const to = [from[0], from[1], add[0], from[3], add[1]];
- const [added, removed] = getChangedItems(from, to);
- expect(removed).toEqual([from[2], from[4]]);
- expect(added).toEqual(add);
+ expect(getResolvedElements(el1, predicate)).toEqual(el1);
+ expect(getResolvedElements("hello", predicate)).toEqual(null);
+ expect(getResolvedElements(() => el1, predicate)).toBe(el1);
+ expect(getResolvedElements([el1, () => undefined], predicate)).toEqual([el1]);
+ expect(
+ getResolvedElements(
+ [
+ el1,
+ () => undefined,
+ () => () => el2,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ [el3, () => el4, () => 123, ((_: number) => el5) as any],
+ el6,
+ ],
+ predicate,
+ ),
+ ).toEqual([el1, el2, el3, el4, el6]);
});
-});
-
-describe("elements()", () => {
- test("get a signal of elements array", () =>
- createRoot(dispose => {
- const _arr = [123456, undefined, el2, NaN, el1, null, "HELLO", el3, el4, [1, 2, 3]];
- const [arr, setArr] = createSignal(_arr);
- const els = elements(arr);
-
- expect(els().length).toBe(4);
- els().forEach(el => {
- expect(el).instanceOf(Element);
- });
-
- setArr([]);
- expect(els().length).toBe(0);
-
- const htmlEls = elements(arr, HTMLElement);
- expect(htmlEls().length).toBe(0);
-
- setArr(_arr);
- expect(htmlEls().length).toBe(3);
- htmlEls().forEach(el => {
- expect(el).instanceOf(HTMLElement);
- });
- dispose();
- }));
-});
-
-describe("refs()", () => {
test("returned signals reflect changes to source", () => {
- const _source = [undefined, el2, el1, "HELLO", el3];
- const [source, setSource] = createSignal(_source);
-
- const [els, added, removed] = refs(source);
- expect(els()).toEqual([el2, el1, el3]);
- expect(added()).toEqual([el2, el1, el3]);
- expect(removed()).toEqual([]);
-
- setSource(p => [...p, el4]);
- expect(els()).toEqual([el2, el1, el3, el4]);
- expect(added()).toEqual([el4]);
- expect(removed()).toEqual([]);
-
- setSource(p => removeItems(p, el1, el2, undefined));
- expect(els(), "3 1").toEqual([el3, el4]);
- expect(added(), "3 2").toEqual([]);
- expect(removed(), "3 3").toEqual([el2, el1]);
- });
-});
-
-describe("mapRemoved()", () => {
- test("mapFn get's called on each item remove", () =>
createRoot(dispose => {
- const _source = [el2, el1, el2, el3, el4];
+ const _source = [undefined, el2, el1, "HELLO", el3];
const [source, setSource] = createSignal(_source);
- const captured_els: Element[] = [];
- mapRemoved(source, el => {
- captured_els.push(el);
- });
- expect(captured_els.length).toBe(0);
+ const els = resolveElements(source);
+ expect(els()).toEqual([el2, el1, el3]);
- setSource(p => remove(p, el3));
- expect(captured_els).toEqual([el3]);
+ setSource(p => [...p, el4]);
+ expect(els()).toEqual([el2, el1, el3, el4]);
- setSource(p => remove(p, el2));
- expect(captured_els).toEqual([el3]);
-
- setSource(p => removeItems(p, el2, el1));
- expect(captured_els).toEqual([el3, el1, el2]);
+ setSource(p => removeItems(p, el1, el2, undefined));
+ expect(els(), "3 1").toEqual([el3, el4]);
dispose();
- }));
-
- test("returns combined array", () =>
- createRoot(dispose => {
- const _source = [el1, el2, el3, el5];
- const [source, setSource] = createSignal(_source);
-
- let returns = true;
- const res = mapRemoved(source, el => (returns ? () => el : undefined));
-
- setSource(p => remove(p, el3));
- expect(res()).toEqual([el1, el2, el3, el5]);
-
- returns = false;
- setSource(p => remove(p, el2));
- expect(res()).toEqual([el1, el3, el5]);
-
- setSource(p => push(p, el4));
- expect(res()).toEqual([el1, el3, el5, el4]);
-
- setSource(() => [el4, el5, el1]);
- expect(res()).toEqual([el4, el3, el5, el1]);
-
- dispose();
- }));
-
- test("removeing saved element", () =>
- createRoot(dispose => {
- const _source = [el1, el2, el3, el5];
- const [source, setSource] = createSignal(_source);
- const fns: VoidFunction[] = [];
-
- const res = mapRemoved(source, ref => {
- const [el, setEl] = createSignal(ref);
- fns.push(() => setEl(undefined));
- return el;
- });
-
- setSource(p => remove(p, el3));
- expect(res()).toEqual([el1, el2, el3, el5]);
-
- fns.forEach(fn => fn());
- expect(res()).toEqual([el1, el2, el5]);
-
- setSource(p => removeItems(p, el2, el1));
- expect(res()).toEqual([el1, el2, el5]);
-
- fns.forEach(fn => fn());
- expect(res()).toEqual([el5]);
-
- dispose();
- }));
-
- test("index signal", () =>
- createRoot(dispose => {
- const _source = [el1, el2, el3, el5];
- const [source, setSource] = createSignal(_source);
- const saved = new Map number>();
-
- let returns = true;
- mapRemoved(source, (el, index) => {
- saved.set(el, index);
- return returns ? () => el : undefined;
- });
-
- setSource(p => remove(p, el3));
- expect(saved.get(el3)!()).toBe(2);
-
- returns = false;
- setSource(p => remove(p, el2));
- expect(saved.get(el3)!()).toBe(1);
-
- setSource(p => [el4, ...p]);
- expect(saved.get(el3)!()).toBe(2);
-
- setSource([]);
- expect(saved.get(el3)!()).toBe(0);
-
- setSource([el1, el2, el4, el5]);
- expect(saved.get(el3)!()).toBe(0);
-
- dispose();
- }));
-});
-
-describe("resolveElements", () => {
- test("resolves elements", () => {
- const el1 = document.createElement("div");
- const el2 = document.createElement("div");
- const el3 = document.createElement("div");
- const el4 = document.createElement("div");
- const el5 = document.createElement("div");
- const el6 = document.createElement("div");
-
- expect(resolveElements(el1)).toEqual(el1);
- expect(resolveElements("hello")).toEqual(null);
- expect(resolveElements(() => el1)).toBe(el1);
- expect(resolveElements([el1, () => undefined])).toEqual([el1]);
- expect(
- resolveElements([
- el1,
- () => undefined,
- () => () => el2,
- [el3, () => el4, () => 123, (a: number) => el5],
- el6,
- ]),
- ).toEqual([el1, el2, el3, el4, el6]);
+ });
});
});
diff --git a/packages/refs/test/mergeRefs.test.tsx b/packages/refs/test/mergeRefs.test.tsx
index 3a32f51b7..ad5bc9d84 100644
--- a/packages/refs/test/mergeRefs.test.tsx
+++ b/packages/refs/test/mergeRefs.test.tsx
@@ -1,10 +1,6 @@
import { describe, test, expect } from "vitest";
import { createRoot, onMount } from "solid-js";
-import { mergeRefs } from "../src";
-
-interface ButtonProps {
- ref?: HTMLButtonElement | ((el: HTMLButtonElement) => void);
-}
+import { mergeRefs, RefProps } from "../src";
describe("mergeRefs", () => {
test("passes ref to props and local var", () =>
@@ -12,7 +8,7 @@ describe("mergeRefs", () => {
let local!: HTMLButtonElement;
let forwared!: HTMLButtonElement;
- const Button = (props: ButtonProps) => {
+ const Button = (props: RefProps) => {
return (local = el), props.ref)} />;
};
diff --git a/packages/refs/test/server.test.tsx b/packages/refs/test/server.test.tsx
new file mode 100644
index 000000000..77006a123
--- /dev/null
+++ b/packages/refs/test/server.test.tsx
@@ -0,0 +1,29 @@
+import { renderToString } from "solid-js/web";
+import { describe, expect, test } from "vitest";
+import { resolveElements, resolveFirst } from "../src";
+
+describe("SSR", () => {
+ test("resolveElements", () => {
+ const resolved = resolveElements(() => (
+ <>
+ hello
+ world
+ {() => nested
}
+
+ ));
+ const string = renderToString(resolved);
+ expect(string).toBe("hello
world nested
");
+ });
+
+ test("resolveFirst", () => {
+ const resolved = resolveFirst(() => (
+ <>
+ hello
+ world
+ {() => nested
}
+
+ ));
+ const string = renderToString(resolved);
+ expect(string).toBe("hello
");
+ });
+});
diff --git a/packages/resize-observer/CHANGELOG.md b/packages/resize-observer/CHANGELOG.md
index e8b1cc3a1..7fb385007 100644
--- a/packages/resize-observer/CHANGELOG.md
+++ b/packages/resize-observer/CHANGELOG.md
@@ -1,5 +1,23 @@
# @solid-primitives/resize-observer
+## 2.0.11
+
+### Patch Changes
+
+- Updated dependencies [d6559a32]
+ - @solid-primitives/utils@5.4.0
+ - @solid-primitives/event-listener@2.2.8
+ - @solid-primitives/rootless@1.2.6
+
+## 2.0.11-beta.0
+
+### Patch Changes
+
+- Updated dependencies [d6559a32]
+ - @solid-primitives/utils@5.4.0-beta.0
+ - @solid-primitives/event-listener@2.2.8-beta.0
+ - @solid-primitives/rootless@1.2.6-beta.0
+
## 2.0.10
### Patch Changes
diff --git a/packages/resize-observer/package.json b/packages/resize-observer/package.json
index 5a7cb0797..a6132de36 100644
--- a/packages/resize-observer/package.json
+++ b/packages/resize-observer/package.json
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/resize-observer",
- "version": "2.0.10",
+ "version": "2.0.11",
"description": "Reactive primitives for observing resizing of HTML elements.",
"author": "Moshe Udimar",
"contributors": [
@@ -84,9 +84,9 @@
"test:ssr": "pnpm run test --mode ssr"
},
"dependencies": {
- "@solid-primitives/event-listener": "workspace:^2.2.7",
- "@solid-primitives/rootless": "workspace:^1.2.5",
- "@solid-primitives/utils": "workspace:^5.2.1"
+ "@solid-primitives/event-listener": "workspace:^2.2.8",
+ "@solid-primitives/rootless": "workspace:^1.2.6",
+ "@solid-primitives/utils": "workspace:^5.4.0"
},
"peerDependencies": {
"solid-js": "^1.6.0"
diff --git a/packages/rootless/CHANGELOG.md b/packages/rootless/CHANGELOG.md
index ae7befda5..775790e61 100644
--- a/packages/rootless/CHANGELOG.md
+++ b/packages/rootless/CHANGELOG.md
@@ -1,5 +1,19 @@
# @solid-primitives/rootless
+## 1.2.6
+
+### Patch Changes
+
+- Updated dependencies [d6559a32]
+ - @solid-primitives/utils@5.4.0
+
+## 1.2.6-beta.0
+
+### Patch Changes
+
+- Updated dependencies [d6559a32]
+ - @solid-primitives/utils@5.4.0-beta.0
+
## 1.2.5
### Patch Changes
diff --git a/packages/rootless/package.json b/packages/rootless/package.json
index 61170937c..d97a67c7f 100644
--- a/packages/rootless/package.json
+++ b/packages/rootless/package.json
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/rootless",
- "version": "1.2.5",
+ "version": "1.2.6",
"description": "A collection of helpers that aim to simplify using reactive primitives outside of reactive roots, and managing disposal of reactive roots.",
"author": "Damian Tarnawski @thetarnav ",
"license": "MIT",
@@ -48,7 +48,7 @@
"primitives"
],
"dependencies": {
- "@solid-primitives/utils": "workspace:^5.2.1"
+ "@solid-primitives/utils": "workspace:^5.4.0"
},
"peerDependencies": {
"solid-js": "^1.6.11"
diff --git a/packages/scroll/CHANGELOG.md b/packages/scroll/CHANGELOG.md
index fd65bd7eb..ad1fb1e23 100644
--- a/packages/scroll/CHANGELOG.md
+++ b/packages/scroll/CHANGELOG.md
@@ -1,5 +1,23 @@
# @solid-primitives/scroll
+## 2.0.10
+
+### Patch Changes
+
+- Updated dependencies [d6559a32]
+ - @solid-primitives/utils@5.4.0
+ - @solid-primitives/event-listener@2.2.8
+ - @solid-primitives/rootless@1.2.6
+
+## 2.0.10-beta.0
+
+### Patch Changes
+
+- Updated dependencies [d6559a32]
+ - @solid-primitives/utils@5.4.0-beta.0
+ - @solid-primitives/event-listener@2.2.8-beta.0
+ - @solid-primitives/rootless@1.2.6-beta.0
+
## 2.0.9
### Patch Changes
diff --git a/packages/scroll/package.json b/packages/scroll/package.json
index 26773d7c6..3108e714f 100644
--- a/packages/scroll/package.json
+++ b/packages/scroll/package.json
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/scroll",
- "version": "2.0.9",
+ "version": "2.0.10",
"description": "Reactive primitives to react to element/window scrolling.",
"author": "David Di Biase ",
"contributors": [
@@ -100,9 +100,9 @@
"primitives"
],
"dependencies": {
- "@solid-primitives/event-listener": "workspace:^2.2.7",
- "@solid-primitives/rootless": "workspace:^1.2.5",
- "@solid-primitives/utils": "workspace:^5.2.1"
+ "@solid-primitives/event-listener": "workspace:^2.2.8",
+ "@solid-primitives/rootless": "workspace:^1.2.6",
+ "@solid-primitives/utils": "workspace:^5.4.0"
},
"peerDependencies": {
"solid-js": "^1.6.0"
diff --git a/packages/set/CHANGELOG.md b/packages/set/CHANGELOG.md
index 194df4828..ba259559a 100644
--- a/packages/set/CHANGELOG.md
+++ b/packages/set/CHANGELOG.md
@@ -1,5 +1,17 @@
# @solid-primitives/set
+## 0.4.2
+
+### Patch Changes
+
+- @solid-primitives/trigger@1.0.2
+
+## 0.4.2-beta.0
+
+### Patch Changes
+
+- @solid-primitives/trigger@1.0.2-beta.0
+
## 0.4.1
### Patch Changes
diff --git a/packages/set/package.json b/packages/set/package.json
index ae3527775..05f25724c 100644
--- a/packages/set/package.json
+++ b/packages/set/package.json
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/set",
- "version": "0.4.1",
+ "version": "0.4.2",
"description": "The Set & WeakSet data structures as a reactive signals.",
"author": "Damian Tarnawski @thetarnav ",
"license": "MIT",
@@ -53,7 +53,7 @@
"solid-js": "^1.6.0"
},
"dependencies": {
- "@solid-primitives/trigger": "workspace:^1.0.1"
+ "@solid-primitives/trigger": "workspace:^1.0.2"
},
"typesVersions": {}
}
diff --git a/packages/signal-builders/CHANGELOG.md b/packages/signal-builders/CHANGELOG.md
index da8514618..70d6f5675 100644
--- a/packages/signal-builders/CHANGELOG.md
+++ b/packages/signal-builders/CHANGELOG.md
@@ -1,5 +1,21 @@
# @solid-primitives/signal-builders
+## 0.1.8
+
+### Patch Changes
+
+- Updated dependencies [d6559a32]
+ - @solid-primitives/utils@5.4.0
+ - @solid-primitives/immutable@0.1.8
+
+## 0.1.8-beta.0
+
+### Patch Changes
+
+- Updated dependencies [d6559a32]
+ - @solid-primitives/utils@5.4.0-beta.0
+ - @solid-primitives/immutable@0.1.8-beta.0
+
## 0.1.7
### Patch Changes
diff --git a/packages/signal-builders/package.json b/packages/signal-builders/package.json
index 9fc2005c7..8d664e345 100644
--- a/packages/signal-builders/package.json
+++ b/packages/signal-builders/package.json
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/signal-builders",
- "version": "0.1.7",
+ "version": "0.1.8",
"description": "A collection of chainable and composable reactive signal calculations, aka Signal Builders.",
"author": "Your Name ",
"license": "MIT",
@@ -45,8 +45,8 @@
"test:ssr": "pnpm run test --mode ssr"
},
"dependencies": {
- "@solid-primitives/immutable": "^0.1.7",
- "@solid-primitives/utils": "^5.2.1"
+ "@solid-primitives/immutable": "^0.1.8",
+ "@solid-primitives/utils": "^5.4.0"
},
"peerDependencies": {
"solid-js": "^1.6.0"
diff --git a/packages/storage/CHANGELOG.md b/packages/storage/CHANGELOG.md
index 0982ac453..0f78b8e01 100644
--- a/packages/storage/CHANGELOG.md
+++ b/packages/storage/CHANGELOG.md
@@ -1,5 +1,19 @@
# @solid-primitives/storage
+## 1.3.7
+
+### Patch Changes
+
+- Updated dependencies [d6559a32]
+ - @solid-primitives/utils@5.4.0
+
+## 1.3.7-beta.0
+
+### Patch Changes
+
+- Updated dependencies [d6559a32]
+ - @solid-primitives/utils@5.4.0-beta.0
+
## 1.3.6
### Patch Changes
diff --git a/packages/storage/package.json b/packages/storage/package.json
index e0ae486a4..25544a8a0 100644
--- a/packages/storage/package.json
+++ b/packages/storage/package.json
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/storage",
- "version": "1.3.6",
+ "version": "1.3.7",
"description": "Primitive that provides reactive wrappers for storage access",
"author": "Alex Lohr ",
"contributors": [
@@ -100,7 +100,7 @@
"primitives"
],
"dependencies": {
- "@solid-primitives/utils": "workspace:^5.2.1"
+ "@solid-primitives/utils": "workspace:^5.4.0"
},
"peerDependencies": {
"solid-js": "^1.6.0"
diff --git a/packages/stream/CHANGELOG.md b/packages/stream/CHANGELOG.md
index e590b2a23..8973d247d 100644
--- a/packages/stream/CHANGELOG.md
+++ b/packages/stream/CHANGELOG.md
@@ -1,5 +1,19 @@
# @solid-primitives/stream
+## 0.6.6
+
+### Patch Changes
+
+- Updated dependencies [d6559a32]
+ - @solid-primitives/utils@5.4.0
+
+## 0.6.6-beta.0
+
+### Patch Changes
+
+- Updated dependencies [d6559a32]
+ - @solid-primitives/utils@5.4.0-beta.0
+
## 0.6.5
### Patch Changes
diff --git a/packages/stream/package.json b/packages/stream/package.json
index 09fb82a66..3993e4b4c 100644
--- a/packages/stream/package.json
+++ b/packages/stream/package.json
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/stream",
- "version": "0.6.5",
+ "version": "0.6.6",
"description": "Primitive that gets a user media stream from microphone, camera or screen",
"author": "Alex Lohr ",
"license": "MIT",
@@ -99,7 +99,7 @@
"primitives"
],
"dependencies": {
- "@solid-primitives/utils": "workspace:^5.2.1"
+ "@solid-primitives/utils": "workspace:^5.4.0"
},
"peerDependencies": {
"solid-js": "^1.6.0"
diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md
index b69cf528c..0679efb0c 100644
--- a/packages/styles/CHANGELOG.md
+++ b/packages/styles/CHANGELOG.md
@@ -1,5 +1,21 @@
# @solid-primitives/styles
+## 0.0.105
+
+### Patch Changes
+
+- Updated dependencies [d6559a32]
+ - @solid-primitives/utils@5.4.0
+ - @solid-primitives/rootless@1.2.6
+
+## 0.0.105-beta.0
+
+### Patch Changes
+
+- Updated dependencies [d6559a32]
+ - @solid-primitives/utils@5.4.0-beta.0
+ - @solid-primitives/rootless@1.2.6-beta.0
+
## 0.0.104
### Patch Changes
diff --git a/packages/styles/package.json b/packages/styles/package.json
index f492fa6c3..59b06902f 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/styles",
- "version": "0.0.104",
+ "version": "0.0.105",
"description": "Collection of reactive primitives focused on styles.",
"author": "Damian Tarnawski ",
"contributors": [
@@ -100,8 +100,8 @@
"css"
],
"dependencies": {
- "@solid-primitives/rootless": "workspace:^1.2.5",
- "@solid-primitives/utils": "workspace:^5.2.1"
+ "@solid-primitives/rootless": "workspace:^1.2.6",
+ "@solid-primitives/utils": "workspace:^5.4.0"
},
"peerDependencies": {
"solid-js": "^1.6.0"
diff --git a/packages/transition-group/CHANGELOG.md b/packages/transition-group/CHANGELOG.md
new file mode 100644
index 000000000..818494aa8
--- /dev/null
+++ b/packages/transition-group/CHANGELOG.md
@@ -0,0 +1,30 @@
+# @solid-primitives/transition-group
+
+## 1.0.0
+
+### Major Changes
+
+- 1ba2f037: Initial release. Adds `createSwitchTransition` and `createListTransition` primitives.
+
+### Patch Changes
+
+- ba06b334: Remove effects - change the rendered array and call transitions in a pure computation.
+- 2b4fb9be: Improve `appear` SSR - always render the initial items.
+
+## 0.0.1-beta.2
+
+### Patch Changes
+
+- Remove effects - change the rendered array and call transitions in a pure computation.
+
+## 0.0.1-beta.1
+
+### Patch Changes
+
+- 2b4fb9be: Improve `appear` SSR - always render the initial items.
+
+## 0.0.1-beta.0
+
+### Major Changes
+
+- Initial release. Adds `createSwitchTransition` and `createListTransition` primitives.
diff --git a/packages/transition-group/LICENSE b/packages/transition-group/LICENSE
new file mode 100644
index 000000000..38b41d975
--- /dev/null
+++ b/packages/transition-group/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Solid Primitives Working Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/packages/transition-group/README.md b/packages/transition-group/README.md
new file mode 100644
index 000000000..8fac9f928
--- /dev/null
+++ b/packages/transition-group/README.md
@@ -0,0 +1,199 @@
+
+
+
+# @solid-primitives/transition-group
+
+[](https://turborepo.org/)
+[](https://bundlephobia.com/package/@solid-primitives/transition-group)
+[](https://www.npmjs.com/package/@solid-primitives/transition-group)
+[](https://github.com/solidjs-community/solid-primitives#contribution-process)
+
+Provides reactive primitives for implementing transition effects on a group of elements, or your own `` and `` components.
+
+- [`createSwitchTransition`](#createSwitchTransition) - Create an element transition interface for switching between single elements.
+- [`createListTransition`](#createListTransition) - Create an element list transition interface for changes to the list of elements.
+
+## Installation
+
+```bash
+npm install @solid-primitives/transition-group
+# or
+yarn add @solid-primitives/transition-group
+# or
+pnpm add @solid-primitives/transition-group
+```
+
+## `createSwitchTransition`
+
+Create an element transition interface for switching between single elements.
+It can be used to implement own transition effect, or a custom ``-like component.
+
+### How to use it
+
+It will observe the source and return a signal with array of elements to be rendered (current one and exiting ones).
+
+`createSwitchTransition` takes two parameters:
+
+- `source` a signal with the current element. Any nullish value will mean there is no element.
+ Any object can used as the source, but most likely you will want to use a `HTMLElement` or `SVGElement`.
+
+- `options` transition options:
+
+ - `onEnter` - a function to be called when a new element is entering. It receives the element and a callback to be called when the transition is done.
+
+ - `onExit` - a function to be called when an exiting element is leaving. It receives the element and a callback to be called when the transition is done.
+
+ - `mode` - transition mode. Defaults to `"parallel"`. Other options are `"out-in"` and `"in-out"`.
+
+ - `appear` - whether to run the transition on the initial element. Defaults to `false`.
+
+ If enabled, the initial element will still be included in the initial render (for SSR), but the transition fill happen when the first client-side effect is run. So to avoid the initial element to be visible, you can set the initial element's style to `display: none` and set it to `display: block` in the `onEnter` callback.
+
+Returns a signal with an array of the current element and exiting previous elements.
+
+```ts
+import { createSwitchTransition } from "@solid-primitives/transition-group";
+
+const [el, setEl] = createSignal();
+
+const rendered = createSwitchTransition(el, {
+ onEnter(el, done) {
+ // the enter callback is called before the element is inserted into the DOM
+ // so run the animation in the next animation frame / microtask
+ queueMicrotask(() => {
+ /*...*/
+ });
+ },
+ onExit(el, done) {
+ // the exitting element is kept in the DOM until the done() callback is called
+ },
+});
+
+// change the source to trigger the transition
+setEl(refToHtmlElement);
+```
+
+### Resolving JSX
+
+Usually the source will be a JSX element, and you will want to resolve it to a DOM element before passing it to `createSwitchTransition`. It leaves the resolving to you, so you can do it in any way you want.
+
+For example, you can `children` helper from `solid-js`, to get the first found HTML element.
+
+```ts
+import { children } from "solid-js";
+import { createSwitchTransition } from "@solid-primitives/transition-group";
+
+const resolved = children(() => props.children);
+const filtered = createMemo(() => resolved.toArray().find(el => el instanceof HTMLElement));
+return createSwitchTransition(filtered, {
+ /*...*/
+});
+```
+
+Or use a `resolveFirst` helper from `@solid-primitives/refs`
+
+```ts
+import { resolveFirst } from "@solid-primitives/refs";
+import { createSwitchTransition } from "@solid-primitives/transition-group";
+
+const resolved = resolveFirst(() => props.children);
+return createSwitchTransition(resolved, {
+ /*...*/
+});
+```
+
+## `createListTransition`
+
+Create an element list transition interface for changes to the list of elements.
+It can be used to implement own transition effect, or a custom ``-like component.
+
+### How to use it
+
+It will observe the source and return a signal with array of elements to be rendered (current ones and exiting ones).
+
+`createListTransition` takes two parameters:
+
+- `source` a signal with the current list of elements.
+ Any object can used as the element, but most likely you will want to use a `HTMLElement` or `SVGElement`.
+
+- `options` transition options:
+
+ - `onChange` - a function to be called when the list changes. It receives the list of added elements, removed elements, and moved elements. It also receives a callback to be called when the removed elements are finished animating (they can be removed from the DOM).
+
+ - `appear` - whether to run the transition on the initial elements. Defaults to `false`.
+
+ If enabled, the initial elements will still be included in the initial render (for SSR), but the transition fill happen when the first client-side effect is run. So to avoid the initial elements to be visible, you can set the initial element's style to `display: none` and set it to `display: block` in the `onChange` callback.
+
+ - `exitMethod` - This controls how the elements exit.
+
+ - `"remove"` removes the element immediately.
+ - `"move-to-end"` (default) will move elements which have exited to the end of the array.
+ - `"keep-index"` will splice them in at their previous index.
+
+Returns a signal with an array of the current elements and exiting previous elements.
+
+```ts
+import { createListTransition } from "@solid-primitives/transition-group";
+
+const [els, setEls] = createSignal([]);
+
+const rendered = createListTransition(els, {
+ onChange({ list, added, removed, unchanged, finishRemoved }) {
+ // the callback is called before the added elements are inserted into the DOM
+ // so run the animation in the next animation frame / microtask
+ queueMicrotask(() => {
+ /*...*/
+ });
+
+ // the removed elements are kept in the DOM until the finishRemoved() callback is called
+ finishRemoved(removed);
+ },
+});
+
+// change the source to trigger the transition
+setEls([...refsToHTMLElements]);
+```
+
+### Resolving JSX
+
+Usually the source will be a JSX Element, and you will want to resolve it to a list of DOM elements before passing it to `createListTransition`. It leaves the resolving to you, so you can do it in any way you want.
+
+For example, you can `children` helper from `solid-js`, and filter out non-HTML elements:
+
+```ts
+import { children } from "solid-js";
+import { createListTransition } from "@solid-primitives/transition-group";
+
+const resolved = children(() => props.children);
+const filtered = createMemo(() => resolved.toArray().filter(el => el instanceof HTMLElement));
+return createListTransition(filtered, {
+ /*...*/
+});
+```
+
+Or use a `resolveElements` helper from `@solid-primitives/refs`
+
+```ts
+import { resolveElements } from "@solid-primitives/refs";
+import { createSwitchTransition } from "@solid-primitives/transition-group";
+
+const resolved = resolveElements(() => props.children);
+return createListTransition(resolved.toArray, {
+ /*...*/
+});
+```
+
+## Demo
+
+Deployed example:
+
+https://solidjs-community.github.io/solid-primitives/transition-group
+
+Source code:
+
+https://github.com/solidjs-community/solid-primitives/tree/main/packages/transition-group/dev
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md)
diff --git a/packages/transition-group/dev/index.html b/packages/transition-group/dev/index.html
new file mode 100644
index 000000000..65f53c4b6
--- /dev/null
+++ b/packages/transition-group/dev/index.html
@@ -0,0 +1,35 @@
+
+
+
+ Solid App
+
+
+
+
+ You need to enable JavaScript to run this app.
+
+
+
+
+
diff --git a/packages/transition-group/dev/index.tsx b/packages/transition-group/dev/index.tsx
new file mode 100644
index 000000000..b2be4e1e8
--- /dev/null
+++ b/packages/transition-group/dev/index.tsx
@@ -0,0 +1,28 @@
+import { A, Route, Router, Routes } from "@solidjs/router";
+import { render } from "solid-js/web";
+import ListPage from "./list-page";
+import SwitchPage from "./switch-page";
+
+import "uno.css";
+
+render(
+ () => (
+
+
+
+ /list
+
+
+ /switch
+
+
+
+
+
+
+
+ ),
+ document.getElementById("root")!,
+);
diff --git a/packages/transition-group/dev/list-page.tsx b/packages/transition-group/dev/list-page.tsx
new file mode 100644
index 000000000..6b71f4563
--- /dev/null
+++ b/packages/transition-group/dev/list-page.tsx
@@ -0,0 +1,227 @@
+import {
+ children,
+ createRenderEffect,
+ createResource,
+ onCleanup,
+ onMount,
+ Suspense,
+ untrack,
+ useTransition,
+} from "solid-js";
+import { resolveElements } from "@solid-primitives/refs";
+import { Component, createSignal, For, Show } from "solid-js";
+import { createListTransition } from "../src";
+
+const grayOutOnDispose = (el: HTMLElement) => {
+ onCleanup(() => {
+ el.style.filter = "grayscale(60%)";
+ el.style.zIndex = "0";
+ });
+};
+
+const ListPage: Component = () => {
+ const [show, setShow] = createSignal(false);
+ const [show1, setShow1] = createSignal(false);
+ const [show2, setShow2] = createSignal(true);
+ const [showWrapper, setShowWrapper] = createSignal(true);
+
+ const [list, setList] = createSignal([{ n: 1 }, { n: 2 }, { n: 3 }, { n: 4 }, { n: 5 }]);
+
+ const [runResource, setRunResource] = createSignal(false);
+ let resolve = () => {};
+ const [res] = createResource(runResource, () => new Promise(r => (resolve = r)));
+ const [isTransitioning, startTransition] = useTransition();
+
+ const appear = localStorage.getItem("transition-group-appear") === "true";
+
+ return (
+ <>
+
+ {
+ resolve();
+ setRunResource(p => !p);
+ }}
+ >
+ {runResource() ? "Stop" : "Start"} Resource
+
+ {
+ resolve();
+ runResource() || startTransition(() => setRunResource(p => !p));
+ }}
+ >
+ {isTransitioning() ? "Stop" : "Start"} Transition
+
+ {
+ localStorage.setItem("transition-group-appear", String(!appear));
+ window.location.reload();
+ }}
+ >
+ {appear ? "Disable" : "Enable"} Appear
+
+
+
+
+ setList(p => [...p, { n: (p[p.length - 1]?.n ?? -1) + 1 }])}
+ >
+ + 1
+
+ setList(p => (p.length > 0 ? p.slice(0, p.length - 1) : p))}
+ >
+ - 1
+
+ setShow(p => !p)}>
+ toggle 0
+
+ setShow1(p => !p)}>
+ toggle 1
+
+ setShow2(p => !p)}>
+ toggle 2 & 3
+
+ setShowWrapper(p => !p)}>
+ toggle wrapper
+
+
+
+
Suspended}>
+
+ {untrack(() => {
+ // track the resource
+ createRenderEffect(res);
+
+ const resolved = resolveElements(
+ () => (
+ <>
+ Hello
+ World
+ {show() && (
+ {
+ onMount(() => console.log("mounted", el.isConnected));
+ grayOutOnDispose(el);
+ }}
+ >
+ ID 0
+
+ )}
+
+
+ ID 1
+
+
+
+
+ ID 2
+
+
+ ID 3
+
+
+
+ {({ n }, i) => (
+
+ setList(p => {
+ const copy = p.slice();
+ copy.splice(i(), 1);
+ return copy;
+ })
+ }
+ ref={grayOutOnDispose}
+ >
+ {n + 1}.
+
+ )}
+
+
+ ),
+ (el): el is HTMLElement => el instanceof HTMLElement,
+ );
+
+ const options = { duration: 600, easing: "cubic-bezier(0.4, 0, 0.2, 1)" };
+
+ return createListTransition(resolved.toArray, {
+ appear,
+ onChange({ added, finishRemoved, unchanged, removed }) {
+ added.forEach(el => {
+ queueMicrotask(() => {
+ if (!el.isConnected) return;
+ el.style.opacity = "0";
+ el.style.transform = "translateY(10px)";
+ el.animate(
+ [
+ { opacity: 0, transform: "translateY(-36px)" },
+ { opacity: 1, transform: "translateY(0)" },
+ ],
+ { ...options, fill: "both" },
+ );
+ });
+ });
+
+ unchanged.forEach(el => {
+ const { left: left1, top: top1 } = el.getBoundingClientRect();
+ if (!el.isConnected) return;
+ queueMicrotask(() => {
+ const { left: left2, top: top2 } = el.getBoundingClientRect();
+ el.animate(
+ [
+ { transform: `translate(${left1 - left2}px, ${top1 - top2}px)` },
+ { transform: "none" },
+ ],
+ options,
+ );
+ });
+ });
+
+ const removedRects = removed.map(el => el.getBoundingClientRect());
+ removed.forEach(el => {
+ el.style.transform = "none";
+ el.style.position = "absolute";
+ });
+ queueMicrotask(() => {
+ removed.forEach((el, i) => {
+ if (!el.isConnected) return finishRemoved([el]);
+
+ const { left: left1, top: top1 } = removedRects[i]!;
+ const { left: left2, top: top2 } = el.getBoundingClientRect();
+
+ const a = el.animate(
+ [
+ { transform: `translate(${left1 - left2}px, ${top1 - top2}px)` },
+ {
+ opacity: 0,
+ transform: `translate(${left1 - left2}px, ${top1 - top2 + 36}px)`,
+ },
+ ],
+ options,
+ );
+
+ i === removed.length - 1 &&
+ a.finished
+ .then(() => finishRemoved(removed))
+ .catch(() => finishRemoved(removed));
+ });
+ });
+ },
+ });
+ })}
+
+
+
();
+
+ return createSwitchTransition(el, {
+ onEnter(el, done) {
+ queueMicrotask(() => animateIn(el, done));
+ },
+ onExit(el, done) {
+ animateOut(el, done);
+ },
+ mode: props.mode,
+ appear,
+ });
+}
+
+const grayOutOnDispose = (el: HTMLElement) => {
+ onCleanup(() => {
+ el.style.filter = "grayscale(60%)";
+ el.style.zIndex = "0";
+ });
+};
+
+function Example(props: {
+ mode: TransitionMode;
+ withFallback?: true;
+ resource: VoidFunction;
+}): JSX.Element {
+ const { withFallback, mode } = props;
+ const [toggle, setToggle] = createSignal(true);
+
+ let i = 0;
+
+ return (
+
+
{mode}
+
setToggle(!toggle())}>
+ {toggle() ? "Hide" : "Show"}
+
+
Suspended}>
+ {untrack(() => {
+ // track the resource
+ createRenderEffect(props.resource);
+
+ return (
+
+
+ B{i++}
+
+ A{i++}
+
+
+
+ );
+ })}
+
+ 
-# @solid-primitives/parser
+# @solid-primitives/jsx-parser
A primitive to extend the types of values JSX can return. These JSX-elements are named `tokens`.
diff --git a/packages/jsx-parser/package.json b/packages/jsx-parser/package.json
index f2a0487c4..f9db0d2af 100644
--- a/packages/jsx-parser/package.json
+++ b/packages/jsx-parser/package.json
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/jsx-parser",
- "version": "0.1.2",
+ "version": "0.1.3",
"description": "A primitive to tokenize your solid-components to enable custom parsing.",
"author": "Vincent Van Dijck