@elementor/locations 0.7.6 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 0.8.0
+
+### Minor Changes
+
+- d05046f: Add replaceable location
+
+## 0.7.7
+
+### Patch Changes
+
+- 3e108d9: update elementor/ui
+
 ## 0.7.6
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { ComponentType } from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
 
 type AnyProps = object;
 type InjectedComponent<TProps extends object = AnyProps> = ComponentType<TProps>;
@@ -18,6 +18,12 @@ type Injection<TProps extends object = AnyProps> = {
      */
     priority: Priority;
 };
+type ReplaceableInjection<TProps extends object = AnyProps> = Injection<TProps> & {
+    /**
+     * A function that returns a boolean indicating whether the injection should be applied or not.
+     */
+    condition?: (props: TProps) => boolean;
+};
 type InjectArgs<TProps extends object = AnyProps> = {
     /**
      * A unique id (per location) of the component to be injected.
@@ -38,6 +44,18 @@ type InjectArgs<TProps extends object = AnyProps> = {
         overwrite?: boolean;
     };
 };
+type ReplaceableInjectArgs<TProps extends object = AnyProps> = Pick<InjectArgs<TProps>, 'id' | 'component'> & {
+    /**
+     * A function that returns a boolean indicating whether the injection should be applied or not.
+     */
+    condition?: (props: TProps) => boolean;
+    options?: {
+        /**
+         * Priority of the injected component inside the location. Lower value means higher priority.
+         */
+        priority?: Priority;
+    };
+};
 type Location<TProps extends object = AnyProps> = {
     /**
      * Inject a component into the location.
@@ -51,8 +69,24 @@ type Location<TProps extends object = AnyProps> = {
     useInjections: () => Injection<TProps>[];
     Slot: ComponentType<TProps>;
 };
+type ReplaceableLocation<TProps extends object = AnyProps> = {
+    /**
+     * Register a component into the location.
+     */
+    inject: (args: ReplaceableInjectArgs<TProps>) => void;
+    /**
+     *
+     * @return All the injections in the location.
+     */
+    getInjections: () => ReplaceableInjection<TProps>[];
+    useInjections: () => ReplaceableInjection<TProps>[];
+    Slot: ComponentType<PropsWithChildren<TProps>>;
+};
 
 declare function createLocation<TProps extends object = AnyProps>(): Location<TProps>;
+
+declare function createReplaceableLocation<TProps extends object = AnyProps>(): ReplaceableLocation<TProps>;
+
 declare function flushAllInjections(): void;
 
-export { type AnyProps, type Id, type InjectArgs, type InjectedComponent, type Injection, type Location, type Priority, flushAllInjections as __flushAllInjections, createLocation };
+export { type AnyProps, type Id, type InjectArgs, type InjectedComponent, type Injection, type Location, type Priority, type ReplaceableInjectArgs, type ReplaceableInjection, type ReplaceableLocation, flushAllInjections as __flushAllInjections, createLocation, createReplaceableLocation };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
 
 type AnyProps = object;
 type InjectedComponent<TProps extends object = AnyProps> = ComponentType<TProps>;
@@ -18,6 +18,12 @@ type Injection<TProps extends object = AnyProps> = {
      */
     priority: Priority;
 };
+type ReplaceableInjection<TProps extends object = AnyProps> = Injection<TProps> & {
+    /**
+     * A function that returns a boolean indicating whether the injection should be applied or not.
+     */
+    condition?: (props: TProps) => boolean;
+};
 type InjectArgs<TProps extends object = AnyProps> = {
     /**
      * A unique id (per location) of the component to be injected.
@@ -38,6 +44,18 @@ type InjectArgs<TProps extends object = AnyProps> = {
         overwrite?: boolean;
     };
 };
+type ReplaceableInjectArgs<TProps extends object = AnyProps> = Pick<InjectArgs<TProps>, 'id' | 'component'> & {
+    /**
+     * A function that returns a boolean indicating whether the injection should be applied or not.
+     */
+    condition?: (props: TProps) => boolean;
+    options?: {
+        /**
+         * Priority of the injected component inside the location. Lower value means higher priority.
+         */
+        priority?: Priority;
+    };
+};
 type Location<TProps extends object = AnyProps> = {
     /**
      * Inject a component into the location.
@@ -51,8 +69,24 @@ type Location<TProps extends object = AnyProps> = {
     useInjections: () => Injection<TProps>[];
     Slot: ComponentType<TProps>;
 };
+type ReplaceableLocation<TProps extends object = AnyProps> = {
+    /**
+     * Register a component into the location.
+     */
+    inject: (args: ReplaceableInjectArgs<TProps>) => void;
+    /**
+     *
+     * @return All the injections in the location.
+     */
+    getInjections: () => ReplaceableInjection<TProps>[];
+    useInjections: () => ReplaceableInjection<TProps>[];
+    Slot: ComponentType<PropsWithChildren<TProps>>;
+};
 
 declare function createLocation<TProps extends object = AnyProps>(): Location<TProps>;
+
+declare function createReplaceableLocation<TProps extends object = AnyProps>(): ReplaceableLocation<TProps>;
+
 declare function flushAllInjections(): void;
 
-export { type AnyProps, type Id, type InjectArgs, type InjectedComponent, type Injection, type Location, type Priority, flushAllInjections as __flushAllInjections, createLocation };
+export { type AnyProps, type Id, type InjectArgs, type InjectedComponent, type Injection, type Location, type Priority, type ReplaceableInjectArgs, type ReplaceableInjection, type ReplaceableLocation, flushAllInjections as __flushAllInjections, createLocation, createReplaceableLocation };

package/dist/index.js

@@ -28,15 +28,20 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   __flushAllInjections: () => flushAllInjections,
-  createLocation: () => createLocation
+  createLocation: () => createLocation,
+  createReplaceableLocation: () => createReplaceableLocation
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
-// src/api.tsx
+// src/create-location.tsx
+var React3 = __toESM(require("react"));
+
+// src/injections.tsx
 var React2 = __toESM(require("react"));
+var import_react3 = require("react");
 
 // src/components/injected-component-wrapper.tsx
 var React = __toESM(require("react"));
@@ -64,10 +69,23 @@ function InjectedComponentWrapper({ children }) {
   return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React.createElement(import_react2.Suspense, { fallback: null }, children));
 }
 
-// src/api.tsx
-var import_react3 = require("react");
+// src/injections.tsx
 var DEFAULT_PRIORITY = 10;
 var flushInjectionsFns = [];
+function flushAllInjections() {
+  flushInjectionsFns.forEach((flush) => flush());
+}
+function createGetInjections(injections) {
+  return () => [...injections.values()].sort((a, b) => a.priority - b.priority);
+}
+function createUseInjections(getInjections) {
+  return () => (0, import_react3.useMemo)(() => getInjections(), []);
+}
+function wrapInjectedComponent(Component2) {
+  return (props) => /* @__PURE__ */ React2.createElement(InjectedComponentWrapper, null, /* @__PURE__ */ React2.createElement(Component2, { ...props }));
+}
+
+// src/create-location.tsx
 function createLocation() {
   const injections = /* @__PURE__ */ new Map();
   const getInjections = createGetInjections(injections);
@@ -82,21 +100,12 @@ function createLocation() {
     Slot
   };
 }
-function flushAllInjections() {
-  flushInjectionsFns.forEach((flush) => flush());
-}
-function wrapInjectedComponent(Component2) {
-  return (props) => /* @__PURE__ */ React2.createElement(InjectedComponentWrapper, null, /* @__PURE__ */ React2.createElement(Component2, { ...props }));
-}
 function createSlot(useInjections) {
   return (props) => {
     const injections = useInjections();
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, injections.map(({ id, component: Component2 }) => /* @__PURE__ */ React2.createElement(Component2, { ...props, key: id })));
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, injections.map(({ id, component: Component2 }) => /* @__PURE__ */ React3.createElement(Component2, { ...props, key: id })));
   };
 }
-function createGetInjections(injections) {
-  return () => [...injections.values()].sort((a, b) => a.priority - b.priority);
-}
 function createInject(injections) {
   return ({ component, id, options = {} }) => {
     if (injections.has(id) && !options?.overwrite) {
@@ -112,12 +121,47 @@ function createInject(injections) {
     });
   };
 }
-function createUseInjections(getInjections) {
-  return () => (0, import_react3.useMemo)(() => getInjections(), []);
+
+// src/create-replaceable-location.tsx
+var React4 = __toESM(require("react"));
+function createReplaceableLocation() {
+  const injections = /* @__PURE__ */ new Map();
+  const getInjections = createGetInjections(injections);
+  const useInjections = createUseInjections(getInjections);
+  const Slot = createReplaceable(useInjections);
+  const inject = createRegister(injections);
+  flushInjectionsFns.push(() => injections.clear());
+  return {
+    getInjections,
+    useInjections,
+    inject,
+    Slot
+  };
+}
+function createReplaceable(useInjections) {
+  return (props) => {
+    const injections = useInjections();
+    const { component: Component2 } = injections.find(({ condition }) => condition?.(props)) ?? {};
+    if (!Component2) {
+      return props.children;
+    }
+    return /* @__PURE__ */ React4.createElement(Component2, { ...props });
+  };
+}
+function createRegister(injections) {
+  return ({ component, id, condition = () => true, options = {} }) => {
+    injections.set(id, {
+      id,
+      component: wrapInjectedComponent(component),
+      condition,
+      priority: options.priority ?? DEFAULT_PRIORITY
+    });
+  };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   __flushAllInjections,
-  createLocation
+  createLocation,
+  createReplaceableLocation
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/api.tsx","../src/components/injected-component-wrapper.tsx","../src/components/error-boundary.tsx"],"sourcesContent":["export * from './types';\n\nexport { createLocation, flushAllInjections as __flushAllInjections } from './api';\n","import * as React from 'react';\nimport { InjectedComponent, Injection, InjectArgs, AnyProps, Location, Id } from './types';\nimport InjectedComponentWrapper from './components/injected-component-wrapper';\nimport { useMemo } from 'react';\n\ntype InjectionsMap< TProps extends object = AnyProps > = Map< Id, Injection< TProps > >;\n\nconst DEFAULT_PRIORITY = 10;\n\n// Allow flushing all injections at once, for testing purposes.\nconst flushInjectionsFns: ( () => void )[] = [];\n\nexport function createLocation< TProps extends object = AnyProps >(): Location< TProps > {\n\tconst injections: InjectionsMap< TProps > = new Map();\n\n\tconst getInjections = createGetInjections( injections );\n\tconst useInjections = createUseInjections( getInjections );\n\tconst Slot = createSlot( useInjections );\n\tconst inject = createInject( injections );\n\n\t// Push the clear function to the flushInjectionsFns array, so we can flush all injections at once.\n\tflushInjectionsFns.push( () => injections.clear() );\n\n\treturn {\n\t\tinject,\n\t\tgetInjections,\n\t\tuseInjections,\n\t\tSlot,\n\t};\n}\n\nexport function flushAllInjections() {\n\tflushInjectionsFns.forEach( ( flush ) => flush() );\n}\n\nfunction wrapInjectedComponent< TProps extends object = AnyProps >( Component: InjectedComponent< TProps > ) {\n\treturn ( props: TProps ) => (\n\t\t<InjectedComponentWrapper>\n\t\t\t<Component { ...props } />\n\t\t</InjectedComponentWrapper>\n\t);\n}\n\nfunction createSlot< TProps extends object = AnyProps >( useInjections: Location< TProps >[ 'useInjections' ] ) {\n\treturn ( props: TProps ) => {\n\t\tconst injections = useInjections();\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ injections.map( ( { id, component: Component } ) => (\n\t\t\t\t\t<Component { ...props } key={ id } />\n\t\t\t\t) ) }\n\t\t\t</>\n\t\t);\n\t};\n}\n\nfunction createGetInjections< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {\n\treturn () => [ ...injections.values() ].sort( ( a, b ) => a.priority - b.priority );\n}\n\nfunction createInject< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {\n\treturn ( { component, id, options = {} }: InjectArgs< TProps > ) => {\n\t\tif ( injections.has( id ) && ! options?.overwrite ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`An injection with the id \"${ id }\" already exists. Did you mean to use \"options.overwrite\"?`\n\t\t\t);\n\n\t\t\treturn;\n\t\t}\n\n\t\tinjections.set( id, {\n\t\t\tid,\n\t\t\tcomponent: wrapInjectedComponent( component ),\n\t\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t\t} );\n\t};\n}\n\nfunction createUseInjections< TProps extends object = AnyProps >(\n\tgetInjections: Location< TProps >[ 'getInjections' ]\n) {\n\treturn () => useMemo( () => getInjections(), [] );\n}\n","import * as React from 'react';\nimport { ReactNode, Suspense } from 'react';\nimport ErrorBoundary from './error-boundary';\n\nexport default function InjectedComponentWrapper( { children }: { children: ReactNode } ) {\n\treturn (\n\t\t<ErrorBoundary fallback={ null }>\n\t\t\t<Suspense fallback={ null }>{ children }</Suspense>\n\t\t</ErrorBoundary>\n\t);\n}\n","import { Component, ReactNode } from 'react';\n\ninterface Props {\n\tchildren?: ReactNode;\n\tfallback: ReactNode;\n}\n\ninterface State {\n\thasError: boolean;\n}\n\nexport default class ErrorBoundary extends Component< Props, State > {\n\tpublic state: State = {\n\t\thasError: false,\n\t};\n\n\tpublic static getDerivedStateFromError(): State {\n\t\t// Update state so the next render will show the fallback UI.\n\t\treturn { hasError: true };\n\t}\n\n\tpublic render() {\n\t\tif ( this.state.hasError ) {\n\t\t\treturn this.props.fallback;\n\t\t}\n\n\t\treturn this.props.children;\n\t}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACAvB,YAAuB;AACvB,IAAAC,gBAAoC;;;ACDpC,mBAAqC;AAWrC,IAAqB,gBAArB,cAA2C,uBAA0B;AAAA,EAC7D,QAAe;AAAA,IACrB,UAAU;AAAA,EACX;AAAA,EAEA,OAAc,2BAAkC;AAE/C,WAAO,EAAE,UAAU,KAAK;AAAA,EACzB;AAAA,EAEO,SAAS;AACf,QAAK,KAAK,MAAM,UAAW;AAC1B,aAAO,KAAK,MAAM;AAAA,IACnB;AAEA,WAAO,KAAK,MAAM;AAAA,EACnB;AACD;;;ADxBe,SAAR,yBAA2C,EAAE,SAAS,GAA6B;AACzF,SACC,oCAAC,iBAAc,UAAW,QACzB,oCAAC,0BAAS,UAAW,QAAS,QAAU,CACzC;AAEF;;;ADPA,IAAAC,gBAAwB;AAIxB,IAAM,mBAAmB;AAGzB,IAAM,qBAAuC,CAAC;AAEvC,SAAS,iBAAyE;AACxF,QAAM,aAAsC,oBAAI,IAAI;AAEpD,QAAM,gBAAgB,oBAAqB,UAAW;AACtD,QAAM,gBAAgB,oBAAqB,aAAc;AACzD,QAAM,OAAO,WAAY,aAAc;AACvC,QAAM,SAAS,aAAc,UAAW;AAGxC,qBAAmB,KAAM,MAAM,WAAW,MAAM,CAAE;AAElD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;AAEO,SAAS,qBAAqB;AACpC,qBAAmB,QAAS,CAAE,UAAW,MAAM,CAAE;AAClD;AAEA,SAAS,sBAA2DC,YAAyC;AAC5G,SAAO,CAAE,UACR,qCAAC,gCACA,qCAACA,YAAA,EAAY,GAAG,OAAQ,CACzB;AAEF;AAEA,SAAS,WAAgD,eAAuD;AAC/G,SAAO,CAAE,UAAmB;AAC3B,UAAM,aAAa,cAAc;AAEjC,WACC,4DACG,WAAW,IAAK,CAAE,EAAE,IAAI,WAAWA,WAAU,MAC9C,qCAACA,YAAA,EAAY,GAAG,OAAQ,KAAM,IAAK,CAClC,CACH;AAAA,EAEF;AACD;AAEA,SAAS,oBAAyD,YAAsC;AACvG,SAAO,MAAM,CAAE,GAAG,WAAW,OAAO,CAAE,EAAE,KAAM,CAAE,GAAG,MAAO,EAAE,WAAW,EAAE,QAAS;AACnF;AAEA,SAAS,aAAkD,YAAsC;AAChG,SAAO,CAAE,EAAE,WAAW,IAAI,UAAU,CAAC,EAAE,MAA6B;AACnE,QAAK,WAAW,IAAK,EAAG,KAAK,CAAE,SAAS,WAAY;AAEnD,cAAQ;AAAA,QACP,6BAA8B,EAAG;AAAA,MAClC;AAEA;AAAA,IACD;AAEA,eAAW,IAAK,IAAI;AAAA,MACnB;AAAA,MACA,WAAW,sBAAuB,SAAU;AAAA,MAC5C,UAAU,QAAQ,YAAY;AAAA,IAC/B,CAAE;AAAA,EACH;AACD;AAEA,SAAS,oBACR,eACC;AACD,SAAO,UAAM,uBAAS,MAAM,cAAc,GAAG,CAAC,CAAE;AACjD;","names":["React","import_react","import_react","Component"]}
+{"version":3,"sources":["../src/index.ts","../src/create-location.tsx","../src/injections.tsx","../src/components/injected-component-wrapper.tsx","../src/components/error-boundary.tsx","../src/create-replaceable-location.tsx"],"sourcesContent":["export * from './types';\n\nexport { createLocation } from './create-location';\nexport { createReplaceableLocation } from './create-replaceable-location';\nexport { flushAllInjections as __flushAllInjections } from './injections';\n","import * as React from 'react';\n\nimport {\n\tcreateGetInjections,\n\tcreateUseInjections,\n\tDEFAULT_PRIORITY,\n\tflushInjectionsFns,\n\twrapInjectedComponent,\n} from './injections';\nimport { type AnyProps, type Id, type InjectArgs, type Injection, type Location } from './types';\n\ntype InjectionsMap< TProps extends object = AnyProps > = Map< Id, Injection< TProps > >;\n\nexport function createLocation< TProps extends object = AnyProps >(): Location< TProps > {\n\tconst injections: InjectionsMap< TProps > = new Map();\n\n\tconst getInjections = createGetInjections( injections );\n\tconst useInjections = createUseInjections( getInjections );\n\tconst Slot = createSlot( useInjections );\n\tconst inject = createInject( injections );\n\n\t// Push the clear function to the flushInjectionsFns array, so we can flush all injections at once.\n\tflushInjectionsFns.push( () => injections.clear() );\n\n\treturn {\n\t\tinject,\n\t\tgetInjections,\n\t\tuseInjections,\n\t\tSlot,\n\t};\n}\n\nfunction createSlot< TProps extends object = AnyProps >( useInjections: Location< TProps >[ 'useInjections' ] ) {\n\treturn ( props: TProps ) => {\n\t\tconst injections = useInjections();\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ injections.map( ( { id, component: Component } ) => (\n\t\t\t\t\t<Component { ...props } key={ id } />\n\t\t\t\t) ) }\n\t\t\t</>\n\t\t);\n\t};\n}\n\nfunction createInject< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {\n\treturn ( { component, id, options = {} }: InjectArgs< TProps > ) => {\n\t\tif ( injections.has( id ) && ! options?.overwrite ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`An injection with the id \"${ id }\" already exists. Did you mean to use \"options.overwrite\"?`\n\t\t\t);\n\n\t\t\treturn;\n\t\t}\n\n\t\tinjections.set( id, {\n\t\t\tid,\n\t\t\tcomponent: wrapInjectedComponent( component ),\n\t\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t\t} );\n\t};\n}\n","import * as React from 'react';\nimport { useMemo } from 'react';\n\nimport InjectedComponentWrapper from './components/injected-component-wrapper';\nimport { type AnyProps, type Id, type InjectedComponent, type Injection, type Location } from './types';\n\ntype InjectionsMap< TProps extends object = AnyProps > = Map< Id, Injection< TProps > >;\n\nexport const DEFAULT_PRIORITY = 10;\n\n// Allow flushing all injections at once, for testing purposes.\nexport const flushInjectionsFns: ( () => void )[] = [];\n\nexport function flushAllInjections() {\n\tflushInjectionsFns.forEach( ( flush ) => flush() );\n}\n\nexport function createGetInjections< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {\n\treturn () => [ ...injections.values() ].sort( ( a, b ) => a.priority - b.priority );\n}\n\nexport function createUseInjections< TProps extends object = AnyProps >(\n\tgetInjections: Location< TProps >[ 'getInjections' ]\n) {\n\treturn () => useMemo( () => getInjections(), [] );\n}\n\nexport function wrapInjectedComponent< TProps extends object = AnyProps >( Component: InjectedComponent< TProps > ) {\n\treturn ( props: TProps ) => (\n\t\t<InjectedComponentWrapper>\n\t\t\t<Component { ...props } />\n\t\t</InjectedComponentWrapper>\n\t);\n}\n","import * as React from 'react';\nimport { type ReactNode, Suspense } from 'react';\n\nimport ErrorBoundary from './error-boundary';\n\nexport default function InjectedComponentWrapper( { children }: { children: ReactNode } ) {\n\treturn (\n\t\t<ErrorBoundary fallback={ null }>\n\t\t\t<Suspense fallback={ null }>{ children }</Suspense>\n\t\t</ErrorBoundary>\n\t);\n}\n","import { Component, type ReactNode } from 'react';\n\ninterface Props {\n\tchildren?: ReactNode;\n\tfallback: ReactNode;\n}\n\ninterface State {\n\thasError: boolean;\n}\n\nexport default class ErrorBoundary extends Component< Props, State > {\n\tpublic state: State = {\n\t\thasError: false,\n\t};\n\n\tpublic static getDerivedStateFromError(): State {\n\t\t// Update state so the next render will show the fallback UI.\n\t\treturn { hasError: true };\n\t}\n\n\tpublic render() {\n\t\tif ( this.state.hasError ) {\n\t\t\treturn this.props.fallback;\n\t\t}\n\n\t\treturn this.props.children;\n\t}\n}\n","import * as React from 'react';\nimport { type PropsWithChildren } from 'react';\n\nimport {\n\tcreateGetInjections,\n\tcreateUseInjections,\n\tDEFAULT_PRIORITY,\n\tflushInjectionsFns,\n\twrapInjectedComponent,\n} from './injections';\nimport {\n\ttype AnyProps,\n\ttype Id,\n\ttype ReplaceableInjectArgs,\n\ttype ReplaceableInjection,\n\ttype ReplaceableLocation,\n} from './types';\n\ntype ReplaceableInjectionsMap< TProps extends object = AnyProps > = Map< Id, ReplaceableInjection< TProps > >;\n\nexport function createReplaceableLocation< TProps extends object = AnyProps >(): ReplaceableLocation< TProps > {\n\tconst injections: ReplaceableInjectionsMap< TProps > = new Map();\n\n\tconst getInjections = createGetInjections( injections );\n\tconst useInjections = createUseInjections( getInjections );\n\tconst Slot = createReplaceable( useInjections );\n\tconst inject = createRegister( injections );\n\n\t// Push the clear function to the flushInjectionsFns array, so we can flush all injections at once.\n\tflushInjectionsFns.push( () => injections.clear() );\n\n\treturn {\n\t\tgetInjections,\n\t\tuseInjections,\n\t\tinject,\n\t\tSlot,\n\t};\n}\n\nfunction createReplaceable< TProps extends PropsWithChildren< object > = AnyProps >(\n\tuseInjections: ReplaceableLocation< TProps >[ 'useInjections' ]\n) {\n\treturn ( props: TProps ) => {\n\t\tconst injections = useInjections();\n\n\t\tconst { component: Component } = injections.find( ( { condition } ) => condition?.( props ) ) ?? {};\n\n\t\tif ( ! Component ) {\n\t\t\treturn props.children;\n\t\t}\n\n\t\treturn <Component { ...props } />;\n\t};\n}\n\nfunction createRegister< TProps extends object = AnyProps >( injections: ReplaceableInjectionsMap< TProps > ) {\n\treturn ( { component, id, condition = () => true, options = {} }: ReplaceableInjectArgs< TProps > ) => {\n\t\tinjections.set( id, {\n\t\t\tid,\n\t\t\tcomponent: wrapInjectedComponent( component ),\n\t\t\tcondition,\n\t\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t\t} );\n\t};\n}\n"],"mappings":"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","names":["React","React","import_react","import_react","Component","Component","React","Component"]}

package/dist/index.mjs

@@ -1,5 +1,9 @@
-// src/api.tsx
+// src/create-location.tsx
+import * as React3 from "react";
+
+// src/injections.tsx
 import * as React2 from "react";
+import { useMemo } from "react";
 
 // src/components/injected-component-wrapper.tsx
 import * as React from "react";
@@ -27,10 +31,23 @@ function InjectedComponentWrapper({ children }) {
   return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React.createElement(Suspense, { fallback: null }, children));
 }
 
-// src/api.tsx
-import { useMemo } from "react";
+// src/injections.tsx
 var DEFAULT_PRIORITY = 10;
 var flushInjectionsFns = [];
+function flushAllInjections() {
+  flushInjectionsFns.forEach((flush) => flush());
+}
+function createGetInjections(injections) {
+  return () => [...injections.values()].sort((a, b) => a.priority - b.priority);
+}
+function createUseInjections(getInjections) {
+  return () => useMemo(() => getInjections(), []);
+}
+function wrapInjectedComponent(Component2) {
+  return (props) => /* @__PURE__ */ React2.createElement(InjectedComponentWrapper, null, /* @__PURE__ */ React2.createElement(Component2, { ...props }));
+}
+
+// src/create-location.tsx
 function createLocation() {
   const injections = /* @__PURE__ */ new Map();
   const getInjections = createGetInjections(injections);
@@ -45,21 +62,12 @@ function createLocation() {
     Slot
   };
 }
-function flushAllInjections() {
-  flushInjectionsFns.forEach((flush) => flush());
-}
-function wrapInjectedComponent(Component2) {
-  return (props) => /* @__PURE__ */ React2.createElement(InjectedComponentWrapper, null, /* @__PURE__ */ React2.createElement(Component2, { ...props }));
-}
 function createSlot(useInjections) {
   return (props) => {
     const injections = useInjections();
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, injections.map(({ id, component: Component2 }) => /* @__PURE__ */ React2.createElement(Component2, { ...props, key: id })));
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, injections.map(({ id, component: Component2 }) => /* @__PURE__ */ React3.createElement(Component2, { ...props, key: id })));
   };
 }
-function createGetInjections(injections) {
-  return () => [...injections.values()].sort((a, b) => a.priority - b.priority);
-}
 function createInject(injections) {
   return ({ component, id, options = {} }) => {
     if (injections.has(id) && !options?.overwrite) {
@@ -75,11 +83,46 @@ function createInject(injections) {
     });
   };
 }
-function createUseInjections(getInjections) {
-  return () => useMemo(() => getInjections(), []);
+
+// src/create-replaceable-location.tsx
+import * as React4 from "react";
+function createReplaceableLocation() {
+  const injections = /* @__PURE__ */ new Map();
+  const getInjections = createGetInjections(injections);
+  const useInjections = createUseInjections(getInjections);
+  const Slot = createReplaceable(useInjections);
+  const inject = createRegister(injections);
+  flushInjectionsFns.push(() => injections.clear());
+  return {
+    getInjections,
+    useInjections,
+    inject,
+    Slot
+  };
+}
+function createReplaceable(useInjections) {
+  return (props) => {
+    const injections = useInjections();
+    const { component: Component2 } = injections.find(({ condition }) => condition?.(props)) ?? {};
+    if (!Component2) {
+      return props.children;
+    }
+    return /* @__PURE__ */ React4.createElement(Component2, { ...props });
+  };
+}
+function createRegister(injections) {
+  return ({ component, id, condition = () => true, options = {} }) => {
+    injections.set(id, {
+      id,
+      component: wrapInjectedComponent(component),
+      condition,
+      priority: options.priority ?? DEFAULT_PRIORITY
+    });
+  };
 }
 export {
   flushAllInjections as __flushAllInjections,
-  createLocation
+  createLocation,
+  createReplaceableLocation
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/api.tsx","../src/components/injected-component-wrapper.tsx","../src/components/error-boundary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { InjectedComponent, Injection, InjectArgs, AnyProps, Location, Id } from './types';\nimport InjectedComponentWrapper from './components/injected-component-wrapper';\nimport { useMemo } from 'react';\n\ntype InjectionsMap< TProps extends object = AnyProps > = Map< Id, Injection< TProps > >;\n\nconst DEFAULT_PRIORITY = 10;\n\n// Allow flushing all injections at once, for testing purposes.\nconst flushInjectionsFns: ( () => void )[] = [];\n\nexport function createLocation< TProps extends object = AnyProps >(): Location< TProps > {\n\tconst injections: InjectionsMap< TProps > = new Map();\n\n\tconst getInjections = createGetInjections( injections );\n\tconst useInjections = createUseInjections( getInjections );\n\tconst Slot = createSlot( useInjections );\n\tconst inject = createInject( injections );\n\n\t// Push the clear function to the flushInjectionsFns array, so we can flush all injections at once.\n\tflushInjectionsFns.push( () => injections.clear() );\n\n\treturn {\n\t\tinject,\n\t\tgetInjections,\n\t\tuseInjections,\n\t\tSlot,\n\t};\n}\n\nexport function flushAllInjections() {\n\tflushInjectionsFns.forEach( ( flush ) => flush() );\n}\n\nfunction wrapInjectedComponent< TProps extends object = AnyProps >( Component: InjectedComponent< TProps > ) {\n\treturn ( props: TProps ) => (\n\t\t<InjectedComponentWrapper>\n\t\t\t<Component { ...props } />\n\t\t</InjectedComponentWrapper>\n\t);\n}\n\nfunction createSlot< TProps extends object = AnyProps >( useInjections: Location< TProps >[ 'useInjections' ] ) {\n\treturn ( props: TProps ) => {\n\t\tconst injections = useInjections();\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ injections.map( ( { id, component: Component } ) => (\n\t\t\t\t\t<Component { ...props } key={ id } />\n\t\t\t\t) ) }\n\t\t\t</>\n\t\t);\n\t};\n}\n\nfunction createGetInjections< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {\n\treturn () => [ ...injections.values() ].sort( ( a, b ) => a.priority - b.priority );\n}\n\nfunction createInject< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {\n\treturn ( { component, id, options = {} }: InjectArgs< TProps > ) => {\n\t\tif ( injections.has( id ) && ! options?.overwrite ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`An injection with the id \"${ id }\" already exists. Did you mean to use \"options.overwrite\"?`\n\t\t\t);\n\n\t\t\treturn;\n\t\t}\n\n\t\tinjections.set( id, {\n\t\t\tid,\n\t\t\tcomponent: wrapInjectedComponent( component ),\n\t\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t\t} );\n\t};\n}\n\nfunction createUseInjections< TProps extends object = AnyProps >(\n\tgetInjections: Location< TProps >[ 'getInjections' ]\n) {\n\treturn () => useMemo( () => getInjections(), [] );\n}\n","import * as React from 'react';\nimport { ReactNode, Suspense } from 'react';\nimport ErrorBoundary from './error-boundary';\n\nexport default function InjectedComponentWrapper( { children }: { children: ReactNode } ) {\n\treturn (\n\t\t<ErrorBoundary fallback={ null }>\n\t\t\t<Suspense fallback={ null }>{ children }</Suspense>\n\t\t</ErrorBoundary>\n\t);\n}\n","import { Component, ReactNode } from 'react';\n\ninterface Props {\n\tchildren?: ReactNode;\n\tfallback: ReactNode;\n}\n\ninterface State {\n\thasError: boolean;\n}\n\nexport default class ErrorBoundary extends Component< Props, State > {\n\tpublic state: State = {\n\t\thasError: false,\n\t};\n\n\tpublic static getDerivedStateFromError(): State {\n\t\t// Update state so the next render will show the fallback UI.\n\t\treturn { hasError: true };\n\t}\n\n\tpublic render() {\n\t\tif ( this.state.hasError ) {\n\t\t\treturn this.props.fallback;\n\t\t}\n\n\t\treturn this.props.children;\n\t}\n}\n"],"mappings":";AAAA,YAAYA,YAAW;;;ACAvB,YAAY,WAAW;AACvB,SAAoB,gBAAgB;;;ACDpC,SAAS,iBAA4B;AAWrC,IAAqB,gBAArB,cAA2C,UAA0B;AAAA,EAC7D,QAAe;AAAA,IACrB,UAAU;AAAA,EACX;AAAA,EAEA,OAAc,2BAAkC;AAE/C,WAAO,EAAE,UAAU,KAAK;AAAA,EACzB;AAAA,EAEO,SAAS;AACf,QAAK,KAAK,MAAM,UAAW;AAC1B,aAAO,KAAK,MAAM;AAAA,IACnB;AAEA,WAAO,KAAK,MAAM;AAAA,EACnB;AACD;;;ADxBe,SAAR,yBAA2C,EAAE,SAAS,GAA6B;AACzF,SACC,oCAAC,iBAAc,UAAW,QACzB,oCAAC,YAAS,UAAW,QAAS,QAAU,CACzC;AAEF;;;ADPA,SAAS,eAAe;AAIxB,IAAM,mBAAmB;AAGzB,IAAM,qBAAuC,CAAC;AAEvC,SAAS,iBAAyE;AACxF,QAAM,aAAsC,oBAAI,IAAI;AAEpD,QAAM,gBAAgB,oBAAqB,UAAW;AACtD,QAAM,gBAAgB,oBAAqB,aAAc;AACzD,QAAM,OAAO,WAAY,aAAc;AACvC,QAAM,SAAS,aAAc,UAAW;AAGxC,qBAAmB,KAAM,MAAM,WAAW,MAAM,CAAE;AAElD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;AAEO,SAAS,qBAAqB;AACpC,qBAAmB,QAAS,CAAE,UAAW,MAAM,CAAE;AAClD;AAEA,SAAS,sBAA2DC,YAAyC;AAC5G,SAAO,CAAE,UACR,qCAAC,gCACA,qCAACA,YAAA,EAAY,GAAG,OAAQ,CACzB;AAEF;AAEA,SAAS,WAAgD,eAAuD;AAC/G,SAAO,CAAE,UAAmB;AAC3B,UAAM,aAAa,cAAc;AAEjC,WACC,4DACG,WAAW,IAAK,CAAE,EAAE,IAAI,WAAWA,WAAU,MAC9C,qCAACA,YAAA,EAAY,GAAG,OAAQ,KAAM,IAAK,CAClC,CACH;AAAA,EAEF;AACD;AAEA,SAAS,oBAAyD,YAAsC;AACvG,SAAO,MAAM,CAAE,GAAG,WAAW,OAAO,CAAE,EAAE,KAAM,CAAE,GAAG,MAAO,EAAE,WAAW,EAAE,QAAS;AACnF;AAEA,SAAS,aAAkD,YAAsC;AAChG,SAAO,CAAE,EAAE,WAAW,IAAI,UAAU,CAAC,EAAE,MAA6B;AACnE,QAAK,WAAW,IAAK,EAAG,KAAK,CAAE,SAAS,WAAY;AAEnD,cAAQ;AAAA,QACP,6BAA8B,EAAG;AAAA,MAClC;AAEA;AAAA,IACD;AAEA,eAAW,IAAK,IAAI;AAAA,MACnB;AAAA,MACA,WAAW,sBAAuB,SAAU;AAAA,MAC5C,UAAU,QAAQ,YAAY;AAAA,IAC/B,CAAE;AAAA,EACH;AACD;AAEA,SAAS,oBACR,eACC;AACD,SAAO,MAAM,QAAS,MAAM,cAAc,GAAG,CAAC,CAAE;AACjD;","names":["React","Component"]}
+{"version":3,"sources":["../src/create-location.tsx","../src/injections.tsx","../src/components/injected-component-wrapper.tsx","../src/components/error-boundary.tsx","../src/create-replaceable-location.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n\tcreateGetInjections,\n\tcreateUseInjections,\n\tDEFAULT_PRIORITY,\n\tflushInjectionsFns,\n\twrapInjectedComponent,\n} from './injections';\nimport { type AnyProps, type Id, type InjectArgs, type Injection, type Location } from './types';\n\ntype InjectionsMap< TProps extends object = AnyProps > = Map< Id, Injection< TProps > >;\n\nexport function createLocation< TProps extends object = AnyProps >(): Location< TProps > {\n\tconst injections: InjectionsMap< TProps > = new Map();\n\n\tconst getInjections = createGetInjections( injections );\n\tconst useInjections = createUseInjections( getInjections );\n\tconst Slot = createSlot( useInjections );\n\tconst inject = createInject( injections );\n\n\t// Push the clear function to the flushInjectionsFns array, so we can flush all injections at once.\n\tflushInjectionsFns.push( () => injections.clear() );\n\n\treturn {\n\t\tinject,\n\t\tgetInjections,\n\t\tuseInjections,\n\t\tSlot,\n\t};\n}\n\nfunction createSlot< TProps extends object = AnyProps >( useInjections: Location< TProps >[ 'useInjections' ] ) {\n\treturn ( props: TProps ) => {\n\t\tconst injections = useInjections();\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ injections.map( ( { id, component: Component } ) => (\n\t\t\t\t\t<Component { ...props } key={ id } />\n\t\t\t\t) ) }\n\t\t\t</>\n\t\t);\n\t};\n}\n\nfunction createInject< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {\n\treturn ( { component, id, options = {} }: InjectArgs< TProps > ) => {\n\t\tif ( injections.has( id ) && ! options?.overwrite ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`An injection with the id \"${ id }\" already exists. Did you mean to use \"options.overwrite\"?`\n\t\t\t);\n\n\t\t\treturn;\n\t\t}\n\n\t\tinjections.set( id, {\n\t\t\tid,\n\t\t\tcomponent: wrapInjectedComponent( component ),\n\t\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t\t} );\n\t};\n}\n","import * as React from 'react';\nimport { useMemo } from 'react';\n\nimport InjectedComponentWrapper from './components/injected-component-wrapper';\nimport { type AnyProps, type Id, type InjectedComponent, type Injection, type Location } from './types';\n\ntype InjectionsMap< TProps extends object = AnyProps > = Map< Id, Injection< TProps > >;\n\nexport const DEFAULT_PRIORITY = 10;\n\n// Allow flushing all injections at once, for testing purposes.\nexport const flushInjectionsFns: ( () => void )[] = [];\n\nexport function flushAllInjections() {\n\tflushInjectionsFns.forEach( ( flush ) => flush() );\n}\n\nexport function createGetInjections< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {\n\treturn () => [ ...injections.values() ].sort( ( a, b ) => a.priority - b.priority );\n}\n\nexport function createUseInjections< TProps extends object = AnyProps >(\n\tgetInjections: Location< TProps >[ 'getInjections' ]\n) {\n\treturn () => useMemo( () => getInjections(), [] );\n}\n\nexport function wrapInjectedComponent< TProps extends object = AnyProps >( Component: InjectedComponent< TProps > ) {\n\treturn ( props: TProps ) => (\n\t\t<InjectedComponentWrapper>\n\t\t\t<Component { ...props } />\n\t\t</InjectedComponentWrapper>\n\t);\n}\n","import * as React from 'react';\nimport { type ReactNode, Suspense } from 'react';\n\nimport ErrorBoundary from './error-boundary';\n\nexport default function InjectedComponentWrapper( { children }: { children: ReactNode } ) {\n\treturn (\n\t\t<ErrorBoundary fallback={ null }>\n\t\t\t<Suspense fallback={ null }>{ children }</Suspense>\n\t\t</ErrorBoundary>\n\t);\n}\n","import { Component, type ReactNode } from 'react';\n\ninterface Props {\n\tchildren?: ReactNode;\n\tfallback: ReactNode;\n}\n\ninterface State {\n\thasError: boolean;\n}\n\nexport default class ErrorBoundary extends Component< Props, State > {\n\tpublic state: State = {\n\t\thasError: false,\n\t};\n\n\tpublic static getDerivedStateFromError(): State {\n\t\t// Update state so the next render will show the fallback UI.\n\t\treturn { hasError: true };\n\t}\n\n\tpublic render() {\n\t\tif ( this.state.hasError ) {\n\t\t\treturn this.props.fallback;\n\t\t}\n\n\t\treturn this.props.children;\n\t}\n}\n","import * as React from 'react';\nimport { type PropsWithChildren } from 'react';\n\nimport {\n\tcreateGetInjections,\n\tcreateUseInjections,\n\tDEFAULT_PRIORITY,\n\tflushInjectionsFns,\n\twrapInjectedComponent,\n} from './injections';\nimport {\n\ttype AnyProps,\n\ttype Id,\n\ttype ReplaceableInjectArgs,\n\ttype ReplaceableInjection,\n\ttype ReplaceableLocation,\n} from './types';\n\ntype ReplaceableInjectionsMap< TProps extends object = AnyProps > = Map< Id, ReplaceableInjection< TProps > >;\n\nexport function createReplaceableLocation< TProps extends object = AnyProps >(): ReplaceableLocation< TProps > {\n\tconst injections: ReplaceableInjectionsMap< TProps > = new Map();\n\n\tconst getInjections = createGetInjections( injections );\n\tconst useInjections = createUseInjections( getInjections );\n\tconst Slot = createReplaceable( useInjections );\n\tconst inject = createRegister( injections );\n\n\t// Push the clear function to the flushInjectionsFns array, so we can flush all injections at once.\n\tflushInjectionsFns.push( () => injections.clear() );\n\n\treturn {\n\t\tgetInjections,\n\t\tuseInjections,\n\t\tinject,\n\t\tSlot,\n\t};\n}\n\nfunction createReplaceable< TProps extends PropsWithChildren< object > = AnyProps >(\n\tuseInjections: ReplaceableLocation< TProps >[ 'useInjections' ]\n) {\n\treturn ( props: TProps ) => {\n\t\tconst injections = useInjections();\n\n\t\tconst { component: Component } = injections.find( ( { condition } ) => condition?.( props ) ) ?? {};\n\n\t\tif ( ! Component ) {\n\t\t\treturn props.children;\n\t\t}\n\n\t\treturn <Component { ...props } />;\n\t};\n}\n\nfunction createRegister< TProps extends object = AnyProps >( injections: ReplaceableInjectionsMap< TProps > ) {\n\treturn ( { component, id, condition = () => true, options = {} }: ReplaceableInjectArgs< TProps > ) => {\n\t\tinjections.set( id, {\n\t\t\tid,\n\t\t\tcomponent: wrapInjectedComponent( component ),\n\t\t\tcondition,\n\t\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t\t} );\n\t};\n}\n"],"mappings":"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","names":["React","React","Component","Component","React","Component"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/locations",
   "description": "Create & manage pluggable React applications",
-  "version": "0.7.6",
+  "version": "0.8.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,5 +41,8 @@
   },
   "peerDependencies": {
     "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5"
   }
 }

package/src/components/error-boundary.tsx

@@ -1,4 +1,4 @@
-import { Component, ReactNode } from 'react';
+import { Component, type ReactNode } from 'react';
 
 interface Props {
 	children?: ReactNode;

package/src/components/injected-component-wrapper.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ReactNode, Suspense } from 'react';
+import { type ReactNode, Suspense } from 'react';
+
 import ErrorBoundary from './error-boundary';
 
 export default function InjectedComponentWrapper( { children }: { children: ReactNode } ) {

package/src/{api.tsx → create-location.tsx}

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { InjectedComponent, Injection, InjectArgs, AnyProps, Location, Id } from './types';
-import InjectedComponentWrapper from './components/injected-component-wrapper';
-import { useMemo } from 'react';
 
-type InjectionsMap< TProps extends object = AnyProps > = Map< Id, Injection< TProps > >;
-
-const DEFAULT_PRIORITY = 10;
+import {
+	createGetInjections,
+	createUseInjections,
+	DEFAULT_PRIORITY,
+	flushInjectionsFns,
+	wrapInjectedComponent,
+} from './injections';
+import { type AnyProps, type Id, type InjectArgs, type Injection, type Location } from './types';
 
-// Allow flushing all injections at once, for testing purposes.
-const flushInjectionsFns: ( () => void )[] = [];
+type InjectionsMap< TProps extends object = AnyProps > = Map< Id, Injection< TProps > >;
 
 export function createLocation< TProps extends object = AnyProps >(): Location< TProps > {
 	const injections: InjectionsMap< TProps > = new Map();
@@ -29,18 +30,6 @@ export function createLocation< TProps extends object = AnyProps >(): Location<
 	};
 }
 
-export function flushAllInjections() {
-	flushInjectionsFns.forEach( ( flush ) => flush() );
-}
-
-function wrapInjectedComponent< TProps extends object = AnyProps >( Component: InjectedComponent< TProps > ) {
-	return ( props: TProps ) => (
-		<InjectedComponentWrapper>
-			<Component { ...props } />
-		</InjectedComponentWrapper>
-	);
-}
-
 function createSlot< TProps extends object = AnyProps >( useInjections: Location< TProps >[ 'useInjections' ] ) {
 	return ( props: TProps ) => {
 		const injections = useInjections();
@@ -55,10 +44,6 @@ function createSlot< TProps extends object = AnyProps >( useInjections: Location
 	};
 }
 
-function createGetInjections< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {
-	return () => [ ...injections.values() ].sort( ( a, b ) => a.priority - b.priority );
-}
-
 function createInject< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {
 	return ( { component, id, options = {} }: InjectArgs< TProps > ) => {
 		if ( injections.has( id ) && ! options?.overwrite ) {
@@ -77,9 +62,3 @@ function createInject< TProps extends object = AnyProps >( injections: Injection
 		} );
 	};
 }
-
-function createUseInjections< TProps extends object = AnyProps >(
-	getInjections: Location< TProps >[ 'getInjections' ]
-) {
-	return () => useMemo( () => getInjections(), [] );
-}

package/src/create-replaceable-location.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { type PropsWithChildren } from 'react';
+
+import {
+	createGetInjections,
+	createUseInjections,
+	DEFAULT_PRIORITY,
+	flushInjectionsFns,
+	wrapInjectedComponent,
+} from './injections';
+import {
+	type AnyProps,
+	type Id,
+	type ReplaceableInjectArgs,
+	type ReplaceableInjection,
+	type ReplaceableLocation,
+} from './types';
+
+type ReplaceableInjectionsMap< TProps extends object = AnyProps > = Map< Id, ReplaceableInjection< TProps > >;
+
+export function createReplaceableLocation< TProps extends object = AnyProps >(): ReplaceableLocation< TProps > {
+	const injections: ReplaceableInjectionsMap< TProps > = new Map();
+
+	const getInjections = createGetInjections( injections );
+	const useInjections = createUseInjections( getInjections );
+	const Slot = createReplaceable( useInjections );
+	const inject = createRegister( injections );
+
+	// Push the clear function to the flushInjectionsFns array, so we can flush all injections at once.
+	flushInjectionsFns.push( () => injections.clear() );
+
+	return {
+		getInjections,
+		useInjections,
+		inject,
+		Slot,
+	};
+}
+
+function createReplaceable< TProps extends PropsWithChildren< object > = AnyProps >(
+	useInjections: ReplaceableLocation< TProps >[ 'useInjections' ]
+) {
+	return ( props: TProps ) => {
+		const injections = useInjections();
+
+		const { component: Component } = injections.find( ( { condition } ) => condition?.( props ) ) ?? {};
+
+		if ( ! Component ) {
+			return props.children;
+		}
+
+		return <Component { ...props } />;
+	};
+}
+
+function createRegister< TProps extends object = AnyProps >( injections: ReplaceableInjectionsMap< TProps > ) {
+	return ( { component, id, condition = () => true, options = {} }: ReplaceableInjectArgs< TProps > ) => {
+		injections.set( id, {
+			id,
+			component: wrapInjectedComponent( component ),
+			condition,
+			priority: options.priority ?? DEFAULT_PRIORITY,
+		} );
+	};
+}

package/src/index.ts

@@ -1,3 +1,5 @@
 export * from './types';
 
-export { createLocation, flushAllInjections as __flushAllInjections } from './api';
+export { createLocation } from './create-location';
+export { createReplaceableLocation } from './create-replaceable-location';
+export { flushAllInjections as __flushAllInjections } from './injections';

package/src/injections.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+
+import InjectedComponentWrapper from './components/injected-component-wrapper';
+import { type AnyProps, type Id, type InjectedComponent, type Injection, type Location } from './types';
+
+type InjectionsMap< TProps extends object = AnyProps > = Map< Id, Injection< TProps > >;
+
+export const DEFAULT_PRIORITY = 10;
+
+// Allow flushing all injections at once, for testing purposes.
+export const flushInjectionsFns: ( () => void )[] = [];
+
+export function flushAllInjections() {
+	flushInjectionsFns.forEach( ( flush ) => flush() );
+}
+
+export function createGetInjections< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {
+	return () => [ ...injections.values() ].sort( ( a, b ) => a.priority - b.priority );
+}
+
+export function createUseInjections< TProps extends object = AnyProps >(
+	getInjections: Location< TProps >[ 'getInjections' ]
+) {
+	return () => useMemo( () => getInjections(), [] );
+}
+
+export function wrapInjectedComponent< TProps extends object = AnyProps >( Component: InjectedComponent< TProps > ) {
+	return ( props: TProps ) => (
+		<InjectedComponentWrapper>
+			<Component { ...props } />
+		</InjectedComponentWrapper>
+	);
+}

package/src/types.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from 'react';
+import { type ComponentType, type PropsWithChildren } from 'react';
 
 // Allow passing the `key` prop even when there are no props for the component
 export type AnyProps = object;
@@ -22,6 +22,13 @@ export type Injection< TProps extends object = AnyProps > = {
 	priority: Priority;
 };
 
+export type ReplaceableInjection< TProps extends object = AnyProps > = Injection< TProps > & {
+	/**
+	 * A function that returns a boolean indicating whether the injection should be applied or not.
+	 */
+	condition?: ( props: TProps ) => boolean;
+};
+
 export type InjectArgs< TProps extends object = AnyProps > = {
 	/**
 	 * A unique id (per location) of the component to be injected.
@@ -44,6 +51,23 @@ export type InjectArgs< TProps extends object = AnyProps > = {
 	};
 };
 
+export type ReplaceableInjectArgs< TProps extends object = AnyProps > = Pick<
+	InjectArgs< TProps >,
+	'id' | 'component'
+> & {
+	/**
+	 * A function that returns a boolean indicating whether the injection should be applied or not.
+	 */
+	condition?: ( props: TProps ) => boolean;
+
+	options?: {
+		/**
+		 * Priority of the injected component inside the location. Lower value means higher priority.
+		 */
+		priority?: Priority;
+	};
+};
+
 export type Location< TProps extends object = AnyProps > = {
 	/**
 	 * Inject a component into the location.
@@ -57,3 +81,17 @@ export type Location< TProps extends object = AnyProps > = {
 	useInjections: () => Injection< TProps >[];
 	Slot: ComponentType< TProps >;
 };
+
+export type ReplaceableLocation< TProps extends object = AnyProps > = {
+	/**
+	 * Register a component into the location.
+	 */
+	inject: ( args: ReplaceableInjectArgs< TProps > ) => void;
+	/**
+	 *
+	 * @return All the injections in the location.
+	 */
+	getInjections: () => ReplaceableInjection< TProps >[];
+	useInjections: () => ReplaceableInjection< TProps >[];
+	Slot: ComponentType< PropsWithChildren< TProps > >;
+};