react-wire-persisted 2.0.1 → 2.1.0

package/src/react-wire-persisted.js

@@ -1,6 +1,14 @@
 import { createWire } from '@forminator/react-wire'
-import LocalStorageProvider from './providers/LocalStorageProvider'
-import { getIsClient, getHasHydrated } from './utils'
+import LocalStorageProvider from './providers/LocalStorageProvider.js'
+import { getHasHydratedStorage, getIsClient, markStorageAsHydrated } from './utils/index.js'
+
+// Generate unique instance ID
+const instanceId = Math.random().toString(36).substring(7)
+const rwpLog = (...args) => {
+    if (typeof globalThis !== 'undefined' && globalThis.__RWP_LOGGING_ENABLED__ !== false) {
+        console.log(...args)
+    }
+}
 
 export const defaultOptions = {
     logging: {
@@ -8,21 +16,59 @@ export const defaultOptions = {
     },
 }
 
-let Provider = LocalStorageProvider
-let storage = new Provider()
+// Set global logging flag on startup
+if (typeof globalThis !== 'undefined' && globalThis.__RWP_LOGGING_ENABLED__ === undefined) {
+    globalThis.__RWP_LOGGING_ENABLED__ = defaultOptions.logging.enabled
+}
+
+rwpLog('[RWP] Module initialized, instance ID:', instanceId)
+
+const Provider = LocalStorageProvider
+
+// Make storage global so all instances share the same storage after upgrade
+rwpLog('[RWP] About to check global storage, instanceId:', instanceId)
+let storage
+try {
+    if (!globalThis.__RWP_STORAGE__) {
+        rwpLog('[RWP] Creating global storage in instance:', instanceId)
+        globalThis.__RWP_STORAGE__ = new Provider()
+    } else {
+        rwpLog('[RWP] Using existing global storage in instance:', instanceId)
+    }
+    storage = globalThis.__RWP_STORAGE__
+    rwpLog('[RWP] Storage assigned successfully')
+} catch (error) {
+    if (globalThis.__RWP_LOGGING_ENABLED__) console.error('[RWP] Error setting up global storage:', error)
+    storage = new Provider()
+}
 let options = { ...defaultOptions }
-let pendingLogs = []
+const pendingLogs = []
+
+// Use a global registry to handle multiple module instances
+// This ensures all instances share the same wire registry
+if (typeof globalThis !== 'undefined') {
+    if (!globalThis.__RWP_REGISTERED_WIRES__) {
+        rwpLog('[RWP] Creating global registeredWires in instance:', instanceId)
+        globalThis.__RWP_REGISTERED_WIRES__ = new Map()
+    } else {
+        rwpLog('[RWP] Using existing global registeredWires in instance:', instanceId)
+    }
+}
+
+// Registry to track wire instances for hydration refresh
+const registeredWires = globalThis.__RWP_REGISTERED_WIRES__ || new Map()
+rwpLog('[RWP] registeredWires Map reference in instance:', instanceId, 'size:', registeredWires.size)
 
 /**
  * Gets the namespace of the storage provider
- * 
+ *
  * @returns {String}
  */
 export const getNamespace = () => storage.namespace
 
 /**
  * Gets the current storage provider class instance
- * 
+ *
  * @returns {StorageProvider}
  */
 export const getStorage = () => storage
@@ -31,19 +77,25 @@ export const getOptions = () => options
 
 /**
  * Sets the namespace for the storage provider
- * 
+ *
  * @param {String} namespace The namespace for the storage provider
  */
-export const setNamespace = namespace => {
+export const setNamespace = (namespace) => {
+    rwpLog('[RWP] setNamespace() called with:', namespace, 'registered wires before:', registeredWires.size)
     storage.setNamespace(namespace)
     storage = new Provider(namespace || getNamespace())
+    rwpLog('[RWP] setNamespace() done, registered wires after:', registeredWires.size)
 }
 
-export const setOptions = value => {
+export const setOptions = (value) => {
     options = {
         ...options,
         ...value,
     }
+    // Update global logging flag
+    if (typeof globalThis !== 'undefined') {
+        globalThis.__RWP_LOGGING_ENABLED__ = options.logging.enabled
+    }
     /* istanbul ignore next */
     if (options.logging.enabled) {
         console.info('Flushing', pendingLogs.length, 'pending logs')
@@ -53,6 +105,38 @@ export const setOptions = value => {
     }
 }
 
+/**
+ * Refresh all registered wires by reading from storage
+ * Called after storage upgrade to sync wires with persisted values
+ */
+const refreshAllWires = () => {
+    rwpLog('[RWP] refreshAllWires() called in instance:', instanceId, 'registered wires:', registeredWires.size)
+    log('react-wire-persisted: refreshAllWires() called, registered wires:', registeredWires.size)
+
+    registeredWires.forEach((wire, key) => {
+        const storedValue = storage.getItem(key)
+        const currentValue = wire.getValue()
+
+        rwpLog('[RWP] Checking wire', key, {
+            storedValue,
+            currentValue,
+            willUpdate: storedValue !== null && storedValue !== currentValue,
+        })
+
+        log('react-wire-persisted: Checking wire', key, {
+            storedValue,
+            currentValue,
+            willUpdate: storedValue !== null && storedValue !== currentValue,
+        })
+
+        if (storedValue !== null && storedValue !== currentValue) {
+            rwpLog('[RWP] Refreshing wire', key, 'with stored value', storedValue)
+            log('react-wire-persisted: Refreshing wire', key, 'with stored value', storedValue)
+            wire.setValue(storedValue)
+        }
+    })
+}
+
 /**
  * Attempts to upgrade the storage provider from fake storage to real localStorage
  * This should be called on the client side after hydration
@@ -60,14 +144,30 @@ export const setOptions = value => {
  * @returns {Boolean} True if upgrade was successful
  */
 export const upgradeStorage = () => {
-    if (!getIsClient()) {
-        return false
-    }
+    rwpLog('[RWP] upgradeStorage() called in instance:', instanceId, {
+        isClient: getIsClient(),
+        isUsingFakeStorage: storage.isUsingFakeStorage(),
+    })
+
+    log('react-wire-persisted: upgradeStorage() called', {
+        isClient: getIsClient(),
+        isUsingFakeStorage: storage.isUsingFakeStorage(),
+    })
+
+    if (!getIsClient()) return false
 
     const upgraded = storage.upgradeToRealStorage()
 
+    rwpLog('[RWP] upgradeToRealStorage() returned', upgraded)
+    log('react-wire-persisted: upgradeToRealStorage() returned', upgraded)
+
     if (upgraded) {
+        markStorageAsHydrated()
+        rwpLog('[RWP] Upgraded to real localStorage, calling refreshAllWires()')
         log('react-wire-persisted: Upgraded to real localStorage after hydration')
+
+        // Refresh all wires with stored values
+        refreshAllWires()
     }
 
     return upgraded
@@ -78,59 +178,84 @@ const log = (...args) => {
     if (options.logging.enabled)
         /* istanbul ignore next */
         console.log(...args)
-    else
-        pendingLogs.push(args)
+    else pendingLogs.push(args)
 }
 
 /**
  * Creates a persisted Wire using the `StorageProvider` that is currently set
  * Defaults to `localStorage` via `LocalStorageProvider`
- * 
+ *
  * @param {String} key Unique key for storing this value
  * @param {*} value Initial value of this Wire
  * @returns A new Wire decorated with localStorage functionality
  */
 export const createPersistedWire = (key, value = null) => {
-    
+    rwpLog('[RWP] createPersistedWire() called in instance:', instanceId, 'key:', key, 'value:', value)
+
     // This check helps ensure no accidental key typos occur
-    if (!key && (typeof key) !== 'number') throw new Error(
-        `createPersistedWire: Key cannot be a falsey value (${key}}`
-    )
-    
+    if (!key && typeof key !== 'number') throw new Error(`createPersistedWire: Key cannot be a falsey value (${key}}`)
+
     // Track this writable entry so we can easily clear all
     storage.register(key, value)
-    
+
     // The actual Wire backing object
     const wire = createWire(value)
-    
+
     const getValue = () => wire.getValue()
-    
-    const setValue = newValue => {
+
+    const setValue = (newValue) => {
+        rwpLog(
+            '[RWP] setValue called in instance:',
+            instanceId,
+            'key:',
+            key,
+            'isUsingFakeStorage:',
+            storage.isUsingFakeStorage(),
+        )
         storage.setItem(key, newValue)
         return wire.setValue(newValue)
     }
-    
-    const subscribe = fn => {
+
+    const subscribe = (fn) => {
         wire.subscribe(fn)
     }
-    
-    const storedValue = storage.getItem(key)
-    const initialValue = storedValue === null ? value : storedValue
-    
+
+    // Always start with default value to ensure SSR consistency
+    let initialValue = value
+
+    // Only read from storage if we've hydrated OR if storage is already using real localStorage
+    // (prevents hydration mismatch in SSR, but allows normal behavior in client-only apps)
+    const canReadStorage = getHasHydratedStorage() || !storage.isUsingFakeStorage()
+
+    if (canReadStorage && getIsClient()) {
+        const storedValue = storage.getItem(key)
+
+        if (storedValue !== null) initialValue = storedValue
+    }
+
     log('react-wire-persisted: create', key, {
         value,
-        storedValue,
         initialValue,
+        hasHydratedStorage: getHasHydratedStorage(),
+        isUsingFakeStorage: storage.isUsingFakeStorage(),
+        canReadStorage,
     })
-    
-    if (initialValue !== value)
-        setValue(initialValue)
-    
+
+    if (initialValue !== value) setValue(initialValue)
+
+    // Register wire for post-hydration refresh
+    registeredWires.set(key, {
+        getValue,
+        setValue,
+        subscribe,
+    })
+
+    rwpLog('[RWP] Wire registered, total wires:', registeredWires.size, 'keys:', Array.from(registeredWires.keys()))
+
     return {
         ...wire,
         getValue,
         setValue,
         subscribe,
     }
-    
 }

package/src/utils/fakeLocalStorage.js

@@ -1,16 +1,15 @@
-
 const storage = {
     __IS_FAKE_LOCAL_STORAGE__: true,
 }
 
 export const fakeLocalStorage = {
-    getItem: key => storage[key],
+    getItem: (key) => storage[key],
     setItem: (key, value) => {
         storage[key] = value
     },
-    removeItem: key => {
+    removeItem: (key) => {
         delete storage[key]
     },
     // Make Object.keys() work properly for _resetAll method
-    ...storage
+    ...storage,
 }

package/src/utils/index.js

@@ -1,21 +1,19 @@
-export * from './keys'
-export * from './fakeLocalStorage'
-export * from './isomorphic'
+export * from './fakeLocalStorage.js'
+export * from './isomorphic.js'
+export * from './keys.js'
 
 /**
  * Checks if a value is a primitive type
- * 
+ *
  * @param {*} val Value to check
  * @returns {Boolean} True if value is a primitive type
  */
-export const isPrimitive = val => {
-    
+export const isPrimitive = (val) => {
     const type = typeof val
-    
+
     if (val === null) return true
     if (Array.isArray(val)) return false
     if (type === 'object') return false
-    
+
     return type !== 'function'
-    
 }

package/src/utils/isomorphic.js

@@ -4,19 +4,18 @@
 
 let isClient = false
 let hasHydrated = false
+let hasHydratedStorage = false
 
 // Detect if we're running in a browser environment
 if (typeof window !== 'undefined') {
     isClient = true
 
     // Mark as hydrated when the DOM is ready
-    if (document.readyState === 'loading') {
+    if (document.readyState === 'loading')
         document.addEventListener('DOMContentLoaded', () => {
             hasHydrated = true
         })
-    } else {
-        hasHydrated = true
-    }
+    else hasHydrated = true
 }
 
 /**
@@ -29,6 +28,18 @@ export const getIsClient = () => isClient
  */
 export const getHasHydrated = () => hasHydrated
 
+/**
+ * Check if storage has been hydrated (safe to read from real localStorage)
+ */
+export const getHasHydratedStorage = () => hasHydratedStorage
+
+/**
+ * Mark storage as hydrated (called after upgradeStorage)
+ */
+export const markStorageAsHydrated = () => {
+    hasHydratedStorage = true
+}
+
 /**
  * Check if localStorage is available and safe to use
  */
@@ -37,10 +48,12 @@ export const isLocalStorageAvailable = () => {
 
     try {
         const testKey = '__rwp_test__'
+
         window.localStorage.setItem(testKey, 'test')
         window.localStorage.removeItem(testKey)
+
         return true
-    } catch (e) {
+    } catch (_) {
         return false
     }
-}
+}

package/src/utils/keys.js

@@ -1,4 +1,3 @@
-
 /**
  * Convenience map of keys
  */
@@ -6,44 +5,42 @@ const storageKeys = {}
 
 /**
  * Adds a key to the keys map
- * 
+ *
  * @param {String} value Key name
  */
-export const addKey = value => {
+export const addKey = (value) => {
     storageKeys[value] = value
 }
 
 /**
  * Adds a key to the keys map
  * (Alias for `addKey`)
- * 
+ *
  * @param {String} value Key name
  */
-export const key = value => addKey(value)
+export const key = (value) => addKey(value)
 
 /**
  * Convenience method to get internally managed storage keys
- * 
+ *
  * @returns {Object} Storage keys map
  */
 export const getKeys = () => storageKeys
 
 /**
  * Helper utility to prefix all keys in a map to use a namespace
- * 
+ *
  * @param {String} namespace Storage namespace prefix
  * @param {Object} keys (Optional) Storage key/values. Defaults to the internally managed keys map
  */
 export const getPrefixedKeys = (namespace, keys = null) => {
-    
     const items = keys || storageKeys
-    
-    if (!namespace)
-        return items
-    
-    return Object.keys(items).reduce((acc, it) => ({
-        ...acc,
-        [it]: `${namespace}.${items[it]}`,
-    }), {})
-    
+
+    if (!namespace) return items
+
+    return Object.keys(items).reduce((acc, it) => {
+        acc[it] = `${namespace}.${items[it]}`
+
+        return acc
+    }, {})
 }