@lukekaalim/act-web 1.3.0 → 2.0.1
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/package.json +2 -2
- package/prop.js +2 -2
- package/renderer.js +35 -18
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@lukekaalim/act-web",
|
|
3
3
|
"main": "entry.js",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"version": "
|
|
5
|
+
"version": "2.0.1",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"scripts": {
|
|
8
8
|
"test": "cd ../..; npm test",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"preversion": "npm run test"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@lukekaalim/act-renderer-core": "^3.
|
|
13
|
+
"@lukekaalim/act-renderer-core": "^3.2.2",
|
|
14
14
|
"@lukekaalim/act-reconciler": "^3.0.1"
|
|
15
15
|
},
|
|
16
16
|
"devDependencies": {
|
package/prop.js
CHANGED
|
@@ -58,7 +58,7 @@ export const setAttributeProp = (
|
|
|
58
58
|
export const setDOMTokenList = (
|
|
59
59
|
list/*: DOMTokenList*/,
|
|
60
60
|
prop/*: PropDiff*/
|
|
61
|
-
) => {
|
|
61
|
+
)/*: void*/ => {
|
|
62
62
|
const next = prop.next;
|
|
63
63
|
if (typeof prop.next === 'string')
|
|
64
64
|
// $FlowFixMe
|
|
@@ -82,7 +82,7 @@ export const setHTMLProp = (
|
|
|
82
82
|
setStylesProp(element, prop);
|
|
83
83
|
else if (prop.key in element && !propBlacklist.has(prop.key) && element instanceof HTMLElement) {
|
|
84
84
|
const htmlElement = (element/*: Object*/);
|
|
85
|
-
if (
|
|
85
|
+
if (htmlElement[prop.key] instanceof DOMTokenList)
|
|
86
86
|
setDOMTokenList(htmlElement[prop.key], prop);
|
|
87
87
|
else
|
|
88
88
|
htmlElement[prop.key] = prop.next;
|
package/renderer.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
// @flow strict
|
|
2
|
-
/*::
|
|
2
|
+
/*::
|
|
3
|
+
import type { ElementType } from '@lukekaalim/act';
|
|
4
|
+
import type { CommitDiff, Commit } from '@lukekaalim/act-reconciler';
|
|
5
|
+
*/
|
|
3
6
|
/*:: import type { Renderer, RenderResult } from '@lukekaalim/act-renderer-core'; */
|
|
4
7
|
import { createManagedRenderer } from '@lukekaalim/act-renderer-core';
|
|
5
8
|
import { setProps, setRef } from './prop.js';
|
|
@@ -7,7 +10,8 @@ import { createNode, removeNode, setNodeChildren } from './node.js';
|
|
|
7
10
|
|
|
8
11
|
export const createDOMRenderer = (
|
|
9
12
|
namespace/*: string*/,
|
|
10
|
-
|
|
13
|
+
nextDOMNode/*: ?((diff: CommitDiff) => RenderResult<Node>[])*/ = null,
|
|
14
|
+
getExternalDOMNode/*: ?((diff: Commit) => null | RenderResult<Node>[])*/ = null,
|
|
11
15
|
)/*: Renderer<Node>*/ => {
|
|
12
16
|
const add = (diff)/*: null | Node*/ => {
|
|
13
17
|
const node = createNode(diff.next.element, namespace);
|
|
@@ -30,36 +34,49 @@ export const createDOMRenderer = (
|
|
|
30
34
|
setNodeChildren(diff, node, children);
|
|
31
35
|
}
|
|
32
36
|
|
|
33
|
-
const next = (diff)/*: RenderResult<Node>[]*/ => {
|
|
34
|
-
const { type } = diff.next.element;
|
|
35
|
-
const subrenderer = typeof type === 'string' && nodeSubRenderers[type];
|
|
36
|
-
if (subrenderer) {
|
|
37
|
-
return subrenderer.render(diff);
|
|
38
|
-
}
|
|
39
|
-
return nodeRenderer.render(diff);
|
|
40
|
-
};
|
|
41
37
|
const getExternalNodes = (commit) => {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
if (subrenderer) {
|
|
45
|
-
return subrenderer.getNodes(commit);
|
|
38
|
+
if (getExternalDOMNode) {
|
|
39
|
+
return getExternalDOMNode(commit);
|
|
46
40
|
}
|
|
47
41
|
return null;
|
|
48
42
|
}
|
|
49
43
|
|
|
44
|
+
const next = (diff) => {
|
|
45
|
+
if (nextDOMNode) {
|
|
46
|
+
return nextDOMNode(diff)
|
|
47
|
+
}
|
|
48
|
+
return nodeRenderer.render(diff);
|
|
49
|
+
}
|
|
50
|
+
|
|
50
51
|
const nodeRenderer = createManagedRenderer({ add, remove, update, next, getExternalNodes });
|
|
51
52
|
|
|
52
53
|
return nodeRenderer;
|
|
53
54
|
};
|
|
54
55
|
|
|
55
56
|
export const createWebRenderer = (
|
|
56
|
-
|
|
57
|
+
nextDOMNode/*: ?((diff: CommitDiff) => RenderResult<Node>[])*/ = null,
|
|
58
|
+
getExternalDOMNode/*: ?((diff: Commit) => null | RenderResult<Node>[])*/ = null,
|
|
57
59
|
)/*: Renderer<Node>*/ => {
|
|
58
60
|
const svgRenderer = createDOMRenderer('http://www.w3.org/2000/svg')
|
|
59
61
|
|
|
60
|
-
const htmlRenderer = createDOMRenderer('http://www.w3.org/1999/xhtml', {
|
|
61
|
-
|
|
62
|
-
|
|
62
|
+
const htmlRenderer = createDOMRenderer('http://www.w3.org/1999/xhtml', diff => {
|
|
63
|
+
switch (diff.next.element.type) {
|
|
64
|
+
case 'svg':
|
|
65
|
+
return svgRenderer.render(diff);
|
|
66
|
+
default:
|
|
67
|
+
if (nextDOMNode)
|
|
68
|
+
return nextDOMNode(diff);
|
|
69
|
+
return htmlRenderer.render(diff)
|
|
70
|
+
}
|
|
71
|
+
}, commit => {
|
|
72
|
+
switch (commit.element.type) {
|
|
73
|
+
case 'svg':
|
|
74
|
+
return svgRenderer.getNodes(commit);
|
|
75
|
+
default:
|
|
76
|
+
if (getExternalDOMNode)
|
|
77
|
+
return getExternalDOMNode(commit);
|
|
78
|
+
return null;
|
|
79
|
+
}
|
|
63
80
|
});
|
|
64
81
|
|
|
65
82
|
return htmlRenderer;
|