@furystack/shades 7.0.0 → 7.1.1

package/dist/models/render-options.js

@@ -1,26 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// export type RenderOptionsState<TState> = unknown extends TState
-//   ? {}
-//   : {
-//       /**
-//        * @returns the current state object
-//        */
-//       getState: () => TState
-//       /**
-//        * Update the current component state's multiple properties in one-shot
-//        *
-//        * @param newState The partial new state object
-//        * @param skipRender Option to skip the render process
-//        */
-//       updateState: (newState: PartialElement<TState>, skipRender?: boolean) => void
-//       /**
-//        * @param key The key on the state object
-//        * @returns A tuple with the value and the setter function
-//        */
-//       useState: <T extends keyof TState>(
-//         key: T,
-//       ) => [value: TState[T], setValue: (newValue: TState[T], skipRender?: boolean) => void]
-//     }
-// export type RenderOptions<TProps, TState> = RenderOptionsBase<TProps, TState> & RenderOptionsState<TState>
 //# sourceMappingURL=render-options.js.map

package/dist/models/render-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"render-options.js","sourceRoot":"","sources":["../../src/models/render-options.ts"],"names":[],"mappings":";;AAoBA,kEAAkE;AAClE,SAAS;AACT,QAAQ;AACR,YAAY;AACZ,6CAA6C;AAC7C,YAAY;AACZ,+BAA+B;AAC/B,YAAY;AACZ,gFAAgF;AAChF,WAAW;AACX,wDAAwD;AACxD,+DAA+D;AAC/D,YAAY;AACZ,sFAAsF;AACtF,YAAY;AACZ,kDAAkD;AAClD,mEAAmE;AACnE,YAAY;AACZ,4CAA4C;AAC5C,kBAAkB;AAClB,+FAA+F;AAC/F,QAAQ;AAER,6GAA6G"}
+{"version":3,"file":"render-options.js","sourceRoot":"","sources":["../../src/models/render-options.ts"],"names":[],"mappings":""}

package/dist/services/location-service.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LocationService = void 0;
 const utils_1 = require("@furystack/utils");
 const inject_1 = require("@furystack/inject");
+const rest_1 = require("@furystack/rest");
 let LocationService = class LocationService {
     dispose() {
         window.removeEventListener('popstate', this.updateState);
@@ -19,12 +20,37 @@ let LocationService = class LocationService {
         this.pushStateTracer.dispose();
         this.replaceStateTracer.dispose();
         this.onLocationPathChanged.dispose();
+        this.onLocationSearchChanged.dispose();
+        this.onDeserializedLocationSearchChanged.dispose();
+        this.locationDeserializerObserver.dispose();
     }
     updateState() {
         this.onLocationPathChanged.setValue(location.pathname);
         this.onLocationHashChanged.setValue(location.hash);
         this.onLocationSearchChanged.setValue(location.search);
     }
+    /**
+     *
+     * @param key The search param key (e.g. ?search=1 -> search)
+     * @param defaultValue The default value if not provided
+     * @returns An observable with the current value (or default value) of the search param
+     */
+    useSearchParam(key, defaultValue) {
+        const actualValue = this.onDeserializedLocationSearchChanged.getValue()[key] ?? defaultValue;
+        if (!this.searchParamObservables.has(key)) {
+            const newObservable = new utils_1.ObservableValue(actualValue);
+            this.searchParamObservables.set(key, newObservable);
+            newObservable.subscribe((value) => {
+                const params = (0, rest_1.serializeToQueryString)({ ...(0, rest_1.deserializeQueryString)(location.search), [key]: value });
+                history.pushState({}, '', `${location.pathname}?${params}`);
+            });
+            this.onDeserializedLocationSearchChanged.subscribe((search) => {
+                const value = search[key] ?? defaultValue;
+                this.searchParamObservables.get(key)?.setValue(value);
+            });
+        }
+        return this.searchParamObservables.get(key);
+    }
     constructor() {
         /**
          * Observable value that will be updated when the location pathname (e.g. /page/1) changes
@@ -38,6 +64,11 @@ let LocationService = class LocationService {
          * Observable value that will be updated when the location search (e.g. ?search=1) changes
          */
         this.onLocationSearchChanged = new utils_1.ObservableValue(location.search);
+        this.onDeserializedLocationSearchChanged = new utils_1.ObservableValue((0, rest_1.deserializeQueryString)(this.onLocationSearchChanged.getValue()));
+        this.locationDeserializerObserver = this.onLocationSearchChanged.subscribe((search) => {
+            this.onDeserializedLocationSearchChanged.setValue((0, rest_1.deserializeQueryString)(search));
+        });
+        this.searchParamObservables = new Map();
         window.addEventListener('popstate', () => this.updateState());
         window.addEventListener('hashchange', () => this.updateState());
         this.pushStateTracer = utils_1.Trace.method({

package/dist/services/location-service.js.map

@@ -1 +1 @@
-{"version":3,"file":"location-service.js","sourceRoot":"","sources":["../../src/services/location-service.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,4CAAyD;AACzD,8CAA8C;AAEvC,IAAM,eAAe,GAArB,MAAM,eAAe;IACnB,OAAO;QACZ,MAAM,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;QACxD,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;QAC1D,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,CAAA;QAC9B,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,CAAA;QACjC,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE,CAAA;IACtC,CAAC;IAiBM,WAAW;QAChB,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACtD,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;QAClD,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;IACxD,CAAC;IAKD;QAxBA;;WAEG;QACI,0BAAqB,GAAG,IAAI,uBAAe,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAA;QAEnF;;WAEG;QACI,0BAAqB,GAAG,IAAI,uBAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;QAEjE;;WAEG;QACI,4BAAuB,GAAG,IAAI,uBAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;QAYnE,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAA;QAC7D,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAA;QAE/D,IAAI,CAAC,eAAe,GAAG,aAAK,CAAC,MAAM,CAAC;YAClC,MAAM,EAAE,OAAO;YACf,MAAM,EAAE,OAAO,CAAC,SAAS;YACzB,OAAO,EAAE,KAAK;YACd,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;SACrC,CAAC,CAAA;QAEF,IAAI,CAAC,kBAAkB,GAAG,aAAK,CAAC,MAAM,CAAC;YACrC,MAAM,EAAE,OAAO;YACf,MAAM,EAAE,OAAO,CAAC,YAAY;YAC5B,OAAO,EAAE,KAAK;YACd,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;SACrC,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AAnDY,eAAe;IAD3B,IAAA,mBAAU,EAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;;GACzB,eAAe,CAmD3B;AAnDY,0CAAe"}
+{"version":3,"file":"location-service.js","sourceRoot":"","sources":["../../src/services/location-service.tsx"],"names":[],"mappings":"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"}

package/dist/services/location-service.spec.js

@@ -9,14 +9,14 @@ const _1 = require("./");
 describe('LocationService', () => {
     beforeEach(() => (document.body.innerHTML = '<div id="root"></div>'));
     afterEach(() => (document.body.innerHTML = ''));
-    it('Shuld be constructed', async () => {
-        await (0, utils_1.usingAsync)(new inject_1.Injector(), async (i) => {
+    it('Shuld be constructed', () => {
+        (0, utils_1.using)(new inject_1.Injector(), (i) => {
             const s = i.getInstance(_1.LocationService);
             expect(s).toBeInstanceOf(_1.LocationService);
         });
     });
-    it('Shuld update state on events', async () => {
-        await (0, utils_1.usingAsync)(new inject_1.Injector(), async (i) => {
+    it('Shuld update state on events', () => {
+        (0, utils_1.using)(new inject_1.Injector(), (i) => {
             const onLocaionChanged = jest.fn();
             const s = i.getInstance(_1.LocationService);
             s.onLocationPathChanged.subscribe(onLocaionChanged);
@@ -32,5 +32,55 @@ describe('LocationService', () => {
             // expect(onLocaionChanged).toBeCalledTimes(4)
         });
     });
+    describe('useSearchParam', () => {
+        it('Should create observables lazily', () => {
+            (0, utils_1.using)(new inject_1.Injector(), (i) => {
+                const service = i.getInstance(_1.LocationService);
+                const observables = service.searchParamObservables;
+                const testSearchParam = service.useSearchParam('test', null);
+                expect(observables.size).toBe(1);
+                const testSearchParam2 = service.useSearchParam('test', null);
+                expect(observables.size).toBe(1);
+                expect(testSearchParam).toBe(testSearchParam2);
+                const testSearchParam3 = service.useSearchParam('test2', undefined);
+                expect(observables.size).toBe(2);
+                expect(testSearchParam3).not.toBe(testSearchParam2);
+            });
+        });
+        it('Should return the default value, if not present in the query string', () => {
+            (0, utils_1.using)(new inject_1.Injector(), (i) => {
+                const service = i.getInstance(_1.LocationService);
+                const testSearchParam = service.useSearchParam('test', { value: 'foo' });
+                expect(testSearchParam.getValue()).toEqual({ value: 'foo' });
+            });
+        });
+        it('Should return the value from the query string', () => {
+            (0, utils_1.using)(new inject_1.Injector(), (i) => {
+                const service = i.getInstance(_1.LocationService);
+                history.pushState(null, '', '/loc1?test=1');
+                const testSearchParam = service.useSearchParam('test', 123);
+                expect(testSearchParam.getValue()).toBe(1);
+            });
+        });
+        it('should update the observable value on push / replace states', () => {
+            (0, utils_1.using)(new inject_1.Injector(), (i) => {
+                const service = i.getInstance(_1.LocationService);
+                history.pushState(null, '', '/loc1?test=1');
+                const testSearchParam = service.useSearchParam('test', 234);
+                expect(testSearchParam.getValue()).toBe(1);
+                history.replaceState(null, '', '/loc1?test=2');
+                expect(testSearchParam.getValue()).toBe(2);
+            });
+        });
+        it('Should update the URL based on search value change', () => {
+            (0, utils_1.using)(new inject_1.Injector(), (i) => {
+                const service = i.getInstance(_1.LocationService);
+                history.pushState(null, '', '/loc1?test=2');
+                const testSearchParam = service.useSearchParam('test', '');
+                testSearchParam.setValue('2');
+                expect(location.search).toBe('?test=2');
+            });
+        });
+    });
 });
 //# sourceMappingURL=location-service.spec.js.map

package/dist/services/location-service.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"location-service.spec.js","sourceRoot":"","sources":["../../src/services/location-service.spec.ts"],"names":[],"mappings":";;AAAA,+BAA+C;AAE/C,MAAM,CAAC,WAAW,GAAG,kBAAW,CAAA;AAChC,MAAM,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEvC,8CAA4C;AAC5C,4CAA6C;AAC7C,yBAAoC;AAEpC,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,uBAAuB,CAAC,CAAC,CAAA;IACrE,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,CAAC,CAAA;IAE/C,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,IAAA,kBAAU,EAAC,IAAI,iBAAQ,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;YAC3C,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,kBAAe,CAAC,CAAA;YACxC,MAAM,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,kBAAe,CAAC,CAAA;QAC3C,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAA,kBAAU,EAAC,IAAI,iBAAQ,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;YAC3C,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAA;YAClC,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,kBAAe,CAAC,CAAA;YACxC,CAAC,CAAC,qBAAqB,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;YACnD,MAAM,CAAC,gBAAgB,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA;YAC3C,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,CAAA;YACpC,MAAM,CAAC,gBAAgB,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA;YAC3C,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,CAAA;YACvC,MAAM,CAAC,gBAAgB,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA;YAE3C,iEAAiE;YACjE,+EAA+E;YAC/E,8CAA8C;YAC9C,0DAA0D;YAC1D,8CAA8C;QAChD,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"version":3,"file":"location-service.spec.js","sourceRoot":"","sources":["../../src/services/location-service.spec.ts"],"names":[],"mappings":"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"}

package/dist/shade.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Shade = void 0;
+const utils_1 = require("@furystack/utils");
 const inject_1 = require("@furystack/inject");
 const resource_manager_1 = require("./services/resource-manager");
+const services_1 = require("./services");
 /**
  * Factory method for creating Shade components
  *
@@ -34,6 +36,50 @@ const Shade = (o) => {
                         element: this,
                         useObservable: (key, obesrvable, callback, getLast) => this.resourceManager.useObservable(key, obesrvable, callback || (() => this.updateComponent()), getLast),
                         useState: (key, initialValue) => this.resourceManager.useState(key, initialValue, this.updateComponent.bind(this)),
+                        useSearchState: (key, initialValue) => this.resourceManager.useObservable(`useSearchState-${key}`, this.injector.getInstance(services_1.LocationService).useSearchParam(key, initialValue), () => this.updateComponent()),
+                        useStoredState: (key, initialValue, storageArea = localStorage) => {
+                            const getFromStorage = () => {
+                                const value = storageArea?.getItem(key);
+                                return value ? JSON.parse(value) : initialValue;
+                            };
+                            const setToStorage = (value) => {
+                                if (JSON.stringify(value) !== storageArea?.getItem(key)) {
+                                    const newValue = JSON.stringify(value);
+                                    storageArea?.setItem(key, newValue);
+                                }
+                                if (JSON.stringify(observable.getValue()) !== JSON.stringify(value)) {
+                                    observable.setValue(value);
+                                }
+                            };
+                            const observable = this.resourceManager.useDisposable(`useStoredState-${key}`, () => new utils_1.ObservableValue(getFromStorage()));
+                            const updateFromStorageEvent = (e) => {
+                                e.key === key &&
+                                    e.storageArea === storageArea &&
+                                    setToStorage((e.newValue && JSON.parse(e.newValue)) || initialValue);
+                            };
+                            this.resourceManager.useDisposable(`useStoredState-${key}-storage-event`, () => {
+                                window.addEventListener('storage', updateFromStorageEvent);
+                                const channelName = `useStoredState-broadcast-channel`;
+                                const messageChannel = new BroadcastChannel(channelName);
+                                messageChannel.onmessage = (e) => {
+                                    if (e.data.key === key) {
+                                        setToStorage(e.data.value);
+                                    }
+                                };
+                                const subscription = observable.subscribe((value) => {
+                                    messageChannel.postMessage({ key, value });
+                                });
+                                return {
+                                    dispose: () => {
+                                        window.removeEventListener('storage', updateFromStorageEvent);
+                                        subscription.dispose();
+                                        messageChannel.close();
+                                    },
+                                };
+                            });
+                            observable.subscribe(setToStorage);
+                            return this.resourceManager.useObservable(`useStoredState-${key}`, observable, () => this.updateComponent());
+                        },
                         useDisposable: this.resourceManager.useDisposable.bind(this.resourceManager),
                     };
                     return renderOptions;

package/dist/shade.js.map

@@ -1 +1 @@
-{"version":3,"file":"shade.js","sourceRoot":"","sources":["../src/shade.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"shade.js","sourceRoot":"","sources":["../src/shade.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades",
-  "version": "7.0.0",
+  "version": "7.1.1",
   "description": "Google Authentication Provider for FuryStack",
   "main": "dist/index.js",
   "files": [
@@ -29,15 +29,16 @@
   },
   "homepage": "https://github.com/furystack/furystack",
   "devDependencies": {
-    "@types/jest": "^29.2.6",
+    "@types/jest": "^29.4.0",
     "@types/jsdom": "^20.0.1",
     "@types/node": "^18.11.18",
-    "jsdom": "^21.0.0"
+    "jsdom": "^21.1.0"
   },
   "dependencies": {
-    "@furystack/core": "^11.2.3",
-    "@furystack/inject": "^7.1.5",
-    "@furystack/utils": "^3.1.5",
+    "@furystack/core": "^11.2.4",
+    "@furystack/inject": "^7.1.6",
+    "@furystack/rest": "^4.1.8",
+    "@furystack/utils": "^3.1.6",
     "path-to-regexp": "^6.2.1",
     "semaphore-async-await": "^1.5.1"
   },

package/src/models/render-options.ts

@@ -8,37 +8,59 @@ export type RenderOptions<TProps> = {
   injector: Injector
   children?: ChildrenList
   element: JSX.Element<TProps>
+  /**
+   * Creates and disposes a resource after the component has been detached from the DOM
+   *
+   * @param key The key for caching the disposable resource
+   * @param factory A factory method for creating the disposable resource
+   * @returns The Disposable instance
+   */
   useDisposable: <T extends Disposable>(key: string, factory: () => T) => T
+
+  /**
+   *
+   * @param key The key for caching the observable value
+   * @param observable The observable value to observe
+   * @param callback Optional callback for reacting to changes. If no callback provided, the component will re-render on change
+   * @param getLast An option to trigger the callback with the initial value
+   * @returns tuple with the current value and a setter function
+   */
   useObservable: <T>(
     key: string,
     observable: ObservableValue<T>,
-    callback?: (newValue: T) => void,
+    onChange?: (newValue: T) => void,
     getLast?: boolean,
   ) => [value: T, setValue: (newValue: T) => void]
+
+  /**
+   * Creates a state object that will trigger a component re-render on change
+   *
+   * @param key The Key for caching the observable value
+   * @param initialValue The initial value for the observable
+   * @returns tuple with the current value and a setter function
+   */
   useState: <T>(key: string, initialValue: T) => [value: T, setValue: (newValue: T) => void]
-}
 
-// export type RenderOptionsState<TState> = unknown extends TState
-//   ? {}
-//   : {
-//       /**
-//        * @returns the current state object
-//        */
-//       getState: () => TState
-//       /**
-//        * Update the current component state's multiple properties in one-shot
-//        *
-//        * @param newState The partial new state object
-//        * @param skipRender Option to skip the render process
-//        */
-//       updateState: (newState: PartialElement<TState>, skipRender?: boolean) => void
-//       /**
-//        * @param key The key on the state object
-//        * @returns A tuple with the value and the setter function
-//        */
-//       useState: <T extends keyof TState>(
-//         key: T,
-//       ) => [value: TState[T], setValue: (newValue: TState[T], skipRender?: boolean) => void]
-//     }
+  /**
+   * Creates a state object that will use a value from the search string of the current location. Triggers a component re-render on change
+   *
+   * @param key The Key for caching the observable value
+   * @param initialValue The initial value - if the value is not found in the search string
+   * @returns a tuple with the current value and a setter function
+   */
+  useSearchState: <T>(key: string, initialValue: T) => [value: T, setValue: (newValue: T) => void]
 
-// export type RenderOptions<TProps, TState> = RenderOptionsBase<TProps, TState> & RenderOptionsState<TState>
+  /**
+   * Creates a state object that will use a value from the storage area. Triggers a component re-render on change
+   *
+   * @param key The key in the storage area
+   * @param initialValue The initial value that will be used if the key is not found in the storage area
+   * @param storageArea The storage area to use
+   * @returns a tuple with the current value and a setter function
+   */
+  useStoredState: <T>(
+    key: string,
+    initialValue: T,
+    storageArea?: Storage,
+  ) => [value: T, setValue: (newValue: T) => void]
+}

package/src/services/location-service.spec.ts

@@ -4,22 +4,22 @@ global.TextEncoder = TextEncoder
 global.TextDecoder = TextDecoder as any
 
 import { Injector } from '@furystack/inject'
-import { usingAsync } from '@furystack/utils'
+import { using } from '@furystack/utils'
 import { LocationService } from './'
 
 describe('LocationService', () => {
   beforeEach(() => (document.body.innerHTML = '<div id="root"></div>'))
   afterEach(() => (document.body.innerHTML = ''))
 
-  it('Shuld be constructed', async () => {
-    await usingAsync(new Injector(), async (i) => {
+  it('Shuld be constructed', () => {
+    using(new Injector(), (i) => {
       const s = i.getInstance(LocationService)
       expect(s).toBeInstanceOf(LocationService)
     })
   })
 
-  it('Shuld update state on events', async () => {
-    await usingAsync(new Injector(), async (i) => {
+  it('Shuld update state on events', () => {
+    using(new Injector(), (i) => {
       const onLocaionChanged = jest.fn()
       const s = i.getInstance(LocationService)
       s.onLocationPathChanged.subscribe(onLocaionChanged)
@@ -36,4 +36,64 @@ describe('LocationService', () => {
       // expect(onLocaionChanged).toBeCalledTimes(4)
     })
   })
+
+  describe('useSearchParam', () => {
+    it('Should create observables lazily', () => {
+      using(new Injector(), (i) => {
+        const service = i.getInstance(LocationService)
+        const observables = service.searchParamObservables
+
+        const testSearchParam = service.useSearchParam('test', null)
+        expect(observables.size).toBe(1)
+
+        const testSearchParam2 = service.useSearchParam('test', null)
+        expect(observables.size).toBe(1)
+
+        expect(testSearchParam).toBe(testSearchParam2)
+
+        const testSearchParam3 = service.useSearchParam('test2', undefined)
+        expect(observables.size).toBe(2)
+
+        expect(testSearchParam3).not.toBe(testSearchParam2)
+      })
+    })
+
+    it('Should return the default value, if not present in the query string', () => {
+      using(new Injector(), (i) => {
+        const service = i.getInstance(LocationService)
+        const testSearchParam = service.useSearchParam('test', { value: 'foo' })
+        expect(testSearchParam.getValue()).toEqual({ value: 'foo' })
+      })
+    })
+
+    it('Should return the value from the query string', () => {
+      using(new Injector(), (i) => {
+        const service = i.getInstance(LocationService)
+        history.pushState(null, '', '/loc1?test=1')
+        const testSearchParam = service.useSearchParam('test', 123)
+        expect(testSearchParam.getValue()).toBe(1)
+      })
+    })
+
+    it('should update the observable value on push / replace states', () => {
+      using(new Injector(), (i) => {
+        const service = i.getInstance(LocationService)
+        history.pushState(null, '', '/loc1?test=1')
+        const testSearchParam = service.useSearchParam('test', 234)
+        expect(testSearchParam.getValue()).toBe(1)
+        history.replaceState(null, '', '/loc1?test=2')
+        expect(testSearchParam.getValue()).toBe(2)
+      })
+    })
+
+    it('Should update the URL based on search value change', () => {
+      using(new Injector(), (i) => {
+        const service = i.getInstance(LocationService)
+        history.pushState(null, '', '/loc1?test=2')
+        const testSearchParam = service.useSearchParam('test', '')
+        testSearchParam.setValue('2')
+        expect(location.search).toBe('?test=2')
+      })
+    })
+  })
 })

package/src/services/location-service.tsx

@@ -1,6 +1,7 @@
 import type { Disposable } from '@furystack/utils'
 import { ObservableValue, Trace } from '@furystack/utils'
 import { Injectable } from '@furystack/inject'
+import { deserializeQueryString, serializeToQueryString } from '@furystack/rest'
 @Injectable({ lifetime: 'singleton' })
 export class LocationService implements Disposable {
   public dispose() {
@@ -9,6 +10,9 @@ export class LocationService implements Disposable {
     this.pushStateTracer.dispose()
     this.replaceStateTracer.dispose()
     this.onLocationPathChanged.dispose()
+    this.onLocationSearchChanged.dispose()
+    this.onDeserializedLocationSearchChanged.dispose()
+    this.locationDeserializerObserver.dispose()
   }
 
   /**
@@ -24,7 +28,15 @@ export class LocationService implements Disposable {
   /**
    * Observable value that will be updated when the location search (e.g. ?search=1) changes
    */
-  public onLocationSearchChanged = new ObservableValue(location.search)
+  public onLocationSearchChanged = new ObservableValue<string>(location.search)
+
+  public onDeserializedLocationSearchChanged = new ObservableValue(
+    deserializeQueryString(this.onLocationSearchChanged.getValue()),
+  )
+
+  public locationDeserializerObserver = this.onLocationSearchChanged.subscribe((search) => {
+    this.onDeserializedLocationSearchChanged.setValue(deserializeQueryString(search))
+  })
 
   public updateState() {
     this.onLocationPathChanged.setValue(location.pathname)
@@ -32,6 +44,33 @@ export class LocationService implements Disposable {
     this.onLocationSearchChanged.setValue(location.search)
   }
 
+  public readonly searchParamObservables = new Map<string, ObservableValue<any>>()
+
+  /**
+   *
+   * @param key The search param key (e.g. ?search=1 -> search)
+   * @param defaultValue The default value if not provided
+   * @returns An observable with the current value (or default value) of the search param
+   */
+  public useSearchParam<T>(key: string, defaultValue: T) {
+    const actualValue = (this.onDeserializedLocationSearchChanged.getValue()[key] as T) ?? defaultValue
+    if (!this.searchParamObservables.has(key)) {
+      const newObservable = new ObservableValue(actualValue)
+      this.searchParamObservables.set(key, newObservable)
+
+      newObservable.subscribe((value) => {
+        const params = serializeToQueryString({ ...deserializeQueryString(location.search), [key]: value })
+        history.pushState({}, '', `${location.pathname}?${params}`)
+      })
+
+      this.onDeserializedLocationSearchChanged.subscribe((search) => {
+        const value = (search[key] as T) ?? defaultValue
+        this.searchParamObservables.get(key)?.setValue(value as T)
+      })
+    }
+    return this.searchParamObservables.get(key) as ObservableValue<T>
+  }
+
   private pushStateTracer: Disposable
   private replaceStateTracer: Disposable
 

package/src/shade.ts

@@ -1,7 +1,9 @@
 import type { Disposable } from '@furystack/utils'
+import { ObservableValue } from '@furystack/utils'
 import { Injector } from '@furystack/inject'
 import type { ChildrenList, RenderOptions } from './models'
 import { ResourceManager } from './services/resource-manager'
+import { LocationService } from './services'
 
 export type ShadeOptions<TProps> = {
   /**
@@ -95,6 +97,68 @@ export const Shade = <TProps>(o: ShadeOptions<TProps>) => {
               this.resourceManager.useObservable(key, obesrvable, callback || (() => this.updateComponent()), getLast),
             useState: (key, initialValue) =>
               this.resourceManager.useState(key, initialValue, this.updateComponent.bind(this)),
+            useSearchState: (key, initialValue) =>
+              this.resourceManager.useObservable(
+                `useSearchState-${key}`,
+                this.injector.getInstance(LocationService).useSearchParam(key, initialValue),
+                () => this.updateComponent(),
+              ),
+
+            useStoredState: <T>(key: string, initialValue: T, storageArea = localStorage) => {
+              const getFromStorage = () => {
+                const value = storageArea?.getItem(key)
+                return value ? JSON.parse(value) : initialValue
+              }
+
+              const setToStorage = (value: T) => {
+                if (JSON.stringify(value) !== storageArea?.getItem(key)) {
+                  const newValue = JSON.stringify(value)
+                  storageArea?.setItem(key, newValue)
+                }
+                if (JSON.stringify(observable.getValue()) !== JSON.stringify(value)) {
+                  observable.setValue(value)
+                }
+              }
+
+              const observable = this.resourceManager.useDisposable(
+                `useStoredState-${key}`,
+                () => new ObservableValue(getFromStorage()),
+              )
+
+              const updateFromStorageEvent = (e: StorageEvent) => {
+                e.key === key &&
+                  e.storageArea === storageArea &&
+                  setToStorage((e.newValue && JSON.parse(e.newValue)) || initialValue)
+              }
+
+              this.resourceManager.useDisposable(`useStoredState-${key}-storage-event`, () => {
+                window.addEventListener('storage', updateFromStorageEvent)
+                const channelName = `useStoredState-broadcast-channel`
+                const messageChannel = new BroadcastChannel(channelName)
+                messageChannel.onmessage = (e) => {
+                  if (e.data.key === key) {
+                    setToStorage(e.data.value)
+                  }
+                }
+                const subscription = observable.subscribe((value) => {
+                  messageChannel.postMessage({ key, value })
+                })
+
+                return {
+                  dispose: () => {
+                    window.removeEventListener('storage', updateFromStorageEvent)
+                    subscription.dispose()
+                    messageChannel.close()
+                  },
+                }
+              })
+
+              observable.subscribe(setToStorage)
+
+              return this.resourceManager.useObservable(`useStoredState-${key}`, observable, () =>
+                this.updateComponent(),
+              )
+            },
             useDisposable: this.resourceManager.useDisposable.bind(this.resourceManager),
           }
 

package/types/models/render-options.d.ts

@@ -6,8 +6,47 @@ export type RenderOptions<TProps> = {
     injector: Injector;
     children?: ChildrenList;
     element: JSX.Element<TProps>;
+    /**
+     * Creates and disposes a resource after the component has been detached from the DOM
+     *
+     * @param key The key for caching the disposable resource
+     * @param factory A factory method for creating the disposable resource
+     * @returns The Disposable instance
+     */
     useDisposable: <T extends Disposable>(key: string, factory: () => T) => T;
-    useObservable: <T>(key: string, observable: ObservableValue<T>, callback?: (newValue: T) => void, getLast?: boolean) => [value: T, setValue: (newValue: T) => void];
+    /**
+     *
+     * @param key The key for caching the observable value
+     * @param observable The observable value to observe
+     * @param callback Optional callback for reacting to changes. If no callback provided, the component will re-render on change
+     * @param getLast An option to trigger the callback with the initial value
+     * @returns tuple with the current value and a setter function
+     */
+    useObservable: <T>(key: string, observable: ObservableValue<T>, onChange?: (newValue: T) => void, getLast?: boolean) => [value: T, setValue: (newValue: T) => void];
+    /**
+     * Creates a state object that will trigger a component re-render on change
+     *
+     * @param key The Key for caching the observable value
+     * @param initialValue The initial value for the observable
+     * @returns tuple with the current value and a setter function
+     */
     useState: <T>(key: string, initialValue: T) => [value: T, setValue: (newValue: T) => void];
+    /**
+     * Creates a state object that will use a value from the search string of the current location. Triggers a component re-render on change
+     *
+     * @param key The Key for caching the observable value
+     * @param initialValue The initial value - if the value is not found in the search string
+     * @returns a tuple with the current value and a setter function
+     */
+    useSearchState: <T>(key: string, initialValue: T) => [value: T, setValue: (newValue: T) => void];
+    /**
+     * Creates a state object that will use a value from the storage area. Triggers a component re-render on change
+     *
+     * @param key The key in the storage area
+     * @param initialValue The initial value that will be used if the key is not found in the storage area
+     * @param storageArea The storage area to use
+     * @returns a tuple with the current value and a setter function
+     */
+    useStoredState: <T>(key: string, initialValue: T, storageArea?: Storage) => [value: T, setValue: (newValue: T) => void];
 };
 //# sourceMappingURL=render-options.d.ts.map

package/types/models/render-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render-options.d.ts","sourceRoot":"","sources":["../../src/models/render-options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEnE,MAAM,MAAM,aAAa,CAAC,MAAM,IAAI;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IAEtB,QAAQ,EAAE,QAAQ,CAAA;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;IAC5B,aAAa,EAAE,CAAC,CAAC,SAAS,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,CAAA;IACzE,aAAa,EAAE,CAAC,CAAC,EACf,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC,EAC9B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,EAChC,OAAO,CAAC,EAAE,OAAO,KACd,CAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,CAAA;IAChD,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,CAAA;CAC3F,CAAA"}
+{"version":3,"file":"render-options.d.ts","sourceRoot":"","sources":["../../src/models/render-options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEnE,MAAM,MAAM,aAAa,CAAC,MAAM,IAAI;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IAEtB,QAAQ,EAAE,QAAQ,CAAA;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;IAC5B;;;;;;OAMG;IACH,aAAa,EAAE,CAAC,CAAC,SAAS,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,CAAA;IAEzE;;;;;;;OAOG;IACH,aAAa,EAAE,CAAC,CAAC,EACf,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC,EAC9B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,EAChC,OAAO,CAAC,EAAE,OAAO,KACd,CAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,CAAA;IAEhD;;;;;;OAMG;IACH,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,CAAA;IAE1F;;;;;;OAMG;IACH,cAAc,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,CAAA;IAEhG;;;;;;;OAOG;IACH,cAAc,EAAE,CAAC,CAAC,EAChB,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,EACf,WAAW,CAAC,EAAE,OAAO,KAClB,CAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,CAAA;CACjD,CAAA"}

package/types/services/location-service.d.ts

@@ -14,7 +14,17 @@ export declare class LocationService implements Disposable {
      * Observable value that will be updated when the location search (e.g. ?search=1) changes
      */
     onLocationSearchChanged: ObservableValue<string>;
+    onDeserializedLocationSearchChanged: ObservableValue<any>;
+    locationDeserializerObserver: import("@furystack/utils").ValueObserver<string>;
     updateState(): void;
+    readonly searchParamObservables: Map<string, ObservableValue<any>>;
+    /**
+     *
+     * @param key The search param key (e.g. ?search=1 -> search)
+     * @param defaultValue The default value if not provided
+     * @returns An observable with the current value (or default value) of the search param
+     */
+    useSearchParam<T>(key: string, defaultValue: T): ObservableValue<T>;
     private pushStateTracer;
     private replaceStateTracer;
     constructor();

package/types/services/location-service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"location-service.d.ts","sourceRoot":"","sources":["../../src/services/location-service.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,eAAe,EAAS,MAAM,kBAAkB,CAAA;AAEzD,qBACa,eAAgB,YAAW,UAAU;IACzC,OAAO;IAQd;;OAEG;IACI,qBAAqB,0BAAuD;IAEnF;;OAEG;IACI,qBAAqB,0BAAqC;IAEjE;;OAEG;IACI,uBAAuB,0BAAuC;IAE9D,WAAW;IAMlB,OAAO,CAAC,eAAe,CAAY;IACnC,OAAO,CAAC,kBAAkB,CAAY;;CAoBvC"}
+{"version":3,"file":"location-service.d.ts","sourceRoot":"","sources":["../../src/services/location-service.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,eAAe,EAAS,MAAM,kBAAkB,CAAA;AAGzD,qBACa,eAAgB,YAAW,UAAU;IACzC,OAAO;IAWd;;OAEG;IACI,qBAAqB,0BAAuD;IAEnF;;OAEG;IACI,qBAAqB,0BAAqC;IAEjE;;OAEG;IACI,uBAAuB,0BAA+C;IAEtE,mCAAmC,uBAEzC;IAEM,4BAA4B,mDAEjC;IAEK,WAAW;IAMlB,SAAgB,sBAAsB,oCAA0C;IAEhF;;;;;OAKG;IACI,cAAc,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC;IAmBrD,OAAO,CAAC,eAAe,CAAY;IACnC,OAAO,CAAC,kBAAkB,CAAY;;CAoBvC"}

package/types/shade.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shade.d.ts","sourceRoot":"","sources":["../src/shade.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAG3D,MAAM,MAAM,YAAY,CAAC,MAAM,IAAI;IACjC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,MAAM,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,OAAO,GAAG,MAAM,GAAG,IAAI,CAAA;IAEvE;;OAEG;IACH,WAAW,CAAC,EAAE,CACZ,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,KAC3B,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,CAAA;IAE/E;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IAEnD;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IAEnD;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,UAAU,EAAE,CAAA;CAC7D,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,kGAgJjB,CAAA"}
+{"version":3,"file":"shade.d.ts","sourceRoot":"","sources":["../src/shade.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAGlD,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAI3D,MAAM,MAAM,YAAY,CAAC,MAAM,IAAI;IACjC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,MAAM,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,OAAO,GAAG,MAAM,GAAG,IAAI,CAAA;IAEvE;;OAEG;IACH,WAAW,CAAC,EAAE,CACZ,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,KAC3B,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,CAAA;IAE/E;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IAEnD;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IAEnD;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,UAAU,EAAE,CAAA;CAC7D,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,kGA8MjB,CAAA"}