@elementor/locations 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.6.3...@elementor/locations@0.7.0) (2023-09-11)
+
+
+### Features
+
+* **locations:** mark experimental functions [ED-12077] ([#116](https://github.com/elementor/elementor-packages/issues/116)) ([47d72cd](https://github.com/elementor/elementor-packages/commit/47d72cd464e6164860c5f14a92b0264058da053c))
+
+
+
+
+
+## [0.6.3](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.6.2...@elementor/locations@0.6.3) (2023-08-02)
+
+**Note:** Version bump only for package @elementor/locations
+
+
+
+
+
 ## [0.6.2](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.6.1...@elementor/locations@0.6.2) (2023-07-17)
 
 **Note:** Version bump only for package @elementor/locations

package/README.md

@@ -1,5 +1,4 @@
 # Locations
 
-> **Warning**
-> 
+> [!WARNING]
 > This package is under development and not ready for production use.

package/dist/index.d.mts

@@ -5,20 +5,48 @@ type InjectedComponent<TProps extends object = AnyProps> = ComponentType<TProps>
 type Id = string;
 type Priority = number;
 type Injection<TProps extends object = AnyProps> = {
+    /**
+     * A unique id (per location) of the injected component.
+     */
     id: Id;
+    /**
+     * The injected component.
+     */
     component: InjectedComponent<TProps>;
+    /**
+     * Priority of the injected component inside the location. Lower value means higher priority.
+     */
     priority: Priority;
 };
 type InjectArgs<TProps extends object = AnyProps> = {
+    /**
+     * A unique id (per location) of the component to be injected.
+     */
     id: Id;
+    /**
+     * The component to be injected.
+     */
     component: InjectedComponent<TProps>;
     options?: {
+        /**
+         * Priority of the injected component inside the location. Lower value means higher priority.
+         */
         priority?: Priority;
+        /**
+         * When true, if an injected component with the same id already exists it will be overridden with this one. Otherwise, this injection will be ignored. Default is false.
+         */
         overwrite?: boolean;
     };
 };
 type Location<TProps extends object = AnyProps> = {
+    /**
+     * Inject a component into the location.
+     */
     inject: (args: InjectArgs<TProps>) => void;
+    /**
+     *
+     * @return All the injections in the location.
+     */
     getInjections: () => Injection<TProps>[];
     useInjections: () => Injection<TProps>[];
     Slot: ComponentType<TProps>;
@@ -27,4 +55,4 @@ type Location<TProps extends object = AnyProps> = {
 declare function createLocation<TProps extends object = AnyProps>(): Location<TProps>;
 declare function flushAllInjections(): void;
 
-export { AnyProps, Id, InjectArgs, InjectedComponent, Injection, Location, Priority, createLocation, flushAllInjections };
+export { AnyProps, Id, InjectArgs, InjectedComponent, Injection, Location, Priority, flushAllInjections as __flushAllInjections, createLocation };

package/dist/index.d.ts

@@ -5,20 +5,48 @@ type InjectedComponent<TProps extends object = AnyProps> = ComponentType<TProps>
 type Id = string;
 type Priority = number;
 type Injection<TProps extends object = AnyProps> = {
+    /**
+     * A unique id (per location) of the injected component.
+     */
     id: Id;
+    /**
+     * The injected component.
+     */
     component: InjectedComponent<TProps>;
+    /**
+     * Priority of the injected component inside the location. Lower value means higher priority.
+     */
     priority: Priority;
 };
 type InjectArgs<TProps extends object = AnyProps> = {
+    /**
+     * A unique id (per location) of the component to be injected.
+     */
     id: Id;
+    /**
+     * The component to be injected.
+     */
     component: InjectedComponent<TProps>;
     options?: {
+        /**
+         * Priority of the injected component inside the location. Lower value means higher priority.
+         */
         priority?: Priority;
+        /**
+         * When true, if an injected component with the same id already exists it will be overridden with this one. Otherwise, this injection will be ignored. Default is false.
+         */
         overwrite?: boolean;
     };
 };
 type Location<TProps extends object = AnyProps> = {
+    /**
+     * Inject a component into the location.
+     */
     inject: (args: InjectArgs<TProps>) => void;
+    /**
+     *
+     * @return All the injections in the location.
+     */
     getInjections: () => Injection<TProps>[];
     useInjections: () => Injection<TProps>[];
     Slot: ComponentType<TProps>;
@@ -27,4 +55,4 @@ type Location<TProps extends object = AnyProps> = {
 declare function createLocation<TProps extends object = AnyProps>(): Location<TProps>;
 declare function flushAllInjections(): void;
 
-export { AnyProps, Id, InjectArgs, InjectedComponent, Injection, Location, Priority, createLocation, flushAllInjections };
+export { AnyProps, Id, InjectArgs, InjectedComponent, Injection, Location, Priority, flushAllInjections as __flushAllInjections, createLocation };

package/dist/index.js

@@ -30,8 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  createLocation: () => createLocation,
-  flushAllInjections: () => flushAllInjections
+  __flushAllInjections: () => flushAllInjections,
+  createLocation: () => createLocation
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -117,7 +117,7 @@ function createUseInjections(getInjections) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createLocation,
-  flushAllInjections
+  __flushAllInjections,
+  createLocation
 });
 //# 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';\nexport { createLocation, 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() ]\n\t\t.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>( 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 InjectedComponentWrapper( { 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,yBAA2C,EAAE,SAAS,GAA6B;AACzF,SACC,oCAAC,iBAAc,UAAW,QACzB,oCAAC,0BAAS,UAAW,QAClB,QACH,CACD;AAEF;;;ADTA,IAAAC,gBAAwB;AAIxB,IAAM,mBAAmB;AAGzB,IAAM,qBAAuC,CAAC;AAEvC,SAAS,iBAAqE;AACpF,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,sBAAyDC,YAAuC;AACxG,SAAO,CAAE,UACR,qCAAC,gCACA,qCAACA,YAAA,EAAY,GAAG,OAAQ,CACzB;AAEF;AAEA,SAAS,WAA8C,eAAqD;AAC3G,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,oBAAuD,YAAoC;AACnG,SAAO,MAAM,CAAE,GAAG,WAAW,OAAO,CAAE,EACpC,KAAM,CAAE,GAAG,MAAO,EAAE,WAAW,EAAE,QAAS;AAC7C;AAEA,SAAS,aAAgD,YAAoC;AAC5F,SAAO,CAAE,EAAE,WAAW,IAAI,UAAU,CAAC,EAAE,MAA2B;AACjE,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,oBAAuD,eAAqD;AACpH,SAAO,UAAM,uBAAS,MAAM,cAAc,GAAG,CAAC,CAAE;AACjD;","names":["React","import_react","import_react","Component"]}
+{"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 {\n\tcreateLocation,\n\tflushAllInjections as __flushAllInjections,\n} 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() ]\n\t\t.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>( 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 InjectedComponentWrapper( { 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,yBAA2C,EAAE,SAAS,GAA6B;AACzF,SACC,oCAAC,iBAAc,UAAW,QACzB,oCAAC,0BAAS,UAAW,QAClB,QACH,CACD;AAEF;;;ADTA,IAAAC,gBAAwB;AAIxB,IAAM,mBAAmB;AAGzB,IAAM,qBAAuC,CAAC;AAEvC,SAAS,iBAAqE;AACpF,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,sBAAyDC,YAAuC;AACxG,SAAO,CAAE,UACR,qCAAC,gCACA,qCAACA,YAAA,EAAY,GAAG,OAAQ,CACzB;AAEF;AAEA,SAAS,WAA8C,eAAqD;AAC3G,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,oBAAuD,YAAoC;AACnG,SAAO,MAAM,CAAE,GAAG,WAAW,OAAO,CAAE,EACpC,KAAM,CAAE,GAAG,MAAO,EAAE,WAAW,EAAE,QAAS;AAC7C;AAEA,SAAS,aAAgD,YAAoC;AAC5F,SAAO,CAAE,EAAE,WAAW,IAAI,UAAU,CAAC,EAAE,MAA2B;AACjE,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,oBAAuD,eAAqD;AACpH,SAAO,UAAM,uBAAS,MAAM,cAAc,GAAG,CAAC,CAAE;AACjD;","names":["React","import_react","import_react","Component"]}

package/dist/index.mjs

@@ -79,7 +79,7 @@ function createUseInjections(getInjections) {
   return () => useMemo(() => getInjections(), []);
 }
 export {
-  createLocation,
-  flushAllInjections
+  flushAllInjections as __flushAllInjections,
+  createLocation
 };
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/locations",
-	"version": "0.6.2",
+	"version": "0.7.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -34,5 +34,5 @@
 	"peerDependencies": {
 		"react": "18.x"
 	},
-	"gitHead": "e27c0b852121946fcc32d5ce8a5a1551c93d87a6"
+	"gitHead": "7dc3971d2dd061848d6547aa2caed8332e7b9167"
 }

package/src/__tests__/index.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { lazy } from 'react';
 import { createLocation } from '../api';
 
@@ -25,10 +25,10 @@ describe( '@elementor/locations', () => {
 		} );
 
 		// Act.
-		const { getAllByTestId } = render( <TestSlot /> );
+		render( <TestSlot /> );
 
 		// Assert.
-		const elements = getAllByTestId( 'element' );
+		const elements = screen.getAllByTestId( 'element' );
 
 		expect( elements ).toHaveLength( 2 );
 		expect( elements[ 0 ].innerHTML ).toBe( 'First div' );
@@ -58,10 +58,10 @@ describe( '@elementor/locations', () => {
 		} );
 
 		// Act.
-		const { getAllByTestId } = render( <Slot /> );
+		render( <Slot /> );
 
 		// Assert.
-		const elements = getAllByTestId( 'element' );
+		const elements = screen.getAllByTestId( 'element' );
 
 		expect( elements ).toHaveLength( 3 );
 		expect( elements[ 0 ].innerHTML ).toBe( 'First div' );
@@ -77,7 +77,7 @@ describe( '@elementor/locations', () => {
 		const { container } = render( <Slot /> );
 
 		// Assert.
-		expect( container.innerHTML ).toBe( '' );
+		expect( container ).toBeEmptyDOMElement( );
 	} );
 
 	it( 'should render lazy components', async () => {
@@ -97,17 +97,17 @@ describe( '@elementor/locations', () => {
 		} );
 
 		// Act.
-		const { queryByText, findByText } = render( <Slot /> );
+		render( <Slot /> );
 
 		// Assert.
-		expect( queryByText( 'First div' ) ).toBeTruthy();
-		expect( queryByText( 'Second div' ) ).toBeNull();
+		expect( screen.getByText( 'First div' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'Second div' ) ).not.toBeInTheDocument();
 
 		// Waits for the lazy component to be loaded.
-		await findByText( 'Second div' );
+		await screen.findByText( 'Second div' );
 
-		expect( queryByText( 'First div' ) ).toBeTruthy();
-		expect( queryByText( 'Second div' ) ).toBeTruthy();
+		expect( screen.getByText( 'First div' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Second div' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should error when injecting a component with the same name (without overwrite option)', async () => {
@@ -125,11 +125,11 @@ describe( '@elementor/locations', () => {
 		} );
 
 		// Act
-		const { queryByText } = render( <Slot /> );
+		render( <Slot /> );
 
 		// Assert.
-		expect( queryByText( 'First div' ) ).toBeTruthy();
-		expect( queryByText( 'Second div' ) ).toBeNull();
+		expect( screen.getByText( 'First div' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'Second div' ) ).not.toBeInTheDocument();
 		expect( console ).toHaveWarned();
 	} );
 
@@ -155,12 +155,12 @@ describe( '@elementor/locations', () => {
 		} );
 
 		// Act
-		const { queryByText } = render( <Slot /> );
+		render( <Slot /> );
 
 		// Assert.
-		expect( queryByText( 'First div' ) ).toBeNull();
-		expect( queryByText( 'Second div' ) ).toBeTruthy();
-		expect( queryByText( 'Third div' ) ).toBeTruthy();
+		expect( screen.queryByText( 'First div' ) ).not.toBeInTheDocument();
+		expect( screen.getByText( 'Second div' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Third div' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should overwrite the injection priority', () => {
@@ -206,11 +206,11 @@ describe( '@elementor/locations', () => {
 		} );
 
 		// Act.
-		const { queryByText } = render( <Slot /> );
+		render( <Slot /> );
 
 		// Assert.
-		expect( queryByText( 'Test 1' ) ).toBeTruthy();
-		expect( queryByText( 'Test 3' ) ).toBeTruthy();
+		expect( screen.getByText( 'Test 1' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Test 3' ) ).toBeInTheDocument();
 		expect( console ).toHaveErrored();
 	} );
 
@@ -224,9 +224,9 @@ describe( '@elementor/locations', () => {
 		} );
 
 		// Act.
-		const { queryByText } = render( <Slot text="The number is" number={ 1 } /> );
+		render( <Slot text="The number is" number={ 1 } /> );
 
 		// Assert.
-		expect( queryByText( 'The number is: 1' ) ).toBeTruthy();
+		expect( screen.getByText( 'The number is: 1' ) ).toBeInTheDocument();
 	} );
 } );

package/src/index.ts

@@ -1,2 +1,6 @@
 export * from './types';
-export { createLocation, flushAllInjections } from './api';
+
+export {
+	createLocation,
+	flushAllInjections as __flushAllInjections,
+} from './api';

package/src/types.ts

@@ -8,22 +8,51 @@ export type Id = string;
 export type Priority = number;
 
 export type Injection<TProps extends object = AnyProps> = {
+	/**
+	 * A unique id (per location) of the injected component.
+	 */
 	id: Id;
+	/**
+	 * The injected component.
+	 */
 	component: InjectedComponent<TProps>;
+	/**
+	 * Priority of the injected component inside the location. Lower value means higher priority.
+	 */
 	priority: Priority;
 }
 
 export type InjectArgs<TProps extends object = AnyProps> = {
+	/**
+	 * A unique id (per location) of the component to be injected.
+	 */
 	id: Id;
+	/**
+	 * The component to be injected.
+	 */
 	component: InjectedComponent<TProps>;
+
 	options?: {
+		/**
+		 * Priority of the injected component inside the location. Lower value means higher priority.
+		 */
 		priority?: Priority;
+		/**
+		 * When true, if an injected component with the same id already exists it will be overridden with this one. Otherwise, this injection will be ignored. Default is false.
+		 */
 		overwrite?: boolean;
 	};
 }
 
 export type Location<TProps extends object = AnyProps> = {
+	/**
+	 * Inject a component into the location.
+	 */
 	inject: ( args: InjectArgs<TProps> ) => void;
+	/**
+	 *
+	 * @return All the injections in the location.
+	 */
 	getInjections: () => Injection<TProps>[];
 	useInjections: () => Injection<TProps>[];
 	Slot: ComponentType<TProps>;