@elementor/locations 0.7.3 → 0.7.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -50
- package/dist/index.js.map +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +44 -37
- package/src/api.tsx +13 -12
- package/src/components/error-boundary.tsx +1 -1
- package/src/components/injected-component-wrapper.tsx +1 -3
- package/src/index.ts +1 -4
- package/src/types.ts +13 -13
- package/src/__tests__/index.test.tsx +0 -232
- package/typedoc.config.js +0 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,105 +3,68 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [0.7.
|
|
7
|
-
|
|
8
|
-
**Note:** Version bump only for package @elementor/locations
|
|
9
|
-
|
|
6
|
+
## [0.7.5](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.7.4...@elementor/locations@0.7.5) (2024-08-05)
|
|
10
7
|
|
|
8
|
+
### Bug Fixes
|
|
11
9
|
|
|
10
|
+
- publish only necessary files to npm ([#226](https://github.com/elementor/elementor-packages/issues/226)) ([d808e2f](https://github.com/elementor/elementor-packages/commit/d808e2f60eb7ca2d7b8560d0b79c0e62c2f969a8))
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
## [0.7.2](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.7.1...@elementor/locations@0.7.2) (2023-10-19)
|
|
12
|
+
## [0.7.4](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.7.3...@elementor/locations@0.7.4) (2024-07-16)
|
|
15
13
|
|
|
16
14
|
**Note:** Version bump only for package @elementor/locations
|
|
17
15
|
|
|
16
|
+
## [0.7.3](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.7.2...@elementor/locations@0.7.3) (2024-07-03)
|
|
18
17
|
|
|
18
|
+
**Note:** Version bump only for package @elementor/locations
|
|
19
19
|
|
|
20
|
+
## [0.7.2](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.7.1...@elementor/locations@0.7.2) (2023-10-19)
|
|
20
21
|
|
|
22
|
+
**Note:** Version bump only for package @elementor/locations
|
|
21
23
|
|
|
22
24
|
## [0.7.1](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.7.0...@elementor/locations@0.7.1) (2023-09-26)
|
|
23
25
|
|
|
24
26
|
**Note:** Version bump only for package @elementor/locations
|
|
25
27
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
28
|
# [0.7.0](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.6.3...@elementor/locations@0.7.0) (2023-09-11)
|
|
31
29
|
|
|
32
|
-
|
|
33
30
|
### Features
|
|
34
31
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
32
|
+
- **locations:** mark experimental functions [ED-12077] ([#116](https://github.com/elementor/elementor-packages/issues/116)) ([47d72cd](https://github.com/elementor/elementor-packages/commit/47d72cd464e6164860c5f14a92b0264058da053c))
|
|
40
33
|
|
|
41
34
|
## [0.6.3](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.6.2...@elementor/locations@0.6.3) (2023-08-02)
|
|
42
35
|
|
|
43
36
|
**Note:** Version bump only for package @elementor/locations
|
|
44
37
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
38
|
## [0.6.2](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.6.1...@elementor/locations@0.6.2) (2023-07-17)
|
|
50
39
|
|
|
51
40
|
**Note:** Version bump only for package @elementor/locations
|
|
52
41
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
42
|
## [0.6.1](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.6.0...@elementor/locations@0.6.1) (2023-07-17)
|
|
58
43
|
|
|
59
44
|
**Note:** Version bump only for package @elementor/locations
|
|
60
45
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
46
|
# [0.6.0](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.5.0...@elementor/locations@0.6.0) (2023-06-11)
|
|
66
47
|
|
|
67
|
-
|
|
68
48
|
### Features
|
|
69
49
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
50
|
+
- **editor-panels:** init [ED-10804] ([#44](https://github.com/elementor/elementor-packages/issues/44)) ([1ed4113](https://github.com/elementor/elementor-packages/commit/1ed41131db8fb9151163175bfa614f784159e04b))
|
|
75
51
|
|
|
76
52
|
# [0.5.0](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.4.0...@elementor/locations@0.5.0) (2023-06-06)
|
|
77
53
|
|
|
78
|
-
|
|
79
54
|
### Features
|
|
80
55
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
56
|
+
- drop support for React 17 [ED-10982] ([#50](https://github.com/elementor/elementor-packages/issues/50)) ([59c576c](https://github.com/elementor/elementor-packages/commit/59c576ca218947dc0992616311d4d399a20e91a6))
|
|
86
57
|
|
|
87
58
|
# [0.4.0](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.3.0...@elementor/locations@0.4.0) (2023-06-01)
|
|
88
59
|
|
|
89
|
-
|
|
90
60
|
### Features
|
|
91
61
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
62
|
+
- add support for React 18 [ED-10905] ([#46](https://github.com/elementor/elementor-packages/issues/46)) ([c8915c6](https://github.com/elementor/elementor-packages/commit/c8915c6ea62550bcdeb5c8a576f311bedc35bcad))
|
|
97
63
|
|
|
98
64
|
# 0.3.0 (2023-05-21)
|
|
99
65
|
|
|
100
|
-
|
|
101
66
|
### Features
|
|
102
67
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
68
|
+
- **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))
|
|
106
69
|
|
|
107
70
|
# 0.2.0 (2023-05-09)
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/api.tsx","../src/components/injected-component-wrapper.tsx","../src/components/error-boundary.tsx"],"sourcesContent":["export * from './types';\n\nexport {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/api.tsx","../src/components/injected-component-wrapper.tsx","../src/components/error-boundary.tsx"],"sourcesContent":["export * from './types';\n\nexport { createLocation, flushAllInjections as __flushAllInjections } from './api';\n","import * as React from 'react';\nimport { InjectedComponent, Injection, InjectArgs, AnyProps, Location, Id } from './types';\nimport InjectedComponentWrapper from './components/injected-component-wrapper';\nimport { useMemo } from 'react';\n\ntype InjectionsMap< TProps extends object = AnyProps > = Map< Id, Injection< TProps > >;\n\nconst DEFAULT_PRIORITY = 10;\n\n// Allow flushing all injections at once, for testing purposes.\nconst flushInjectionsFns: ( () => void )[] = [];\n\nexport function createLocation< TProps extends object = AnyProps >(): Location< TProps > {\n\tconst injections: InjectionsMap< TProps > = new Map();\n\n\tconst getInjections = createGetInjections( injections );\n\tconst useInjections = createUseInjections( getInjections );\n\tconst Slot = createSlot( useInjections );\n\tconst inject = createInject( injections );\n\n\t// Push the clear function to the flushInjectionsFns array, so we can flush all injections at once.\n\tflushInjectionsFns.push( () => injections.clear() );\n\n\treturn {\n\t\tinject,\n\t\tgetInjections,\n\t\tuseInjections,\n\t\tSlot,\n\t};\n}\n\nexport function flushAllInjections() {\n\tflushInjectionsFns.forEach( ( flush ) => flush() );\n}\n\nfunction wrapInjectedComponent< TProps extends object = AnyProps >( Component: InjectedComponent< TProps > ) {\n\treturn ( props: TProps ) => (\n\t\t<InjectedComponentWrapper>\n\t\t\t<Component { ...props } />\n\t\t</InjectedComponentWrapper>\n\t);\n}\n\nfunction createSlot< TProps extends object = AnyProps >( useInjections: Location< TProps >[ 'useInjections' ] ) {\n\treturn ( props: TProps ) => {\n\t\tconst injections = useInjections();\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ injections.map( ( { id, component: Component } ) => (\n\t\t\t\t\t<Component { ...props } key={ id } />\n\t\t\t\t) ) }\n\t\t\t</>\n\t\t);\n\t};\n}\n\nfunction createGetInjections< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {\n\treturn () => [ ...injections.values() ].sort( ( a, b ) => a.priority - b.priority );\n}\n\nfunction createInject< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {\n\treturn ( { component, id, options = {} }: InjectArgs< TProps > ) => {\n\t\tif ( injections.has( id ) && ! options?.overwrite ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`An injection with the id \"${ id }\" already exists. Did you mean to use \"options.overwrite\"?`\n\t\t\t);\n\n\t\t\treturn;\n\t\t}\n\n\t\tinjections.set( id, {\n\t\t\tid,\n\t\t\tcomponent: wrapInjectedComponent( component ),\n\t\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t\t} );\n\t};\n}\n\nfunction createUseInjections< TProps extends object = AnyProps >(\n\tgetInjections: Location< TProps >[ 'getInjections' ]\n) {\n\treturn () => useMemo( () => getInjections(), [] );\n}\n","import * as React from 'react';\nimport { ReactNode, Suspense } from 'react';\nimport ErrorBoundary from './error-boundary';\n\nexport default function InjectedComponentWrapper( { children }: { children: ReactNode } ) {\n\treturn (\n\t\t<ErrorBoundary fallback={ null }>\n\t\t\t<Suspense fallback={ null }>{ children }</Suspense>\n\t\t</ErrorBoundary>\n\t);\n}\n","import { Component, ReactNode } from 'react';\n\ninterface Props {\n\tchildren?: ReactNode;\n\tfallback: ReactNode;\n}\n\ninterface State {\n\thasError: boolean;\n}\n\nexport default class ErrorBoundary extends Component< Props, State > {\n\tpublic state: State = {\n\t\thasError: false,\n\t};\n\n\tpublic static getDerivedStateFromError(): State {\n\t\t// Update state so the next render will show the fallback UI.\n\t\treturn { hasError: true };\n\t}\n\n\tpublic render() {\n\t\tif ( this.state.hasError ) {\n\t\t\treturn this.props.fallback;\n\t\t}\n\n\t\treturn this.props.children;\n\t}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACAvB,YAAuB;AACvB,IAAAC,gBAAoC;;;ACDpC,mBAAqC;AAWrC,IAAqB,gBAArB,cAA2C,uBAA0B;AAAA,EAC7D,QAAe;AAAA,IACrB,UAAU;AAAA,EACX;AAAA,EAEA,OAAc,2BAAkC;AAE/C,WAAO,EAAE,UAAU,KAAK;AAAA,EACzB;AAAA,EAEO,SAAS;AACf,QAAK,KAAK,MAAM,UAAW;AAC1B,aAAO,KAAK,MAAM;AAAA,IACnB;AAEA,WAAO,KAAK,MAAM;AAAA,EACnB;AACD;;;ADxBe,SAAR,yBAA2C,EAAE,SAAS,GAA6B;AACzF,SACC,oCAAC,iBAAc,UAAW,QACzB,oCAAC,0BAAS,UAAW,QAAS,QAAU,CACzC;AAEF;;;ADPA,IAAAC,gBAAwB;AAIxB,IAAM,mBAAmB;AAGzB,IAAM,qBAAuC,CAAC;AAEvC,SAAS,iBAAyE;AACxF,QAAM,aAAsC,oBAAI,IAAI;AAEpD,QAAM,gBAAgB,oBAAqB,UAAW;AACtD,QAAM,gBAAgB,oBAAqB,aAAc;AACzD,QAAM,OAAO,WAAY,aAAc;AACvC,QAAM,SAAS,aAAc,UAAW;AAGxC,qBAAmB,KAAM,MAAM,WAAW,MAAM,CAAE;AAElD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;AAEO,SAAS,qBAAqB;AACpC,qBAAmB,QAAS,CAAE,UAAW,MAAM,CAAE;AAClD;AAEA,SAAS,sBAA2DC,YAAyC;AAC5G,SAAO,CAAE,UACR,qCAAC,gCACA,qCAACA,YAAA,EAAY,GAAG,OAAQ,CACzB;AAEF;AAEA,SAAS,WAAgD,eAAuD;AAC/G,SAAO,CAAE,UAAmB;AAC3B,UAAM,aAAa,cAAc;AAEjC,WACC,4DACG,WAAW,IAAK,CAAE,EAAE,IAAI,WAAWA,WAAU,MAC9C,qCAACA,YAAA,EAAY,GAAG,OAAQ,KAAM,IAAK,CAClC,CACH;AAAA,EAEF;AACD;AAEA,SAAS,oBAAyD,YAAsC;AACvG,SAAO,MAAM,CAAE,GAAG,WAAW,OAAO,CAAE,EAAE,KAAM,CAAE,GAAG,MAAO,EAAE,WAAW,EAAE,QAAS;AACnF;AAEA,SAAS,aAAkD,YAAsC;AAChG,SAAO,CAAE,EAAE,WAAW,IAAI,UAAU,CAAC,EAAE,MAA6B;AACnE,QAAK,WAAW,IAAK,EAAG,KAAK,CAAE,SAAS,WAAY;AAEnD,cAAQ;AAAA,QACP,6BAA8B,EAAG;AAAA,MAClC;AAEA;AAAA,IACD;AAEA,eAAW,IAAK,IAAI;AAAA,MACnB;AAAA,MACA,WAAW,sBAAuB,SAAU;AAAA,MAC5C,UAAU,QAAQ,YAAY;AAAA,IAC/B,CAAE;AAAA,EACH;AACD;AAEA,SAAS,oBACR,eACC;AACD,SAAO,UAAM,uBAAS,MAAM,cAAc,GAAG,CAAC,CAAE;AACjD;","names":["React","import_react","import_react","Component"]}
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/api.tsx","../src/components/injected-component-wrapper.tsx","../src/components/error-boundary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { InjectedComponent, Injection, InjectArgs, AnyProps, Location, Id } from './types';\nimport InjectedComponentWrapper from './components/injected-component-wrapper';\nimport { useMemo } from 'react';\n\ntype InjectionsMap<TProps extends object = AnyProps> = Map<Id, Injection<TProps
|
|
1
|
+
{"version":3,"sources":["../src/api.tsx","../src/components/injected-component-wrapper.tsx","../src/components/error-boundary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { InjectedComponent, Injection, InjectArgs, AnyProps, Location, Id } from './types';\nimport InjectedComponentWrapper from './components/injected-component-wrapper';\nimport { useMemo } from 'react';\n\ntype InjectionsMap< TProps extends object = AnyProps > = Map< Id, Injection< TProps > >;\n\nconst DEFAULT_PRIORITY = 10;\n\n// Allow flushing all injections at once, for testing purposes.\nconst flushInjectionsFns: ( () => void )[] = [];\n\nexport function createLocation< TProps extends object = AnyProps >(): Location< TProps > {\n\tconst injections: InjectionsMap< TProps > = new Map();\n\n\tconst getInjections = createGetInjections( injections );\n\tconst useInjections = createUseInjections( getInjections );\n\tconst Slot = createSlot( useInjections );\n\tconst inject = createInject( injections );\n\n\t// Push the clear function to the flushInjectionsFns array, so we can flush all injections at once.\n\tflushInjectionsFns.push( () => injections.clear() );\n\n\treturn {\n\t\tinject,\n\t\tgetInjections,\n\t\tuseInjections,\n\t\tSlot,\n\t};\n}\n\nexport function flushAllInjections() {\n\tflushInjectionsFns.forEach( ( flush ) => flush() );\n}\n\nfunction wrapInjectedComponent< TProps extends object = AnyProps >( Component: InjectedComponent< TProps > ) {\n\treturn ( props: TProps ) => (\n\t\t<InjectedComponentWrapper>\n\t\t\t<Component { ...props } />\n\t\t</InjectedComponentWrapper>\n\t);\n}\n\nfunction createSlot< TProps extends object = AnyProps >( useInjections: Location< TProps >[ 'useInjections' ] ) {\n\treturn ( props: TProps ) => {\n\t\tconst injections = useInjections();\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ injections.map( ( { id, component: Component } ) => (\n\t\t\t\t\t<Component { ...props } key={ id } />\n\t\t\t\t) ) }\n\t\t\t</>\n\t\t);\n\t};\n}\n\nfunction createGetInjections< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {\n\treturn () => [ ...injections.values() ].sort( ( a, b ) => a.priority - b.priority );\n}\n\nfunction createInject< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {\n\treturn ( { component, id, options = {} }: InjectArgs< TProps > ) => {\n\t\tif ( injections.has( id ) && ! options?.overwrite ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`An injection with the id \"${ id }\" already exists. Did you mean to use \"options.overwrite\"?`\n\t\t\t);\n\n\t\t\treturn;\n\t\t}\n\n\t\tinjections.set( id, {\n\t\t\tid,\n\t\t\tcomponent: wrapInjectedComponent( component ),\n\t\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t\t} );\n\t};\n}\n\nfunction createUseInjections< TProps extends object = AnyProps >(\n\tgetInjections: Location< TProps >[ 'getInjections' ]\n) {\n\treturn () => useMemo( () => getInjections(), [] );\n}\n","import * as React from 'react';\nimport { ReactNode, Suspense } from 'react';\nimport ErrorBoundary from './error-boundary';\n\nexport default function InjectedComponentWrapper( { children }: { children: ReactNode } ) {\n\treturn (\n\t\t<ErrorBoundary fallback={ null }>\n\t\t\t<Suspense fallback={ null }>{ children }</Suspense>\n\t\t</ErrorBoundary>\n\t);\n}\n","import { Component, ReactNode } from 'react';\n\ninterface Props {\n\tchildren?: ReactNode;\n\tfallback: ReactNode;\n}\n\ninterface State {\n\thasError: boolean;\n}\n\nexport default class ErrorBoundary extends Component< Props, State > {\n\tpublic state: State = {\n\t\thasError: false,\n\t};\n\n\tpublic static getDerivedStateFromError(): State {\n\t\t// Update state so the next render will show the fallback UI.\n\t\treturn { hasError: true };\n\t}\n\n\tpublic render() {\n\t\tif ( this.state.hasError ) {\n\t\t\treturn this.props.fallback;\n\t\t}\n\n\t\treturn this.props.children;\n\t}\n}\n"],"mappings":";AAAA,YAAYA,YAAW;;;ACAvB,YAAY,WAAW;AACvB,SAAoB,gBAAgB;;;ACDpC,SAAS,iBAA4B;AAWrC,IAAqB,gBAArB,cAA2C,UAA0B;AAAA,EAC7D,QAAe;AAAA,IACrB,UAAU;AAAA,EACX;AAAA,EAEA,OAAc,2BAAkC;AAE/C,WAAO,EAAE,UAAU,KAAK;AAAA,EACzB;AAAA,EAEO,SAAS;AACf,QAAK,KAAK,MAAM,UAAW;AAC1B,aAAO,KAAK,MAAM;AAAA,IACnB;AAEA,WAAO,KAAK,MAAM;AAAA,EACnB;AACD;;;ADxBe,SAAR,yBAA2C,EAAE,SAAS,GAA6B;AACzF,SACC,oCAAC,iBAAc,UAAW,QACzB,oCAAC,YAAS,UAAW,QAAS,QAAU,CACzC;AAEF;;;ADPA,SAAS,eAAe;AAIxB,IAAM,mBAAmB;AAGzB,IAAM,qBAAuC,CAAC;AAEvC,SAAS,iBAAyE;AACxF,QAAM,aAAsC,oBAAI,IAAI;AAEpD,QAAM,gBAAgB,oBAAqB,UAAW;AACtD,QAAM,gBAAgB,oBAAqB,aAAc;AACzD,QAAM,OAAO,WAAY,aAAc;AACvC,QAAM,SAAS,aAAc,UAAW;AAGxC,qBAAmB,KAAM,MAAM,WAAW,MAAM,CAAE;AAElD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;AAEO,SAAS,qBAAqB;AACpC,qBAAmB,QAAS,CAAE,UAAW,MAAM,CAAE;AAClD;AAEA,SAAS,sBAA2DC,YAAyC;AAC5G,SAAO,CAAE,UACR,qCAAC,gCACA,qCAACA,YAAA,EAAY,GAAG,OAAQ,CACzB;AAEF;AAEA,SAAS,WAAgD,eAAuD;AAC/G,SAAO,CAAE,UAAmB;AAC3B,UAAM,aAAa,cAAc;AAEjC,WACC,4DACG,WAAW,IAAK,CAAE,EAAE,IAAI,WAAWA,WAAU,MAC9C,qCAACA,YAAA,EAAY,GAAG,OAAQ,KAAM,IAAK,CAClC,CACH;AAAA,EAEF;AACD;AAEA,SAAS,oBAAyD,YAAsC;AACvG,SAAO,MAAM,CAAE,GAAG,WAAW,OAAO,CAAE,EAAE,KAAM,CAAE,GAAG,MAAO,EAAE,WAAW,EAAE,QAAS;AACnF;AAEA,SAAS,aAAkD,YAAsC;AAChG,SAAO,CAAE,EAAE,WAAW,IAAI,UAAU,CAAC,EAAE,MAA6B;AACnE,QAAK,WAAW,IAAK,EAAG,KAAK,CAAE,SAAS,WAAY;AAEnD,cAAQ;AAAA,QACP,6BAA8B,EAAG;AAAA,MAClC;AAEA;AAAA,IACD;AAEA,eAAW,IAAK,IAAI;AAAA,MACnB;AAAA,MACA,WAAW,sBAAuB,SAAU;AAAA,MAC5C,UAAU,QAAQ,YAAY;AAAA,IAC/B,CAAE;AAAA,EACH;AACD;AAEA,SAAS,oBACR,eACC;AACD,SAAO,MAAM,QAAS,MAAM,cAAc,GAAG,CAAC,CAAE;AACjD;","names":["React","Component"]}
|
package/package.json
CHANGED
|
@@ -1,39 +1,46 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
2
|
+
"name": "@elementor/locations",
|
|
3
|
+
"description": "Create & manage pluggable React applications",
|
|
4
|
+
"version": "0.7.5",
|
|
5
|
+
"private": false,
|
|
6
|
+
"author": "Elementor Team",
|
|
7
|
+
"homepage": "https://elementor.com/",
|
|
8
|
+
"license": "GPL-3.0-or-later",
|
|
9
|
+
"main": "dist/index.js",
|
|
10
|
+
"module": "dist/index.mjs",
|
|
11
|
+
"types": "dist/index.d.ts",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": "./dist/index.mjs",
|
|
15
|
+
"require": "./dist/index.js",
|
|
16
|
+
"types": "./dist/index.d.ts"
|
|
17
|
+
},
|
|
18
|
+
"./package.json": "./package.json"
|
|
19
|
+
},
|
|
20
|
+
"repository": {
|
|
21
|
+
"type": "git",
|
|
22
|
+
"url": "git+https://github.com/elementor/elementor-packages.git",
|
|
23
|
+
"directory": "packages/libs/locations"
|
|
24
|
+
},
|
|
25
|
+
"bugs": {
|
|
26
|
+
"url": "https://github.com/elementor/elementor-packages/issues"
|
|
27
|
+
},
|
|
28
|
+
"publishConfig": {
|
|
29
|
+
"access": "public"
|
|
30
|
+
},
|
|
31
|
+
"files": [
|
|
32
|
+
"README.md",
|
|
33
|
+
"CHANGELOG.md",
|
|
34
|
+
"/dist",
|
|
35
|
+
"/src",
|
|
36
|
+
"!**/__tests__"
|
|
37
|
+
],
|
|
38
|
+
"scripts": {
|
|
39
|
+
"build": "tsup --config=../../tsup.build.ts",
|
|
40
|
+
"dev": "tsup --config=../../tsup.dev.ts"
|
|
41
|
+
},
|
|
42
|
+
"peerDependencies": {
|
|
43
|
+
"react": "^18.3.1"
|
|
44
|
+
},
|
|
45
|
+
"gitHead": "f4ca33da0842a29d83736d0a173633085edddaee"
|
|
39
46
|
}
|
package/src/api.tsx
CHANGED
|
@@ -3,15 +3,15 @@ import { InjectedComponent, Injection, InjectArgs, AnyProps, Location, Id } from
|
|
|
3
3
|
import InjectedComponentWrapper from './components/injected-component-wrapper';
|
|
4
4
|
import { useMemo } from 'react';
|
|
5
5
|
|
|
6
|
-
type InjectionsMap<TProps extends object = AnyProps> = Map<Id, Injection<TProps
|
|
6
|
+
type InjectionsMap< TProps extends object = AnyProps > = Map< Id, Injection< TProps > >;
|
|
7
7
|
|
|
8
8
|
const DEFAULT_PRIORITY = 10;
|
|
9
9
|
|
|
10
10
|
// Allow flushing all injections at once, for testing purposes.
|
|
11
11
|
const flushInjectionsFns: ( () => void )[] = [];
|
|
12
12
|
|
|
13
|
-
export function createLocation<TProps extends object = AnyProps>(): Location<TProps> {
|
|
14
|
-
const injections: InjectionsMap<TProps> = new Map();
|
|
13
|
+
export function createLocation< TProps extends object = AnyProps >(): Location< TProps > {
|
|
14
|
+
const injections: InjectionsMap< TProps > = new Map();
|
|
15
15
|
|
|
16
16
|
const getInjections = createGetInjections( injections );
|
|
17
17
|
const useInjections = createUseInjections( getInjections );
|
|
@@ -33,7 +33,7 @@ export function flushAllInjections() {
|
|
|
33
33
|
flushInjectionsFns.forEach( ( flush ) => flush() );
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
function wrapInjectedComponent<TProps extends object = AnyProps>( Component: InjectedComponent<TProps> ) {
|
|
36
|
+
function wrapInjectedComponent< TProps extends object = AnyProps >( Component: InjectedComponent< TProps > ) {
|
|
37
37
|
return ( props: TProps ) => (
|
|
38
38
|
<InjectedComponentWrapper>
|
|
39
39
|
<Component { ...props } />
|
|
@@ -41,7 +41,7 @@ function wrapInjectedComponent<TProps extends object = AnyProps>( Component: Inj
|
|
|
41
41
|
);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
function createSlot<TProps extends object = AnyProps>( useInjections: Location<TProps>[ 'useInjections' ] ) {
|
|
44
|
+
function createSlot< TProps extends object = AnyProps >( useInjections: Location< TProps >[ 'useInjections' ] ) {
|
|
45
45
|
return ( props: TProps ) => {
|
|
46
46
|
const injections = useInjections();
|
|
47
47
|
|
|
@@ -55,17 +55,16 @@ function createSlot<TProps extends object = AnyProps>( useInjections: Location<T
|
|
|
55
55
|
};
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
function createGetInjections<TProps extends object = AnyProps>( injections: InjectionsMap<TProps> ) {
|
|
59
|
-
return () => [ ...injections.values() ]
|
|
60
|
-
.sort( ( a, b ) => a.priority - b.priority );
|
|
58
|
+
function createGetInjections< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {
|
|
59
|
+
return () => [ ...injections.values() ].sort( ( a, b ) => a.priority - b.priority );
|
|
61
60
|
}
|
|
62
61
|
|
|
63
|
-
function createInject<TProps extends object = AnyProps>( injections: InjectionsMap<TProps> ) {
|
|
64
|
-
return ( { component, id, options = {} }: InjectArgs<TProps> ) => {
|
|
62
|
+
function createInject< TProps extends object = AnyProps >( injections: InjectionsMap< TProps > ) {
|
|
63
|
+
return ( { component, id, options = {} }: InjectArgs< TProps > ) => {
|
|
65
64
|
if ( injections.has( id ) && ! options?.overwrite ) {
|
|
66
65
|
// eslint-disable-next-line no-console
|
|
67
66
|
console.warn(
|
|
68
|
-
`An injection with the id "${ id }" already exists. Did you mean to use "options.overwrite"
|
|
67
|
+
`An injection with the id "${ id }" already exists. Did you mean to use "options.overwrite"?`
|
|
69
68
|
);
|
|
70
69
|
|
|
71
70
|
return;
|
|
@@ -79,6 +78,8 @@ function createInject<TProps extends object = AnyProps>( injections: InjectionsM
|
|
|
79
78
|
};
|
|
80
79
|
}
|
|
81
80
|
|
|
82
|
-
function createUseInjections<TProps extends object = AnyProps>(
|
|
81
|
+
function createUseInjections< TProps extends object = AnyProps >(
|
|
82
|
+
getInjections: Location< TProps >[ 'getInjections' ]
|
|
83
|
+
) {
|
|
83
84
|
return () => useMemo( () => getInjections(), [] );
|
|
84
85
|
}
|
|
@@ -5,9 +5,7 @@ import ErrorBoundary from './error-boundary';
|
|
|
5
5
|
export default function InjectedComponentWrapper( { children }: { children: ReactNode } ) {
|
|
6
6
|
return (
|
|
7
7
|
<ErrorBoundary fallback={ null }>
|
|
8
|
-
<Suspense fallback={ null }>
|
|
9
|
-
{ children }
|
|
10
|
-
</Suspense>
|
|
8
|
+
<Suspense fallback={ null }>{ children }</Suspense>
|
|
11
9
|
</ErrorBoundary>
|
|
12
10
|
);
|
|
13
11
|
}
|
package/src/index.ts
CHANGED
package/src/types.ts
CHANGED
|
@@ -3,11 +3,11 @@ import { ComponentType } from 'react';
|
|
|
3
3
|
// Allow passing the `key` prop even when there are no props for the component
|
|
4
4
|
export type AnyProps = object;
|
|
5
5
|
|
|
6
|
-
export type InjectedComponent<TProps extends object = AnyProps> = ComponentType<TProps>;
|
|
6
|
+
export type InjectedComponent< TProps extends object = AnyProps > = ComponentType< TProps >;
|
|
7
7
|
export type Id = string;
|
|
8
8
|
export type Priority = number;
|
|
9
9
|
|
|
10
|
-
export type Injection<TProps extends object = AnyProps> = {
|
|
10
|
+
export type Injection< TProps extends object = AnyProps > = {
|
|
11
11
|
/**
|
|
12
12
|
* A unique id (per location) of the injected component.
|
|
13
13
|
*/
|
|
@@ -15,14 +15,14 @@ export type Injection<TProps extends object = AnyProps> = {
|
|
|
15
15
|
/**
|
|
16
16
|
* The injected component.
|
|
17
17
|
*/
|
|
18
|
-
component: InjectedComponent<TProps>;
|
|
18
|
+
component: InjectedComponent< TProps >;
|
|
19
19
|
/**
|
|
20
20
|
* Priority of the injected component inside the location. Lower value means higher priority.
|
|
21
21
|
*/
|
|
22
22
|
priority: Priority;
|
|
23
|
-
}
|
|
23
|
+
};
|
|
24
24
|
|
|
25
|
-
export type InjectArgs<TProps extends object = AnyProps> = {
|
|
25
|
+
export type InjectArgs< TProps extends object = AnyProps > = {
|
|
26
26
|
/**
|
|
27
27
|
* A unique id (per location) of the component to be injected.
|
|
28
28
|
*/
|
|
@@ -30,7 +30,7 @@ export type InjectArgs<TProps extends object = AnyProps> = {
|
|
|
30
30
|
/**
|
|
31
31
|
* The component to be injected.
|
|
32
32
|
*/
|
|
33
|
-
component: InjectedComponent<TProps>;
|
|
33
|
+
component: InjectedComponent< TProps >;
|
|
34
34
|
|
|
35
35
|
options?: {
|
|
36
36
|
/**
|
|
@@ -42,18 +42,18 @@ export type InjectArgs<TProps extends object = AnyProps> = {
|
|
|
42
42
|
*/
|
|
43
43
|
overwrite?: boolean;
|
|
44
44
|
};
|
|
45
|
-
}
|
|
45
|
+
};
|
|
46
46
|
|
|
47
|
-
export type Location<TProps extends object = AnyProps> = {
|
|
47
|
+
export type Location< TProps extends object = AnyProps > = {
|
|
48
48
|
/**
|
|
49
49
|
* Inject a component into the location.
|
|
50
50
|
*/
|
|
51
|
-
inject: ( args: InjectArgs<TProps> ) => void;
|
|
51
|
+
inject: ( args: InjectArgs< TProps > ) => void;
|
|
52
52
|
/**
|
|
53
53
|
*
|
|
54
54
|
* @return All the injections in the location.
|
|
55
55
|
*/
|
|
56
|
-
getInjections: () => Injection<TProps>[];
|
|
57
|
-
useInjections: () => Injection<TProps>[];
|
|
58
|
-
Slot: ComponentType<TProps>;
|
|
59
|
-
}
|
|
56
|
+
getInjections: () => Injection< TProps >[];
|
|
57
|
+
useInjections: () => Injection< TProps >[];
|
|
58
|
+
Slot: ComponentType< TProps >;
|
|
59
|
+
};
|
|
@@ -1,232 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { render, screen } from '@testing-library/react';
|
|
3
|
-
import { lazy } from 'react';
|
|
4
|
-
import { createLocation } from '../api';
|
|
5
|
-
|
|
6
|
-
describe( '@elementor/locations', () => {
|
|
7
|
-
it( 'should render components based on the location name', () => {
|
|
8
|
-
// Arrange.
|
|
9
|
-
const { inject: injectIntoTest, Slot: TestSlot } = createLocation();
|
|
10
|
-
const { inject: injectIntoTest2 } = createLocation();
|
|
11
|
-
|
|
12
|
-
injectIntoTest( {
|
|
13
|
-
id: 'test-1',
|
|
14
|
-
component: () => <div data-testid="element">First div</div>,
|
|
15
|
-
} );
|
|
16
|
-
|
|
17
|
-
injectIntoTest( {
|
|
18
|
-
id: 'test-2',
|
|
19
|
-
component: () => <div data-testid="element">Second div</div>,
|
|
20
|
-
} );
|
|
21
|
-
|
|
22
|
-
injectIntoTest2( {
|
|
23
|
-
id: 'test-3',
|
|
24
|
-
component: () => <div data-testid="element">Should not exist</div>,
|
|
25
|
-
} );
|
|
26
|
-
|
|
27
|
-
// Act.
|
|
28
|
-
render( <TestSlot /> );
|
|
29
|
-
|
|
30
|
-
// Assert.
|
|
31
|
-
const elements = screen.getAllByTestId( 'element' );
|
|
32
|
-
|
|
33
|
-
expect( elements ).toHaveLength( 2 );
|
|
34
|
-
expect( elements[ 0 ].innerHTML ).toBe( 'First div' );
|
|
35
|
-
expect( elements[ 1 ].innerHTML ).toBe( 'Second div' );
|
|
36
|
-
} );
|
|
37
|
-
|
|
38
|
-
it( 'should render components based on priority', () => {
|
|
39
|
-
// Arrange.
|
|
40
|
-
const { inject, Slot } = createLocation();
|
|
41
|
-
|
|
42
|
-
inject( {
|
|
43
|
-
id: 'test-1',
|
|
44
|
-
component: () => <div data-testid="element">Third div</div>,
|
|
45
|
-
// Default priority is 10.
|
|
46
|
-
} );
|
|
47
|
-
|
|
48
|
-
inject( {
|
|
49
|
-
id: 'test-2',
|
|
50
|
-
component: () => <div data-testid="element">First div</div>,
|
|
51
|
-
options: { priority: 5 },
|
|
52
|
-
} );
|
|
53
|
-
|
|
54
|
-
inject( {
|
|
55
|
-
id: 'test-3',
|
|
56
|
-
component: () => <div data-testid="element">Second div</div>,
|
|
57
|
-
options: { priority: 5 },
|
|
58
|
-
} );
|
|
59
|
-
|
|
60
|
-
// Act.
|
|
61
|
-
render( <Slot /> );
|
|
62
|
-
|
|
63
|
-
// Assert.
|
|
64
|
-
const elements = screen.getAllByTestId( 'element' );
|
|
65
|
-
|
|
66
|
-
expect( elements ).toHaveLength( 3 );
|
|
67
|
-
expect( elements[ 0 ].innerHTML ).toBe( 'First div' );
|
|
68
|
-
expect( elements[ 1 ].innerHTML ).toBe( 'Second div' );
|
|
69
|
-
expect( elements[ 2 ].innerHTML ).toBe( 'Third div' );
|
|
70
|
-
} );
|
|
71
|
-
|
|
72
|
-
it( 'should render empty slot when there are no fills', () => {
|
|
73
|
-
// Arrange.
|
|
74
|
-
const { Slot } = createLocation();
|
|
75
|
-
|
|
76
|
-
// Act.
|
|
77
|
-
const { container } = render( <Slot /> );
|
|
78
|
-
|
|
79
|
-
// Assert.
|
|
80
|
-
expect( container ).toBeEmptyDOMElement( );
|
|
81
|
-
} );
|
|
82
|
-
|
|
83
|
-
it( 'should render lazy components', async () => {
|
|
84
|
-
// Arrange.
|
|
85
|
-
const { inject, Slot } = createLocation();
|
|
86
|
-
|
|
87
|
-
inject( {
|
|
88
|
-
id: 'test-1',
|
|
89
|
-
component: () => <div>First div</div>,
|
|
90
|
-
} );
|
|
91
|
-
|
|
92
|
-
inject( {
|
|
93
|
-
id: 'test-2',
|
|
94
|
-
component: lazy( () => Promise.resolve( {
|
|
95
|
-
default: () => <div>Second div</div>,
|
|
96
|
-
} ) ),
|
|
97
|
-
} );
|
|
98
|
-
|
|
99
|
-
// Act.
|
|
100
|
-
render( <Slot /> );
|
|
101
|
-
|
|
102
|
-
// Assert.
|
|
103
|
-
expect( screen.getByText( 'First div' ) ).toBeInTheDocument();
|
|
104
|
-
expect( screen.queryByText( 'Second div' ) ).not.toBeInTheDocument();
|
|
105
|
-
|
|
106
|
-
// Waits for the lazy component to be loaded.
|
|
107
|
-
await screen.findByText( 'Second div' );
|
|
108
|
-
|
|
109
|
-
expect( screen.getByText( 'First div' ) ).toBeInTheDocument();
|
|
110
|
-
expect( screen.getByText( 'Second div' ) ).toBeInTheDocument();
|
|
111
|
-
} );
|
|
112
|
-
|
|
113
|
-
it( 'should error when injecting a component with the same name (without overwrite option)', async () => {
|
|
114
|
-
// Arrange.
|
|
115
|
-
const { inject, Slot } = createLocation();
|
|
116
|
-
|
|
117
|
-
inject( {
|
|
118
|
-
id: 'test',
|
|
119
|
-
component: () => <div>First div</div>,
|
|
120
|
-
} );
|
|
121
|
-
|
|
122
|
-
inject( {
|
|
123
|
-
id: 'test',
|
|
124
|
-
component: () => <div>Second div</div>,
|
|
125
|
-
} );
|
|
126
|
-
|
|
127
|
-
// Act
|
|
128
|
-
render( <Slot /> );
|
|
129
|
-
|
|
130
|
-
// Assert.
|
|
131
|
-
expect( screen.getByText( 'First div' ) ).toBeInTheDocument();
|
|
132
|
-
expect( screen.queryByText( 'Second div' ) ).not.toBeInTheDocument();
|
|
133
|
-
expect( console ).toHaveWarned();
|
|
134
|
-
} );
|
|
135
|
-
|
|
136
|
-
it( 'should overwrite the injected component if has same name', async () => {
|
|
137
|
-
// Arrange.
|
|
138
|
-
const { inject, Slot } = createLocation();
|
|
139
|
-
|
|
140
|
-
inject( {
|
|
141
|
-
id: 'test',
|
|
142
|
-
component: () => <div>First div</div>,
|
|
143
|
-
} );
|
|
144
|
-
|
|
145
|
-
inject( {
|
|
146
|
-
id: 'test',
|
|
147
|
-
component: () => <div>Second div</div>,
|
|
148
|
-
options: { overwrite: true },
|
|
149
|
-
} );
|
|
150
|
-
|
|
151
|
-
inject( {
|
|
152
|
-
id: 'test-2',
|
|
153
|
-
component: () => <div>Third div</div>,
|
|
154
|
-
options: { overwrite: true },
|
|
155
|
-
} );
|
|
156
|
-
|
|
157
|
-
// Act
|
|
158
|
-
render( <Slot /> );
|
|
159
|
-
|
|
160
|
-
// Assert.
|
|
161
|
-
expect( screen.queryByText( 'First div' ) ).not.toBeInTheDocument();
|
|
162
|
-
expect( screen.getByText( 'Second div' ) ).toBeInTheDocument();
|
|
163
|
-
expect( screen.getByText( 'Third div' ) ).toBeInTheDocument();
|
|
164
|
-
} );
|
|
165
|
-
|
|
166
|
-
it( 'should overwrite the injection priority', () => {
|
|
167
|
-
// Arrange.
|
|
168
|
-
const { inject, getInjections } = createLocation();
|
|
169
|
-
|
|
170
|
-
inject( {
|
|
171
|
-
id: 'test-1',
|
|
172
|
-
component: () => <div />,
|
|
173
|
-
options: { priority: 5 },
|
|
174
|
-
} );
|
|
175
|
-
|
|
176
|
-
inject( {
|
|
177
|
-
id: 'test-1',
|
|
178
|
-
component: () => <div />,
|
|
179
|
-
options: { overwrite: true },
|
|
180
|
-
} );
|
|
181
|
-
|
|
182
|
-
// Act + Assert.
|
|
183
|
-
expect( getInjections() ).toHaveLength( 1 );
|
|
184
|
-
expect( getInjections()[ 0 ].priority ).toBe( 10 );
|
|
185
|
-
} );
|
|
186
|
-
|
|
187
|
-
it( 'should catch injected component errors with error boundary', () => {
|
|
188
|
-
// Arrange.
|
|
189
|
-
const { inject, Slot } = createLocation();
|
|
190
|
-
|
|
191
|
-
inject( {
|
|
192
|
-
id: 'test-1',
|
|
193
|
-
component: () => <div>Test 1</div>,
|
|
194
|
-
} );
|
|
195
|
-
|
|
196
|
-
inject( {
|
|
197
|
-
id: 'test-2',
|
|
198
|
-
component: () => {
|
|
199
|
-
throw new Error( 'Error' );
|
|
200
|
-
},
|
|
201
|
-
} );
|
|
202
|
-
|
|
203
|
-
inject( {
|
|
204
|
-
id: 'test-3',
|
|
205
|
-
component: () => <div>Test 3</div>,
|
|
206
|
-
} );
|
|
207
|
-
|
|
208
|
-
// Act.
|
|
209
|
-
render( <Slot /> );
|
|
210
|
-
|
|
211
|
-
// Assert.
|
|
212
|
-
expect( screen.getByText( 'Test 1' ) ).toBeInTheDocument();
|
|
213
|
-
expect( screen.getByText( 'Test 3' ) ).toBeInTheDocument();
|
|
214
|
-
expect( console ).toHaveErrored();
|
|
215
|
-
} );
|
|
216
|
-
|
|
217
|
-
it( 'should pass the props from Slot to the injected component', () => {
|
|
218
|
-
// Arrange.
|
|
219
|
-
const { inject, Slot } = createLocation<{ text: string, number: number }>();
|
|
220
|
-
|
|
221
|
-
inject( {
|
|
222
|
-
id: 'test-1',
|
|
223
|
-
component: ( { text, number } ) => <div>{ text }: { number }</div>,
|
|
224
|
-
} );
|
|
225
|
-
|
|
226
|
-
// Act.
|
|
227
|
-
render( <Slot text="The number is" number={ 1 } /> );
|
|
228
|
-
|
|
229
|
-
// Assert.
|
|
230
|
-
expect( screen.getByText( 'The number is: 1' ) ).toBeInTheDocument();
|
|
231
|
-
} );
|
|
232
|
-
} );
|