@elementor/locations 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import { ComponentType } from 'react';
+
+type Location = string;
+type Filler = ComponentType;
+type Name = string;
+type Id = string;
+type Priority = number;
+type InjectionOptions = {
+    priority?: Priority;
+    overwrite?: boolean;
+};
+type Injection = {
+    location: Location;
+    filler: Filler;
+    priority: Priority;
+    id: Id;
+};
+
+type InjectArgs = {
+    location: Location;
+    filler: Filler;
+    name: Name;
+    options?: InjectionOptions;
+};
+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;
+
+export { Filler, Id, Injection, InjectionOptions, Location, Name, Priority, Slot, createInjectorFor, flushInjections, getInjectionsOf, inject, useInjectionsOf };

package/dist/index.js

@@ -0,0 +1,137 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Slot: () => Slot,
+  createInjectorFor: () => createInjectorFor,
+  flushInjections: () => flushInjections,
+  getInjectionsOf: () => getInjectionsOf,
+  inject: () => inject,
+  useInjectionsOf: () => useInjectionsOf
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/injections.tsx
+var React2 = __toESM(require("react"));
+
+// src/components/filler-wrapper.tsx
+var React = __toESM(require("react"));
+var import_react2 = require("react");
+
+// src/components/error-boundary.tsx
+var import_react = require("react");
+var ErrorBoundary = class extends import_react.Component {
+  state = {
+    hasError: false
+  };
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+};
+
+// src/components/filler-wrapper.tsx
+function FillerWrapper({ children }) {
+  return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React.createElement(import_react2.Suspense, { fallback: null }, children));
+}
+
+// src/injections.tsx
+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 });
+  };
+}
+function getInjectionsOf(location) {
+  return [...injections.values()].filter((injection) => injection.location === location).sort((a, b) => a.priority - b.priority);
+}
+function flushInjections() {
+  injections.clear();
+}
+function wrapFiller(FillerComponent) {
+  return (props) => /* @__PURE__ */ React2.createElement(FillerWrapper, null, /* @__PURE__ */ React2.createElement(FillerComponent, { ...props }));
+}
+function generateId(location, name) {
+  return `${location}::${name}`;
+}
+
+// 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]
+  );
+}
+
+// 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 })));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Slot,
+  createInjectorFor,
+  flushInjections,
+  getInjectionsOf,
+  inject,
+  useInjectionsOf
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"]}

package/dist/index.mjs

@@ -0,0 +1,95 @@
+// src/injections.tsx
+import * as React2 from "react";
+
+// src/components/filler-wrapper.tsx
+import * as React from "react";
+import { Suspense } from "react";
+
+// src/components/error-boundary.tsx
+import { Component } from "react";
+var ErrorBoundary = class extends Component {
+  state = {
+    hasError: false
+  };
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+};
+
+// src/components/filler-wrapper.tsx
+function FillerWrapper({ children }) {
+  return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React.createElement(Suspense, { fallback: null }, children));
+}
+
+// src/injections.tsx
+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 });
+  };
+}
+function getInjectionsOf(location) {
+  return [...injections.values()].filter((injection) => injection.location === location).sort((a, b) => a.priority - b.priority);
+}
+function flushInjections() {
+  injections.clear();
+}
+function wrapFiller(FillerComponent) {
+  return (props) => /* @__PURE__ */ React2.createElement(FillerWrapper, null, /* @__PURE__ */ React2.createElement(FillerComponent, { ...props }));
+}
+function generateId(location, name) {
+  return `${location}::${name}`;
+}
+
+// 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]
+  );
+}
+
+// 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 })));
+}
+export {
+  Slot,
+  createInjectorFor,
+  flushInjections,
+  getInjectionsOf,
+  inject,
+  useInjectionsOf
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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"]}

package/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "@elementor/locations",
+	"version": "0.1.0",
+	"private": false,
+	"author": "Elementor Team",
+	"homepage": "https://elementor.com/",
+	"license": "GPL-3.0-or-later",
+	"main": "dist/index.js",
+	"module": "dist/index.mjs",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		},
+		"./package.json": "./package.json"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/elementor/elementor-packages.git",
+		"directory": "packages/locations"
+	},
+	"bugs": {
+		"url": "https://github.com/elementor/elementor-packages/issues"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build": "tsup --config=../../tsup.build.ts",
+		"dev": "tsup --config=../../tsup.dev.ts"
+	},
+	"peerDependencies": {
+		"react": "17.x"
+	},
+	"gitHead": "2ba9f13a9dbd085eb6ed8e6e303e9275ce626b8d"
+}

package/src/__tests__/index.test.tsx

@@ -0,0 +1,217 @@
+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';
+
+describe( '@elementor/locations injections', () => {
+	it( 'should render components based on the location name', () => {
+		// Arrange.
+		inject( {
+			name: 'test-1',
+			location: 'test',
+			filler: () => <div data-testid="element">First div</div>,
+		} );
+
+		inject( {
+			name: 'test-2',
+			location: 'test',
+			filler: () => <div data-testid="element">Second div</div>,
+		} );
+
+		inject( {
+			name: 'test-3',
+			location: 'test2',
+			filler: () => <div data-testid="element">Should not exist</div>,
+		} );
+
+		// Act.
+		const { getAllByTestId } = render( <Slot location="test" /> );
+
+		// Assert.
+		const elements = getAllByTestId( 'element' );
+
+		expect( elements ).toHaveLength( 2 );
+		expect( elements[ 0 ].innerHTML ).toBe( 'First div' );
+		expect( elements[ 1 ].innerHTML ).toBe( 'Second div' );
+	} );
+
+	it( 'should render components based on priority', () => {
+		// Arrange.
+		inject( {
+			name: 'test-1',
+			location: 'test',
+			filler: () => <div data-testid="element">Third div</div>,
+			// Default priority is 10.
+		} );
+
+		inject( {
+			name: 'test-2',
+			location: 'test',
+			filler: () => <div data-testid="element">First div</div>,
+			options: { priority: 5 },
+		} );
+
+		inject( {
+			name: 'test-3',
+			location: 'test',
+			filler: () => <div data-testid="element">Second div</div>,
+			options: { priority: 5 },
+		} );
+
+		// Act.
+		const { getAllByTestId } = render( <Slot location="test" /> );
+
+		// Assert.
+		const elements = getAllByTestId( 'element' );
+
+		expect( elements ).toHaveLength( 3 );
+		expect( elements[ 0 ].innerHTML ).toBe( 'First div' );
+		expect( elements[ 1 ].innerHTML ).toBe( 'Second div' );
+		expect( elements[ 2 ].innerHTML ).toBe( 'Third div' );
+	} );
+
+	it( 'should render empty slot when there are no fills', () => {
+		// Arrange + Act.
+		const { container } = render( <Slot location="empty" /> );
+
+		// Assert.
+		expect( container.innerHTML ).toBe( '' );
+	} );
+
+	it( 'should render lazy components', async () => {
+		// Arrange.
+		inject( {
+			name: 'test-1',
+			location: 'test',
+			filler: () => <div>First div</div>,
+		} );
+
+		inject( {
+			name: 'test-2',
+			location: 'test',
+			filler: lazy( () => Promise.resolve( {
+				default: () => <div>Second div</div>,
+			} ) ),
+		} );
+
+		// Act.
+		const { queryByText, findByText } = render( <Slot location="test" /> );
+
+		// Assert.
+		expect( queryByText( 'First div' ) ).toBeTruthy();
+		expect( queryByText( 'Second div' ) ).toBeNull();
+
+		// Waits for the lazy component to be loaded.
+		await findByText( 'Second div' );
+
+		expect( queryByText( 'First div' ) ).toBeTruthy();
+		expect( queryByText( 'Second div' ) ).toBeTruthy();
+	} );
+
+	it( 'should error when injecting filler with the same name (without overwrite option)', async () => {
+		// Arrange.
+		inject( {
+			name: 'test',
+			location: 'test',
+			filler: () => <div>First div</div>,
+		} );
+
+		inject( {
+			name: 'test',
+			location: 'test',
+			filler: () => <div>Second div</div>,
+		} );
+
+		// Act
+		const { queryByText } = render( <Slot location="test" /> );
+
+		// Assert.
+		expect( queryByText( 'First div' ) ).toBeTruthy();
+		expect( queryByText( 'Second div' ) ).toBeNull();
+		expect( console ).toHaveErrored();
+	} );
+
+	it( 'should overwrite the filler if has same name', async () => {
+		// Arrange.
+		inject( {
+			name: 'test',
+			location: 'test',
+			filler: () => <div>First div</div>,
+		} );
+
+		inject( {
+			name: 'test',
+			location: 'test',
+			filler: () => <div>Second div</div>,
+			options: { overwrite: true },
+		} );
+
+		inject( {
+			name: 'test-2',
+			location: 'test',
+			filler: () => <div>Third div</div>,
+			options: { overwrite: true },
+		} );
+
+		// Act
+		const { queryByText } = render( <Slot location="test" /> );
+
+		// Assert.
+		expect( queryByText( 'First div' ) ).toBeNull();
+		expect( queryByText( 'Second div' ) ).toBeTruthy();
+		expect( queryByText( 'Third div' ) ).toBeTruthy();
+	} );
+
+	it( 'should overwrite the injection priority', () => {
+		// Arrange.
+		inject( {
+			name: 'test-1',
+			location: 'test',
+			filler: () => <div />,
+			options: { priority: 5 },
+		} );
+
+		inject( {
+			name: 'test-1',
+			location: 'test',
+			filler: () => <div />,
+			options: { overwrite: true },
+		} );
+
+		// Act + Assert.
+		expect( getInjectionsOf( 'test' ) ).toHaveLength( 1 );
+		expect( getInjectionsOf( 'test' )[ 0 ].priority ).toBe( 10 );
+	} );
+
+	it( 'should catch filler errors with error boundary', () => {
+		// Arrange.
+		inject( {
+			name: 'test-1',
+			location: 'test',
+			filler: () => <div>Test 1</div>,
+		} );
+
+		inject( {
+			name: 'test-2',
+			location: 'test',
+			filler: () => {
+				throw new Error( 'Error' );
+			},
+		} );
+
+		inject( {
+			name: 'test-3',
+			location: 'test',
+			filler: () => <div>Test 3</div>,
+		} );
+
+		// Act.
+		const { queryByText } = render( <Slot location="test" /> );
+
+		// Assert.
+		expect( queryByText( 'Test 1' ) ).toBeTruthy();
+		expect( queryByText( 'Test 3' ) ).toBeTruthy();
+		expect( console ).toHaveErrored();
+	} );
+} );

package/src/components/error-boundary.tsx

@@ -0,0 +1,29 @@
+import { Component, ReactNode } from 'react';
+
+interface Props {
+	children?: ReactNode;
+	fallback: ReactNode;
+}
+
+interface State {
+	hasError: boolean;
+}
+
+export default class ErrorBoundary extends Component<Props, State> {
+	public state: State = {
+		hasError: false,
+	};
+
+	public static getDerivedStateFromError(): State {
+		// Update state so the next render will show the fallback UI.
+		return { hasError: true };
+	}
+
+	public render() {
+		if ( this.state.hasError ) {
+			return this.props.fallback;
+		}
+
+		return this.props.children;
+	}
+}

package/src/components/filler-wrapper.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ReactNode, Suspense } from 'react';
+import ErrorBoundary from './error-boundary';
+
+export default function FillerWrapper( { children }: { children: ReactNode } ) {
+	return (
+		<ErrorBoundary fallback={ null }>
+			<Suspense fallback={ null }>
+				{ children }
+			</Suspense>
+		</ErrorBoundary>
+	);
+}

package/src/components/slot.tsx

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,18 @@
+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/index.ts

@@ -0,0 +1,4 @@
+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';