fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-04-18 17:02:14 +07:00
parent bd9cdac02e
commit e8fbfb14c1
74973 changed files with 6658406 additions and 71 deletions

View File

@@ -0,0 +1,55 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Context = exports.AsyncModeConsumer = void 0;
var _element = require("@wordpress/element");
/**
* WordPress dependencies
*/
const Context = exports.Context = (0, _element.createContext)(false);
const {
Consumer,
Provider
} = Context;
const AsyncModeConsumer = exports.AsyncModeConsumer = Consumer;
/**
* Context Provider Component used to switch the data module component rerendering
* between Sync and Async modes.
*
* @example
*
* ```js
* import { useSelect, AsyncModeProvider } from '@wordpress/data';
* import { store as blockEditorStore } from '@wordpress/block-editor';
*
* function BlockCount() {
* const count = useSelect( ( select ) => {
* return select( blockEditorStore ).getBlockCount()
* }, [] );
*
* return count;
* }
*
* function App() {
* return (
* <AsyncModeProvider value={ true }>
* <BlockCount />
* </AsyncModeProvider>
* );
* }
* ```
*
* In this example, the BlockCount component is rerendered asynchronously.
* It means if a more critical task is being performed (like typing in an input),
* the rerendering is delayed until the browser becomes IDLE.
* It is possible to nest multiple levels of AsyncModeProvider to fine-tune the rendering behavior.
*
* @param {boolean} props.value Enable Async Mode.
* @return {Component} The component to be rendered.
*/
var _default = exports.default = Provider;
//# sourceMappingURL=context.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","Context","exports","createContext","Consumer","Provider","AsyncModeConsumer","_default","default"],"sources":["@wordpress/data/src/components/async-mode-provider/context.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nexport const Context = createContext( false );\n\nconst { Consumer, Provider } = Context;\n\nexport const AsyncModeConsumer = Consumer;\n\n/**\n * Context Provider Component used to switch the data module component rerendering\n * between Sync and Async modes.\n *\n * @example\n *\n * ```js\n * import { useSelect, AsyncModeProvider } from '@wordpress/data';\n * import { store as blockEditorStore } from '@wordpress/block-editor';\n *\n * function BlockCount() {\n * const count = useSelect( ( select ) => {\n * return select( blockEditorStore ).getBlockCount()\n * }, [] );\n *\n * return count;\n * }\n *\n * function App() {\n * return (\n * <AsyncModeProvider value={ true }>\n * <BlockCount />\n * </AsyncModeProvider>\n * );\n * }\n * ```\n *\n * In this example, the BlockCount component is rerendered asynchronously.\n * It means if a more critical task is being performed (like typing in an input),\n * the rerendering is delayed until the browser becomes IDLE.\n * It is possible to nest multiple levels of AsyncModeProvider to fine-tune the rendering behavior.\n *\n * @param {boolean} props.value Enable Async Mode.\n * @return {Component} The component to be rendered.\n */\nexport default Provider;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAMC,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,sBAAa,EAAE,KAAM,CAAC;AAE7C,MAAM;EAAEC,QAAQ;EAAEC;AAAS,CAAC,GAAGJ,OAAO;AAE/B,MAAMK,iBAAiB,GAAAJ,OAAA,CAAAI,iBAAA,GAAGF,QAAQ;;AAEzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAlCA,IAAAG,QAAA,GAAAL,OAAA,CAAAM,OAAA,GAmCeH,QAAQ","ignoreList":[]}

View File

@@ -0,0 +1,29 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "AsyncModeConsumer", {
enumerable: true,
get: function () {
return _context.AsyncModeConsumer;
}
});
Object.defineProperty(exports, "AsyncModeProvider", {
enumerable: true,
get: function () {
return _context.default;
}
});
Object.defineProperty(exports, "useAsyncMode", {
enumerable: true,
get: function () {
return _useAsyncMode.default;
}
});
var _useAsyncMode = _interopRequireDefault(require("./use-async-mode"));
var _context = _interopRequireWildcard(require("./context"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_useAsyncMode","_interopRequireDefault","require","_context","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set"],"sources":["@wordpress/data/src/components/async-mode-provider/index.js"],"sourcesContent":["export { default as useAsyncMode } from './use-async-mode';\nexport { default as AsyncModeProvider, AsyncModeConsumer } from './context';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,aAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAC,uBAAA,CAAAF,OAAA;AAA4E,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA","ignoreList":[]}

View File

@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = useAsyncMode;
var _element = require("@wordpress/element");
var _context = require("./context");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useAsyncMode() {
return (0, _element.useContext)(_context.Context);
}
//# sourceMappingURL=use-async-mode.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_context","useAsyncMode","useContext","Context"],"sources":["@wordpress/data/src/components/async-mode-provider/use-async-mode.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Context } from './context';\n\nexport default function useAsyncMode() {\n\treturn useContext( Context );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGe,SAASE,YAAYA,CAAA,EAAG;EACtC,OAAO,IAAAC,mBAAU,EAAEC,gBAAQ,CAAC;AAC7B","ignoreList":[]}

View File

@@ -0,0 +1,65 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.RegistryConsumer = exports.Context = void 0;
var _element = require("@wordpress/element");
var _defaultRegistry = _interopRequireDefault(require("../../default-registry"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const Context = exports.Context = (0, _element.createContext)(_defaultRegistry.default);
const {
Consumer,
Provider
} = Context;
/**
* A custom react Context consumer exposing the provided `registry` to
* children components. Used along with the RegistryProvider.
*
* You can read more about the react context api here:
* https://reactjs.org/docs/context.html#contextprovider
*
* @example
* ```js
* import {
* RegistryProvider,
* RegistryConsumer,
* createRegistry
* } from '@wordpress/data';
*
* const registry = createRegistry( {} );
*
* const App = ( { props } ) => {
* return <RegistryProvider value={ registry }>
* <div>Hello There</div>
* <RegistryConsumer>
* { ( registry ) => (
* <ComponentUsingRegistry
* { ...props }
* registry={ registry }
* ) }
* </RegistryConsumer>
* </RegistryProvider>
* }
* ```
*/
const RegistryConsumer = exports.RegistryConsumer = Consumer;
/**
* A custom Context provider for exposing the provided `registry` to children
* components via a consumer.
*
* See <a name="#RegistryConsumer">RegistryConsumer</a> documentation for
* example.
*/
var _default = exports.default = Provider;
//# sourceMappingURL=context.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_defaultRegistry","_interopRequireDefault","Context","exports","createContext","defaultRegistry","Consumer","Provider","RegistryConsumer","_default","default"],"sources":["@wordpress/data/src/components/registry-provider/context.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport defaultRegistry from '../../default-registry';\n\nexport const Context = createContext( defaultRegistry );\n\nconst { Consumer, Provider } = Context;\n\n/**\n * A custom react Context consumer exposing the provided `registry` to\n * children components. Used along with the RegistryProvider.\n *\n * You can read more about the react context api here:\n * https://reactjs.org/docs/context.html#contextprovider\n *\n * @example\n * ```js\n * import {\n * RegistryProvider,\n * RegistryConsumer,\n * createRegistry\n * } from '@wordpress/data';\n *\n * const registry = createRegistry( {} );\n *\n * const App = ( { props } ) => {\n * return <RegistryProvider value={ registry }>\n * <div>Hello There</div>\n * <RegistryConsumer>\n * { ( registry ) => (\n * <ComponentUsingRegistry\n * \t\t{ ...props }\n * \t registry={ registry }\n * ) }\n * </RegistryConsumer>\n * </RegistryProvider>\n * }\n * ```\n */\nexport const RegistryConsumer = Consumer;\n\n/**\n * A custom Context provider for exposing the provided `registry` to children\n * components via a consumer.\n *\n * See <a name=\"#RegistryConsumer\">RegistryConsumer</a> documentation for\n * example.\n */\nexport default Provider;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,gBAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGO,MAAMG,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,sBAAa,EAAEC,wBAAgB,CAAC;AAEvD,MAAM;EAAEC,QAAQ;EAAEC;AAAS,CAAC,GAAGL,OAAO;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,gBAAgB,GAAAL,OAAA,CAAAK,gBAAA,GAAGF,QAAQ;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AANA,IAAAG,QAAA,GAAAN,OAAA,CAAAO,OAAA,GAOeH,QAAQ","ignoreList":[]}

View File

@@ -0,0 +1,29 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "RegistryConsumer", {
enumerable: true,
get: function () {
return _context.RegistryConsumer;
}
});
Object.defineProperty(exports, "RegistryProvider", {
enumerable: true,
get: function () {
return _context.default;
}
});
Object.defineProperty(exports, "useRegistry", {
enumerable: true,
get: function () {
return _useRegistry.default;
}
});
var _context = _interopRequireWildcard(require("./context"));
var _useRegistry = _interopRequireDefault(require("./use-registry"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_context","_interopRequireWildcard","require","_useRegistry","_interopRequireDefault","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set"],"sources":["@wordpress/data/src/components/registry-provider/index.js"],"sourcesContent":["export { default as RegistryProvider, RegistryConsumer } from './context';\nexport { default as useRegistry } from './use-registry';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAwD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA","ignoreList":[]}

View File

@@ -0,0 +1,59 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = useRegistry;
var _element = require("@wordpress/element");
var _context = require("./context");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* A custom react hook exposing the registry context for use.
*
* This exposes the `registry` value provided via the
* <a href="#RegistryProvider">Registry Provider</a> to a component implementing
* this hook.
*
* It acts similarly to the `useContext` react hook.
*
* Note: Generally speaking, `useRegistry` is a low level hook that in most cases
* won't be needed for implementation. Most interactions with the `@wordpress/data`
* API can be performed via the `useSelect` hook, or the `withSelect` and
* `withDispatch` higher order components.
*
* @example
* ```js
* import {
* RegistryProvider,
* createRegistry,
* useRegistry,
* } from '@wordpress/data';
*
* const registry = createRegistry( {} );
*
* const SomeChildUsingRegistry = ( props ) => {
* const registry = useRegistry();
* // ...logic implementing the registry in other react hooks.
* };
*
*
* const ParentProvidingRegistry = ( props ) => {
* return <RegistryProvider value={ registry }>
* <SomeChildUsingRegistry { ...props } />
* </RegistryProvider>
* };
* ```
*
* @return {Function} A custom react hook exposing the registry context value.
*/
function useRegistry() {
return (0, _element.useContext)(_context.Context);
}
//# sourceMappingURL=use-registry.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_context","useRegistry","useContext","Context"],"sources":["@wordpress/data/src/components/registry-provider/use-registry.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Context } from './context';\n\n/**\n * A custom react hook exposing the registry context for use.\n *\n * This exposes the `registry` value provided via the\n * <a href=\"#RegistryProvider\">Registry Provider</a> to a component implementing\n * this hook.\n *\n * It acts similarly to the `useContext` react hook.\n *\n * Note: Generally speaking, `useRegistry` is a low level hook that in most cases\n * won't be needed for implementation. Most interactions with the `@wordpress/data`\n * API can be performed via the `useSelect` hook, or the `withSelect` and\n * `withDispatch` higher order components.\n *\n * @example\n * ```js\n * import {\n * RegistryProvider,\n * createRegistry,\n * useRegistry,\n * } from '@wordpress/data';\n *\n * const registry = createRegistry( {} );\n *\n * const SomeChildUsingRegistry = ( props ) => {\n * const registry = useRegistry();\n * // ...logic implementing the registry in other react hooks.\n * };\n *\n *\n * const ParentProvidingRegistry = ( props ) => {\n * return <RegistryProvider value={ registry }>\n * <SomeChildUsingRegistry { ...props } />\n * </RegistryProvider>\n * };\n * ```\n *\n * @return {Function} A custom react hook exposing the registry context value.\n */\nexport default function useRegistry() {\n\treturn useContext( Context );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASE,WAAWA,CAAA,EAAG;EACrC,OAAO,IAAAC,mBAAU,EAAEC,gBAAQ,CAAC;AAC7B","ignoreList":[]}

View File

@@ -0,0 +1,21 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDispatch", {
enumerable: true,
get: function () {
return _useDispatch.default;
}
});
Object.defineProperty(exports, "useDispatchWithMap", {
enumerable: true,
get: function () {
return _useDispatchWithMap.default;
}
});
var _useDispatch = _interopRequireDefault(require("./use-dispatch"));
var _useDispatchWithMap = _interopRequireDefault(require("./use-dispatch-with-map"));
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_useDispatch","_interopRequireDefault","require","_useDispatchWithMap"],"sources":["@wordpress/data/src/components/use-dispatch/index.js"],"sourcesContent":["export { default as useDispatch } from './use-dispatch';\nexport { default as useDispatchWithMap } from './use-dispatch-with-map';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAF,sBAAA,CAAAC,OAAA","ignoreList":[]}

View File

@@ -0,0 +1,51 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _useRegistry = _interopRequireDefault(require("../registry-provider/use-registry"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Custom react hook for returning aggregate dispatch actions using the provided
* dispatchMap.
*
* Currently this is an internal api only and is implemented by `withDispatch`
*
* @param {Function} dispatchMap Receives the `registry.dispatch` function as
* the first argument and the `registry` object
* as the second argument. Should return an
* object mapping props to functions.
* @param {Array} deps An array of dependencies for the hook.
* @return {Object} An object mapping props to functions created by the passed
* in dispatchMap.
*/
const useDispatchWithMap = (dispatchMap, deps) => {
const registry = (0, _useRegistry.default)();
const currentDispatchMap = (0, _element.useRef)(dispatchMap);
(0, _compose.useIsomorphicLayoutEffect)(() => {
currentDispatchMap.current = dispatchMap;
});
return (0, _element.useMemo)(() => {
const currentDispatchProps = currentDispatchMap.current(registry.dispatch, registry);
return Object.fromEntries(Object.entries(currentDispatchProps).map(([propName, dispatcher]) => {
if (typeof dispatcher !== 'function') {
// eslint-disable-next-line no-console
console.warn(`Property ${propName} returned from dispatchMap in useDispatchWithMap must be a function.`);
}
return [propName, (...args) => currentDispatchMap.current(registry.dispatch, registry)[propName](...args)];
}));
}, [registry, ...deps]);
};
var _default = exports.default = useDispatchWithMap;
//# sourceMappingURL=use-dispatch-with-map.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_compose","_useRegistry","_interopRequireDefault","useDispatchWithMap","dispatchMap","deps","registry","useRegistry","currentDispatchMap","useRef","useIsomorphicLayoutEffect","current","useMemo","currentDispatchProps","dispatch","Object","fromEntries","entries","map","propName","dispatcher","console","warn","args","_default","exports","default"],"sources":["@wordpress/data/src/components/use-dispatch/use-dispatch-with-map.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useRef } from '@wordpress/element';\nimport { useIsomorphicLayoutEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useRegistry from '../registry-provider/use-registry';\n\n/**\n * Custom react hook for returning aggregate dispatch actions using the provided\n * dispatchMap.\n *\n * Currently this is an internal api only and is implemented by `withDispatch`\n *\n * @param {Function} dispatchMap Receives the `registry.dispatch` function as\n * the first argument and the `registry` object\n * as the second argument. Should return an\n * object mapping props to functions.\n * @param {Array} deps An array of dependencies for the hook.\n * @return {Object} An object mapping props to functions created by the passed\n * in dispatchMap.\n */\nconst useDispatchWithMap = ( dispatchMap, deps ) => {\n\tconst registry = useRegistry();\n\tconst currentDispatchMap = useRef( dispatchMap );\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tcurrentDispatchMap.current = dispatchMap;\n\t} );\n\n\treturn useMemo( () => {\n\t\tconst currentDispatchProps = currentDispatchMap.current(\n\t\t\tregistry.dispatch,\n\t\t\tregistry\n\t\t);\n\t\treturn Object.fromEntries(\n\t\t\tObject.entries( currentDispatchProps ).map(\n\t\t\t\t( [ propName, dispatcher ] ) => {\n\t\t\t\t\tif ( typeof dispatcher !== 'function' ) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t\t`Property ${ propName } returned from dispatchMap in useDispatchWithMap must be a function.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\treturn [\n\t\t\t\t\t\tpropName,\n\t\t\t\t\t\t( ...args ) =>\n\t\t\t\t\t\t\tcurrentDispatchMap\n\t\t\t\t\t\t\t\t.current( registry.dispatch, registry )\n\t\t\t\t\t\t\t\t[ propName ]( ...args ),\n\t\t\t\t\t];\n\t\t\t\t}\n\t\t\t)\n\t\t);\n\t}, [ registry, ...deps ] );\n};\n\nexport default useDispatchWithMap;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,YAAA,GAAAC,sBAAA,CAAAH,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMI,kBAAkB,GAAGA,CAAEC,WAAW,EAAEC,IAAI,KAAM;EACnD,MAAMC,QAAQ,GAAG,IAAAC,oBAAW,EAAC,CAAC;EAC9B,MAAMC,kBAAkB,GAAG,IAAAC,eAAM,EAAEL,WAAY,CAAC;EAEhD,IAAAM,kCAAyB,EAAE,MAAM;IAChCF,kBAAkB,CAACG,OAAO,GAAGP,WAAW;EACzC,CAAE,CAAC;EAEH,OAAO,IAAAQ,gBAAO,EAAE,MAAM;IACrB,MAAMC,oBAAoB,GAAGL,kBAAkB,CAACG,OAAO,CACtDL,QAAQ,CAACQ,QAAQ,EACjBR,QACD,CAAC;IACD,OAAOS,MAAM,CAACC,WAAW,CACxBD,MAAM,CAACE,OAAO,CAAEJ,oBAAqB,CAAC,CAACK,GAAG,CACzC,CAAE,CAAEC,QAAQ,EAAEC,UAAU,CAAE,KAAM;MAC/B,IAAK,OAAOA,UAAU,KAAK,UAAU,EAAG;QACvC;QACAC,OAAO,CAACC,IAAI,CACV,YAAYH,QAAU,sEACxB,CAAC;MACF;MACA,OAAO,CACNA,QAAQ,EACR,CAAE,GAAGI,IAAI,KACRf,kBAAkB,CAChBG,OAAO,CAAEL,QAAQ,CAACQ,QAAQ,EAAER,QAAS,CAAC,CACrCa,QAAQ,CAAE,CAAE,GAAGI,IAAK,CAAC,CACzB;IACF,CACD,CACD,CAAC;EACF,CAAC,EAAE,CAAEjB,QAAQ,EAAE,GAAGD,IAAI,CAAG,CAAC;AAC3B,CAAC;AAAC,IAAAmB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEavB,kBAAkB","ignoreList":[]}

View File

@@ -0,0 +1,75 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _useRegistry = _interopRequireDefault(require("../registry-provider/use-registry"));
/**
* Internal dependencies
*/
/**
* @typedef {import('../../types').StoreDescriptor<StoreConfig>} StoreDescriptor
* @template {import('../../types').AnyConfig} StoreConfig
*/
/**
* @typedef {import('../../types').UseDispatchReturn<StoreNameOrDescriptor>} UseDispatchReturn
* @template StoreNameOrDescriptor
*/
/**
* A custom react hook returning the current registry dispatch actions creators.
*
* Note: The component using this hook must be within the context of a
* RegistryProvider.
*
* @template {undefined | string | StoreDescriptor<any>} StoreNameOrDescriptor
* @param {StoreNameOrDescriptor} [storeNameOrDescriptor] Optionally provide the name of the
* store or its descriptor from which to
* retrieve action creators. If not
* provided, the registry.dispatch
* function is returned instead.
*
* @example
* This illustrates a pattern where you may need to retrieve dynamic data from
* the server via the `useSelect` hook to use in combination with the dispatch
* action.
*
* ```jsx
* import { useCallback } from 'react';
* import { useDispatch, useSelect } from '@wordpress/data';
* import { store as myCustomStore } from 'my-custom-store';
*
* function Button( { onClick, children } ) {
* return <button type="button" onClick={ onClick }>{ children }</button>
* }
*
* const SaleButton = ( { children } ) => {
* const { stockNumber } = useSelect(
* ( select ) => select( myCustomStore ).getStockNumber(),
* []
* );
* const { startSale } = useDispatch( myCustomStore );
* const onClick = useCallback( () => {
* const discountPercent = stockNumber > 50 ? 10: 20;
* startSale( discountPercent );
* }, [ stockNumber ] );
* return <Button onClick={ onClick }>{ children }</Button>
* }
*
* // Rendered somewhere in the application:
* //
* // <SaleButton>Start Sale!</SaleButton>
* ```
* @return {UseDispatchReturn<StoreNameOrDescriptor>} A custom react hook.
*/
const useDispatch = storeNameOrDescriptor => {
const {
dispatch
} = (0, _useRegistry.default)();
return storeNameOrDescriptor === void 0 ? dispatch : dispatch(storeNameOrDescriptor);
};
var _default = exports.default = useDispatch;
//# sourceMappingURL=use-dispatch.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_useRegistry","_interopRequireDefault","require","useDispatch","storeNameOrDescriptor","dispatch","useRegistry","_default","exports","default"],"sources":["@wordpress/data/src/components/use-dispatch/use-dispatch.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport useRegistry from '../registry-provider/use-registry';\n\n/**\n * @typedef {import('../../types').StoreDescriptor<StoreConfig>} StoreDescriptor\n * @template {import('../../types').AnyConfig} StoreConfig\n */\n/**\n * @typedef {import('../../types').UseDispatchReturn<StoreNameOrDescriptor>} UseDispatchReturn\n * @template StoreNameOrDescriptor\n */\n\n/**\n * A custom react hook returning the current registry dispatch actions creators.\n *\n * Note: The component using this hook must be within the context of a\n * RegistryProvider.\n *\n * @template {undefined | string | StoreDescriptor<any>} StoreNameOrDescriptor\n * @param {StoreNameOrDescriptor} [storeNameOrDescriptor] Optionally provide the name of the\n * store or its descriptor from which to\n * retrieve action creators. If not\n * provided, the registry.dispatch\n * function is returned instead.\n *\n * @example\n * This illustrates a pattern where you may need to retrieve dynamic data from\n * the server via the `useSelect` hook to use in combination with the dispatch\n * action.\n *\n * ```jsx\n * import { useCallback } from 'react';\n * import { useDispatch, useSelect } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * function Button( { onClick, children } ) {\n * return <button type=\"button\" onClick={ onClick }>{ children }</button>\n * }\n *\n * const SaleButton = ( { children } ) => {\n * const { stockNumber } = useSelect(\n * ( select ) => select( myCustomStore ).getStockNumber(),\n * []\n * );\n * const { startSale } = useDispatch( myCustomStore );\n * const onClick = useCallback( () => {\n * const discountPercent = stockNumber > 50 ? 10: 20;\n * startSale( discountPercent );\n * }, [ stockNumber ] );\n * return <Button onClick={ onClick }>{ children }</Button>\n * }\n *\n * // Rendered somewhere in the application:\n * //\n * // <SaleButton>Start Sale!</SaleButton>\n * ```\n * @return {UseDispatchReturn<StoreNameOrDescriptor>} A custom react hook.\n */\nconst useDispatch = ( storeNameOrDescriptor ) => {\n\tconst { dispatch } = useRegistry();\n\treturn storeNameOrDescriptor === void 0\n\t\t? dispatch\n\t\t: dispatch( storeNameOrDescriptor );\n};\n\nexport default useDispatch;\n"],"mappings":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAKC,qBAAqB,IAAM;EAChD,MAAM;IAAEC;EAAS,CAAC,GAAG,IAAAC,oBAAW,EAAC,CAAC;EAClC,OAAOF,qBAAqB,KAAK,KAAK,CAAC,GACpCC,QAAQ,GACRA,QAAQ,CAAED,qBAAsB,CAAC;AACrC,CAAC;AAAC,IAAAG,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaN,WAAW","ignoreList":[]}

View File

@@ -0,0 +1,321 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = useSelect;
exports.useSuspenseSelect = useSuspenseSelect;
var _priorityQueue = require("@wordpress/priority-queue");
var _element = require("@wordpress/element");
var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
var _useRegistry = _interopRequireDefault(require("../registry-provider/use-registry"));
var _useAsyncMode = _interopRequireDefault(require("../async-mode-provider/use-async-mode"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const renderQueue = (0, _priorityQueue.createQueue)();
/**
* @typedef {import('../../types').StoreDescriptor<C>} StoreDescriptor
* @template {import('../../types').AnyConfig} C
*/
/**
* @typedef {import('../../types').ReduxStoreConfig<State,Actions,Selectors>} ReduxStoreConfig
* @template State
* @template {Record<string,import('../../types').ActionCreator>} Actions
* @template Selectors
*/
/** @typedef {import('../../types').MapSelect} MapSelect */
/**
* @typedef {import('../../types').UseSelectReturn<T>} UseSelectReturn
* @template {MapSelect|StoreDescriptor<any>} T
*/
function Store(registry, suspense) {
const select = suspense ? registry.suspendSelect : registry.select;
const queueContext = {};
let lastMapSelect;
let lastMapResult;
let lastMapResultValid = false;
let lastIsAsync;
let subscriber;
let didWarnUnstableReference;
const storeStatesOnMount = new Map();
function getStoreState(name) {
var _registry$stores$name;
// If there's no store property (custom generic store), return an empty
// object. When comparing the state, the empty objects will cause the
// equality check to fail, setting `lastMapResultValid` to false.
return (_registry$stores$name = registry.stores[name]?.store?.getState?.()) !== null && _registry$stores$name !== void 0 ? _registry$stores$name : {};
}
const createSubscriber = stores => {
// The set of stores the `subscribe` function is supposed to subscribe to. Here it is
// initialized, and then the `updateStores` function can add new stores to it.
const activeStores = [...stores];
// The `subscribe` function, which is passed to the `useSyncExternalStore` hook, could
// be called multiple times to establish multiple subscriptions. That's why we need to
// keep a set of active subscriptions;
const activeSubscriptions = new Set();
function subscribe(listener) {
// Maybe invalidate the value right after subscription was created.
// React will call `getValue` after subscribing, to detect store
// updates that happened in the interval between the `getValue` call
// during render and creating the subscription, which is slightly
// delayed. We need to ensure that this second `getValue` call will
// compute a fresh value only if any of the store states have
// changed in the meantime.
if (lastMapResultValid) {
for (const name of activeStores) {
if (storeStatesOnMount.get(name) !== getStoreState(name)) {
lastMapResultValid = false;
}
}
}
storeStatesOnMount.clear();
const onStoreChange = () => {
// Invalidate the value on store update, so that a fresh value is computed.
lastMapResultValid = false;
listener();
};
const onChange = () => {
if (lastIsAsync) {
renderQueue.add(queueContext, onStoreChange);
} else {
onStoreChange();
}
};
const unsubs = [];
function subscribeStore(storeName) {
unsubs.push(registry.subscribe(onChange, storeName));
}
for (const storeName of activeStores) {
subscribeStore(storeName);
}
activeSubscriptions.add(subscribeStore);
return () => {
activeSubscriptions.delete(subscribeStore);
for (const unsub of unsubs.values()) {
// The return value of the subscribe function could be undefined if the store is a custom generic store.
unsub?.();
}
// Cancel existing store updates that were already scheduled.
renderQueue.cancel(queueContext);
};
}
// Check if `newStores` contains some stores we're not subscribed to yet, and add them.
function updateStores(newStores) {
for (const newStore of newStores) {
if (activeStores.includes(newStore)) {
continue;
}
// New `subscribe` calls will subscribe to `newStore`, too.
activeStores.push(newStore);
// Add `newStore` to existing subscriptions.
for (const subscription of activeSubscriptions) {
subscription(newStore);
}
}
}
return {
subscribe,
updateStores
};
};
return (mapSelect, isAsync) => {
function updateValue() {
// If the last value is valid, and the `mapSelect` callback hasn't changed,
// then we can safely return the cached value. The value can change only on
// store update, and in that case value will be invalidated by the listener.
if (lastMapResultValid && mapSelect === lastMapSelect) {
return lastMapResult;
}
const listeningStores = {
current: null
};
const mapResult = registry.__unstableMarkListeningStores(() => mapSelect(select, registry), listeningStores);
if (process.env.NODE_ENV === 'development') {
if (!didWarnUnstableReference) {
const secondMapResult = mapSelect(select, registry);
if (!(0, _isShallowEqual.default)(mapResult, secondMapResult)) {
// eslint-disable-next-line no-console
console.warn(`The 'useSelect' hook returns different values when called with the same state and parameters. This can lead to unnecessary rerenders.`);
didWarnUnstableReference = true;
}
}
}
if (!subscriber) {
for (const name of listeningStores.current) {
storeStatesOnMount.set(name, getStoreState(name));
}
subscriber = createSubscriber(listeningStores.current);
} else {
subscriber.updateStores(listeningStores.current);
}
// If the new value is shallow-equal to the old one, keep the old one so
// that we don't trigger unwanted updates that do a `===` check.
if (!(0, _isShallowEqual.default)(lastMapResult, mapResult)) {
lastMapResult = mapResult;
}
lastMapSelect = mapSelect;
lastMapResultValid = true;
}
function getValue() {
// Update the value in case it's been invalidated or `mapSelect` has changed.
updateValue();
return lastMapResult;
}
// When transitioning from async to sync mode, cancel existing store updates
// that have been scheduled, and invalidate the value so that it's freshly
// computed. It might have been changed by the update we just cancelled.
if (lastIsAsync && !isAsync) {
lastMapResultValid = false;
renderQueue.cancel(queueContext);
}
updateValue();
lastIsAsync = isAsync;
// Return a pair of functions that can be passed to `useSyncExternalStore`.
return {
subscribe: subscriber.subscribe,
getValue
};
};
}
function useStaticSelect(storeName) {
return (0, _useRegistry.default)().select(storeName);
}
function useMappingSelect(suspense, mapSelect, deps) {
const registry = (0, _useRegistry.default)();
const isAsync = (0, _useAsyncMode.default)();
const store = (0, _element.useMemo)(() => Store(registry, suspense), [registry, suspense]);
// These are "pass-through" dependencies from the parent hook,
// and the parent should catch any hook rule violations.
// eslint-disable-next-line react-hooks/exhaustive-deps
const selector = (0, _element.useCallback)(mapSelect, deps);
const {
subscribe,
getValue
} = store(selector, isAsync);
const result = (0, _element.useSyncExternalStore)(subscribe, getValue, getValue);
(0, _element.useDebugValue)(result);
return result;
}
/**
* Custom react hook for retrieving props from registered selectors.
*
* In general, this custom React hook follows the
* [rules of hooks](https://reactjs.org/docs/hooks-rules.html).
*
* @template {MapSelect | StoreDescriptor<any>} T
* @param {T} mapSelect Function called on every state change. The returned value is
* exposed to the component implementing this hook. The function
* receives the `registry.select` method on the first argument
* and the `registry` on the second argument.
* When a store key is passed, all selectors for the store will be
* returned. This is only meant for usage of these selectors in event
* callbacks, not for data needed to create the element tree.
* @param {unknown[]} deps If provided, this memoizes the mapSelect so the same `mapSelect` is
* invoked on every state change unless the dependencies change.
*
* @example
* ```js
* import { useSelect } from '@wordpress/data';
* import { store as myCustomStore } from 'my-custom-store';
*
* function HammerPriceDisplay( { currency } ) {
* const price = useSelect( ( select ) => {
* return select( myCustomStore ).getPrice( 'hammer', currency );
* }, [ currency ] );
* return new Intl.NumberFormat( 'en-US', {
* style: 'currency',
* currency,
* } ).format( price );
* }
*
* // Rendered in the application:
* // <HammerPriceDisplay currency="USD" />
* ```
*
* In the above example, when `HammerPriceDisplay` is rendered into an
* application, the price will be retrieved from the store state using the
* `mapSelect` callback on `useSelect`. If the currency prop changes then
* any price in the state for that currency is retrieved. If the currency prop
* doesn't change and other props are passed in that do change, the price will
* not change because the dependency is just the currency.
*
* When data is only used in an event callback, the data should not be retrieved
* on render, so it may be useful to get the selectors function instead.
*
* **Don't use `useSelect` this way when calling the selectors in the render
* function because your component won't re-render on a data change.**
*
* ```js
* import { useSelect } from '@wordpress/data';
* import { store as myCustomStore } from 'my-custom-store';
*
* function Paste( { children } ) {
* const { getSettings } = useSelect( myCustomStore );
* function onPaste() {
* // Do something with the settings.
* const settings = getSettings();
* }
* return <div onPaste={ onPaste }>{ children }</div>;
* }
* ```
* @return {UseSelectReturn<T>} A custom react hook.
*/
function useSelect(mapSelect, deps) {
// On initial call, on mount, determine the mode of this `useSelect` call
// and then never allow it to change on subsequent updates.
const staticSelectMode = typeof mapSelect !== 'function';
const staticSelectModeRef = (0, _element.useRef)(staticSelectMode);
if (staticSelectMode !== staticSelectModeRef.current) {
const prevMode = staticSelectModeRef.current ? 'static' : 'mapping';
const nextMode = staticSelectMode ? 'static' : 'mapping';
throw new Error(`Switching useSelect from ${prevMode} to ${nextMode} is not allowed`);
}
/* eslint-disable react-hooks/rules-of-hooks */
// `staticSelectMode` is not allowed to change during the hook instance's,
// lifetime, so the rules of hooks are not really violated.
return staticSelectMode ? useStaticSelect(mapSelect) : useMappingSelect(false, mapSelect, deps);
/* eslint-enable react-hooks/rules-of-hooks */
}
/**
* A variant of the `useSelect` hook that has the same API, but is a compatible
* Suspense-enabled data source.
*
* @template {MapSelect} T
* @param {T} mapSelect Function called on every state change. The
* returned value is exposed to the component
* using this hook. The function receives the
* `registry.suspendSelect` method as the first
* argument and the `registry` as the second one.
* @param {Array} deps A dependency array used to memoize the `mapSelect`
* so that the same `mapSelect` is invoked on every
* state change unless the dependencies change.
*
* @throws {Promise} A suspense Promise that is thrown if any of the called
* selectors is in an unresolved state.
*
* @return {ReturnType<T>} Data object returned by the `mapSelect` function.
*/
function useSuspenseSelect(mapSelect, deps) {
return useMappingSelect(true, mapSelect, deps);
}
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,110 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _compose = require("@wordpress/compose");
var _useDispatch = require("../use-dispatch");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('react').ComponentType} ComponentType */
/**
* Higher-order component used to add dispatch props using registered action
* creators.
*
* @param {Function} mapDispatchToProps A function of returning an object of
* prop names where value is a
* dispatch-bound action creator, or a
* function to be called with the
* component's props and returning an
* action creator.
*
* @example
* ```jsx
* function Button( { onClick, children } ) {
* return <button type="button" onClick={ onClick }>{ children }</button>;
* }
*
* import { withDispatch } from '@wordpress/data';
* import { store as myCustomStore } from 'my-custom-store';
*
* const SaleButton = withDispatch( ( dispatch, ownProps ) => {
* const { startSale } = dispatch( myCustomStore );
* const { discountPercent } = ownProps;
*
* return {
* onClick() {
* startSale( discountPercent );
* },
* };
* } )( Button );
*
* // Rendered in the application:
* //
* // <SaleButton discountPercent="20">Start Sale!</SaleButton>
* ```
*
* @example
* In the majority of cases, it will be sufficient to use only two first params
* passed to `mapDispatchToProps` as illustrated in the previous example.
* However, there might be some very advanced use cases where using the
* `registry` object might be used as a tool to optimize the performance of
* your component. Using `select` function from the registry might be useful
* when you need to fetch some dynamic data from the store at the time when the
* event is fired, but at the same time, you never use it to render your
* component. In such scenario, you can avoid using the `withSelect` higher
* order component to compute such prop, which might lead to unnecessary
* re-renders of your component caused by its frequent value change.
* Keep in mind, that `mapDispatchToProps` must return an object with functions
* only.
*
* ```jsx
* function Button( { onClick, children } ) {
* return <button type="button" onClick={ onClick }>{ children }</button>;
* }
*
* import { withDispatch } from '@wordpress/data';
* import { store as myCustomStore } from 'my-custom-store';
*
* const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => {
* // Stock number changes frequently.
* const { getStockNumber } = select( myCustomStore );
* const { startSale } = dispatch( myCustomStore );
* return {
* onClick() {
* const discountPercent = getStockNumber() > 50 ? 10 : 20;
* startSale( discountPercent );
* },
* };
* } )( Button );
*
* // Rendered in the application:
* //
* // <SaleButton>Start Sale!</SaleButton>
* ```
*
* _Note:_ It is important that the `mapDispatchToProps` function always
* returns an object with the same keys. For example, it should not contain
* conditions under which a different value would be returned.
*
* @return {ComponentType} Enhanced component with merged dispatcher props.
*/
const withDispatch = mapDispatchToProps => (0, _compose.createHigherOrderComponent)(WrappedComponent => ownProps => {
const mapDispatch = (dispatch, registry) => mapDispatchToProps(dispatch, ownProps, registry);
const dispatchProps = (0, _useDispatch.useDispatchWithMap)(mapDispatch, []);
return (0, _react.createElement)(WrappedComponent, {
...ownProps,
...dispatchProps
});
}, 'withDispatch');
var _default = exports.default = withDispatch;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _compose = require("@wordpress/compose");
var _registryProvider = require("../registry-provider");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Higher-order component which renders the original component with the current
* registry context passed as its `registry` prop.
*
* @param {Component} OriginalComponent Original component.
*
* @return {Component} Enhanced component.
*/
const withRegistry = (0, _compose.createHigherOrderComponent)(OriginalComponent => props => (0, _react.createElement)(_registryProvider.RegistryConsumer, null, registry => (0, _react.createElement)(OriginalComponent, {
...props,
registry: registry
})), 'withRegistry');
var _default = exports.default = withRegistry;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_compose","require","_registryProvider","withRegistry","createHigherOrderComponent","OriginalComponent","props","_react","createElement","RegistryConsumer","registry","_default","exports","default"],"sources":["@wordpress/data/src/components/with-registry/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { RegistryConsumer } from '../registry-provider';\n\n/**\n * Higher-order component which renders the original component with the current\n * registry context passed as its `registry` prop.\n *\n * @param {Component} OriginalComponent Original component.\n *\n * @return {Component} Enhanced component.\n */\nconst withRegistry = createHigherOrderComponent(\n\t( OriginalComponent ) => ( props ) => (\n\t\t<RegistryConsumer>\n\t\t\t{ ( registry ) => (\n\t\t\t\t<OriginalComponent { ...props } registry={ registry } />\n\t\t\t) }\n\t\t</RegistryConsumer>\n\t),\n\t'withRegistry'\n);\n\nexport default withRegistry;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,YAAY,GAAG,IAAAC,mCAA0B,EAC5CC,iBAAiB,IAAQC,KAAK,IAC/B,IAAAC,MAAA,CAAAC,aAAA,EAACN,iBAAA,CAAAO,gBAAgB,QACZC,QAAQ,IACX,IAAAH,MAAA,CAAAC,aAAA,EAACH,iBAAiB;EAAA,GAAMC,KAAK;EAAGI,QAAQ,EAAGA;AAAU,CAAE,CAEvC,CAClB,EACD,cACD,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaV,YAAY","ignoreList":[]}

View File

@@ -0,0 +1,70 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _compose = require("@wordpress/compose");
var _useSelect = _interopRequireDefault(require("../use-select"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('react').ComponentType} ComponentType */
/**
* Higher-order component used to inject state-derived props using registered
* selectors.
*
* @param {Function} mapSelectToProps Function called on every state change,
* expected to return object of props to
* merge with the component's own props.
*
* @example
* ```js
* import { withSelect } from '@wordpress/data';
* import { store as myCustomStore } from 'my-custom-store';
*
* function PriceDisplay( { price, currency } ) {
* return new Intl.NumberFormat( 'en-US', {
* style: 'currency',
* currency,
* } ).format( price );
* }
*
* const HammerPriceDisplay = withSelect( ( select, ownProps ) => {
* const { getPrice } = select( myCustomStore );
* const { currency } = ownProps;
*
* return {
* price: getPrice( 'hammer', currency ),
* };
* } )( PriceDisplay );
*
* // Rendered in the application:
* //
* // <HammerPriceDisplay currency="USD" />
* ```
* In the above example, when `HammerPriceDisplay` is rendered into an
* application, it will pass the price into the underlying `PriceDisplay`
* component and update automatically if the price of a hammer ever changes in
* the store.
*
* @return {ComponentType} Enhanced component with merged state data props.
*/
const withSelect = mapSelectToProps => (0, _compose.createHigherOrderComponent)(WrappedComponent => (0, _compose.pure)(ownProps => {
const mapSelect = (select, registry) => mapSelectToProps(select, ownProps, registry);
const mergeProps = (0, _useSelect.default)(mapSelect);
return (0, _react.createElement)(WrappedComponent, {
...ownProps,
...mergeProps
});
}), 'withSelect');
var _default = exports.default = withSelect;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_compose","require","_useSelect","_interopRequireDefault","withSelect","mapSelectToProps","createHigherOrderComponent","WrappedComponent","pure","ownProps","mapSelect","select","registry","mergeProps","useSelect","_react","createElement","_default","exports","default"],"sources":["@wordpress/data/src/components/with-select/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, pure } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useSelect from '../use-select';\n\n/** @typedef {import('react').ComponentType} ComponentType */\n\n/**\n * Higher-order component used to inject state-derived props using registered\n * selectors.\n *\n * @param {Function} mapSelectToProps Function called on every state change,\n * expected to return object of props to\n * merge with the component's own props.\n *\n * @example\n * ```js\n * import { withSelect } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * function PriceDisplay( { price, currency } ) {\n * \treturn new Intl.NumberFormat( 'en-US', {\n * \t\tstyle: 'currency',\n * \t\tcurrency,\n * \t} ).format( price );\n * }\n *\n * const HammerPriceDisplay = withSelect( ( select, ownProps ) => {\n * \tconst { getPrice } = select( myCustomStore );\n * \tconst { currency } = ownProps;\n *\n * \treturn {\n * \t\tprice: getPrice( 'hammer', currency ),\n * \t};\n * } )( PriceDisplay );\n *\n * // Rendered in the application:\n * //\n * // <HammerPriceDisplay currency=\"USD\" />\n * ```\n * In the above example, when `HammerPriceDisplay` is rendered into an\n * application, it will pass the price into the underlying `PriceDisplay`\n * component and update automatically if the price of a hammer ever changes in\n * the store.\n *\n * @return {ComponentType} Enhanced component with merged state data props.\n */\nconst withSelect = ( mapSelectToProps ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) =>\n\t\t\tpure( ( ownProps ) => {\n\t\t\t\tconst mapSelect = ( select, registry ) =>\n\t\t\t\t\tmapSelectToProps( select, ownProps, registry );\n\t\t\t\tconst mergeProps = useSelect( mapSelect );\n\t\t\t\treturn <WrappedComponent { ...ownProps } { ...mergeProps } />;\n\t\t\t} ),\n\t\t'withSelect'\n\t);\n\nexport default withSelect;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMG,UAAU,GAAKC,gBAAgB,IACpC,IAAAC,mCAA0B,EACvBC,gBAAgB,IACjB,IAAAC,aAAI,EAAIC,QAAQ,IAAM;EACrB,MAAMC,SAAS,GAAGA,CAAEC,MAAM,EAAEC,QAAQ,KACnCP,gBAAgB,CAAEM,MAAM,EAAEF,QAAQ,EAAEG,QAAS,CAAC;EAC/C,MAAMC,UAAU,GAAG,IAAAC,kBAAS,EAAEJ,SAAU,CAAC;EACzC,OAAO,IAAAK,MAAA,CAAAC,aAAA,EAACT,gBAAgB;IAAA,GAAME,QAAQ;IAAA,GAAQI;EAAU,CAAI,CAAC;AAC9D,CAAE,CAAC,EACJ,YACD,CAAC;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEYf,UAAU","ignoreList":[]}