react-wire-persisted 2.0.0 → 2.1.0

package/package.json

@@ -1,80 +1,87 @@
 {
-  "name": "react-wire-persisted",
-  "version": "2.0.0",
-  "author": "Wesley Bliss <wesley.bliss@gmail.com>",
-  "license": "MIT",
-  "type": "module",
-  "main": "./dist/react-wire-persisted.umd.cjs",
-  "module": "./dist/index.js",
-  "files": [
-    "src",
-    "dist",
-    "client.js",
-    "client.mjs",
-    "nextjs.js"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/react-wire-persisted.js",
-      "require": "./dist/react-wire-persisted.umd.cjs"
+    "name": "react-wire-persisted",
+    "version": "2.1.0",
+    "author": "Wesley Bliss <wesley.bliss@gmail.com>",
+    "license": "MIT",
+    "type": "module",
+    "main": "./dist/react-wire-persisted.umd.cjs",
+    "module": "./dist/index.js",
+    "files": [
+        "src",
+        "dist",
+        "client.js",
+        "client.mjs",
+        "nextjs.js"
+    ],
+    "exports": {
+        ".": {
+            "import": "./dist/react-wire-persisted.js",
+            "require": "./dist/react-wire-persisted.umd.cjs"
+        },
+        "./client": {
+            "import": "./client.mjs",
+            "require": "./client.js"
+        },
+        "./nextjs": {
+            "import": "./nextjs.js",
+            "require": "./nextjs.js"
+        }
+    },
+    "scripts": {
+        "dev": "vite --host --config config/vite.config.development.js",
+        "build": "vite build --config config/vite.config.production.js && cp dist/react-wire-persisted.js dist/index.js",
+        "lint": "biome check --write",
+        "lint:format": "biome format --write",
+        "lint:lint": "biome lint --write",
+        "test:unit": "NODE_ENV=test vitest run",
+        "test:unit:only": "NODE_ENV=test vitest run -t ",
+        "test:unit:coverage": "NODE_ENV=test vitest run --no-color --reporter=junit --coverage --outputFile=coverage/report.xml",
+        "yalc": "pnpm build && yalc push"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "^2.3.14",
+        "@forminator/react-wire": "^0.7.0",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/jest-dom": "^6.8.0",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
+        "@vitejs/plugin-react": "^5.0.3",
+        "@vitest/coverage-v8": "^4.0.18",
+        "browserslist": "^4.26.2",
+        "dotenv": "^17.2.2",
+        "esbuild": "^0.25.10",
+        "jest": "^30.1.3",
+        "jest-environment-jsdom": "^30.1.2",
+        "np": "^10.2.0",
+        "react": "^19.1.1",
+        "react-dom": "^19.1.1",
+        "rollup-plugin-inject-process-env": "^1.3.1",
+        "snapshot-diff": "^0.10.0",
+        "vite": "7.3.1",
+        "vite-jest": "^0.1.4",
+        "vitest": "^4.0.18"
     },
-    "./client": {
-      "import": "./client.mjs",
-      "require": "./client.js"
+    "peerDependencies": {
+        "@forminator/react-wire": "^0.7.0",
+        "react": "^18.3.1 || ^19.0.0",
+        "react-dom": "^18.3.1 || ^19.0.0"
     },
-    "./nextjs": {
-      "import": "./nextjs.js",
-      "require": "./nextjs.js"
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version, not dead"
+        ]
+    },
+    "pnpm": {
+        "neverBuiltDependencies": []
+    },
+    "dependencies": {
+        "react-wire-persisted": "^2.0.1"
     }
-  },
-  "scripts": {
-    "dev": "vite --host --config config/vite.config.development.js",
-    "build": "vite build --config config/vite.config.production.js && cp dist/react-wire-persisted.js dist/index.js",
-    "test:unit": "NODE_ENV=test vitest run",
-    "test:unit:only": "NODE_ENV=test vitest run -t ",
-    "test:unit:coverage": "NODE_ENV=test vitest run --no-color --reporter=junit --coverage --outputFile=coverage/report.xml",
-    "yalc": "pnpm build && yalc push"
-  },
-  "devDependencies": {
-    "@forminator/react-wire": "^0.7.0",
-    "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@vitejs/plugin-react": "^5.0.3",
-    "@vitest/coverage-c8": "^0.33.0",
-    "browserslist": "^4.26.2",
-    "c8": "^10.1.3",
-    "dotenv": "^17.2.2",
-    "esbuild": "^0.25.10",
-    "jest": "^30.1.3",
-    "jest-environment-jsdom": "^30.1.2",
-    "np": "^10.2.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "rollup-plugin-inject-process-env": "^1.3.1",
-    "snapshot-diff": "^0.10.0",
-    "vite": "^7.1.7",
-    "vite-jest": "^0.1.4",
-    "vitest": "^3.2.4"
-  },
-  "peerDependencies": {
-    "@forminator/react-wire": "^0.5.0-alpha.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "pnpm": {
-    "neverBuiltDependencies": []
-  }
 }

package/src/components/HydrationProvider.js

@@ -1,8 +1,8 @@
 'use client'
 
 import { useEffect, useRef } from 'react'
-import { upgradeStorage } from '../react-wire-persisted'
-import { getIsClient, getHasHydrated } from '../utils'
+import { upgradeStorage } from '../react-wire-persisted.js'
+import { getHasHydrated, getIsClient } from '../utils/index.js'
 
 /**
  * A Next.js App Router compatible component that handles automatic storage upgrade
@@ -42,4 +42,4 @@ export function HydrationProvider({ children, onUpgrade, autoUpgrade = true }) {
     }, [autoUpgrade, onUpgrade])
 
     return children
-}
+}

package/src/components/HydrationProvider.jsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useHydration } from '../hooks/useHydration'
+import { useHydration } from '../hooks/useHydration.js'
 
 /**
  * A Next.js App Router compatible component that handles automatic storage upgrade
@@ -14,4 +14,4 @@ import { useHydration } from '../hooks/useHydration'
 export function HydrationProvider({ children, onUpgrade, autoUpgrade = true }) {
     useHydration({ onUpgrade, autoUpgrade })
     return children
-}
+}

package/src/components/index.js

@@ -1 +1 @@
-export { HydrationProvider } from './HydrationProvider.js'
+export { HydrationProvider } from './HydrationProvider.js'

package/src/hooks/useHydration.js

@@ -1,8 +1,8 @@
 'use client'
 
 import { useEffect, useRef } from 'react'
-import { upgradeStorage } from '../react-wire-persisted'
-import { getIsClient, getHasHydrated } from '../utils'
+import { upgradeStorage } from '../react-wire-persisted.js'
+import { getHasHydrated, getIsClient } from '../utils/index.js'
 
 /**
  * React hook that handles automatic storage upgrade after hydration
@@ -13,46 +13,34 @@ import { getIsClient, getHasHydrated } from '../utils'
  * @param {Function} options.onUpgrade Callback called when storage is upgraded
  */
 export const useHydration = (options = {}) => {
-    
-    const {
-        autoUpgrade = true,
-        onUpgrade
-    } = options
-    
+    const { autoUpgrade = true, onUpgrade } = options
+
     const hasUpgraded = useRef(false)
-    
+
     useEffect(() => {
-        
-        if (!autoUpgrade || hasUpgraded.current || !getIsClient())
-            return
-        
+        if (!autoUpgrade || hasUpgraded.current || !getIsClient()) return
+
         const attemptUpgrade = () => {
-            
             if (getHasHydrated() && !hasUpgraded.current) {
-                
                 const upgraded = upgradeStorage()
-                
+
                 if (upgraded) {
                     hasUpgraded.current = true
                     onUpgrade?.()
                 }
-                
             }
-            
         }
-        
+
         // Try to upgrade immediately if already hydrated
         attemptUpgrade()
-        
+
         // Also try after a short delay to ensure DOM is ready
         const timeoutId = setTimeout(attemptUpgrade, 0)
-        
+
         return () => clearTimeout(timeoutId)
-        
     }, [autoUpgrade, onUpgrade])
-    
+
     return {
-        hasUpgraded: hasUpgraded.current
+        hasUpgraded: hasUpgraded.current,
     }
-    
 }

package/src/index.js

@@ -1,6 +1,6 @@
 import * as utils from './utils'
 
 export { utils }
-export * from './react-wire-persisted'
-export * from './hooks/useHydration'
 export * from './components'
+export * from './hooks/useHydration'
+export * from './react-wire-persisted'

package/src/providers/LocalStorageProvider.js

@@ -1,23 +1,21 @@
-import StorageProvider from './StorageProvider'
-import { fakeLocalStorage, isPrimitive, isLocalStorageAvailable } from '../utils'
+import { fakeLocalStorage, isLocalStorageAvailable, isPrimitive } from '../utils/index.js'
+import StorageProvider from './StorageProvider.js'
 
 /**
  * A storage provider for `localStorage`
  * @see `StorageProvider.js` for documentation
  */
 class LocalStorageProvider extends StorageProvider {
-    
     constructor(namespace = null, registry = {}) {
-
         super(namespace, registry)
 
-        this.storage = this.getStorage()
-        this._isUsingFakeStorage = !isLocalStorageAvailable()
-
+        // Always start with fake storage to prevent hydration mismatches
+        // Will be upgraded to real storage after hydration via upgradeToRealStorage()
+        this.storage = fakeLocalStorage
+        this._isUsingFakeStorage = true
     }
-    
-    getStorage() {
 
+    getStorage() {
         // Use the isomorphic utility to check localStorage availability
         if (isLocalStorageAvailable()) {
             return window.localStorage
@@ -25,124 +23,91 @@ class LocalStorageProvider extends StorageProvider {
 
         // Fallback to fake localStorage for SSR or when localStorage is disabled
         return fakeLocalStorage
-
     }
-    
+
     setNamespace(namespace) {
-        
         if (!this.namespace) {
             this.namespace = namespace
             return
         }
-        
-        if (this.namespace === namespace)
-            return
-        
+
+        if (this.namespace === namespace) return
+
         const items = JSON.parse(JSON.stringify(this.getAll()))
-        
+
         this.removeAll()
-        
+
         for (const [key, value] of Object.entries(items)) {
             const newKey = key.replace(this.namespace, namespace)
             this.setItem(newKey, value)
         }
-        
+
         this.namespace = namespace
-        
     }
-    
+
     getItem(key) {
-        
         const val = this.storage.getItem(key)
-        
-        if (val === undefined || val === null)
-            return null
-        
+
+        if (val === undefined || val === null) return null
+
         try {
             return JSON.parse(val)
-        } catch (e) {
+        } catch (_) {
             return val
         }
-        
     }
-    
+
     setItem(key, value) {
-        
         let val = value
-        
+
         // Don't allow "null" & similar values to be stringified
-        if (val !== undefined && val !== null)
-            val = isPrimitive(value) ? value : JSON.stringify(value)
-        
+        if (val !== undefined && val !== null) val = isPrimitive(value) ? value : JSON.stringify(value)
+
         return this.storage.setItem(key, val)
-        
     }
-    
+
     removeItem(key, fromRegistry = false) {
-        
-        if (fromRegistry)
-            delete this.registry[key]
-        
+        if (fromRegistry) delete this.registry[key]
+
         return this.storage.removeItem(key)
-        
     }
-    
+
     getAll() {
-        
         const prefixNs = `${this.namespace}.`
-        
+
         return Object.keys(this.storage).reduce((acc, it) => {
-            
-            if (this.namespace ? it.startsWith(prefixNs) : true)
-                acc[it] = this.storage.getItem(it)
-            
+            if (this.namespace ? it.startsWith(prefixNs) : true) acc[it] = this.storage.getItem(it)
+
             return acc
-            
         }, {})
-        
     }
-    
-    _resetAll(
-        useInitialValues = true,
-        excludedKeys = [],
-        clearRegistry = false
-    ) {
 
+    _resetAll(useInitialValues = true, excludedKeys = [], clearRegistry = false) {
         const prefixNs = `${this.namespace}.`
 
-        Object.keys(this.storage).forEach(it => {
-
+        Object.keys(this.storage).forEach((it) => {
             const isAppKey = this.namespace ? it.startsWith(prefixNs) : true
             const isExcluded = excludedKeys?.includes(it) || false
 
             if (!isAppKey || isExcluded) return
 
             if (useInitialValues) {
+                const isRegistered = Object.hasOwn(this.registry, it)
 
-                const isRegistered = Object.prototype.hasOwnProperty.call(this.registry, it)
-
-                if (isRegistered)
-                    this.storage.setItem(it, this.registry[it])
-                else
-                    this.storage.removeItem(it)
-
+                if (isRegistered) this.storage.setItem(it, this.registry[it])
+                else this.storage.removeItem(it)
             } else {
-
                 this.storage.removeItem(it)
 
-                if (clearRegistry)
-                    delete this.registry[it]
-
+                if (clearRegistry) delete this.registry[it]
             }
-
         })
-
     }
-    
+
     resetAll(excludedKeys = [], clearRegistry = false) {
         this._resetAll(true, excludedKeys || [], clearRegistry)
     }
-    
+
     removeAll(excludedKeys = [], clearRegistry = false) {
         this._resetAll(false, excludedKeys || [], clearRegistry)
     }
@@ -152,7 +117,6 @@ class LocalStorageProvider extends StorageProvider {
      * This is useful for hydration scenarios
      */
     upgradeToRealStorage() {
-
         if (!this._isUsingFakeStorage) {
             return false // Already using real storage
         }
@@ -161,24 +125,11 @@ class LocalStorageProvider extends StorageProvider {
             return false // Real storage still not available
         }
 
-        const fakeData = { ...this.storage }
+        // Simply switch to real storage - don't migrate fake data
+        // The existing persisted data in localStorage should be preserved
         this.storage = window.localStorage
         this._isUsingFakeStorage = false
 
-        // Migrate data from fake storage to real storage
-        Object.keys(fakeData).forEach(key => {
-            if (key !== '__IS_FAKE_LOCAL_STORAGE__' && fakeData[key] != null) {
-                try {
-                    this.storage.setItem(key, fakeData[key])
-                } catch (e) {
-                    // If we can't write to localStorage, revert to fake storage
-                    this.storage = fakeLocalStorage
-                    this._isUsingFakeStorage = true
-                    return false
-                }
-            }
-        })
-
         return true
     }
 
@@ -188,7 +139,6 @@ class LocalStorageProvider extends StorageProvider {
     isUsingFakeStorage() {
         return this._isUsingFakeStorage
     }
-
 }
 
 export default LocalStorageProvider

package/src/providers/MemoryStorageProvider.js

@@ -1,20 +1,14 @@
-import LocalStorageProvider from './LocalStorageProvider'
-import { fakeLocalStorage } from '../utils'
+import { fakeLocalStorage } from '../utils/index.js'
+import LocalStorageProvider from './LocalStorageProvider.js'
 
 class MemoryStorageProvider extends LocalStorageProvider {
-    
     constructor(namespace = null, registry = {}) {
-        
         super(namespace, registry)
-        
     }
-    
+
     getStorage() {
-        
         return fakeLocalStorage
-        
     }
-    
 }
 
 export default MemoryStorageProvider

package/src/providers/StorageProvider.js

@@ -1,26 +1,23 @@
-
 /**
  * Base class to allow storage access
  * @see `LocalStorageProvider.js` for an example implementation
  */
+/** biome-ignore-all lint/correctness/noUnusedFunctionParameters: WIP next PR will switch to TypeScript */
 class StorageProvider {
-    
     /**
      * Initializes the class
      * @param {String} namespace Namespace to prefix all keys with. Mostly used for the logging & reset functions
      * @param {Object} registry (Optional) Initialize the storage provider with an existing registry
      */
     constructor(namespace, registry) {
-        
         // Simulate being an abstract class
         if (new.target === StorageProvider)
             throw TypeError(`StorageProvider is abstract. Extend this class to implement it`)
-        
+
         this.namespace = namespace || null
         this.registry = registry || /* istanbul ignore next */ {}
-        
     }
-    
+
     /**
      * Sets the namespace for this storage provider, and migrates
      * all stored values to the new namespace
@@ -28,7 +25,7 @@ class StorageProvider {
      */
     /* istanbul ignore next */
     setNamespace(namespace) {}
-    
+
     /**
      * Registers an item with it's initial value. This is used for logging, resetting, etc.
      * @param {String} key Storage item's key
@@ -37,14 +34,14 @@ class StorageProvider {
     register(key, initialValue) {
         this.registry[key] = initialValue
     }
-    
+
     /**
      * Reads an item from storage
      * @param {String} key Key for the item to retrieve
      */
     /* istanbul ignore next */
     getItem(key) {}
-    
+
     /**
      * Stores a value
      * @param {String} key Item's storage key
@@ -52,7 +49,7 @@ class StorageProvider {
      */
     /* istanbul ignore next */
     setItem(key, value) {}
-    
+
     /**
      * Removes an item from storage
      * @param {String} key Item's storage key
@@ -60,27 +57,23 @@ class StorageProvider {
      */
     /* istanbul ignore next */
     removeItem(key, fromRegistry = false) {}
-    
+
     /**
      * Gets all stored keys & values
      * If a `namespace` was set, only keys prefixed with the namespace will be returned
      */
     /* istanbul ignore next */
     getAll() {}
-    
+
     /**
-     * 
+     *
      * @param {Boolean} useInitialValues If values should be replaced with their initial values. If false, keys are removed
      * @param {String[]} excludedKeys (Optional) List of keys to exclude
      * @param {Boolean} clearRegistry (Optional) If the registry should also be cleared
      */
     /* istanbul ignore next */
-    _resetAll(
-        useInitialValues = true,
-        excludedKeys = [],
-        clearRegistry = false
-    ) {}
-    
+    _resetAll(useInitialValues = true, excludedKeys = [], clearRegistry = false) {}
+
     /**
      * Resets all values to their initial values
      * If a `namespace` is set, only keys prefixed with the namespace will be reset
@@ -88,7 +81,7 @@ class StorageProvider {
      */
     /* istanbul ignore next */
     resetAll(excludedKeys = []) {}
-    
+
     /**
      * Removes all items from local storage.
      * If a `namespace` is set, only keys prefixed with the namespace will be removed
@@ -96,7 +89,6 @@ class StorageProvider {
      */
     /* istanbul ignore next */
     removeAll(excludedKeys = []) {}
-    
 }
 
 export default StorageProvider