react-wire-persisted 1.0.6 → 1.2.0

package/package.json

@@ -1,15 +1,20 @@
 {
   "name": "react-wire-persisted",
-  "version": "1.0.6",
+  "version": "1.2.0",
   "author": "Wesley Bliss <wesley.bliss@gmail.com>",
   "license": "MIT",
   "main": "lib/react-wire-persisted.js",
+  "unpkg": "dist/react-wire-persisted.js",
+  "module": "es/react-wire-persisted.js",
   "files": [
-    "lib"
+    "dist",
+    "lib",
+    "es",
+    "src"
   ],
   "scripts": {
     "dev": "NODE_ENV=development webpack serve --config config/webpack.config.js --progress",
-    "build": "NODE_ENV=production webpack --config config/webpack.config.js --progress",
+    "build": "NODE_ENV=production libton-script build",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:watch:all": "jest --watchAll",
@@ -31,13 +36,13 @@
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.3",
     "browserslist": "^4.19.3",
-    "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.6.0",
     "dotenv-webpack": "^7.1.0",
     "esbuild": "^0.14.23",
     "html-webpack-plugin": "^5.5.0",
     "interpolate-html-plugin": "^4.0.0",
     "jest": "^27.5.1",
+    "libton-script": "^0.12.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "snapshot-diff": "^0.9.0",

package/src/index.ts

@@ -0,0 +1,4 @@
+import * as utils from './utils'
+
+export { utils }
+export * from './react-wire-persisted'

package/src/providers/LocalStorageProvider.js

@@ -0,0 +1,152 @@
+import StorageProvider from './StorageProvider'
+import { fakeLocalStorage, isPrimitive } from '../utils'
+
+/**
+ * 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()
+        
+    }
+    
+    getStorage() {
+        
+        try {
+            return window.localStorage
+        } catch (e) {
+            /* istanbul ignore next */
+            console.warn('LocalStorageProvider: localStorage not supported')
+            /* istanbul ignore next */
+            return fakeLocalStorage
+        }
+        
+    }
+    
+    setNamespace(namespace) {
+        
+        if (!this.namespace) {
+            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
+        
+        try {
+            return JSON.parse(val)
+        } catch (e) {
+            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)
+        
+        return this.storage.setItem(key, val)
+        
+    }
+    
+    removeItem(key, fromRegistry = false) {
+        
+        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)
+            
+            return acc
+            
+        }, {})
+        
+    }
+    
+    _resetAll(
+        useInitialValues = true,
+        excludedKeys = [],
+        clearRegistry = false
+    ) {
+        
+        const prefixNs = `${this.namespace}.`
+        
+        Object.keys(localStorage).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.prototype.hasOwnProperty.call(this.registry, 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]
+                
+            }
+            
+        })
+        
+    }
+    
+    resetAll(excludedKeys = [], clearRegistry = false) {
+        this._resetAll(true, excludedKeys || [], clearRegistry)
+    }
+    
+    removeAll(excludedKeys = [], clearRegistry = false) {
+        this._resetAll(false, excludedKeys || [], clearRegistry)
+    }
+    
+}
+
+export default LocalStorageProvider

package/src/providers/MemoryStorageProvider.js

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

package/src/providers/StorageProvider.js

@@ -0,0 +1,102 @@
+
+/**
+ * Base class to allow storage access
+ * @see `LocalStorageProvider.js` for an example implementation
+ */
+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
+     * @param {String} namespace New namespace for this storage provider
+     */
+    /* 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
+     * @param {*} initialValue Storage item's initial value
+     */
+    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
+     * @param {String} value Item's value to store
+     */
+    /* istanbul ignore next */
+    setItem(key, value) {}
+    
+    /**
+     * Removes an item from storage
+     * @param {String} key Item's storage key
+     * @param {Boolean} fromRegistry (Optional) If the item should also be removed from the registry
+     */
+    /* 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
+    ) {}
+    
+    /**
+     * Resets all values to their initial values
+     * If a `namespace` is set, only keys prefixed with the namespace will be reset
+     * @param {String[]} excludedKeys (Optional) List of keys to exclude
+     */
+    /* 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
+     * @param {String[]} excludedKeys (Optional) List of keys to exclude
+     */
+    /* istanbul ignore next */
+    removeAll(excludedKeys = []) {}
+    
+}
+
+export default StorageProvider

package/src/react-wire-persisted.ts

@@ -0,0 +1,115 @@
+import { createWire } from '@forminator/react-wire'
+import LocalStorageProvider from './providers/LocalStorageProvider'
+
+export const defaultOptions = {
+    logging: {
+        enabled: false,
+    },
+}
+
+let Provider = LocalStorageProvider
+let storage = new Provider()
+let options = { ...defaultOptions }
+let pendingLogs = []
+
+/**
+ * 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
+
+export const getOptions = () => options
+
+/**
+ * Sets the namespace for the storage provider
+ * 
+ * @param {String} namespace The namespace for the storage provider
+ */
+export const setNamespace = namespace => {
+    storage.setNamespace(namespace)
+    storage = new Provider(namespace || getNamespace())
+}
+
+export const setOptions = value => {
+    options = {
+        ...options,
+        ...value,
+    }
+    /* istanbul ignore next */
+    if (options.logging.enabled) {
+        console.info('Flushing', pendingLogs.length, 'pending logs')
+        while (pendingLogs.length)
+            /* istanbul ignore next */
+            console.log(...pendingLogs.shift())
+    }
+}
+
+const log = (...args) => {
+    /* istanbul ignore next */
+    if (options.logging.enabled)
+        /* istanbul ignore next */
+        console.log(...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) => {
+    
+    // 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}}`
+    )
+    
+    // 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 => {
+        storage.setItem(key, newValue)
+        return wire.setValue(newValue)
+    }
+    
+    const subscribe = fn => {
+        wire.subscribe(fn)
+    }
+    
+    const storedValue = storage.getItem(key)
+    const initialValue = storedValue === null ? value : storedValue
+    
+    log('react-wire-persisted: create', key, {
+        value,
+        storedValue,
+        initialValue,
+    })
+    
+    if (initialValue !== value)
+        setValue(initialValue)
+    
+    return {
+        ...wire,
+        getValue,
+        setValue,
+        subscribe,
+    }
+    
+}

package/src/utils/fakeLocalStorage.ts

@@ -0,0 +1,14 @@
+
+const storage = {
+    __IS_FAKE_LOCAL_STORAGE__: true,
+}
+
+export const fakeLocalStorage = {
+    getItem: key => fakeLocalStorage[key],
+    setItem: (key, value) => {
+        fakeLocalStorage[key] = value
+    },
+    removeItem: key => {
+        delete fakeLocalStorage[key]
+    }
+}

package/src/utils/index.ts

@@ -0,0 +1,20 @@
+export * from './keys'
+export * from './fakeLocalStorage'
+
+/**
+ * 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 => {
+    
+    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/keys.ts

@@ -0,0 +1,49 @@
+
+/**
+ * Convenience map of keys
+ */
+const storageKeys = {}
+
+/**
+ * Adds a key to the keys map
+ * 
+ * @param {String} value Key name
+ */
+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)
+
+/**
+ * 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]}`,
+    }), {})
+    
+}

package/lib/utils/index.js

@@ -1 +0,0 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var r=t();for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(this,(function(){return(()=>{"use strict";var e={779:e=>{e.exports=require("@babel/runtime/helpers/defineProperty")}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={exports:{}};return e[n](i,i.exports,r),i.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{r.r(n),r.d(n,{addKey:()=>a,fakeLocalStorage:()=>y,getKeys:()=>s,getPrefixedKeys:()=>l,isPrimitive:()=>b,key:()=>p});const e=require("@babel/runtime/helpers/typeof");var t=r.n(e),o=r(779),i=r.n(o);function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){i()(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var f={},a=function(e){f[e]=e},p=function(e){return a(e)},s=function(){return f},l=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,r=t||f;return e?Object.keys(r).reduce((function(t,n){return u(u({},t),{},i()({},n,"".concat(e,".").concat(r[n])))}),{}):r},y={__IS_FAKE_LOCAL_STORAGE__:!0,getItem:function(e){return y[e]},setItem:function(e,t){y[e]=t},removeItem:function(e){delete y[e]}},b=function(e){var r=t()(e);return null===e||!Array.isArray(e)&&("object"!==r&&"function"!==r)}})(),n})()}));