Add support for ref based state-retrieval

.github/workflows/annotated-pkgs.yml

@@ -37,5 +37,8 @@ jobs:
       - name: Build packages
         run: yarn workspaces foreach -ptA run build
 
+      - name: Build packages with legacy setup
+        run: cd packages/global-context-store && npm install && npm run build
+
       - name: Test that storybook compiles
         run: yarn workspace sb build-storybook

docs/storybook/src/stories/GlobalContextStore.stories.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import Store, { useStore } from "global-context-store";
+
+export default {
+  title: "Tests/global-context-store",
+};
+
+function CounterApp() {
+  const { set, get } = useStore();
+
+  React.useEffect(() => {
+    set("counter", 0);
+  }, []);
+
+  const counter = get("counter");
+
+  return (
+    <div>
+      <div
+        style={{
+          border: "1px solid #aaa",
+          boxShadow: "0px 3px 3px 0px #ddd",
+          display: "inline-block",
+          padding: 10,
+          marginBottom: "30px",
+        }}
+      >
+        Counter: {counter}
+        <div>
+          <button
+            onClick={() => set("counter", counter + 1)}
+            style={{ marginTop: 10 }}
+          >
+            Increment
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const RefForwarding = () => {
+  const storeRef = React.useRef();
+  return (
+    <Store ref={storeRef}>
+      <CounterApp />
+      <button
+        onClick={() => {
+          const state = storeRef.current.getState();
+          alert(JSON.stringify(state));
+        }}
+      >
+        alert app state
+      </button>
+    </Store>
+  );
+};

package.json

@@ -16,6 +16,7 @@
   "packageManager": "[email protected]",
   "resolutions": {
     "@pmmmwh/react-refresh-webpack-plugin": "patch:@pmmmwh/[email protected]#yarn-patches/react-refresh-webpack-plugin.patch",
-    "react-dev-utils": "patch:[email protected]#yarn-patches/react-dev-utils.patch"
+    "react-dev-utils": "patch:[email protected]#yarn-patches/react-dev-utils.patch",
+    "global-context-store": "link:packages/global-context-store/"
   }
 }

packages/global-context-store/src/Store.js

@@ -1,4 +1,10 @@
-import React, { createContext, useContext, useReducer } from "react";
+import React, {
+  createContext,
+  useContext,
+  useReducer,
+  useImperativeHandle,
+  forwardRef,
+} from "react";
 import lodash_set from "lodash.set";
 import lodash_get from "lodash.get";
 import lodash_unset from "lodash.unset";
@@ -37,7 +43,7 @@ const Reducer = (state, action) => {
   newState.__debug.actionsFired = logAction(action);
   return newState;
 };
-const Store = ({ children }) => {
+const Store = ({ children }, ref) => {
   const [state, dispatch] = useReducer(Reducer, initialState);
 
   const set = React.useCallback(
@@ -75,6 +81,14 @@ const Store = ({ children }) => {
     [get, set, invoke]
   );
 
+  useImperativeHandle(ref, () => ({
+    getState: () => {
+      const { __debug, ...rest } = state;
+      return rest;
+    },
+    getFullState: () => state,
+  }));
+
   return (
     <Context.Provider
       value={{ state, dispatch, set, get, invoke, unset, push }}
@@ -89,4 +103,4 @@ export function useStore() {
 }
 
 export const Context = createContext(initialState);
-export default Store;
+export default forwardRef(Store);

yarn.lock

@@ -6519,7 +6519,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-eslint@npm:10.x, babel-eslint@npm:^10.1.0":
+"babel-eslint@npm:^10.1.0":
   version: 10.1.0
   resolution: "babel-eslint@npm:10.1.0"
   dependencies:
@@ -11541,20 +11541,11 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"global-context-store@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "global-context-store@npm:1.0.3"
-  dependencies:
-    babel-eslint: 10.x
-    lodash.get: ^4.4.2
-    lodash.set: ^4.3.2
-    lodash.unset: ^4.5.2
-  peerDependencies:
-    react: ^16.13.1 || 17 || 18
-    react-dom: ^16.13.1 || 17 || 18
-  checksum: 84f804e24f0f2e33f765ba449c986556a26cb78d8602a7d5f7e913750103795327a6d6eec11bc0fcbd7074f967138e040097df23345cb63b3eee1897021f7ed5
+"global-context-store@link:packages/global-context-store/::locator=root%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "global-context-store@link:packages/global-context-store/::locator=root%40workspace%3A."
   languageName: node
-  linkType: hard
+  linkType: soft
 
 "global-modules@npm:2.0.0, global-modules@npm:^2.0.0":
   version: 2.0.0
@@ -14530,13 +14521,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"lodash.get@npm:^4.4.2":
-  version: 4.4.2
-  resolution: "lodash.get@npm:4.4.2"
-  checksum: e403047ddb03181c9d0e92df9556570e2b67e0f0a930fcbbbd779370972368f5568e914f913e93f3b08f6d492abc71e14d4e9b7a18916c31fa04bd2306efe545
-  languageName: node
-  linkType: hard
-
 "lodash.ismatch@npm:^4.4.0":
   version: 4.4.0
   resolution: "lodash.ismatch@npm:4.4.0"
@@ -14565,13 +14549,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"lodash.set@npm:^4.3.2":
-  version: 4.3.2
-  resolution: "lodash.set@npm:4.3.2"
-  checksum: a9122f49eef9f2d0fc9061a33d87f8e5b8c6b23d46e8b9e9ce1529d3588d79741bd1145a3abdfa3b13082703e65af27ff18d8a07bfc22b9be32f3fc36f763f70
-  languageName: node
-  linkType: hard
-
 "lodash.template@npm:^4.5.0":
   version: 4.5.0
   resolution: "lodash.template@npm:4.5.0"
@@ -14605,13 +14582,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"lodash.unset@npm:^4.5.2":
-  version: 4.5.2
-  resolution: "lodash.unset@npm:4.5.2"
-  checksum: 53b2a79c20e7c8c604ccfd82c7ad5caa28876171a323c5dc4d6d745d42bc43f4827c24526d877484bf64284104dffa4dd34e0c363d49fd84bd398c259001ac3f
-  languageName: node
-  linkType: hard
-
 "lodash@npm:>=3.5 <5, lodash@npm:^4.17.11, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.5, lodash@npm:^4.7.0":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"