a small incremental UI library for the web
javascript web ui
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add createRoot

garrison 694a35e5 1aa48694

+24 -13
+2 -1
demos/todo/todo.tsx
··· 17 17 ); 18 18 //console.log(JSON.stringify(element, null, 2)); 19 19 20 - Noir.render(element, document.getElementById('root')); 20 + const root = Noir.createRoot(document.getElementById('root')); 21 + root.render(element);
+1
js/fiber.ts
··· 1 1 export const FiberTag = { 2 + RootFiber: 'root', 2 3 HostFiber: 'host', 3 4 HostTextFiber: 'host_text', 4 5 };
+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();