quidproquo-web-react 0.0.253 → 0.0.254

package/lib/commonjs/hooks/asmj/QpqRuntimeEffectCatcher.js

@@ -10,7 +10,7 @@ const BubbleReducerDispatchContext = (0, react_1.createContext)((_action) => {
     // NOOP
 });
 const useQpqRuntimeBubblingReducer = (runtimeDefinition, name) => {
-    const runtimeDefinitionInfo = runtimeDefinition(name);
+    const runtimeDefinitionInfo = (0, react_1.useMemo)(() => runtimeDefinition(name), [runtimeDefinition, name]);
     const [state, setState, getState] = (0, _1.useQpqRuntimeState)(runtimeDefinition, name);
     // Get the parent dispatch from the context
     const parentDispatch = (0, react_1.useContext)(BubbleReducerDispatchContext);

package/lib/commonjs/hooks/asmj/createQpqRuntimeDefinition.d.ts

@@ -1,7 +1,9 @@
 import { atom } from 'jotai';
+import { selectAtom } from 'jotai/utils';
 import { QpqApi } from './QpqMappedApi';
 import { QpqBubbleReducer } from './QpqRuntimeEffectCatcher';
 type CustomJotaiReducerAtom<TState> = ReturnType<typeof atom<TState>>;
+type CustomJotaiComputedAtom<TState, TSlice> = ReturnType<typeof selectAtom<TState, TSlice>>;
 export type QpqAsmjState<TState, TAction, TApi extends QpqApi> = {
     atom: CustomJotaiReducerAtom<TState>;
     reducer: QpqBubbleReducer<TState, TAction>;
@@ -10,7 +12,11 @@ export type QpqAsmjState<TState, TAction, TApi extends QpqApi> = {
     state: TState;
 };
 type AsmjStateGetter<TState, TAction, TApi extends QpqApi> = (name?: string) => QpqAsmjState<TState, TAction, TApi>;
+type AsmjStateComputer<TState, TSlice> = (name?: string) => CustomJotaiComputedAtom<TState, TSlice>;
 export type QpqRuntimeDefinition<TState, TAction, TApi extends QpqApi> = AsmjStateGetter<TState, TAction, TApi>;
+export type QpqRuntimeComputed<TState, TSlice> = AsmjStateComputer<TState, TSlice>;
 export declare function createQpqRuntimeDefinition<TState, TAction, TApi extends QpqApi>(api: TApi, initialState: TState, reducer?: QpqBubbleReducer<TState, TAction>): QpqRuntimeDefinition<TState, TAction, TApi>;
+export declare function createQpqRuntimeComputed<TState, TAction, TApi extends QpqApi, TSlice>(atom: QpqRuntimeDefinition<TState, TAction, TApi>, compute: (state: TState) => TSlice): QpqRuntimeComputed<TState, TSlice>;
 export declare function useQpqRuntimeState<TState, TAction, TApi extends QpqApi>(atom: QpqRuntimeDefinition<TState, TAction, TApi>, name?: string): [TState, (newState: TState) => void, () => TState];
+export declare function useQpqRuntimeComputed<TState, TSlice>(computedAtom: QpqRuntimeComputed<TState, TSlice>, name?: string): TSlice;
 export {};

package/lib/commonjs/hooks/asmj/createQpqRuntimeDefinition.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useQpqRuntimeState = exports.createQpqRuntimeDefinition = void 0;
+exports.useQpqRuntimeComputed = exports.useQpqRuntimeState = exports.createQpqRuntimeComputed = exports.createQpqRuntimeDefinition = void 0;
 const react_1 = require("react");
 const jotai_1 = require("jotai");
+const utils_1 = require("jotai/utils");
 function createQpqRuntimeDefinition(api, initialState, reducer = (s) => [s, false]) {
     const namedAtoms = new Map();
     const getCustomNamedAtom = (name) => {
         const actualName = name ? name : '$$qpq-default$$';
         if (!namedAtoms.has(actualName)) {
-            console.log('Creating Atom: ', actualName);
             const winAtom = {
                 atom: (0, jotai_1.atom)(initialState),
                 reducer,
@@ -23,8 +23,16 @@ function createQpqRuntimeDefinition(api, initialState, reducer = (s) => [s, fals
     return getCustomNamedAtom;
 }
 exports.createQpqRuntimeDefinition = createQpqRuntimeDefinition;
+function createQpqRuntimeComputed(atom, compute) {
+    return (name) => {
+        const info = atom(name);
+        return (0, utils_1.selectAtom)(info.atom, compute);
+    };
+}
+exports.createQpqRuntimeComputed = createQpqRuntimeComputed;
 function useQpqRuntimeState(atom, name) {
-    const [state, setState] = (0, jotai_1.useAtom)(atom(name).atom);
+    const actualAtom = (0, react_1.useMemo)(() => atom(name).atom, [atom, name]);
+    const [state, setState] = (0, jotai_1.useAtom)(actualAtom);
     const setStateWrapper = (0, react_1.useCallback)((newState) => {
         const info = atom(name);
         info.state = newState;
@@ -33,7 +41,13 @@ function useQpqRuntimeState(atom, name) {
     const getState = (0, react_1.useCallback)(() => {
         const state = atom(name).state;
         return state;
-    }, [atom]);
+    }, [atom, name]);
     return [state, setStateWrapper, getState];
 }
 exports.useQpqRuntimeState = useQpqRuntimeState;
+function useQpqRuntimeComputed(computedAtom, name) {
+    const computedAtomValue = (0, react_1.useMemo)(() => computedAtom(name), [computedAtom, name]);
+    const [state] = (0, jotai_1.useAtom)(computedAtomValue);
+    return state;
+}
+exports.useQpqRuntimeComputed = useQpqRuntimeComputed;

package/lib/commonjs/hooks/asmj/useQpqRuntime.js

@@ -6,7 +6,7 @@ const useQpq_1 = require("../useQpq");
 const actionProcessor_1 = require("./actionProcessor");
 const QpqRuntimeEffectCatcher_1 = require("./QpqRuntimeEffectCatcher");
 function useQpqRuntime(atom, mainStory, name) {
-    const atomInfo = atom(name);
+    const atomInfo = (0, react_1.useMemo)(() => atom(name), [atom, name]);
     const [state, dispatch, getCurrentState] = (0, QpqRuntimeEffectCatcher_1.useQpqRuntimeBubblingReducer)(atom, name);
     // Api generators are memoized to prevent unnecessary re-renders.
     const [memoedApiGenerators] = (0, react_1.useState)(() => atomInfo.api);

package/lib/commonjs/hooks/useQpq.js

@@ -12,26 +12,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useQpq = void 0;
 const quidproquo_actionprocessor_web_1 = require("quidproquo-actionprocessor-web");
 const quidproquo_core_1 = require("quidproquo-core");
+const react_1 = require("react");
 const asmj_1 = require("./asmj");
 // WIP ~ useFastCallback, wack things like loggers in a context, try to only make once instance of the runtime.
 // Also don't create every refresh.. useMemo / useCallback etc
+const logger = {
+    enableLogs: () => __awaiter(void 0, void 0, void 0, function* () { }),
+    log: () => __awaiter(void 0, void 0, void 0, function* () { }),
+    waitToFinishWriting: () => __awaiter(void 0, void 0, void 0, function* () { }),
+    moveToPermanentStorage: () => __awaiter(void 0, void 0, void 0, function* () { }),
+};
 function useQpq(getActionProcessors = () => __awaiter(this, void 0, void 0, function* () { return ({}); })) {
     const qpqContextValues = (0, asmj_1.useQpqContextValues)();
-    const logger = {
-        enableLogs: () => __awaiter(this, void 0, void 0, function* () { }),
-        log: () => __awaiter(this, void 0, void 0, function* () { }),
-        waitToFinishWriting: () => __awaiter(this, void 0, void 0, function* () { }),
-        moveToPermanentStorage: () => __awaiter(this, void 0, void 0, function* () { }),
-    };
-    const resolveStory = (0, quidproquo_core_1.createRuntime)([(0, quidproquo_core_1.defineModule)('UI')], {
+    const resolveStory = (0, react_1.useMemo)(() => (0, quidproquo_core_1.createRuntime)([(0, quidproquo_core_1.defineModule)('UI')], {
         depth: 0,
         context: qpqContextValues,
     }, (qpqConfig, dynamicModuleLoader) => __awaiter(this, void 0, void 0, function* () {
         return (Object.assign(Object.assign({}, (yield (0, quidproquo_actionprocessor_web_1.getWebActionProcessors)(qpqConfig, dynamicModuleLoader))), (yield getActionProcessors(qpqConfig, dynamicModuleLoader))));
     }), () => new Date().toISOString(), logger, `frontend::${'uuid'}`, quidproquo_core_1.QpqRuntimeType.UI, (_runtime) => __awaiter(this, void 0, void 0, function* () {
         // noop
-    }));
-    return function getStoryExecutor(story) {
+    })), [qpqContextValues]);
+    const qpq = (0, react_1.useCallback)(function getStoryExecutor(story) {
         return (...args) => __awaiter(this, void 0, void 0, function* () {
             const result = yield resolveStory(story, args);
             if (result.error) {
@@ -39,6 +40,7 @@ function useQpq(getActionProcessors = () => __awaiter(this, void 0, void 0, func
             }
             return result.result;
         });
-    };
+    }, [resolveStory]);
+    return qpq;
 }
 exports.useQpq = useQpq;

package/lib/commonjs/index.d.ts

@@ -4,5 +4,7 @@ export * from './auth';
 export * from './baseUrl';
 export * from './hooks';
 export * from './state';
+export * from './useFieldBinding';
+export * from './useSharedQueryParams';
 export * from './websocket';
 export * from './webSocketQueue';

package/lib/commonjs/index.js

@@ -20,5 +20,7 @@ __exportStar(require("./auth"), exports);
 __exportStar(require("./baseUrl"), exports);
 __exportStar(require("./hooks"), exports);
 __exportStar(require("./state"), exports);
+__exportStar(require("./useFieldBinding"), exports);
+__exportStar(require("./useSharedQueryParams"), exports);
 __exportStar(require("./websocket"), exports);
 __exportStar(require("./webSocketQueue"), exports);

package/lib/commonjs/useFieldBinding/index.d.ts

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

package/lib/commonjs/useFieldBinding/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useFieldBinding"), exports);

package/lib/commonjs/useFieldBinding/useFieldBinding.d.ts

@@ -0,0 +1,2 @@
+import { QpqRuntimeComputed } from '../hooks';
+export declare const useFieldBinding: <TState, V, E = any>(computedAtom: QpqRuntimeComputed<TState, V>, someSetter: (value: V) => Promise<void> | void, valueExtractor?: ((event: E, ...args: any[]) => V) | undefined) => [V, (event: E, ...args: any[]) => void];

package/lib/commonjs/useFieldBinding/useFieldBinding.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldBinding = void 0;
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const useFieldBinding = (computedAtom, someSetter, valueExtractor) => {
+    const computedValue = (0, hooks_1.useQpqRuntimeComputed)(computedAtom);
+    const [value, setValue] = (0, react_1.useState)(computedValue);
+    const handleChange = (event, ...args) => {
+        const newValue = valueExtractor ? valueExtractor(event, ...args) : event.target.value;
+        setValue(newValue);
+        someSetter(newValue);
+    };
+    (0, react_1.useEffect)(() => {
+        if (computedValue !== value) {
+            setValue(computedValue);
+        }
+    }, [computedValue]);
+    return [value, handleChange];
+};
+exports.useFieldBinding = useFieldBinding;

package/lib/commonjs/useSharedQueryParams/index.d.ts

@@ -0,0 +1,2 @@
+export * from './logic';
+export * from './sharedQueryParamsRuntime';

package/lib/commonjs/useSharedQueryParams/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./logic"), exports);
+__exportStar(require("./sharedQueryParamsRuntime"), exports);

package/lib/commonjs/useSharedQueryParams/logic/index.d.ts

@@ -0,0 +1,4 @@
+export * from './runtime';
+export * from './sharedQueryParamsActionCreator';
+export * from './sharedQueryParamsReducer';
+export * from './sharedQueryParamsTypes';

package/lib/commonjs/useSharedQueryParams/logic/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./runtime"), exports);
+__exportStar(require("./sharedQueryParamsActionCreator"), exports);
+__exportStar(require("./sharedQueryParamsReducer"), exports);
+__exportStar(require("./sharedQueryParamsTypes"), exports);

package/lib/commonjs/useSharedQueryParams/logic/runtime/askSetParam.d.ts

@@ -0,0 +1,2 @@
+import { AskResponse } from 'quidproquo-core';
+export declare function askSetParam(key: string, values: string[]): AskResponse<void>;

package/lib/commonjs/useSharedQueryParams/logic/runtime/askSetParam.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.askSetParam = void 0;
+const quidproquo_web_1 = require("quidproquo-web");
+const sharedQueryParamsActionCreator_1 = require("../sharedQueryParamsActionCreator");
+function* askSetParam(key, values) {
+    yield* (0, quidproquo_web_1.askQueryParamsSet)(key, values, false);
+    yield* (0, sharedQueryParamsActionCreator_1.askSharedQueryParamsUISetParam)(key, values);
+}
+exports.askSetParam = askSetParam;

package/lib/commonjs/useSharedQueryParams/logic/runtime/askSyncParams.d.ts

@@ -0,0 +1,2 @@
+import { AskResponse } from 'quidproquo-core';
+export declare function askSyncParams(): AskResponse<void>;

package/lib/commonjs/useSharedQueryParams/logic/runtime/askSyncParams.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.askSyncParams = void 0;
+const quidproquo_web_1 = require("quidproquo-web");
+const sharedQueryParamsActionCreator_1 = require("../sharedQueryParamsActionCreator");
+function* askSyncParams() {
+    const params = yield* (0, quidproquo_web_1.askQueryParamsGetAll)();
+    for (const key in params) {
+        yield* (0, sharedQueryParamsActionCreator_1.askSharedQueryParamsUISetParam)(key, params[key]);
+    }
+}
+exports.askSyncParams = askSyncParams;

package/lib/commonjs/useSharedQueryParams/logic/runtime/index.d.ts

@@ -0,0 +1,2 @@
+export * from './askSyncParams';
+export * from './sharedQueryParamsLogic';

package/lib/commonjs/useSharedQueryParams/logic/runtime/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./askSyncParams"), exports);
+__exportStar(require("./sharedQueryParamsLogic"), exports);

package/lib/commonjs/useSharedQueryParams/logic/runtime/sharedQueryParamsLogic.d.ts

@@ -0,0 +1,4 @@
+import { askSetParam } from './askSetParam';
+export declare const sharedQueryParamsLogic: {
+    askSetParam: typeof askSetParam;
+};

package/lib/commonjs/useSharedQueryParams/logic/runtime/sharedQueryParamsLogic.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sharedQueryParamsLogic = void 0;
+const askSetParam_1 = require("./askSetParam");
+exports.sharedQueryParamsLogic = {
+    askSetParam: askSetParam_1.askSetParam,
+};

package/lib/commonjs/useSharedQueryParams/logic/sharedQueryParamsActionCreator.d.ts

@@ -0,0 +1,2 @@
+import { AskResponse } from 'quidproquo-core';
+export declare function askSharedQueryParamsUISetParam(key: string, values: string[]): AskResponse<void>;

package/lib/commonjs/useSharedQueryParams/logic/sharedQueryParamsActionCreator.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.askSharedQueryParamsUISetParam = void 0;
+const quidproquo_core_1 = require("quidproquo-core");
+const sharedQueryParamsTypes_1 = require("./sharedQueryParamsTypes");
+function* askSharedQueryParamsUISetParam(key, values) {
+    yield* (0, quidproquo_core_1.askStateDispatchEffect)(sharedQueryParamsTypes_1.SharedQueryParamsEffect.SetParam, {
+        key,
+        values,
+    });
+}
+exports.askSharedQueryParamsUISetParam = askSharedQueryParamsUISetParam;

package/lib/commonjs/useSharedQueryParams/logic/sharedQueryParamsReducer.d.ts

@@ -0,0 +1,3 @@
+import { SharedQueryParamsState } from './sharedQueryParamsTypes';
+export declare const sharedQueryParamsInitalState: SharedQueryParamsState;
+export declare const sharedQueryParamsReducer: (state: SharedQueryParamsState, effect: import("./sharedQueryParamsTypes").SharedQueryParamsSetParamEffect) => [SharedQueryParamsState, boolean];

package/lib/commonjs/useSharedQueryParams/logic/sharedQueryParamsReducer.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sharedQueryParamsReducer = exports.sharedQueryParamsInitalState = void 0;
+const quidproquo_core_1 = require("quidproquo-core");
+const sharedQueryParamsTypes_1 = require("./sharedQueryParamsTypes");
+exports.sharedQueryParamsInitalState = {
+// No initial state
+};
+exports.sharedQueryParamsReducer = (0, quidproquo_core_1.buildMutableEffectReducer)({
+    [sharedQueryParamsTypes_1.SharedQueryParamsEffect.SetParam]: (state, { key, values }) => {
+        state[key] = values;
+    },
+});

package/lib/commonjs/useSharedQueryParams/logic/sharedQueryParamsTypes.d.ts

@@ -0,0 +1,10 @@
+import { Effect } from 'quidproquo-core';
+export type SharedQueryParamsState = Record<string, string[] | undefined>;
+export declare enum SharedQueryParamsEffect {
+    SetParam = "Qpq/SharedQueryParams/SetParam"
+}
+export type SharedQueryParamsSetParamEffect = Effect<SharedQueryParamsEffect.SetParam, {
+    key: string;
+    values: string[];
+}>;
+export type SharedQueryParamsEffects = SharedQueryParamsSetParamEffect;

package/lib/commonjs/useSharedQueryParams/logic/sharedQueryParamsTypes.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SharedQueryParamsEffect = void 0;
+var SharedQueryParamsEffect;
+(function (SharedQueryParamsEffect) {
+    SharedQueryParamsEffect["SetParam"] = "Qpq/SharedQueryParams/SetParam";
+})(SharedQueryParamsEffect = exports.SharedQueryParamsEffect || (exports.SharedQueryParamsEffect = {}));

package/lib/commonjs/useSharedQueryParams/sharedQueryParamsRuntime.d.ts

@@ -0,0 +1,3 @@
+export declare const sharedQueryParamsRuntime: import("../hooks").QpqRuntimeDefinition<import("./logic").SharedQueryParamsState, import("./logic").SharedQueryParamsSetParamEffect, {
+    askSetParam: typeof import("./logic/runtime/askSetParam").askSetParam;
+}>;

package/lib/commonjs/useSharedQueryParams/sharedQueryParamsRuntime.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sharedQueryParamsRuntime = void 0;
+const hooks_1 = require("../hooks");
+const runtime_1 = require("./logic/runtime");
+const logic_1 = require("./logic");
+exports.sharedQueryParamsRuntime = (0, hooks_1.createQpqRuntimeDefinition)(runtime_1.sharedQueryParamsLogic, logic_1.sharedQueryParamsInitalState, logic_1.sharedQueryParamsReducer);

package/lib/esm/hooks/asmj/QpqRuntimeEffectCatcher.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, memo, useContext } from 'react';
+import { createContext, memo, useContext, useMemo } from 'react';
 import { useFastCallback } from '../useFastCallback';
 import { useQpqRuntime, useQpqRuntimeState } from '.';
 // Create a context with a default NOOP dispatcher
@@ -7,7 +7,7 @@ const BubbleReducerDispatchContext = createContext((_action) => {
     // NOOP
 });
 export const useQpqRuntimeBubblingReducer = (runtimeDefinition, name) => {
-    const runtimeDefinitionInfo = runtimeDefinition(name);
+    const runtimeDefinitionInfo = useMemo(() => runtimeDefinition(name), [runtimeDefinition, name]);
     const [state, setState, getState] = useQpqRuntimeState(runtimeDefinition, name);
     // Get the parent dispatch from the context
     const parentDispatch = useContext(BubbleReducerDispatchContext);

package/lib/esm/hooks/asmj/createQpqRuntimeDefinition.d.ts

@@ -1,7 +1,9 @@
 import { atom } from 'jotai';
+import { selectAtom } from 'jotai/utils';
 import { QpqApi } from './QpqMappedApi';
 import { QpqBubbleReducer } from './QpqRuntimeEffectCatcher';
 type CustomJotaiReducerAtom<TState> = ReturnType<typeof atom<TState>>;
+type CustomJotaiComputedAtom<TState, TSlice> = ReturnType<typeof selectAtom<TState, TSlice>>;
 export type QpqAsmjState<TState, TAction, TApi extends QpqApi> = {
     atom: CustomJotaiReducerAtom<TState>;
     reducer: QpqBubbleReducer<TState, TAction>;
@@ -10,7 +12,11 @@ export type QpqAsmjState<TState, TAction, TApi extends QpqApi> = {
     state: TState;
 };
 type AsmjStateGetter<TState, TAction, TApi extends QpqApi> = (name?: string) => QpqAsmjState<TState, TAction, TApi>;
+type AsmjStateComputer<TState, TSlice> = (name?: string) => CustomJotaiComputedAtom<TState, TSlice>;
 export type QpqRuntimeDefinition<TState, TAction, TApi extends QpqApi> = AsmjStateGetter<TState, TAction, TApi>;
+export type QpqRuntimeComputed<TState, TSlice> = AsmjStateComputer<TState, TSlice>;
 export declare function createQpqRuntimeDefinition<TState, TAction, TApi extends QpqApi>(api: TApi, initialState: TState, reducer?: QpqBubbleReducer<TState, TAction>): QpqRuntimeDefinition<TState, TAction, TApi>;
+export declare function createQpqRuntimeComputed<TState, TAction, TApi extends QpqApi, TSlice>(atom: QpqRuntimeDefinition<TState, TAction, TApi>, compute: (state: TState) => TSlice): QpqRuntimeComputed<TState, TSlice>;
 export declare function useQpqRuntimeState<TState, TAction, TApi extends QpqApi>(atom: QpqRuntimeDefinition<TState, TAction, TApi>, name?: string): [TState, (newState: TState) => void, () => TState];
+export declare function useQpqRuntimeComputed<TState, TSlice>(computedAtom: QpqRuntimeComputed<TState, TSlice>, name?: string): TSlice;
 export {};

package/lib/esm/hooks/asmj/createQpqRuntimeDefinition.js

@@ -1,11 +1,11 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { atom, useAtom } from 'jotai';
+import { selectAtom } from 'jotai/utils';
 export function createQpqRuntimeDefinition(api, initialState, reducer = (s) => [s, false]) {
     const namedAtoms = new Map();
     const getCustomNamedAtom = (name) => {
         const actualName = name ? name : '$$qpq-default$$';
         if (!namedAtoms.has(actualName)) {
-            console.log('Creating Atom: ', actualName);
             const winAtom = {
                 atom: atom(initialState),
                 reducer,
@@ -19,8 +19,15 @@ export function createQpqRuntimeDefinition(api, initialState, reducer = (s) => [
     };
     return getCustomNamedAtom;
 }
+export function createQpqRuntimeComputed(atom, compute) {
+    return (name) => {
+        const info = atom(name);
+        return selectAtom(info.atom, compute);
+    };
+}
 export function useQpqRuntimeState(atom, name) {
-    const [state, setState] = useAtom(atom(name).atom);
+    const actualAtom = useMemo(() => atom(name).atom, [atom, name]);
+    const [state, setState] = useAtom(actualAtom);
     const setStateWrapper = useCallback((newState) => {
         const info = atom(name);
         info.state = newState;
@@ -29,6 +36,11 @@ export function useQpqRuntimeState(atom, name) {
     const getState = useCallback(() => {
         const state = atom(name).state;
         return state;
-    }, [atom]);
+    }, [atom, name]);
     return [state, setStateWrapper, getState];
 }
+export function useQpqRuntimeComputed(computedAtom, name) {
+    const computedAtomValue = useMemo(() => computedAtom(name), [computedAtom, name]);
+    const [state] = useAtom(computedAtomValue);
+    return state;
+}

package/lib/esm/hooks/asmj/useQpqRuntime.js

@@ -3,7 +3,7 @@ import { useQpq } from '../useQpq';
 import { getStateActionProcessor } from './actionProcessor';
 import { useQpqRuntimeBubblingReducer } from './QpqRuntimeEffectCatcher';
 export function useQpqRuntime(atom, mainStory, name) {
-    const atomInfo = atom(name);
+    const atomInfo = useMemo(() => atom(name), [atom, name]);
     const [state, dispatch, getCurrentState] = useQpqRuntimeBubblingReducer(atom, name);
     // Api generators are memoized to prevent unnecessary re-renders.
     const [memoedApiGenerators] = useState(() => atomInfo.api);

package/lib/esm/hooks/useQpq.js

@@ -1,17 +1,18 @@
 import { getWebActionProcessors } from 'quidproquo-actionprocessor-web';
 import { createRuntime, defineModule, QpqRuntimeType, } from 'quidproquo-core';
+import { useCallback, useMemo } from 'react';
 import { useQpqContextValues } from './asmj';
 // WIP ~ useFastCallback, wack things like loggers in a context, try to only make once instance of the runtime.
 // Also don't create every refresh.. useMemo / useCallback etc
+const logger = {
+    enableLogs: async () => { },
+    log: async () => { },
+    waitToFinishWriting: async () => { },
+    moveToPermanentStorage: async () => { },
+};
 export function useQpq(getActionProcessors = async () => ({})) {
     const qpqContextValues = useQpqContextValues();
-    const logger = {
-        enableLogs: async () => { },
-        log: async () => { },
-        waitToFinishWriting: async () => { },
-        moveToPermanentStorage: async () => { },
-    };
-    const resolveStory = createRuntime([defineModule('UI')], {
+    const resolveStory = useMemo(() => createRuntime([defineModule('UI')], {
         depth: 0,
         context: qpqContextValues,
     }, async (qpqConfig, dynamicModuleLoader) => ({
@@ -19,8 +20,8 @@ export function useQpq(getActionProcessors = async () => ({})) {
         ...(await getActionProcessors(qpqConfig, dynamicModuleLoader)),
     }), () => new Date().toISOString(), logger, `frontend::${'uuid'}`, QpqRuntimeType.UI, async (_runtime) => {
         // noop
-    });
-    return function getStoryExecutor(story) {
+    }), [qpqContextValues]);
+    const qpq = useCallback(function getStoryExecutor(story) {
         return async (...args) => {
             const result = await resolveStory(story, args);
             if (result.error) {
@@ -28,5 +29,6 @@ export function useQpq(getActionProcessors = async () => ({})) {
             }
             return result.result;
         };
-    };
+    }, [resolveStory]);
+    return qpq;
 }

package/lib/esm/index.d.ts

@@ -4,5 +4,7 @@ export * from './auth';
 export * from './baseUrl';
 export * from './hooks';
 export * from './state';
+export * from './useFieldBinding';
+export * from './useSharedQueryParams';
 export * from './websocket';
 export * from './webSocketQueue';

package/lib/esm/index.js

@@ -4,5 +4,7 @@ export * from './auth';
 export * from './baseUrl';
 export * from './hooks';
 export * from './state';
+export * from './useFieldBinding';
+export * from './useSharedQueryParams';
 export * from './websocket';
 export * from './webSocketQueue';

package/lib/esm/useFieldBinding/index.d.ts

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

package/lib/esm/useFieldBinding/index.js

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

package/lib/esm/useFieldBinding/useFieldBinding.d.ts

@@ -0,0 +1,2 @@
+import { QpqRuntimeComputed } from '../hooks';
+export declare const useFieldBinding: <TState, V, E = any>(computedAtom: QpqRuntimeComputed<TState, V>, someSetter: (value: V) => Promise<void> | void, valueExtractor?: ((event: E, ...args: any[]) => V) | undefined) => [V, (event: E, ...args: any[]) => void];

package/lib/esm/useFieldBinding/useFieldBinding.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import { useQpqRuntimeComputed } from '../hooks';
+export const useFieldBinding = (computedAtom, someSetter, valueExtractor) => {
+    const computedValue = useQpqRuntimeComputed(computedAtom);
+    const [value, setValue] = useState(computedValue);
+    const handleChange = (event, ...args) => {
+        const newValue = valueExtractor ? valueExtractor(event, ...args) : event.target.value;
+        setValue(newValue);
+        someSetter(newValue);
+    };
+    useEffect(() => {
+        if (computedValue !== value) {
+            setValue(computedValue);
+        }
+    }, [computedValue]);
+    return [value, handleChange];
+};

package/lib/esm/useSharedQueryParams/index.d.ts

@@ -0,0 +1,2 @@
+export * from './logic';
+export * from './sharedQueryParamsRuntime';

package/lib/esm/useSharedQueryParams/index.js

@@ -0,0 +1,2 @@
+export * from './logic';
+export * from './sharedQueryParamsRuntime';

package/lib/esm/useSharedQueryParams/logic/index.d.ts

@@ -0,0 +1,4 @@
+export * from './runtime';
+export * from './sharedQueryParamsActionCreator';
+export * from './sharedQueryParamsReducer';
+export * from './sharedQueryParamsTypes';

package/lib/esm/useSharedQueryParams/logic/index.js

@@ -0,0 +1,4 @@
+export * from './runtime';
+export * from './sharedQueryParamsActionCreator';
+export * from './sharedQueryParamsReducer';
+export * from './sharedQueryParamsTypes';

package/lib/esm/useSharedQueryParams/logic/runtime/askSetParam.d.ts

@@ -0,0 +1,2 @@
+import { AskResponse } from 'quidproquo-core';
+export declare function askSetParam(key: string, values: string[]): AskResponse<void>;

package/lib/esm/useSharedQueryParams/logic/runtime/askSetParam.js

@@ -0,0 +1,6 @@
+import { askQueryParamsSet } from 'quidproquo-web';
+import { askSharedQueryParamsUISetParam } from '../sharedQueryParamsActionCreator';
+export function* askSetParam(key, values) {
+    yield* askQueryParamsSet(key, values, false);
+    yield* askSharedQueryParamsUISetParam(key, values);
+}

package/lib/esm/useSharedQueryParams/logic/runtime/askSyncParams.d.ts

@@ -0,0 +1,2 @@
+import { AskResponse } from 'quidproquo-core';
+export declare function askSyncParams(): AskResponse<void>;

package/lib/esm/useSharedQueryParams/logic/runtime/askSyncParams.js

@@ -0,0 +1,8 @@
+import { askQueryParamsGetAll } from 'quidproquo-web';
+import { askSharedQueryParamsUISetParam } from '../sharedQueryParamsActionCreator';
+export function* askSyncParams() {
+    const params = yield* askQueryParamsGetAll();
+    for (const key in params) {
+        yield* askSharedQueryParamsUISetParam(key, params[key]);
+    }
+}

package/lib/esm/useSharedQueryParams/logic/runtime/index.d.ts

@@ -0,0 +1,2 @@
+export * from './askSyncParams';
+export * from './sharedQueryParamsLogic';

package/lib/esm/useSharedQueryParams/logic/runtime/index.js

@@ -0,0 +1,2 @@
+export * from './askSyncParams';
+export * from './sharedQueryParamsLogic';

package/lib/esm/useSharedQueryParams/logic/runtime/sharedQueryParamsLogic.d.ts

@@ -0,0 +1,4 @@
+import { askSetParam } from './askSetParam';
+export declare const sharedQueryParamsLogic: {
+    askSetParam: typeof askSetParam;
+};

package/lib/esm/useSharedQueryParams/logic/runtime/sharedQueryParamsLogic.js

@@ -0,0 +1,4 @@
+import { askSetParam } from './askSetParam';
+export const sharedQueryParamsLogic = {
+    askSetParam,
+};

package/lib/esm/useSharedQueryParams/logic/sharedQueryParamsActionCreator.d.ts

@@ -0,0 +1,2 @@
+import { AskResponse } from 'quidproquo-core';
+export declare function askSharedQueryParamsUISetParam(key: string, values: string[]): AskResponse<void>;

package/lib/esm/useSharedQueryParams/logic/sharedQueryParamsActionCreator.js

@@ -0,0 +1,8 @@
+import { askStateDispatchEffect } from 'quidproquo-core';
+import { SharedQueryParamsEffect } from './sharedQueryParamsTypes';
+export function* askSharedQueryParamsUISetParam(key, values) {
+    yield* askStateDispatchEffect(SharedQueryParamsEffect.SetParam, {
+        key,
+        values,
+    });
+}

package/lib/esm/useSharedQueryParams/logic/sharedQueryParamsReducer.d.ts

@@ -0,0 +1,3 @@
+import { SharedQueryParamsState } from './sharedQueryParamsTypes';
+export declare const sharedQueryParamsInitalState: SharedQueryParamsState;
+export declare const sharedQueryParamsReducer: (state: SharedQueryParamsState, effect: import("./sharedQueryParamsTypes").SharedQueryParamsSetParamEffect) => [SharedQueryParamsState, boolean];

package/lib/esm/useSharedQueryParams/logic/sharedQueryParamsReducer.js

@@ -0,0 +1,10 @@
+import { buildMutableEffectReducer } from 'quidproquo-core';
+import { SharedQueryParamsEffect } from './sharedQueryParamsTypes';
+export const sharedQueryParamsInitalState = {
+// No initial state
+};
+export const sharedQueryParamsReducer = buildMutableEffectReducer({
+    [SharedQueryParamsEffect.SetParam]: (state, { key, values }) => {
+        state[key] = values;
+    },
+});

package/lib/esm/useSharedQueryParams/logic/sharedQueryParamsTypes.d.ts

@@ -0,0 +1,10 @@
+import { Effect } from 'quidproquo-core';
+export type SharedQueryParamsState = Record<string, string[] | undefined>;
+export declare enum SharedQueryParamsEffect {
+    SetParam = "Qpq/SharedQueryParams/SetParam"
+}
+export type SharedQueryParamsSetParamEffect = Effect<SharedQueryParamsEffect.SetParam, {
+    key: string;
+    values: string[];
+}>;
+export type SharedQueryParamsEffects = SharedQueryParamsSetParamEffect;

package/lib/esm/useSharedQueryParams/logic/sharedQueryParamsTypes.js

@@ -0,0 +1,4 @@
+export var SharedQueryParamsEffect;
+(function (SharedQueryParamsEffect) {
+    SharedQueryParamsEffect["SetParam"] = "Qpq/SharedQueryParams/SetParam";
+})(SharedQueryParamsEffect || (SharedQueryParamsEffect = {}));

package/lib/esm/useSharedQueryParams/sharedQueryParamsRuntime.d.ts

@@ -0,0 +1,3 @@
+export declare const sharedQueryParamsRuntime: import("../hooks").QpqRuntimeDefinition<import("./logic").SharedQueryParamsState, import("./logic").SharedQueryParamsSetParamEffect, {
+    askSetParam: typeof import("./logic/runtime/askSetParam").askSetParam;
+}>;

package/lib/esm/useSharedQueryParams/sharedQueryParamsRuntime.js

@@ -0,0 +1,4 @@
+import { createQpqRuntimeDefinition } from '../hooks';
+import { sharedQueryParamsLogic } from './logic/runtime';
+import { sharedQueryParamsInitalState, sharedQueryParamsReducer } from './logic';
+export const sharedQueryParamsRuntime = createQpqRuntimeDefinition(sharedQueryParamsLogic, sharedQueryParamsInitalState, sharedQueryParamsReducer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quidproquo-web-react",
-  "version": "0.0.253",
+  "version": "0.0.254",
   "description": "",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/esm/index.js",
@@ -32,8 +32,8 @@
   },
   "homepage": "https://github.com/joe-coady/quidproquo#readme",
   "devDependencies": {
-    "quidproquo-core": "0.0.253",
-    "quidproquo-tsconfig": "0.0.253",
+    "quidproquo-core": "0.0.254",
+    "quidproquo-tsconfig": "0.0.254",
     "typescript": "^4.9.3"
   },
   "peerDependencies": {
@@ -42,9 +42,9 @@
   "dependencies": {
     "jotai": "^2.12.1",
     "symbol-observable": "^4.0.0",
-    "quidproquo-web": "0.0.253",
-    "quidproquo-webserver": "0.0.253",
-    "quidproquo-actionprocessor-node": "0.0.253",
-    "quidproquo-actionprocessor-web": "0.0.253"
+    "quidproquo-web": "0.0.254",
+    "quidproquo-webserver": "0.0.254",
+    "quidproquo-actionprocessor-node": "0.0.254",
+    "quidproquo-actionprocessor-web": "0.0.254"
   }
 }