@genesislcap/foundation-redux 14.310.0

package/README.md

@@ -0,0 +1,185 @@
+# Genesis Foundation Redux
+
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](https://www.typescriptlang.org/)
+
+## [API Docs](./docs/api/index.md)
+
+`foundation-redux` provides Redux Toolkit integration for Genesis components, offering a clean and efficient way to manage application state using the proven Redux pattern.
+
+## Background
+
+This package was created to provide an alternative to `foundation-store` by leveraging the power and ecosystem of Redux Toolkit. While `foundation-store` implements a Redux-like pattern within the Genesis context, `foundation-redux` provides direct bindings to Redux itself, allowing developers to benefit from:
+
+- Vast Redux documentation and ecosystem
+- Redux DevTools integration
+- Proven patterns and best practices
+- Extensive community support
+- Built-in immutability handling
+
+## Why Choose foundation-redux over foundation-store?
+
+### Reduced Boilerplate
+Foundation store requires manual immutability handling and custom event setup, while Redux Toolkit handles immutability automatically.
+
+**Foundation store example:**
+```typescript
+this.createListener<DeleteViewDerivedFieldPayload>(
+  StoreEvents.DeleteViewDerivedField,
+  ({ view, field }) => {
+    const { [field]: fieldToDelete, ...rest } =
+      this.commit.genesisCreateConfig.views.views[view]?.derivedFields || {};
+    if (fieldToDelete) {
+      this.commit.genesisCreateConfig = {
+        ...this.genesisCreateConfig,
+        views: {
+          views: {
+            ...this.genesisCreateConfig.views.views,
+            [view]: {
+              ...this.genesisCreateConfig.views.views[view],
+              derivedFields: {
+                ...rest,
+              },
+            },
+          },
+        },
+      };
+    }
+  },
+);
+```
+
+**Redux Toolkit example:**
+```typescript
+deleteDerivedField(state, { payload: { view, field } }) {
+  delete state[view].derivedFields[field];
+}
+```
+
+### Ecosystem Benefits
+- **Redux DevTools**: Built-in debugging and time-travel debugging
+- **Middleware**: Extensive middleware ecosystem
+- **Entity Adapters**: Auto-generated CRUD actions and selectors
+- **Serialization**: Built-in support for local storage and hydration
+
+## Installation
+
+To enable this module in your application, follow the steps below.
+
+1. Add `@genesislcap/foundation-redux` as a dependency in your `package.json` file. Whenever you change the dependencies of your project, ensure you run the `$ npm run bootstrap` command again.
+
+```json
+{
+  ...
+  "dependencies": {
+    ...
+    "@genesislcap/foundation-redux": "latest"
+    ...
+  },
+  ...
+}
+```
+
+## Usage
+
+### Basic Store Setup
+
+```typescript
+import { createStore } from '@genesislcap/foundation-redux';
+import { createSlice } from '@reduxjs/toolkit';
+import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
+
+// Define your slices
+const userSlice = createSlice({
+  name: 'user',
+  initialState: { name: '', email: '' },
+  reducers: {
+    setUser: (state, action) => {
+      state.name = action.payload.name;
+      state.email = action.payload.email;
+    },
+    clearUser: (state) => {
+      state.name = '';
+      state.email = '';
+    },
+  },
+  selectors: {
+    getUserName: (state) => state.name,
+    getUserEmail: (state) => state.email,
+  },
+});
+
+// Create the store
+const { store, actions, selectors } = createStore([userSlice], {});
+
+@customElement({
+  name: 'user-component',
+  template: html`<div>Hello ${(x) => x.userName}!</div>`,
+})
+export class UserComponent extends GenesisElement {
+  @observable userName = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    
+    // Subscribe to store changes
+    store.subscribeKey(
+      (state) => state.user.name,
+      (state) => {
+        this.userName = state.user.name;
+      }
+    );
+  }
+
+  handleLogin() {
+    actions.user.setUser({ name: 'John Doe', email: 'john@example.com' });
+  }
+}
+```
+
+### Advanced Features
+
+- **Thunk Actions**: Support for async operations
+- **Entity Adapters**: Auto-generated CRUD operations
+- **DevTools**: Full Redux DevTools integration
+- **Middleware**: Custom middleware support
+- **Local Storage**: Built-in persistence helpers
+
+## API Reference
+
+### `createStore(slices, preloadedState)`
+
+Creates a Redux store with Genesis component integration.
+
+**Parameters:**
+- `slices`: Array of Redux Toolkit slices
+- `preloadedState`: Initial state for the store
+
+**Returns:**
+- `store`: Proxied state object for reactive updates
+- `actions`: Bound action creators
+- `selectors`: Bound selectors
+- `dispatch`: Redux dispatch function
+- `subscribe`: Store subscription function
+- `subscribeKey`: Key-based subscription for performance
+- `notify`: Manual notification trigger
+
+### Store Integration
+
+The store automatically integrates with Genesis's Observable system, providing reactive updates when state changes. Components can subscribe to specific state changes using `subscribeKey` for optimal performance.
+
+## Migration from foundation-store
+
+If you're currently using `foundation-store`, migration to `foundation-redux` involves:
+
+1. **Replace store creation**: Use `createStore` instead of store fragments
+2. **Convert event handlers**: Replace custom events with Redux actions
+3. **Update subscriptions**: Use `subscribeKey` instead of binding observers
+4. **Simplify state updates**: Let Redux Toolkit handle immutability
+
+## License
+
+Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.
+
+### Licensed components
+Genesis low-code platform

package/dist/dts/index.d.ts

@@ -0,0 +1,3 @@
+export * from './store';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/dts/store.d.ts

@@ -0,0 +1,29 @@
+import { StoreReturn, RootStateFromSlices, SliceArray } from './types';
+export { createSlice } from '@reduxjs/toolkit';
+/**
+ * Creates a Redux store with FAST component integration.
+ *
+ * @remarks
+ * This function creates a Redux store that integrates seamlessly with FAST components.
+ * It automatically binds actions and selectors, provides subscription methods, and handles
+ * FAST Observable notifications.
+ *
+ * @param slices - Array of slices to combine into the store
+ * @param preloadedState - Initial state that matches the slice structure
+ * @returns Object containing store, actions, selectors, and utility functions
+ *
+ * @example
+ * ```typescript
+ * const { store, actions, selectors, subscribeKey } = createStore(
+ *   [userSlice, cartSlice],
+ *   {
+ *     user: { name: '', email: '' },
+ *     cart: { items: [], total: 0 }
+ *   }
+ * );
+ * ```
+ *
+ * @public
+ */
+export declare const createStore: <S extends SliceArray>(slices: S, preloadedState: RootStateFromSlices<S>) => StoreReturn<S>;
+//# sourceMappingURL=store.d.ts.map

package/dist/dts/store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../src/store.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,WAAW,EACX,mBAAmB,EAEnB,UAAU,EAEX,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAyL/C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,UAAU,EAC9C,QAAQ,CAAC,EACT,gBAAgB,mBAAmB,CAAC,CAAC,CAAC,KACrC,WAAW,CAAC,CAAC,CAoBf,CAAC"}

package/dist/dts/types.d.ts

@@ -0,0 +1,176 @@
+import { Action, Reducer, ReducersMapObject, ThunkAction } from '@reduxjs/toolkit';
+export type { PayloadAction } from '@reduxjs/toolkit';
+/**
+ * Represents a Redux slice with actions and selectors.
+ *
+ * @remarks
+ * A slice contains the reducer, actions, and selectors for a specific domain of your application state.
+ *
+ * @example
+ * ```typescript
+ * const userSlice: Slice = {
+ *   name: 'user',
+ *   reducer: userReducer,
+ *   actions: { setUser, logout },
+ *   selectors: { getUser, isLoggedIn }
+ * };
+ * ```
+ *
+ * @public
+ */
+export interface Slice<State = any> {
+    /** The unique name of the slice */
+    name: string;
+    /** The Redux reducer function for this slice */
+    reducer: Reducer<State, Action>;
+    /** Action creators for this slice */
+    actions: Record<string, (payload: any) => Action>;
+    /** Selector functions for this slice */
+    selectors: Record<string, (...args: any[]) => any>;
+}
+/**
+ * An array of slices that will be combined into a single store.
+ *
+ * @remarks
+ * This type represents the collection of slices that will be used to create a Redux store.
+ * Each slice in the array will become a top-level key in the store's state.
+ *
+ * @example
+ * ```typescript
+ * const slices: SliceArray = [userSlice, cartSlice, preferencesSlice];
+ * const { store } = createStore(slices, initialState);
+ * ```
+ *
+ * @public
+ */
+export type SliceArray = Slice[];
+/**
+ * Extracts the root state type from an array of slices.
+ *
+ * @remarks
+ * This utility type maps over the slice names and extracts the state type for each slice.
+ * The resulting type represents the complete state structure of your Redux store.
+ *
+ * @example
+ * ```typescript
+ * const slices = [userSlice, cartSlice];
+ * type RootState = RootStateFromSlices<typeof slices>;
+ * // Result: { user: UserState, cart: CartState }
+ * ```
+ *
+ * @public
+ */
+export type RootStateFromSlices<S extends SliceArray> = {
+    [K in S[number]['name']]: Extract<S[number], {
+        name: K;
+    }> extends Slice<infer State> ? State : never;
+};
+type FirstIndex = 0;
+type FirstParameter<T> = T extends (...args: infer P) => any ? P[FirstIndex] : never;
+/**
+ * Extracts the bound actions type from an array of slices.
+ *
+ * @remarks
+ * This utility type creates a nested object structure where each slice name maps to its actions.
+ * Actions are bound to the store and automatically dispatch when called.
+ *
+ * @example
+ * ```typescript
+ * const { actions } = createStore([userSlice, cartSlice], initialState);
+ * // actions.user.setUser({ name: 'John' })
+ * // actions.cart.addItem({ id: 'item1', quantity: 1 })
+ * ```
+ *
+ * @public
+ */
+export type ActionsFromSlices<S extends SliceArray> = {
+    [K in S[number]['name']]: {
+        [ActionKey in keyof Extract<S[number], {
+            name: K;
+        }>['actions']]: (payload: FirstParameter<Extract<S[number], {
+            name: K;
+        }>['actions'][ActionKey]>) => void;
+    };
+};
+type RemoveFirstParameter<T> = T extends (arg1: any, ...rest: infer Rest) => any ? Rest : never;
+/**
+ * Extracts the bound selectors type from an array of slices.
+ *
+ * @remarks
+ * This utility type creates a nested object structure where each slice name maps to its selectors.
+ * Selectors are bound to the store and can access the current state.
+ *
+ * @example
+ * ```typescript
+ * const { selectors } = createStore([userSlice, cartSlice], initialState);
+ * // const userName = selectors.user.getUserName()
+ * // const cartTotal = selectors.cart.getTotal()
+ * ```
+ *
+ * @public
+ */
+export type SelectorsFromSlices<S extends SliceArray> = {
+    [K in S[number]['name']]: {
+        [SelectorKey in keyof Extract<S[number], {
+            name: K;
+        }>['selectors']]: (...payload: RemoveFirstParameter<Extract<S[number], {
+            name: K;
+        }>['selectors'][SelectorKey]>) => ReturnType<Extract<S[number], {
+            name: K;
+        }>['selectors'][SelectorKey]> extends void ? any : ReturnType<Extract<S[number], {
+            name: K;
+        }>['selectors'][SelectorKey]>;
+    };
+};
+/**
+ * Type for thunk actions that can be dispatched to the store.
+ *
+ * @remarks
+ * This type represents thunk actions that can access the store's dispatch and getState functions.
+ * Thunks are useful for handling asynchronous operations and complex logic.
+ *
+ * @example
+ * ```typescript
+ * const fetchUserThunk: ThunkDispatch<typeof slices> = (dispatch, getState) => {
+ *   fetch('/api/user').then(user => dispatch(actions.user.setUser(user)));
+ * };
+ * ```
+ *
+ * @public
+ */
+export type ThunkDispatch<S extends SliceArray> = ThunkAction<void, RootStateFromSlices<S>, any, Action>;
+/**
+ * The return type of the createStore function.
+ *
+ * @remarks
+ * This type represents all the utilities and functions returned when creating a store.
+ * It provides access to the store state, actions, selectors, and subscription methods.
+ *
+ * @example
+ * ```typescript
+ * const { store, actions, selectors, subscribeKey } = createStore(slices, initialState);
+ * ```
+ *
+ * @public
+ */
+export type StoreReturn<S extends SliceArray> = {
+    /** Proxy object for accessing slice state */
+    store: RootStateFromSlices<S>;
+    /** Bound actions for each slice */
+    actions: ActionsFromSlices<S>;
+    /** Bound selectors for each slice */
+    selectors: SelectorsFromSlices<S>;
+    /** The root reducer combining all slices */
+    rootReducer: ReducersMapObject<RootStateFromSlices<S>>;
+    /** Performance-optimized subscription function for specific values */
+    subscribeKey: (checkerFn: (s: RootStateFromSlices<S>) => string, callbackFn: (s: RootStateFromSlices<S>) => void) => void;
+    /** Function to dispatch actions or thunks */
+    dispatch: (action: Action | ThunkDispatch<S>) => void;
+    /** Function to notify FAST components of slice changes */
+    notify: (sliceName: keyof RootStateFromSlices<S>) => void;
+    /** General subscription function for all state changes */
+    subscribe: (cb: (state: RootStateFromSlices<S>) => void) => void;
+    /** Function to get the current state */
+    getState: () => RootStateFromSlices<S>;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/dts/types.d.ts.map

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

package/dist/esm/index.js

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

package/dist/esm/store.js

@@ -0,0 +1,197 @@
+import { isDev } from '@genesislcap/foundation-utils';
+import { Observable } from '@genesislcap/web-core';
+import { configureStore } from '@reduxjs/toolkit';
+export { createSlice } from '@reduxjs/toolkit';
+/**
+ * Internal store class that wraps Redux store with FAST Observable integration.
+ *
+ * @remarks
+ * This class provides the core functionality for integrating Redux with FAST components.
+ * It handles subscriptions, notifications, and provides a clean API for actions and selectors.
+ *
+ * @internal
+ */
+class ObservableStore {
+    /**
+     * Creates a new ObservableStore instance.
+     *
+     * @param slices - Array of slices to combine into the store
+     * @param preloadedState - Initial state for the store
+     */
+    constructor(slices, preloadedState) {
+        /**
+         * Gets the underlying Redux store instance.
+         *
+         * @returns The Redux store instance
+         */
+        this.getReduxStore = () => this._store;
+        /**
+         * Dispatches actions or thunks to the store.
+         *
+         * @remarks
+         * Currently, we do not support extra arguments in thunk actions.
+         * This is because they are not used in our codebase.
+         * We can add support for extra arguments later if needed for middleware.
+         * https://redux-toolkit.js.org/api/getDefaultMiddleware#customizing-the-included-middleware
+         *
+         * @param action - The action or thunk to dispatch
+         */
+        this.dispatch = (action) => typeof action === 'function'
+            ? action(this._store.dispatch, this._store.getState, undefined)
+            : this._store.dispatch(action);
+        /**
+         * Notifies FAST components of changes to a specific slice.
+         *
+         * @param sliceName - The name of the slice that changed
+         */
+        this.notify = (sliceName) => Observable.notify(this, sliceName);
+        /**
+         * Gets the root reducer that combines all slices.
+         *
+         * @returns The combined reducer object
+         */
+        this.getRootReducer = () => this._rootReducer;
+        /**
+         * Subscribes to all state changes in the store.
+         *
+         * @param cb - Callback function called whenever state changes
+         */
+        this.subscribe = (cb) => this._store.subscribe(() => {
+            cb(this._store.getState());
+        });
+        /**
+         * Subscribes to changes of a specific value in the store.
+         *
+         * @remarks
+         * This method is performance-optimized and only triggers the callback when the specific value changes.
+         * The checkerFn should return a string for comparison purposes.
+         *
+         * @param checkerFn - Function that extracts the value to watch (must return string)
+         * @param callbackFn - Callback function called when the watched value changes
+         */
+        this.subscribeKey = (checkerFn, callbackFn) => {
+            let cache = checkerFn(this._store.getState());
+            this.subscribe(() => {
+                const newState = checkerFn(this._store.getState());
+                if (cache === newState)
+                    return;
+                cache = newState;
+                callbackFn(this._store.getState());
+            });
+        };
+        /**
+         * Gets a specific slice from the store and tracks it for FAST Observable.
+         *
+         * @param name - The name of the slice to retrieve
+         * @returns The slice state
+         */
+        this.getSlice = (name) => {
+            Observable.track(this, name);
+            return this._store.getState()[name];
+        };
+        /**
+         * Creates bound actions for all slices.
+         *
+         * @remarks
+         * Actions are automatically bound to the store and will dispatch when called.
+         * Each action also triggers a notification to FAST components.
+         *
+         * @returns Object containing bound actions organized by slice name
+         * @throws Error if action names are not unique across slices
+         */
+        this.getActions = () => this._slices.reduce((acc, slice) => {
+            Object.keys(slice.actions).forEach((key) => {
+                if (acc[key]) {
+                    throw new Error(`Action name not unique: ${key}`);
+                }
+                acc[slice.name] = Object.assign(Object.assign({}, acc[slice.name]), { [key]: (payload) => {
+                        this.dispatch(slice.actions[key](payload));
+                        this.notify(slice.name);
+                    } });
+            });
+            return acc;
+        }, {});
+        /**
+         * Creates bound selectors for all slices.
+         *
+         * @remarks
+         * Selectors are bound to the store and can access the current state.
+         * They receive the full state object and any additional parameters.
+         *
+         * @returns Object containing bound selectors organized by slice name
+         * @throws Error if selector names are not unique across slices
+         */
+        this.getSelectors = () => this._slices.reduce((acc, slice) => {
+            Object.keys(slice.selectors).forEach((key) => {
+                var _a;
+                if ((_a = acc[slice.name]) === null || _a === void 0 ? void 0 : _a[key]) {
+                    throw new Error(`Selector name not unique: ${key}`);
+                }
+                if (!acc[slice.name]) {
+                    acc[slice.name] = {};
+                }
+                acc[slice.name] = Object.assign(Object.assign({}, acc[slice.name]), { [key]: (...params) => {
+                        const sliceState = this.getSlice(slice.name);
+                        const fullState = Object.assign(Object.assign({}, this._store.getState()), { [slice.name]: sliceState });
+                        return slice.selectors[key](fullState, ...params);
+                    } });
+            });
+            return acc;
+        }, {});
+        this._slices = slices;
+        this._rootReducer = slices.reduce((acc, slice) => {
+            acc[slice.name] = slice.reducer;
+            return acc;
+        }, {});
+        this._store = configureStore({
+            reducer: this._rootReducer,
+            devTools: isDev(),
+            preloadedState,
+        });
+    }
+}
+/**
+ * Creates a Redux store with FAST component integration.
+ *
+ * @remarks
+ * This function creates a Redux store that integrates seamlessly with FAST components.
+ * It automatically binds actions and selectors, provides subscription methods, and handles
+ * FAST Observable notifications.
+ *
+ * @param slices - Array of slices to combine into the store
+ * @param preloadedState - Initial state that matches the slice structure
+ * @returns Object containing store, actions, selectors, and utility functions
+ *
+ * @example
+ * ```typescript
+ * const { store, actions, selectors, subscribeKey } = createStore(
+ *   [userSlice, cartSlice],
+ *   {
+ *     user: { name: '', email: '' },
+ *     cart: { items: [], total: 0 }
+ *   }
+ * );
+ * ```
+ *
+ * @public
+ */
+export const createStore = (slices, preloadedState) => {
+    const observableStore = new ObservableStore(slices, preloadedState);
+    const actions = observableStore.getActions();
+    const storeProxy = new Proxy({}, {
+        get(target, propertyName) {
+            return observableStore.getSlice(propertyName);
+        },
+    });
+    return {
+        store: storeProxy,
+        actions,
+        selectors: observableStore.getSelectors(),
+        rootReducer: observableStore.getRootReducer(),
+        dispatch: observableStore.dispatch,
+        notify: observableStore.notify,
+        subscribe: observableStore.subscribe,
+        getState: () => observableStore.getReduxStore().getState(),
+        subscribeKey: observableStore.subscribeKey,
+    };
+};

package/dist/esm/types.js

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