@nu-art/app-state 0.400.7

package/frontend/_ats/ATS_AppState/ATS_AppState.d.ts

@@ -0,0 +1,2 @@
+import { AppToolsScreen } from '@nu-art/thunderstorm-frontend/index';
+export declare const ATS_AppState: AppToolsScreen;

package/frontend/_ats/ATS_AppState/ATS_AppState.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ComponentSync, LL_V_L, TS_Input, TS_PropRenderer } from '@nu-art/thunderstorm-frontend/index';
+import { thunderstormCapabilitiesGroup } from '@nu-art/thunderstorm-frontend/consts';
+import { PageStateManager } from '../../_modules/ModuleFE_AppState.js';
+import { md5 } from '@nu-art/ts-common';
+const manager = new PageStateManager(`/app-tools/${md5('App State')}`);
+class ATS_AppState_Class extends ComponentSync {
+    deriveStateFromProps(p, state) {
+        state.value_Input ??= manager.value.get('value_Input');
+        return state;
+    }
+    render() {
+        return _jsxs(LL_V_L, { children: [_jsx(TS_PropRenderer.Horizontal, { label: 'Input', children: _jsx(TS_Input, { type: 'text', value: this.state.value_Input, onChange: val => {
+                            this.setState({ value_Input: val }, () => manager.value.set('value_Input', val));
+                        } }) }), _jsx(Button, { variant: 'primary', onClick: () => manager.getExportURL(), children: "Export State" })] });
+    }
+}
+export const ATS_AppState = {
+    key: 'ats-app-state',
+    name: 'App State',
+    renderer: ATS_AppState_Class,
+    group: thunderstormCapabilitiesGroup,
+};

package/frontend/_modules/ModuleFE_AppState.d.ts

@@ -0,0 +1,20 @@
+import { Logger, TS_Object } from '@nu-art/ts-common';
+import { ThunderDispatcher } from '@nu-art/thunderstorm-frontend/index';
+export interface OnPageStateUpdated {
+    __onPageStateUpdated: (manager: PageStateManager<any>) => void;
+}
+export declare const dispatch_OnPageStateUpdated: ThunderDispatcher<OnPageStateUpdated, "__onPageStateUpdated", [manager: PageStateManager<any>], void>;
+export declare class PageStateManager<PageState extends TS_Object> extends Logger {
+    readonly route: string;
+    constructor(route: string);
+    value: {
+        get: <K extends keyof PageState>(stateKey: K) => PageState[K];
+        set: <K extends keyof PageState>(stateKey: K, value: PageState[K]) => void;
+    };
+    state: {
+        get: () => PageState;
+        set: (state: Partial<PageState>) => void;
+    };
+    getDispatchListenerCB: (cb: VoidFunction) => (manager: PageStateManager<any>) => void;
+    getExportURL: () => void;
+}

package/frontend/_modules/ModuleFE_AppState.js

@@ -0,0 +1,98 @@
+import { _keys, BadImplementationException, cloneObj, composeUrl, deepClone, exists, Logger, mergeObject, Module } from '@nu-art/ts-common';
+import { ModuleFE_BrowserHistory, ModuleFE_Thunderstorm, StorageKey, ThunderDispatcher } from '@nu-art/thunderstorm-frontend/index';
+import { convertBase64ToObject, convertObjectToBase64 } from '@nu-art/thunderstorm-shared/base64-tools';
+import { URLParam_AppState } from './consts.js';
+export const dispatch_OnPageStateUpdated = new ThunderDispatcher('__onPageStateUpdated');
+class ModuleFE_AppState_Class extends Module {
+    pathRegistry;
+    appState;
+    localStorage;
+    sessionStorage;
+    constructor() {
+        super();
+        this.localStorage = new StorageKey('app-state', true);
+        this.sessionStorage = new StorageKey('app-state', false);
+        this.pathRegistry = {};
+        this.appState = this.sessionStorage.get(() => this.localStorage.get({}));
+        this.deriveStateFromURLParam();
+    }
+    registerManager = (manager) => {
+        if (exists(this.pathRegistry[manager.route]))
+            throw new BadImplementationException(`A manager is already registered for route: ${manager.route}`);
+        this.pathRegistry[manager.route] = manager;
+    };
+    // ######################### State Interaction #########################
+    setPageState = (manager, state) => {
+        this.appState[manager.route] = state;
+        this.sessionStorage.set(this.appState);
+        this.localStorage.set(this.appState);
+    };
+    getPageState = (manager) => this.appState[manager.route] ?? {};
+    // ######################### Import / Export #########################
+    deriveStateFromURLParam = () => {
+        const encoded = ModuleFE_BrowserHistory.getQueryParameter(URLParam_AppState);
+        if (!exists(encoded))
+            return;
+        const decoded = this.decodeState(encoded);
+        _keys(decoded).forEach(key => {
+            this.appState[key] = mergeObject(this.appState[key], decoded[key]);
+        });
+        ModuleFE_BrowserHistory.removeQueryParam(URLParam_AppState);
+    };
+    getExportStateForManager = (manager) => {
+        const pageState = this.getPageState(manager);
+        const appState = { [manager.route]: pageState };
+        const encoded = this.encodeState(appState);
+        const baseUrl = window.location.origin + manager.route;
+        return composeUrl(baseUrl, { [URLParam_AppState]: encoded });
+    };
+    encodeState = (decoded) => {
+        return convertObjectToBase64(decoded);
+    };
+    decodeState = (encoded) => {
+        return convertBase64ToObject(encoded);
+    };
+}
+const ModuleFE_AppState = new ModuleFE_AppState_Class();
+export class PageStateManager extends Logger {
+    route;
+    constructor(route) {
+        super();
+        this.route = route;
+        ModuleFE_AppState.registerManager(this);
+    }
+    // ######################### State Interaction #########################
+    value = {
+        get: (stateKey) => {
+            const pageState = this.state.get();
+            return pageState[stateKey];
+        },
+        set: (stateKey, value) => {
+            const _value = deepClone(value);
+            const nextPageState = this.state.get();
+            nextPageState[stateKey] = _value;
+            ModuleFE_AppState.setPageState(this, nextPageState);
+        }
+    };
+    state = {
+        get: () => {
+            return ModuleFE_AppState.getPageState(this);
+        },
+        set: (state) => {
+            const prevPageState = this.state.get();
+            const nextPageState = mergeObject(prevPageState, cloneObj(state));
+            ModuleFE_AppState.setPageState(this, nextPageState);
+        }
+    };
+    // ######################### Utils #########################
+    getDispatchListenerCB = (cb) => {
+        return (manager) => {
+            if (manager === this)
+                cb();
+        };
+    };
+    getExportURL = () => {
+        const url = ModuleFE_AppState.getExportStateForManager(this);
+        ModuleFE_Thunderstorm.copyToClipboard(url, 'Export URL copied to clipboard');
+    };
+}

package/frontend/_modules/consts.d.ts

@@ -0,0 +1 @@
+export declare const URLParam_AppState = "app-state";

package/frontend/_modules/consts.js

@@ -0,0 +1 @@
+export const URLParam_AppState = 'app-state';

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@nu-art/app-state",
+  "version": "0.400.7",
+  "description": "App State",
+  "keywords": [
+    "TacB0sS",
+    "express",
+    "infra",
+    "nu-art",
+    "thunderstorm",
+    "typescript"
+  ],
+  "homepage": "https://github.com/nu-art-js/thunderstorm",
+  "bugs": {
+    "url": "https://github.com/nu-art-js/thunderstorm/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:nu-art-js/thunderstorm.git"
+  },
+  "license": "Apache-2.0",
+  "author": "TacB0sS",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "tsc"
+  },
+  "contributors": [
+    {
+      "name": "TacB0sS"
+    },
+    {
+      "name": "Cipher",
+      "url": "https://www.linkedin.com/in/itay-leybovich-470b87229/"
+    }
+  ],
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "dependencies": {
+    "@nu-art/ts-common": "0.400.7",
+    "@nu-art/ts-styles": "0.400.7",
+    "@nu-art/thunderstorm-shared": "0.400.7",
+    "@nu-art/thunderstorm-frontend": "0.400.7",
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0"
+  },
+  "unitConfig": {
+    "type": "typescript-lib"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./*": {
+      "types": "./*.d.ts",
+      "import": "./*.js"
+    }
+  }
+}

package/shared/index.d.ts

@@ -0,0 +1 @@
+export * from './types.js';

package/shared/index.js

@@ -0,0 +1 @@
+export * from './types.js';

package/shared/types.d.ts

@@ -0,0 +1,4 @@
+import { TS_Object } from '@nu-art/ts-common';
+export type AppState = {
+    [path: string]: TS_Object;
+};

package/shared/types.js

@@ -0,0 +1 @@
+export {};