@elementor/locations 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.3.0 (2023-05-21)
+
+
+### Features
+
+* **locations:** change api to support props for slots [ED-10730] ([#38](https://github.com/elementor/elementor-packages/issues/38)) ([44bec3c](https://github.com/elementor/elementor-packages/commit/44bec3cda1020037ba7105c6f05ce4baa8e3b376))
+
+
+
+# 0.2.0 (2023-05-09)

package/dist/index.d.ts

@@ -1,38 +1,30 @@
 import { ComponentType } from 'react';
 
-type Location = string;
-type Filler = ComponentType;
-type Name = string;
+type EmptyObject = Record<string, never>;
+type Filler<TProps extends object = EmptyObject> = ComponentType<TProps>;
 type Id = string;
 type Priority = number;
-type InjectionOptions = {
-    priority?: Priority;
-    overwrite?: boolean;
-};
-type Injection = {
-    location: Location;
-    filler: Filler;
+type Injection<TProps extends object = EmptyObject> = {
+    id: Id;
+    filler: Filler<TProps>;
     priority: Priority;
+};
+type InjectArgs<TProps extends object = EmptyObject> = {
     id: Id;
+    filler: Filler<TProps>;
+    options?: {
+        priority?: Priority;
+        overwrite?: boolean;
+    };
 };
-
-type InjectArgs = {
-    location: Location;
-    filler: Filler;
-    name: Name;
-    options?: InjectionOptions;
+type Location<TProps extends object = EmptyObject> = {
+    inject: (args: InjectArgs<TProps>) => void;
+    getInjections: () => Injection<TProps>[];
+    useInjections: () => Injection<TProps>[];
+    Slot: ComponentType<TProps>;
 };
-declare function inject({ location, filler, name, options }: InjectArgs): void;
-declare function createInjectorFor(location: Location): ({ filler, name, options }: Omit<InjectArgs, 'location'>) => void;
-declare function getInjectionsOf(location: string): Injection[];
-declare function flushInjections(): void;
-
-declare function useInjectionsOf(locations: string[]): Injection[][];
-declare function useInjectionsOf(location: string): Injection[];
 
-type Props = {
-    location: Location;
-};
-declare function Slot({ location }: Props): JSX.Element;
+declare function createLocation<TProps extends object = EmptyObject>(): Location<TProps>;
+declare function flushAllInjections(): void;
 
-export { Filler, Id, Injection, InjectionOptions, Location, Name, Priority, Slot, createInjectorFor, flushInjections, getInjectionsOf, inject, useInjectionsOf };
+export { EmptyObject, Filler, Id, InjectArgs, Injection, Location, Priority, createLocation, flushAllInjections };

package/dist/index.js

@@ -30,16 +30,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  Slot: () => Slot,
-  createInjectorFor: () => createInjectorFor,
-  flushInjections: () => flushInjections,
-  getInjectionsOf: () => getInjectionsOf,
-  inject: () => inject,
-  useInjectionsOf: () => useInjectionsOf
+  createLocation: () => createLocation,
+  flushAllInjections: () => flushAllInjections
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/injections.tsx
+// src/locations.tsx
 var React2 = __toESM(require("react"));
 
 // src/components/filler-wrapper.tsx
@@ -68,70 +64,60 @@ function FillerWrapper({ children }) {
   return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React.createElement(import_react2.Suspense, { fallback: null }, children));
 }
 
-// src/injections.tsx
+// src/locations.tsx
+var import_react3 = require("react");
 var DEFAULT_PRIORITY = 10;
-var injections = /* @__PURE__ */ new Map();
-function inject({ location, filler, name, options = {} }) {
-  const id = generateId(location, name);
-  if (injections.has(id) && !options?.overwrite) {
-    console.error(
-      `An injection named "${name}" under location "${location}" already exists. Did you mean to use "options.overwrite"?`
-    );
-    return;
-  }
-  const injection = {
-    id,
-    location,
-    filler: wrapFiller(filler),
-    priority: options.priority ?? DEFAULT_PRIORITY
-  };
-  injections.set(id, injection);
-}
-function createInjectorFor(location) {
-  return ({ filler, name, options }) => {
-    return inject({ location, name, filler, options });
+var flushInjectionsFns = [];
+function createLocation() {
+  const injections = /* @__PURE__ */ new Map();
+  const getInjections = createGetInjections(injections);
+  const useInjections = createUseInjections(getInjections);
+  const Slot = createSlot(useInjections);
+  const inject = createInject(injections);
+  flushInjectionsFns.push(() => injections.clear());
+  return {
+    inject,
+    getInjections,
+    useInjections,
+    Slot
   };
 }
-function getInjectionsOf(location) {
-  return [...injections.values()].filter((injection) => injection.location === location).sort((a, b) => a.priority - b.priority);
-}
-function flushInjections() {
-  injections.clear();
+function flushAllInjections() {
+  flushInjectionsFns.forEach((flush) => flush());
 }
 function wrapFiller(FillerComponent) {
   return (props) => /* @__PURE__ */ React2.createElement(FillerWrapper, null, /* @__PURE__ */ React2.createElement(FillerComponent, { ...props }));
 }
-function generateId(location, name) {
-  return `${location}::${name}`;
+function createSlot(useInjections) {
+  return (props) => {
+    const injections = useInjections();
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, injections.map(({ id, filler: Component2 }) => /* @__PURE__ */ React2.createElement(Component2, { ...props, key: id })));
+  };
+}
+function createGetInjections(injections) {
+  return () => [...injections.values()].sort((a, b) => a.priority - b.priority);
 }
-
-// src/hooks/use-injections-of.ts
-var import_react3 = require("react");
-function useInjectionsOf(locations) {
-  return (0, import_react3.useMemo)(
-    () => {
-      if (Array.isArray(locations)) {
-        return locations.map((location) => getInjectionsOf(location));
-      }
-      return getInjectionsOf(locations);
-    },
-    [locations]
-  );
+function createInject(injections) {
+  return ({ filler, id, options = {} }) => {
+    if (injections.has(id) && !options?.overwrite) {
+      console.error(
+        `An injection with the id "${id}" already exists. Did you mean to use "options.overwrite"?`
+      );
+      return;
+    }
+    injections.set(id, {
+      id,
+      filler: wrapFiller(filler),
+      priority: options.priority ?? DEFAULT_PRIORITY
+    });
+  };
 }
-
-// src/components/slot.tsx
-var React3 = __toESM(require("react"));
-function Slot({ location }) {
-  const injections2 = useInjectionsOf(location);
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, injections2.map(({ id, filler: Filler }) => /* @__PURE__ */ React3.createElement(Filler, { key: id })));
+function createUseInjections(getInjections) {
+  return () => (0, import_react3.useMemo)(() => getInjections(), []);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Slot,
-  createInjectorFor,
-  flushInjections,
-  getInjectionsOf,
-  inject,
-  useInjectionsOf
+  createLocation,
+  flushAllInjections
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/injections.tsx","../src/components/filler-wrapper.tsx","../src/components/error-boundary.tsx","../src/hooks/use-injections-of.ts","../src/components/slot.tsx"],"sourcesContent":["export * from './types';\nexport { inject, getInjectionsOf, flushInjections, createInjectorFor } from './injections';\nexport { default as useInjectionsOf } from './hooks/use-injections-of';\nexport { default as Slot } from './components/slot';\n","import * as React from 'react';\nimport { Location, Filler, Injection, InjectionOptions, Name, Id } from './types';\nimport FillerWrapper from './components/filler-wrapper';\n\nconst DEFAULT_PRIORITY = 10;\n\nconst injections: Map<Id, Injection> = new Map();\n\ntype InjectArgs = {\n\tlocation: Location;\n\tfiller: Filler;\n\tname: Name;\n\toptions?: InjectionOptions;\n}\n\nexport function inject( { location, filler, name, options = {} }: InjectArgs ) {\n\tconst id = generateId( location, name );\n\n\tif ( injections.has( id ) && ! options?.overwrite ) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.error(\n\t\t\t`An injection named \"${ name }\" under location \"${ location }\" already exists. Did you mean to use \"options.overwrite\"?`\n\t\t);\n\n\t\treturn;\n\t}\n\n\tconst injection = {\n\t\tid,\n\t\tlocation,\n\t\tfiller: wrapFiller( filler ),\n\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t};\n\n\tinjections.set( id, injection );\n}\n\nexport function createInjectorFor( location: Location ) {\n\treturn ( { filler, name, options }: Omit<InjectArgs, 'location'> ) => {\n\t\treturn inject( { location, name, filler, options } );\n\t};\n}\n\nexport function getInjectionsOf( location: string ) {\n\treturn [ ...injections.values() ]\n\t\t.filter( ( injection ) => injection.location === location )\n\t\t.sort( ( a, b ) => a.priority - b.priority );\n}\n\nexport function flushInjections() {\n\tinjections.clear();\n}\n\nfunction wrapFiller( FillerComponent: Filler ) {\n\treturn ( props: object ) => (\n\t\t<FillerWrapper>\n\t\t\t<FillerComponent { ...props } />\n\t\t</FillerWrapper>\n\t);\n}\n\nfunction generateId( location: Location, name: Name ) {\n\treturn `${ location }::${ name }`;\n}\n","import * as React from 'react';\nimport { ReactNode, Suspense } from 'react';\nimport ErrorBoundary from './error-boundary';\n\nexport default function FillerWrapper( { children }: { children: ReactNode } ) {\n\treturn (\n\t\t<ErrorBoundary fallback={ null }>\n\t\t\t<Suspense fallback={ null }>\n\t\t\t\t{ children }\n\t\t\t</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","import { useMemo } from 'react';\nimport { getInjectionsOf } from '../injections';\nimport { Injection } from '../types';\n\nexport default function useInjectionsOf( locations: string[] ): Injection[][];\nexport default function useInjectionsOf( location: string ): Injection[];\nexport default function useInjectionsOf( locations: string | string[] ) {\n\treturn useMemo(\n\t\t() => {\n\t\t\tif ( Array.isArray( locations ) ) {\n\t\t\t\treturn locations.map( ( location ) => getInjectionsOf( location ) );\n\t\t\t}\n\n\t\t\treturn getInjectionsOf( locations );\n\t\t},\n\t\t[ locations ]\n\t);\n}\n","import * as React from 'react';\nimport useInjectionsOf from '../hooks/use-injections-of';\nimport { Location } from '../types';\n\ntype Props = {\n\tlocation: Location\n}\n\nexport default function Slot( { location }: Props ) {\n\tconst injections = useInjectionsOf( location );\n\n\treturn (\n\t\t<>\n\t\t\t{ injections.map( ( { id, filler: Filler } ) => (\n\t\t\t\t<Filler key={ id } />\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACAvB,YAAuB;AACvB,IAAAC,gBAAoC;;;ACDpC,mBAAqC;AAWrC,IAAqB,gBAArB,cAA2C,uBAAwB;AAAA,EAC3D,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,cAAgC,EAAE,SAAS,GAA6B;AAC9E,SACC,oCAAC,iBAAc,UAAW,QACzB,oCAAC,0BAAS,UAAW,QAClB,QACH,CACD;AAEF;;;ADRA,IAAM,mBAAmB;AAEzB,IAAM,aAAiC,oBAAI,IAAI;AASxC,SAAS,OAAQ,EAAE,UAAU,QAAQ,MAAM,UAAU,CAAC,EAAE,GAAgB;AAC9E,QAAM,KAAK,WAAY,UAAU,IAAK;AAEtC,MAAK,WAAW,IAAK,EAAG,KAAK,CAAE,SAAS,WAAY;AAEnD,YAAQ;AAAA,MACP,uBAAwB,yBAA2B;AAAA,IACpD;AAEA;AAAA,EACD;AAEA,QAAM,YAAY;AAAA,IACjB;AAAA,IACA;AAAA,IACA,QAAQ,WAAY,MAAO;AAAA,IAC3B,UAAU,QAAQ,YAAY;AAAA,EAC/B;AAEA,aAAW,IAAK,IAAI,SAAU;AAC/B;AAEO,SAAS,kBAAmB,UAAqB;AACvD,SAAO,CAAE,EAAE,QAAQ,MAAM,QAAQ,MAAqC;AACrE,WAAO,OAAQ,EAAE,UAAU,MAAM,QAAQ,QAAQ,CAAE;AAAA,EACpD;AACD;AAEO,SAAS,gBAAiB,UAAmB;AACnD,SAAO,CAAE,GAAG,WAAW,OAAO,CAAE,EAC9B,OAAQ,CAAE,cAAe,UAAU,aAAa,QAAS,EACzD,KAAM,CAAE,GAAG,MAAO,EAAE,WAAW,EAAE,QAAS;AAC7C;AAEO,SAAS,kBAAkB;AACjC,aAAW,MAAM;AAClB;AAEA,SAAS,WAAY,iBAA0B;AAC9C,SAAO,CAAE,UACR,qCAAC,qBACA,qCAAC,mBAAkB,GAAG,OAAQ,CAC/B;AAEF;AAEA,SAAS,WAAY,UAAoB,MAAa;AACrD,SAAO,GAAI,aAAe;AAC3B;;;AG/DA,IAAAC,gBAAwB;AAMT,SAAR,gBAAkC,WAA+B;AACvE,aAAO;AAAA,IACN,MAAM;AACL,UAAK,MAAM,QAAS,SAAU,GAAI;AACjC,eAAO,UAAU,IAAK,CAAE,aAAc,gBAAiB,QAAS,CAAE;AAAA,MACnE;AAEA,aAAO,gBAAiB,SAAU;AAAA,IACnC;AAAA,IACA,CAAE,SAAU;AAAA,EACb;AACD;;;ACjBA,IAAAC,SAAuB;AAQR,SAAR,KAAuB,EAAE,SAAS,GAAW;AACnD,QAAMC,cAAa,gBAAiB,QAAS;AAE7C,SACC,4DACGA,YAAW,IAAK,CAAE,EAAE,IAAI,QAAQ,OAAO,MACxC,qCAAC,UAAO,KAAM,IAAK,CAClB,CACH;AAEF;","names":["React","import_react","import_react","React","injections"]}
+{"version":3,"sources":["../src/index.ts","../src/locations.tsx","../src/components/filler-wrapper.tsx","../src/components/error-boundary.tsx"],"sourcesContent":["export * from './types';\nexport { createLocation, flushAllInjections } from './locations';\n","import * as React from 'react';\nimport { Filler, Injection, InjectArgs, EmptyObject, Location, Id } from './types';\nimport FillerWrapper from './components/filler-wrapper';\nimport { useMemo } from 'react';\n\ntype InjectionsMap<TProps extends object = EmptyObject> = 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 = EmptyObject>(): 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 wrapFiller<TProps extends object = EmptyObject>( FillerComponent: Filler<TProps> ) {\n\treturn ( props: TProps ) => (\n\t\t<FillerWrapper>\n\t\t\t<FillerComponent { ...props } />\n\t\t</FillerWrapper>\n\t);\n}\n\nfunction createSlot<TProps extends object = EmptyObject>( 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, filler: 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 = EmptyObject>( injections: InjectionsMap<TProps> ) {\n\treturn () => [ ...injections.values() ]\n\t\t.sort( ( a, b ) => a.priority - b.priority );\n}\n\nfunction createInject<TProps extends object = EmptyObject>( injections: InjectionsMap<TProps> ) {\n\treturn ( { filler, 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.error(\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\tfiller: wrapFiller( filler ),\n\t\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t\t} );\n\t};\n}\n\nfunction createUseInjections<TProps extends object = EmptyObject>( getInjections: Location<TProps>[ 'getInjections' ] ) {\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 FillerWrapper( { children }: { children: ReactNode } ) {\n\treturn (\n\t\t<ErrorBoundary fallback={ null }>\n\t\t\t<Suspense fallback={ null }>\n\t\t\t\t{ children }\n\t\t\t</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,uBAAwB;AAAA,EAC3D,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,cAAgC,EAAE,SAAS,GAA6B;AAC9E,SACC,oCAAC,iBAAc,UAAW,QACzB,oCAAC,0BAAS,UAAW,QAClB,QACH,CACD;AAEF;;;ADTA,IAAAC,gBAAwB;AAIxB,IAAM,mBAAmB;AAGzB,IAAM,qBAAuC,CAAC;AAEvC,SAAS,iBAAwE;AACvF,QAAM,aAAoC,oBAAI,IAAI;AAElD,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,WAAiD,iBAAkC;AAC3F,SAAO,CAAE,UACR,qCAAC,qBACA,qCAAC,mBAAkB,GAAG,OAAQ,CAC/B;AAEF;AAEA,SAAS,WAAiD,eAAqD;AAC9G,SAAO,CAAE,UAAmB;AAC3B,UAAM,aAAa,cAAc;AAEjC,WACC,4DACG,WAAW,IAAK,CAAE,EAAE,IAAI,QAAQC,WAAU,MAC3C,qCAACA,YAAA,EAAY,GAAG,OAAQ,KAAM,IAAK,CAClC,CACH;AAAA,EAEF;AACD;AAEA,SAAS,oBAA0D,YAAoC;AACtG,SAAO,MAAM,CAAE,GAAG,WAAW,OAAO,CAAE,EACpC,KAAM,CAAE,GAAG,MAAO,EAAE,WAAW,EAAE,QAAS;AAC7C;AAEA,SAAS,aAAmD,YAAoC;AAC/F,SAAO,CAAE,EAAE,QAAQ,IAAI,UAAU,CAAC,EAAE,MAA2B;AAC9D,QAAK,WAAW,IAAK,EAAG,KAAK,CAAE,SAAS,WAAY;AAEnD,cAAQ;AAAA,QACP,6BAA8B;AAAA,MAC/B;AAEA;AAAA,IACD;AAEA,eAAW,IAAK,IAAI;AAAA,MACnB;AAAA,MACA,QAAQ,WAAY,MAAO;AAAA,MAC3B,UAAU,QAAQ,YAAY;AAAA,IAC/B,CAAE;AAAA,EACH;AACD;AAEA,SAAS,oBAA0D,eAAqD;AACvH,SAAO,UAAM,uBAAS,MAAM,cAAc,GAAG,CAAC,CAAE;AACjD;","names":["React","import_react","import_react","Component"]}

package/dist/index.mjs

@@ -1,4 +1,4 @@
-// src/injections.tsx
+// src/locations.tsx
 import * as React2 from "react";
 
 // src/components/filler-wrapper.tsx
@@ -27,69 +27,59 @@ function FillerWrapper({ children }) {
   return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React.createElement(Suspense, { fallback: null }, children));
 }
 
-// src/injections.tsx
+// src/locations.tsx
+import { useMemo } from "react";
 var DEFAULT_PRIORITY = 10;
-var injections = /* @__PURE__ */ new Map();
-function inject({ location, filler, name, options = {} }) {
-  const id = generateId(location, name);
-  if (injections.has(id) && !options?.overwrite) {
-    console.error(
-      `An injection named "${name}" under location "${location}" already exists. Did you mean to use "options.overwrite"?`
-    );
-    return;
-  }
-  const injection = {
-    id,
-    location,
-    filler: wrapFiller(filler),
-    priority: options.priority ?? DEFAULT_PRIORITY
-  };
-  injections.set(id, injection);
-}
-function createInjectorFor(location) {
-  return ({ filler, name, options }) => {
-    return inject({ location, name, filler, options });
+var flushInjectionsFns = [];
+function createLocation() {
+  const injections = /* @__PURE__ */ new Map();
+  const getInjections = createGetInjections(injections);
+  const useInjections = createUseInjections(getInjections);
+  const Slot = createSlot(useInjections);
+  const inject = createInject(injections);
+  flushInjectionsFns.push(() => injections.clear());
+  return {
+    inject,
+    getInjections,
+    useInjections,
+    Slot
   };
 }
-function getInjectionsOf(location) {
-  return [...injections.values()].filter((injection) => injection.location === location).sort((a, b) => a.priority - b.priority);
-}
-function flushInjections() {
-  injections.clear();
+function flushAllInjections() {
+  flushInjectionsFns.forEach((flush) => flush());
 }
 function wrapFiller(FillerComponent) {
   return (props) => /* @__PURE__ */ React2.createElement(FillerWrapper, null, /* @__PURE__ */ React2.createElement(FillerComponent, { ...props }));
 }
-function generateId(location, name) {
-  return `${location}::${name}`;
+function createSlot(useInjections) {
+  return (props) => {
+    const injections = useInjections();
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, injections.map(({ id, filler: Component2 }) => /* @__PURE__ */ React2.createElement(Component2, { ...props, key: id })));
+  };
+}
+function createGetInjections(injections) {
+  return () => [...injections.values()].sort((a, b) => a.priority - b.priority);
 }
-
-// src/hooks/use-injections-of.ts
-import { useMemo } from "react";
-function useInjectionsOf(locations) {
-  return useMemo(
-    () => {
-      if (Array.isArray(locations)) {
-        return locations.map((location) => getInjectionsOf(location));
-      }
-      return getInjectionsOf(locations);
-    },
-    [locations]
-  );
+function createInject(injections) {
+  return ({ filler, id, options = {} }) => {
+    if (injections.has(id) && !options?.overwrite) {
+      console.error(
+        `An injection with the id "${id}" already exists. Did you mean to use "options.overwrite"?`
+      );
+      return;
+    }
+    injections.set(id, {
+      id,
+      filler: wrapFiller(filler),
+      priority: options.priority ?? DEFAULT_PRIORITY
+    });
+  };
 }
-
-// src/components/slot.tsx
-import * as React3 from "react";
-function Slot({ location }) {
-  const injections2 = useInjectionsOf(location);
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, injections2.map(({ id, filler: Filler }) => /* @__PURE__ */ React3.createElement(Filler, { key: id })));
+function createUseInjections(getInjections) {
+  return () => useMemo(() => getInjections(), []);
 }
 export {
-  Slot,
-  createInjectorFor,
-  flushInjections,
-  getInjectionsOf,
-  inject,
-  useInjectionsOf
+  createLocation,
+  flushAllInjections
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/injections.tsx","../src/components/filler-wrapper.tsx","../src/components/error-boundary.tsx","../src/hooks/use-injections-of.ts","../src/components/slot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Location, Filler, Injection, InjectionOptions, Name, Id } from './types';\nimport FillerWrapper from './components/filler-wrapper';\n\nconst DEFAULT_PRIORITY = 10;\n\nconst injections: Map<Id, Injection> = new Map();\n\ntype InjectArgs = {\n\tlocation: Location;\n\tfiller: Filler;\n\tname: Name;\n\toptions?: InjectionOptions;\n}\n\nexport function inject( { location, filler, name, options = {} }: InjectArgs ) {\n\tconst id = generateId( location, name );\n\n\tif ( injections.has( id ) && ! options?.overwrite ) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.error(\n\t\t\t`An injection named \"${ name }\" under location \"${ location }\" already exists. Did you mean to use \"options.overwrite\"?`\n\t\t);\n\n\t\treturn;\n\t}\n\n\tconst injection = {\n\t\tid,\n\t\tlocation,\n\t\tfiller: wrapFiller( filler ),\n\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t};\n\n\tinjections.set( id, injection );\n}\n\nexport function createInjectorFor( location: Location ) {\n\treturn ( { filler, name, options }: Omit<InjectArgs, 'location'> ) => {\n\t\treturn inject( { location, name, filler, options } );\n\t};\n}\n\nexport function getInjectionsOf( location: string ) {\n\treturn [ ...injections.values() ]\n\t\t.filter( ( injection ) => injection.location === location )\n\t\t.sort( ( a, b ) => a.priority - b.priority );\n}\n\nexport function flushInjections() {\n\tinjections.clear();\n}\n\nfunction wrapFiller( FillerComponent: Filler ) {\n\treturn ( props: object ) => (\n\t\t<FillerWrapper>\n\t\t\t<FillerComponent { ...props } />\n\t\t</FillerWrapper>\n\t);\n}\n\nfunction generateId( location: Location, name: Name ) {\n\treturn `${ location }::${ name }`;\n}\n","import * as React from 'react';\nimport { ReactNode, Suspense } from 'react';\nimport ErrorBoundary from './error-boundary';\n\nexport default function FillerWrapper( { children }: { children: ReactNode } ) {\n\treturn (\n\t\t<ErrorBoundary fallback={ null }>\n\t\t\t<Suspense fallback={ null }>\n\t\t\t\t{ children }\n\t\t\t</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","import { useMemo } from 'react';\nimport { getInjectionsOf } from '../injections';\nimport { Injection } from '../types';\n\nexport default function useInjectionsOf( locations: string[] ): Injection[][];\nexport default function useInjectionsOf( location: string ): Injection[];\nexport default function useInjectionsOf( locations: string | string[] ) {\n\treturn useMemo(\n\t\t() => {\n\t\t\tif ( Array.isArray( locations ) ) {\n\t\t\t\treturn locations.map( ( location ) => getInjectionsOf( location ) );\n\t\t\t}\n\n\t\t\treturn getInjectionsOf( locations );\n\t\t},\n\t\t[ locations ]\n\t);\n}\n","import * as React from 'react';\nimport useInjectionsOf from '../hooks/use-injections-of';\nimport { Location } from '../types';\n\ntype Props = {\n\tlocation: Location\n}\n\nexport default function Slot( { location }: Props ) {\n\tconst injections = useInjectionsOf( location );\n\n\treturn (\n\t\t<>\n\t\t\t{ injections.map( ( { id, filler: Filler } ) => (\n\t\t\t\t<Filler key={ id } />\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n"],"mappings":";AAAA,YAAYA,YAAW;;;ACAvB,YAAY,WAAW;AACvB,SAAoB,gBAAgB;;;ACDpC,SAAS,iBAA4B;AAWrC,IAAqB,gBAArB,cAA2C,UAAwB;AAAA,EAC3D,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,cAAgC,EAAE,SAAS,GAA6B;AAC9E,SACC,oCAAC,iBAAc,UAAW,QACzB,oCAAC,YAAS,UAAW,QAClB,QACH,CACD;AAEF;;;ADRA,IAAM,mBAAmB;AAEzB,IAAM,aAAiC,oBAAI,IAAI;AASxC,SAAS,OAAQ,EAAE,UAAU,QAAQ,MAAM,UAAU,CAAC,EAAE,GAAgB;AAC9E,QAAM,KAAK,WAAY,UAAU,IAAK;AAEtC,MAAK,WAAW,IAAK,EAAG,KAAK,CAAE,SAAS,WAAY;AAEnD,YAAQ;AAAA,MACP,uBAAwB,yBAA2B;AAAA,IACpD;AAEA;AAAA,EACD;AAEA,QAAM,YAAY;AAAA,IACjB;AAAA,IACA;AAAA,IACA,QAAQ,WAAY,MAAO;AAAA,IAC3B,UAAU,QAAQ,YAAY;AAAA,EAC/B;AAEA,aAAW,IAAK,IAAI,SAAU;AAC/B;AAEO,SAAS,kBAAmB,UAAqB;AACvD,SAAO,CAAE,EAAE,QAAQ,MAAM,QAAQ,MAAqC;AACrE,WAAO,OAAQ,EAAE,UAAU,MAAM,QAAQ,QAAQ,CAAE;AAAA,EACpD;AACD;AAEO,SAAS,gBAAiB,UAAmB;AACnD,SAAO,CAAE,GAAG,WAAW,OAAO,CAAE,EAC9B,OAAQ,CAAE,cAAe,UAAU,aAAa,QAAS,EACzD,KAAM,CAAE,GAAG,MAAO,EAAE,WAAW,EAAE,QAAS;AAC7C;AAEO,SAAS,kBAAkB;AACjC,aAAW,MAAM;AAClB;AAEA,SAAS,WAAY,iBAA0B;AAC9C,SAAO,CAAE,UACR,qCAAC,qBACA,qCAAC,mBAAkB,GAAG,OAAQ,CAC/B;AAEF;AAEA,SAAS,WAAY,UAAoB,MAAa;AACrD,SAAO,GAAI,aAAe;AAC3B;;;AG/DA,SAAS,eAAe;AAMT,SAAR,gBAAkC,WAA+B;AACvE,SAAO;AAAA,IACN,MAAM;AACL,UAAK,MAAM,QAAS,SAAU,GAAI;AACjC,eAAO,UAAU,IAAK,CAAE,aAAc,gBAAiB,QAAS,CAAE;AAAA,MACnE;AAEA,aAAO,gBAAiB,SAAU;AAAA,IACnC;AAAA,IACA,CAAE,SAAU;AAAA,EACb;AACD;;;ACjBA,YAAYC,YAAW;AAQR,SAAR,KAAuB,EAAE,SAAS,GAAW;AACnD,QAAMC,cAAa,gBAAiB,QAAS;AAE7C,SACC,4DACGA,YAAW,IAAK,CAAE,EAAE,IAAI,QAAQ,OAAO,MACxC,qCAAC,UAAO,KAAM,IAAK,CAClB,CACH;AAEF;","names":["React","React","injections"]}
+{"version":3,"sources":["../src/locations.tsx","../src/components/filler-wrapper.tsx","../src/components/error-boundary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Filler, Injection, InjectArgs, EmptyObject, Location, Id } from './types';\nimport FillerWrapper from './components/filler-wrapper';\nimport { useMemo } from 'react';\n\ntype InjectionsMap<TProps extends object = EmptyObject> = 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 = EmptyObject>(): 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 wrapFiller<TProps extends object = EmptyObject>( FillerComponent: Filler<TProps> ) {\n\treturn ( props: TProps ) => (\n\t\t<FillerWrapper>\n\t\t\t<FillerComponent { ...props } />\n\t\t</FillerWrapper>\n\t);\n}\n\nfunction createSlot<TProps extends object = EmptyObject>( 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, filler: 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 = EmptyObject>( injections: InjectionsMap<TProps> ) {\n\treturn () => [ ...injections.values() ]\n\t\t.sort( ( a, b ) => a.priority - b.priority );\n}\n\nfunction createInject<TProps extends object = EmptyObject>( injections: InjectionsMap<TProps> ) {\n\treturn ( { filler, 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.error(\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\tfiller: wrapFiller( filler ),\n\t\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t\t} );\n\t};\n}\n\nfunction createUseInjections<TProps extends object = EmptyObject>( getInjections: Location<TProps>[ 'getInjections' ] ) {\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 FillerWrapper( { children }: { children: ReactNode } ) {\n\treturn (\n\t\t<ErrorBoundary fallback={ null }>\n\t\t\t<Suspense fallback={ null }>\n\t\t\t\t{ children }\n\t\t\t</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,UAAwB;AAAA,EAC3D,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,cAAgC,EAAE,SAAS,GAA6B;AAC9E,SACC,oCAAC,iBAAc,UAAW,QACzB,oCAAC,YAAS,UAAW,QAClB,QACH,CACD;AAEF;;;ADTA,SAAS,eAAe;AAIxB,IAAM,mBAAmB;AAGzB,IAAM,qBAAuC,CAAC;AAEvC,SAAS,iBAAwE;AACvF,QAAM,aAAoC,oBAAI,IAAI;AAElD,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,WAAiD,iBAAkC;AAC3F,SAAO,CAAE,UACR,qCAAC,qBACA,qCAAC,mBAAkB,GAAG,OAAQ,CAC/B;AAEF;AAEA,SAAS,WAAiD,eAAqD;AAC9G,SAAO,CAAE,UAAmB;AAC3B,UAAM,aAAa,cAAc;AAEjC,WACC,4DACG,WAAW,IAAK,CAAE,EAAE,IAAI,QAAQC,WAAU,MAC3C,qCAACA,YAAA,EAAY,GAAG,OAAQ,KAAM,IAAK,CAClC,CACH;AAAA,EAEF;AACD;AAEA,SAAS,oBAA0D,YAAoC;AACtG,SAAO,MAAM,CAAE,GAAG,WAAW,OAAO,CAAE,EACpC,KAAM,CAAE,GAAG,MAAO,EAAE,WAAW,EAAE,QAAS;AAC7C;AAEA,SAAS,aAAmD,YAAoC;AAC/F,SAAO,CAAE,EAAE,QAAQ,IAAI,UAAU,CAAC,EAAE,MAA2B;AAC9D,QAAK,WAAW,IAAK,EAAG,KAAK,CAAE,SAAS,WAAY;AAEnD,cAAQ;AAAA,QACP,6BAA8B;AAAA,MAC/B;AAEA;AAAA,IACD;AAEA,eAAW,IAAK,IAAI;AAAA,MACnB;AAAA,MACA,QAAQ,WAAY,MAAO;AAAA,MAC3B,UAAU,QAAQ,YAAY;AAAA,IAC/B,CAAE;AAAA,EACH;AACD;AAEA,SAAS,oBAA0D,eAAqD;AACvH,SAAO,MAAM,QAAS,MAAM,cAAc,GAAG,CAAC,CAAE;AACjD;","names":["React","Component"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/locations",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -34,5 +34,5 @@
 	"peerDependencies": {
 		"react": "17.x"
 	},
-	"gitHead": "f93a1ed5350b151f17d65b21b0b43398774dccc5"
+	"gitHead": "45afd449fda346eea0f8a431ebca7d6c1d518dd1"
 }

package/src/__tests__/index.test.tsx

@@ -1,32 +1,31 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { lazy } from 'react';
-import { inject, getInjectionsOf } from '../injections';
-import Slot from '../components/slot';
+import { createLocation } from '../locations';
 
-describe( '@elementor/locations injections', () => {
+describe( '@elementor/locations', () => {
 	it( 'should render components based on the location name', () => {
 		// Arrange.
-		inject( {
-			name: 'test-1',
-			location: 'test',
+		const { inject: injectIntoTest, Slot: TestSlot } = createLocation();
+		const { inject: injectIntoTest2 } = createLocation();
+
+		injectIntoTest( {
+			id: 'test-1',
 			filler: () => <div data-testid="element">First div</div>,
 		} );
 
-		inject( {
-			name: 'test-2',
-			location: 'test',
+		injectIntoTest( {
+			id: 'test-2',
 			filler: () => <div data-testid="element">Second div</div>,
 		} );
 
-		inject( {
-			name: 'test-3',
-			location: 'test2',
+		injectIntoTest2( {
+			id: 'test-3',
 			filler: () => <div data-testid="element">Should not exist</div>,
 		} );
 
 		// Act.
-		const { getAllByTestId } = render( <Slot location="test" /> );
+		const { getAllByTestId } = render( <TestSlot /> );
 
 		// Assert.
 		const elements = getAllByTestId( 'element' );
@@ -38,29 +37,28 @@ describe( '@elementor/locations injections', () => {
 
 	it( 'should render components based on priority', () => {
 		// Arrange.
+		const { inject, Slot } = createLocation();
+
 		inject( {
-			name: 'test-1',
-			location: 'test',
+			id: 'test-1',
 			filler: () => <div data-testid="element">Third div</div>,
 			// Default priority is 10.
 		} );
 
 		inject( {
-			name: 'test-2',
-			location: 'test',
+			id: 'test-2',
 			filler: () => <div data-testid="element">First div</div>,
 			options: { priority: 5 },
 		} );
 
 		inject( {
-			name: 'test-3',
-			location: 'test',
+			id: 'test-3',
 			filler: () => <div data-testid="element">Second div</div>,
 			options: { priority: 5 },
 		} );
 
 		// Act.
-		const { getAllByTestId } = render( <Slot location="test" /> );
+		const { getAllByTestId } = render( <Slot /> );
 
 		// Assert.
 		const elements = getAllByTestId( 'element' );
@@ -72,8 +70,11 @@ describe( '@elementor/locations injections', () => {
 	} );
 
 	it( 'should render empty slot when there are no fills', () => {
-		// Arrange + Act.
-		const { container } = render( <Slot location="empty" /> );
+		// Arrange.
+		const { Slot } = createLocation();
+
+		// Act.
+		const { container } = render( <Slot /> );
 
 		// Assert.
 		expect( container.innerHTML ).toBe( '' );
@@ -81,22 +82,22 @@ describe( '@elementor/locations injections', () => {
 
 	it( 'should render lazy components', async () => {
 		// Arrange.
+		const { inject, Slot } = createLocation();
+
 		inject( {
-			name: 'test-1',
-			location: 'test',
+			id: 'test-1',
 			filler: () => <div>First div</div>,
 		} );
 
 		inject( {
-			name: 'test-2',
-			location: 'test',
+			id: 'test-2',
 			filler: lazy( () => Promise.resolve( {
 				default: () => <div>Second div</div>,
 			} ) ),
 		} );
 
 		// Act.
-		const { queryByText, findByText } = render( <Slot location="test" /> );
+		const { queryByText, findByText } = render( <Slot /> );
 
 		// Assert.
 		expect( queryByText( 'First div' ) ).toBeTruthy();
@@ -111,20 +112,20 @@ describe( '@elementor/locations injections', () => {
 
 	it( 'should error when injecting filler with the same name (without overwrite option)', async () => {
 		// Arrange.
+		const { inject, Slot } = createLocation();
+
 		inject( {
-			name: 'test',
-			location: 'test',
+			id: 'test',
 			filler: () => <div>First div</div>,
 		} );
 
 		inject( {
-			name: 'test',
-			location: 'test',
+			id: 'test',
 			filler: () => <div>Second div</div>,
 		} );
 
 		// Act
-		const { queryByText } = render( <Slot location="test" /> );
+		const { queryByText } = render( <Slot /> );
 
 		// Assert.
 		expect( queryByText( 'First div' ) ).toBeTruthy();
@@ -134,28 +135,27 @@ describe( '@elementor/locations injections', () => {
 
 	it( 'should overwrite the filler if has same name', async () => {
 		// Arrange.
+		const { inject, Slot } = createLocation();
+
 		inject( {
-			name: 'test',
-			location: 'test',
+			id: 'test',
 			filler: () => <div>First div</div>,
 		} );
 
 		inject( {
-			name: 'test',
-			location: 'test',
+			id: 'test',
 			filler: () => <div>Second div</div>,
 			options: { overwrite: true },
 		} );
 
 		inject( {
-			name: 'test-2',
-			location: 'test',
+			id: 'test-2',
 			filler: () => <div>Third div</div>,
 			options: { overwrite: true },
 		} );
 
 		// Act
-		const { queryByText } = render( <Slot location="test" /> );
+		const { queryByText } = render( <Slot /> );
 
 		// Assert.
 		expect( queryByText( 'First div' ) ).toBeNull();
@@ -165,53 +165,68 @@ describe( '@elementor/locations injections', () => {
 
 	it( 'should overwrite the injection priority', () => {
 		// Arrange.
+		const { inject, getInjections } = createLocation();
+
 		inject( {
-			name: 'test-1',
-			location: 'test',
+			id: 'test-1',
 			filler: () => <div />,
 			options: { priority: 5 },
 		} );
 
 		inject( {
-			name: 'test-1',
-			location: 'test',
+			id: 'test-1',
 			filler: () => <div />,
 			options: { overwrite: true },
 		} );
 
 		// Act + Assert.
-		expect( getInjectionsOf( 'test' ) ).toHaveLength( 1 );
-		expect( getInjectionsOf( 'test' )[ 0 ].priority ).toBe( 10 );
+		expect( getInjections() ).toHaveLength( 1 );
+		expect( getInjections()[ 0 ].priority ).toBe( 10 );
 	} );
 
 	it( 'should catch filler errors with error boundary', () => {
 		// Arrange.
+		const { inject, Slot } = createLocation();
+
 		inject( {
-			name: 'test-1',
-			location: 'test',
+			id: 'test-1',
 			filler: () => <div>Test 1</div>,
 		} );
 
 		inject( {
-			name: 'test-2',
-			location: 'test',
+			id: 'test-2',
 			filler: () => {
 				throw new Error( 'Error' );
 			},
 		} );
 
 		inject( {
-			name: 'test-3',
-			location: 'test',
+			id: 'test-3',
 			filler: () => <div>Test 3</div>,
 		} );
 
 		// Act.
-		const { queryByText } = render( <Slot location="test" /> );
+		const { queryByText } = render( <Slot /> );
 
 		// Assert.
 		expect( queryByText( 'Test 1' ) ).toBeTruthy();
 		expect( queryByText( 'Test 3' ) ).toBeTruthy();
 		expect( console ).toHaveErrored();
 	} );
+
+	it( 'should pass the props from Slot to a Filler', () => {
+		// Arrange.
+		const { inject, Slot } = createLocation<{ text: string, number: number }>();
+
+		inject( {
+			id: 'test-1',
+			filler: ( { text, number } ) => <div>{ text }: { number }</div>,
+		} );
+
+		// Act.
+		const { queryByText } = render( <Slot text="The number is" number={ 1 } /> );
+
+		// Assert.
+		expect( queryByText( 'The number is: 1' ) ).toBeTruthy();
+	} );
 } );

package/src/index.ts

@@ -1,4 +1,2 @@
 export * from './types';
-export { inject, getInjectionsOf, flushInjections, createInjectorFor } from './injections';
-export { default as useInjectionsOf } from './hooks/use-injections-of';
-export { default as Slot } from './components/slot';
+export { createLocation, flushAllInjections } from './locations';

package/src/locations.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { Filler, Injection, InjectArgs, EmptyObject, Location, Id } from './types';
+import FillerWrapper from './components/filler-wrapper';
+import { useMemo } from 'react';
+
+type InjectionsMap<TProps extends object = EmptyObject> = Map<Id, Injection<TProps>>
+
+const DEFAULT_PRIORITY = 10;
+
+// Allow flushing all injections at once, for testing purposes.
+const flushInjectionsFns: ( () => void )[] = [];
+
+export function createLocation<TProps extends object = EmptyObject>(): Location<TProps> {
+	const injections: InjectionsMap<TProps> = new Map();
+
+	const getInjections = createGetInjections( injections );
+	const useInjections = createUseInjections( getInjections );
+	const Slot = createSlot( useInjections );
+	const inject = createInject( injections );
+
+	// Push the clear function to the flushInjectionsFns array, so we can flush all injections at once.
+	flushInjectionsFns.push( () => injections.clear() );
+
+	return {
+		inject,
+		getInjections,
+		useInjections,
+		Slot,
+	};
+}
+
+export function flushAllInjections() {
+	flushInjectionsFns.forEach( ( flush ) => flush() );
+}
+
+function wrapFiller<TProps extends object = EmptyObject>( FillerComponent: Filler<TProps> ) {
+	return ( props: TProps ) => (
+		<FillerWrapper>
+			<FillerComponent { ...props } />
+		</FillerWrapper>
+	);
+}
+
+function createSlot<TProps extends object = EmptyObject>( useInjections: Location<TProps>[ 'useInjections' ] ) {
+	return ( props: TProps ) => {
+		const injections = useInjections();
+
+		return (
+			<>
+				{ injections.map( ( { id, filler: Component } ) => (
+					<Component { ...props } key={ id } />
+				) ) }
+			</>
+		);
+	};
+}
+
+function createGetInjections<TProps extends object = EmptyObject>( injections: InjectionsMap<TProps> ) {
+	return () => [ ...injections.values() ]
+		.sort( ( a, b ) => a.priority - b.priority );
+}
+
+function createInject<TProps extends object = EmptyObject>( injections: InjectionsMap<TProps> ) {
+	return ( { filler, id, options = {} }: InjectArgs<TProps> ) => {
+		if ( injections.has( id ) && ! options?.overwrite ) {
+			// eslint-disable-next-line no-console
+			console.error(
+				`An injection with the id "${ id }" already exists. Did you mean to use "options.overwrite"?`,
+			);
+
+			return;
+		}
+
+		injections.set( id, {
+			id,
+			filler: wrapFiller( filler ),
+			priority: options.priority ?? DEFAULT_PRIORITY,
+		} );
+	};
+}
+
+function createUseInjections<TProps extends object = EmptyObject>( getInjections: Location<TProps>[ 'getInjections' ] ) {
+	return () => useMemo( () => getInjections(), [] );
+}

package/src/types.ts

@@ -1,19 +1,29 @@
 import { ComponentType } from 'react';
 
-export type Location = string;
-export type Filler = ComponentType;
-export type Name = string;
+export type EmptyObject = Record<string, never>;
+
+export type Filler<TProps extends object = EmptyObject> = ComponentType<TProps>;
 export type Id = string;
 export type Priority = number;
 
-export type InjectionOptions = {
-	priority?: Priority;
-	overwrite?: boolean;
+export type Injection<TProps extends object = EmptyObject> = {
+	id: Id;
+	filler: Filler<TProps>;
+	priority: Priority;
 }
 
-export type Injection = {
-	location: Location;
-	filler: Filler;
-	priority: Priority;
+export type InjectArgs<TProps extends object = EmptyObject> = {
 	id: Id;
+	filler: Filler<TProps>;
+	options?: {
+		priority?: Priority;
+		overwrite?: boolean;
+	};
+}
+
+export type Location<TProps extends object = EmptyObject> = {
+	inject: ( args: InjectArgs<TProps> ) => void;
+	getInjections: () => Injection<TProps>[];
+	useInjections: () => Injection<TProps>[];
+	Slot: ComponentType<TProps>;
 }

package/src/components/slot.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import useInjectionsOf from '../hooks/use-injections-of';
-import { Location } from '../types';
-
-type Props = {
-	location: Location
-}
-
-export default function Slot( { location }: Props ) {
-	const injections = useInjectionsOf( location );
-
-	return (
-		<>
-			{ injections.map( ( { id, filler: Filler } ) => (
-				<Filler key={ id } />
-			) ) }
-		</>
-	);
-}

package/src/hooks/use-injections-of.ts

@@ -1,18 +0,0 @@
-import { useMemo } from 'react';
-import { getInjectionsOf } from '../injections';
-import { Injection } from '../types';
-
-export default function useInjectionsOf( locations: string[] ): Injection[][];
-export default function useInjectionsOf( location: string ): Injection[];
-export default function useInjectionsOf( locations: string | string[] ) {
-	return useMemo(
-		() => {
-			if ( Array.isArray( locations ) ) {
-				return locations.map( ( location ) => getInjectionsOf( location ) );
-			}
-
-			return getInjectionsOf( locations );
-		},
-		[ locations ]
-	);
-}

package/src/injections.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { Location, Filler, Injection, InjectionOptions, Name, Id } from './types';
-import FillerWrapper from './components/filler-wrapper';
-
-const DEFAULT_PRIORITY = 10;
-
-const injections: Map<Id, Injection> = new Map();
-
-type InjectArgs = {
-	location: Location;
-	filler: Filler;
-	name: Name;
-	options?: InjectionOptions;
-}
-
-export function inject( { location, filler, name, options = {} }: InjectArgs ) {
-	const id = generateId( location, name );
-
-	if ( injections.has( id ) && ! options?.overwrite ) {
-		// eslint-disable-next-line no-console
-		console.error(
-			`An injection named "${ name }" under location "${ location }" already exists. Did you mean to use "options.overwrite"?`
-		);
-
-		return;
-	}
-
-	const injection = {
-		id,
-		location,
-		filler: wrapFiller( filler ),
-		priority: options.priority ?? DEFAULT_PRIORITY,
-	};
-
-	injections.set( id, injection );
-}
-
-export function createInjectorFor( location: Location ) {
-	return ( { filler, name, options }: Omit<InjectArgs, 'location'> ) => {
-		return inject( { location, name, filler, options } );
-	};
-}
-
-export function getInjectionsOf( location: string ) {
-	return [ ...injections.values() ]
-		.filter( ( injection ) => injection.location === location )
-		.sort( ( a, b ) => a.priority - b.priority );
-}
-
-export function flushInjections() {
-	injections.clear();
-}
-
-function wrapFiller( FillerComponent: Filler ) {
-	return ( props: object ) => (
-		<FillerWrapper>
-			<FillerComponent { ...props } />
-		</FillerWrapper>
-	);
-}
-
-function generateId( location: Location, name: Name ) {
-	return `${ location }::${ name }`;
-}