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,49 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.HStack = void 0;
var _react = require("react");
var _context = require("../context");
var _view = require("../view");
var _hook = require("./hook");
/**
* Internal dependencies
*/
function UnconnectedHStack(props, forwardedRef) {
const hStackProps = (0, _hook.useHStack)(props);
return (0, _react.createElement)(_view.View, {
...hStackProps,
ref: forwardedRef
});
}
/**
* `HStack` (Horizontal Stack) arranges child elements in a horizontal line.
*
* `HStack` can render anything inside.
*
* ```jsx
* import {
* __experimentalHStack as HStack,
* __experimentalText as Text,
* } from `@wordpress/components`;
*
* function Example() {
* return (
* <HStack>
* <Text>Code</Text>
* <Text>is</Text>
* <Text>Poetry</Text>
* </HStack>
* );
* }
* ```
*/
const HStack = (0, _context.contextConnect)(UnconnectedHStack, 'HStack');
exports.HStack = HStack;
var _default = HStack;
exports.default = _default;
//# sourceMappingURL=component.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_context","require","_view","_hook","UnconnectedHStack","props","forwardedRef","hStackProps","useHStack","_react","createElement","View","ref","HStack","contextConnect","exports","_default","default"],"sources":["@wordpress/components/src/h-stack/component.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useHStack } from './hook';\nimport type { Props } from './types';\n\nfunction UnconnectedHStack(\n\tprops: WordPressComponentProps< Props, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) {\n\tconst hStackProps = useHStack( props );\n\n\treturn <View { ...hStackProps } ref={ forwardedRef } />;\n}\n\n/**\n * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.\n *\n * `HStack` can render anything inside.\n *\n * ```jsx\n * import {\n * \t__experimentalHStack as HStack,\n * \t__experimentalText as Text,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<HStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</HStack>\n * \t);\n * }\n * ```\n */\nexport const HStack = contextConnect( UnconnectedHStack, 'HStack' );\n\nexport default HStack;\n"],"mappings":";;;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AANA;AACA;AACA;;AAOA,SAASG,iBAAiBA,CACzBC,KAA8C,EAC9CC,YAAuC,EACtC;EACD,MAAMC,WAAW,GAAG,IAAAC,eAAS,EAAEH,KAAM,CAAC;EAEtC,OAAO,IAAAI,MAAA,CAAAC,aAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMJ,WAAW;IAAGK,GAAG,EAAGN;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,MAAM,GAAG,IAAAC,uBAAc,EAAEV,iBAAiB,EAAE,QAAS,CAAC;AAACW,OAAA,CAAAF,MAAA,GAAAA,MAAA;AAAA,IAAAG,QAAA,GAErDH,MAAM;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

View File

@@ -0,0 +1,54 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useHStack = useHStack;
var _react = require("react");
var _context = require("../context");
var _flex = require("../flex");
var _utils = require("./utils");
var _getValidChildren = require("../utils/get-valid-children");
/**
* External dependencies
*/
/**
* Internal dependencies
*/
function useHStack(props) {
const {
alignment = 'edge',
children,
direction,
spacing = 2,
...otherProps
} = (0, _context.useContextSystem)(props, 'HStack');
const align = (0, _utils.getAlignmentProps)(alignment, direction);
const validChildren = (0, _getValidChildren.getValidChildren)(children);
const clonedChildren = validChildren.map((child, index) => {
const _isSpacer = (0, _context.hasConnectNamespace)(child, ['Spacer']);
if (_isSpacer) {
const childElement = child;
const _key = childElement.key || `hstack-${index}`;
return (0, _react.createElement)(_flex.FlexItem, {
isBlock: true,
key: _key,
...childElement.props
});
}
return child;
});
const propsForFlex = {
children: clonedChildren,
direction,
justify: 'center',
...align,
...otherProps,
gap: spacing
};
const flexProps = (0, _flex.useFlex)(propsForFlex);
return flexProps;
}
//# sourceMappingURL=hook.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_context","require","_flex","_utils","_getValidChildren","useHStack","props","alignment","children","direction","spacing","otherProps","useContextSystem","align","getAlignmentProps","validChildren","getValidChildren","clonedChildren","map","child","index","_isSpacer","hasConnectNamespace","childElement","_key","key","_react","createElement","FlexItem","isBlock","propsForFlex","justify","gap","flexProps","useFlex"],"sources":["@wordpress/components/src/h-stack/hook.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { hasConnectNamespace, useContextSystem } from '../context';\nimport { FlexItem, useFlex } from '../flex';\nimport { getAlignmentProps } from './utils';\nimport { getValidChildren } from '../utils/get-valid-children';\nimport type { Props } from './types';\n\nexport function useHStack( props: WordPressComponentProps< Props, 'div' > ) {\n\tconst {\n\t\talignment = 'edge',\n\t\tchildren,\n\t\tdirection,\n\t\tspacing = 2,\n\t\t...otherProps\n\t} = useContextSystem( props, 'HStack' );\n\n\tconst align = getAlignmentProps( alignment, direction );\n\n\tconst validChildren = getValidChildren( children );\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst _isSpacer = hasConnectNamespace( child, [ 'Spacer' ] );\n\n\t\tif ( _isSpacer ) {\n\t\t\tconst childElement = child as ReactElement;\n\t\t\tconst _key = childElement.key || `hstack-${ index }`;\n\n\t\t\treturn <FlexItem isBlock key={ _key } { ...childElement.props } />;\n\t\t}\n\n\t\treturn child;\n\t} );\n\n\tconst propsForFlex = {\n\t\tchildren: clonedChildren,\n\t\tdirection,\n\t\tjustify: 'center',\n\t\t...align,\n\t\t...otherProps,\n\t\tgap: spacing,\n\t};\n\n\tconst flexProps = useFlex( propsForFlex );\n\n\treturn flexProps;\n}\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAZA;AACA;AACA;;AAGA;AACA;AACA;;AAQO,SAASI,SAASA,CAAEC,KAA8C,EAAG;EAC3E,MAAM;IACLC,SAAS,GAAG,MAAM;IAClBC,QAAQ;IACRC,SAAS;IACTC,OAAO,GAAG,CAAC;IACX,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEN,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMO,KAAK,GAAG,IAAAC,wBAAiB,EAAEP,SAAS,EAAEE,SAAU,CAAC;EAEvD,MAAMM,aAAa,GAAG,IAAAC,kCAAgB,EAAER,QAAS,CAAC;EAClD,MAAMS,cAAc,GAAGF,aAAa,CAACG,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IAC7D,MAAMC,SAAS,GAAG,IAAAC,4BAAmB,EAAEH,KAAK,EAAE,CAAE,QAAQ,CAAG,CAAC;IAE5D,IAAKE,SAAS,EAAG;MAChB,MAAME,YAAY,GAAGJ,KAAqB;MAC1C,MAAMK,IAAI,GAAGD,YAAY,CAACE,GAAG,IAAK,UAAUL,KAAO,EAAC;MAEpD,OAAO,IAAAM,MAAA,CAAAC,aAAA,EAACzB,KAAA,CAAA0B,QAAQ;QAACC,OAAO;QAACJ,GAAG,EAAGD,IAAM;QAAA,GAAMD,YAAY,CAACjB;MAAK,CAAI,CAAC;IACnE;IAEA,OAAOa,KAAK;EACb,CAAE,CAAC;EAEH,MAAMW,YAAY,GAAG;IACpBtB,QAAQ,EAAES,cAAc;IACxBR,SAAS;IACTsB,OAAO,EAAE,QAAQ;IACjB,GAAGlB,KAAK;IACR,GAAGF,UAAU;IACbqB,GAAG,EAAEtB;EACN,CAAC;EAED,MAAMuB,SAAS,GAAG,IAAAC,aAAO,EAAEJ,YAAa,CAAC;EAEzC,OAAOG,SAAS;AACjB"}

View File

@@ -0,0 +1,21 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "HStack", {
enumerable: true,
get: function () {
return _component.default;
}
});
Object.defineProperty(exports, "useHStack", {
enumerable: true,
get: function () {
return _hook.useHStack;
}
});
var _component = _interopRequireDefault(require("./component"));
var _hook = require("./hook");
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_component","_interopRequireDefault","require","_hook"],"sources":["@wordpress/components/src/h-stack/index.ts"],"sourcesContent":["export { default as HStack } from './component';\nexport { useHStack } from './hook';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/h-stack/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { FlexProps } from '../flex/types';\n\nexport type HStackAlignment =\n\t| 'bottom'\n\t| 'bottomLeft'\n\t| 'bottomRight'\n\t| 'center'\n\t| 'edge'\n\t| 'left'\n\t| 'right'\n\t| 'stretch'\n\t| 'top'\n\t| 'topLeft'\n\t| 'topRight';\n\nexport type AlignmentProps = {\n\tjustify?: CSSProperties[ 'justifyContent' ];\n\talign?: CSSProperties[ 'alignItems' ];\n};\n\nexport type Alignments = Record< HStackAlignment, AlignmentProps >;\n\nexport type Props = Omit< FlexProps, 'align' | 'gap' > & {\n\t/**\n\t * Determines how the child elements are aligned.\n\t *\n\t * * `top`: Aligns content to the top.\n\t * * `topLeft`: Aligns content to the top/left.\n\t * * `topRight`: Aligns content to the top/right.\n\t * * `left`: Aligns content to the left.\n\t * * `center`: Aligns content to the center.\n\t * * `right`: Aligns content to the right.\n\t * * `bottom`: Aligns content to the bottom.\n\t * * `bottomLeft`: Aligns content to the bottom/left.\n\t * * `bottomRight`: Aligns content to the bottom/right.\n\t * * `edge`: Justifies content to be evenly spread out up to the main axis edges of the container.\n\t * * `stretch`: Stretches content to the cross axis edges of the container.\n\t *\n\t * @default 'edge'\n\t */\n\talignment?: HStackAlignment | CSSProperties[ 'alignItems' ];\n\t/**\n\t * The amount of space between each child element. Spacing in between each child can be adjusted by using `spacing`.\n\t * The value of `spacing` works as a multiplier to the library's grid system (base of `4px`).\n\t *\n\t * @default 2\n\t */\n\tspacing?: CSSProperties[ 'width' ];\n};\n"],"mappings":""}

View File

@@ -0,0 +1,117 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getAlignmentProps = getAlignmentProps;
var _values = require("../utils/values");
/**
* External dependencies
*/
/**
* Internal dependencies
*/
const H_ALIGNMENTS = {
bottom: {
align: 'flex-end',
justify: 'center'
},
bottomLeft: {
align: 'flex-end',
justify: 'flex-start'
},
bottomRight: {
align: 'flex-end',
justify: 'flex-end'
},
center: {
align: 'center',
justify: 'center'
},
edge: {
align: 'center',
justify: 'space-between'
},
left: {
align: 'center',
justify: 'flex-start'
},
right: {
align: 'center',
justify: 'flex-end'
},
stretch: {
align: 'stretch'
},
top: {
align: 'flex-start',
justify: 'center'
},
topLeft: {
align: 'flex-start',
justify: 'flex-start'
},
topRight: {
align: 'flex-start',
justify: 'flex-end'
}
};
const V_ALIGNMENTS = {
bottom: {
justify: 'flex-end',
align: 'center'
},
bottomLeft: {
justify: 'flex-end',
align: 'flex-start'
},
bottomRight: {
justify: 'flex-end',
align: 'flex-end'
},
center: {
justify: 'center',
align: 'center'
},
edge: {
justify: 'space-between',
align: 'center'
},
left: {
justify: 'center',
align: 'flex-start'
},
right: {
justify: 'center',
align: 'flex-end'
},
stretch: {
align: 'stretch'
},
top: {
justify: 'flex-start',
align: 'center'
},
topLeft: {
justify: 'flex-start',
align: 'flex-start'
},
topRight: {
justify: 'flex-start',
align: 'flex-end'
}
};
function getAlignmentProps(alignment, direction = 'row') {
if (!(0, _values.isValueDefined)(alignment)) {
return {};
}
const isVertical = direction === 'column';
const props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;
const alignmentProps = alignment in props ? props[alignment] : {
align: alignment
};
return alignmentProps;
}
//# sourceMappingURL=utils.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_values","require","H_ALIGNMENTS","bottom","align","justify","bottomLeft","bottomRight","center","edge","left","right","stretch","top","topLeft","topRight","V_ALIGNMENTS","getAlignmentProps","alignment","direction","isValueDefined","isVertical","props","alignmentProps"],"sources":["@wordpress/components/src/h-stack/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n/**\n * Internal dependencies\n */\nimport type { FlexDirection } from '../flex/types';\nimport type { HStackAlignment, AlignmentProps, Alignments } from './types';\nimport { isValueDefined } from '../utils/values';\n\nconst H_ALIGNMENTS: Alignments = {\n\tbottom: { align: 'flex-end', justify: 'center' },\n\tbottomLeft: { align: 'flex-end', justify: 'flex-start' },\n\tbottomRight: { align: 'flex-end', justify: 'flex-end' },\n\tcenter: { align: 'center', justify: 'center' },\n\tedge: { align: 'center', justify: 'space-between' },\n\tleft: { align: 'center', justify: 'flex-start' },\n\tright: { align: 'center', justify: 'flex-end' },\n\tstretch: { align: 'stretch' },\n\ttop: { align: 'flex-start', justify: 'center' },\n\ttopLeft: { align: 'flex-start', justify: 'flex-start' },\n\ttopRight: { align: 'flex-start', justify: 'flex-end' },\n};\n\nconst V_ALIGNMENTS: Alignments = {\n\tbottom: { justify: 'flex-end', align: 'center' },\n\tbottomLeft: { justify: 'flex-end', align: 'flex-start' },\n\tbottomRight: { justify: 'flex-end', align: 'flex-end' },\n\tcenter: { justify: 'center', align: 'center' },\n\tedge: { justify: 'space-between', align: 'center' },\n\tleft: { justify: 'center', align: 'flex-start' },\n\tright: { justify: 'center', align: 'flex-end' },\n\tstretch: { align: 'stretch' },\n\ttop: { justify: 'flex-start', align: 'center' },\n\ttopLeft: { justify: 'flex-start', align: 'flex-start' },\n\ttopRight: { justify: 'flex-start', align: 'flex-end' },\n};\n\nexport function getAlignmentProps(\n\talignment: HStackAlignment | CSSProperties[ 'alignItems' ],\n\tdirection: FlexDirection = 'row'\n): AlignmentProps {\n\tif ( ! isValueDefined( alignment ) ) {\n\t\treturn {};\n\t}\n\tconst isVertical = direction === 'column';\n\tconst props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;\n\n\tconst alignmentProps =\n\t\talignment in props\n\t\t\t? props[ alignment as keyof typeof props ]\n\t\t\t: { align: alignment };\n\n\treturn alignmentProps;\n}\n"],"mappings":";;;;;;AASA,IAAAA,OAAA,GAAAC,OAAA;AATA;AACA;AACA;;AAEA;AACA;AACA;;AAKA,MAAMC,YAAwB,GAAG;EAChCC,MAAM,EAAE;IAAEC,KAAK,EAAE,UAAU;IAAEC,OAAO,EAAE;EAAS,CAAC;EAChDC,UAAU,EAAE;IAAEF,KAAK,EAAE,UAAU;IAAEC,OAAO,EAAE;EAAa,CAAC;EACxDE,WAAW,EAAE;IAAEH,KAAK,EAAE,UAAU;IAAEC,OAAO,EAAE;EAAW,CAAC;EACvDG,MAAM,EAAE;IAAEJ,KAAK,EAAE,QAAQ;IAAEC,OAAO,EAAE;EAAS,CAAC;EAC9CI,IAAI,EAAE;IAAEL,KAAK,EAAE,QAAQ;IAAEC,OAAO,EAAE;EAAgB,CAAC;EACnDK,IAAI,EAAE;IAAEN,KAAK,EAAE,QAAQ;IAAEC,OAAO,EAAE;EAAa,CAAC;EAChDM,KAAK,EAAE;IAAEP,KAAK,EAAE,QAAQ;IAAEC,OAAO,EAAE;EAAW,CAAC;EAC/CO,OAAO,EAAE;IAAER,KAAK,EAAE;EAAU,CAAC;EAC7BS,GAAG,EAAE;IAAET,KAAK,EAAE,YAAY;IAAEC,OAAO,EAAE;EAAS,CAAC;EAC/CS,OAAO,EAAE;IAAEV,KAAK,EAAE,YAAY;IAAEC,OAAO,EAAE;EAAa,CAAC;EACvDU,QAAQ,EAAE;IAAEX,KAAK,EAAE,YAAY;IAAEC,OAAO,EAAE;EAAW;AACtD,CAAC;AAED,MAAMW,YAAwB,GAAG;EAChCb,MAAM,EAAE;IAAEE,OAAO,EAAE,UAAU;IAAED,KAAK,EAAE;EAAS,CAAC;EAChDE,UAAU,EAAE;IAAED,OAAO,EAAE,UAAU;IAAED,KAAK,EAAE;EAAa,CAAC;EACxDG,WAAW,EAAE;IAAEF,OAAO,EAAE,UAAU;IAAED,KAAK,EAAE;EAAW,CAAC;EACvDI,MAAM,EAAE;IAAEH,OAAO,EAAE,QAAQ;IAAED,KAAK,EAAE;EAAS,CAAC;EAC9CK,IAAI,EAAE;IAAEJ,OAAO,EAAE,eAAe;IAAED,KAAK,EAAE;EAAS,CAAC;EACnDM,IAAI,EAAE;IAAEL,OAAO,EAAE,QAAQ;IAAED,KAAK,EAAE;EAAa,CAAC;EAChDO,KAAK,EAAE;IAAEN,OAAO,EAAE,QAAQ;IAAED,KAAK,EAAE;EAAW,CAAC;EAC/CQ,OAAO,EAAE;IAAER,KAAK,EAAE;EAAU,CAAC;EAC7BS,GAAG,EAAE;IAAER,OAAO,EAAE,YAAY;IAAED,KAAK,EAAE;EAAS,CAAC;EAC/CU,OAAO,EAAE;IAAET,OAAO,EAAE,YAAY;IAAED,KAAK,EAAE;EAAa,CAAC;EACvDW,QAAQ,EAAE;IAAEV,OAAO,EAAE,YAAY;IAAED,KAAK,EAAE;EAAW;AACtD,CAAC;AAEM,SAASa,iBAAiBA,CAChCC,SAA0D,EAC1DC,SAAwB,GAAG,KAAK,EACf;EACjB,IAAK,CAAE,IAAAC,sBAAc,EAAEF,SAAU,CAAC,EAAG;IACpC,OAAO,CAAC,CAAC;EACV;EACA,MAAMG,UAAU,GAAGF,SAAS,KAAK,QAAQ;EACzC,MAAMG,KAAK,GAAGD,UAAU,GAAGL,YAAY,GAAGd,YAAY;EAEtD,MAAMqB,cAAc,GACnBL,SAAS,IAAII,KAAK,GACfA,KAAK,CAAEJ,SAAS,CAAwB,GACxC;IAAEd,KAAK,EAAEc;EAAU,CAAC;EAExB,OAAOK,cAAc;AACtB"}