piral-core 0.15.0 → 0.15.1-beta.4906
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/esm/components/ForeignComponentContainer.d.ts +0 -1
- package/esm/components/ForeignComponentContainer.js +7 -14
- package/esm/components/ForeignComponentContainer.js.map +1 -1
- package/lib/components/ForeignComponentContainer.d.ts +0 -1
- package/lib/components/ForeignComponentContainer.js +7 -14
- package/lib/components/ForeignComponentContainer.js.map +1 -1
- package/package.json +4 -4
- package/src/components/ForeignComponentContainer.test.tsx +0 -18
- package/src/components/ForeignComponentContainer.tsx +7 -14
|
@@ -4,24 +4,18 @@ export class ForeignComponentContainer extends React.Component {
|
|
|
4
4
|
constructor() {
|
|
5
5
|
super(...arguments);
|
|
6
6
|
this.locals = {};
|
|
7
|
-
this.handler = (ev) => {
|
|
8
|
-
const { innerProps } = this.props;
|
|
9
|
-
ev.stopPropagation();
|
|
10
|
-
innerProps.piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
|
|
11
|
-
};
|
|
12
7
|
this.setNode = (node) => {
|
|
13
8
|
this.current = node;
|
|
14
9
|
};
|
|
15
10
|
}
|
|
16
11
|
componentDidMount() {
|
|
17
|
-
const
|
|
12
|
+
const { current } = this;
|
|
18
13
|
const { $component, $context, innerProps } = this.props;
|
|
19
14
|
const { mount } = $component;
|
|
20
|
-
if (
|
|
21
|
-
mount(
|
|
22
|
-
node.addEventListener('render-html', this.handler, false);
|
|
15
|
+
if (current && isfunc(mount)) {
|
|
16
|
+
mount(current, innerProps, $context, this.locals);
|
|
23
17
|
}
|
|
24
|
-
this.previous =
|
|
18
|
+
this.previous = current;
|
|
25
19
|
}
|
|
26
20
|
componentDidUpdate() {
|
|
27
21
|
const { current, previous } = this;
|
|
@@ -36,12 +30,11 @@ export class ForeignComponentContainer extends React.Component {
|
|
|
36
30
|
}
|
|
37
31
|
}
|
|
38
32
|
componentWillUnmount() {
|
|
39
|
-
const
|
|
33
|
+
const { previous } = this;
|
|
40
34
|
const { $component } = this.props;
|
|
41
35
|
const { unmount } = $component;
|
|
42
|
-
if (
|
|
43
|
-
unmount(
|
|
44
|
-
node.removeEventListener('render-html', this.handler, false);
|
|
36
|
+
if (previous && isfunc(unmount)) {
|
|
37
|
+
unmount(previous, this.locals);
|
|
45
38
|
}
|
|
46
39
|
this.previous = undefined;
|
|
47
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ForeignComponentContainer.js","sourceRoot":"","sources":["../../src/components/ForeignComponentContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAWpC,MAAM,OAAO,yBAA6B,SAAQ,KAAK,CAAC,SAA4C;IAApG;;QACU,WAAM,GAAyB,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"ForeignComponentContainer.js","sourceRoot":"","sources":["../../src/components/ForeignComponentContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAWpC,MAAM,OAAO,yBAA6B,SAAQ,KAAK,CAAC,SAA4C;IAApG;;QACU,WAAM,GAAyB,EAAE,CAAC;QAIlC,YAAO,GAAG,CAAC,IAAoB,EAAE,EAAE;YACzC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;IA2CJ,CAAC;IAzCC,iBAAiB;QACf,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACzB,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACxD,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC;QAE7B,IAAI,OAAO,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE;YAC5B,KAAK,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;SACnD;QAED,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;IAC1B,CAAC;IAED,kBAAkB;QAChB,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACxD,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;QAE9B,IAAI,OAAO,KAAK,QAAQ,EAAE;YACxB,QAAQ,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YACxC,OAAO,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;SACrC;aAAM,IAAI,MAAM,CAAC,MAAM,CAAC,EAAE;YACzB,MAAM,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;SACpD;IACH,CAAC;IAED,oBAAoB;QAClB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAClC,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC;QAE/B,IAAI,QAAQ,IAAI,MAAM,CAAC,OAAO,CAAC,EAAE;YAC/B,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;SAChC;QAED,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;IAC5B,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,OAAO,sCAAc,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,GAAI,CAAC;IAC7D,CAAC;CACF"}
|
|
@@ -7,24 +7,18 @@ class ForeignComponentContainer extends React.Component {
|
|
|
7
7
|
constructor() {
|
|
8
8
|
super(...arguments);
|
|
9
9
|
this.locals = {};
|
|
10
|
-
this.handler = (ev) => {
|
|
11
|
-
const { innerProps } = this.props;
|
|
12
|
-
ev.stopPropagation();
|
|
13
|
-
innerProps.piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
|
|
14
|
-
};
|
|
15
10
|
this.setNode = (node) => {
|
|
16
11
|
this.current = node;
|
|
17
12
|
};
|
|
18
13
|
}
|
|
19
14
|
componentDidMount() {
|
|
20
|
-
const
|
|
15
|
+
const { current } = this;
|
|
21
16
|
const { $component, $context, innerProps } = this.props;
|
|
22
17
|
const { mount } = $component;
|
|
23
|
-
if (
|
|
24
|
-
mount(
|
|
25
|
-
node.addEventListener('render-html', this.handler, false);
|
|
18
|
+
if (current && (0, piral_base_1.isfunc)(mount)) {
|
|
19
|
+
mount(current, innerProps, $context, this.locals);
|
|
26
20
|
}
|
|
27
|
-
this.previous =
|
|
21
|
+
this.previous = current;
|
|
28
22
|
}
|
|
29
23
|
componentDidUpdate() {
|
|
30
24
|
const { current, previous } = this;
|
|
@@ -39,12 +33,11 @@ class ForeignComponentContainer extends React.Component {
|
|
|
39
33
|
}
|
|
40
34
|
}
|
|
41
35
|
componentWillUnmount() {
|
|
42
|
-
const
|
|
36
|
+
const { previous } = this;
|
|
43
37
|
const { $component } = this.props;
|
|
44
38
|
const { unmount } = $component;
|
|
45
|
-
if (
|
|
46
|
-
unmount(
|
|
47
|
-
node.removeEventListener('render-html', this.handler, false);
|
|
39
|
+
if (previous && (0, piral_base_1.isfunc)(unmount)) {
|
|
40
|
+
unmount(previous, this.locals);
|
|
48
41
|
}
|
|
49
42
|
this.previous = undefined;
|
|
50
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ForeignComponentContainer.js","sourceRoot":"","sources":["../../src/components/ForeignComponentContainer.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,2CAAoC;AAWpC,MAAa,yBAA6B,SAAQ,KAAK,CAAC,SAA4C;IAApG;;QACU,WAAM,GAAyB,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"ForeignComponentContainer.js","sourceRoot":"","sources":["../../src/components/ForeignComponentContainer.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,2CAAoC;AAWpC,MAAa,yBAA6B,SAAQ,KAAK,CAAC,SAA4C;IAApG;;QACU,WAAM,GAAyB,EAAE,CAAC;QAIlC,YAAO,GAAG,CAAC,IAAoB,EAAE,EAAE;YACzC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;IA2CJ,CAAC;IAzCC,iBAAiB;QACf,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACzB,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACxD,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC;QAE7B,IAAI,OAAO,IAAI,IAAA,mBAAM,EAAC,KAAK,CAAC,EAAE;YAC5B,KAAK,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;SACnD;QAED,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;IAC1B,CAAC;IAED,kBAAkB;QAChB,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACxD,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;QAE9B,IAAI,OAAO,KAAK,QAAQ,EAAE;YACxB,QAAQ,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YACxC,OAAO,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;SACrC;aAAM,IAAI,IAAA,mBAAM,EAAC,MAAM,CAAC,EAAE;YACzB,MAAM,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;SACpD;IACH,CAAC;IAED,oBAAoB;QAClB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAClC,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC;QAE/B,IAAI,QAAQ,IAAI,IAAA,mBAAM,EAAC,OAAO,CAAC,EAAE;YAC/B,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;SAChC;QAED,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;IAC5B,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,OAAO,sCAAc,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,GAAI,CAAC;IAC7D,CAAC;CACF;AAlDD,8DAkDC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "piral-core",
|
|
3
|
-
"version": "0.15.
|
|
3
|
+
"version": "0.15.1-beta.4906",
|
|
4
4
|
"description": "The core library for creating a Piral instance.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"portal",
|
|
@@ -72,8 +72,8 @@
|
|
|
72
72
|
"test": "echo \"Error: run tests from root\" && exit 1"
|
|
73
73
|
},
|
|
74
74
|
"dependencies": {
|
|
75
|
-
"piral-base": "
|
|
76
|
-
"piral-debug-utils": "
|
|
75
|
+
"piral-base": "0.15.1-beta.4906",
|
|
76
|
+
"piral-debug-utils": "0.15.1-beta.4906",
|
|
77
77
|
"zustand": "^3.0.0"
|
|
78
78
|
},
|
|
79
79
|
"peerDependencies": {
|
|
@@ -99,5 +99,5 @@
|
|
|
99
99
|
"react-router-dom",
|
|
100
100
|
"tslib"
|
|
101
101
|
],
|
|
102
|
-
"gitHead": "
|
|
102
|
+
"gitHead": "478dd9009975d891b6734ea0a0ba499fc9212126"
|
|
103
103
|
}
|
|
@@ -97,22 +97,4 @@ describe('ForeignComponentContainer component', () => {
|
|
|
97
97
|
expect(unmount).toHaveBeenCalled();
|
|
98
98
|
container.unmount();
|
|
99
99
|
});
|
|
100
|
-
|
|
101
|
-
it('listens to render-html', async () => {
|
|
102
|
-
const mount = jest.fn();
|
|
103
|
-
const renderHtmlExtension = jest.fn();
|
|
104
|
-
const component = { mount };
|
|
105
|
-
const props = { piral: { renderHtmlExtension }, meta: {} };
|
|
106
|
-
const container = render(
|
|
107
|
-
<ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={props} />,
|
|
108
|
-
);
|
|
109
|
-
await act(resolveAfter);
|
|
110
|
-
expect(mount).toHaveBeenCalled();
|
|
111
|
-
const node = document.querySelector('piral-portal[pid=foo]');
|
|
112
|
-
expect(renderHtmlExtension).not.toHaveBeenCalled();
|
|
113
|
-
node?.dispatchEvent(new CustomEvent('render-html', { detail: {} }));
|
|
114
|
-
await act(resolveAfter);
|
|
115
|
-
expect(renderHtmlExtension).toHaveBeenCalled();
|
|
116
|
-
container.unmount();
|
|
117
|
-
});
|
|
118
100
|
});
|
|
@@ -14,27 +14,21 @@ export class ForeignComponentContainer<T> extends React.Component<ForeignCompone
|
|
|
14
14
|
private locals?: Record<string, any> = {};
|
|
15
15
|
private current?: HTMLElement;
|
|
16
16
|
private previous?: HTMLElement;
|
|
17
|
-
private handler = (ev: CustomEvent) => {
|
|
18
|
-
const { innerProps } = this.props;
|
|
19
|
-
ev.stopPropagation();
|
|
20
|
-
innerProps.piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
|
|
21
|
-
};
|
|
22
17
|
|
|
23
18
|
private setNode = (node: HTMLDivElement) => {
|
|
24
19
|
this.current = node;
|
|
25
20
|
};
|
|
26
21
|
|
|
27
22
|
componentDidMount() {
|
|
28
|
-
const
|
|
23
|
+
const { current } = this;
|
|
29
24
|
const { $component, $context, innerProps } = this.props;
|
|
30
25
|
const { mount } = $component;
|
|
31
26
|
|
|
32
|
-
if (
|
|
33
|
-
mount(
|
|
34
|
-
node.addEventListener('render-html', this.handler, false);
|
|
27
|
+
if (current && isfunc(mount)) {
|
|
28
|
+
mount(current, innerProps, $context, this.locals);
|
|
35
29
|
}
|
|
36
30
|
|
|
37
|
-
this.previous =
|
|
31
|
+
this.previous = current;
|
|
38
32
|
}
|
|
39
33
|
|
|
40
34
|
componentDidUpdate() {
|
|
@@ -51,13 +45,12 @@ export class ForeignComponentContainer<T> extends React.Component<ForeignCompone
|
|
|
51
45
|
}
|
|
52
46
|
|
|
53
47
|
componentWillUnmount() {
|
|
54
|
-
const
|
|
48
|
+
const { previous } = this;
|
|
55
49
|
const { $component } = this.props;
|
|
56
50
|
const { unmount } = $component;
|
|
57
51
|
|
|
58
|
-
if (
|
|
59
|
-
unmount(
|
|
60
|
-
node.removeEventListener('render-html', this.handler, false);
|
|
52
|
+
if (previous && isfunc(unmount)) {
|
|
53
|
+
unmount(previous, this.locals);
|
|
61
54
|
}
|
|
62
55
|
|
|
63
56
|
this.previous = undefined;
|