@stimulus-library/mixins 1.0.0-alpha.7 → 1.0.1

package/dist/use_localstorage.d.ts

@@ -12,9 +12,10 @@ export interface LocalStorageProxy<T> {
     clear(): void;
     isEmpty(): boolean;
 }
-export declare const StorageSerializers: Record<'boolean' | 'object' | 'number' | 'any' | 'string' | 'map' | 'set', Serializer<any>> & {
+export declare const StorageSerializers: Record<"boolean" | "object" | "number" | "any" | "string" | "map" | "set", Serializer<any>> & {
     [idx: string]: Serializer<any>;
 };
-export declare function useLocalStorage<T>(controller: Controller, key: string, defaultValue: T, opts?: {
-    writeDefaults: boolean;
+export declare function useLocalStorage<T>(controller: Controller, key: string, defaultValue?: any, opts?: {
+    onChange?: ((newValue: any, oldValue: any) => void) | null;
+    writeDefaults?: boolean;
 }): LocalStorageProxy<T>;

package/dist/use_localstorage.js

@@ -1,39 +1,48 @@
 import { reactive } from "@stimulus-library/utilities";
+import { useEventListener } from "./use_event_listener";
 export const StorageSerializers = {
     boolean: {
-        deserialize: (v) => v === 'true',
+        deserialize: (v) => v === "true",
         serialize: (v) => String(v),
-        isEmpty: (v) => v === '' || v === null,
+        isEmpty: (v) => v === "" || v === null,
     },
     object: {
         deserialize: (v) => JSON.parse(v),
-        serialize: (v) => JSON.stringify(v),
+        serialize: (v) => {
+            // Change events are triggered with a string value
+            if (typeof v === "string") {
+                return v;
+            }
+            else {
+                return JSON.stringify(v);
+            }
+        },
         isEmpty: (v) => {
             const values = Object.values(JSON.parse(v));
-            return values.length === 0 || values.every(v => v === '' || v === null);
+            return values.length === 0 || values.every(v => v === "" || v === null);
         },
     },
     number: {
         deserialize: (v) => Number.parseFloat(v),
         serialize: (v) => String(v),
-        isEmpty: (v) => v === '' || v === null,
+        isEmpty: (v) => v === "" || v === null,
     },
     any: {
         deserialize: (v) => v,
         serialize: (v) => String(v),
-        isEmpty: (v) => v === '' || v === null,
+        isEmpty: (v) => v === "" || v === null,
     },
     string: {
         deserialize: (v) => v,
         serialize: (v) => String(v),
-        isEmpty: (v) => v === '' || v === null,
+        isEmpty: (v) => v === "" || v === null,
     },
     map: {
         deserialize: (v) => new Map(JSON.parse(v)),
         serialize: (v) => JSON.stringify(Array.from(v.entries())),
         isEmpty: (v) => {
             const values = Array.from(v.values());
-            return values.length === 0 || values.every(v => v === '' || v === null);
+            return values.length === 0 || values.every(v => v === "" || v === null);
         },
     },
     set: {
@@ -41,40 +50,46 @@ export const StorageSerializers = {
         serialize: (v) => JSON.stringify(Array.from(v.entries())),
         isEmpty: (v) => {
             const values = Array.from(v.values());
-            return values.length === 0 || values.every(v => v === '' || v === null);
+            return values.length === 0 || values.every(v => v === "" || v === null);
         },
     },
 };
-export function useLocalStorage(controller, key, defaultValue, opts = { writeDefaults: true }) {
+export function useLocalStorage(controller, key, defaultValue, opts) {
     let type;
-    let { writeDefaults } = opts;
-    if (defaultValue == null) {
-        type = 'any';
+    let optsMergedWithDefaults = {
+        onChange: null,
+        writeDefaults: true,
+        ...opts,
+    };
+    let { writeDefaults } = optsMergedWithDefaults;
+    if (defaultValue === null || defaultValue === undefined) {
+        type = "any";
     }
     else if (defaultValue instanceof Set) {
-        type = 'set';
+        type = "set";
     }
     else if (defaultValue instanceof Map) {
-        type = 'map';
+        type = "map";
     }
-    else if (typeof defaultValue === 'boolean') {
-        type = 'boolean';
+    else if (typeof defaultValue === "boolean") {
+        type = "boolean";
     }
-    else if (typeof defaultValue === 'string') {
-        type = 'string';
+    else if (typeof defaultValue === "string") {
+        type = "string";
     }
-    else if (typeof defaultValue === 'object') {
-        type = 'object';
+    else if (typeof defaultValue === "object") {
+        type = "object";
     }
     else if (Array.isArray(defaultValue)) {
-        type = 'object';
+        type = "object";
     }
     else if (!Number.isNaN(defaultValue)) {
-        type = 'number';
+        type = "number";
     }
     else {
-        type = 'any';
+        type = "any";
     }
+    let onChange = optsMergedWithDefaults.onChange?.bind(controller);
     let data = reactive({
         value: defaultValue,
     });
@@ -84,7 +99,7 @@ export function useLocalStorage(controller, key, defaultValue, opts = { writeDef
         const rawValue = storage.getItem(key);
         if (rawValue == null) {
             data.value = defaultValue;
-            if (writeDefaults && defaultValue !== null) {
+            if (writeDefaults && defaultValue !== null && defaultValue !== undefined) {
                 storage.setItem(key, serializer.serialize(defaultValue));
             }
         }
@@ -95,6 +110,9 @@ export function useLocalStorage(controller, key, defaultValue, opts = { writeDef
     };
     const write = (value) => {
         storage.setItem(key, serializer.serialize(value));
+        if (onChange) {
+            onChange(value, data.value);
+        }
         data.value = value;
     };
     const clear = () => {
@@ -107,6 +125,12 @@ export function useLocalStorage(controller, key, defaultValue, opts = { writeDef
         return serializer.isEmpty(rawValue);
     };
     read();
+    useEventListener(controller, window, "storage", (event) => {
+        if (event.key === key) {
+            console.log(event.newValue, event.oldValue);
+            write(event.newValue);
+        }
+    });
     return {
         get value() {
             return read();

package/package.json

@@ -9,7 +9,7 @@
     "ruby on rails",
     "ruby-on-rails"
   ],
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.1",
   "license": "MIT",
   "author": {
     "name": "Sub-Xaero",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@hotwired/stimulus": "^3.0.0",
-    "@stimulus-library/utilities": "^1.0.0-alpha.3"
+    "@stimulus-library/utilities": "^1.0.1"
   },
   "devDependencies": {
     "@types/chai": "^4.3.5",
@@ -55,5 +55,5 @@
     "typescript": "^5.1.3",
     "vite": "^4.1.1"
   },
-  "gitHead": "0f37528aabf5fe7acc4dee070d0bf760bacc4dc1"
+  "gitHead": "26a7da01746a2bdf8a2a731b79d37256b789bdc0"
 }