@friendofsvelte/state 0.0.6 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Friend Of Svelte
+
+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.

package/README.md

@@ -25,40 +25,45 @@ npm install @friendofsvelte/state
 // new.svelte.ts / js
 import { PersistentState } from '@friendofsvelte/state';
 
-export const box = new PersistentState('box', {
-  color: '#ff3e00',
-  dimensions: [100, 100]
-}, 'sessionStorage');
+export const box = new PersistentState(
+	'box',
+	{
+		color: '#ff3e00',
+		dimensions: [100, 100]
+	},
+	'sessionStorage'
+);
 ```
 
 2. Use in your components:
 
 ```svelte
 <script lang="ts">
-  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];
-    }
-  }
+	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: {box.current.color}; width: 100px; height: 100px; color: gray; text-align: center;"
-  class="m-2 rounded-2xl"
+	style="background-color: {box.current
+		.color}; width: 100px; height: 100px; color: gray; text-align: center;"
+	class="m-2 rounded-2xl"
 >
-  {box.current.color}
+	{box.current.color}
 </div>
 
-<button onclick={switchNextColor} class="bg-gray-700 m-2 px-3 rounded-2xl text-gray-200">
-  Change color
+<button onclick={switchNextColor} class="m-2 rounded-2xl bg-gray-700 px-3 text-gray-200">
+	Change color
 </button>
 ```
 
@@ -69,15 +74,16 @@ export const box = new PersistentState('box', {
 Creates or retrieves a persistent state container.
 
 Parameters:
+
 - `key`: Unique identifier for the state container
 - `initial`: (Optional) Initial state value
 - `storageType`: (Optional) Storage type - 'localStorage' or 'sessionStorage' (default: 'localStorage')
 
 Returns:
-- A reactive state object of type `T`
 
-> Inspired by: Rich-Harris' [local-storage-test](https://github.com/Rich-Harris/local-storage-test/blob/main/src/lib/storage.svelte.ts)
+- A reactive state object of type `T`
 
+> Based on, Rich-Harris' [local-storage-test](https://github.com/Rich-Harris/local-storage-test/blob/main/src/lib/storage.svelte.ts)
 
 ## Examples
 
@@ -85,26 +91,34 @@ Returns:
 
 ```svelte
 <script lang="ts">
-  import { PersistentState } from '@friendofsvelte/state';
-
-  const box = new PersistentState('box', {
-    color: '#ff3e00',
-    dimensions: [100, 100]
-  }, '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];
-  }
+	import { PersistentState } from '@friendofsvelte/state';
+
+	const box = new PersistentState(
+		'box',
+		{
+			color: '#ff3e00',
+			dimensions: [100, 100]
+		},
+		'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>
 
-<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
+	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 onclick={switchNextColor} class="m-2 rounded-2xl bg-gray-700 px-3 text-gray-200">
+	Change color
 </button>
 ```
 

package/dist/new.svelte.d.ts

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

package/dist/new.svelte.js

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

package/dist/storage.svelte.d.ts

@@ -2,6 +2,6 @@ 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);
+    get current(): T;
+    set current(value: T);
 }

package/dist/storage.svelte.js

@@ -1,4 +1,4 @@
-// See our inspiration: https://github.com/Rich-Harris/local-storage-test/blob/main/src/lib/storage.svelte.ts
+// Based on: https://github.com/Rich-Harris/local-storage-test/blob/main/src/lib/storage.svelte.ts
 import { tick } from 'svelte';
 export class PersistentState {
     #key;
@@ -14,20 +14,43 @@ export class PersistentState {
         this.#version += 1;
     };
     constructor(key, initial, storageType = 'localStorage') {
+        if (!key) {
+            throw new Error('PersistentState: key must be a non-empty string');
+        }
         this.#key = key;
         this.#value = initial;
-        this.#storage = storageType === 'localStorage' ? localStorage : sessionStorage;
+        if (storageType === 'localStorage' && typeof localStorage !== 'undefined') {
+            this.#storage = localStorage;
+        }
+        else if (storageType === 'sessionStorage' && typeof sessionStorage !== 'undefined') {
+            this.#storage = sessionStorage;
+        }
         if (typeof this.#storage !== 'undefined') {
             if (this.#storage.getItem(key) === null) {
-                this.#storage.setItem(key, JSON.stringify(initial));
+                try {
+                    this.#storage.setItem(key, JSON.stringify(initial));
+                }
+                catch {
+                    // Storage full or unavailable — continue with in-memory fallback
+                }
             }
         }
     }
     get current() {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         this.#version;
-        const root = typeof this.#storage !== 'undefined'
-            ? JSON.parse(this.#storage.getItem(this.#key))
-            : this.#value;
+        let root;
+        if (typeof this.#storage !== 'undefined') {
+            try {
+                root = JSON.parse(this.#storage.getItem(this.#key));
+            }
+            catch {
+                root = this.#value;
+            }
+        }
+        else {
+            root = this.#value;
+        }
         const proxies = new WeakMap();
         const proxy = (value) => {
             if (typeof value !== 'object' || value === null) {
@@ -37,6 +60,7 @@ export class PersistentState {
             if (!p) {
                 p = new Proxy(value, {
                     get: (target, property) => {
+                        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
                         this.#version;
                         return proxy(Reflect.get(target, property));
                     },
@@ -44,7 +68,12 @@ export class PersistentState {
                         this.#version += 1;
                         Reflect.set(target, property, value);
                         if (typeof this.#storage !== 'undefined') {
-                            this.#storage.setItem(this.#key, JSON.stringify(root));
+                            try {
+                                this.#storage.setItem(this.#key, JSON.stringify(root));
+                            }
+                            catch {
+                                // Storage full or unavailable
+                            }
                         }
                         return true;
                     }
@@ -73,7 +102,12 @@ export class PersistentState {
     }
     set current(value) {
         if (typeof this.#storage !== 'undefined') {
-            this.#storage.setItem(this.#key, JSON.stringify(value));
+            try {
+                this.#storage.setItem(this.#key, JSON.stringify(value));
+            }
+            catch {
+                // Storage full or unavailable
+            }
         }
         this.#version += 1;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@friendofsvelte/state",
 	"description": "Persistent Svelte 5 State, localStorage & sessionStorage",
-	"version": "0.0.6",
+	"version": "0.2.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -36,6 +36,7 @@
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
+		"@changesets/cli": "^2.29.8",
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
 		"@sveltejs/adapter-auto": "^4.0.0",
@@ -62,8 +63,9 @@
 		"vite": "^6.0.0",
 		"vitest": "^3.0.0"
 	},
+	"license": "MIT",
 	"repository": {
-			"type": "git",
-			"url": "https://github.com/friendofsvelte/state.git"
+		"type": "git",
+		"url": "git+https://github.com/friendofsvelte/state.git"
 	}
 }