a small incremental UI library for the web
javascript
web
ui
Add createRoot
+24
-13
+2
-1
demos/todo/todo.tsx
+2
-1
demos/todo/todo.tsx
+1
js/fiber.ts
+1
js/fiber.ts
+21
-12
js/noir.ts
+21
-12
js/noir.ts
···
1
-
import { makeFiber, reconcileChildren } from './fiber.ts';
1
+
import { FiberTag, makeFiber, reconcileChildren } from './fiber.ts';
2
2
import { commit } from './commit.ts';
3
+
4
+
const { RootFiber } = FiberTag;
3
5
4
6
export function createElement(type, props, ...children) {
5
7
return {
···
11
13
};
12
14
}
13
15
14
-
let wipRootFiber;
15
-
let nextFiber;
16
+
export function createRoot(container) {
17
+
return {
18
+
render: function (element) {
19
+
if (!this.rootFiber) this.rootFiber = makeRootFiber(container);
20
+
21
+
this.rootFiber.props = { children: [element] };
22
+
renderRootFiber(this.rootFiber);
23
+
},
24
+
};
25
+
}
16
26
17
-
export function render(element, container) {
18
-
const rootFiber = makeFiber('root');
19
-
rootFiber.type = 'root';
27
+
function makeRootFiber(container) {
28
+
const rootFiber = makeFiber(RootFiber);
20
29
rootFiber.dom = container;
21
-
rootFiber.props = { children: [element] };
30
+
return rootFiber;
31
+
}
22
32
23
-
wipRootFiber = rootFiber;
33
+
let nextFiber;
34
+
function renderRootFiber(rootFiber) {
24
35
nextFiber = rootFiber;
25
36
performWork();
37
+
commit(rootFiber);
26
38
}
27
39
28
40
function performWork() {
29
-
if (!nextFiber) {
30
-
commit(wipRootFiber);
31
-
return;
32
-
}
41
+
if (!nextFiber) return;
33
42
34
43
nextFiber = renderFiber(nextFiber);
35
44
performWork();