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,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CONNECT_STATIC_NAMESPACE = exports.CONNECTED_NAMESPACE = exports.COMPONENT_NAMESPACE = void 0;
const COMPONENT_NAMESPACE = 'data-wp-component';
exports.COMPONENT_NAMESPACE = COMPONENT_NAMESPACE;
const CONNECTED_NAMESPACE = 'data-wp-c16t';
/**
* Special key where the connected namespaces are stored.
* This is attached to Context connected components as a static property.
*/
exports.CONNECTED_NAMESPACE = CONNECTED_NAMESPACE;
const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__';
exports.CONNECT_STATIC_NAMESPACE = CONNECT_STATIC_NAMESPACE;
//# sourceMappingURL=constants.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["COMPONENT_NAMESPACE","exports","CONNECTED_NAMESPACE","CONNECT_STATIC_NAMESPACE"],"sources":["@wordpress/components/src/context/constants.js"],"sourcesContent":["export const COMPONENT_NAMESPACE = 'data-wp-component';\nexport const CONNECTED_NAMESPACE = 'data-wp-c16t';\n\n/**\n * Special key where the connected namespaces are stored.\n * This is attached to Context connected components as a static property.\n */\nexport const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__';\n"],"mappings":";;;;;;AAAO,MAAMA,mBAAmB,GAAG,mBAAmB;AAACC,OAAA,CAAAD,mBAAA,GAAAA,mBAAA;AAChD,MAAME,mBAAmB,GAAG,cAAc;;AAEjD;AACA;AACA;AACA;AAHAD,OAAA,CAAAC,mBAAA,GAAAA,mBAAA;AAIO,MAAMC,wBAAwB,GAAG,sBAAsB;AAACF,OAAA,CAAAE,wBAAA,GAAAA,wBAAA"}

View File

@@ -0,0 +1,124 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.contextConnect = contextConnect;
exports.contextConnectWithoutRef = contextConnectWithoutRef;
exports.getConnectNamespace = getConnectNamespace;
exports.hasConnectNamespace = hasConnectNamespace;
var _element = require("@wordpress/element");
var _warning = _interopRequireDefault(require("@wordpress/warning"));
var _constants = require("./constants");
var _getStyledClassNameFromKey = require("./get-styled-class-name-from-key");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Forwards ref (React.ForwardRef) and "Connects" (or registers) a component
* within the Context system under a specified namespace.
*
* @param Component The component to register into the Context system.
* @param namespace The namespace to register the component under.
* @return The connected WordPressComponent
*/
function contextConnect(Component, namespace) {
return _contextConnect(Component, namespace, {
forwardsRef: true
});
}
/**
* "Connects" (or registers) a component within the Context system under a specified namespace.
* Does not forward a ref.
*
* @param Component The component to register into the Context system.
* @param namespace The namespace to register the component under.
* @return The connected WordPressComponent
*/
function contextConnectWithoutRef(Component, namespace) {
return _contextConnect(Component, namespace);
}
// This is an (experimental) evolution of the initial connect() HOC.
// The hope is that we can improve render performance by removing functional
// component wrappers.
function _contextConnect(Component, namespace, options) {
const WrappedComponent = options?.forwardsRef ? (0, _element.forwardRef)(Component) : Component;
if (typeof namespace === 'undefined') {
typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? (0, _warning.default)('contextConnect: Please provide a namespace') : void 0;
}
// @ts-expect-error internal property
let mergedNamespace = WrappedComponent[_constants.CONNECT_STATIC_NAMESPACE] || [namespace];
/**
* Consolidate (merge) namespaces before attaching it to the WrappedComponent.
*/
if (Array.isArray(namespace)) {
mergedNamespace = [...mergedNamespace, ...namespace];
}
if (typeof namespace === 'string') {
mergedNamespace = [...mergedNamespace, namespace];
}
// @ts-expect-error We can't rely on inferred types here because of the
// `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33
return Object.assign(WrappedComponent, {
[_constants.CONNECT_STATIC_NAMESPACE]: [...new Set(mergedNamespace)],
displayName: namespace,
selector: `.${(0, _getStyledClassNameFromKey.getStyledClassNameFromKey)(namespace)}`
});
}
/**
* Attempts to retrieve the connected namespace from a component.
*
* @param Component The component to retrieve a namespace from.
* @return The connected namespaces.
*/
function getConnectNamespace(Component) {
if (!Component) return [];
let namespaces = [];
// @ts-ignore internal property
if (Component[_constants.CONNECT_STATIC_NAMESPACE]) {
// @ts-ignore internal property
namespaces = Component[_constants.CONNECT_STATIC_NAMESPACE];
}
// @ts-ignore
if (Component.type && Component.type[_constants.CONNECT_STATIC_NAMESPACE]) {
// @ts-ignore
namespaces = Component.type[_constants.CONNECT_STATIC_NAMESPACE];
}
return namespaces;
}
/**
* Checks to see if a component is connected within the Context system.
*
* @param Component The component to retrieve a namespace from.
* @param match The namespace to check.
*/
function hasConnectNamespace(Component, match) {
if (!Component) return false;
if (typeof match === 'string') {
return getConnectNamespace(Component).includes(match);
}
if (Array.isArray(match)) {
return match.some(result => getConnectNamespace(Component).includes(result));
}
return false;
}
//# sourceMappingURL=context-connect.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,107 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useComponentsContext = exports.ContextSystemProvider = exports.ComponentsContext = void 0;
var _react = require("react");
var _deepmerge = _interopRequireDefault(require("deepmerge"));
var _es = _interopRequireDefault(require("fast-deep-equal/es6"));
var _isPlainObject = require("is-plain-object");
var _element = require("@wordpress/element");
var _warning = _interopRequireDefault(require("@wordpress/warning"));
var _utils = require("../utils");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const ComponentsContext = (0, _element.createContext)( /** @type {Record<string, any>} */{});
exports.ComponentsContext = ComponentsContext;
const useComponentsContext = () => (0, _element.useContext)(ComponentsContext);
/**
* Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.
*
* Note: This function will warn if it detects an un-memoized `value`
*
* @param {Object} props
* @param {Record<string, any>} props.value
* @return {Record<string, any>} The consolidated value.
*/
exports.useComponentsContext = useComponentsContext;
function useContextSystemBridge({
value
}) {
const parentContext = useComponentsContext();
const valueRef = (0, _element.useRef)(value);
(0, _utils.useUpdateEffect)(() => {
if (
// Objects are equivalent.
(0, _es.default)(valueRef.current, value) &&
// But not the same reference.
valueRef.current !== value) {
typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? (0, _warning.default)(`Please memoize your context: ${JSON.stringify(value)}`) : void 0;
}
}, [value]);
// `parentContext` will always be memoized (i.e., the result of this hook itself)
// or the default value from when the `ComponentsContext` was originally
// initialized (which will never change, it's a static variable)
// so this memoization will prevent `deepmerge()` from rerunning unless
// the references to `value` change OR the `parentContext` has an actual material change
// (because again, it's guaranteed to be memoized or a static reference to the empty object
// so we know that the only changes for `parentContext` are material ones... i.e., why we
// don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only
// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are
// correctly warning when the `value` isn't being properly memoized. All of that to say
// that this should be super safe to assume that `useMemo` will only run on actual
// changes to the two dependencies, therefore saving us calls to `deepmerge()`!
const config = (0, _element.useMemo)(() => {
// Deep clone `parentContext` to avoid mutating it later.
return (0, _deepmerge.default)(parentContext !== null && parentContext !== void 0 ? parentContext : {}, value !== null && value !== void 0 ? value : {}, {
isMergeableObject: _isPlainObject.isPlainObject
});
}, [parentContext, value]);
return config;
}
/**
* A Provider component that can modify props for connected components within
* the Context system.
*
* @example
* ```jsx
* <ContextSystemProvider value={{ Button: { size: 'small' }}}>
* <Button>...</Button>
* </ContextSystemProvider>
* ```
*
* @template {Record<string, any>} T
* @param {Object} options
* @param {import('react').ReactNode} options.children Children to render.
* @param {T} options.value Props to render into connected components.
* @return {JSX.Element} A Provider wrapped component.
*/
const BaseContextSystemProvider = ({
children,
value
}) => {
const contextValue = useContextSystemBridge({
value
});
return (0, _react.createElement)(ComponentsContext.Provider, {
value: contextValue
}, children);
};
const ContextSystemProvider = (0, _element.memo)(BaseContextSystemProvider);
exports.ContextSystemProvider = ContextSystemProvider;
//# sourceMappingURL=context-system-provider.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,26 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getStyledClassNameFromKey = void 0;
var _changeCase = require("change-case");
var _memize = _interopRequireDefault(require("memize"));
/**
* External dependencies
*/
/**
* Generates the connected component CSS className based on the namespace.
*
* @param namespace The name of the connected component.
* @return The generated CSS className.
*/
function getStyledClassName(namespace) {
const kebab = (0, _changeCase.paramCase)(namespace);
return `components-${kebab}`;
}
const getStyledClassNameFromKey = (0, _memize.default)(getStyledClassName);
exports.getStyledClassNameFromKey = getStyledClassNameFromKey;
//# sourceMappingURL=get-styled-class-name-from-key.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_changeCase","require","_memize","_interopRequireDefault","getStyledClassName","namespace","kebab","kebabCase","getStyledClassNameFromKey","memoize","exports"],"sources":["@wordpress/components/src/context/get-styled-class-name-from-key.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\nimport memoize from 'memize';\n\n/**\n * Generates the connected component CSS className based on the namespace.\n *\n * @param namespace The name of the connected component.\n * @return The generated CSS className.\n */\nfunction getStyledClassName( namespace: string ): string {\n\tconst kebab = kebabCase( namespace );\n\treturn `components-${ kebab }`;\n}\n\nexport const getStyledClassNameFromKey = memoize( getStyledClassName );\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AAJA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,kBAAkBA,CAAEC,SAAiB,EAAW;EACxD,MAAMC,KAAK,GAAG,IAAAC,qBAAS,EAAEF,SAAU,CAAC;EACpC,OAAQ,cAAcC,KAAO,EAAC;AAC/B;AAEO,MAAME,yBAAyB,GAAG,IAAAC,eAAO,EAAEL,kBAAmB,CAAC;AAACM,OAAA,CAAAF,yBAAA,GAAAA,yBAAA"}

View File

@@ -0,0 +1,72 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
ContextSystemProvider: true,
useComponentsContext: true,
contextConnect: true,
contextConnectWithoutRef: true,
hasConnectNamespace: true,
getConnectNamespace: true,
useContextSystem: true
};
Object.defineProperty(exports, "ContextSystemProvider", {
enumerable: true,
get: function () {
return _contextSystemProvider.ContextSystemProvider;
}
});
Object.defineProperty(exports, "contextConnect", {
enumerable: true,
get: function () {
return _contextConnect.contextConnect;
}
});
Object.defineProperty(exports, "contextConnectWithoutRef", {
enumerable: true,
get: function () {
return _contextConnect.contextConnectWithoutRef;
}
});
Object.defineProperty(exports, "getConnectNamespace", {
enumerable: true,
get: function () {
return _contextConnect.getConnectNamespace;
}
});
Object.defineProperty(exports, "hasConnectNamespace", {
enumerable: true,
get: function () {
return _contextConnect.hasConnectNamespace;
}
});
Object.defineProperty(exports, "useComponentsContext", {
enumerable: true,
get: function () {
return _contextSystemProvider.useComponentsContext;
}
});
Object.defineProperty(exports, "useContextSystem", {
enumerable: true,
get: function () {
return _useContextSystem.useContextSystem;
}
});
var _contextSystemProvider = require("./context-system-provider");
var _contextConnect = require("./context-connect");
var _useContextSystem = require("./use-context-system");
var _wordpressComponent = require("./wordpress-component");
Object.keys(_wordpressComponent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _wordpressComponent[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _wordpressComponent[key];
}
});
});
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_contextSystemProvider","require","_contextConnect","_useContextSystem","_wordpressComponent","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["@wordpress/components/src/context/index.ts"],"sourcesContent":["export {\n\tContextSystemProvider,\n\tuseComponentsContext,\n} from './context-system-provider';\nexport {\n\tcontextConnect,\n\tcontextConnectWithoutRef,\n\thasConnectNamespace,\n\tgetConnectNamespace,\n} from './context-connect';\nexport { useContextSystem } from './use-context-system';\nexport * from './wordpress-component';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAIA,IAAAC,eAAA,GAAAD,OAAA;AAMA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAAAI,MAAA,CAAAC,IAAA,CAAAF,mBAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,mBAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,mBAAA,CAAAI,GAAA;IAAA;EAAA;AAAA"}

View File

@@ -0,0 +1,79 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useContextSystem = useContextSystem;
var _warning = _interopRequireDefault(require("@wordpress/warning"));
var _contextSystemProvider = require("./context-system-provider");
var _utils = require("./utils");
var _getStyledClassNameFromKey = require("./get-styled-class-name-from-key");
var _useCx = require("../utils/hooks/use-cx");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* @template TProps
* @typedef {TProps & { className: string }} ConnectedProps
*/
/**
* Custom hook that derives registered props from the Context system.
* These derived props are then consolidated with incoming component props.
*
* @template {{ className?: string }} P
* @param {P} props Incoming props from the component.
* @param {string} namespace The namespace to register and to derive context props from.
* @return {ConnectedProps<P>} The connected props.
*/
function useContextSystem(props, namespace) {
const contextSystemProps = (0, _contextSystemProvider.useComponentsContext)();
if (typeof namespace === 'undefined') {
typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? (0, _warning.default)('useContextSystem: Please provide a namespace') : void 0;
}
const contextProps = contextSystemProps?.[namespace] || {};
/* eslint-disable jsdoc/no-undefined-types */
/** @type {ConnectedProps<P>} */
// @ts-ignore We fill in the missing properties below
const finalComponentProps = {
...(0, _utils.getConnectedNamespace)(),
...(0, _utils.getNamespace)(namespace)
};
/* eslint-enable jsdoc/no-undefined-types */
const {
_overrides: overrideProps,
...otherContextProps
} = contextProps;
const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props;
const cx = (0, _useCx.useCx)();
const classes = cx((0, _getStyledClassNameFromKey.getStyledClassNameFromKey)(namespace), props.className);
// Provides the ability to customize the render of the component.
const rendered = typeof initialMergedProps.renderChildren === 'function' ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children;
for (const key in initialMergedProps) {
// @ts-ignore filling in missing props
finalComponentProps[key] = initialMergedProps[key];
}
for (const key in overrideProps) {
// @ts-ignore filling in missing props
finalComponentProps[key] = overrideProps[key];
}
// Setting an `undefined` explicitly can cause unintended overwrites
// when a `cloneElement()` is involved.
if (rendered !== undefined) {
// @ts-ignore
finalComponentProps.children = rendered;
}
finalComponentProps.className = classes;
return finalComponentProps;
}
//# sourceMappingURL=use-context-system.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_warning","_interopRequireDefault","require","_contextSystemProvider","_utils","_getStyledClassNameFromKey","_useCx","useContextSystem","props","namespace","contextSystemProps","useComponentsContext","SCRIPT_DEBUG","warn","contextProps","finalComponentProps","getConnectedNamespace","getNamespace","_overrides","overrideProps","otherContextProps","initialMergedProps","Object","entries","length","assign","cx","useCx","classes","getStyledClassNameFromKey","className","rendered","renderChildren","children","key","undefined"],"sources":["@wordpress/components/src/context/use-context-system.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useComponentsContext } from './context-system-provider';\nimport { getNamespace, getConnectedNamespace } from './utils';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/**\n * @template TProps\n * @typedef {TProps & { className: string }} ConnectedProps\n */\n\n/**\n * Custom hook that derives registered props from the Context system.\n * These derived props are then consolidated with incoming component props.\n *\n * @template {{ className?: string }} P\n * @param {P} props Incoming props from the component.\n * @param {string} namespace The namespace to register and to derive context props from.\n * @return {ConnectedProps<P>} The connected props.\n */\nexport function useContextSystem( props, namespace ) {\n\tconst contextSystemProps = useComponentsContext();\n\tif ( typeof namespace === 'undefined' ) {\n\t\twarn( 'useContextSystem: Please provide a namespace' );\n\t}\n\n\tconst contextProps = contextSystemProps?.[ namespace ] || {};\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {ConnectedProps<P>} */\n\t// @ts-ignore We fill in the missing properties below\n\tconst finalComponentProps = {\n\t\t...getConnectedNamespace(),\n\t\t...getNamespace( namespace ),\n\t};\n\t/* eslint-enable jsdoc/no-undefined-types */\n\n\tconst { _overrides: overrideProps, ...otherContextProps } = contextProps;\n\n\tconst initialMergedProps = Object.entries( otherContextProps ).length\n\t\t? Object.assign( {}, otherContextProps, props )\n\t\t: props;\n\n\tconst cx = useCx();\n\n\tconst classes = cx(\n\t\tgetStyledClassNameFromKey( namespace ),\n\t\tprops.className\n\t);\n\n\t// Provides the ability to customize the render of the component.\n\tconst rendered =\n\t\ttypeof initialMergedProps.renderChildren === 'function'\n\t\t\t? initialMergedProps.renderChildren( initialMergedProps )\n\t\t\t: initialMergedProps.children;\n\n\tfor ( const key in initialMergedProps ) {\n\t\t// @ts-ignore filling in missing props\n\t\tfinalComponentProps[ key ] = initialMergedProps[ key ];\n\t}\n\n\tfor ( const key in overrideProps ) {\n\t\t// @ts-ignore filling in missing props\n\t\tfinalComponentProps[ key ] = overrideProps[ key ];\n\t}\n\n\t// Setting an `undefined` explicitly can cause unintended overwrites\n\t// when a `cloneElement()` is involved.\n\tif ( rendered !== undefined ) {\n\t\t// @ts-ignore\n\t\tfinalComponentProps.children = rendered;\n\t}\n\n\tfinalComponentProps.className = classes;\n\n\treturn finalComponentProps;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,0BAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASK,gBAAgBA,CAAEC,KAAK,EAAEC,SAAS,EAAG;EACpD,MAAMC,kBAAkB,GAAG,IAAAC,2CAAoB,EAAC,CAAC;EACjD,IAAK,OAAOF,SAAS,KAAK,WAAW,EAAG;IACvC,OAAAG,YAAA,oBAAAA,YAAA,gBAAAC,gBAAI,EAAE,8CAA+C,CAAC;EACvD;EAEA,MAAMC,YAAY,GAAGJ,kBAAkB,GAAID,SAAS,CAAE,IAAI,CAAC,CAAC;;EAE5D;EACA;EACA;EACA,MAAMM,mBAAmB,GAAG;IAC3B,GAAG,IAAAC,4BAAqB,EAAC,CAAC;IAC1B,GAAG,IAAAC,mBAAY,EAAER,SAAU;EAC5B,CAAC;EACD;;EAEA,MAAM;IAAES,UAAU,EAAEC,aAAa;IAAE,GAAGC;EAAkB,CAAC,GAAGN,YAAY;EAExE,MAAMO,kBAAkB,GAAGC,MAAM,CAACC,OAAO,CAAEH,iBAAkB,CAAC,CAACI,MAAM,GAClEF,MAAM,CAACG,MAAM,CAAE,CAAC,CAAC,EAAEL,iBAAiB,EAAEZ,KAAM,CAAC,GAC7CA,KAAK;EAER,MAAMkB,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAElB,MAAMC,OAAO,GAAGF,EAAE,CACjB,IAAAG,oDAAyB,EAAEpB,SAAU,CAAC,EACtCD,KAAK,CAACsB,SACP,CAAC;;EAED;EACA,MAAMC,QAAQ,GACb,OAAOV,kBAAkB,CAACW,cAAc,KAAK,UAAU,GACpDX,kBAAkB,CAACW,cAAc,CAAEX,kBAAmB,CAAC,GACvDA,kBAAkB,CAACY,QAAQ;EAE/B,KAAM,MAAMC,GAAG,IAAIb,kBAAkB,EAAG;IACvC;IACAN,mBAAmB,CAAEmB,GAAG,CAAE,GAAGb,kBAAkB,CAAEa,GAAG,CAAE;EACvD;EAEA,KAAM,MAAMA,GAAG,IAAIf,aAAa,EAAG;IAClC;IACAJ,mBAAmB,CAAEmB,GAAG,CAAE,GAAGf,aAAa,CAAEe,GAAG,CAAE;EAClD;;EAEA;EACA;EACA,IAAKH,QAAQ,KAAKI,SAAS,EAAG;IAC7B;IACApB,mBAAmB,CAACkB,QAAQ,GAAGF,QAAQ;EACxC;EAEAhB,mBAAmB,CAACe,SAAS,GAAGF,OAAO;EAEvC,OAAOb,mBAAmB;AAC3B"}

View File

@@ -0,0 +1,47 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getConnectedNamespace = getConnectedNamespace;
exports.getNamespace = getNamespace;
var _constants = require("./constants");
/**
* Internal dependencies
*/
/**
* Creates a dedicated context namespace HTML attribute for components.
* ns is short for "namespace"
*
* @example
* ```jsx
* <div {...ns('Container')} />
* ```
*
* @param {string} componentName The name for the component.
* @return {Record<string, any>} A props object with the namespaced HTML attribute.
*/
function getNamespace(componentName) {
return {
[_constants.COMPONENT_NAMESPACE]: componentName
};
}
/**
* Creates a dedicated connected context namespace HTML attribute for components.
* ns is short for "namespace"
*
* @example
* ```jsx
* <div {...cns()} />
* ```
*
* @return {Record<string, any>} A props object with the namespaced HTML attribute.
*/
function getConnectedNamespace() {
return {
[_constants.CONNECTED_NAMESPACE]: true
};
}
//# sourceMappingURL=utils.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_constants","require","getNamespace","componentName","COMPONENT_NAMESPACE","getConnectedNamespace","CONNECTED_NAMESPACE"],"sources":["@wordpress/components/src/context/utils.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { CONNECTED_NAMESPACE, COMPONENT_NAMESPACE } from './constants';\n\n/**\n * Creates a dedicated context namespace HTML attribute for components.\n * ns is short for \"namespace\"\n *\n * @example\n * ```jsx\n * <div {...ns('Container')} />\n * ```\n *\n * @param {string} componentName The name for the component.\n * @return {Record<string, any>} A props object with the namespaced HTML attribute.\n */\nexport function getNamespace( componentName ) {\n\treturn { [ COMPONENT_NAMESPACE ]: componentName };\n}\n\n/**\n * Creates a dedicated connected context namespace HTML attribute for components.\n * ns is short for \"namespace\"\n *\n * @example\n * ```jsx\n * <div {...cns()} />\n * ```\n *\n * @return {Record<string, any>} A props object with the namespaced HTML attribute.\n */\nexport function getConnectedNamespace() {\n\treturn { [ CONNECTED_NAMESPACE ]: true };\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,UAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,YAAYA,CAAEC,aAAa,EAAG;EAC7C,OAAO;IAAE,CAAEC,8BAAmB,GAAID;EAAc,CAAC;AAClD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,qBAAqBA,CAAA,EAAG;EACvC,OAAO;IAAE,CAAEC,8BAAmB,GAAI;EAAK,CAAC;AACzC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/context/wordpress-component.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type * as React from 'react';\n\n// Based on https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/types.ts\nexport type WordPressComponentProps<\n\t/** Prop types. */\n\tP,\n\t/** The HTML element to inherit props from. */\n\tT extends React.ElementType | null,\n\t/** Supports polymorphism through the `as` prop. */\n\tIsPolymorphic extends boolean = true,\n> = P &\n\t( T extends React.ElementType\n\t\t? // The `children` prop is being explicitly omitted since it is otherwise implicitly added\n\t\t // by `ComponentPropsWithRef`. The context is that components should require the `children`\n\t\t // prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).\n\t\t Omit<\n\t\t\t\tReact.ComponentPropsWithoutRef< T >,\n\t\t\t\t'as' | keyof P | 'children'\n\t\t >\n\t\t: {} ) &\n\t( IsPolymorphic extends true\n\t\t? {\n\t\t\t\t/** The HTML element or React component to render the component as. */\n\t\t\t\tas?: T | keyof JSX.IntrinsicElements;\n\t\t }\n\t\t: {} );\n\nexport type WordPressComponent<\n\tT extends React.ElementType | null,\n\tO,\n\tIsPolymorphic extends boolean,\n> = {\n\t< TT extends React.ElementType >(\n\t\tprops: WordPressComponentProps< O, TT, IsPolymorphic > &\n\t\t\t( IsPolymorphic extends true ? { as: TT } : {} )\n\t): JSX.Element | null;\n\t(\n\t\tprops: WordPressComponentProps< O, T, IsPolymorphic >\n\t): JSX.Element | null;\n\tdisplayName?: string;\n\t/**\n\t * A CSS selector used to fake component interpolation in styled components\n\t * for components not generated by `styled`. Anything passed to `contextConnect`\n\t * will get this property.\n\t *\n\t * We restrict it to a class to align with the already existing class names that\n\t * are generated by the context system.\n\t */\n\tselector?: `.${ string }`;\n};\n\nexport type WordPressComponentFromProps<\n\tProps,\n\tForwardsRef extends boolean = true,\n> = Props extends WordPressComponentProps< infer P, infer T, infer I >\n\t? WordPressComponent<\n\t\t\tT,\n\t\t\tP & ( ForwardsRef extends true ? React.RefAttributes< any > : {} ),\n\t\t\tI\n\t >\n\t: never;\n"],"mappings":""}