From 75dd135a2b85aa24f332fde8142d5f348b3eab2f Mon Sep 17 00:00:00 2001
From: Steve Clay <steve@mrclay.org>
Date: Wed, 20 Jul 2022 23:57:25 -0400
Subject: [PATCH 1/2] Add failing test (#88)

---
 tests/getStore.test.js |  2 +-
 tests/issue88.test.js  | 65 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 tests/issue88.test.js

diff --git a/tests/getStore.test.js b/tests/getStore.test.js
index fd2b972..a8156a9 100644
--- a/tests/getStore.test.js
+++ b/tests/getStore.test.js
@@ -134,5 +134,5 @@ describe('getStore', () => {
     expect(screen.getByTestId('items').textContent).toContain('firstElement');
     act(() => push(items, 'secondElement'));
     expect(screen.getByTestId('items').textContent).toContain('firstElement,secondElement');
-  })
+  });
 });
diff --git a/tests/issue88.test.js b/tests/issue88.test.js
new file mode 100644
index 0000000..a1e6d17
--- /dev/null
+++ b/tests/issue88.test.js
@@ -0,0 +1,65 @@
+import {render} from '@testing-library/react';
+import {useEffect, useState} from 'react';
+
+import '@babel/polyfill';
+
+import createStore from '../package/index';
+
+describe('Issue 88', () => {
+  it('should subscribe even if initially not rendered', () => {
+    const track = jest.fn();
+
+    const initialStore = {
+      number: 0,
+    };
+    const {useStore} = createStore(initialStore);
+
+    const AA = () => {
+      const [number] = useStore.number();
+      track(`AA number: ${number}`);
+
+      return number;
+    };
+
+    const CC = () => {
+      const [number, setNumber] = useStore.number();
+      track(`CC number: ${number}`);
+      if (!number) {
+        setNumber((prev) => prev + 1);
+      }
+
+      return 'c';
+    };
+
+    function App() {
+      const [show, setShow] = useState(false);
+      track(`App show: ${show}`);
+      useEffect(() => {
+        setShow(true);
+      }, []);
+
+      return (
+        <div>
+          {show && (
+            <>
+              <AA />
+              <CC />
+            </>
+          )}
+        </div>
+      );
+    }
+
+    render(<App />);
+
+    console.log(track.mock.calls);
+    expect(track.mock.calls).toContain([
+        [ 'App show: false' ],
+        [ 'App show: true' ],
+        [ 'AA number: 0' ],
+        [ 'CC number: 0' ],
+        [ 'AA number: 1' ],
+        [ 'CC number: 1' ],
+    ]);
+  });
+});

From 22b76b319f217c3c7d65b3bb4c18d84bec1b70f3 Mon Sep 17 00:00:00 2001
From: Steve Clay <steve@mrclay.org>
Date: Sat, 23 Jul 2022 22:08:45 -0400
Subject: [PATCH 2/2] Add shim to support React 17+

---
 package.json     | 5 ++++-
 package/index.js | 1 +
 yarn.lock        | 5 +++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f51d9a7..3b55291 100644
--- a/package.json
+++ b/package.json
@@ -102,5 +102,8 @@
     "react-test-renderer": "17.0.2",
     "shelljs": "0.8.4"
   },
-  "bugs": "https://github.com/teafuljs/teaful/issues"
+  "bugs": "https://github.com/teafuljs/teaful/issues",
+  "dependencies": {
+    "use-sync-external-store": "^1.2.0"
+  }
 }
diff --git a/package/index.js b/package/index.js
index 055aeb2..bb806c0 100644
--- a/package/index.js
+++ b/package/index.js
@@ -1,4 +1,5 @@
 import {useEffect, useReducer, createElement} from 'react';
+import {useSyncExternalStore} from 'use-sync-external-store/shim';
 
 let MODE_GET = 1;
 let MODE_USE = 2;
diff --git a/yarn.lock b/yarn.lock
index a3bfd78..793eff5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5586,6 +5586,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"