integrate plugin logic from @wq/app and @wq/react

Author: sheppard

.github/workflows/test.yml

@@ -30,7 +30,10 @@ jobs:
       with:
         python-version: ${{ matrix.python-version }}
     - name: Install dependencies
-      run: npm ci && npm run build
+      run:
+         echo "registry=https://npm.pkg.github.com/wq" > .npmrc
+         echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> .npmrc
+         npm ci && npm run build
     - name: Install native dependencies
       if: matrix.package == 'material-native' || matrix.package == 'map-gl-native'
       run: cd packages/$PACKAGE && npm ci

package-lock.json

@@ -27,9 +27,15 @@
     },
     "homepage": "https://wq.io/@wq/store",
     "dependencies": {
+        "@wq/react": "^3.0.0-a1-dev1.g760eb56",
         "localforage": "^1.10.0",
         "redux": "^4.2.1",
         "redux-logger": "^3.0.6",
         "redux-persist": "^6.0.0"
+    },
+    "devDependencies": {
+        "@testing-library/react": "^16.2.0",
+        "react": "^19.0.0",
+        "react-redux": "^9.2.0"
     }
 }

packages/store/package.json

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from "react";
+import { useConfig, withWQ } from "@wq/react";
+import { Provider as ReduxProvider } from "react-redux";
+import store from "./store.js";
+import { StoreContext } from "./hooks.js";
+
+const defaultConfig = {
+    store: {
+        service: "",
+        defaults: { format: "json" },
+    },
+};
+
+function Root({ store: instance = store, children }) {
+    const config = useConfig("store"),
+        [ready, setReady] = useState(Boolean(instance._store));
+
+    useEffect(() => {
+        if (instance._store) {
+            return;
+        }
+        init();
+        async function init() {
+            await instance.init(config);
+            setReady(true);
+        }
+    }, [instance, config]);
+
+    if (!ready) {
+        return null;
+    }
+
+    return (
+        <StoreContext.Provider value={instance}>
+            <ReduxProvider store={instance._store}>{children}</ReduxProvider>
+        </StoreContext.Provider>
+    );
+}
+
+export default withWQ(Root, {
+    defaults: { config: defaultConfig },
+});

packages/store/src/Root.js

@@ -0,0 +1,50 @@
+import { render, waitFor } from "@testing-library/react";
+import React, { useEffect } from "react";
+import ds, { Root, usePluginReducer } from "../index.js";
+
+ds.use({
+    name: "myPlugin",
+    async init() {
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        this.someInit = true;
+    },
+    actions: {
+        setName(name) {
+            return { type: "SET_NAME", name };
+        },
+    },
+    reducer(state, action) {
+        if (action.type === "SET_NAME") {
+            return { ...state, name: action.name };
+        }
+        return state || { name: null };
+    },
+});
+
+function TestComponent() {
+    const [{ name }, { setName }] = usePluginReducer("myPlugin");
+    useEffect(() => {
+        setName("Test");
+    }, []);
+    return <div>{name}</div>;
+}
+
+test("usePluginReducer", async () => {
+    expect(() => ds.use({ name: "myPlugin" })).toThrow(
+        "main store already has a plugin named myPlugin!"
+    );
+
+    render(
+        <Root>
+            <TestComponent />
+        </Root>
+    );
+
+    await waitFor(() => expect(ds.getState()["myPlugin"].name).toBe("Test"));
+
+    expect(ds.plugins.myPlugin.someInit).toBe(true);
+
+    expect(() => ds.use({ name: "anotherPlugin" })).toThrow(
+        "Store already initialized!"
+    );
+});

packages/store/src/__tests__/react.js

@@ -0,0 +1,46 @@
+import { createContext, useContext } from "react";
+import { useSelector } from "react-redux";
+
+// Adapted from @wq/react
+
+const selectors = {};
+
+function getSelector(name) {
+    if (!selectors[name]) {
+        selectors[name] = (state) => state[name];
+    }
+    return selectors[name];
+}
+
+export const StoreContext = createContext(null);
+
+export function useStore() {
+    return useContext(StoreContext);
+}
+
+export function usePluginActions(name) {
+    const { plugins } = useStore();
+    return plugins[name];
+}
+
+export function usePluginState(name) {
+    const plugin = usePluginActions(name),
+        pluginState = useSelector(getSelector(name));
+
+    if (plugin) {
+        return pluginState;
+    } else {
+        return null;
+    }
+}
+
+export function usePluginReducer(name) {
+    const plugin = usePluginActions(name),
+        pluginState = useSelector(getSelector(name));
+
+    if (plugin) {
+        return [pluginState, plugin];
+    } else {
+        return [null, null];
+    }
+}

packages/store/src/hooks.js

@@ -1,7 +1,9 @@
 import ds, { Store, getStore } from "./store.js";
 import * as storage from "./storage.js";
+import Root from "./Root.js";
 
 ds.setEngine(storage);
 
 export default ds;
-export { Store, getStore };
+export { Store, getStore, Root };
+export * from "./hooks.js";

packages/store/src/index.js

@@ -1,7 +1,9 @@
 import ds, { Store, getStore } from "./store.js";
 import * as storage from "./storage.native.js";
+import Root from "./Root.js";
 
 ds.setEngine(storage);
 
 export default ds;
-export { Store, getStore };
+export { Store, getStore, Root };
+export * from "./hooks.js";

packages/store/src/index.native.js

@@ -0,0 +1,71 @@
+// Adapted from @wq/app
+
+let pcount = 0;
+
+export function registerPlugin(store, plugin) {
+    if (store._store) {
+        throw new Error("Store already initialized!");
+    }
+    if (Array.isArray(plugin)) {
+        plugin.forEach((p) => registerPlugin(store, p));
+        return;
+    }
+    if (plugin.dependencies) {
+        registerPlugin(store, plugin.dependencies);
+    }
+    if (store.plugins[plugin.name]) {
+        if (store.plugins[plugin.name] === plugin) {
+            return;
+        } else {
+            throw new Error(
+                `${store.name} store already has a plugin named ${plugin.name}!`
+            );
+        }
+    }
+    pcount++;
+    if (!plugin.name) {
+        plugin.name = "plugin" + pcount;
+    }
+    store.plugins[plugin.name] = plugin;
+    plugin.store = store;
+}
+
+export function applyPlugins(store, config) {
+    for (const [name, plugin] of Object.entries(store.plugins)) {
+        if (plugin.ajax) {
+            config.ajax = plugin.ajax.bind(plugin);
+        }
+        if (plugin.reducer) {
+            let persist = false,
+                restore = null;
+            if (typeof plugin.persist === "function") {
+                persist = plugin.persist.bind(plugin);
+                restore = plugin.restore
+                    ? plugin.restore.bind(plugin)
+                    : (state) => state;
+            } else if (plugin.persist) {
+                persist = true;
+            }
+            store.addReducer(
+                name,
+                (state, action) => plugin.reducer(state, action),
+                persist,
+                restore
+            );
+        }
+        if (plugin.actions) {
+            Object.assign(plugin, store.bindActionCreators(plugin.actions));
+        }
+        if (plugin.subscriber) {
+            store.subscribe(() => plugin.subscriber(store.getState()));
+        }
+    }
+}
+
+export async function initPlugins(store, config) {
+    for (const plugin of Object.values(store.plugins)) {
+        if (plugin.init) {
+            await plugin.init(config && config[plugin.name]);
+        }
+    }
+}

packages/store/src/plugins.js

@@ -8,6 +8,7 @@ import {
 import logger from "redux-logger";
 import { persistStore, persistReducer, createTransform } from "redux-persist";
 import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2.js";
+import { registerPlugin, applyPlugins, initPlugins } from "./plugins.js";
 
 const REMOVE = "@@KVP_REMOVE";
 const SET = "@@KVP_SET";
@@ -26,6 +27,8 @@ class Store {
             throw name + " store already exists!";
         }
         this.name = name;
+        this.plugins = {};
+
         _stores[name] = this;
 
         this.debug = false;
@@ -62,11 +65,16 @@ class Store {
         );
     }
 
+    use(plugin) {
+        registerPlugin(this, plugin);
+    }
+
     setEngine({ createStorage, serialize, deserialize }) {
         this.engine = { createStorage, serialize, deserialize };
     }
 
     init(opts = {}) {
+        applyPlugins(this, opts);
         var self = this;
         var optlist = [
             "debug",
@@ -132,6 +140,10 @@ class Store {
             this._store.subscribe(fn)
         );
         this._deferActions.forEach(this._store.dispatch);
+
+        return this.ready.then(() => {
+            return initPlugins(this, opts);
+        });
     }
 
     dispatch(action) {