[@wordpress/data][@wordpress/rich-text] tightly couple stores together and augment data functions from each package (#36422)

* [@wordpress/data][@wordpress/rich-text] tightly couple stores together and augment data functions from each package

* fix lint issue

* fix: reference @wordpress/element rather than react directly

types/wordpress__components/tsconfig.json

@@ -14,6 +14,7 @@
         "forceConsistentCasingInFileNames": true,
         "paths": {
             "@wordpress/components": ["wordpress__components"],
+            "@wordpress/data": ["wordpress__data"],
             "@wordpress/element": ["wordpress__element"],
             "@wordpress/rich-text": ["wordpress__rich-text"]
         }

types/wordpress__data/index.d.ts

@@ -4,7 +4,7 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.5
 
-import { ComponentType, Consumer, Provider, useContext } from 'react';
+import { ComponentType, Consumer, Provider, useContext } from '@wordpress/element';
 import { AnyAction as Action, combineReducers, Reducer } from 'redux';
 
 /**
@@ -16,18 +16,12 @@ export { Action, combineReducers };
 // Core functionality
 //
 export type SelectorMap = Record<string, <T = unknown>(...args: readonly any[]) => T>;
-export type DispatcherMap = Record<string, <T = unknown>(...args: readonly any[]) => T>;
+export type DispatcherMap = Record<string, <T = void>(...args: readonly any[]) => T>;
 export type Subscriber = (callback: () => void) => void;
 
-export const subscribe: Subscriber;
-
-// Dispatch overloads
-export function dispatch(key: 'core/rich-text'): typeof import('./stores/rich-text/actions');
 export function dispatch(key: string): DispatcherMap;
-
-// Select overloads
-export function select(key: 'core/rich-text'): typeof import('./stores/rich-text/selectors');
 export function select(key: string): SelectorMap;
+export const subscribe: Subscriber;
 
 //
 // Stores

types/wordpress__data/tsconfig.json

@@ -14,14 +14,11 @@
         "forceConsistentCasingInFileNames": true,
         "paths": {
             "@wordpress/element": ["wordpress__element"],
-            "@wordpress/data": ["wordpress__data"],
-            "@wordpress/rich-text": ["wordpress__rich-text"]
+            "@wordpress/data": ["wordpress__data"]
         }
     },
     "files": [
         "index.d.ts",
-        "stores/rich-text/actions.d.ts",
-        "stores/rich-text/selectors.d.ts",
         "wordpress__data-tests.tsx"
     ]
 }

types/wordpress__data/wordpress__data-tests.tsx

@@ -1,5 +1,4 @@
 import * as data from '@wordpress/data';
-import { NamedFormatConfiguration } from '@wordpress/rich-text';
 
 data.select('core/block-editor').isTyping<boolean>();
 data.dispatch('core/block-editor').resetBlocks('');
@@ -39,18 +38,21 @@ const HookComponent = () => {
 //
 // `dispatch` overload tests
 //
-data.dispatch('core/rich-text').addFormatTypes({
-    className: null,
-    edit: () => null,
-    name: 'my/foo',
-    tagName: 'a',
-    title: 'foo',
-});
-data.dispatch('core/rich-text').removeFormatTypes('my/foo');
-data.dispatch('core/rich-text').removeFormatTypes(['my/foo', 'my/bar']);
 
-//
-// `select` overload tests
-//
-data.select('core/rich-text').getFormatTypes(); // $ExpectType NamedFormatConfiguration[]
-data.select('core/rich-text').getFormatTypeForBareElement('a'); // $ExpectType NamedFormatConfiguration | undefined
+// $ExpectType Record<string, <T = void>(...args: readonly any[]) => T>
+data.dispatch('foo/bar');
+
+// $ExpectType void
+data.dispatch('foo/bar').foobar();
+
+// $ExpectType number
+data.dispatch('foo/bar').foobar<number>();
+
+// $ExpectType Record<string, <T = unknown>(...args: readonly any[]) => T>
+data.select('foo/bar');
+
+// $ExpectType unknown
+data.select('foo/bar').getFoo();
+
+// $ExpectType string
+data.select('foo/bar').getFoo<string>();

types/wordpress__rich-text/index.d.ts

@@ -5,6 +5,12 @@
 // TypeScript Version: 3.5
 
 import { ComponentType } from '@wordpress/element';
+import { dispatch, select } from '@wordpress/data';
+
+declare module '@wordpress/data' {
+    function dispatch(key: 'core/rich-text'): typeof import('./store/actions');
+    function select(key: 'core/rich-text'): typeof import('./store/selectors');
+}
 
 export interface FormatProps {
     value: Value;

types/wordpress__rich-text/tsconfig.json

@@ -13,12 +13,15 @@
         "noEmit": true,
         "forceConsistentCasingInFileNames": true,
         "paths": {
+            "@wordpress/data": ["wordpress__data"],
             "@wordpress/element": ["wordpress__element"],
             "@wordpress/rich-text": ["wordpress__rich-text"]
         }
     },
     "files": [
         "index.d.ts",
+        "store/actions.d.ts",
+        "store/selectors.d.ts",
         "wordpress__rich-text-tests.tsx"
     ]
 }

types/wordpress__rich-text/wordpress__rich-text-tests.tsx

@@ -1,3 +1,4 @@
+import { dispatch, select } from '@wordpress/data';
 import * as RT from '@wordpress/rich-text';
 
 const VALUE: RT.Value = {
@@ -162,3 +163,22 @@ RT.toggleFormat(VALUE, FORMAT);
 // unregisterFormatType
 //
 RT.unregisterFormatType('foo');
+
+//
+// store
+//
+dispatch('core/rich-text').addFormatTypes({
+    className: null,
+    edit: () => null,
+    name: 'my/foo',
+    tagName: 'a',
+    title: 'foo',
+});
+dispatch('core/rich-text').removeFormatTypes('my/foo');
+dispatch('core/rich-text').removeFormatTypes(['my/foo', 'my/bar']);
+
+// $ExpectType NamedFormatConfiguration[]
+select('core/rich-text').getFormatTypes();
+
+// $ExpectType NamedFormatConfiguration | undefined
+select('core/rich-text').getFormatTypeForBareElement('a');