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,72 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Fill;
var _react = require("react");
var _element = require("@wordpress/element");
var _useSlot = _interopRequireDefault(require("./use-slot"));
var _styleProvider = _interopRequireDefault(require("../../style-provider"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useForceUpdate() {
const [, setState] = (0, _element.useState)({});
const mounted = (0, _element.useRef)(true);
(0, _element.useEffect)(() => {
mounted.current = true;
return () => {
mounted.current = false;
};
}, []);
return () => {
if (mounted.current) {
setState({});
}
};
}
function Fill(props) {
var _slot$fillProps;
const {
name,
children
} = props;
const {
registerFill,
unregisterFill,
...slot
} = (0, _useSlot.default)(name);
const rerender = useForceUpdate();
const ref = (0, _element.useRef)({
rerender
});
(0, _element.useEffect)(() => {
// We register fills so we can keep track of their existence.
// Some Slot implementations need to know if there're already fills
// registered so they can choose to render themselves or not.
registerFill(ref);
return () => {
unregisterFill(ref);
};
}, [registerFill, unregisterFill]);
if (!slot.ref || !slot.ref.current) {
return null;
}
// When using a `Fill`, the `children` will be rendered in the document of the
// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`
// to make sure we're referencing the right document/iframe (instead of the
// context of the `Fill`'s parent).
const wrappedChildren = (0, _react.createElement)(_styleProvider.default, {
document: slot.ref.current.ownerDocument
}, typeof children === 'function' ? children((_slot$fillProps = slot.fillProps) !== null && _slot$fillProps !== void 0 ? _slot$fillProps : {}) : children);
return (0, _element.createPortal)(wrappedChildren, slot.ref.current);
}
//# sourceMappingURL=fill.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_useSlot","_interopRequireDefault","_styleProvider","useForceUpdate","setState","useState","mounted","useRef","useEffect","current","Fill","props","_slot$fillProps","name","children","registerFill","unregisterFill","slot","useSlot","rerender","ref","wrappedChildren","_react","createElement","default","document","ownerDocument","fillProps","createPortal"],"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/fill.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useState, useEffect, createPortal } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useSlot from './use-slot';\nimport StyleProvider from '../../style-provider';\nimport type { FillComponentProps } from '../types';\n\nfunction useForceUpdate() {\n\tconst [ , setState ] = useState( {} );\n\tconst mounted = useRef( true );\n\n\tuseEffect( () => {\n\t\tmounted.current = true;\n\t\treturn () => {\n\t\t\tmounted.current = false;\n\t\t};\n\t}, [] );\n\n\treturn () => {\n\t\tif ( mounted.current ) {\n\t\t\tsetState( {} );\n\t\t}\n\t};\n}\n\nexport default function Fill( props: FillComponentProps ) {\n\tconst { name, children } = props;\n\tconst { registerFill, unregisterFill, ...slot } = useSlot( name );\n\tconst rerender = useForceUpdate();\n\tconst ref = useRef( { rerender } );\n\n\tuseEffect( () => {\n\t\t// We register fills so we can keep track of their existence.\n\t\t// Some Slot implementations need to know if there're already fills\n\t\t// registered so they can choose to render themselves or not.\n\t\tregisterFill( ref );\n\t\treturn () => {\n\t\t\tunregisterFill( ref );\n\t\t};\n\t}, [ registerFill, unregisterFill ] );\n\n\tif ( ! slot.ref || ! slot.ref.current ) {\n\t\treturn null;\n\t}\n\n\t// When using a `Fill`, the `children` will be rendered in the document of the\n\t// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`\n\t// to make sure we're referencing the right document/iframe (instead of the\n\t// context of the `Fill`'s parent).\n\tconst wrappedChildren = (\n\t\t<StyleProvider document={ slot.ref.current.ownerDocument }>\n\t\t\t{ typeof children === 'function'\n\t\t\t\t? children( slot.fillProps ?? {} )\n\t\t\t\t: children }\n\t\t</StyleProvider>\n\t);\n\n\treturn createPortal( wrappedChildren, slot.ref.current );\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAD,sBAAA,CAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,SAASI,cAAcA,CAAA,EAAG;EACzB,MAAM,GAAIC,QAAQ,CAAE,GAAG,IAAAC,iBAAQ,EAAE,CAAC,CAAE,CAAC;EACrC,MAAMC,OAAO,GAAG,IAAAC,eAAM,EAAE,IAAK,CAAC;EAE9B,IAAAC,kBAAS,EAAE,MAAM;IAChBF,OAAO,CAACG,OAAO,GAAG,IAAI;IACtB,OAAO,MAAM;MACZH,OAAO,CAACG,OAAO,GAAG,KAAK;IACxB,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,OAAO,MAAM;IACZ,IAAKH,OAAO,CAACG,OAAO,EAAG;MACtBL,QAAQ,CAAE,CAAC,CAAE,CAAC;IACf;EACD,CAAC;AACF;AAEe,SAASM,IAAIA,CAAEC,KAAyB,EAAG;EAAA,IAAAC,eAAA;EACzD,MAAM;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAChC,MAAM;IAAEI,YAAY;IAAEC,cAAc;IAAE,GAAGC;EAAK,CAAC,GAAG,IAAAC,gBAAO,EAAEL,IAAK,CAAC;EACjE,MAAMM,QAAQ,GAAGhB,cAAc,CAAC,CAAC;EACjC,MAAMiB,GAAG,GAAG,IAAAb,eAAM,EAAE;IAAEY;EAAS,CAAE,CAAC;EAElC,IAAAX,kBAAS,EAAE,MAAM;IAChB;IACA;IACA;IACAO,YAAY,CAAEK,GAAI,CAAC;IACnB,OAAO,MAAM;MACZJ,cAAc,CAAEI,GAAI,CAAC;IACtB,CAAC;EACF,CAAC,EAAE,CAAEL,YAAY,EAAEC,cAAc,CAAG,CAAC;EAErC,IAAK,CAAEC,IAAI,CAACG,GAAG,IAAI,CAAEH,IAAI,CAACG,GAAG,CAACX,OAAO,EAAG;IACvC,OAAO,IAAI;EACZ;;EAEA;EACA;EACA;EACA;EACA,MAAMY,eAAe,GACpB,IAAAC,MAAA,CAAAC,aAAA,EAACrB,cAAA,CAAAsB,OAAa;IAACC,QAAQ,EAAGR,IAAI,CAACG,GAAG,CAACX,OAAO,CAACiB;EAAe,GACvD,OAAOZ,QAAQ,KAAK,UAAU,GAC7BA,QAAQ,EAAAF,eAAA,GAAEK,IAAI,CAACU,SAAS,cAAAf,eAAA,cAAAA,eAAA,GAAI,CAAC,CAAE,CAAC,GAChCE,QACW,CACf;EAED,OAAO,IAAAc,qBAAY,EAAEP,eAAe,EAAEJ,IAAI,CAACG,GAAG,CAACX,OAAQ,CAAC;AACzD"}

View File

@@ -0,0 +1,35 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _utils = require("valtio/utils");
var _element = require("@wordpress/element");
var _warning = _interopRequireDefault(require("@wordpress/warning"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
const initialContextValue = {
slots: (0, _utils.proxyMap)(),
fills: (0, _utils.proxyMap)(),
registerSlot: () => {
typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? (0, _warning.default)('Components must be wrapped within `SlotFillProvider`. ' + 'See https://developer.wordpress.org/block-editor/components/slot-fill/') : void 0;
},
updateSlot: () => {},
unregisterSlot: () => {},
registerFill: () => {},
unregisterFill: () => {},
// This helps the provider know if it's using the default context value or not.
isDefault: true
};
const SlotFillContext = (0, _element.createContext)(initialContextValue);
var _default = SlotFillContext;
exports.default = _default;
//# sourceMappingURL=slot-fill-context.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_utils","require","_element","_warning","_interopRequireDefault","initialContextValue","slots","proxyMap","fills","registerSlot","SCRIPT_DEBUG","warning","updateSlot","unregisterSlot","registerFill","unregisterFill","isDefault","SlotFillContext","createContext","_default","exports","default"],"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/slot-fill-context.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { proxyMap } from 'valtio/utils';\n/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\nimport warning from '@wordpress/warning';\n/**\n * Internal dependencies\n */\nimport type { SlotFillBubblesVirtuallyContext } from '../types';\n\nconst initialContextValue: SlotFillBubblesVirtuallyContext = {\n\tslots: proxyMap(),\n\tfills: proxyMap(),\n\tregisterSlot: () => {\n\t\twarning(\n\t\t\t'Components must be wrapped within `SlotFillProvider`. ' +\n\t\t\t\t'See https://developer.wordpress.org/block-editor/components/slot-fill/'\n\t\t);\n\t},\n\tupdateSlot: () => {},\n\tunregisterSlot: () => {},\n\tregisterFill: () => {},\n\tunregisterFill: () => {},\n\n\t// This helps the provider know if it's using the default context value or not.\n\tisDefault: true,\n};\n\nconst SlotFillContext = createContext( initialContextValue );\n\nexport default SlotFillContext;\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAIA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAC,sBAAA,CAAAH,OAAA;AARA;AACA;AACA;;AAEA;AACA;AACA;;AAQA,MAAMI,mBAAoD,GAAG;EAC5DC,KAAK,EAAE,IAAAC,eAAQ,EAAC,CAAC;EACjBC,KAAK,EAAE,IAAAD,eAAQ,EAAC,CAAC;EACjBE,YAAY,EAAEA,CAAA,KAAM;IACnB,OAAAC,YAAA,oBAAAA,YAAA,gBAAAC,gBAAO,EACN,wDAAwD,GACvD,wEACF,CAAC;EACF,CAAC;EACDC,UAAU,EAAEA,CAAA,KAAM,CAAC,CAAC;EACpBC,cAAc,EAAEA,CAAA,KAAM,CAAC,CAAC;EACxBC,YAAY,EAAEA,CAAA,KAAM,CAAC,CAAC;EACtBC,cAAc,EAAEA,CAAA,KAAM,CAAC,CAAC;EAExB;EACAC,SAAS,EAAE;AACZ,CAAC;AAED,MAAMC,eAAe,GAAG,IAAAC,sBAAa,EAAEb,mBAAoB,CAAC;AAAC,IAAAc,QAAA,GAE9CF,eAAe;AAAAG,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

View File

@@ -0,0 +1,87 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = SlotFillProvider;
var _react = require("react");
var _valtio = require("valtio");
var _utils = require("valtio/utils");
var _element = require("@wordpress/element");
var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
var _slotFillContext = _interopRequireDefault(require("./slot-fill-context"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function createSlotRegistry() {
const slots = (0, _utils.proxyMap)();
const fills = (0, _utils.proxyMap)();
const registerSlot = (name, ref, fillProps) => {
const slot = slots.get(name);
slots.set(name, (0, _valtio.ref)({
...slot,
ref: ref || slot?.ref,
fillProps: fillProps || slot?.fillProps || {}
}));
};
const unregisterSlot = (name, ref) => {
// Make sure we're not unregistering a slot registered by another element
// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
if (slots.get(name)?.ref === ref) {
slots.delete(name);
}
};
const updateSlot = (name, fillProps) => {
const slot = slots.get(name);
if (!slot) {
return;
}
if ((0, _isShallowEqual.default)(slot.fillProps, fillProps)) {
return;
}
slot.fillProps = fillProps;
const slotFills = fills.get(name);
if (slotFills) {
// Force update fills.
slotFills.forEach(fill => fill.current.rerender());
}
};
const registerFill = (name, ref) => {
fills.set(name, (0, _valtio.ref)([...(fills.get(name) || []), ref]));
};
const unregisterFill = (name, ref) => {
const fillsForName = fills.get(name);
if (!fillsForName) {
return;
}
fills.set(name, (0, _valtio.ref)(fillsForName.filter(fillRef => fillRef !== ref)));
};
return {
slots,
fills,
registerSlot,
updateSlot,
unregisterSlot,
registerFill,
unregisterFill
};
}
function SlotFillProvider({
children
}) {
const registry = (0, _element.useMemo)(createSlotRegistry, []);
return (0, _react.createElement)(_slotFillContext.default.Provider, {
value: registry
}, children);
}
//# sourceMappingURL=slot-fill-provider.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,66 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _view = require("../../view");
var _slotFillContext = _interopRequireDefault(require("./slot-fill-context"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function Slot(props, forwardedRef) {
const {
name,
fillProps = {},
as,
// `children` is not allowed. However, if it is passed,
// it will be displayed as is, so remove `children`.
// @ts-ignore
children,
...restProps
} = props;
const {
registerSlot,
unregisterSlot,
...registry
} = (0, _element.useContext)(_slotFillContext.default);
const ref = (0, _element.useRef)(null);
(0, _element.useLayoutEffect)(() => {
registerSlot(name, ref, fillProps);
return () => {
unregisterSlot(name, ref);
};
// Ignore reason: We don't want to unregister and register the slot whenever
// `fillProps` change, which would cause the fill to be re-mounted. Instead,
// we can just update the slot (see hook below).
// For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [registerSlot, unregisterSlot, name]);
// fillProps may be an update that interacts with the layout, so we
// useLayoutEffect.
(0, _element.useLayoutEffect)(() => {
registry.updateSlot(name, fillProps);
});
return (0, _react.createElement)(_view.View, {
as: as,
ref: (0, _compose.useMergeRefs)([forwardedRef, ref]),
...restProps
});
}
var _default = (0, _element.forwardRef)(Slot);
exports.default = _default;
//# sourceMappingURL=slot.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_compose","_view","_slotFillContext","_interopRequireDefault","Slot","props","forwardedRef","name","fillProps","as","children","restProps","registerSlot","unregisterSlot","registry","useContext","SlotFillContext","ref","useRef","useLayoutEffect","updateSlot","_react","createElement","View","useMergeRefs","_default","forwardRef","exports","default"],"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/slot.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseRef,\n\tuseLayoutEffect,\n\tuseContext,\n\tforwardRef,\n} from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport SlotFillContext from './slot-fill-context';\nimport type { WordPressComponentProps } from '../../context';\nimport type { SlotComponentProps } from '../types';\n\nfunction Slot(\n\tprops: WordPressComponentProps<\n\t\tOmit< SlotComponentProps, 'bubblesVirtually' >,\n\t\t'div'\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tname,\n\t\tfillProps = {},\n\t\tas,\n\t\t// `children` is not allowed. However, if it is passed,\n\t\t// it will be displayed as is, so remove `children`.\n\t\t// @ts-ignore\n\t\tchildren,\n\t\t...restProps\n\t} = props;\n\n\tconst { registerSlot, unregisterSlot, ...registry } =\n\t\tuseContext( SlotFillContext );\n\tconst ref = useRef< HTMLElement >( null );\n\n\tuseLayoutEffect( () => {\n\t\tregisterSlot( name, ref, fillProps );\n\t\treturn () => {\n\t\t\tunregisterSlot( name, ref );\n\t\t};\n\t\t// Ignore reason: We don't want to unregister and register the slot whenever\n\t\t// `fillProps` change, which would cause the fill to be re-mounted. Instead,\n\t\t// we can just update the slot (see hook below).\n\t\t// For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ registerSlot, unregisterSlot, name ] );\n\t// fillProps may be an update that interacts with the layout, so we\n\t// useLayoutEffect.\n\tuseLayoutEffect( () => {\n\t\tregistry.updateSlot( name, fillProps );\n\t} );\n\n\treturn (\n\t\t<View\n\t\t\tas={ as }\n\t\t\tref={ useMergeRefs( [ forwardedRef, ref ] ) }\n\t\t\t{ ...restProps }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( Slot );\n"],"mappings":";;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AApBA;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;;AAMA,SAASK,IAAIA,CACZC,KAGC,EACDC,YAAiC,EAChC;EACD,MAAM;IACLC,IAAI;IACJC,SAAS,GAAG,CAAC,CAAC;IACdC,EAAE;IACF;IACA;IACA;IACAC,QAAQ;IACR,GAAGC;EACJ,CAAC,GAAGN,KAAK;EAET,MAAM;IAAEO,YAAY;IAAEC,cAAc;IAAE,GAAGC;EAAS,CAAC,GAClD,IAAAC,mBAAU,EAAEC,wBAAgB,CAAC;EAC9B,MAAMC,GAAG,GAAG,IAAAC,eAAM,EAAiB,IAAK,CAAC;EAEzC,IAAAC,wBAAe,EAAE,MAAM;IACtBP,YAAY,CAAEL,IAAI,EAAEU,GAAG,EAAET,SAAU,CAAC;IACpC,OAAO,MAAM;MACZK,cAAc,CAAEN,IAAI,EAAEU,GAAI,CAAC;IAC5B,CAAC;IACD;IACA;IACA;IACA;IACA;EACD,CAAC,EAAE,CAAEL,YAAY,EAAEC,cAAc,EAAEN,IAAI,CAAG,CAAC;EAC3C;EACA;EACA,IAAAY,wBAAe,EAAE,MAAM;IACtBL,QAAQ,CAACM,UAAU,CAAEb,IAAI,EAAEC,SAAU,CAAC;EACvC,CAAE,CAAC;EAEH,OACC,IAAAa,MAAA,CAAAC,aAAA,EAACrB,KAAA,CAAAsB,IAAI;IACJd,EAAE,EAAGA,EAAI;IACTQ,GAAG,EAAG,IAAAO,qBAAY,EAAE,CAAElB,YAAY,EAAEW,GAAG,CAAG,CAAG;IAAA,GACxCN;EAAS,CACd,CAAC;AAEJ;AAAC,IAAAc,QAAA,GAEc,IAAAC,mBAAU,EAAEtB,IAAK,CAAC;AAAAuB,OAAA,CAAAC,OAAA,GAAAH,QAAA"}

View File

@@ -0,0 +1,33 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = useSlotFills;
var _valtio = require("valtio");
var _element = require("@wordpress/element");
var _slotFillContext = _interopRequireDefault(require("./slot-fill-context"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useSlotFills(name) {
const registry = (0, _element.useContext)(_slotFillContext.default);
const fills = (0, _valtio.useSnapshot)(registry.fills, {
sync: true
});
// The important bit here is that this call ensures that the hook
// only causes a re-render if the "fills" of a given slot name
// change, not any fills.
return fills.get(name);
}
//# sourceMappingURL=use-slot-fills.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_valtio","require","_element","_slotFillContext","_interopRequireDefault","useSlotFills","name","registry","useContext","SlotFillContext","fills","useSnapshot","sync","get"],"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useSnapshot } from 'valtio';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\nimport type { SlotKey } from '../types';\n\nexport default function useSlotFills( name: SlotKey ) {\n\tconst registry = useContext( SlotFillContext );\n\tconst fills = useSnapshot( registry.fills, { sync: true } );\n\t// The important bit here is that this call ensures that the hook\n\t// only causes a re-render if the \"fills\" of a given slot name\n\t// change, not any fills.\n\treturn fills.get( name );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,gBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIe,SAASI,YAAYA,CAAEC,IAAa,EAAG;EACrD,MAAMC,QAAQ,GAAG,IAAAC,mBAAU,EAAEC,wBAAgB,CAAC;EAC9C,MAAMC,KAAK,GAAG,IAAAC,mBAAW,EAAEJ,QAAQ,CAACG,KAAK,EAAE;IAAEE,IAAI,EAAE;EAAK,CAAE,CAAC;EAC3D;EACA;EACA;EACA,OAAOF,KAAK,CAACG,GAAG,CAAEP,IAAK,CAAC;AACzB"}

View File

@@ -0,0 +1,43 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = useSlot;
var _valtio = require("valtio");
var _element = require("@wordpress/element");
var _slotFillContext = _interopRequireDefault(require("./slot-fill-context"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useSlot(name) {
const registry = (0, _element.useContext)(_slotFillContext.default);
const slots = (0, _valtio.useSnapshot)(registry.slots, {
sync: true
});
// The important bit here is that the `useSnapshot` call ensures that the
// hook only causes a re-render if the slot with the given name changes,
// not any other slot.
const slot = slots.get(name);
const api = (0, _element.useMemo)(() => ({
updateSlot: fillProps => registry.updateSlot(name, fillProps),
unregisterSlot: ref => registry.unregisterSlot(name, ref),
registerFill: ref => registry.registerFill(name, ref),
unregisterFill: ref => registry.unregisterFill(name, ref)
}), [name, registry]);
return {
...slot,
...api
};
}
//# sourceMappingURL=use-slot.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_valtio","require","_element","_slotFillContext","_interopRequireDefault","useSlot","name","registry","useContext","SlotFillContext","slots","useSnapshot","sync","slot","get","api","useMemo","updateSlot","fillProps","unregisterSlot","ref","registerFill","unregisterFill"],"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/use-slot.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useSnapshot } from 'valtio';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\nimport type {\n\tSlotFillBubblesVirtuallyFillRef,\n\tSlotFillBubblesVirtuallySlotRef,\n\tFillProps,\n\tSlotKey,\n} from '../types';\n\nexport default function useSlot( name: SlotKey ) {\n\tconst registry = useContext( SlotFillContext );\n\tconst slots = useSnapshot( registry.slots, { sync: true } );\n\t// The important bit here is that the `useSnapshot` call ensures that the\n\t// hook only causes a re-render if the slot with the given name changes,\n\t// not any other slot.\n\tconst slot = slots.get( name );\n\n\tconst api = useMemo(\n\t\t() => ( {\n\t\t\tupdateSlot: ( fillProps: FillProps ) =>\n\t\t\t\tregistry.updateSlot( name, fillProps ),\n\t\t\tunregisterSlot: ( ref: SlotFillBubblesVirtuallySlotRef ) =>\n\t\t\t\tregistry.unregisterSlot( name, ref ),\n\t\t\tregisterFill: ( ref: SlotFillBubblesVirtuallyFillRef ) =>\n\t\t\t\tregistry.registerFill( name, ref ),\n\t\t\tunregisterFill: ( ref: SlotFillBubblesVirtuallyFillRef ) =>\n\t\t\t\tregistry.unregisterFill( name, ref ),\n\t\t} ),\n\t\t[ name, registry ]\n\t);\n\n\treturn {\n\t\t...slot,\n\t\t...api,\n\t};\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,gBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AASe,SAASI,OAAOA,CAAEC,IAAa,EAAG;EAChD,MAAMC,QAAQ,GAAG,IAAAC,mBAAU,EAAEC,wBAAgB,CAAC;EAC9C,MAAMC,KAAK,GAAG,IAAAC,mBAAW,EAAEJ,QAAQ,CAACG,KAAK,EAAE;IAAEE,IAAI,EAAE;EAAK,CAAE,CAAC;EAC3D;EACA;EACA;EACA,MAAMC,IAAI,GAAGH,KAAK,CAACI,GAAG,CAAER,IAAK,CAAC;EAE9B,MAAMS,GAAG,GAAG,IAAAC,gBAAO,EAClB,OAAQ;IACPC,UAAU,EAAIC,SAAoB,IACjCX,QAAQ,CAACU,UAAU,CAAEX,IAAI,EAAEY,SAAU,CAAC;IACvCC,cAAc,EAAIC,GAAoC,IACrDb,QAAQ,CAACY,cAAc,CAAEb,IAAI,EAAEc,GAAI,CAAC;IACrCC,YAAY,EAAID,GAAoC,IACnDb,QAAQ,CAACc,YAAY,CAAEf,IAAI,EAAEc,GAAI,CAAC;IACnCE,cAAc,EAAIF,GAAoC,IACrDb,QAAQ,CAACe,cAAc,CAAEhB,IAAI,EAAEc,GAAI;EACrC,CAAC,CAAE,EACH,CAAEd,IAAI,EAAEC,QAAQ,CACjB,CAAC;EAED,OAAO;IACN,GAAGM,IAAI;IACP,GAAGE;EACJ,CAAC;AACF"}

View File

@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.SlotFillContext = void 0;
var _element = require("@wordpress/element");
/**
* WordPress dependencies
*/
const initialValue = {
registerSlot: () => {},
unregisterSlot: () => {},
registerFill: () => {},
unregisterFill: () => {},
getSlot: () => undefined,
getFills: () => [],
subscribe: () => () => {}
};
const SlotFillContext = (0, _element.createContext)(initialValue);
exports.SlotFillContext = SlotFillContext;
var _default = SlotFillContext;
exports.default = _default;
//# sourceMappingURL=context.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","initialValue","registerSlot","unregisterSlot","registerFill","unregisterFill","getSlot","undefined","getFills","subscribe","SlotFillContext","createContext","exports","_default","default"],"sources":["@wordpress/components/src/slot-fill/context.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport type { BaseSlotFillContext } from './types';\n\nconst initialValue: BaseSlotFillContext = {\n\tregisterSlot: () => {},\n\tunregisterSlot: () => {},\n\tregisterFill: () => {},\n\tunregisterFill: () => {},\n\tgetSlot: () => undefined,\n\tgetFills: () => [],\n\tsubscribe: () => () => {},\n};\nexport const SlotFillContext = createContext( initialValue );\n\nexport default SlotFillContext;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAOA,MAAMC,YAAiC,GAAG;EACzCC,YAAY,EAAEA,CAAA,KAAM,CAAC,CAAC;EACtBC,cAAc,EAAEA,CAAA,KAAM,CAAC,CAAC;EACxBC,YAAY,EAAEA,CAAA,KAAM,CAAC,CAAC;EACtBC,cAAc,EAAEA,CAAA,KAAM,CAAC,CAAC;EACxBC,OAAO,EAAEA,CAAA,KAAMC,SAAS;EACxBC,QAAQ,EAAEA,CAAA,KAAM,EAAE;EAClBC,SAAS,EAAEA,CAAA,KAAM,MAAM,CAAC;AACzB,CAAC;AACM,MAAMC,eAAe,GAAG,IAAAC,sBAAa,EAAEV,YAAa,CAAC;AAACW,OAAA,CAAAF,eAAA,GAAAA,eAAA;AAAA,IAAAG,QAAA,GAE9CH,eAAe;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

View File

@@ -0,0 +1,63 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Fill;
var _element = require("@wordpress/element");
var _context = _interopRequireDefault(require("./context"));
var _useSlot = _interopRequireDefault(require("./use-slot"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function Fill({
name,
children
}) {
const {
registerFill,
unregisterFill
} = (0, _element.useContext)(_context.default);
const slot = (0, _useSlot.default)(name);
const ref = (0, _element.useRef)({
name,
children
});
(0, _element.useLayoutEffect)(() => {
const refValue = ref.current;
registerFill(name, refValue);
return () => unregisterFill(name, refValue);
// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
// We'll leave them as-is until a more detailed investigation/refactor can be performed.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
(0, _element.useLayoutEffect)(() => {
ref.current.children = children;
if (slot) {
slot.forceUpdate();
}
// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
// We'll leave them as-is until a more detailed investigation/refactor can be performed.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [children]);
(0, _element.useLayoutEffect)(() => {
if (name === ref.current.name) {
// Ignore initial effect.
return;
}
unregisterFill(ref.current.name, ref.current);
ref.current.name = name;
registerFill(name, ref.current);
// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
// We'll leave them as-is until a more detailed investigation/refactor can be performed.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [name]);
return null;
}
//# sourceMappingURL=fill.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_context","_interopRequireDefault","_useSlot","Fill","name","children","registerFill","unregisterFill","useContext","SlotFillContext","slot","useSlot","ref","useRef","useLayoutEffect","refValue","current","forceUpdate"],"sources":["@wordpress/components/src/slot-fill/fill.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext, useLayoutEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\nimport useSlot from './use-slot';\nimport type { FillComponentProps } from './types';\n\nexport default function Fill( { name, children }: FillComponentProps ) {\n\tconst { registerFill, unregisterFill } = useContext( SlotFillContext );\n\tconst slot = useSlot( name );\n\n\tconst ref = useRef( {\n\t\tname,\n\t\tchildren,\n\t} );\n\n\tuseLayoutEffect( () => {\n\t\tconst refValue = ref.current;\n\t\tregisterFill( name, refValue );\n\t\treturn () => unregisterFill( name, refValue );\n\t\t// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.\n\t\t// We'll leave them as-is until a more detailed investigation/refactor can be performed.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tuseLayoutEffect( () => {\n\t\tref.current.children = children;\n\t\tif ( slot ) {\n\t\t\tslot.forceUpdate();\n\t\t}\n\t\t// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.\n\t\t// We'll leave them as-is until a more detailed investigation/refactor can be performed.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ children ] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( name === ref.current.name ) {\n\t\t\t// Ignore initial effect.\n\t\t\treturn;\n\t\t}\n\t\tunregisterFill( ref.current.name, ref.current );\n\t\tref.current.name = name;\n\t\tregisterFill( name, ref.current );\n\t\t// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.\n\t\t// We'll leave them as-is until a more detailed investigation/refactor can be performed.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ name ] );\n\n\treturn null;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAD,sBAAA,CAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAKe,SAASI,IAAIA,CAAE;EAAEC,IAAI;EAAEC;AAA6B,CAAC,EAAG;EACtE,MAAM;IAAEC,YAAY;IAAEC;EAAe,CAAC,GAAG,IAAAC,mBAAU,EAAEC,gBAAgB,CAAC;EACtE,MAAMC,IAAI,GAAG,IAAAC,gBAAO,EAAEP,IAAK,CAAC;EAE5B,MAAMQ,GAAG,GAAG,IAAAC,eAAM,EAAE;IACnBT,IAAI;IACJC;EACD,CAAE,CAAC;EAEH,IAAAS,wBAAe,EAAE,MAAM;IACtB,MAAMC,QAAQ,GAAGH,GAAG,CAACI,OAAO;IAC5BV,YAAY,CAAEF,IAAI,EAAEW,QAAS,CAAC;IAC9B,OAAO,MAAMR,cAAc,CAAEH,IAAI,EAAEW,QAAS,CAAC;IAC7C;IACA;IACA;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,IAAAD,wBAAe,EAAE,MAAM;IACtBF,GAAG,CAACI,OAAO,CAACX,QAAQ,GAAGA,QAAQ;IAC/B,IAAKK,IAAI,EAAG;MACXA,IAAI,CAACO,WAAW,CAAC,CAAC;IACnB;IACA;IACA;IACA;EACD,CAAC,EAAE,CAAEZ,QAAQ,CAAG,CAAC;EAEjB,IAAAS,wBAAe,EAAE,MAAM;IACtB,IAAKV,IAAI,KAAKQ,GAAG,CAACI,OAAO,CAACZ,IAAI,EAAG;MAChC;MACA;IACD;IACAG,cAAc,CAAEK,GAAG,CAACI,OAAO,CAACZ,IAAI,EAAEQ,GAAG,CAACI,OAAQ,CAAC;IAC/CJ,GAAG,CAACI,OAAO,CAACZ,IAAI,GAAGA,IAAI;IACvBE,YAAY,CAAEF,IAAI,EAAEQ,GAAG,CAACI,OAAQ,CAAC;IACjC;IACA;IACA;EACD,CAAC,EAAE,CAAEZ,IAAI,CAAG,CAAC;EAEb,OAAO,IAAI;AACZ"}

View File

@@ -0,0 +1,112 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Fill = Fill;
exports.Provider = Provider;
exports.Slot = void 0;
exports.UnforwardedSlot = UnforwardedSlot;
exports.createPrivateSlotFill = void 0;
exports.createSlotFill = createSlotFill;
Object.defineProperty(exports, "useSlot", {
enumerable: true,
get: function () {
return _useSlot.default;
}
});
Object.defineProperty(exports, "useSlotFills", {
enumerable: true,
get: function () {
return _useSlotFills.default;
}
});
var _react = require("react");
var _element = require("@wordpress/element");
var _fill = _interopRequireDefault(require("./fill"));
var _slot = _interopRequireDefault(require("./slot"));
var _fill2 = _interopRequireDefault(require("./bubbles-virtually/fill"));
var _slot2 = _interopRequireDefault(require("./bubbles-virtually/slot"));
var _slotFillProvider = _interopRequireDefault(require("./bubbles-virtually/slot-fill-provider"));
var _provider = _interopRequireDefault(require("./provider"));
var _slotFillContext = _interopRequireDefault(require("./bubbles-virtually/slot-fill-context"));
var _useSlot = _interopRequireDefault(require("./bubbles-virtually/use-slot"));
var _useSlotFills = _interopRequireDefault(require("./bubbles-virtually/use-slot-fills"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function Fill(props) {
// We're adding both Fills here so they can register themselves before
// their respective slot has been registered. Only the Fill that has a slot
// will render. The other one will return null.
return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_fill.default, {
...props
}), (0, _react.createElement)(_fill2.default, {
...props
}));
}
function UnforwardedSlot(props, ref) {
const {
bubblesVirtually,
...restProps
} = props;
if (bubblesVirtually) {
return (0, _react.createElement)(_slot2.default, {
...restProps,
ref: ref
});
}
return (0, _react.createElement)(_slot.default, {
...restProps
});
}
const Slot = (0, _element.forwardRef)(UnforwardedSlot);
exports.Slot = Slot;
function Provider({
children,
passthrough = false
}) {
const parent = (0, _element.useContext)(_slotFillContext.default);
if (!parent.isDefault && passthrough) {
return (0, _react.createElement)(_react.Fragment, null, children);
}
return (0, _react.createElement)(_provider.default, null, (0, _react.createElement)(_slotFillProvider.default, null, children));
}
function createSlotFill(key) {
const baseName = typeof key === 'symbol' ? key.description : key;
const FillComponent = props => (0, _react.createElement)(Fill, {
name: key,
...props
});
FillComponent.displayName = `${baseName}Fill`;
const SlotComponent = props => (0, _react.createElement)(Slot, {
name: key,
...props
});
SlotComponent.displayName = `${baseName}Slot`;
SlotComponent.__unstableName = key;
return {
Fill: FillComponent,
Slot: SlotComponent
};
}
const createPrivateSlotFill = name => {
const privateKey = Symbol(name);
const privateSlotFill = createSlotFill(privateKey);
return {
privateKey,
...privateSlotFill
};
};
exports.createPrivateSlotFill = createPrivateSlotFill;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,53 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Fill", {
enumerable: true,
get: function () {
return _fill.default;
}
});
Object.defineProperty(exports, "Provider", {
enumerable: true,
get: function () {
return _provider.default;
}
});
exports.Slot = Slot;
exports.createSlotFill = createSlotFill;
var _react = require("react");
var _slot = _interopRequireDefault(require("./slot"));
var _fill = _interopRequireDefault(require("./fill"));
var _provider = _interopRequireDefault(require("./provider"));
/**
* Internal dependencies
*/
function Slot({
bubblesVirtually,
...restProps
}) {
return (0, _react.createElement)(_slot.default, {
...restProps
});
}
function createSlotFill(name) {
const FillComponent = props => (0, _react.createElement)(_fill.default, {
name: name,
...props
});
FillComponent.displayName = name + 'Fill';
const SlotComponent = props => (0, _react.createElement)(Slot, {
name: name,
...props
});
SlotComponent.displayName = name + 'Slot';
return {
Fill: FillComponent,
Slot: SlotComponent
};
}
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_slot","_interopRequireDefault","require","_fill","_provider","Slot","bubblesVirtually","restProps","_react","createElement","default","createSlotFill","name","FillComponent","props","displayName","SlotComponent","Fill"],"sources":["@wordpress/components/src/slot-fill/index.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport BaseSlot from './slot';\nimport Fill from './fill';\nimport Provider from './provider';\n\nexport { Fill, Provider };\n\nexport function Slot( { bubblesVirtually, ...restProps } ) {\n\treturn <BaseSlot { ...restProps } />;\n}\n\nexport function createSlotFill( name ) {\n\tconst FillComponent = ( props ) => <Fill name={ name } { ...props } />;\n\tFillComponent.displayName = name + 'Fill';\n\n\tconst SlotComponent = ( props ) => <Slot name={ name } { ...props } />;\n\tSlotComponent.displayName = name + 'Slot';\n\n\treturn {\n\t\tFill: FillComponent,\n\t\tSlot: SlotComponent,\n\t};\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AALA;AACA;AACA;;AAOO,SAASG,IAAIA,CAAE;EAAEC,gBAAgB;EAAE,GAAGC;AAAU,CAAC,EAAG;EAC1D,OAAO,IAAAC,MAAA,CAAAC,aAAA,EAACT,KAAA,CAAAU,OAAQ;IAAA,GAAMH;EAAS,CAAI,CAAC;AACrC;AAEO,SAASI,cAAcA,CAAEC,IAAI,EAAG;EACtC,MAAMC,aAAa,GAAKC,KAAK,IAAM,IAAAN,MAAA,CAAAC,aAAA,EAACN,KAAA,CAAAO,OAAI;IAACE,IAAI,EAAGA,IAAM;IAAA,GAAME;EAAK,CAAI,CAAC;EACtED,aAAa,CAACE,WAAW,GAAGH,IAAI,GAAG,MAAM;EAEzC,MAAMI,aAAa,GAAKF,KAAK,IAAM,IAAAN,MAAA,CAAAC,aAAA,EAACJ,IAAI;IAACO,IAAI,EAAGA,IAAM;IAAA,GAAME;EAAK,CAAI,CAAC;EACtEE,aAAa,CAACD,WAAW,GAAGH,IAAI,GAAG,MAAM;EAEzC,OAAO;IACNK,IAAI,EAAEJ,aAAa;IACnBR,IAAI,EAAEW;EACP,CAAC;AACF"}

View File

@@ -0,0 +1,106 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SlotFillProvider = SlotFillProvider;
exports.default = void 0;
var _react = require("react");
var _element = require("@wordpress/element");
var _context = _interopRequireDefault(require("./context"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function createSlotRegistry() {
const slots = {};
const fills = {};
let listeners = [];
function registerSlot(name, slot) {
const previousSlot = slots[name];
slots[name] = slot;
triggerListeners();
// Sometimes the fills are registered after the initial render of slot
// But before the registerSlot call, we need to rerender the slot.
forceUpdateSlot(name);
// If a new instance of a slot is being mounted while another with the
// same name exists, force its update _after_ the new slot has been
// assigned into the instance, such that its own rendering of children
// will be empty (the new Slot will subsume all fills for this name).
if (previousSlot) {
previousSlot.forceUpdate();
}
}
function registerFill(name, instance) {
fills[name] = [...(fills[name] || []), instance];
forceUpdateSlot(name);
}
function unregisterSlot(name, instance) {
// If a previous instance of a Slot by this name unmounts, do nothing,
// as the slot and its fills should only be removed for the current
// known instance.
if (slots[name] !== instance) {
return;
}
delete slots[name];
triggerListeners();
}
function unregisterFill(name, instance) {
var _fills$name$filter;
fills[name] = (_fills$name$filter = fills[name]?.filter(fill => fill !== instance)) !== null && _fills$name$filter !== void 0 ? _fills$name$filter : [];
forceUpdateSlot(name);
}
function getSlot(name) {
return slots[name];
}
function getFills(name, slotInstance) {
// Fills should only be returned for the current instance of the slot
// in which they occupy.
if (slots[name] !== slotInstance) {
return [];
}
return fills[name];
}
function forceUpdateSlot(name) {
const slot = getSlot(name);
if (slot) {
slot.forceUpdate();
}
}
function triggerListeners() {
listeners.forEach(listener => listener());
}
function subscribe(listener) {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
};
}
return {
registerSlot,
unregisterSlot,
registerFill,
unregisterFill,
getSlot,
getFills,
subscribe
};
}
function SlotFillProvider({
children
}) {
const contextValue = (0, _element.useMemo)(createSlotRegistry, []);
return (0, _react.createElement)(_context.default.Provider, {
value: contextValue
}, children);
}
var _default = SlotFillProvider;
exports.default = _default;
//# sourceMappingURL=provider.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,110 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _element = require("@wordpress/element");
var _context = _interopRequireDefault(require("./context"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Whether the argument is a function.
*
* @param maybeFunc The argument to check.
* @return True if the argument is a function, false otherwise.
*/
function isFunction(maybeFunc) {
return typeof maybeFunc === 'function';
}
class SlotComponent extends _element.Component {
constructor(props) {
super(props);
this.isUnmounted = false;
}
componentDidMount() {
const {
registerSlot
} = this.props;
this.isUnmounted = false;
registerSlot(this.props.name, this);
}
componentWillUnmount() {
const {
unregisterSlot
} = this.props;
this.isUnmounted = true;
unregisterSlot(this.props.name, this);
}
componentDidUpdate(prevProps) {
const {
name,
unregisterSlot,
registerSlot
} = this.props;
if (prevProps.name !== name) {
unregisterSlot(prevProps.name, this);
registerSlot(name, this);
}
}
forceUpdate() {
if (this.isUnmounted) {
return;
}
super.forceUpdate();
}
render() {
var _getFills;
const {
children,
name,
fillProps = {},
getFills
} = this.props;
const fills = ((_getFills = getFills(name, this)) !== null && _getFills !== void 0 ? _getFills : []).map(fill => {
const fillChildren = isFunction(fill.children) ? fill.children(fillProps) : fill.children;
return _element.Children.map(fillChildren, (child, childIndex) => {
if (!child || typeof child === 'string') {
return child;
}
let childKey = childIndex;
if (typeof child === 'object' && 'key' in child && child?.key) {
childKey = child.key;
}
return (0, _element.cloneElement)(child, {
key: childKey
});
});
}).filter(
// In some cases fills are rendered only when some conditions apply.
// This ensures that we only use non-empty fills when rendering, i.e.,
// it allows us to render wrappers only when the fills are actually present.
element => !(0, _element.isEmptyElement)(element));
return (0, _react.createElement)(_react.Fragment, null, isFunction(children) ? children(fills) : fills);
}
}
const Slot = props => (0, _react.createElement)(_context.default.Consumer, null, ({
registerSlot,
unregisterSlot,
getFills
}) => (0, _react.createElement)(SlotComponent, {
...props,
registerSlot: registerSlot,
unregisterSlot: unregisterSlot,
getFills: getFills
}));
var _default = Slot;
exports.default = _default;
//# sourceMappingURL=slot.js.map

File diff suppressed because one or more lines are too long

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/slot-fill/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { Component, MutableRefObject, ReactNode, RefObject } from 'react';\n\nexport type DistributiveOmit< T, K extends keyof any > = T extends any\n\t? Omit< T, K >\n\t: never;\n\nexport type SlotKey = string | symbol;\n\nexport type FillProps = Record< string, any >;\n\ntype SlotPropBase = {\n\t/**\n\t * Slot name.\n\t */\n\tname: SlotKey;\n\n\t/**\n\t * props to pass from `Slot` to `Fill`.\n\t *\n\t * @default {}\n\t */\n\tfillProps?: FillProps;\n};\n\nexport type SlotComponentProps =\n\t| ( SlotPropBase & {\n\t\t\t/**\n\t\t\t * By default, events will bubble to their parents on the DOM hierarchy (native event bubbling).\n\t\t\t * If set to true, events will bubble to their virtual parent in the React elements hierarchy instead,\n\t\t\t * also accept an optional `className`, `id`, etc. to add to the slot container.\n\t\t\t */\n\t\t\tbubblesVirtually: true;\n\n\t\t\t/**\n\t\t\t * A function that returns nodes to be rendered.\n\t\t\t * Supported only when `bubblesVirtually` is `false`.\n\t\t\t */\n\t\t\tchildren?: never;\n\n\t\t\t/**\n\t\t\t * Additional className for the `Slot` component.\n\t\t\t * Supported only when `bubblesVirtually` is `true`.\n\t\t\t */\n\t\t\tclassName?: string;\n\n\t\t\t/**\n\t\t\t * Additional styles for the `Slot` component.\n\t\t\t * Supported only when `bubblesVirtually` is `true`.\n\t\t\t */\n\t\t\tstyle?: React.CSSProperties;\n\t } )\n\t| ( SlotPropBase & {\n\t\t\t/**\n\t\t\t * By default, events will bubble to their parents on the DOM hierarchy (native event bubbling).\n\t\t\t * If set to true, events will bubble to their virtual parent in the React elements hierarchy instead,\n\t\t\t * also accept an optional `className`, `id`, etc. to add to the slot container.\n\t\t\t */\n\t\t\tbubblesVirtually?: false;\n\n\t\t\t/**\n\t\t\t * A function that returns nodes to be rendered.\n\t\t\t * Supported only when `bubblesVirtually` is `false`.\n\t\t\t */\n\t\t\tchildren?: ( fills: ReactNode ) => ReactNode;\n\n\t\t\t/**\n\t\t\t * Additional className for the `Slot` component.\n\t\t\t * Supported only when `bubblesVirtually` is `true`.\n\t\t\t */\n\t\t\tclassName?: never;\n\n\t\t\t/**\n\t\t\t * Additional styles for the `Slot` component.\n\t\t\t * Supported only when `bubblesVirtually` is `true`.\n\t\t\t */\n\t\t\tstyle?: never;\n\t } );\n\nexport type FillComponentProps = {\n\t/**\n\t * The name of the slot to fill into.\n\t */\n\tname: SlotKey;\n\n\t/**\n\t * Children elements or render function.\n\t */\n\tchildren?: ReactNode | ( ( fillProps: FillProps ) => ReactNode );\n};\n\nexport type SlotFillProviderProps = {\n\t/**\n\t * The children elements.\n\t */\n\tchildren: ReactNode;\n\n\t/**\n\t * Whether to pass slots to the parent provider if existent.\n\t */\n\tpassthrough?: boolean;\n};\n\nexport type SlotFillBubblesVirtuallySlotRef = RefObject< HTMLElement >;\nexport type SlotFillBubblesVirtuallyFillRef = MutableRefObject< {\n\trerender: () => void;\n} >;\n\nexport type SlotFillBubblesVirtuallyContext = {\n\tslots: Map<\n\t\tSlotKey,\n\t\t{\n\t\t\tref: SlotFillBubblesVirtuallySlotRef;\n\t\t\tfillProps: FillProps;\n\t\t}\n\t>;\n\tfills: Map< SlotKey, SlotFillBubblesVirtuallyFillRef[] >;\n\tregisterSlot: (\n\t\tname: SlotKey,\n\t\tref: SlotFillBubblesVirtuallySlotRef,\n\t\tfillProps: FillProps\n\t) => void;\n\tunregisterSlot: (\n\t\tname: SlotKey,\n\t\tref: SlotFillBubblesVirtuallySlotRef\n\t) => void;\n\tupdateSlot: ( name: SlotKey, fillProps: FillProps ) => void;\n\tregisterFill: (\n\t\tname: SlotKey,\n\t\tref: SlotFillBubblesVirtuallyFillRef\n\t) => void;\n\tunregisterFill: (\n\t\tname: SlotKey,\n\t\tref: SlotFillBubblesVirtuallyFillRef\n\t) => void;\n\n\t/**\n\t * This helps the provider know if it's using the default context value or not.\n\t */\n\tisDefault?: boolean;\n};\n\nexport type BaseSlotFillContext = {\n\tregisterSlot: (\n\t\tname: SlotKey,\n\t\tslot: Component< BaseSlotComponentProps >\n\t) => void;\n\tunregisterSlot: (\n\t\tname: SlotKey,\n\t\tslot: Component< BaseSlotComponentProps >\n\t) => void;\n\tregisterFill: ( name: SlotKey, instance: FillComponentProps ) => void;\n\tunregisterFill: ( name: SlotKey, instance: FillComponentProps ) => void;\n\tgetSlot: (\n\t\tname: SlotKey\n\t) => Component< BaseSlotComponentProps > | undefined;\n\tgetFills: (\n\t\tname: SlotKey,\n\t\tslotInstance: Component< BaseSlotComponentProps >\n\t) => FillComponentProps[];\n\tsubscribe: ( listener: () => void ) => () => void;\n};\n\nexport type BaseSlotComponentProps = Pick<\n\tBaseSlotFillContext,\n\t'registerSlot' | 'unregisterSlot' | 'getFills'\n> &\n\tOmit< SlotComponentProps, 'bubblesVirtually' > & {\n\t\tchildren?: ( fills: ReactNode ) => ReactNode;\n\t};\n"],"mappings":""}

View File

@@ -0,0 +1,33 @@
"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 _context = _interopRequireDefault(require("./context"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* React hook returning the active slot given a name.
*
* @param name Slot name.
* @return Slot object.
*/
const useSlot = name => {
const {
getSlot,
subscribe
} = (0, _element.useContext)(_context.default);
return (0, _element.useSyncExternalStore)(subscribe, () => getSlot(name), () => getSlot(name));
};
var _default = useSlot;
exports.default = _default;
//# sourceMappingURL=use-slot.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_context","_interopRequireDefault","useSlot","name","getSlot","subscribe","useContext","SlotFillContext","useSyncExternalStore","_default","exports","default"],"sources":["@wordpress/components/src/slot-fill/use-slot.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext, useSyncExternalStore } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\nimport type { SlotKey } from './types';\n\n/**\n * React hook returning the active slot given a name.\n *\n * @param name Slot name.\n * @return Slot object.\n */\nconst useSlot = ( name: SlotKey ) => {\n\tconst { getSlot, subscribe } = useContext( SlotFillContext );\n\treturn useSyncExternalStore(\n\t\tsubscribe,\n\t\t() => getSlot( name ),\n\t\t() => getSlot( name )\n\t);\n};\n\nexport default useSlot;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMG,OAAO,GAAKC,IAAa,IAAM;EACpC,MAAM;IAAEC,OAAO;IAAEC;EAAU,CAAC,GAAG,IAAAC,mBAAU,EAAEC,gBAAgB,CAAC;EAC5D,OAAO,IAAAC,6BAAoB,EAC1BH,SAAS,EACT,MAAMD,OAAO,CAAED,IAAK,CAAC,EACrB,MAAMC,OAAO,CAAED,IAAK,CACrB,CAAC;AACF,CAAC;AAAC,IAAAM,QAAA,GAEaP,OAAO;AAAAQ,OAAA,CAAAC,OAAA,GAAAF,QAAA"}