a small incremental UI library for the web
javascript
web
ui
Handle text nodes
+79
-27
+11
-2
demos/todo/todo.tsx
+11
-2
demos/todo/todo.tsx
···
2
2
3
3
const element = (
4
4
<div class="foo">
5
-
<p />
6
-
<span />
5
+
<p>Hello noir</p>
6
+
<p>
7
+
<span>This is</span>
8
+
a
9
+
<span>demo</span>
10
+
of
11
+
<span>Noir</span>
12
+
</p>
13
+
<div>
14
+
<span>Foo bar baz</span>
15
+
</div>
7
16
</div>
8
17
);
9
18
//console.log(JSON.stringify(element, null, 2));
+40
-18
js/commit.ts
+40
-18
js/commit.ts
···
1
-
import { HostFiber } from './fiber.ts';
1
+
import { FiberTag } from './fiber.ts';
2
+
const {
3
+
HostFiber,
4
+
HostTextFiber,
5
+
} = FiberTag;
2
6
3
-
export function commit(commitFiber) {
4
-
let fiber = commitFiber;
5
-
while (fiber) {
6
-
commitWork(fiber);
7
+
export function commit(fiber) {
8
+
commitWork(fiber);
7
9
8
-
if (fiber.child) fiber = fiber.child;
9
-
else if (fiber.sibling) fiber = fiber.sibling;
10
-
else fiber = fiber.parent?.sibling;
11
-
}
10
+
if (fiber.child) commit(fiber.child);
11
+
if (fiber.sibling) commit(fiber.sibling);
12
12
}
13
13
14
14
function commitWork(fiber) {
15
-
if (fiber.tag == HostFiber) {
16
-
if (fiber.effect === 'placement') commitPlacement(fiber);
17
-
else commitUpdate(fiber);
15
+
if (fiber.tag == HostTextFiber) {
16
+
if (fiber.effect === 'placement') commitTextPlacement(fiber);
17
+
else commitTextUpdate(fiber);
18
+
}
19
+
else if (fiber.tag == HostFiber) {
20
+
if (fiber.effect === 'placement') commitElementPlacement(fiber);
21
+
else commitElementUpdate(fiber);
18
22
}
19
23
}
20
24
21
-
function commitPlacement(fiber) {
25
+
function commitTextPlacement(fiber) {
22
26
const domParent = findDomParent(fiber);
23
27
const domSibling = findNextExistingDomSibling(fiber);
24
28
25
-
const domElement = document.createElement(fiber.type);
26
-
fiber.dom = domElement;
29
+
const domNode = document.createTextNode(fiber.props.nodeValue);
30
+
fiber.dom = domNode;
31
+
32
+
if (domSibling) domParent.insertBefore(domNode, domSibling);
33
+
else domParent.appendChild(domNode, domSibling);
34
+
}
35
+
36
+
function commitTextUpdate() {
37
+
// TODO
38
+
throw new Error();
39
+
}
40
+
41
+
function commitElementPlacement(fiber) {
42
+
const domParent = findDomParent(fiber);
43
+
const domSibling = findNextExistingDomSibling(fiber);
27
44
28
-
if (domSibling) domParent.insertBefore(domElement, domSibling);
29
-
else domParent.appendChild(domElement);
45
+
const domNode = document.createElement(fiber.type);
46
+
fiber.dom = domNode;
47
+
48
+
if (domSibling) domParent.insertBefore(domNode, domSibling);
49
+
else domParent.appendChild(domNode);
30
50
}
31
51
32
-
function commitUpdate(fiber) {
52
+
function commitElementUpdate(fiber) {
53
+
// TODO
54
+
throw new Error();
33
55
}
34
56
35
57
function findDomParent(forFiber) {
+28
-7
js/fiber.ts
+28
-7
js/fiber.ts
···
1
-
export const HostFiber = 'host';
1
+
export const FiberTag = {
2
+
HostFiber: 'host',
3
+
HostTextFiber: 'host_text',
4
+
};
5
+
6
+
const {
7
+
HostFiber,
8
+
HostTextFiber,
9
+
} = FiberTag;
2
10
3
11
export function makeFiber(tag) {
4
12
return {
···
66
74
}
67
75
68
76
function update(oldFiber, element, index) {
69
-
if (typeof element == 'object') {
77
+
if (typeof element === 'string' || typeof element === 'number') {
78
+
return updateTextNode(oldFiber, element);
79
+
}
80
+
else if (typeof element == 'object') {
70
81
return updateElement(oldFiber, element, index);
71
82
}
72
-
// TODO: text nodes
73
83
return null;
74
84
}
75
85
86
+
function updateTextNode(oldFiber, element) {
87
+
if (oldFiber === null || oldFiber.tag !== HostTextFiber) {
88
+
const newFiber = makeFiber(HostTextFiber);
89
+
const nodeValue = element.toString();
90
+
newFiber.props = { nodeValue };
91
+
return newFiber;
92
+
}
93
+
else {
94
+
// TODO
95
+
throw new Error();
96
+
}
97
+
}
98
+
76
99
function updateElement(oldFiber, element, index) {
77
100
if (oldFiber === null || oldFiber.type !== element.type) {
78
101
const newFiber = makeFiber(HostFiber);
···
81
104
return newFiber;
82
105
}
83
106
else {
84
-
// TODO: clone alternate
85
-
const newFiber = makeFiber(HostFiber);
86
-
newFiber.props = element.props;
87
-
return newFiber;
107
+
// TODO
108
+
throw new Error();
88
109
}
89
110
}
90
111