@friendofsvelte/state 0.0.5 → 0.0.6

package/README.md

@@ -19,78 +19,65 @@ npm install @friendofsvelte/state
 
 ## Quick Start
 
-1. Define your types in your app.d.ts:
+1. Define your state using `PersistentState`:
 
 ```typescript
-declare global {
-  interface PodTypeRegistry {
-    layout: {
-      bg: string;
-    };
-    userSettings: {
-      theme: 'light' | 'dark';
-      fontSize: number;
-    };
-  }
-}
+// new.svelte.ts / js
+import { PersistentState } from '@friendofsvelte/state';
 
-export {};
+export const box = new PersistentState('box', {
+  color: '#ff3e00',
+  dimensions: [100, 100]
+}, 'sessionStorage');
 ```
 
 2. Use in your components:
 
 ```svelte
 <script lang="ts">
-  import { pod } from '@friendofsvelte/state';
-  
-  // Initialize with value
-  let app = pod('layout', 'localStorage', {
-    bg: 'lightblue'
-  });
-  
-  // Or use existing value
-  let settings = pod('userSettings', 'sessionStorage');
+  import { box } from '$lib/new.svelte';
+
+  const listColors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'brown'];
+
+  function switchNextColor() {
+    const currentIndex = listColors.indexOf(box.current.color);
+    const nextIndex = currentIndex + 1;
+    if (nextIndex >= listColors.length) {
+      box.current.color = listColors[0];
+    } else {
+      box.current.color = listColors[nextIndex];
+    }
+  }
 </script>
 
-<div style="background-color: {app.bg}">
-  <!-- Your content -->
+<div
+  style="background-color: {box.current.color}; width: 100px; height: 100px; color: gray; text-align: center;"
+  class="m-2 rounded-2xl"
+>
+  {box.current.color}
 </div>
+
+<button onclick={switchNextColor} class="bg-gray-700 m-2 px-3 rounded-2xl text-gray-200">
+  Change color
+</button>
 ```
 
 ## API Reference
 
-### `pod<K>(key: K, storage: StorageType, context?: GetTypeFromRegistry<K>, override?: boolean)`
+### `PersistentState<T>(key: string, initial?: T, storageType: StorageType = 'localStorage')`
 
 Creates or retrieves a persistent state container.
 
 Parameters:
 - `key`: Unique identifier for the state container
-- `storage`: Storage type - 'localStorage' or 'sessionStorage'
-- `context`: (Optional) Initial state value
-- If `override` is `true`, it writes the `context` to storage regardless of the current stored value.
-- If `override` is `false` and there is no stored value, it writes the `context` to storage.
-- If `override` is `false` and there is a stored value, it uses the stored value instead of the `context`.
-
-The `pod` function passes the `override` parameter to the `track` function.
+- `initial`: (Optional) Initial state value
+- `storageType`: (Optional) Storage type - 'localStorage' or 'sessionStorage' (default: 'localStorage')
 
 Returns:
-- A reactive state object of type `GetTypeFromRegistry<K>`
+- A reactive state object of type `T`
 
-## Type Safety
+> Inspired by: Rich-Harris' [local-storage-test](https://github.com/Rich-Harris/local-storage-test/blob/main/src/lib/storage.svelte.ts)
 
-Pod State provides complete type safety through TypeScript. The global `PodTypeRegistry` interface allows you to define types for all your state containers in one place:
-
-```typescript
-interface PodTypeRegistry {
-  layout: {
-    bg: string;
-  };
-  userSettings: {
-    theme: 'light' | 'dark';
-    fontSize: number;
-  };
-}
-```
 
 ## Examples
 
@@ -98,35 +85,28 @@ interface PodTypeRegistry {
 
 ```svelte
 <script lang="ts">
-  import { pod } from '@friendofsvelte/state';
-  
-  let app = pod('layout', 'localStorage', {
-    bg: 'lightblue'
-  });
-</script>
+  import { PersistentState } from '@friendofsvelte/state';
 
-<button onclick={() => app.bg = 'lightgreen'}>
-  Change Background
-</button>
-```
-
-### Shared State
+  const box = new PersistentState('box', {
+    color: '#ff3e00',
+    dimensions: [100, 100]
+  }, 'sessionStorage');
 
-```svelte
-<!-- ComponentA.svelte -->
-<script>
-  import { pod } from '@friendofsvelte/state';
-  let settings = pod('userSettings', 'sessionStorage');
+  function switchNextColor() {
+    const colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'brown'];
+    const currentIndex = colors.indexOf(box.current.color);
+    box.current.color = colors[(currentIndex + 1) % colors.length];
+  }
 </script>
 
-<!-- ComponentB.svelte -->
-<script>
-  import { pod } from '@friendofsvelte/state';
-  let settings = pod('userSettings');
-  // Will automatically sync with ComponentA
-</script>
-```
+<div style="background-color: {box.current.color}; width: 100px; height: 100px; color: gray; text-align: center;" class="m-2 rounded-2xl">
+  {box.current.color}
+</div>
 
+<button onclick={switchNextColor} class="bg-gray-700 m-2 px-3 rounded-2xl text-gray-200">
+  Change color
+</button>
+```
 
 ## Contributing
 
@@ -134,4 +114,4 @@ Contributions are welcome! Please feel free to submit a [Pull Request](https://g
 
 ## License
 
-MIT License - see LICENSE file for details
+MIT License - see LICENSE file for details

package/dist/index.d.ts

@@ -1 +1 @@
-export { pod } from './state.svelte';
+export { PersistentState } from './storage.svelte.js';

package/dist/index.js

@@ -1,2 +1,2 @@
 // Reexport your entry components here
-export { pod } from './state.svelte';
+export { PersistentState } from './storage.svelte.js';

package/dist/new.svelte.d.ts

@@ -0,0 +1,5 @@
+import { PersistentState } from "./storage.svelte.js";
+export declare const box: PersistentState<{
+    color: string;
+    dimensions: number[];
+}>;

package/dist/new.svelte.js

@@ -0,0 +1,5 @@
+import { PersistentState } from "./storage.svelte.js";
+export const box = new PersistentState('box', {
+    color: '#ff3e00',
+    dimensions: [100, 100]
+}, 'sessionStorage');

package/dist/storage.svelte.d.ts

@@ -0,0 +1,7 @@
+export type StorageType = 'localStorage' | 'sessionStorage';
+export declare class PersistentState<T> {
+    #private;
+    constructor(key: string, initial?: T, storageType?: StorageType);
+    get current(): any;
+    set current(value: any);
+}

package/dist/storage.svelte.js

@@ -0,0 +1,80 @@
+// See our inspiration: https://github.com/Rich-Harris/local-storage-test/blob/main/src/lib/storage.svelte.ts
+import { tick } from 'svelte';
+export class PersistentState {
+    #key;
+    #version = $state(0);
+    #listeners = 0;
+    #value;
+    #storage;
+    #handler = (e) => {
+        if (e.storageArea !== this.#storage)
+            return;
+        if (e.key !== this.#key)
+            return;
+        this.#version += 1;
+    };
+    constructor(key, initial, storageType = 'localStorage') {
+        this.#key = key;
+        this.#value = initial;
+        this.#storage = storageType === 'localStorage' ? localStorage : sessionStorage;
+        if (typeof this.#storage !== 'undefined') {
+            if (this.#storage.getItem(key) === null) {
+                this.#storage.setItem(key, JSON.stringify(initial));
+            }
+        }
+    }
+    get current() {
+        this.#version;
+        const root = typeof this.#storage !== 'undefined'
+            ? JSON.parse(this.#storage.getItem(this.#key))
+            : this.#value;
+        const proxies = new WeakMap();
+        const proxy = (value) => {
+            if (typeof value !== 'object' || value === null) {
+                return value;
+            }
+            let p = proxies.get(value);
+            if (!p) {
+                p = new Proxy(value, {
+                    get: (target, property) => {
+                        this.#version;
+                        return proxy(Reflect.get(target, property));
+                    },
+                    set: (target, property, value) => {
+                        this.#version += 1;
+                        Reflect.set(target, property, value);
+                        if (typeof this.#storage !== 'undefined') {
+                            this.#storage.setItem(this.#key, JSON.stringify(root));
+                        }
+                        return true;
+                    }
+                });
+                proxies.set(value, p);
+            }
+            return p;
+        };
+        if ($effect.tracking()) {
+            $effect(() => {
+                if (this.#listeners === 0) {
+                    window.addEventListener('storage', this.#handler);
+                }
+                this.#listeners += 1;
+                return () => {
+                    tick().then(() => {
+                        this.#listeners -= 1;
+                        if (this.#listeners === 0) {
+                            window.removeEventListener('storage', this.#handler);
+                        }
+                    });
+                };
+            });
+        }
+        return proxy(root);
+    }
+    set current(value) {
+        if (typeof this.#storage !== 'undefined') {
+            this.#storage.setItem(this.#key, JSON.stringify(value));
+        }
+        this.#version += 1;
+    }
+}

package/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "@friendofsvelte/state",
-	"version": "0.0.5",
+	"description": "Persistent Svelte 5 State, localStorage & sessionStorage",
+	"version": "0.0.6",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/state.svelte.d.ts

@@ -1,18 +0,0 @@
-type StorageType = 'localStorage' | 'sessionStorage';
-type TypeRegistry = {
-    [K in PropertyKey]: unknown;
-};
-declare global {
-    interface PodTypeRegistry extends TypeRegistry {
-    }
-}
-type GetTypeFromRegistry<K extends keyof PodTypeRegistry> = PodTypeRegistry[K] extends never ? unknown : PodTypeRegistry[K];
-/**
- * Get a persistent state from storage, or initialize with an optional context.
- * @param key - The key to store the state.
- * @param storage - The storage type to use.
- * @param context - The initial state or override.
- * @param override - Whether to override the stored value with the provided context.
- */
-export declare function pod<K extends keyof PodTypeRegistry>(key: K, storage: StorageType, context?: GetTypeFromRegistry<K>, override?: boolean): GetTypeFromRegistry<K>;
-export {};

package/dist/state.svelte.js

@@ -1,47 +0,0 @@
-import { getContext, setContext, untrack } from 'svelte';
-const EMPTY = Symbol('___empty____');
-function makeContextKey(key, storage) {
-    return `${String(key)}__${storage}__pod`;
-}
-function track(key, storage, context, override = false) {
-    const contextKey = makeContextKey(key, storage);
-    if (context === EMPTY) {
-        return getContext(contextKey);
-    }
-    let state = $state(context);
-    if (typeof window !== 'undefined') {
-        const storedValue = untrack(() => window[storage].getItem(String(key)));
-        if (storedValue && !override) {
-            try {
-                state = JSON.parse(storedValue);
-            }
-            catch {
-                state = {};
-            }
-        }
-        else if (override || !storedValue) {
-            state = context ?? {};
-            const json = JSON.stringify($state.snapshot(state));
-            window[storage].setItem(String(key), json);
-        }
-        if (context !== EMPTY) {
-            $effect.pre(() => {
-                const json = JSON.stringify($state.snapshot(state));
-                window[storage].setItem(String(key), json);
-            });
-        }
-    }
-    return setContext(contextKey, state);
-}
-/**
- * Get a persistent state from storage, or initialize with an optional context.
- * @param key - The key to store the state.
- * @param storage - The storage type to use.
- * @param context - The initial state or override.
- * @param override - Whether to override the stored value with the provided context.
- */
-export function pod(key, storage, 
-// @ts-expect-error: To allow the context to be optional
-context = EMPTY, override = false) {
-    return track(key, storage, context, override);
-}