@merkur/plugin-component 0.38.0 → 0.39.0
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/lib/helpers.cjs +32 -37
- package/lib/helpers.js +32 -37
- package/lib/helpers.mjs +32 -37
- package/lib/index.cjs +34 -56
- package/lib/index.js +34 -56
- package/lib/index.mjs +34 -56
- package/package.json +4 -5
package/lib/helpers.cjs
CHANGED
|
@@ -7,14 +7,16 @@
|
|
|
7
7
|
*/
|
|
8
8
|
async function mapViews(widget, viewFactory, callback) {
|
|
9
9
|
if (widget.$in.component.resolvedViews.has(viewFactory)) {
|
|
10
|
-
return mapResolvedViews(
|
|
11
|
-
widget.$in.component.resolvedViews.get(viewFactory) ?? [],
|
|
12
|
-
callback,
|
|
13
|
-
);
|
|
10
|
+
return mapResolvedViews(widget.$in.component.resolvedViews.get(viewFactory) ?? [], callback);
|
|
14
11
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
const {
|
|
13
|
+
containerSelector
|
|
14
|
+
} = widget;
|
|
15
|
+
const {
|
|
16
|
+
View,
|
|
17
|
+
ErrorView,
|
|
18
|
+
slot = {}
|
|
19
|
+
} = await viewFactory(widget);
|
|
18
20
|
|
|
19
21
|
// Add additional slot information to slot views
|
|
20
22
|
const slots = Object.keys(widget.slot ?? {}).reduce((acc, cur) => {
|
|
@@ -22,43 +24,36 @@ async function mapViews(widget, viewFactory, callback) {
|
|
|
22
24
|
...slot[cur],
|
|
23
25
|
isSlot: true,
|
|
24
26
|
containerSelector: widget.slot[cur]?.containerSelector,
|
|
25
|
-
container: widget.slot[cur]?.container
|
|
27
|
+
container: widget.slot[cur]?.container
|
|
26
28
|
};
|
|
27
|
-
|
|
28
29
|
return acc;
|
|
29
30
|
}, {});
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
container: widget.container,
|
|
38
|
-
},
|
|
39
|
-
...Object.values(slots),
|
|
40
|
-
];
|
|
41
|
-
|
|
31
|
+
const views = [{
|
|
32
|
+
View,
|
|
33
|
+
ErrorView,
|
|
34
|
+
containerSelector,
|
|
35
|
+
isSlot: false,
|
|
36
|
+
container: widget.container
|
|
37
|
+
}, ...Object.values(slots)];
|
|
42
38
|
widget.$in.component.resolvedViews.set(viewFactory, views);
|
|
43
|
-
|
|
44
39
|
return mapResolvedViews(views, callback);
|
|
45
40
|
}
|
|
46
|
-
|
|
47
41
|
function mapResolvedViews(views, callback) {
|
|
48
|
-
return views.map(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
42
|
+
return views.map(({
|
|
43
|
+
View,
|
|
44
|
+
ErrorView,
|
|
45
|
+
containerSelector,
|
|
46
|
+
isSlot,
|
|
47
|
+
container
|
|
48
|
+
}) => {
|
|
49
|
+
callback({
|
|
50
|
+
View,
|
|
51
|
+
ErrorView,
|
|
52
|
+
isSlot,
|
|
53
|
+
containerSelector,
|
|
54
|
+
container: containerSelector && document?.querySelector(containerSelector) || container || null
|
|
55
|
+
});
|
|
56
|
+
});
|
|
62
57
|
}
|
|
63
58
|
|
|
64
59
|
exports.mapViews = mapViews;
|
package/lib/helpers.js
CHANGED
|
@@ -7,14 +7,16 @@
|
|
|
7
7
|
*/
|
|
8
8
|
async function mapViews(widget, viewFactory, callback) {
|
|
9
9
|
if (widget.$in.component.resolvedViews.has(viewFactory)) {
|
|
10
|
-
return mapResolvedViews(
|
|
11
|
-
widget.$in.component.resolvedViews.get(viewFactory) ?? [],
|
|
12
|
-
callback,
|
|
13
|
-
);
|
|
10
|
+
return mapResolvedViews(widget.$in.component.resolvedViews.get(viewFactory) ?? [], callback);
|
|
14
11
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
const {
|
|
13
|
+
containerSelector
|
|
14
|
+
} = widget;
|
|
15
|
+
const {
|
|
16
|
+
View,
|
|
17
|
+
ErrorView,
|
|
18
|
+
slot = {}
|
|
19
|
+
} = await viewFactory(widget);
|
|
18
20
|
|
|
19
21
|
// Add additional slot information to slot views
|
|
20
22
|
const slots = Object.keys(widget.slot ?? {}).reduce((acc, cur) => {
|
|
@@ -22,43 +24,36 @@ async function mapViews(widget, viewFactory, callback) {
|
|
|
22
24
|
...slot[cur],
|
|
23
25
|
isSlot: true,
|
|
24
26
|
containerSelector: widget.slot[cur]?.containerSelector,
|
|
25
|
-
container: widget.slot[cur]?.container
|
|
27
|
+
container: widget.slot[cur]?.container
|
|
26
28
|
};
|
|
27
|
-
|
|
28
29
|
return acc;
|
|
29
30
|
}, {});
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
container: widget.container,
|
|
38
|
-
},
|
|
39
|
-
...Object.values(slots),
|
|
40
|
-
];
|
|
41
|
-
|
|
31
|
+
const views = [{
|
|
32
|
+
View,
|
|
33
|
+
ErrorView,
|
|
34
|
+
containerSelector,
|
|
35
|
+
isSlot: false,
|
|
36
|
+
container: widget.container
|
|
37
|
+
}, ...Object.values(slots)];
|
|
42
38
|
widget.$in.component.resolvedViews.set(viewFactory, views);
|
|
43
|
-
|
|
44
39
|
return mapResolvedViews(views, callback);
|
|
45
40
|
}
|
|
46
|
-
|
|
47
41
|
function mapResolvedViews(views, callback) {
|
|
48
|
-
return views.map(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
42
|
+
return views.map(({
|
|
43
|
+
View,
|
|
44
|
+
ErrorView,
|
|
45
|
+
containerSelector,
|
|
46
|
+
isSlot,
|
|
47
|
+
container
|
|
48
|
+
}) => {
|
|
49
|
+
callback({
|
|
50
|
+
View,
|
|
51
|
+
ErrorView,
|
|
52
|
+
isSlot,
|
|
53
|
+
containerSelector,
|
|
54
|
+
container: containerSelector && document?.querySelector(containerSelector) || container || null
|
|
55
|
+
});
|
|
56
|
+
});
|
|
62
57
|
}
|
|
63
58
|
|
|
64
59
|
exports.mapViews = mapViews;
|
package/lib/helpers.mjs
CHANGED
|
@@ -5,14 +5,16 @@
|
|
|
5
5
|
*/
|
|
6
6
|
async function mapViews(widget, viewFactory, callback) {
|
|
7
7
|
if (widget.$in.component.resolvedViews.has(viewFactory)) {
|
|
8
|
-
return mapResolvedViews(
|
|
9
|
-
widget.$in.component.resolvedViews.get(viewFactory) ?? [],
|
|
10
|
-
callback,
|
|
11
|
-
);
|
|
8
|
+
return mapResolvedViews(widget.$in.component.resolvedViews.get(viewFactory) ?? [], callback);
|
|
12
9
|
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
const {
|
|
11
|
+
containerSelector
|
|
12
|
+
} = widget;
|
|
13
|
+
const {
|
|
14
|
+
View,
|
|
15
|
+
ErrorView,
|
|
16
|
+
slot = {}
|
|
17
|
+
} = await viewFactory(widget);
|
|
16
18
|
|
|
17
19
|
// Add additional slot information to slot views
|
|
18
20
|
const slots = Object.keys(widget.slot ?? {}).reduce((acc, cur) => {
|
|
@@ -20,43 +22,36 @@ async function mapViews(widget, viewFactory, callback) {
|
|
|
20
22
|
...slot[cur],
|
|
21
23
|
isSlot: true,
|
|
22
24
|
containerSelector: widget.slot[cur]?.containerSelector,
|
|
23
|
-
container: widget.slot[cur]?.container
|
|
25
|
+
container: widget.slot[cur]?.container
|
|
24
26
|
};
|
|
25
|
-
|
|
26
27
|
return acc;
|
|
27
28
|
}, {});
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
container: widget.container,
|
|
36
|
-
},
|
|
37
|
-
...Object.values(slots),
|
|
38
|
-
];
|
|
39
|
-
|
|
29
|
+
const views = [{
|
|
30
|
+
View,
|
|
31
|
+
ErrorView,
|
|
32
|
+
containerSelector,
|
|
33
|
+
isSlot: false,
|
|
34
|
+
container: widget.container
|
|
35
|
+
}, ...Object.values(slots)];
|
|
40
36
|
widget.$in.component.resolvedViews.set(viewFactory, views);
|
|
41
|
-
|
|
42
37
|
return mapResolvedViews(views, callback);
|
|
43
38
|
}
|
|
44
|
-
|
|
45
39
|
function mapResolvedViews(views, callback) {
|
|
46
|
-
return views.map(
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
40
|
+
return views.map(({
|
|
41
|
+
View,
|
|
42
|
+
ErrorView,
|
|
43
|
+
containerSelector,
|
|
44
|
+
isSlot,
|
|
45
|
+
container
|
|
46
|
+
}) => {
|
|
47
|
+
callback({
|
|
48
|
+
View,
|
|
49
|
+
ErrorView,
|
|
50
|
+
isSlot,
|
|
51
|
+
containerSelector,
|
|
52
|
+
container: containerSelector && document?.querySelector(containerSelector) || container || null
|
|
53
|
+
});
|
|
54
|
+
});
|
|
60
55
|
}
|
|
61
56
|
|
|
62
57
|
export { mapViews };
|
package/lib/index.cjs
CHANGED
|
@@ -14,54 +14,53 @@ function componentPlugin() {
|
|
|
14
14
|
update,
|
|
15
15
|
...widgetProperties
|
|
16
16
|
} = widgetDefinition;
|
|
17
|
-
|
|
18
17
|
const lifeCycle = {
|
|
19
18
|
info,
|
|
20
19
|
bootstrap,
|
|
21
20
|
load,
|
|
22
21
|
mount,
|
|
23
22
|
unmount,
|
|
24
|
-
update
|
|
23
|
+
update
|
|
25
24
|
};
|
|
26
|
-
|
|
27
25
|
widget.$in.component = {
|
|
28
26
|
lifeCycle,
|
|
29
27
|
isMounted: false,
|
|
30
28
|
isHydrated: false,
|
|
31
29
|
suspendedTasks: [],
|
|
32
|
-
resolvedViews: new Map()
|
|
30
|
+
resolvedViews: new Map()
|
|
33
31
|
};
|
|
34
|
-
|
|
35
32
|
core.assignMissingKeys(widget, componentAPI(), widgetProperties);
|
|
36
|
-
|
|
37
33
|
widget = core.setDefaultValueForUndefined(widget, ['props', 'state']);
|
|
38
34
|
widget = core.setDefaultValueForUndefined(widget, ['assets'], []);
|
|
39
35
|
widget = core.setDefaultValueForUndefined(widget, ['containerSelector'], null);
|
|
40
|
-
|
|
41
36
|
return widget;
|
|
42
37
|
},
|
|
43
38
|
create(widget) {
|
|
44
39
|
return widget;
|
|
45
40
|
// @TODO bind events
|
|
46
|
-
}
|
|
41
|
+
}
|
|
47
42
|
};
|
|
48
43
|
}
|
|
49
|
-
|
|
50
44
|
async function callLifeCycleMethod(widget, methodName, args) {
|
|
51
|
-
const {
|
|
52
|
-
|
|
45
|
+
const {
|
|
46
|
+
lifeCycle
|
|
47
|
+
} = widget.$in.component;
|
|
53
48
|
if (typeof lifeCycle[methodName] === 'function') {
|
|
54
49
|
return lifeCycle[methodName](widget, ...args);
|
|
55
50
|
}
|
|
56
51
|
}
|
|
57
|
-
|
|
58
52
|
function componentAPI() {
|
|
59
53
|
return {
|
|
60
54
|
async info(widget, ...args) {
|
|
61
|
-
const {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
55
|
+
const {
|
|
56
|
+
name,
|
|
57
|
+
version,
|
|
58
|
+
props,
|
|
59
|
+
state,
|
|
60
|
+
assets,
|
|
61
|
+
containerSelector
|
|
62
|
+
} = widget;
|
|
63
|
+
const componentInfo = (await callLifeCycleMethod(widget, 'info', args)) || {};
|
|
65
64
|
return {
|
|
66
65
|
name,
|
|
67
66
|
version,
|
|
@@ -69,44 +68,36 @@ function componentAPI() {
|
|
|
69
68
|
state,
|
|
70
69
|
assets,
|
|
71
70
|
containerSelector,
|
|
72
|
-
...componentInfo
|
|
71
|
+
...componentInfo
|
|
73
72
|
};
|
|
74
73
|
},
|
|
75
74
|
async mount(widget, ...args) {
|
|
76
75
|
await widget.bootstrap(...args);
|
|
77
76
|
await widget.load(...args);
|
|
78
|
-
|
|
79
77
|
const html = await callLifeCycleMethod(widget, 'mount', args);
|
|
80
78
|
widget.$in.component.isMounted = true;
|
|
81
|
-
|
|
82
79
|
for (let task of widget.$in.component.suspendedTasks) {
|
|
83
80
|
await task();
|
|
84
81
|
}
|
|
85
|
-
|
|
86
82
|
return html;
|
|
87
83
|
},
|
|
88
84
|
async unmount(widget, ...args) {
|
|
89
85
|
widget.$in.component.isMounted = false;
|
|
90
86
|
widget.$in.component.isHydrated = false;
|
|
91
|
-
|
|
92
87
|
return callLifeCycleMethod(widget, 'unmount', args);
|
|
93
88
|
},
|
|
94
89
|
async bootstrap(widget, ...args) {
|
|
95
90
|
return callLifeCycleMethod(widget, 'bootstrap', args);
|
|
96
91
|
},
|
|
97
92
|
async load(widget, ...args) {
|
|
98
|
-
const {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
state &&
|
|
104
|
-
Object.keys(state).length !== 0
|
|
105
|
-
) {
|
|
93
|
+
const {
|
|
94
|
+
$in,
|
|
95
|
+
state
|
|
96
|
+
} = widget;
|
|
97
|
+
if ($in.component.isMounted === false && $in.component.isHydrated === false && state && Object.keys(state).length !== 0) {
|
|
106
98
|
$in.component.isHydrated = true;
|
|
107
99
|
return;
|
|
108
100
|
}
|
|
109
|
-
|
|
110
101
|
widget.state = await callLifeCycleMethod(widget, 'load', args);
|
|
111
102
|
},
|
|
112
103
|
async update(widget, ...args) {
|
|
@@ -114,37 +105,27 @@ function componentAPI() {
|
|
|
114
105
|
widget.$in.component.suspendedTasks.push(() => widget.update(...args));
|
|
115
106
|
return;
|
|
116
107
|
}
|
|
117
|
-
|
|
118
108
|
return callLifeCycleMethod(widget, 'update', args);
|
|
119
109
|
},
|
|
120
110
|
async setState(widget, stateSetter) {
|
|
121
111
|
widget.state = {
|
|
122
112
|
...widget.state,
|
|
123
|
-
...(typeof stateSetter === 'function'
|
|
124
|
-
? stateSetter(widget.state)
|
|
125
|
-
: stateSetter),
|
|
113
|
+
...(typeof stateSetter === 'function' ? stateSetter(widget.state) : stateSetter)
|
|
126
114
|
};
|
|
127
|
-
|
|
128
115
|
return widget.update();
|
|
129
116
|
},
|
|
130
117
|
async setProps(widget, propsSetter) {
|
|
131
118
|
if (!widget.$in.component.isMounted) {
|
|
132
|
-
widget.$in.component.suspendedTasks.push(() =>
|
|
133
|
-
widget.setProps(propsSetter),
|
|
134
|
-
);
|
|
119
|
+
widget.$in.component.suspendedTasks.push(() => widget.setProps(propsSetter));
|
|
135
120
|
return;
|
|
136
121
|
}
|
|
137
|
-
|
|
138
122
|
widget.props = {
|
|
139
123
|
...widget.props,
|
|
140
|
-
...(typeof propsSetter === 'function'
|
|
141
|
-
? propsSetter(widget.props)
|
|
142
|
-
: propsSetter),
|
|
124
|
+
...(typeof propsSetter === 'function' ? propsSetter(widget.props) : propsSetter)
|
|
143
125
|
};
|
|
144
|
-
|
|
145
126
|
await widget.load();
|
|
146
127
|
return widget.update();
|
|
147
|
-
}
|
|
128
|
+
}
|
|
148
129
|
};
|
|
149
130
|
}
|
|
150
131
|
|
|
@@ -154,7 +135,7 @@ function componentAPI() {
|
|
|
154
135
|
* @type import('@merkur/plugin-component').createSlotFactory
|
|
155
136
|
*/
|
|
156
137
|
function createSlotFactory(creator) {
|
|
157
|
-
return async
|
|
138
|
+
return async widget => creator(widget);
|
|
158
139
|
}
|
|
159
140
|
|
|
160
141
|
/**
|
|
@@ -163,26 +144,23 @@ function createSlotFactory(creator) {
|
|
|
163
144
|
* @type import('@merkur/plugin-component').createViewFactory
|
|
164
145
|
*/
|
|
165
146
|
function createViewFactory(creator) {
|
|
166
|
-
return async
|
|
167
|
-
const {
|
|
168
|
-
|
|
147
|
+
return async widget => {
|
|
148
|
+
const {
|
|
149
|
+
slotFactories,
|
|
150
|
+
...restParams
|
|
151
|
+
} = await creator(widget);
|
|
169
152
|
if (!slotFactories) {
|
|
170
153
|
return {
|
|
171
|
-
...restParams
|
|
154
|
+
...restParams
|
|
172
155
|
};
|
|
173
156
|
}
|
|
174
|
-
|
|
175
|
-
const slot = (
|
|
176
|
-
await Promise.all(slotFactories.map((creator) => creator(widget)))
|
|
177
|
-
).reduce((acc, cur) => {
|
|
157
|
+
const slot = (await Promise.all(slotFactories.map(creator => creator(widget)))).reduce((acc, cur) => {
|
|
178
158
|
acc[cur.name] = cur;
|
|
179
|
-
|
|
180
159
|
return acc;
|
|
181
160
|
}, {});
|
|
182
|
-
|
|
183
161
|
return {
|
|
184
162
|
...restParams,
|
|
185
|
-
slot
|
|
163
|
+
slot
|
|
186
164
|
};
|
|
187
165
|
};
|
|
188
166
|
}
|
package/lib/index.js
CHANGED
|
@@ -14,54 +14,53 @@ function componentPlugin() {
|
|
|
14
14
|
update,
|
|
15
15
|
...widgetProperties
|
|
16
16
|
} = widgetDefinition;
|
|
17
|
-
|
|
18
17
|
const lifeCycle = {
|
|
19
18
|
info,
|
|
20
19
|
bootstrap,
|
|
21
20
|
load,
|
|
22
21
|
mount,
|
|
23
22
|
unmount,
|
|
24
|
-
update
|
|
23
|
+
update
|
|
25
24
|
};
|
|
26
|
-
|
|
27
25
|
widget.$in.component = {
|
|
28
26
|
lifeCycle,
|
|
29
27
|
isMounted: false,
|
|
30
28
|
isHydrated: false,
|
|
31
29
|
suspendedTasks: [],
|
|
32
|
-
resolvedViews: new Map()
|
|
30
|
+
resolvedViews: new Map()
|
|
33
31
|
};
|
|
34
|
-
|
|
35
32
|
core.assignMissingKeys(widget, componentAPI(), widgetProperties);
|
|
36
|
-
|
|
37
33
|
widget = core.setDefaultValueForUndefined(widget, ['props', 'state']);
|
|
38
34
|
widget = core.setDefaultValueForUndefined(widget, ['assets'], []);
|
|
39
35
|
widget = core.setDefaultValueForUndefined(widget, ['containerSelector'], null);
|
|
40
|
-
|
|
41
36
|
return widget;
|
|
42
37
|
},
|
|
43
38
|
create(widget) {
|
|
44
39
|
return widget;
|
|
45
40
|
// @TODO bind events
|
|
46
|
-
}
|
|
41
|
+
}
|
|
47
42
|
};
|
|
48
43
|
}
|
|
49
|
-
|
|
50
44
|
async function callLifeCycleMethod(widget, methodName, args) {
|
|
51
|
-
const {
|
|
52
|
-
|
|
45
|
+
const {
|
|
46
|
+
lifeCycle
|
|
47
|
+
} = widget.$in.component;
|
|
53
48
|
if (typeof lifeCycle[methodName] === 'function') {
|
|
54
49
|
return lifeCycle[methodName](widget, ...args);
|
|
55
50
|
}
|
|
56
51
|
}
|
|
57
|
-
|
|
58
52
|
function componentAPI() {
|
|
59
53
|
return {
|
|
60
54
|
async info(widget, ...args) {
|
|
61
|
-
const {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
55
|
+
const {
|
|
56
|
+
name,
|
|
57
|
+
version,
|
|
58
|
+
props,
|
|
59
|
+
state,
|
|
60
|
+
assets,
|
|
61
|
+
containerSelector
|
|
62
|
+
} = widget;
|
|
63
|
+
const componentInfo = (await callLifeCycleMethod(widget, 'info', args)) || {};
|
|
65
64
|
return {
|
|
66
65
|
name,
|
|
67
66
|
version,
|
|
@@ -69,44 +68,36 @@ function componentAPI() {
|
|
|
69
68
|
state,
|
|
70
69
|
assets,
|
|
71
70
|
containerSelector,
|
|
72
|
-
...componentInfo
|
|
71
|
+
...componentInfo
|
|
73
72
|
};
|
|
74
73
|
},
|
|
75
74
|
async mount(widget, ...args) {
|
|
76
75
|
await widget.bootstrap(...args);
|
|
77
76
|
await widget.load(...args);
|
|
78
|
-
|
|
79
77
|
const html = await callLifeCycleMethod(widget, 'mount', args);
|
|
80
78
|
widget.$in.component.isMounted = true;
|
|
81
|
-
|
|
82
79
|
for (let task of widget.$in.component.suspendedTasks) {
|
|
83
80
|
await task();
|
|
84
81
|
}
|
|
85
|
-
|
|
86
82
|
return html;
|
|
87
83
|
},
|
|
88
84
|
async unmount(widget, ...args) {
|
|
89
85
|
widget.$in.component.isMounted = false;
|
|
90
86
|
widget.$in.component.isHydrated = false;
|
|
91
|
-
|
|
92
87
|
return callLifeCycleMethod(widget, 'unmount', args);
|
|
93
88
|
},
|
|
94
89
|
async bootstrap(widget, ...args) {
|
|
95
90
|
return callLifeCycleMethod(widget, 'bootstrap', args);
|
|
96
91
|
},
|
|
97
92
|
async load(widget, ...args) {
|
|
98
|
-
const {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
state &&
|
|
104
|
-
Object.keys(state).length !== 0
|
|
105
|
-
) {
|
|
93
|
+
const {
|
|
94
|
+
$in,
|
|
95
|
+
state
|
|
96
|
+
} = widget;
|
|
97
|
+
if ($in.component.isMounted === false && $in.component.isHydrated === false && state && Object.keys(state).length !== 0) {
|
|
106
98
|
$in.component.isHydrated = true;
|
|
107
99
|
return;
|
|
108
100
|
}
|
|
109
|
-
|
|
110
101
|
widget.state = await callLifeCycleMethod(widget, 'load', args);
|
|
111
102
|
},
|
|
112
103
|
async update(widget, ...args) {
|
|
@@ -114,37 +105,27 @@ function componentAPI() {
|
|
|
114
105
|
widget.$in.component.suspendedTasks.push(() => widget.update(...args));
|
|
115
106
|
return;
|
|
116
107
|
}
|
|
117
|
-
|
|
118
108
|
return callLifeCycleMethod(widget, 'update', args);
|
|
119
109
|
},
|
|
120
110
|
async setState(widget, stateSetter) {
|
|
121
111
|
widget.state = {
|
|
122
112
|
...widget.state,
|
|
123
|
-
...(typeof stateSetter === 'function'
|
|
124
|
-
? stateSetter(widget.state)
|
|
125
|
-
: stateSetter),
|
|
113
|
+
...(typeof stateSetter === 'function' ? stateSetter(widget.state) : stateSetter)
|
|
126
114
|
};
|
|
127
|
-
|
|
128
115
|
return widget.update();
|
|
129
116
|
},
|
|
130
117
|
async setProps(widget, propsSetter) {
|
|
131
118
|
if (!widget.$in.component.isMounted) {
|
|
132
|
-
widget.$in.component.suspendedTasks.push(() =>
|
|
133
|
-
widget.setProps(propsSetter),
|
|
134
|
-
);
|
|
119
|
+
widget.$in.component.suspendedTasks.push(() => widget.setProps(propsSetter));
|
|
135
120
|
return;
|
|
136
121
|
}
|
|
137
|
-
|
|
138
122
|
widget.props = {
|
|
139
123
|
...widget.props,
|
|
140
|
-
...(typeof propsSetter === 'function'
|
|
141
|
-
? propsSetter(widget.props)
|
|
142
|
-
: propsSetter),
|
|
124
|
+
...(typeof propsSetter === 'function' ? propsSetter(widget.props) : propsSetter)
|
|
143
125
|
};
|
|
144
|
-
|
|
145
126
|
await widget.load();
|
|
146
127
|
return widget.update();
|
|
147
|
-
}
|
|
128
|
+
}
|
|
148
129
|
};
|
|
149
130
|
}
|
|
150
131
|
|
|
@@ -154,7 +135,7 @@ function componentAPI() {
|
|
|
154
135
|
* @type import('@merkur/plugin-component').createSlotFactory
|
|
155
136
|
*/
|
|
156
137
|
function createSlotFactory(creator) {
|
|
157
|
-
return async
|
|
138
|
+
return async widget => creator(widget);
|
|
158
139
|
}
|
|
159
140
|
|
|
160
141
|
/**
|
|
@@ -163,26 +144,23 @@ function createSlotFactory(creator) {
|
|
|
163
144
|
* @type import('@merkur/plugin-component').createViewFactory
|
|
164
145
|
*/
|
|
165
146
|
function createViewFactory(creator) {
|
|
166
|
-
return async
|
|
167
|
-
const {
|
|
168
|
-
|
|
147
|
+
return async widget => {
|
|
148
|
+
const {
|
|
149
|
+
slotFactories,
|
|
150
|
+
...restParams
|
|
151
|
+
} = await creator(widget);
|
|
169
152
|
if (!slotFactories) {
|
|
170
153
|
return {
|
|
171
|
-
...restParams
|
|
154
|
+
...restParams
|
|
172
155
|
};
|
|
173
156
|
}
|
|
174
|
-
|
|
175
|
-
const slot = (
|
|
176
|
-
await Promise.all(slotFactories.map((creator) => creator(widget)))
|
|
177
|
-
).reduce((acc, cur) => {
|
|
157
|
+
const slot = (await Promise.all(slotFactories.map(creator => creator(widget)))).reduce((acc, cur) => {
|
|
178
158
|
acc[cur.name] = cur;
|
|
179
|
-
|
|
180
159
|
return acc;
|
|
181
160
|
}, {});
|
|
182
|
-
|
|
183
161
|
return {
|
|
184
162
|
...restParams,
|
|
185
|
-
slot
|
|
163
|
+
slot
|
|
186
164
|
};
|
|
187
165
|
};
|
|
188
166
|
}
|
package/lib/index.mjs
CHANGED
|
@@ -12,54 +12,53 @@ function componentPlugin() {
|
|
|
12
12
|
update,
|
|
13
13
|
...widgetProperties
|
|
14
14
|
} = widgetDefinition;
|
|
15
|
-
|
|
16
15
|
const lifeCycle = {
|
|
17
16
|
info,
|
|
18
17
|
bootstrap,
|
|
19
18
|
load,
|
|
20
19
|
mount,
|
|
21
20
|
unmount,
|
|
22
|
-
update
|
|
21
|
+
update
|
|
23
22
|
};
|
|
24
|
-
|
|
25
23
|
widget.$in.component = {
|
|
26
24
|
lifeCycle,
|
|
27
25
|
isMounted: false,
|
|
28
26
|
isHydrated: false,
|
|
29
27
|
suspendedTasks: [],
|
|
30
|
-
resolvedViews: new Map()
|
|
28
|
+
resolvedViews: new Map()
|
|
31
29
|
};
|
|
32
|
-
|
|
33
30
|
assignMissingKeys(widget, componentAPI(), widgetProperties);
|
|
34
|
-
|
|
35
31
|
widget = setDefaultValueForUndefined(widget, ['props', 'state']);
|
|
36
32
|
widget = setDefaultValueForUndefined(widget, ['assets'], []);
|
|
37
33
|
widget = setDefaultValueForUndefined(widget, ['containerSelector'], null);
|
|
38
|
-
|
|
39
34
|
return widget;
|
|
40
35
|
},
|
|
41
36
|
create(widget) {
|
|
42
37
|
return widget;
|
|
43
38
|
// @TODO bind events
|
|
44
|
-
}
|
|
39
|
+
}
|
|
45
40
|
};
|
|
46
41
|
}
|
|
47
|
-
|
|
48
42
|
async function callLifeCycleMethod(widget, methodName, args) {
|
|
49
|
-
const {
|
|
50
|
-
|
|
43
|
+
const {
|
|
44
|
+
lifeCycle
|
|
45
|
+
} = widget.$in.component;
|
|
51
46
|
if (typeof lifeCycle[methodName] === 'function') {
|
|
52
47
|
return lifeCycle[methodName](widget, ...args);
|
|
53
48
|
}
|
|
54
49
|
}
|
|
55
|
-
|
|
56
50
|
function componentAPI() {
|
|
57
51
|
return {
|
|
58
52
|
async info(widget, ...args) {
|
|
59
|
-
const {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
53
|
+
const {
|
|
54
|
+
name,
|
|
55
|
+
version,
|
|
56
|
+
props,
|
|
57
|
+
state,
|
|
58
|
+
assets,
|
|
59
|
+
containerSelector
|
|
60
|
+
} = widget;
|
|
61
|
+
const componentInfo = (await callLifeCycleMethod(widget, 'info', args)) || {};
|
|
63
62
|
return {
|
|
64
63
|
name,
|
|
65
64
|
version,
|
|
@@ -67,44 +66,36 @@ function componentAPI() {
|
|
|
67
66
|
state,
|
|
68
67
|
assets,
|
|
69
68
|
containerSelector,
|
|
70
|
-
...componentInfo
|
|
69
|
+
...componentInfo
|
|
71
70
|
};
|
|
72
71
|
},
|
|
73
72
|
async mount(widget, ...args) {
|
|
74
73
|
await widget.bootstrap(...args);
|
|
75
74
|
await widget.load(...args);
|
|
76
|
-
|
|
77
75
|
const html = await callLifeCycleMethod(widget, 'mount', args);
|
|
78
76
|
widget.$in.component.isMounted = true;
|
|
79
|
-
|
|
80
77
|
for (let task of widget.$in.component.suspendedTasks) {
|
|
81
78
|
await task();
|
|
82
79
|
}
|
|
83
|
-
|
|
84
80
|
return html;
|
|
85
81
|
},
|
|
86
82
|
async unmount(widget, ...args) {
|
|
87
83
|
widget.$in.component.isMounted = false;
|
|
88
84
|
widget.$in.component.isHydrated = false;
|
|
89
|
-
|
|
90
85
|
return callLifeCycleMethod(widget, 'unmount', args);
|
|
91
86
|
},
|
|
92
87
|
async bootstrap(widget, ...args) {
|
|
93
88
|
return callLifeCycleMethod(widget, 'bootstrap', args);
|
|
94
89
|
},
|
|
95
90
|
async load(widget, ...args) {
|
|
96
|
-
const {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
state &&
|
|
102
|
-
Object.keys(state).length !== 0
|
|
103
|
-
) {
|
|
91
|
+
const {
|
|
92
|
+
$in,
|
|
93
|
+
state
|
|
94
|
+
} = widget;
|
|
95
|
+
if ($in.component.isMounted === false && $in.component.isHydrated === false && state && Object.keys(state).length !== 0) {
|
|
104
96
|
$in.component.isHydrated = true;
|
|
105
97
|
return;
|
|
106
98
|
}
|
|
107
|
-
|
|
108
99
|
widget.state = await callLifeCycleMethod(widget, 'load', args);
|
|
109
100
|
},
|
|
110
101
|
async update(widget, ...args) {
|
|
@@ -112,37 +103,27 @@ function componentAPI() {
|
|
|
112
103
|
widget.$in.component.suspendedTasks.push(() => widget.update(...args));
|
|
113
104
|
return;
|
|
114
105
|
}
|
|
115
|
-
|
|
116
106
|
return callLifeCycleMethod(widget, 'update', args);
|
|
117
107
|
},
|
|
118
108
|
async setState(widget, stateSetter) {
|
|
119
109
|
widget.state = {
|
|
120
110
|
...widget.state,
|
|
121
|
-
...(typeof stateSetter === 'function'
|
|
122
|
-
? stateSetter(widget.state)
|
|
123
|
-
: stateSetter),
|
|
111
|
+
...(typeof stateSetter === 'function' ? stateSetter(widget.state) : stateSetter)
|
|
124
112
|
};
|
|
125
|
-
|
|
126
113
|
return widget.update();
|
|
127
114
|
},
|
|
128
115
|
async setProps(widget, propsSetter) {
|
|
129
116
|
if (!widget.$in.component.isMounted) {
|
|
130
|
-
widget.$in.component.suspendedTasks.push(() =>
|
|
131
|
-
widget.setProps(propsSetter),
|
|
132
|
-
);
|
|
117
|
+
widget.$in.component.suspendedTasks.push(() => widget.setProps(propsSetter));
|
|
133
118
|
return;
|
|
134
119
|
}
|
|
135
|
-
|
|
136
120
|
widget.props = {
|
|
137
121
|
...widget.props,
|
|
138
|
-
...(typeof propsSetter === 'function'
|
|
139
|
-
? propsSetter(widget.props)
|
|
140
|
-
: propsSetter),
|
|
122
|
+
...(typeof propsSetter === 'function' ? propsSetter(widget.props) : propsSetter)
|
|
141
123
|
};
|
|
142
|
-
|
|
143
124
|
await widget.load();
|
|
144
125
|
return widget.update();
|
|
145
|
-
}
|
|
126
|
+
}
|
|
146
127
|
};
|
|
147
128
|
}
|
|
148
129
|
|
|
@@ -152,7 +133,7 @@ function componentAPI() {
|
|
|
152
133
|
* @type import('@merkur/plugin-component').createSlotFactory
|
|
153
134
|
*/
|
|
154
135
|
function createSlotFactory(creator) {
|
|
155
|
-
return async
|
|
136
|
+
return async widget => creator(widget);
|
|
156
137
|
}
|
|
157
138
|
|
|
158
139
|
/**
|
|
@@ -161,26 +142,23 @@ function createSlotFactory(creator) {
|
|
|
161
142
|
* @type import('@merkur/plugin-component').createViewFactory
|
|
162
143
|
*/
|
|
163
144
|
function createViewFactory(creator) {
|
|
164
|
-
return async
|
|
165
|
-
const {
|
|
166
|
-
|
|
145
|
+
return async widget => {
|
|
146
|
+
const {
|
|
147
|
+
slotFactories,
|
|
148
|
+
...restParams
|
|
149
|
+
} = await creator(widget);
|
|
167
150
|
if (!slotFactories) {
|
|
168
151
|
return {
|
|
169
|
-
...restParams
|
|
152
|
+
...restParams
|
|
170
153
|
};
|
|
171
154
|
}
|
|
172
|
-
|
|
173
|
-
const slot = (
|
|
174
|
-
await Promise.all(slotFactories.map((creator) => creator(widget)))
|
|
175
|
-
).reduce((acc, cur) => {
|
|
155
|
+
const slot = (await Promise.all(slotFactories.map(creator => creator(widget)))).reduce((acc, cur) => {
|
|
176
156
|
acc[cur.name] = cur;
|
|
177
|
-
|
|
178
157
|
return acc;
|
|
179
158
|
}, {});
|
|
180
|
-
|
|
181
159
|
return {
|
|
182
160
|
...restParams,
|
|
183
|
-
slot
|
|
161
|
+
slot
|
|
184
162
|
};
|
|
185
163
|
};
|
|
186
164
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@merkur/plugin-component",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.39.0",
|
|
4
4
|
"description": "Merkur component plugin.",
|
|
5
5
|
"main": "lib/index",
|
|
6
6
|
"module": "lib/index",
|
|
@@ -37,8 +37,7 @@
|
|
|
37
37
|
"preversion": "npm test",
|
|
38
38
|
"test": "jest --no-watchman -c ./jest.config.js",
|
|
39
39
|
"test:es:version": "es-check es11 ./lib/index.mjs --module && es-check es9 ./lib/index.es9.mjs --module && es-check es9 ./lib/index.es9.cjs --module",
|
|
40
|
-
"build": "rollup -c rollup.config.mjs"
|
|
41
|
-
"prepare": "npm run build"
|
|
40
|
+
"build": "rollup -c rollup.config.mjs"
|
|
42
41
|
},
|
|
43
42
|
"repository": {
|
|
44
43
|
"type": "git",
|
|
@@ -61,10 +60,10 @@
|
|
|
61
60
|
},
|
|
62
61
|
"homepage": "https://merkur.js.org/",
|
|
63
62
|
"devDependencies": {
|
|
64
|
-
"@merkur/core": "^0.
|
|
63
|
+
"@merkur/core": "^0.39.0"
|
|
65
64
|
},
|
|
66
65
|
"peerDependencies": {
|
|
67
66
|
"@merkur/core": "*"
|
|
68
67
|
},
|
|
69
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "8ad2c8b26246850ce6289502a8b05e882f80ce31"
|
|
70
69
|
}
|