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,3 @@
export { default as useDispatch } from './use-dispatch';
export { default as useDispatchWithMap } from './use-dispatch-with-map';
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["default","useDispatch","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,SAASA,OAAO,IAAIC,WAAW,QAAQ,gBAAgB;AACvD,SAASD,OAAO,IAAIE,kBAAkB,QAAQ,yBAAyB","ignoreList":[]}

View File

@@ -0,0 +1,44 @@
/**
* WordPress dependencies
*/
import { useMemo, useRef } from '@wordpress/element';
import { useIsomorphicLayoutEffect } from '@wordpress/compose';
/**
* Internal dependencies
*/
import useRegistry from '../registry-provider/use-registry';
/**
* 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 = useRegistry();
const currentDispatchMap = useRef(dispatchMap);
useIsomorphicLayoutEffect(() => {
currentDispatchMap.current = dispatchMap;
});
return 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]);
};
export default useDispatchWithMap;
//# sourceMappingURL=use-dispatch-with-map.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["useMemo","useRef","useIsomorphicLayoutEffect","useRegistry","useDispatchWithMap","dispatchMap","deps","registry","currentDispatchMap","current","currentDispatchProps","dispatch","Object","fromEntries","entries","map","propName","dispatcher","console","warn","args"],"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":"AAAA;AACA;AACA;AACA,SAASA,OAAO,EAAEC,MAAM,QAAQ,oBAAoB;AACpD,SAASC,yBAAyB,QAAQ,oBAAoB;;AAE9D;AACA;AACA;AACA,OAAOC,WAAW,MAAM,mCAAmC;;AAE3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,GAAGA,CAAEC,WAAW,EAAEC,IAAI,KAAM;EACnD,MAAMC,QAAQ,GAAGJ,WAAW,CAAC,CAAC;EAC9B,MAAMK,kBAAkB,GAAGP,MAAM,CAAEI,WAAY,CAAC;EAEhDH,yBAAyB,CAAE,MAAM;IAChCM,kBAAkB,CAACC,OAAO,GAAGJ,WAAW;EACzC,CAAE,CAAC;EAEH,OAAOL,OAAO,CAAE,MAAM;IACrB,MAAMU,oBAAoB,GAAGF,kBAAkB,CAACC,OAAO,CACtDF,QAAQ,CAACI,QAAQ,EACjBJ,QACD,CAAC;IACD,OAAOK,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,KACRZ,kBAAkB,CAChBC,OAAO,CAAEF,QAAQ,CAACI,QAAQ,EAAEJ,QAAS,CAAC,CACrCS,QAAQ,CAAE,CAAE,GAAGI,IAAK,CAAC,CACzB;IACF,CACD,CACD,CAAC;EACF,CAAC,EAAE,CAAEb,QAAQ,EAAE,GAAGD,IAAI,CAAG,CAAC;AAC3B,CAAC;AAED,eAAeF,kBAAkB","ignoreList":[]}

View File

@@ -0,0 +1,68 @@
/**
* Internal dependencies
*/
import useRegistry from '../registry-provider/use-registry';
/**
* @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
} = useRegistry();
return storeNameOrDescriptor === void 0 ? dispatch : dispatch(storeNameOrDescriptor);
};
export default useDispatch;
//# sourceMappingURL=use-dispatch.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["useRegistry","useDispatch","storeNameOrDescriptor","dispatch"],"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":"AAAA;AACA;AACA;AACA,OAAOA,WAAW,MAAM,mCAAmC;;AAE3D;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,GAAGH,WAAW,CAAC,CAAC;EAClC,OAAOE,qBAAqB,KAAK,KAAK,CAAC,GACpCC,QAAQ,GACRA,QAAQ,CAAED,qBAAsB,CAAC;AACrC,CAAC;AAED,eAAeD,WAAW","ignoreList":[]}