Skeleton for store

Author: rickhanlonii

packages/react-reconciler/src/ReactFiberHooks.js

@@ -14,6 +14,7 @@ import type {
   Thenable,
   RejectedThenable,
   Awaited,
+  ReactStore,
 } from 'shared/ReactTypes';
 import type {
   Fiber,
@@ -44,10 +45,12 @@ import {
   enableNoCloningMemoCache,
   enableViewTransition,
   enableGestureTransition,
+  enableStore,
 } from 'shared/ReactFeatureFlags';
 import {
   REACT_CONTEXT_TYPE,
   REACT_MEMO_CACHE_SENTINEL,
+  REACT_STORE_TYPE,
 } from 'shared/ReactSymbols';
 
 import {
@@ -1145,6 +1148,10 @@ function useThenable<T>(thenable: Thenable<T>): T {
   return result;
 }
 
+function useStore<T>(store: ReactStore<T>): T {
+  return store._current;
+}
+
 function use<T>(usable: Usable<T>): T {
   if (usable !== null && typeof usable === 'object') {
     // $FlowFixMe[method-unbinding]
@@ -1156,6 +1163,12 @@ function use<T>(usable: Usable<T>): T {
       const context: ReactContext<T> = (usable: any);
       return readContext(context);
     }
+    if (enableStore) {
+      if (usable.$$typeof === REACT_STORE_TYPE) {
+        const store: ReactStore<T> = (usable: any);
+        return useStore(store);
+      }
+    }
   }
 
   // eslint-disable-next-line react-internal/safe-string-coercion

packages/react-reconciler/src/__tests__/ReactUseStore-test.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+'use strict';
+
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let use;
+let assertLog;
+let createStore;
+
+describe('ReactUse', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    use = React.use;
+    createStore = React.unstable_createStore;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+  });
+
+  // @gate enableStore
+  it('should read the current value', async () => {
+    const store = createStore(1);
+
+    function App() {
+      const value = use(store);
+      Scheduler.log(value);
+      return <span>{value}</span>;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog([1]);
+    expect(root).toMatchRenderedOutput(<span>1</span>);
+  });
+});

packages/react/index.fb.js

@@ -7,7 +7,11 @@
  * @flow
  */
 
-import {captureOwnerStack as captureOwnerStackImpl} from './src/ReactClient';
+import {
+  captureOwnerStack as captureOwnerStackImpl,
+  unstable_createStore as createStore,
+} from './src/ReactClient';
+import {enableStore} from 'shared/ReactFeatureFlags';
 
 export {
   __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
@@ -76,4 +80,9 @@ if (__DEV__) {
   captureOwnerStack = captureOwnerStackImpl;
 }
 
-export {captureOwnerStack};
+let unstable_createStore: typeof createStore;
+if (enableStore) {
+  unstable_createStore = createStore;
+}
+
+export {captureOwnerStack, unstable_createStore};

packages/react/src/ReactClient.js

@@ -30,6 +30,7 @@ import {
   isValidElement,
 } from './jsx/ReactJSXElement';
 import {createContext} from './ReactContext';
+import {createStore} from './ReactStore';
 import {lazy} from './ReactLazy';
 import {forwardRef} from './ReactForwardRef';
 import {memo} from './ReactMemo';
@@ -128,6 +129,8 @@ export {
   addTransitionType as unstable_addTransitionType,
   // enableGestureTransition
   startGestureTransition as unstable_startGestureTransition,
+  // enableStore
+  createStore as unstable_createStore,
   // DEV-only
   useId,
   act,

packages/react/src/ReactStore.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactStore} from 'shared/ReactTypes';
+import {REACT_STORE_TYPE} from 'shared/ReactSymbols';
+import {enableStore} from 'shared/ReactFeatureFlags';
+
+export function createStore<T>(
+  defaultValue: T,
+  reducer?: (T, mixed) => T,
+): ReactStore<T> {
+  if (!enableStore) {
+    throw new Error('Not implemented.');
+  }
+
+  const store: ReactStore<T> = {
+    $$typeof: REACT_STORE_TYPE,
+
+    _current: defaultValue,
+    _sync: defaultValue,
+    _transition: defaultValue,
+  };
+
+  return store;
+}

packages/shared/ReactFeatureFlags.js

@@ -270,3 +270,5 @@ export const enableUpdaterTracking = __PROFILE__;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 
 export const ownerStackLimit = 1e4;
+
+export const enableStore = false;

packages/shared/ReactSymbols.js

@@ -51,6 +51,8 @@ export const REACT_VIEW_TRANSITION_TYPE: symbol = Symbol.for(
   'react.view_transition',
 );
 
+export const REACT_STORE_TYPE: symbol = Symbol.for('react.store');
+
 const MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
 const FAUX_ITERATOR_SYMBOL = '@@iterator';
 

packages/shared/ReactTypes.js

@@ -64,6 +64,13 @@ export type ReactContext<T> = {
   displayName?: string,
 };
 
+export type ReactStore<T> = {
+  $$typeof: symbol,
+  _current: T,
+  _sync: T,
+  _transition: T,
+};
+
 export type ReactPortal = {
   $$typeof: symbol | number,
   key: null | string,
@@ -141,7 +148,7 @@ export type StartTransitionOptions = {
   name?: string,
 };
 
-export type Usable<T> = Thenable<T> | ReactContext<T>;
+export type Usable<T> = Thenable<T> | ReactContext<T> | ReactStore<T>;
 
 export type ReactCustomFormAction = {
   name?: string,

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -88,6 +88,7 @@ export const enableSrcObject = false;
 export const enableHydrationChangeEvent = true;
 export const enableDefaultTransitionIndicator = false;
 export const ownerStackLimit = 1e4;
+export const enableStore = false;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -86,6 +86,7 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableUpdaterTracking = __PROFILE__;
+export const enableStore = false;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -96,6 +96,7 @@ export const enableReactTestRendererWarning = true;
 export const disableDefaultPropsExceptForClasses = true;
 
 export const enableObjectFiber = false;
+export const enableStore = false;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js

@@ -76,6 +76,7 @@ export const enableHydrationChangeEvent = false;
 export const enableDefaultTransitionIndicator = false;
 export const enableFragmentRefs = false;
 export const ownerStackLimit = 1e4;
+export const enableStore = false;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -91,6 +91,7 @@ export const enableDefaultTransitionIndicator = false;
 
 export const enableFragmentRefs = false;
 export const ownerStackLimit = 1e4;
+export const enableStore = false;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -40,6 +40,7 @@ export const enableViewTransition = __VARIANT__;
 export const enableComponentPerformanceTrack = __VARIANT__;
 export const enableScrollEndPolyfill = __VARIANT__;
 export const enableFragmentRefs = __VARIANT__;
+export const enableStore = __VARIANT__;
 
 // TODO: These flags are hard-coded to the default values used in open source.
 // Update the tests so that they pass in either mode, then set these

packages/shared/forks/ReactFeatureFlags.www.js

@@ -38,6 +38,7 @@ export const {
   enableComponentPerformanceTrack,
   enableScrollEndPolyfill,
   enableFragmentRefs,
+  enableStore,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.