-
- } />
-
+ <>
+
+ {
+ el.animate([{ opacity: 0 }, { opacity: 1 }], {
+ duration: 600,
+ }).finished.then(done);
+ }}
+ onExit={(el, done) => {
+ el.animate([{ opacity: 1 }, { opacity: 0 }], {
+ duration: 600,
+ }).finished.then(done);
+ }}
+ mode="outin"
+ >
+
+
+
+
-
+
);
};
export default App;
diff --git a/packages/refs/dev/key.tsx b/packages/refs/dev/key.tsx
deleted file mode 100644
index f781317b2..000000000
--- a/packages/refs/dev/key.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Rerun } from "../../keyed/src/index.js";
-import { Component, createSignal } from "solid-js";
-import { Transition } from "solid-transition-group";
-
-const App: Component = () => {
- const [count, setCount] = createSignal(0);
-
- return (
- <>
-
- {
- el.animate([{ opacity: 0 }, { opacity: 1 }], {
- duration: 600,
- }).finished.then(done);
- }}
- onExit={(el, done) => {
- el.animate([{ opacity: 1 }, { opacity: 0 }], {
- duration: 600,
- }).finished.then(done);
- }}
- mode="outin"
- >
-
-
-
-
-
-
- );
-};
-export default App;
diff --git a/packages/refs/package.json b/packages/refs/package.json
index e1377bcc3..611192851 100644
--- a/packages/refs/package.json
+++ b/packages/refs/package.json
@@ -59,7 +59,6 @@
"@solid-primitives/utils": "workspace:^"
},
"devDependencies": {
- "solid-app-router": "^0.4.2",
"solid-js": "^1.8.7",
"solid-transition-group": "^0.2.3"
},
diff --git a/packages/resize-observer/CHANGELOG.md b/packages/resize-observer/CHANGELOG.md
index 05ade420f..d184e5210 100644
--- a/packages/resize-observer/CHANGELOG.md
+++ b/packages/resize-observer/CHANGELOG.md
@@ -1,5 +1,11 @@
# @solid-primitives/resize-observer
+## 2.0.26
+
+### Patch Changes
+
+- a7338e7: Use generics in `createResizeObserver`
+
## 2.0.25
### Patch Changes
diff --git a/packages/resize-observer/README.md b/packages/resize-observer/README.md
index 4171e42d2..c8ada9c0b 100644
--- a/packages/resize-observer/README.md
+++ b/packages/resize-observer/README.md
@@ -11,10 +11,10 @@
Reactive primitives for observing resizing of HTML elements.
-- [`makeResizeObserver`](#makeResizeObserver) — Instantiate a new ResizeObserver that automatically get's disposed on cleanup.
-- [`createResizeObserver`](#createResizeObserver) — Create resize observer instance, listening for changes to size of reactive element targets array.
-- [`createWindowSize`](#createWindowSize) — Creates a reactive store-like object of current width and height dimensions of the browser window.
-- [`createElementSize`](#createElementSize) — Creates a reactive store-like object of current width and height dimensions of html element.
+- [`makeResizeObserver`](#makeresizeobserver) — Instantiate a new ResizeObserver that automatically get's disposed on cleanup.
+- [`createResizeObserver`](#createresizeobserver) — Create resize observer instance, listening for changes to size of reactive element targets array.
+- [`createWindowSize`](#createwindowsize) — Creates a reactive store-like object of current width and height dimensions of the browser window.
+- [`createElementSize`](#createelementsize) — Creates a reactive store-like object of current width and height dimensions of html element.
## Installation
diff --git a/packages/resize-observer/package.json b/packages/resize-observer/package.json
index 1a2e4025c..744669fdd 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.25",
+ "version": "2.0.26",
"description": "Reactive primitives for observing resizing of HTML elements.",
"author": "Moshe Udimar",
"contributors": [
diff --git a/packages/resize-observer/src/index.ts b/packages/resize-observer/src/index.ts
index 6f0458f3c..d41437622 100644
--- a/packages/resize-observer/src/index.ts
+++ b/packages/resize-observer/src/index.ts
@@ -13,10 +13,15 @@ import {
import { Accessor, createEffect, onCleanup, sharedConfig } from "solid-js";
import { isServer } from "solid-js/web";
-export type ResizeHandler = (
+type ResizeObserverEntryGeneric
= ResizeObserverEntry & { readonly target: T };
+type ResizeObserverCallbackGeneric = (
+ entries: ResizeObserverEntryGeneric[],
+ observer: ResizeObserver,
+) => void;
+export type ResizeHandler = (
rect: DOMRectReadOnly,
- element: Element,
- entry: ResizeObserverEntry,
+ element: T,
+ entry: ResizeObserverEntryGeneric,
) => void;
export type Size = { width: number; height: number };
@@ -30,7 +35,7 @@ export type NullableSize = { width: number; height: number } | { width: null; he
* @returns `observe` and `unobserve` functions
*/
export function makeResizeObserver(
- callback: ResizeObserverCallback,
+ callback: ResizeObserverCallbackGeneric,
options?: ResizeObserverOptions,
): {
observe: (ref: T) => void;
@@ -39,7 +44,7 @@ export function makeResizeObserver(
if (isServer) {
return { observe: noop, unobserve: noop };
}
- const observer = new ResizeObserver(callback);
+ const observer = new ResizeObserver(callback as ResizeObserverCallback);
onCleanup(observer.disconnect.bind(observer));
return {
observe: ref => observer.observe(ref, options),
@@ -62,15 +67,15 @@ export function makeResizeObserver(
*
* ```
*/
-export function createResizeObserver(
- targets: MaybeAccessor
>,
- onResize: ResizeHandler,
+export function createResizeObserver(
+ targets: MaybeAccessor>,
+ onResize: ResizeHandler,
options?: ResizeObserverOptions,
): void {
if (isServer) return;
- const previousMap = new WeakMap(),
- { observe, unobserve } = makeResizeObserver(entries => {
+ const previousMap = new WeakMap(),
+ { observe, unobserve } = makeResizeObserver(entries => {
for (const entry of entries) {
const { contentRect, target } = entry,
width = Math.round(contentRect.width),
@@ -83,7 +88,7 @@ export function createResizeObserver(
}
}, options);
- createEffect((prev: Element[]) => {
+ createEffect((prev: T[]) => {
const refs = filterNonNullable(asArray(access(targets)));
handleDiffArray(refs, prev, observe, unobserve);
return refs;
diff --git a/packages/resource/CHANGELOG.md b/packages/resource/CHANGELOG.md
index 51dbd8606..9da6cc34c 100644
--- a/packages/resource/CHANGELOG.md
+++ b/packages/resource/CHANGELOG.md
@@ -1,5 +1,23 @@
# @solid-primitives/resource
+## 0.3.1
+
+### Patch Changes
+
+- 89117a6: storage: expose init promise/value, resource: docs clarification
+
+## 0.3.0
+
+### Minor Changes
+
+- d7d0d70: resource: new primitive createAbortable (makeAbortable + cleanup)
+
+## 0.2.0
+
+### Minor Changes
+
+- 313f7d5: abort reason, filter abort error
+
## 0.1.2
### Patch Changes
diff --git a/packages/resource/README.md b/packages/resource/README.md
index 6e2d02f05..d41507299 100644
--- a/packages/resource/README.md
+++ b/packages/resource/README.md
@@ -12,8 +12,9 @@
A collection of composable primitives to augment [`createResource`](https://www.solidjs.com/docs/latest/api#createresource)
- [`createAggregated`](#createaggregated) - wraps the resource to aggregate data instead of overwriting it
-- [`createDeepSignal`](#createdeepsignal) - provides a fine-grained signal for the [resource storage option](https://www.solidjs.com/docs/latest/api#createresource:~:text=Resources%20can%20be%20set%20with%20custom%20defined%20storage)
-- [`makeAbortable`](#makeabortable) - wraps the fetcher to be abortable and auto-abort on re-fetch or timeout
+- [`createDeepSignal`](#createdeepsignal) - provides a fine-grained signal for the [resource storage option](https://docs.solidjs.com/reference/basic-reactivity/create-resource#options)
+- [`makeAbortable`](#makeabortable) - sets up an AbortSignal with auto-abort on re-fetch or timeout
+- [`createAbortable`](#createabortable) - like `makeAbortable`, but with automatic abort on cleanup
- [`makeCache`](#makecache) - wraps the fetcher to cache the responses for a certain amount of time
- [`makeRetrying`](#makeretrying) - wraps the fetcher to retry requests after a delay
@@ -37,7 +38,7 @@ const [signal, abort] = makeAbortable({ timeout: 10000 });
const fetcher = (url: string) => fetch(url, { signal: signal() }).then(r => r.json());
-// cached fetcher will only be called if `url` source changes, or gets invalidated
+// cached fetcher will not be called if something for the same URL is still in cache
const [cachedFetcher, invalidate] = makeCache(fetcher, { storage: localStorage });
// works with createResource, or any wrapping API with the same interface
@@ -68,7 +69,7 @@ Objects and Arrays are re-created on each operation, but the values will be left
### createDeepSignal
-Usually resources in Solid.js are immutable. Every time the resource updates, every subscriber of it is updated. Starting with Solid.js 1.5, `createResource` allows to receive a function returning something akin to a signal in [`options.storage`](https://www.solidjs.com/docs/latest/api#createresource:~:text=Resources%20can%20be%20set%20with%20custom%20defined%20storage). This allows to provide the underlying storage for the resource in order to change its reactivity. This allows to add fine-grained reactivity to resources so that you can subscribe to nested properties and only trigger updates as they actually occur:
+Usually resources in Solid.js are immutable. Every time the resource updates, every subscriber of it is updated. Starting with Solid.js 1.5, `createResource` allows to receive a function returning something akin to a signal in [`options.storage`](https://docs.solidjs.com/reference/basic-reactivity/create-resource#options). This allows to provide the underlying storage for the resource in order to change its reactivity. This allows to add fine-grained reactivity to resources so that you can subscribe to nested properties and only trigger updates as they actually occur:
```ts
// this adds fine-grained reactivity to the contents of data():
@@ -91,7 +92,11 @@ Orchestrates AbortController creation and aborting of abortable fetchers, either
```ts
// definition
-const [signal: AbortSignal, abort: () => void] = makeAbortable({
+const [
+ signal: AbortSignal,
+ abort: () => void,
+ filterErrors: (err: E) => E instanceof AbortError ? void : E
+] = makeAbortable({
timeout?: 10000,
noAutoAbort?: true,
});
@@ -99,12 +104,17 @@ const [signal: AbortSignal, abort: () => void] = makeAbortable({
// usage
const fetcher = (url: string) => fetch(
url, { signal: signal() }
-).then(r => r.json());
+).then(r => r.json(), filterErrors);
```
-- The signal function always returns an unaborted signal; if `noAutoAbort` is not set to true, calling it will also abort a previous signal, if present
-- The abort callback will always abort the current signal
+- The `signal` function always returns a signal that is not yet aborted; if `noAutoAbort` is not set to true, calling it will also abort a previous signal, if present
+- The `abort` callback will always abort the current signal
- If `timeout` is set, the signal will be aborted after that many Milliseconds
+- The `filterErrors` function can be used to filter out abort errors
+
+### createAbortable
+
+This function does exactly the same as `makeAbortable`, but also automatically aborts on cleanup. Only use within a reactive scope.
### makeCache
@@ -240,7 +250,7 @@ const addTodo = todo => {
#### Scroll Restoration
-This is already covered in [solid-router](https://github.com/solidjs/solid-router).
+This is already covered in [@solidjs/router](https://github.com/solidjs/solid-router).
#### Polling
@@ -248,7 +258,7 @@ Just use an interval with refetch; ideally, also use [`makeAbortable`](#makeabor
## Demo
-You may view a working example of createFileSystem/makeVirtualFileSystem/makeWebAccessFileSystem here:
+You may view a working example of our resource primitives here:
https://primitives.solidjs.community/playground/resource/
## Changelog
diff --git a/packages/resource/package.json b/packages/resource/package.json
index 5fe3f8205..14cb233e0 100644
--- a/packages/resource/package.json
+++ b/packages/resource/package.json
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/resource",
- "version": "0.1.2",
+ "version": "0.3.1",
"description": "A template primitive example.",
"author": "Alex ",
"contributors": [],
@@ -20,6 +20,7 @@
"createAggregated",
"createDeepSignal",
"makeAbortable",
+ "createAbortable",
"makeCache",
"makeRetrying"
],
diff --git a/packages/resource/src/index.ts b/packages/resource/src/index.ts
index 7b76a64b5..b5da335e5 100644
--- a/packages/resource/src/index.ts
+++ b/packages/resource/src/index.ts
@@ -5,19 +5,22 @@ import {
type ResourceFetcher,
type ResourceFetcherInfo,
type Signal,
+ onCleanup,
} from "solid-js";
import { createStore, reconcile, unwrap } from "solid-js/store";
export type AbortableOptions = {
- noAutoAbort?: true;
+ noAutoAbort?: boolean;
timeout?: number;
};
/**
* **Creates and handles an AbortSignal**
* ```ts
- * const [signal, abort] = makeAbortable({ timeout: 10000 });
- * const fetcher = (url) => fetch(url, { signal: signal() });
+ * const [signal, abort, filterAbortError] =
+ * makeAbortable({ timeout: 10000 });
+ * const fetcher = (url) => fetch(url, { signal: signal() })
+ * .catch(filterAbortError); // filters abort errors
* ```
* Returns an accessor for the signal and the abort callback.
*
@@ -26,25 +29,59 @@ export type AbortableOptions = {
* - `noAutoAbort`: can be set to true to make a new source not automatically abort a previous request
*/
export function makeAbortable(
- options?: AbortableOptions,
-): [signal: () => AbortSignal, abort: () => void] {
+ options: AbortableOptions = {},
+): [
+ signal: () => AbortSignal,
+ abort: (reason?: string) => void,
+ filterAbortError: (err: any) => void,
+] {
let controller: AbortController | undefined;
let timeout: NodeJS.Timeout | number | undefined;
- const abort = () => {
+ const abort = (reason?: string) => {
timeout && clearTimeout(timeout);
- controller?.abort();
+ controller?.abort(reason);
};
const signal = () => {
- if (!options?.noAutoAbort && controller?.signal.aborted === false) {
- abort();
+ if (!options.noAutoAbort && controller?.signal.aborted === false) {
+ abort("retry");
}
controller = new AbortController();
- if (options?.timeout) {
- timeout = setTimeout(abort, options.timeout);
+ if (options.timeout) {
+ timeout = setTimeout(() => abort("timeout"), options.timeout);
}
return controller.signal;
};
- return [signal, abort];
+ return [
+ signal,
+ abort,
+ err => {
+ if (err.name === "AbortError") {
+ return undefined;
+ }
+ throw err;
+ },
+ ];
+}
+
+/**
+ * **Creates and handles an AbortSignal with automated cleanup**
+ * ```ts
+ * const [signal, abort, filterAbortError] =
+ * createAbortable();
+ * const fetcher = (url) => fetch(url, { signal: signal() })
+ * .catch(filterAbortError); // filters abort errors
+ * ```
+ * Returns an accessor for the signal and the abort callback.
+ *
+ * Options are optional and include:
+ * - `timeout`: time in Milliseconds after which the fetcher aborts automatically
+ * - `noAutoAbort`: can be set to true to make a new source not automatically abort a previous request
+ */
+
+export function createAbortable(options?: AbortableOptions) {
+ const [signal, abort, filterAbortError] = makeAbortable(options);
+ onCleanup(abort);
+ return [signal, abort, filterAbortError];
}
const mapEntries = (entries: [key: string, value: any][]) =>
@@ -115,7 +152,7 @@ export function makeCache(
const save = () => {
try {
options?.storage?.setItem(key, serialize(localCache));
- } catch (e) {
+ } catch (_) {
/**/
}
};
@@ -126,7 +163,7 @@ export function makeCache(
if (options?.storage) {
try {
Object.assign(localCache, deserialize(options.storage.getItem(key) || "{}"));
- } catch (e) {
+ } catch (_) {
/**/
}
}
diff --git a/packages/resource/test/index.test.ts b/packages/resource/test/index.test.ts
index b4e5e2532..6849b7eee 100644
--- a/packages/resource/test/index.test.ts
+++ b/packages/resource/test/index.test.ts
@@ -1,6 +1,5 @@
-import { createEffect, createResource, createSignal, on } from "solid-js";
+import { catchError, createEffect, createResource, createRoot, createSignal, on } from "solid-js";
import { describe, test, expect, vi, afterAll, beforeEach, beforeAll } from "vitest";
-import { testEffect } from "@solidjs/testing-library";
import {
makeAbortable,
createAggregated,
@@ -10,6 +9,33 @@ import {
createDeepSignal,
} from "../src/index.js";
+export function testEffect(
+ fn: (done: (result: T) => void) => void,
+): Promise {
+ let done: (result: T) => void;
+ let fail: (error: any) => void;
+ let promise = new Promise((resolve, reject) => {
+ done = resolve;
+ fail = reject;
+ });
+ createRoot(dispose => {
+ catchError(() => {
+ fn(result => {
+ done(result);
+ dispose();
+ });
+ }, fail);
+ });
+ return promise;
+}
+
+class AbortError extends Error {
+ constructor(msg: string) {
+ super(msg);
+ }
+ name = "AbortError";
+}
+
beforeAll(() => {
vi.useFakeTimers();
});
@@ -34,6 +60,18 @@ describe("makeAbortable", () => {
abort();
expect(signal2.aborted, "signal should be aborted when calling abort()").toBeTruthy();
});
+ test("filters (only) abort errors", async () => {
+ const [_signal, _abort, filterAbortError] = makeAbortable();
+ await Promise.reject(new AbortError("test"))
+ .catch(filterAbortError)
+ .then(resolution => expect(resolution).toBeUndefined())
+ .catch(err => expect.fail(err.message || "failed with error"));
+ const noAbortError = new Error("not an AbortError");
+ await Promise.reject(noAbortError)
+ .catch(filterAbortError)
+ .then(() => expect.fail("filtered error that was not an AbortError"))
+ .catch(err => expect(err).toBe(noAbortError));
+ });
});
describe("makeAggregated", () => {
diff --git a/packages/rootless/README.md b/packages/rootless/README.md
index 596b70edd..4954bddc5 100644
--- a/packages/rootless/README.md
+++ b/packages/rootless/README.md
@@ -11,11 +11,11 @@
A collection of helpers that aim to simplify using reactive primitives outside of reactive roots, and managing disposal of reactive roots.
-- [`createSubRoot`](#createSubRoot) - Creates a reactive **sub root**, that will be automatically disposed when it's owner does.
-- [`createCallback`](#createCallback) - A wrapper for creating callbacks with `runWithOwner`.
-- [`createDisposable`](#createDisposable) - For disposing computations early – before the root cleanup.
-- [`createSingletonRoot`](#createSingletonRoot) - Share "global primitives" across multiple reactive scopes.
-- [`createRootPool`](#createRootPool) - Creates a pool of reactive roots, that can be reused.
+- [`createSubRoot`](#createsubroot) - Creates a reactive **sub root**, that will be automatically disposed when it's owner does.
+- [`createCallback`](#createcallback) - A wrapper for creating callbacks with `runWithOwner`.
+- [`createDisposable`](#createdisposable) - For disposing computations early – before the root cleanup.
+- [`createSingletonRoot`](#createsingletonroot) - Share "global primitives" across multiple reactive scopes.
+- [`createRootPool`](#createrootpool) - Creates a pool of reactive roots, that can be reused.
## Installation
@@ -98,7 +98,7 @@ For disposing computations early – before the root cleanup.
### How to use it
-Executes provided function in a [`createSubRoot`](#createSubRoot) _(auto-disposing root)_, and returns a dispose function, to dispose computations used inside before automatic cleanup.
+Executes provided function in a [`createSubRoot`](#createsubroot) _(auto-disposing root)_, and returns a dispose function, to dispose computations used inside before automatic cleanup.
```ts
const dispose = createDisposable(dispose => {
diff --git a/packages/scheduled/CHANGELOG.md b/packages/scheduled/CHANGELOG.md
index 90e256e95..4596d4e64 100644
--- a/packages/scheduled/CHANGELOG.md
+++ b/packages/scheduled/CHANGELOG.md
@@ -1,5 +1,11 @@
# @solid-primitives/scheduled
+## 1.4.4
+
+### Patch Changes
+
+- 57a3078: Add check for typeof window, fallback to throttle if undefined
+
## 1.4.3
### Patch Changes
diff --git a/packages/scheduled/README.md b/packages/scheduled/README.md
index f77b32088..15a336bd5 100644
--- a/packages/scheduled/README.md
+++ b/packages/scheduled/README.md
@@ -13,7 +13,7 @@ Primitives for creating scheduled — throttled or debounced — callbacks.
- [`debounce`](#debounce) - Creates a callback that is **debounced** and cancellable.
- [`throttle`](#throttle) - Creates a callback that is **throttled** and cancellable.
-- [`scheduleIdle`](#scheduleIdle) - Creates a callback throttled using `window.requestIdleCallback()`.
+- [`scheduleIdle`](#scheduleidle) - Creates a callback throttled using `window.requestIdleCallback()`.
- [`leading`](#leading) - Creates a scheduled and cancellable callback that will be called on **leading** edge.
- [`createScheduled`](#createscheduled) - Creates a signal used for scheduling execution of solid computations by tracking.
- [Scheduling explanation](#scheduling-explanation)
diff --git a/packages/scheduled/package.json b/packages/scheduled/package.json
index b8f53ac0e..29fcbacf4 100644
--- a/packages/scheduled/package.json
+++ b/packages/scheduled/package.json
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/scheduled",
- "version": "1.4.3",
+ "version": "1.4.4",
"description": "Primitives for creating scheduled — throttled or debounced — callbacks.",
"contributors": [
"David Di Biase ",
diff --git a/packages/scheduled/src/index.ts b/packages/scheduled/src/index.ts
index 65e676437..083a884fa 100644
--- a/packages/scheduled/src/index.ts
+++ b/packages/scheduled/src/index.ts
@@ -112,7 +112,7 @@ export const throttle: ScheduleCallback = (callback, wait) => {
export const scheduleIdle: ScheduleCallback = isServer
? () => Object.assign(() => void 0, { clear: () => void 0 })
: // requestIdleCallback is not supported in Safari
- (window.requestIdleCallback as typeof window.requestIdleCallback | undefined)
+ typeof requestIdleCallback !== "undefined"
? (callback, maxWait) => {
let isDeferred = false,
id: ReturnType,
diff --git a/packages/script-loader/CHANGELOG.md b/packages/script-loader/CHANGELOG.md
index d1f0fec52..a894ba6d0 100644
--- a/packages/script-loader/CHANGELOG.md
+++ b/packages/script-loader/CHANGELOG.md
@@ -1,5 +1,11 @@
# @solid-primitives/script-loader
+## 2.2.0
+
+### Minor Changes
+
+- 7e47dbd: fix events in firefox
+
## 2.1.2
### Patch Changes
diff --git a/packages/script-loader/package.json b/packages/script-loader/package.json
index 403aca8d1..d004bfef7 100644
--- a/packages/script-loader/package.json
+++ b/packages/script-loader/package.json
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/script-loader",
- "version": "2.1.2",
+ "version": "2.2.0",
"description": "Primitive to load scripts dynamically",
"author": "Alex Lohr ",
"contributors": [
diff --git a/packages/script-loader/src/index.ts b/packages/script-loader/src/index.ts
index 58f91ad15..de7017b4b 100644
--- a/packages/script-loader/src/index.ts
+++ b/packages/script-loader/src/index.ts
@@ -1,4 +1,11 @@
-import { Accessor, createRenderEffect, onCleanup, splitProps, type ComponentProps } from "solid-js";
+import {
+ Accessor,
+ createRenderEffect,
+ onCleanup,
+ splitProps,
+ type ComponentProps,
+ type JSX,
+} from "solid-js";
import { spread, isServer } from "solid-js/web";
export type ScriptProps = Omit, "src" | "textContent"> & {
@@ -32,9 +39,33 @@ export function createScriptLoader(props: ScriptProps): HTMLScriptElement | unde
return undefined;
}
const script = document.createElement("script");
- const [local, scriptProps] = splitProps(props, OMITTED_PROPS);
+ const eventKeys: string[] = Object.keys(props).filter(p => p.startsWith("on"));
+ const [local, events, scriptProps] = splitProps(
+ props,
+ OMITTED_PROPS,
+ eventKeys as readonly (keyof typeof props)[],
+ );
setTimeout(() => spread(script, scriptProps, false, true));
createRenderEffect(() => {
+ Object.entries(events).forEach(
+ ([name, handler]: [string, JSX.EventHandlerUnion]) =>
+ script.addEventListener(
+ /^on:?(.*)/.test(name)
+ ? name.startsWith("on:")
+ ? RegExp.$1
+ : RegExp.$1.toLowerCase()
+ : name,
+ (ev: Event) => {
+ Object.defineProperties(ev, {
+ target: { value: script, enumerable: true },
+ currentTarget: { value: script, enumerable: true },
+ });
+ Array.isArray(handler)
+ ? handler[0](handler[1], ev)
+ : typeof handler === "function" && handler.call(null, Object.assign(ev));
+ },
+ ),
+ );
const src = typeof local.src === "string" ? local.src : local.src();
const prop = /^(https?:|\w[\.\w-_%]+|)\//.test(src) ? "src" : "textContent";
if (script[prop] !== src) {
diff --git a/packages/scroll/README.md b/packages/scroll/README.md
index 500d5eb67..6b9f689eb 100644
--- a/packages/scroll/README.md
+++ b/packages/scroll/README.md
@@ -11,8 +11,8 @@
Reactive primitives to react to element/window scrolling.
-- [`createScrollPosition`](#createScrollPosition) - Reactive primitive providing a store-like object with current scroll position of specified target.
-- [`useWindowScrollPosition`](#useWindowScrollPosition) - Returns a reactive object with current window scroll position.
+- [`createScrollPosition`](#createscrollposition) - Reactive primitive providing a store-like object with current scroll position of specified target.
+- [`useWindowScrollPosition`](#usewindowscrollposition) - Returns a reactive object with current window scroll position.
## Installation
diff --git a/packages/set/CHANGELOG.md b/packages/set/CHANGELOG.md
index 1f077471a..19e21e942 100644
--- a/packages/set/CHANGELOG.md
+++ b/packages/set/CHANGELOG.md
@@ -1,5 +1,26 @@
# @solid-primitives/set
+## 0.5.0
+
+### Minor Changes
+
+- aa596ec: Fixes for ReactiveSet (#688):
+ - Iterators and `.forEach()` no longer track specific keys.
+ - Added support for `thisArg` as per `forEach` spec
+ - `super.clear()` now called before dirtying signals
+ - Uses new `dirtyAll` form trigger package
+
+### Patch Changes
+
+- Updated dependencies [32fcb81]
+ - @solid-primitives/trigger@1.1.0
+
+## 0.4.12
+
+### Patch Changes
+
+- 1ea2a09: Use new Map/SetIterator types
+
## 0.4.11
### Patch Changes
diff --git a/packages/set/README.md b/packages/set/README.md
index ee944de24..f7890e41b 100644
--- a/packages/set/README.md
+++ b/packages/set/README.md
@@ -11,8 +11,8 @@
The Javascript built-in `Set` & `WeakSet` data structures as a reactive signals.
-- **[`ReactiveSet`](#ReactiveSet)** - A reactive version of a Javascript built-in `Set` class.
-- **[`ReactiveWeakSet`](#ReactiveWeakSet)** - A reactive version of a Javascript built-in `WeakSet` class.
+- **[`ReactiveSet`](#reactiveset)** - A reactive version of a Javascript built-in `Set` class.
+- **[`ReactiveWeakSet`](#reactiveweakset)** - A reactive version of a Javascript built-in `WeakSet` class.
## Installation
diff --git a/packages/set/package.json b/packages/set/package.json
index cf6587494..56a929a47 100644
--- a/packages/set/package.json
+++ b/packages/set/package.json
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/set",
- "version": "0.4.11",
+ "version": "0.5.0",
"description": "The Set & WeakSet data structures as a reactive signals.",
"author": "Damian Tarnawski @thetarnav ",
"license": "MIT",
diff --git a/packages/set/src/index.ts b/packages/set/src/index.ts
index e22b8ce79..4ae790d73 100644
--- a/packages/set/src/index.ts
+++ b/packages/set/src/index.ts
@@ -23,69 +23,76 @@ export class ReactiveSet extends Set {
if (values) for (const v of values) super.add(v);
}
- // reads
+ [Symbol.iterator](): SetIterator {
+ return this.values();
+ }
+
get size(): number {
this.#triggers.track($KEYS);
return super.size;
}
- has(v: T): boolean {
- this.#triggers.track(v);
- return super.has(v);
- }
- *keys(): IterableIterator {
- for (const key of super.keys()) {
- this.#triggers.track(key);
- yield key;
- }
- this.#triggers.track($KEYS);
+ has(value: T): boolean {
+ this.#triggers.track(value);
+ return super.has(value);
}
- values(): IterableIterator {
- return this.keys();
+
+ keys(): SetIterator {
+ return this.values();
}
- *entries(): IterableIterator<[T, T]> {
- for (const key of super.keys()) {
- this.#triggers.track(key);
- yield [key, key];
- }
+
+ *values(): SetIterator {
this.#triggers.track($KEYS);
+
+ for (const value of super.values()) {
+ yield value;
+ }
}
- [Symbol.iterator](): IterableIterator {
- return this.values();
+ *entries(): SetIterator<[T, T]> {
+ this.#triggers.track($KEYS);
+
+ for (const entry of super.entries()) {
+ yield entry;
+ }
}
- forEach(callbackfn: (value: T, value2: T, set: this) => void) {
+
+ forEach(callbackfn: (value1: T, value2: T, set: Set) => void, thisArg?: any): void {
this.#triggers.track($KEYS);
- super.forEach(callbackfn as any);
+ super.forEach(callbackfn, thisArg);
}
- // writes
- add(v: T): this {
- if (!super.has(v)) {
- super.add(v);
+ add(value: T): this {
+ if (!super.has(value)) {
+ super.add(value);
batch(() => {
- this.#triggers.dirty(v);
+ this.#triggers.dirty(value);
this.#triggers.dirty($KEYS);
});
}
+
return this;
}
- delete(v: T): boolean {
- const r = super.delete(v);
- if (r) {
+
+ delete(value: T): boolean {
+ const result = super.delete(value);
+
+ if (result) {
batch(() => {
- this.#triggers.dirty(v);
+ this.#triggers.dirty(value);
this.#triggers.dirty($KEYS);
});
}
- return r;
+
+ return result;
}
+
clear(): void {
if (super.size) {
+ super.clear();
+
batch(() => {
- for (const v of super.keys()) this.#triggers.dirty(v);
- super.clear();
- this.#triggers.dirty($KEYS);
+ this.#triggers.dirtyAll();
});
}
}
@@ -109,21 +116,25 @@ export class ReactiveWeakSet extends WeakSet {
if (values) for (const v of values) super.add(v);
}
- has(v: T): boolean {
- this.#triggers.track(v);
- return super.has(v);
+ has(value: T): boolean {
+ this.#triggers.track(value);
+ return super.has(value);
}
- add(v: T): this {
- if (!super.has(v)) {
- super.add(v);
- this.#triggers.dirty(v);
+
+ add(value: T): this {
+ if (!super.has(value)) {
+ super.add(value);
+ this.#triggers.dirty(value);
}
return this;
}
- delete(v: T): boolean {
- const deleted = super.delete(v);
- deleted && this.#triggers.dirty(v);
- return deleted;
+
+ delete(value: T): boolean {
+ const result = super.delete(value);
+
+ result && this.#triggers.dirty(value);
+
+ return result;
}
}
diff --git a/packages/set/test/index.test.ts b/packages/set/test/index.test.ts
index 8d97062e5..412fba986 100644
--- a/packages/set/test/index.test.ts
+++ b/packages/set/test/index.test.ts
@@ -100,11 +100,8 @@ describe("ReactiveSet", () => {
const dispose = createRoot(dispose => {
createEffect(() => {
const run: number[] = [];
- let i = 0;
for (const key of fn(set)) {
run.push(key);
- if (i === 2) break; // don't iterate over all keys
- i += 1;
}
captured.push(run);
});
@@ -112,21 +109,30 @@ describe("ReactiveSet", () => {
});
expect(captured).toHaveLength(1);
- expect(captured[0]).toEqual([1, 2, 3]);
+ expect(captured[0]).toEqual([1, 2, 3, 4]);
set.delete(4);
- expect(captured, "deleted unseen key").toHaveLength(1);
+ expect(captured).toHaveLength(2);
+ expect(captured[1]).toEqual([1, 2, 3]);
set.delete(1);
- expect(captured, "deleted seen").toHaveLength(2);
- expect(captured[1]).toEqual([2, 3]);
+ expect(captured).toHaveLength(3);
+ expect(captured[2]).toEqual([2, 3]);
set.add(4);
- expect(captured, "added key in reach").toHaveLength(3);
- expect(captured[2]).toEqual([2, 3, 4]);
+ expect(captured).toHaveLength(4);
+ expect(captured[3]).toEqual([2, 3, 4]);
set.add(5);
- expect(captured, "added key out of reach").toHaveLength(3);
+ expect(captured).toHaveLength(5);
+ expect(captured[4]).toEqual([2, 3, 4, 5]);
+
+ set.add(5);
+ expect(captured).toHaveLength(5);
+
+ set.clear();
+ expect(captured).toHaveLength(6);
+ expect(captured[5]).toEqual([]);
dispose();
});
diff --git a/packages/share/README.md b/packages/share/README.md
index 75574a25e..372445021 100644
--- a/packages/share/README.md
+++ b/packages/share/README.md
@@ -11,9 +11,9 @@
Primitives for supporting sharing of resources on social media and beyond.
-- [`createSocialShare`](#createSocialShare) - A primitive for sharing on social media and beyond.
-- [`makeWebShare`](#makeWebShare) - Generates a simple non-reactive WebShare primitive for sharing.
-- [`createWebShare`](#createWebShare) - Creates a reactive status about web share.
+- [`createSocialShare`](#createsocialshare) - A primitive for sharing on social media and beyond.
+- [`makeWebShare`](#makewebshare) - Generates a simple non-reactive WebShare primitive for sharing.
+- [`createWebShare`](#createwebshare) - Creates a reactive status about web share.
## Installation
diff --git a/packages/share/package.json b/packages/share/package.json
index b5dbe3f40..cded780e4 100644
--- a/packages/share/package.json
+++ b/packages/share/package.json
@@ -2,7 +2,7 @@
"name": "@solid-primitives/share",
"version": "2.0.6",
"description": "Primitives to help with sharing content on social media and beyond.",
- "author": "David Di Biase ",
"contributors": [
"Omer Ma",
"Tom Pichaud "
diff --git a/packages/spring/LICENSE b/packages/spring/LICENSE
new file mode 100644
index 000000000..38b41d975
--- /dev/null
+++ b/packages/spring/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/spring/README.md b/packages/spring/README.md
new file mode 100644
index 000000000..065d2a428
--- /dev/null
+++ b/packages/spring/README.md
@@ -0,0 +1,63 @@
+
+ 
+
+
+# @solid-primitives/spring
+
+[](https://turborepo.org/)
+[](https://bundlephobia.com/package/@solid-primitives/spring)
+[](https://www.npmjs.com/package/@solid-primitives/spring)
+[](https://github.com/solidjs-community/solid-primitives#contribution-process)
+
+A small SolidJS hook to interpolate signal changes with spring physics. Inspired by & directly forked from [`svelte-motion/spring`](https://svelte.dev/docs/svelte-motion#spring) as such, has a very familiar API design.
+
+With this primitive, you can easily animate values that can be interpolated like `number`, `date`, and collections (arrays or nested objects) of those datatypes.
+
+- `createSpring` - Provides a getter and setter for the spring primitive.
+- `createDerivedSpring` - Provides only a getter for the spring primitive deriving from an accessor parameter. Similar to the [@solid-primitives/tween](https://github.com/solidjs-community/solid-primitives/tree/main/packages/tween) API.
+
+The following physics options are available:
+
+- `stiffness` (number, default `0.15`) — a value between 0 and 1 where higher means a 'tighter' spring
+- `damping` (number, default `0.8`) — a value between 0 and 1 where lower means a 'springier' spring
+- `precision` (number, default `0.01`) — determines the threshold at which the spring is considered to have 'settled', where lower means more precise
+
+## Installation
+
+```bash
+npm install @solid-primitives/spring
+# or
+yarn add @solid-primitives/spring
+# or
+pnpm add @solid-primitives/spring
+```
+
+## How to use it
+
+```ts
+// Basic Example
+const [progress, setProgress] = createSpring(0);
+
+// Example with options (less sudden movement)
+const [radialProgress, setRadialProgress] = createSpring(0, { stiffness: 0.05 });
+
+// Example with collections (e.g. Object or Array).
+const [xy, setXY] = createSpring(
+ { x: 50, y: 50 },
+ { stiffness: 0.08, damping: 0.2, precision: 0.01 },
+);
+
+// Example deriving from an existing signal.
+const [myNumber, myNumber] = createSignal(20);
+const springedValue = createDerivedSpring(myNumber, { stiffness: 0.03 });
+```
+
+## Demo
+
+- **[Playground](https://primitives.solidjs.community/playground/spring)** - [source code](https://github.com/solidjs-community/solid-primitives/blob/main/packages/spring/dev/index.tsx)
+
+- **[CodeSandbox - Basic Example](https://codesandbox.io/p/devbox/ecstatic-borg-k2wqfr)**
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md)
diff --git a/packages/spring/dev/index.tsx b/packages/spring/dev/index.tsx
new file mode 100644
index 000000000..a6d5637e4
--- /dev/null
+++ b/packages/spring/dev/index.tsx
@@ -0,0 +1,120 @@
+import { createSpring } from "../src/index.js";
+
+export default function App() {
+ const [progress, setProgress] = createSpring(0);
+ const [radialProgress, setRadialProgress] = createSpring(0, {
+ stiffness: 0.1,
+ damping: 0.3,
+ });
+ const [xy, setXY] = createSpring({ x: 50, y: 50 }, { stiffness: 0.1, damping: 0.3 });
+ const [date, setDate] = createSpring(new Date());
+
+ function toggleProgress() {
+ if (progress() === 0) setProgress(1);
+ else setProgress(0);
+ }
+ function toggleRadialProgress() {
+ if (radialProgress() === 0) setRadialProgress(1);
+ else setRadialProgress(0);
+ }
+ let d = false;
+ function toggleXY() {
+ if ((d = !d)) setXY({ x: 200, y: 200 });
+ else setXY({ x: 50, y: 50 });
+ }
+ function toggleDate() {
+ if (date().getDate() === new Date("2024-12-01").getDate()) setDate(new Date("2024-04-14"));
+ else setDate(new Date("2024-12-01"));
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ {/* Progress */}
+
+
+
+
{(progress() * 100).toFixed(0)}%
+
+
+ {/* Radial progress */}
+
+
+ {(radialProgress() * 100).toFixed(0)}%
+
+
+ {/* XY */}
+
+ {xy().x.toFixed(0)}x{xy().y.toFixed(0)}
+
+
+ {/* Date */}
+
{date() + ""}
+
- 
-
-
-# @solid-primitives/start
-
-[](https://turborepo.org/)
-[](https://bundlephobia.com/package/@solid-primitives/start)
-[](https://www.npmjs.com/package/@solid-primitives/start)
-[](https://github.com/solidjs-community/solid-primitives#contribution-process)
-
-A set of primitives for Solid Start
-
-- [`createServerCookie`](#createservercookie) - Provides a getter and setter for a reactive cookie, which works isomorphically.
-- [`createUserTheme`](#createusertheme) - Creates a Server Cookie providing a type safe way to store a theme and access it on the server or client.
-
-## Installation
-
-```bash
-npm install @solid-primitives/start
-# or
-yarn add @solid-primitives/start
-# or
-pnpm add @solid-primitives/start
-```
-
-## How to use it
-
-## `createServerCookie`
-
-A primitive for creating a cookie that can be accessed isomorphically on the client, or the server.
-
-```ts
-const [cookie, setCookie] = createServerCookie("cookieName");
-
-cookie(); // => string | undefined
-```
-
-### Custom serialization
-
-Custom cookie serializers and deserializers can also be implemented
-
-```ts
-const [serverCookie, setServerCookie] = createServerCookie("coolCookie", {
- deserialize: str => (str ? str.split(" ") : []), // Deserializes cookie into a string[]
- serialize: val => (val ? val.join(" ") : ""), // serializes the value back into a string
-});
-
-serverCookie(); // => string[]
-```
-
-## `createUserTheme`
-
-Composes `createServerCookie` to provide a type safe way to store a theme and access it on the server or client.
-
-```ts
-const [theme, setTheme] = createUserTheme("cookieName");
-
-theme(); // => "light" | "dark" | undefined
-
-// with default value
-const [theme, setTheme] = createUserTheme("cookieName", {
- defaultValue: "light",
-});
-
-theme(); // => "light" | "dark"
-```
-
-## Examples
-
-### `root.tsx`
-
-This is the main entry file for SolidStart demonstrating usage of the `createUserTheme` function.
-
-- Initializes the theme with the `createUserTheme` function.
-- Toggles between the "dark" and "light" themes using a button.
-- Sets the `data-theme` attribute adding compatibility between `createUserTheme` and libraries like [DaisyUI](https://daisyui.com/).
-- Includes a clean implementation of theming through a `Body` class.
-- Provides additional examples on using variant classes to style components.
-
-```tsx
-import { Suspense } from "solid-js";
-import {
- A,
- Body,
- ErrorBoundary,
- FileRoutes,
- Head,
- Html,
- Meta,
- Routes,
- Scripts,
- Title,
-} from "solid-start";
-import Counter from "./components/Counter";
-import "./root.css";
-import { createUserTheme } from "~/primitives/start";
-
-export default function Root() {
- const [theme, setTheme] = createUserTheme("dark-light-theme", { defaultValue: "dark" });
- const toggleTheme = () => setTheme(currentTheme => (currentTheme === "dark" ? "light" : "dark"));
-
- return (
- // Set data-theme when using libraries like Daisyui:
-
-
- SolidStart - Bare
-
-
-
- // Apply theme as a class to the Body element:
-
-
-
-
-
-
-
-
- );
-}
-```
-
-### `root.css`
-
-Here is an absolute basic CSS file to demonstrate styling with the themes.
-
-- The `body` selector has general styles.
-- The `.dark` and `.light` classes provide specific styles for each theme.
-- The `.dark span` and `.light span` selectors show how to style specific elements based on the theme.
-
-```css
-body {
- font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
- height: "100vh";
- width: "100vh";
-}
-
-body.dark {
- background-color: black;
- color: aliceblue;
-}
-body.light {
- background-color: aliceblue;
- color: black;
-}
-
-.dark span {
- color: #b1d4ff;
-}
-.light span {
- color: #003677;
-}
-```
-
-### `Counter.css`
-
-Continuation of the basic CSS scoped to the component using variant classes.
-
-```css
-.dark-variant {
- border: 2px solid #569cf3;
-}
-
-.light-variant {
- border: 2px solid #05ff22;
-}
-```
-
-## Demo
-
-You can view a demo of this primitive here:
-
-## Changelog
-
-See [CHANGELOG.md](./CHANGELOG.md)
diff --git a/packages/static-store/README.md b/packages/static-store/README.md
index 0f842cbe0..5e1dde026 100644
--- a/packages/static-store/README.md
+++ b/packages/static-store/README.md
@@ -11,8 +11,8 @@
Primitives for creating small reactive objects that doesn't change their shape over time - don't need a proxy wrapper.
-- [`createStaticStore`](#createStaticStore) - Creates a writable static store object.
-- [`createDerivedStaticStore`](#createDerivedStaticStore) - Creates a static store that is derived from a source function.
+- [`createStaticStore`](#createstaticstore) - Creates a writable static store object.
+- [`createDerivedStaticStore`](#createderivedstaticstore) - Creates a static store that is derived from a source function.
## Installation
@@ -57,7 +57,7 @@ setSize("new-property", "value");
## `createDerivedStaticStore`
-A derived version of the [`createStaticStore`](#createStaticStore). It will use the update function to derive the value of the store. It will only update when the dependencies of the update function change.
+A derived version of the [`createStaticStore`](#createstaticstore). It will use the update function to derive the value of the store. It will only update when the dependencies of the update function change.
### How to use it
@@ -82,7 +82,7 @@ el.addEventListener("resize", () => {
## `createHydratableStaticStore`
-A "hydratable" version of the [`createStaticStore`](#createStaticStore) - it will use the `serverValue` on the server and the `update` function on the client. If initialized during hydration it will use `serverValue` as the initial value and update it once hydration is complete.
+A "hydratable" version of the [`createStaticStore`](#createstaticstore) - it will use the `serverValue` on the server and the `update` function on the client. If initialized during hydration it will use `serverValue` as the initial value and update it once hydration is complete.
> **Warning** This primitive version is experimental, and mostly used internally by other primitives. It is not recommended to use it directly.
diff --git a/packages/storage/CHANGELOG.md b/packages/storage/CHANGELOG.md
index 08c22ab3a..3e57d5ba5 100644
--- a/packages/storage/CHANGELOG.md
+++ b/packages/storage/CHANGELOG.md
@@ -1,5 +1,83 @@
# @solid-primitives/storage
+## 4.2.1
+
+### Patch Changes
+
+- 7e50e35: Fix `makePersisted` type narrowing
+
+## 4.2.0
+
+### Minor Changes
+
+- 89117a6: storage: expose init promise/value, resource: docs clarification
+
+## 4.1.0
+
+### Minor Changes
+
+- fd4e161: fixes utf8 escaping in cookieStorage
+
+## 4.0.0
+
+### Major Changes
+
+- 94d1bcc: storage: remove deprecated primitives, simplify types, add makeObjectStorage
+
+## 3.8.0
+
+### Minor Changes
+
+- b9d7b28: fix ssr handling
+
+## 3.7.1
+
+### Patch Changes
+
+- bebccc1: Set-Cookie header will be sent with trailing `, ` in some cases which prefixes the name in the browser too
+
+ Don't append false boolean values from `cookieOptions`
+ Stability improvements: ignore unexpected `cookieOption` keys
+
+## 3.7.0
+
+### Minor Changes
+
+- 4ec7533: storage: fix exports
+
+## 3.6.0
+
+### Minor Changes
+
+- bb4fc57: move tauri storage to submodule
+- 1382d8f: fix cookie serialization
+
+## 3.5.0
+
+### Minor Changes
+
+- 72db58b: type fixes for makePersisted
+
+## 3.4.0
+
+### Minor Changes
+
+- 5d89290: add tauriStorage
+
+## 3.3.0
+
+### Minor Changes
+
+- 99c6e09: Add back the return statement to withOptions
+
+## 3.2.0
+
+### Minor Changes
+
+- 40380a2: safe sync deserialization
+- 407a630: Bugfix for newly introduced sync api. Now BroadcastChannel for `messageSync` should also work as expected.
+- c5145af: fix withOptions
+
## 3.1.0
### Minor Changes
diff --git a/packages/storage/README.md b/packages/storage/README.md
index b09948170..0976d395d 100644
--- a/packages/storage/README.md
+++ b/packages/storage/README.md
@@ -25,11 +25,11 @@ yarn add @solid-primitives/storage
`makePersisted` allows you to persist a signal or store in any synchronous or asynchronous Storage API:
```ts
-const [signal, setSignal] = makePersisted(createSignal("initial"), {storage: sessionStorage});
-const [store, setStore] = makePersisted(createStore({test: true}), {name: "testing"});
+const [signal, setSignal, init] = makePersisted(createSignal("initial"), {storage: sessionStorage});
+const [store, setStore, init] = makePersisted(createStore({test: true}), {name: "testing"});
type PersistedOptions = {
// localStorage is default
- storage?: Storage | StorageWithOptions | AsyncStorage | AsyncStorageWithOptions,
+ storage?: Storage | StorageWithOptions | AsyncStorage | AsyncStorageWithOptions | LocalForage,
// only required for storage APIs with options
storageOptions?: StorageOptions,
// key in the storage API
@@ -64,6 +64,21 @@ If you are using an asynchronous storage to persist the state of a resource, it
initialized from the storage before or after the fetcher resolved. If the initialization resolves after the fetcher, its
result is discarded not to overwrite more current data.
+### Using `makePersisted` with Suspense
+
+In case you are using an asynchronous storage and want the initialisation mesh into Suspense instead of mixing it with Show, we provide the output of the initialisation as third part of the returned tuple:
+
+```ts
+const [state, setState, init] = makePersisted(createStore({}), {
+ name: "state",
+ storage: localForage,
+});
+// run the resource so it is triggered
+createResource(() => init)[0]();
+```
+
+Now Suspense should be blocked until the initialisation is resolved.
+
### Different storage APIs
#### LocalStorage, SessionStorage
@@ -99,11 +114,79 @@ const [state, setState] = makePersisted(createSignal(), {
});
```
-#### IndexedDB, WebSQL
+> HTTP headers are limited to 32kb, each header itself is limited to 16kb. So depending on your current headers, the space in `cookieStorage` is rather small. If the overall space is exceeded, subsequent requests will fail. We have no mechanism to prevent that, since we cannot infer all headers that the browser will set.
+
+> Browsers do not support most UTF8 and UTF16 characters in Cookies, so `cookieStorage` encodes those characters that are not supported using `encodeURIComponent`. To save space, only those characters not supported by all Browsers will be encoded.
+
+#### LocalForage
-There is also [`localForage`](https://localforage.github.io/localForage/), which uses `IndexedDB`, `WebSQL`
-or `localStorage` to provide an asynchronous Storage API that can ideally store much more than the few Megabytes that
-are available in most browsers.
+LocalForage uses indexedDB or WebSQL if available to greatly increase the size of what can be stored. Just drop it in as a storage (only supported in the client):
+
+```ts
+import { isServer } from "solid-js/web";
+import { makePersisted } from "@solid-primtives/storage";
+import localforage from "localforage";
+
+const [state, setState] = makePersisted(createSignal(), {
+ storage: !isServer ? localforage : undefined,
+});
+```
+
+Keep in mind that it will only run on the client, so unless you have
+
+#### TauriStorage
+
+[Tauri](https://tauri.app) is a lightweight run-time for desktop (and soon also mobile) applications utilizing web front-end frameworks. While it supports `localStorage` and `sessionStorage`, it also has its own store plugin with the benefit of improved stability. To use it, install the required modules both on the side of JavaScript and Rust after setting up the project with the help of their command-line interface:
+
+```bash
+npm run tauri add store
+```
+
+Also, it requires a few permissions in `capabilities/default.json`:
+
+```js
+{
+ // other defaults
+ "permissions": [
+ // other permissions
+ "store:allow-get",
+ "store:allow-set",
+ "store:allow-delete",
+ "store:allow-keys",
+ "store:allow-clear"
+ ]
+}
+```
+
+Lastly, initialize the plugin in the setup:
+
+```rs
+fn main() {
+ tauri::Builder::default()
+ // initialize store plugin:
+ .plugin(tauri_plugin_store::Builder::new().build())
+ .run(tauri::generate_context!())
+ .expect("error while running tauri application");
+}
+```
+
+Once these preparations are finished, `tauriStorage(name?: string)` can be used as another storage option. To fallback to localStorage if the app does not run within tauri, you can check for `window.__TAURI_INTERNALS__`:
+
+```ts
+import { tauriStorage } from "@solid-primitives/storage/tauri";
+
+const storage = window.__TAURI_INTERNALS__ ? tauriStorage() : localStorage;
+```
+
+#### Object storage
+
+This package also provides a way to create a storage API wrapper for an object called `makeObjectStorage(object)`. This is especially useful as a server fallback if you want to store the data in your user session or database object:
+
+```ts
+const [state, setState] = createPersisted(createSignal(), {
+ storage: globalThis.localStorage ?? makeObjectStorage(session.userState),
+});
+```
#### Multiplexed storages
@@ -206,179 +289,6 @@ const customStorage = addWithOptionsMethod(storage_supporting_options);
const boundCustomStorage = customStorage.withOptions(myOptions);
```
----
-
-### Deprecated primitives:
-
-The previous implementation proved to be confusing and cumbersome for most people who just wanted to persist their
-signals and stores, so they are now deprecated and will soon be removed from this package.
-
-`createStorage` is meant to wrap any `localStorage`-like API to be as accessible as
-a [Solid Store](https://www.solidjs.com/docs/latest/api#createstore). The main differences are
-
-- that this store is persisted in whatever API is used,
-- that you can only use the topmost layer of the object and
-- that you have additional methods in an object as the third part of the returned tuple:
-
-```ts
-const [store, setStore, {
- remove: (key: string) => void;
- clear: () => void;
- toJSON: () => ({[key: string]: string });
-}]
-= createStorage({api: sessionStorage, prefix: 'my-app'});
-
-setStore('key', 'value');
-store.key; // 'value'
-```
-
-The props object support the following parameters:
-
-`api`
-: An array of or a single `localStorage`-like storage API; default will be `localStorage` if it exists; an empty array
-or no API will not throw an error, but only ever get `null` and not actually persist anything
-
-`prefix`
-: A string that will be prefixed every key inside the API on set and get operations
-
-`serializer / deserializer`
-: A set of function to filter the input and output; the `serializer` takes an arbitrary object and returns a string,
-e.g. `JSON.stringify`, whereas the `deserializer` takes a string and returns the requested object again.
-
-`options`
-: For APIs that support options as third argument in the `getItem` and `setItem` method (see helper
-type `StorageWithOptions`), you can add options they will receive on every operation.
-
----
-
-There are a number of convenience Methods primed with common storage APIs and our own version to use cookies:
-
-```ts
-createLocalStorage();
-createSessionStorage();
-createCookieStorage();
-```
-
----
-
-#### Asynchronous storage APIs
-
-In case you have APIs that persist data on the server or via `ServiceWorker` in
-a [`CookieStore`](https://wicg.github.io/cookie-store/#CookieStore), you can wrap them into an asynchronous
-storage (`AsyncStorage` or `AsyncStorageWithOptions` API) and use them with `createAsyncStorage`:
-
-```ts
-type CookieStoreOptions = {
- path: string;
- domain: string;
- expires: DOMTimeStamp;
- sameSite: "None" | "Lax" | "Strict"
-}
-const CookieStoreAPI: AsyncStorageWithOptions = {
- getItem: (key) => cookieStore.get(key),
- getAll: () => cookieStore.getAll(),
- setItem: (key: string, value: string, options: CookieStoreOptions = {}) => cookieStore.set({
- ...options, name, value
- }),
- removeItem: (key) => cookieStore.delete(key),
- clear: async () => {
- const all = await cookieStore.getAll();
- for (const key of all) {
- await cookieStore.delete(key);
- }
- },
- key: async (index: number) => {
- const all = await cookieStore.getAll();
- return Object.keys(all)[index];
- }
-}
-)
-;
-
-const [cookies, setCookie, {
- remove: (key: string) => void;
- clear: () => void;
- toJSON: () => ({[key: string]: string
-})
-;
-}]
-= createAsyncStorage({api: CookieStoreAPI, prefix: 'my-app', sync: false});
-
-await setStore('key', 'value');
-await store.key; // 'value'
-```
-
-It works exactly like a synchronous storage, with the exception that you have to `await` every single return value. Once
-the `CookieStore` API becomes more prevalent, we will integrate support out of the box.
-
-If you cannot use `document.cookie`, you can overwrite the entry point using the following tuple:
-
-```ts
-import {cookieStorage} from '@solid-primitives/storage';
-
-cookieStorage._cookies = [object
-:
-{
- [name
-:
- string
-]:
- CookieProxy
-}
-,
-name: string
-]
-;
-```
-
-If you need to abstract an API yourself, you can use a getter and a setter:
-
-```ts
-const CookieAbstraction = {
- get cookie() {
- return myCookieJar.toString()
- }
- set cookie(cookie) {
- const data = {};
- cookie.replace(/([^=]+)=(?:([^;]+);?)/g, (_, key, value) => {
- data[key] = value
- });
- myCookieJar.set(data);
- }
-}
-cookieStorage._cookies = [CookieAbstraction, 'cookie'];
-```
-
----
-
-`createStorageSignal` is meant for those cases when you only need to conveniently access a single value instead of full
-access to the storage API:
-
-```ts
-const [value, setValue] = createStorageSignal("value", { api: cookieStorage });
-
-setValue("value");
-value(); // 'value'
-```
-
-As a convenient additional method, you can also use `createCookieStorageSignal(key, initialValue, options)`.
-
----
-
-### Options
-
-The properties of your `createStorage`/`createAsyncStorage`/`createStorageSignal` props are:
-
-- `api`: the (synchronous or
- asynchronous) [Storage-like API](https://developer.mozilla.org/de/docs/Web/API/Web_Storage_API), default
- is `localStorage`
-- `deserializer` (optional): a `deserializer` or parser for the stored data
-- `serializer` (optional): a `serializer` or string converter for the stored data
-- `options` (optional): default options for the set-call of Storage-like API, if supported
-- `prefix` (optional): a prefix for the Storage keys
-- `sync` (optional): if set to
- false, [event synchronization](https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent) is disabled
-
## Demo
[Live Demo](https://primitives.solidjs.community/playground/storage) - [Sources](https://github.com/solidjs-community/solid-primitives/tree/main/packages/storage/dev)
diff --git a/packages/storage/package.json b/packages/storage/package.json
index a282e4bbe..8fe6d0473 100644
--- a/packages/storage/package.json
+++ b/packages/storage/package.json
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/storage",
- "version": "3.1.0",
+ "version": "4.2.1",
"description": "Primitive that provides reactive wrappers for storage access",
"author": "Alex Lohr ",
"contributors": [
@@ -18,13 +18,15 @@
"list": [
"makePersisted",
"cookieStorage",
+ "tauriStorage",
"multiplexStorage",
"storageSync",
"messageSync",
"wsSync",
"multiplexSync",
"addClearMethod",
- "addWithOptionsMethod"
+ "addWithOptionsMethod",
+ "makeObjectStorage"
],
"category": "Browser APIs"
},
@@ -34,18 +36,37 @@
"private": false,
"sideEffects": false,
"type": "module",
- "main": "./dist/index.cjs",
- "module": "./dist/index.js",
+ "main": "./dist/index/index.cjs",
+ "module": "./dist/index/index.js",
+ "types": "./dist/index/index.d.ts",
"browser": {},
- "types": "./dist/index.d.ts",
"exports": {
- "import": {
- "types": "./dist/index.d.ts",
- "default": "./dist/index.js"
+ ".": {
+ "import": {
+ "types": "./dist/index/index.d.ts",
+ "default": "./dist/index/index.js"
+ },
+ "require": {
+ "types": "./dist/index/index.d.cts",
+ "default": "./dist/index/index.cjs"
+ }
},
- "require": {
- "types": "./dist/index.d.cts",
- "default": "./dist/index.cjs"
+ "./tauri": {
+ "import": {
+ "types": "./dist/tauri/index.d.ts",
+ "default": "./dist/tauri/index.js"
+ },
+ "require": {
+ "types": "./dist/tauri/index.d.cts",
+ "default": "./dist/tauri/index.cjs"
+ }
+ }
+ },
+ "typesVersions": {
+ "*": {
+ "tauri": [
+ "./dist/tauri/index.d.ts"
+ ]
}
},
"scripts": {
@@ -66,10 +87,18 @@
"@solid-primitives/utils": "workspace:^"
},
"peerDependencies": {
+ "@tauri-apps/plugin-store": "*",
"solid-js": "^1.6.12"
},
+ "peerDependenciesMeta": {
+ "solid-start": {
+ "optional": true
+ },
+ "@tauri-apps/plugin-store": {
+ "optional": true
+ }
+ },
"devDependencies": {
"solid-js": "^1.8.15"
- },
- "typesVersions": {}
+ }
}
diff --git a/packages/storage/src/cookies.ts b/packages/storage/src/cookies.ts
index 40bcb269f..fc4a0ea8c 100644
--- a/packages/storage/src/cookies.ts
+++ b/packages/storage/src/cookies.ts
@@ -1,14 +1,15 @@
-import { isServer, getRequestEvent, type RequestEvent } from "solid-js/web";
-import { StorageProps, StorageSignalProps, StorageWithOptions } from "./types.js";
-import { addClearMethod, addWithOptionsMethod } from "./tools.js";
-import { createStorage, createStorageSignal } from "./storage.js";
+import { getRequestEvent, isServer, type RequestEvent } from "solid-js/web";
+import { SyncStorageWithOptions } from "./index.js";
+import { addWithOptionsMethod, addClearMethod } from "./tools.js";
-export type CookieOptions = CookieProperties & {
- getRequestHeaders?: () => Headers;
- getResponseHeaders?: () => Headers;
-};
+export type CookieOptions =
+ | (CookieProperties & {
+ getRequestHeaders?: () => Headers;
+ getResponseHeaders?: () => Headers;
+ })
+ | undefined;
-type CookieProperties = {
+type CookiePropertyTypes = {
domain?: string;
expires?: Date | number | String;
path?: string;
@@ -18,46 +19,48 @@ type CookieProperties = {
sameSite?: "None" | "Lax" | "Strict";
};
-const cookiePropertyKeys = [
- "domain",
- "expires",
- "path",
- "secure",
- "httpOnly",
- "maxAge",
- "sameSite",
-] as const;
+type CookieProperties = {
+ [key in keyof CookiePropertyTypes]: CookiePropertyTypes[key];
+};
+
+const cookiePropertyMap = {
+ domain: "Domain",
+ expires: "Expires",
+ path: "Path",
+ secure: "Secure",
+ httpOnly: "HttpOnly",
+ maxAge: "Max-Age",
+ sameSite: "SameSite",
+} as const;
function serializeCookieOptions(options?: CookieOptions) {
- if (!options) {
- return "";
- }
- let memo = "";
- for (const key in options) {
- if (!cookiePropertyKeys.includes(key as keyof CookieProperties)) continue;
+ if (!options) return "";
+ const result = Object.entries(options)
+ .map(([key, value]) => {
+ const serializedKey: string | undefined = cookiePropertyMap[key as keyof CookiePropertyTypes];
+ if (!serializedKey) return undefined;
+
+ if (value instanceof Date) return `${serializedKey}=${value.toUTCString()}`;
+ if (typeof value === "boolean") return value ? `${serializedKey}` : undefined;
+ return `${serializedKey}=${value}`;
+ })
+ .filter(v => !!v);
- const value = options[key as keyof CookieProperties];
- memo +=
- value instanceof Date
- ? `; ${key}=${value.toUTCString()}`
- : typeof value === "boolean"
- ? `; ${key}`
- : `; ${key}=${value}`;
- }
- return memo;
+ return result.length != 0 ? `; ${result.join("; ")}` : "";
}
function deserializeCookieOptions(cookie: string, key: string) {
- return cookie.match(`(^|;)\\s*${key}\\s*=\\s*([^;]+)`)?.pop() ?? null;
+ const found = cookie.match(`(^|;)\\s*${key}\\s*=\\s*([^;]+)`)?.pop();
+ return found != null ? decodeURIComponent(found) : null;
}
const getRequestHeaders = isServer
- ? () => getRequestEvent()?.request?.headers || new Headers()
+ ? () => getRequestEvent()?.request.headers || new Headers()
: () => new Headers();
const getResponseHeaders = isServer
? () =>
- (getRequestEvent() as RequestEvent & { response: Response })?.response?.headers ||
- new Headers()
+ (getRequestEvent() as (RequestEvent & { response: Response }) | undefined)?.response
+ .headers || new Headers()
: () => new Headers();
/**
@@ -79,7 +82,7 @@ const getResponseHeaders = isServer
* ```
* Also, you can use its _read and _write properties to change reading and writing
*/
-export const cookieStorage: StorageWithOptions = addWithOptionsMethod(
+export const cookieStorage: SyncStorageWithOptions = addWithOptionsMethod(
addClearMethod({
_read: isServer
? (options?: CookieOptions) => {
@@ -101,14 +104,15 @@ export const cookieStorage: StorageWithOptions = addWithOptionsMe
_write: isServer
? (key: string, value: string, options?: CookieOptions) => {
const responseHeaders = getResponseHeaders();
+ const currentCookies =
+ responseHeaders
+ .get("Set-Cookie")
+ ?.split(", ")
+ .filter(cookie => cookie && !cookie.startsWith(`${key}=`)) ?? [];
responseHeaders.set(
"Set-Cookie",
- (responseHeaders.get("Set-Cookie") || "").replace(
- new RegExp(`(?:^|, )${key}=[^,]+`, "g"),
- "",
- ),
+ [...currentCookies, `${key}=${value}${serializeCookieOptions(options)}`].join(", "),
);
- responseHeaders.append("Set-Cookie", `${key}=${value}${serializeCookieOptions(options)}`);
}
: (key: string, value: string, options?: CookieOptions) => {
document.cookie = `${key}=${value}${serializeCookieOptions(options)}`;
@@ -116,10 +120,17 @@ export const cookieStorage: StorageWithOptions = addWithOptionsMe
getItem: (key: string, options?: CookieOptions) =>
deserializeCookieOptions(cookieStorage._read(options), key),
setItem: (key: string, value: string, options?: CookieOptions) => {
- cookieStorage._write(key, value, options);
+ cookieStorage._write(
+ key,
+ value.replace(/[\u00c0-\uffff\&;]/g, c => encodeURIComponent(c)),
+ options,
+ );
},
removeItem: (key: string, options?: CookieOptions) => {
- cookieStorage._write(key, "deleted", { ...options, expires: new Date(0) });
+ cookieStorage._write(key, "deleted", {
+ ...options,
+ expires: new Date(0),
+ });
},
key: (index: number, options?: CookieOptions) => {
let key: string | null = null;
@@ -147,25 +158,3 @@ export const cookieStorage: StorageWithOptions = addWithOptionsMe
},
}),
);
-
-/**
- * creates a reactive store but bound to document.cookie
- * @deprecated in favor of makePersisted
- */
-export const createCookieStorage = >(
- props?: Omit, "api">,
-) => createStorage({ ...props, api: cookieStorage } as any);
-
-/**
- * creates a reactive signal, but bound to document.cookie
- * @deprecated in favor of makePersisted
- */
-export const createCookieStorageSignal = <
- T,
- O = CookieOptions,
- A = StorageWithOptions,
->(
- key: string,
- initialValue?: T,
- props?: Omit, "api">,
-) => createStorageSignal(key, initialValue, { ...props, api: cookieStorage } as any);
diff --git a/packages/storage/src/index.ts b/packages/storage/src/index.ts
index 5faee099b..31d2d3094 100644
--- a/packages/storage/src/index.ts
+++ b/packages/storage/src/index.ts
@@ -1,33 +1,18 @@
-export type {
- StorageWithOptions,
- StorageDeserializer,
- StorageSerializer,
- StringStorageProps,
- AnyStorageProps,
- StorageProps,
- StorageObject,
- StorageSetter,
- AsyncStorage,
- AsyncStorageWithOptions,
- AsyncStorageObject,
- AsyncStorageSetter,
- StorageSignalProps,
-} from "./types.js";
-
+import { type CookieOptions, cookieStorage } from "./cookies.js";
import {
- createStorage,
- createAsyncStorage,
- createStorageSignal,
- createLocalStorage,
- createSessionStorage,
-} from "./storage.js";
-import { type CookieOptions, cookieStorage, createCookieStorage } from "./cookies.js";
-import { addClearMethod, addWithOptionsMethod, multiplexStorage } from "./tools.js";
+ addClearMethod,
+ addWithOptionsMethod,
+ multiplexStorage,
+ makeObjectStorage,
+} from "./tools.js";
import {
+ type SyncStorage,
+ type SyncStorageWithOptions,
+ type AsyncStorage,
+ type AsyncStorageWithOptions,
type PersistenceOptions,
type PersistenceSyncAPI,
type PersistenceSyncData,
- type PersistenceBaseOptions,
type PersistenceSyncCallback,
makePersisted,
multiplexSync,
@@ -36,18 +21,16 @@ import {
wsSync,
} from "./persisted.js";
export {
- createStorage,
- createAsyncStorage,
- createStorageSignal,
- createLocalStorage,
- createCookieStorage,
- createSessionStorage,
type CookieOptions,
cookieStorage,
addClearMethod,
addWithOptionsMethod,
multiplexStorage,
- type PersistenceBaseOptions,
+ makeObjectStorage,
+ type SyncStorage,
+ type SyncStorageWithOptions,
+ type AsyncStorage,
+ type AsyncStorageWithOptions,
type PersistenceOptions,
type PersistenceSyncCallback,
type PersistenceSyncData,
diff --git a/packages/storage/src/persisted.ts b/packages/storage/src/persisted.ts
index f01aef979..a8f26a1ba 100644
--- a/packages/storage/src/persisted.ts
+++ b/packages/storage/src/persisted.ts
@@ -1,9 +1,47 @@
import type { Accessor, Setter, Signal } from "solid-js";
import { createUniqueId, untrack } from "solid-js";
-import { isServer } from "solid-js/web";
+import { isServer, isDev } from "solid-js/web";
import type { SetStoreFunction, Store } from "solid-js/store";
import { reconcile } from "solid-js/store";
-import type { AsyncStorage, AsyncStorageWithOptions, StorageWithOptions } from "./types.js";
+
+export type SyncStorage = {
+ getItem: (key: string) => string | null;
+ setItem: (key: string, value: string) => void;
+ removeItem: (key: string) => void;
+ [key: string]: any;
+};
+export type AsyncStorage = {
+ getItem: (key: string) => Promise;
+ setItem: (key: string, value: string) => Promise;
+ removeItem: (key: string) => Promise;
+ [key: string]: any;
+};
+export type SyncStorageWithOptions = undefined extends O
+ ? {
+ getItem: (key: string, options?: O) => string | null;
+ setItem: (key: string, value: string, options?: O) => void;
+ removeItem: (key: string, options?: O) => void;
+ [key: string]: any;
+ }
+ : {
+ getItem: (key: string, options: O) => string | null;
+ setItem: (key: string, value: string, options: O) => void;
+ removeItem: (key: string, options: O) => void;
+ [key: string]: any;
+ };
+export type AsyncStorageWithOptions = undefined extends O
+ ? {
+ getItem: (key: string, options?: O) => Promise;
+ setItem: (key: string, value: string, options?: O) => Promise;
+ removeItem: (key: string, options?: O) => Promise;
+ [key: string]: any;
+ }
+ : {
+ getItem: (key: string, options: O) => Promise;
+ setItem: (key: string, value: string, options: O) => Promise;
+ removeItem: (key: string, options: O) => Promise;
+ [key: string]: any;
+ };
export type PersistenceSyncData = {
key: string;
@@ -20,71 +58,29 @@ export type PersistenceSyncAPI = [
update: (key: string, value: string | null | undefined) => void,
];
-export type PersistenceBaseOptions = {
+export type PersistenceOptions | undefined> = {
name?: string;
serialize?: (data: T) => string;
deserialize?: (data: string) => T;
sync?: PersistenceSyncAPI;
-};
+} & (undefined extends O
+ ? { storage?: SyncStorage | AsyncStorage }
+ : {
+ storage: SyncStorageWithOptions | AsyncStorageWithOptions;
+ storageOptions?: O;
+ });
-export type PersistenceOptions> = PersistenceBaseOptions &
- (
- | {
- storage: StorageWithOptions | AsyncStorageWithOptions;
- storageOptions: O;
- }
- | { storage?: Storage | AsyncStorage }
- );
+export type SignalInput = Signal | [Store, SetStoreFunction];
-/**
- * Persists a signal, store or similar API
- * ```ts
- * const [getter, setter] = makePersisted(createSignal("data"), options);
- * const options = {
- * storage: cookieStorage, // can be any synchronous or asynchronous storage
- * storageOptions: { ... }, // for storages with options, otherwise not needed
- * name: "solid-data", // optional
- * serialize: (value: string) => value, // optional
- * deserialize: (data: string) => data, // optional
- * };
- * ```
- * Can be used with `createSignal` or `createStore`. The initial value from the storage will overwrite the initial
- * value of the signal or store unless overwritten. Overwriting a signal with `null` or `undefined` will remove the
- * item from the storage.
- *
- * @param {Signal | [get: Store, set: SetStoreFunction]} signal - The signal or store to be persisted.
- * @param {PersistenceOptions} options - The options for persistence.
- * @returns {Signal | [get: Store, set: SetStoreFunction]} - The persisted signal or store.
- */
-export function makePersisted(
- signal: [Accessor, Setter],
- options?: PersistenceOptions,
-): [Accessor, Setter];
+export type SignalType =
+ S extends Signal ? T : S extends [Store, SetStoreFunction] ? T : never;
-/**
- * Persists a signal, store or similar API
- * ```ts
- * const [getter, setter] = makePersisted(createSignal("data"), options);
- * const options = {
- * storage: cookieStorage, // can be any synchronous or asynchronous storage
- * storageOptions: { ... }, // for storages with options, otherwise not needed
- * name: "solid-data", // optional
- * serialize: (value: string) => value, // optional
- * deserialize: (data: string) => data, // optional
- * };
- * ```
- * Can be used with `createSignal` or `createStore`. The initial value from the storage will overwrite the initial
- * value of the signal or store unless overwritten. Overwriting a signal with `null` or `undefined` will remove the
- * item from the storage.
- *
- * @param {Signal | [get: Store, set: SetStoreFunction]} signal - The signal or store to be persisted.
- * @param {PersistenceOptions} options - The options for persistence.
- * @returns {Signal | [get: Store, set: SetStoreFunction]} - The persisted signal or store.
- */
-export function makePersisted>(
- signal: Signal