33 | {fakeSteps.map((_step, i) => (
34 |
53 | );
54 | } else {
55 | return (
56 |
42 |
50 |
51 | ))}
52 |
60 |
69 |
70 | );
71 | }
72 | }
73 |
74 | function getFakeSteps(parsedSteps: Step[], tokens: string[][]) {
75 | let shortLineKey = 0;
76 | let length = 100;
77 | for (let i = 1; i < tokens.length; i++) {
78 | if (tokens[i].length < length) {
79 | length = tokens[i].length;
80 | shortLineKey = i;
81 | }
82 | if (length <= 1) {
83 | break;
84 | }
85 | }
86 |
87 | const fakeSteps = parsedSteps.map(step => {
88 | const fakeStep: Step = {
89 | ...step,
90 | lines: step.lines.map(_ => shortLineKey),
91 | longestLineIndex: 0
92 | };
93 | fakeStep.lines[0] = step.lines[step.longestLineIndex];
94 | return fakeStep;
95 | });
96 | fakeSteps[0] = parsedSteps[0];
97 | return fakeSteps;
98 | }
99 |
--------------------------------------------------------------------------------
/packs/standalone/src/default-syntaxes.ts:
--------------------------------------------------------------------------------
1 | import "prismjs/components/prism-markup";
2 | import "prismjs/components/prism-bash";
3 | import "prismjs/components/prism-clike";
4 | import "prismjs/components/prism-c";
5 | import "prismjs/components/prism-cpp";
6 | import "prismjs/components/prism-css";
7 | import "prismjs/components/prism-css-extras";
8 | import "prismjs/components/prism-javascript";
9 | import "prismjs/components/prism-jsx";
10 | import "prismjs/components/prism-js-extras";
11 | import "prismjs/components/prism-coffeescript";
12 | import "prismjs/components/prism-diff";
13 | import "prismjs/components/prism-git";
14 | import "prismjs/components/prism-go";
15 | import "prismjs/components/prism-graphql";
16 | import "prismjs/components/prism-json";
17 | import "prismjs/components/prism-less";
18 | import "prismjs/components/prism-makefile";
19 | import "prismjs/components/prism-markdown";
20 | import "prismjs/components/prism-objectivec";
21 | import "prismjs/components/prism-ocaml";
22 | import "prismjs/components/prism-python";
23 | import "prismjs/components/prism-reason";
24 | import "prismjs/components/prism-sass";
25 | import "prismjs/components/prism-scss";
26 | import "prismjs/components/prism-sql";
27 | import "prismjs/components/prism-stylus";
28 | import "prismjs/components/prism-typescript";
29 | import "prismjs/components/prism-wasm";
30 | import "prismjs/components/prism-yaml";
31 |
--------------------------------------------------------------------------------
/packs/standalone/src/dimensions.ts:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Step, Dimensions } from "code-surfer-types";
3 | import useWindowResize from "./use-window-resize";
4 |
5 | type DimensionsResult = { steps?: Step[]; dimensions?: Dimensions };
6 |
7 | function useDimensions
21 | You can try importing it from prismjs with:
22 | import "prismjs/components/prism-{lang}"
23 |
71 | (Line and column numbers should start at 1, not 0)
72 |
100 |
103 | );
104 | }
105 |
106 | function StepErrorHeader({ stepIndex }: { stepIndex: number }) {
107 | return (
108 | {header}
101 |{body}
102 |
3 | bar
4 |
5 |
6 | )
7 | const container = document.getElementById("root")
8 | ReactDOM.render(element, container)
9 |
--------------------------------------------------------------------------------
/sites/book/src/files/01.jsx:
--------------------------------------------------------------------------------
1 | const element = React.createElement(
2 | "div",
3 | { id: "foo" },
4 | React.createElement("a", null, "bar"),
5 | React.createElement("b")
6 | )
7 | const container = document.getElementById("root")
8 | ReactDOM.render(element, container)
9 |
--------------------------------------------------------------------------------
/sites/book/src/files/02.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children,
7 | },
8 | }
9 | }
10 |
11 | const element = React.createElement(
12 | "div",
13 | { id: "foo" },
14 | React.createElement("a", null, "bar"),
15 | React.createElement("b")
16 | )
17 | const container = document.getElementById("root")
18 | ReactDOM.render(element, container)
19 |
--------------------------------------------------------------------------------
/sites/book/src/files/03.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | const element = React.createElement(
26 | "div",
27 | { id: "foo" },
28 | React.createElement("a", null, "bar"),
29 | React.createElement("b")
30 | )
31 | const container = document.getElementById("root")
32 | ReactDOM.render(element, container)
33 |
--------------------------------------------------------------------------------
/sites/book/src/files/04.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | const Didact = {
26 | createElement,
27 | }
28 |
29 | const element = Didact.createElement(
30 | "div",
31 | { id: "foo" },
32 | Didact.createElement("a", null, "bar"),
33 | Didact.createElement("b")
34 | )
35 | const container = document.getElementById("root")
36 | ReactDOM.render(element, container)
37 |
--------------------------------------------------------------------------------
/sites/book/src/files/05.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | const Didact = {
26 | createElement,
27 | }
28 |
29 | /** @jsx Didact.createElement */
30 | const element = (
31 |
32 | bar
33 |
34 |
35 | )
36 | const container = document.getElementById("root")
37 | ReactDOM.render(element, container)
38 |
--------------------------------------------------------------------------------
/sites/book/src/files/06.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function render(element, container) {
26 | // TODO
27 | }
28 |
29 | const Didact = {
30 | createElement,
31 | render,
32 | }
33 |
34 | /** @jsx Didact.createElement */
35 | const element = (
36 |
37 | bar
38 |
39 |
40 | )
41 | const container = document.getElementById("root")
42 | Didact.render(element, container)
43 |
--------------------------------------------------------------------------------
/sites/book/src/files/07.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function render(element, container) {
26 | const dom = document.createElement(element.type)
27 |
28 | container.appendChild(dom)
29 | }
30 |
31 | const Didact = {
32 | createElement,
33 | render,
34 | }
35 |
36 | /** @jsx Didact.createElement */
37 | const element = (
38 |
39 | bar
40 |
41 |
42 | )
43 | const container = document.getElementById("root")
44 | Didact.render(element, container)
45 |
--------------------------------------------------------------------------------
/sites/book/src/files/08.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function render(element, container) {
26 | const dom = document.createElement(element.type)
27 |
28 | element.props.children.forEach(child =>
29 | render(child, dom)
30 | )
31 |
32 | container.appendChild(dom)
33 | }
34 |
35 | const Didact = {
36 | createElement,
37 | render,
38 | }
39 |
40 | /** @jsx Didact.createElement */
41 | const element = (
42 |
43 | bar
44 |
45 |
46 | )
47 | const container = document.getElementById("root")
48 | Didact.render(element, container)
49 |
--------------------------------------------------------------------------------
/sites/book/src/files/09.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function render(element, container) {
26 | const dom =
27 | element.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(element.type)
30 |
31 | element.props.children.forEach(child =>
32 | render(child, dom)
33 | )
34 |
35 | container.appendChild(dom)
36 | }
37 |
38 | const Didact = {
39 | createElement,
40 | render,
41 | }
42 |
43 | /** @jsx Didact.createElement */
44 | const element = (
45 |
46 | bar
47 |
48 |
49 | )
50 | const container = document.getElementById("root")
51 | Didact.render(element, container)
52 |
--------------------------------------------------------------------------------
/sites/book/src/files/10.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function render(element, container) {
26 | const dom =
27 | element.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(element.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(element.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = element.props[name]
36 | })
37 |
38 | element.props.children.forEach(child =>
39 | render(child, dom)
40 | )
41 |
42 | container.appendChild(dom)
43 | }
44 |
45 | const Didact = {
46 | createElement,
47 | render,
48 | }
49 |
50 | /** @jsx Didact.createElement */
51 | const element = (
52 |
53 | bar
54 |
55 |
56 | )
57 | const container = document.getElementById("root")
58 | Didact.render(element, container)
59 |
--------------------------------------------------------------------------------
/sites/book/src/files/11.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function render(element, container) {
26 | const dom =
27 | element.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(element.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(element.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = element.props[name]
36 | })
37 |
38 | element.props.children.forEach(child =>
39 | render(child, dom)
40 | )
41 |
42 | container.appendChild(dom)
43 | }
44 |
45 | let nextUnitOfWork = null
46 |
47 | function workLoop(deadline) {
48 | let shouldYield = false
49 | while (nextUnitOfWork && !shouldYield) {
50 | nextUnitOfWork = performUnitOfWork(
51 | nextUnitOfWork
52 | )
53 | shouldYield = deadline.timeRemaining() < 1
54 | }
55 | requestIdleCallback(workLoop)
56 | }
57 |
58 | requestIdleCallback(workLoop)
59 |
60 | function performUnitOfWork(nextUnitOfWork) {
61 | // TODO
62 | }
63 |
64 | const Didact = {
65 | createElement,
66 | render,
67 | }
68 |
69 | /** @jsx Didact.createElement */
70 | const element = (
71 |
72 | bar
73 |
74 |
75 | )
76 | const container = document.getElementById("root")
77 | Didact.render(element, container)
78 |
--------------------------------------------------------------------------------
/sites/book/src/files/12.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function render(element, container) {
42 | // TODO
43 | }
44 |
45 | let nextUnitOfWork = null
46 |
47 | function workLoop(deadline) {
48 | let shouldYield = false
49 | while (nextUnitOfWork && !shouldYield) {
50 | nextUnitOfWork = performUnitOfWork(
51 | nextUnitOfWork
52 | )
53 | shouldYield = deadline.timeRemaining() < 1
54 | }
55 | requestIdleCallback(workLoop)
56 | }
57 |
58 | requestIdleCallback(workLoop)
59 |
60 | function performUnitOfWork(fiber) {
61 | // TODO
62 | }
63 |
64 | const Didact = {
65 | createElement,
66 | render,
67 | }
68 |
69 | /** @jsx Didact.createElement */
70 | const element = (
71 |
72 | bar
73 |
74 |
75 | )
76 | const container = document.getElementById("root")
77 | Didact.render(element, container)
78 |
--------------------------------------------------------------------------------
/sites/book/src/files/13.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function render(element, container) {
42 | nextUnitOfWork = {
43 | dom: container,
44 | props: {
45 | children: [element],
46 | },
47 | }
48 | }
49 |
50 | let nextUnitOfWork = null
51 |
52 | function workLoop(deadline) {
53 | let shouldYield = false
54 | while (nextUnitOfWork && !shouldYield) {
55 | nextUnitOfWork = performUnitOfWork(
56 | nextUnitOfWork
57 | )
58 | shouldYield = deadline.timeRemaining() < 1
59 | }
60 | requestIdleCallback(workLoop)
61 | }
62 |
63 | requestIdleCallback(workLoop)
64 |
65 | function performUnitOfWork(fiber) {
66 | // TODO
67 | }
68 |
69 | const Didact = {
70 | createElement,
71 | render,
72 | }
73 |
74 | /** @jsx Didact.createElement */
75 | const element = (
76 |
77 | bar
78 |
79 |
80 | )
81 | const container = document.getElementById("root")
82 | Didact.render(element, container)
83 |
--------------------------------------------------------------------------------
/sites/book/src/files/14.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function render(element, container) {
42 | nextUnitOfWork = {
43 | dom: container,
44 | props: {
45 | children: [element],
46 | },
47 | }
48 | }
49 |
50 | let nextUnitOfWork = null
51 |
52 | function workLoop(deadline) {
53 | let shouldYield = false
54 | while (nextUnitOfWork && !shouldYield) {
55 | nextUnitOfWork = performUnitOfWork(
56 | nextUnitOfWork
57 | )
58 | shouldYield = deadline.timeRemaining() < 1
59 | }
60 | requestIdleCallback(workLoop)
61 | }
62 |
63 | requestIdleCallback(workLoop)
64 |
65 | function performUnitOfWork(fiber) {
66 | if (!fiber.dom) {
67 | fiber.dom = createDom(fiber)
68 | }
69 |
70 | if (fiber.parent) {
71 | fiber.parent.dom.appendChild(fiber.dom)
72 | }
73 | }
74 |
75 | const Didact = {
76 | createElement,
77 | render,
78 | }
79 |
80 | /** @jsx Didact.createElement */
81 | const element = (
82 |
83 | bar
84 |
85 |
86 | )
87 | const container = document.getElementById("root")
88 | Didact.render(element, container)
89 |
--------------------------------------------------------------------------------
/sites/book/src/files/15.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function render(element, container) {
42 | nextUnitOfWork = {
43 | dom: container,
44 | props: {
45 | children: [element],
46 | },
47 | }
48 | }
49 |
50 | let nextUnitOfWork = null
51 |
52 | function workLoop(deadline) {
53 | let shouldYield = false
54 | while (nextUnitOfWork && !shouldYield) {
55 | nextUnitOfWork = performUnitOfWork(
56 | nextUnitOfWork
57 | )
58 | shouldYield = deadline.timeRemaining() < 1
59 | }
60 | requestIdleCallback(workLoop)
61 | }
62 |
63 | requestIdleCallback(workLoop)
64 |
65 | function performUnitOfWork(fiber) {
66 | if (!fiber.dom) {
67 | fiber.dom = createDom(fiber)
68 | }
69 |
70 | if (fiber.parent) {
71 | fiber.parent.dom.appendChild(fiber.dom)
72 | }
73 |
74 | const elements = fiber.props.children
75 | let index = 0
76 | let prevSibling = null
77 |
78 | while (index < elements.length) {
79 | const element = elements[index]
80 |
81 | const newFiber = {
82 | type: element.type,
83 | props: element.props,
84 | parent: fiber,
85 | dom: null,
86 | }
87 | }
88 | }
89 |
90 | const Didact = {
91 | createElement,
92 | render,
93 | }
94 |
95 | /** @jsx Didact.createElement */
96 | const element = (
97 |
98 | bar
99 |
100 |
101 | )
102 | const container = document.getElementById("root")
103 | Didact.render(element, container)
104 |
--------------------------------------------------------------------------------
/sites/book/src/files/16.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function render(element, container) {
42 | nextUnitOfWork = {
43 | dom: container,
44 | props: {
45 | children: [element],
46 | },
47 | }
48 | }
49 |
50 | let nextUnitOfWork = null
51 |
52 | function workLoop(deadline) {
53 | let shouldYield = false
54 | while (nextUnitOfWork && !shouldYield) {
55 | nextUnitOfWork = performUnitOfWork(
56 | nextUnitOfWork
57 | )
58 | shouldYield = deadline.timeRemaining() < 1
59 | }
60 | requestIdleCallback(workLoop)
61 | }
62 |
63 | requestIdleCallback(workLoop)
64 |
65 | function performUnitOfWork(fiber) {
66 | if (!fiber.dom) {
67 | fiber.dom = createDom(fiber)
68 | }
69 |
70 | if (fiber.parent) {
71 | fiber.parent.dom.appendChild(fiber.dom)
72 | }
73 |
74 | const elements = fiber.props.children
75 | let index = 0
76 | let prevSibling = null
77 |
78 | while (index < elements.length) {
79 | const element = elements[index]
80 |
81 | const newFiber = {
82 | type: element.type,
83 | props: element.props,
84 | parent: fiber,
85 | dom: null,
86 | }
87 |
88 | if (index === 0) {
89 | fiber.child = newFiber
90 | } else {
91 | prevSibling.sibling = newFiber
92 | }
93 |
94 | prevSibling = newFiber
95 | index++
96 | }
97 | }
98 |
99 | const Didact = {
100 | createElement,
101 | render,
102 | }
103 |
104 | /** @jsx Didact.createElement */
105 | const element = (
106 |
107 | bar
108 |
109 |
110 | )
111 | const container = document.getElementById("root")
112 | Didact.render(element, container)
113 |
--------------------------------------------------------------------------------
/sites/book/src/files/17.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function render(element, container) {
42 | nextUnitOfWork = {
43 | dom: container,
44 | props: {
45 | children: [element],
46 | },
47 | }
48 | }
49 |
50 | let nextUnitOfWork = null
51 |
52 | function workLoop(deadline) {
53 | let shouldYield = false
54 | while (nextUnitOfWork && !shouldYield) {
55 | nextUnitOfWork = performUnitOfWork(
56 | nextUnitOfWork
57 | )
58 | shouldYield = deadline.timeRemaining() < 1
59 | }
60 | requestIdleCallback(workLoop)
61 | }
62 |
63 | requestIdleCallback(workLoop)
64 |
65 | function performUnitOfWork(fiber) {
66 | if (!fiber.dom) {
67 | fiber.dom = createDom(fiber)
68 | }
69 |
70 | if (fiber.parent) {
71 | fiber.parent.dom.appendChild(fiber.dom)
72 | }
73 |
74 | const elements = fiber.props.children
75 | let index = 0
76 | let prevSibling = null
77 |
78 | while (index < elements.length) {
79 | const element = elements[index]
80 |
81 | const newFiber = {
82 | type: element.type,
83 | props: element.props,
84 | parent: fiber,
85 | dom: null,
86 | }
87 |
88 | if (index === 0) {
89 | fiber.child = newFiber
90 | } else {
91 | prevSibling.sibling = newFiber
92 | }
93 |
94 | prevSibling = newFiber
95 | index++
96 | }
97 |
98 | if (fiber.child) {
99 | return fiber.child
100 | }
101 | let nextFiber = fiber
102 | while (nextFiber) {
103 | if (nextFiber.sibling) {
104 | return nextFiber.sibling
105 | }
106 | nextFiber = nextFiber.parent
107 | }
108 | }
109 |
110 | const Didact = {
111 | createElement,
112 | render,
113 | }
114 |
115 | /** @jsx Didact.createElement */
116 | const element = (
117 |
118 | bar
119 |
120 |
121 | )
122 | const container = document.getElementById("root")
123 | Didact.render(element, container)
124 |
--------------------------------------------------------------------------------
/sites/book/src/files/18.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function render(element, container) {
42 | nextUnitOfWork = {
43 | dom: container,
44 | props: {
45 | children: [element],
46 | },
47 | }
48 | }
49 |
50 | let nextUnitOfWork = null
51 |
52 | function workLoop(deadline) {
53 | let shouldYield = false
54 | while (nextUnitOfWork && !shouldYield) {
55 | nextUnitOfWork = performUnitOfWork(
56 | nextUnitOfWork
57 | )
58 | shouldYield = deadline.timeRemaining() < 1
59 | }
60 | requestIdleCallback(workLoop)
61 | }
62 |
63 | requestIdleCallback(workLoop)
64 |
65 | function performUnitOfWork(fiber) {
66 | if (!fiber.dom) {
67 | fiber.dom = createDom(fiber)
68 | }
69 |
70 | const elements = fiber.props.children
71 | let index = 0
72 | let prevSibling = null
73 |
74 | while (index < elements.length) {
75 | const element = elements[index]
76 |
77 | const newFiber = {
78 | type: element.type,
79 | props: element.props,
80 | parent: fiber,
81 | dom: null,
82 | }
83 |
84 | if (index === 0) {
85 | fiber.child = newFiber
86 | } else {
87 | prevSibling.sibling = newFiber
88 | }
89 |
90 | prevSibling = newFiber
91 | index++
92 | }
93 |
94 | if (fiber.child) {
95 | return fiber.child
96 | }
97 | let nextFiber = fiber
98 | while (nextFiber) {
99 | if (nextFiber.sibling) {
100 | return nextFiber.sibling
101 | }
102 | nextFiber = nextFiber.parent
103 | }
104 | }
105 |
106 | const Didact = {
107 | createElement,
108 | render,
109 | }
110 |
111 | /** @jsx Didact.createElement */
112 | const element = (
113 |
114 | bar
115 |
116 |
117 | )
118 | const container = document.getElementById("root")
119 | Didact.render(element, container)
120 |
--------------------------------------------------------------------------------
/sites/book/src/files/19.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function commitRoot() {
42 | // TODO
43 | }
44 |
45 | function render(element, container) {
46 | wipRoot = {
47 | dom: container,
48 | props: {
49 | children: [element],
50 | },
51 | }
52 | nextUnitOfWork = wipRoot
53 | }
54 |
55 | let nextUnitOfWork = null
56 | let wipRoot = null
57 |
58 | function workLoop(deadline) {
59 | let shouldYield = false
60 | while (nextUnitOfWork && !shouldYield) {
61 | nextUnitOfWork = performUnitOfWork(
62 | nextUnitOfWork
63 | )
64 | shouldYield = deadline.timeRemaining() < 1
65 | }
66 |
67 | if (!nextUnitOfWork && wipRoot) {
68 | commitRoot()
69 | }
70 |
71 | requestIdleCallback(workLoop)
72 | }
73 |
74 | requestIdleCallback(workLoop)
75 |
76 | function performUnitOfWork(fiber) {
77 | if (!fiber.dom) {
78 | fiber.dom = createDom(fiber)
79 | }
80 |
81 | const elements = fiber.props.children
82 | let index = 0
83 | let prevSibling = null
84 |
85 | while (index < elements.length) {
86 | const element = elements[index]
87 |
88 | const newFiber = {
89 | type: element.type,
90 | props: element.props,
91 | parent: fiber,
92 | dom: null,
93 | }
94 |
95 | if (index === 0) {
96 | fiber.child = newFiber
97 | } else {
98 | prevSibling.sibling = newFiber
99 | }
100 |
101 | prevSibling = newFiber
102 | index++
103 | }
104 |
105 | if (fiber.child) {
106 | return fiber.child
107 | }
108 | let nextFiber = fiber
109 | while (nextFiber) {
110 | if (nextFiber.sibling) {
111 | return nextFiber.sibling
112 | }
113 | nextFiber = nextFiber.parent
114 | }
115 | }
116 |
117 | const Didact = {
118 | createElement,
119 | render,
120 | }
121 |
122 | /** @jsx Didact.createElement */
123 | const element = (
124 |
125 | bar
126 |
127 |
128 | )
129 | const container = document.getElementById("root")
130 | Didact.render(element, container)
131 |
--------------------------------------------------------------------------------
/sites/book/src/files/20.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function commitRoot() {
42 | commitWork(wipRoot.child)
43 | wipRoot = null
44 | }
45 |
46 | function commitWork(fiber) {
47 | if (!fiber) {
48 | return
49 | }
50 | const domParent = fiber.parent.dom
51 | domParent.appendChild(fiber.dom)
52 | commitWork(fiber.child)
53 | commitWork(fiber.sibling)
54 | }
55 |
56 | function render(element, container) {
57 | wipRoot = {
58 | dom: container,
59 | props: {
60 | children: [element],
61 | },
62 | }
63 | nextUnitOfWork = wipRoot
64 | }
65 |
66 | let nextUnitOfWork = null
67 | let wipRoot = null
68 |
69 | function workLoop(deadline) {
70 | let shouldYield = false
71 | while (nextUnitOfWork && !shouldYield) {
72 | nextUnitOfWork = performUnitOfWork(
73 | nextUnitOfWork
74 | )
75 | shouldYield = deadline.timeRemaining() < 1
76 | }
77 |
78 | if (!nextUnitOfWork && wipRoot) {
79 | commitRoot()
80 | }
81 |
82 | requestIdleCallback(workLoop)
83 | }
84 |
85 | requestIdleCallback(workLoop)
86 |
87 | function performUnitOfWork(fiber) {
88 | if (!fiber.dom) {
89 | fiber.dom = createDom(fiber)
90 | }
91 |
92 | const elements = fiber.props.children
93 | let index = 0
94 | let prevSibling = null
95 |
96 | while (index < elements.length) {
97 | const element = elements[index]
98 |
99 | const newFiber = {
100 | type: element.type,
101 | props: element.props,
102 | parent: fiber,
103 | dom: null,
104 | }
105 |
106 | if (index === 0) {
107 | fiber.child = newFiber
108 | } else {
109 | prevSibling.sibling = newFiber
110 | }
111 |
112 | prevSibling = newFiber
113 | index++
114 | }
115 |
116 | if (fiber.child) {
117 | return fiber.child
118 | }
119 | let nextFiber = fiber
120 | while (nextFiber) {
121 | if (nextFiber.sibling) {
122 | return nextFiber.sibling
123 | }
124 | nextFiber = nextFiber.parent
125 | }
126 | }
127 |
128 | const Didact = {
129 | createElement,
130 | render,
131 | }
132 |
133 | /** @jsx Didact.createElement */
134 | const element = (
135 |
136 | bar
137 |
138 |
139 | )
140 | const container = document.getElementById("root")
141 | Didact.render(element, container)
142 |
--------------------------------------------------------------------------------
/sites/book/src/files/21.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function commitRoot() {
42 | commitWork(wipRoot.child)
43 | currentRoot = wipRoot
44 | wipRoot = null
45 | }
46 |
47 | function commitWork(fiber) {
48 | if (!fiber) {
49 | return
50 | }
51 | const domParent = fiber.parent.dom
52 | domParent.appendChild(fiber.dom)
53 | commitWork(fiber.child)
54 | commitWork(fiber.sibling)
55 | }
56 |
57 | function render(element, container) {
58 | wipRoot = {
59 | dom: container,
60 | props: {
61 | children: [element],
62 | },
63 | alternate: currentRoot,
64 | }
65 | nextUnitOfWork = wipRoot
66 | }
67 |
68 | let nextUnitOfWork = null
69 | let currentRoot = null
70 | let wipRoot = null
71 |
72 | function workLoop(deadline) {
73 | let shouldYield = false
74 | while (nextUnitOfWork && !shouldYield) {
75 | nextUnitOfWork = performUnitOfWork(
76 | nextUnitOfWork
77 | )
78 | shouldYield = deadline.timeRemaining() < 1
79 | }
80 |
81 | if (!nextUnitOfWork && wipRoot) {
82 | commitRoot()
83 | }
84 |
85 | requestIdleCallback(workLoop)
86 | }
87 |
88 | requestIdleCallback(workLoop)
89 |
90 | function performUnitOfWork(fiber) {
91 | if (!fiber.dom) {
92 | fiber.dom = createDom(fiber)
93 | }
94 |
95 | const elements = fiber.props.children
96 | let index = 0
97 | let prevSibling = null
98 |
99 | while (index < elements.length) {
100 | const element = elements[index]
101 |
102 | const newFiber = {
103 | type: element.type,
104 | props: element.props,
105 | parent: fiber,
106 | dom: null,
107 | }
108 |
109 | if (index === 0) {
110 | fiber.child = newFiber
111 | } else {
112 | prevSibling.sibling = newFiber
113 | }
114 |
115 | prevSibling = newFiber
116 | index++
117 | }
118 |
119 | if (fiber.child) {
120 | return fiber.child
121 | }
122 | let nextFiber = fiber
123 | while (nextFiber) {
124 | if (nextFiber.sibling) {
125 | return nextFiber.sibling
126 | }
127 | nextFiber = nextFiber.parent
128 | }
129 | }
130 |
131 | const Didact = {
132 | createElement,
133 | render,
134 | }
135 |
136 | /** @jsx Didact.createElement */
137 | const element = (
138 |
139 | bar
140 |
141 |
142 | )
143 | const container = document.getElementById("root")
144 | Didact.render(element, container)
145 |
--------------------------------------------------------------------------------
/sites/book/src/files/22.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function commitRoot() {
42 | commitWork(wipRoot.child)
43 | currentRoot = wipRoot
44 | wipRoot = null
45 | }
46 |
47 | function commitWork(fiber) {
48 | if (!fiber) {
49 | return
50 | }
51 | const domParent = fiber.parent.dom
52 | domParent.appendChild(fiber.dom)
53 | commitWork(fiber.child)
54 | commitWork(fiber.sibling)
55 | }
56 |
57 | function render(element, container) {
58 | wipRoot = {
59 | dom: container,
60 | props: {
61 | children: [element],
62 | },
63 | alternate: currentRoot,
64 | }
65 | nextUnitOfWork = wipRoot
66 | }
67 |
68 | let nextUnitOfWork = null
69 | let currentRoot = null
70 | let wipRoot = null
71 |
72 | function workLoop(deadline) {
73 | let shouldYield = false
74 | while (nextUnitOfWork && !shouldYield) {
75 | nextUnitOfWork = performUnitOfWork(
76 | nextUnitOfWork
77 | )
78 | shouldYield = deadline.timeRemaining() < 1
79 | }
80 |
81 | if (!nextUnitOfWork && wipRoot) {
82 | commitRoot()
83 | }
84 |
85 | requestIdleCallback(workLoop)
86 | }
87 |
88 | requestIdleCallback(workLoop)
89 |
90 | function performUnitOfWork(fiber) {
91 | if (!fiber.dom) {
92 | fiber.dom = createDom(fiber)
93 | }
94 |
95 | const elements = fiber.props.children
96 | reconcileChildren(fiber, elements)
97 |
98 | if (fiber.child) {
99 | return fiber.child
100 | }
101 | let nextFiber = fiber
102 | while (nextFiber) {
103 | if (nextFiber.sibling) {
104 | return nextFiber.sibling
105 | }
106 | nextFiber = nextFiber.parent
107 | }
108 | }
109 |
110 | function reconcileChildren(wipFiber, elements) {
111 | let index = 0
112 | let prevSibling = null
113 |
114 | while (index < elements.length) {
115 | const element = elements[index]
116 |
117 | const newFiber = {
118 | type: element.type,
119 | props: element.props,
120 | parent: wipFiber,
121 | dom: null,
122 | }
123 |
124 | if (index === 0) {
125 | wipFiber.child = newFiber
126 | } else {
127 | prevSibling.sibling = newFiber
128 | }
129 |
130 | prevSibling = newFiber
131 | index++
132 | }
133 | }
134 |
135 | const Didact = {
136 | createElement,
137 | render,
138 | }
139 |
140 | /** @jsx Didact.createElement */
141 | const element = (
142 |
143 | bar
144 |
145 |
146 | )
147 | const container = document.getElementById("root")
148 | Didact.render(element, container)
149 |
--------------------------------------------------------------------------------
/sites/book/src/files/23.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function commitRoot() {
42 | commitWork(wipRoot.child)
43 | currentRoot = wipRoot
44 | wipRoot = null
45 | }
46 |
47 | function commitWork(fiber) {
48 | if (!fiber) {
49 | return
50 | }
51 | const domParent = fiber.parent.dom
52 | domParent.appendChild(fiber.dom)
53 | commitWork(fiber.child)
54 | commitWork(fiber.sibling)
55 | }
56 |
57 | function render(element, container) {
58 | wipRoot = {
59 | dom: container,
60 | props: {
61 | children: [element],
62 | },
63 | alternate: currentRoot,
64 | }
65 | nextUnitOfWork = wipRoot
66 | }
67 |
68 | let nextUnitOfWork = null
69 | let currentRoot = null
70 | let wipRoot = null
71 |
72 | function workLoop(deadline) {
73 | let shouldYield = false
74 | while (nextUnitOfWork && !shouldYield) {
75 | nextUnitOfWork = performUnitOfWork(
76 | nextUnitOfWork
77 | )
78 | shouldYield = deadline.timeRemaining() < 1
79 | }
80 |
81 | if (!nextUnitOfWork && wipRoot) {
82 | commitRoot()
83 | }
84 |
85 | requestIdleCallback(workLoop)
86 | }
87 |
88 | requestIdleCallback(workLoop)
89 |
90 | function performUnitOfWork(fiber) {
91 | if (!fiber.dom) {
92 | fiber.dom = createDom(fiber)
93 | }
94 |
95 | const elements = fiber.props.children
96 | reconcileChildren(fiber, elements)
97 |
98 | if (fiber.child) {
99 | return fiber.child
100 | }
101 | let nextFiber = fiber
102 | while (nextFiber) {
103 | if (nextFiber.sibling) {
104 | return nextFiber.sibling
105 | }
106 | nextFiber = nextFiber.parent
107 | }
108 | }
109 |
110 | function reconcileChildren(wipFiber, elements) {
111 | let index = 0
112 | let oldFiber =
113 | wipFiber.alternate && wipFiber.alternate.child
114 | let prevSibling = null
115 |
116 | while (
117 | index < elements.length ||
118 | oldFiber != null
119 | ) {
120 | const element = elements[index]
121 | let newFiber = null
122 |
123 | // TODO compare oldFiber to element
124 |
125 | if (oldFiber) {
126 | oldFiber = oldFiber.sibling
127 | }
128 |
129 | if (index === 0) {
130 | wipFiber.child = newFiber
131 | } else if (element) {
132 | prevSibling.sibling = newFiber
133 | }
134 |
135 | prevSibling = newFiber
136 | index++
137 | }
138 | }
139 |
140 | const Didact = {
141 | createElement,
142 | render,
143 | }
144 |
145 | /** @jsx Didact.createElement */
146 | const element = (
147 |
148 | bar
149 |
150 |
151 | )
152 | const container = document.getElementById("root")
153 | Didact.render(element, container)
154 |
--------------------------------------------------------------------------------
/sites/book/src/files/24.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function commitRoot() {
42 | commitWork(wipRoot.child)
43 | currentRoot = wipRoot
44 | wipRoot = null
45 | }
46 |
47 | function commitWork(fiber) {
48 | if (!fiber) {
49 | return
50 | }
51 | const domParent = fiber.parent.dom
52 | domParent.appendChild(fiber.dom)
53 | commitWork(fiber.child)
54 | commitWork(fiber.sibling)
55 | }
56 |
57 | function render(element, container) {
58 | wipRoot = {
59 | dom: container,
60 | props: {
61 | children: [element],
62 | },
63 | alternate: currentRoot,
64 | }
65 | nextUnitOfWork = wipRoot
66 | }
67 |
68 | let nextUnitOfWork = null
69 | let currentRoot = null
70 | let wipRoot = null
71 |
72 | function workLoop(deadline) {
73 | let shouldYield = false
74 | while (nextUnitOfWork && !shouldYield) {
75 | nextUnitOfWork = performUnitOfWork(
76 | nextUnitOfWork
77 | )
78 | shouldYield = deadline.timeRemaining() < 1
79 | }
80 |
81 | if (!nextUnitOfWork && wipRoot) {
82 | commitRoot()
83 | }
84 |
85 | requestIdleCallback(workLoop)
86 | }
87 |
88 | requestIdleCallback(workLoop)
89 |
90 | function performUnitOfWork(fiber) {
91 | if (!fiber.dom) {
92 | fiber.dom = createDom(fiber)
93 | }
94 |
95 | const elements = fiber.props.children
96 | reconcileChildren(fiber, elements)
97 |
98 | if (fiber.child) {
99 | return fiber.child
100 | }
101 | let nextFiber = fiber
102 | while (nextFiber) {
103 | if (nextFiber.sibling) {
104 | return nextFiber.sibling
105 | }
106 | nextFiber = nextFiber.parent
107 | }
108 | }
109 |
110 | function reconcileChildren(wipFiber, elements) {
111 | let index = 0
112 | let oldFiber =
113 | wipFiber.alternate && wipFiber.alternate.child
114 | let prevSibling = null
115 |
116 | while (
117 | index < elements.length ||
118 | oldFiber != null
119 | ) {
120 | const element = elements[index]
121 | let newFiber = null
122 |
123 | const sameType =
124 | oldFiber &&
125 | element &&
126 | element.type == oldFiber.type
127 |
128 | if (sameType) {
129 | // TODO update the node
130 | }
131 | if (element && !sameType) {
132 | // TODO add this node
133 | }
134 | if (oldFiber && !sameType) {
135 | // TODO delete the oldFiber's node
136 | }
137 |
138 | if (oldFiber) {
139 | oldFiber = oldFiber.sibling
140 | }
141 |
142 | if (index === 0) {
143 | wipFiber.child = newFiber
144 | } else if (element) {
145 | prevSibling.sibling = newFiber
146 | }
147 |
148 | prevSibling = newFiber
149 | index++
150 | }
151 | }
152 |
153 | const Didact = {
154 | createElement,
155 | render,
156 | }
157 |
158 | /** @jsx Didact.createElement */
159 | const element = (
160 |
161 | bar
162 |
163 |
164 | )
165 | const container = document.getElementById("root")
166 | Didact.render(element, container)
167 |
--------------------------------------------------------------------------------
/sites/book/src/files/25.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function commitRoot() {
42 | commitWork(wipRoot.child)
43 | currentRoot = wipRoot
44 | wipRoot = null
45 | }
46 |
47 | function commitWork(fiber) {
48 | if (!fiber) {
49 | return
50 | }
51 | const domParent = fiber.parent.dom
52 | domParent.appendChild(fiber.dom)
53 | commitWork(fiber.child)
54 | commitWork(fiber.sibling)
55 | }
56 |
57 | function render(element, container) {
58 | wipRoot = {
59 | dom: container,
60 | props: {
61 | children: [element],
62 | },
63 | alternate: currentRoot,
64 | }
65 | nextUnitOfWork = wipRoot
66 | }
67 |
68 | let nextUnitOfWork = null
69 | let currentRoot = null
70 | let wipRoot = null
71 |
72 | function workLoop(deadline) {
73 | let shouldYield = false
74 | while (nextUnitOfWork && !shouldYield) {
75 | nextUnitOfWork = performUnitOfWork(
76 | nextUnitOfWork
77 | )
78 | shouldYield = deadline.timeRemaining() < 1
79 | }
80 |
81 | if (!nextUnitOfWork && wipRoot) {
82 | commitRoot()
83 | }
84 |
85 | requestIdleCallback(workLoop)
86 | }
87 |
88 | requestIdleCallback(workLoop)
89 |
90 | function performUnitOfWork(fiber) {
91 | if (!fiber.dom) {
92 | fiber.dom = createDom(fiber)
93 | }
94 |
95 | const elements = fiber.props.children
96 | reconcileChildren(fiber, elements)
97 |
98 | if (fiber.child) {
99 | return fiber.child
100 | }
101 | let nextFiber = fiber
102 | while (nextFiber) {
103 | if (nextFiber.sibling) {
104 | return nextFiber.sibling
105 | }
106 | nextFiber = nextFiber.parent
107 | }
108 | }
109 |
110 | function reconcileChildren(wipFiber, elements) {
111 | let index = 0
112 | let oldFiber =
113 | wipFiber.alternate && wipFiber.alternate.child
114 | let prevSibling = null
115 |
116 | while (
117 | index < elements.length ||
118 | oldFiber != null
119 | ) {
120 | const element = elements[index]
121 | let newFiber = null
122 |
123 | const sameType =
124 | oldFiber &&
125 | element &&
126 | element.type == oldFiber.type
127 |
128 | if (sameType) {
129 | newFiber = {
130 | type: oldFiber.type,
131 | props: element.props,
132 | dom: oldFiber.dom,
133 | parent: wipFiber,
134 | alternate: oldFiber,
135 | effectTag: "UPDATE",
136 | }
137 | }
138 | if (element && !sameType) {
139 | // TODO add this node
140 | }
141 | if (oldFiber && !sameType) {
142 | // TODO delete the oldFiber's node
143 | }
144 |
145 | if (oldFiber) {
146 | oldFiber = oldFiber.sibling
147 | }
148 |
149 | if (index === 0) {
150 | wipFiber.child = newFiber
151 | } else if (element) {
152 | prevSibling.sibling = newFiber
153 | }
154 |
155 | prevSibling = newFiber
156 | index++
157 | }
158 | }
159 |
160 | const Didact = {
161 | createElement,
162 | render,
163 | }
164 |
165 | /** @jsx Didact.createElement */
166 | const element = (
167 |
168 | bar
169 |
170 |
171 | )
172 | const container = document.getElementById("root")
173 | Didact.render(element, container)
174 |
--------------------------------------------------------------------------------
/sites/book/src/files/26.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function commitRoot() {
42 | commitWork(wipRoot.child)
43 | currentRoot = wipRoot
44 | wipRoot = null
45 | }
46 |
47 | function commitWork(fiber) {
48 | if (!fiber) {
49 | return
50 | }
51 | const domParent = fiber.parent.dom
52 | domParent.appendChild(fiber.dom)
53 | commitWork(fiber.child)
54 | commitWork(fiber.sibling)
55 | }
56 |
57 | function render(element, container) {
58 | wipRoot = {
59 | dom: container,
60 | props: {
61 | children: [element],
62 | },
63 | alternate: currentRoot,
64 | }
65 | nextUnitOfWork = wipRoot
66 | }
67 |
68 | let nextUnitOfWork = null
69 | let currentRoot = null
70 | let wipRoot = null
71 |
72 | function workLoop(deadline) {
73 | let shouldYield = false
74 | while (nextUnitOfWork && !shouldYield) {
75 | nextUnitOfWork = performUnitOfWork(
76 | nextUnitOfWork
77 | )
78 | shouldYield = deadline.timeRemaining() < 1
79 | }
80 |
81 | if (!nextUnitOfWork && wipRoot) {
82 | commitRoot()
83 | }
84 |
85 | requestIdleCallback(workLoop)
86 | }
87 |
88 | requestIdleCallback(workLoop)
89 |
90 | function performUnitOfWork(fiber) {
91 | if (!fiber.dom) {
92 | fiber.dom = createDom(fiber)
93 | }
94 |
95 | const elements = fiber.props.children
96 | reconcileChildren(fiber, elements)
97 |
98 | if (fiber.child) {
99 | return fiber.child
100 | }
101 | let nextFiber = fiber
102 | while (nextFiber) {
103 | if (nextFiber.sibling) {
104 | return nextFiber.sibling
105 | }
106 | nextFiber = nextFiber.parent
107 | }
108 | }
109 |
110 | function reconcileChildren(wipFiber, elements) {
111 | let index = 0
112 | let oldFiber =
113 | wipFiber.alternate && wipFiber.alternate.child
114 | let prevSibling = null
115 |
116 | while (
117 | index < elements.length ||
118 | oldFiber != null
119 | ) {
120 | const element = elements[index]
121 | let newFiber = null
122 |
123 | const sameType =
124 | oldFiber &&
125 | element &&
126 | element.type == oldFiber.type
127 |
128 | if (sameType) {
129 | newFiber = {
130 | type: oldFiber.type,
131 | props: element.props,
132 | dom: oldFiber.dom,
133 | parent: wipFiber,
134 | alternate: oldFiber,
135 | effectTag: "UPDATE",
136 | }
137 | }
138 | if (element && !sameType) {
139 | newFiber = {
140 | type: element.type,
141 | props: element.props,
142 | dom: null,
143 | parent: wipFiber,
144 | alternate: null,
145 | effectTag: "PLACEMENT",
146 | }
147 | }
148 | if (oldFiber && !sameType) {
149 | // TODO delete the oldFiber's node
150 | }
151 |
152 | if (oldFiber) {
153 | oldFiber = oldFiber.sibling
154 | }
155 |
156 | if (index === 0) {
157 | wipFiber.child = newFiber
158 | } else if (element) {
159 | prevSibling.sibling = newFiber
160 | }
161 |
162 | prevSibling = newFiber
163 | index++
164 | }
165 | }
166 |
167 | const Didact = {
168 | createElement,
169 | render,
170 | }
171 |
172 | /** @jsx Didact.createElement */
173 | const element = (
174 |
175 | bar
176 |
177 |
178 | )
179 | const container = document.getElementById("root")
180 | Didact.render(element, container)
181 |
--------------------------------------------------------------------------------
/sites/book/src/files/27.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function commitRoot() {
42 | commitWork(wipRoot.child)
43 | currentRoot = wipRoot
44 | wipRoot = null
45 | }
46 |
47 | function commitWork(fiber) {
48 | if (!fiber) {
49 | return
50 | }
51 | const domParent = fiber.parent.dom
52 | domParent.appendChild(fiber.dom)
53 | commitWork(fiber.child)
54 | commitWork(fiber.sibling)
55 | }
56 |
57 | function render(element, container) {
58 | wipRoot = {
59 | dom: container,
60 | props: {
61 | children: [element],
62 | },
63 | alternate: currentRoot,
64 | }
65 | nextUnitOfWork = wipRoot
66 | }
67 |
68 | let nextUnitOfWork = null
69 | let currentRoot = null
70 | let wipRoot = null
71 |
72 | function workLoop(deadline) {
73 | let shouldYield = false
74 | while (nextUnitOfWork && !shouldYield) {
75 | nextUnitOfWork = performUnitOfWork(
76 | nextUnitOfWork
77 | )
78 | shouldYield = deadline.timeRemaining() < 1
79 | }
80 |
81 | if (!nextUnitOfWork && wipRoot) {
82 | commitRoot()
83 | }
84 |
85 | requestIdleCallback(workLoop)
86 | }
87 |
88 | requestIdleCallback(workLoop)
89 |
90 | function performUnitOfWork(fiber) {
91 | if (!fiber.dom) {
92 | fiber.dom = createDom(fiber)
93 | }
94 |
95 | const elements = fiber.props.children
96 | reconcileChildren(fiber, elements)
97 |
98 | if (fiber.child) {
99 | return fiber.child
100 | }
101 | let nextFiber = fiber
102 | while (nextFiber) {
103 | if (nextFiber.sibling) {
104 | return nextFiber.sibling
105 | }
106 | nextFiber = nextFiber.parent
107 | }
108 | }
109 |
110 | function reconcileChildren(wipFiber, elements) {
111 | let index = 0
112 | let oldFiber =
113 | wipFiber.alternate && wipFiber.alternate.child
114 | let prevSibling = null
115 |
116 | while (
117 | index < elements.length ||
118 | oldFiber != null
119 | ) {
120 | const element = elements[index]
121 | let newFiber = null
122 |
123 | const sameType =
124 | oldFiber &&
125 | element &&
126 | element.type == oldFiber.type
127 |
128 | if (sameType) {
129 | newFiber = {
130 | type: oldFiber.type,
131 | props: element.props,
132 | dom: oldFiber.dom,
133 | parent: wipFiber,
134 | alternate: oldFiber,
135 | effectTag: "UPDATE",
136 | }
137 | }
138 | if (element && !sameType) {
139 | newFiber = {
140 | type: element.type,
141 | props: element.props,
142 | dom: null,
143 | parent: wipFiber,
144 | alternate: null,
145 | effectTag: "PLACEMENT",
146 | }
147 | }
148 | if (oldFiber && !sameType) {
149 | oldFiber.effectTag = "DELETION"
150 | deletions.push(oldFiber)
151 | }
152 |
153 | if (oldFiber) {
154 | oldFiber = oldFiber.sibling
155 | }
156 |
157 | if (index === 0) {
158 | wipFiber.child = newFiber
159 | } else if (element) {
160 | prevSibling.sibling = newFiber
161 | }
162 |
163 | prevSibling = newFiber
164 | index++
165 | }
166 | }
167 |
168 | const Didact = {
169 | createElement,
170 | render,
171 | }
172 |
173 | /** @jsx Didact.createElement */
174 | const element = (
175 |
176 | bar
177 |
178 |
179 | )
180 | const container = document.getElementById("root")
181 | Didact.render(element, container)
182 |
--------------------------------------------------------------------------------
/sites/book/src/files/28.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function commitRoot() {
42 | commitWork(wipRoot.child)
43 | currentRoot = wipRoot
44 | wipRoot = null
45 | }
46 |
47 | function commitWork(fiber) {
48 | if (!fiber) {
49 | return
50 | }
51 | const domParent = fiber.parent.dom
52 | domParent.appendChild(fiber.dom)
53 | commitWork(fiber.child)
54 | commitWork(fiber.sibling)
55 | }
56 |
57 | function render(element, container) {
58 | wipRoot = {
59 | dom: container,
60 | props: {
61 | children: [element],
62 | },
63 | alternate: currentRoot,
64 | }
65 | deletions = []
66 | nextUnitOfWork = wipRoot
67 | }
68 |
69 | let nextUnitOfWork = null
70 | let currentRoot = null
71 | let wipRoot = null
72 | let deletions = null
73 |
74 | function workLoop(deadline) {
75 | let shouldYield = false
76 | while (nextUnitOfWork && !shouldYield) {
77 | nextUnitOfWork = performUnitOfWork(
78 | nextUnitOfWork
79 | )
80 | shouldYield = deadline.timeRemaining() < 1
81 | }
82 |
83 | if (!nextUnitOfWork && wipRoot) {
84 | commitRoot()
85 | }
86 |
87 | requestIdleCallback(workLoop)
88 | }
89 |
90 | requestIdleCallback(workLoop)
91 |
92 | function performUnitOfWork(fiber) {
93 | if (!fiber.dom) {
94 | fiber.dom = createDom(fiber)
95 | }
96 |
97 | const elements = fiber.props.children
98 | reconcileChildren(fiber, elements)
99 |
100 | if (fiber.child) {
101 | return fiber.child
102 | }
103 | let nextFiber = fiber
104 | while (nextFiber) {
105 | if (nextFiber.sibling) {
106 | return nextFiber.sibling
107 | }
108 | nextFiber = nextFiber.parent
109 | }
110 | }
111 |
112 | function reconcileChildren(wipFiber, elements) {
113 | let index = 0
114 | let oldFiber =
115 | wipFiber.alternate && wipFiber.alternate.child
116 | let prevSibling = null
117 |
118 | while (
119 | index < elements.length ||
120 | oldFiber != null
121 | ) {
122 | const element = elements[index]
123 | let newFiber = null
124 |
125 | const sameType =
126 | oldFiber &&
127 | element &&
128 | element.type == oldFiber.type
129 |
130 | if (sameType) {
131 | newFiber = {
132 | type: oldFiber.type,
133 | props: element.props,
134 | dom: oldFiber.dom,
135 | parent: wipFiber,
136 | alternate: oldFiber,
137 | effectTag: "UPDATE",
138 | }
139 | }
140 | if (element && !sameType) {
141 | newFiber = {
142 | type: element.type,
143 | props: element.props,
144 | dom: null,
145 | parent: wipFiber,
146 | alternate: null,
147 | effectTag: "PLACEMENT",
148 | }
149 | }
150 | if (oldFiber && !sameType) {
151 | oldFiber.effectTag = "DELETION"
152 | deletions.push(oldFiber)
153 | }
154 |
155 | if (oldFiber) {
156 | oldFiber = oldFiber.sibling
157 | }
158 |
159 | if (index === 0) {
160 | wipFiber.child = newFiber
161 | } else if (element) {
162 | prevSibling.sibling = newFiber
163 | }
164 |
165 | prevSibling = newFiber
166 | index++
167 | }
168 | }
169 |
170 | const Didact = {
171 | createElement,
172 | render,
173 | }
174 |
175 | /** @jsx Didact.createElement */
176 | const element = (
177 |
178 | bar
179 |
180 |
181 | )
182 | const container = document.getElementById("root")
183 | Didact.render(element, container)
184 |
--------------------------------------------------------------------------------
/sites/book/src/files/29.jsx:
--------------------------------------------------------------------------------
1 | function createElement(type, props, ...children) {
2 | return {
3 | type,
4 | props: {
5 | ...props,
6 | children: children.map(child =>
7 | typeof child === "object"
8 | ? child
9 | : createTextElement(child)
10 | ),
11 | },
12 | }
13 | }
14 |
15 | function createTextElement(text) {
16 | return {
17 | type: "TEXT_ELEMENT",
18 | props: {
19 | nodeValue: text,
20 | children: [],
21 | },
22 | }
23 | }
24 |
25 | function createDom(fiber) {
26 | const dom =
27 | fiber.type == "TEXT_ELEMENT"
28 | ? document.createTextNode("")
29 | : document.createElement(fiber.type)
30 |
31 | const isProperty = key => key !== "children"
32 | Object.keys(fiber.props)
33 | .filter(isProperty)
34 | .forEach(name => {
35 | dom[name] = fiber.props[name]
36 | })
37 |
38 | return dom
39 | }
40 |
41 | function commitRoot() {
42 | deletions.forEach(commitWork)
43 | commitWork(wipRoot.child)
44 | currentRoot = wipRoot
45 | wipRoot = null
46 | }
47 |
48 | function commitWork(fiber) {
49 | if (!fiber) {
50 | return
51 | }
52 | const domParent = fiber.parent.dom
53 | domParent.appendChild(fiber.dom)
54 | commitWork(fiber.child)
55 | commitWork(fiber.sibling)
56 | }
57 |
58 | function render(element, container) {
59 | wipRoot = {
60 | dom: container,
61 | props: {
62 | children: [element],
63 | },
64 | alternate: currentRoot,
65 | }
66 | deletions = []
67 | nextUnitOfWork = wipRoot
68 | }
69 |
70 | let nextUnitOfWork = null
71 | let currentRoot = null
72 | let wipRoot = null
73 | let deletions = null
74 |
75 | function workLoop(deadline) {
76 | let shouldYield = false
77 | while (nextUnitOfWork && !shouldYield) {
78 | nextUnitOfWork = performUnitOfWork(
79 | nextUnitOfWork
80 | )
81 | shouldYield = deadline.timeRemaining() < 1
82 | }
83 |
84 | if (!nextUnitOfWork && wipRoot) {
85 | commitRoot()
86 | }
87 |
88 | requestIdleCallback(workLoop)
89 | }
90 |
91 | requestIdleCallback(workLoop)
92 |
93 | function performUnitOfWork(fiber) {
94 | if (!fiber.dom) {
95 | fiber.dom = createDom(fiber)
96 | }
97 |
98 | const elements = fiber.props.children
99 | reconcileChildren(fiber, elements)
100 |
101 | if (fiber.child) {
102 | return fiber.child
103 | }
104 | let nextFiber = fiber
105 | while (nextFiber) {
106 | if (nextFiber.sibling) {
107 | return nextFiber.sibling
108 | }
109 | nextFiber = nextFiber.parent
110 | }
111 | }
112 |
113 | function reconcileChildren(wipFiber, elements) {
114 | let index = 0
115 | let oldFiber =
116 | wipFiber.alternate && wipFiber.alternate.child
117 | let prevSibling = null
118 |
119 | while (
120 | index < elements.length ||
121 | oldFiber != null
122 | ) {
123 | const element = elements[index]
124 | let newFiber = null
125 |
126 | const sameType =
127 | oldFiber &&
128 | element &&
129 | element.type == oldFiber.type
130 |
131 | if (sameType) {
132 | newFiber = {
133 | type: oldFiber.type,
134 | props: element.props,
135 | dom: oldFiber.dom,
136 | parent: wipFiber,
137 | alternate: oldFiber,
138 | effectTag: "UPDATE",
139 | }
140 | }
141 | if (element && !sameType) {
142 | newFiber = {
143 | type: element.type,
144 | props: element.props,
145 | dom: null,
146 | parent: wipFiber,
147 | alternate: null,
148 | effectTag: "PLACEMENT",
149 | }
150 | }
151 | if (oldFiber && !sameType) {
152 | oldFiber.effectTag = "DELETION"
153 | deletions.push(oldFiber)
154 | }
155 |
156 | if (oldFiber) {
157 | oldFiber = oldFiber.sibling
158 | }
159 |
160 | if (index === 0) {
161 | wipFiber.child = newFiber
162 | } else if (element) {
163 | prevSibling.sibling = newFiber
164 | }
165 |
166 | prevSibling = newFiber
167 | index++
168 | }
169 | }
170 |
171 | const Didact = {
172 | createElement,
173 | render,
174 | }
175 |
176 | /** @jsx Didact.createElement */
177 | const element = (
178 |
179 | bar
180 |
181 |
182 | )
183 | const container = document.getElementById("root")
184 | Didact.render(element, container)
185 |
--------------------------------------------------------------------------------
/sites/book/src/index.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | const reqs = require.context(".", true, /\.story\.js$/, "sync");
4 | reqs.keys().forEach(filename => reqs(filename));
5 |
--------------------------------------------------------------------------------
/sites/book/src/parsed-steps.story.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | import React from "react";
4 | import { storiesOf } from "@storybook/react";
5 | import { CodeSurfer } from "@code-surfer/standalone";
6 | import { StoryWithSlider } from "./utils";
7 | import parsedSteps from "./parsed-steps";
8 |
9 | storiesOf("Perf", module).add("50 Steps Parsed", () =>
21 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/sites/build.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | const fs = require("fs-extra");
4 | const { join } = require("path");
5 | const execa = require("execa");
6 |
7 | async function main() {
8 | // Remove dist dir
9 | fs.removeSync(join(__dirname, "dist"));
10 |
11 | // List of subfolder names
12 | const siteDirNames = fs
13 | .readdirSync(__dirname)
14 | .filter(fileName => isDir(join(__dirname, fileName)));
15 |
16 | // Create dist dir
17 | fs.ensureDirSync(join(__dirname, "dist"));
18 |
19 | // for each site
20 | // install dependencies, build and copy to dist
21 | const siteBuilds = siteDirNames.map(async siteDirName => {
22 | console.log(`
23 |
24 | --- building ${siteDirName} ---
25 |
26 | `);
27 | const cwd = join(__dirname, siteDirName);
28 | const { stdout, stderr } = process;
29 |
30 | execa.commandSync("yarn", { cwd, stdout, stderr });
31 | execa.commandSync("yarn build", { cwd, stdout, stderr });
32 |
33 | if (fs.existsSync(join(cwd, "dist"))) {
34 | await fs.copy(join(cwd, "dist"), join(__dirname, "dist", siteDirName));
35 | } else if (fs.existsSync(join(cwd, "build"))) {
36 | await fs.copy(join(cwd, "build"), join(__dirname, "dist", siteDirName));
37 | } else {
38 | await fs.copy(join(cwd, "public"), join(__dirname, "dist", siteDirName));
39 | }
40 | });
41 |
42 | await Promise.all(siteBuilds);
43 |
44 | // Move all files and folders from ./dist/docs to ./dist
45 | fs.readdirSync(join(__dirname, "dist/docs")).forEach(fileName =>
46 | fs.moveSync(
47 | join(__dirname, "dist/docs", fileName),
48 | join(__dirname, "dist", fileName)
49 | )
50 | );
51 | fs.removeSync(join(__dirname, "dist/docs"));
52 | }
53 |
54 | main().catch(err => {
55 | console.error(err);
56 | });
57 |
58 | // utils
59 |
60 | function isDir(source) {
61 | return fs.lstatSync(source).isDirectory();
62 | }
63 |
--------------------------------------------------------------------------------
/sites/docs/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /.pnp
3 | .pnp.js
4 | /coverage
5 | /dist
6 | /public
7 | /.cache
8 |
9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 |
--------------------------------------------------------------------------------
/sites/docs/decks/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "overrides": [
3 | {
4 | "files": "demo.mdx",
5 | "options": {
6 | "printWidth": 50,
7 | "semi": false
8 | }
9 | }
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/sites/docs/decks/code.js:
--------------------------------------------------------------------------------
1 | function hello(world) {
2 | return "hello " + world;
3 | }
4 |
5 | function hello(world) {
6 | return "hello " + world;
7 | }
8 |
9 | function hello(world) {
10 | return "hello " + world;
11 | }
12 |
--------------------------------------------------------------------------------
/sites/docs/decks/custom-theme.js:
--------------------------------------------------------------------------------
1 | export default {
2 | colors: {
3 | background: "#222",
4 | text: "#ddd",
5 | primary: "#a66"
6 | },
7 | styles: {
8 | CodeSurfer: {
9 | pre: {
10 | color: "text",
11 | backgroundColor: "background"
12 | },
13 | code: {
14 | color: "text",
15 | backgroundColor: "background"
16 | },
17 | tokens: {
18 | "comment cdata doctype": {
19 | fontStyle: "italic"
20 | },
21 | "builtin changed keyword punctuation operator tag deleted string attr-value char number inserted": {
22 | color: "primary"
23 | }
24 | },
25 | title: {
26 | backgroundColor: "background",
27 | color: "text"
28 | },
29 | subtitle: {
30 | color: "#d6deeb",
31 | backgroundColor: "rgba(10,10,10,0.9)"
32 | }
33 | }
34 | }
35 | };
36 |
--------------------------------------------------------------------------------
/sites/docs/decks/demo/image.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import img from "./surfer.jpg";
3 |
4 | export default ({ style }) => {
5 | return (
6 |
29 |
39 |
44 | setProgress({ progress: +e.target.value, teleport: true })
45 | }
46 | max={max}
47 | step={0.01}
48 | />
49 |
50 | {Math.round(p * 100) / 100}
51 |
52 |
62 |
63 |
71 | {children(p)}
72 |
73 |
12 | 
23 | {credit}
24 |
25 | );
26 | };
27 |
28 | const credit = (
29 |
30 | Photo by{" "}
31 |
36 | bady qb
37 | {" "}
38 | on Unsplash
39 |
40 | );
41 |
--------------------------------------------------------------------------------
/sites/docs/decks/demo/surfer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pomber/code-surfer/948452f7c1c8adaf019e29600d7d158747a91a90/sites/docs/decks/demo/surfer.jpg
--------------------------------------------------------------------------------
/sites/docs/decks/demo/theme.js:
--------------------------------------------------------------------------------
1 | export default {
2 | colors: { text: "#0D0543" },
3 | styles: { a: { color: "text" } }
4 | };
5 |
--------------------------------------------------------------------------------
/sites/docs/decks/errors.mdx:
--------------------------------------------------------------------------------
1 | import { CodeSurfer, CodeSurferColumns, Step } from "code-surfer";
2 | import { nightOwl, github, oceanicNext, vsDark } from "@code-surfer/themes";
3 |
4 |
7 |
10 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/sites/docs/decks/test.mdx:
--------------------------------------------------------------------------------
1 | import { CodeSurfer, CodeSurferColumns, Step } from "code-surfer";
2 | import { nightOwl, dracula, oceanicNext, vsDark } from "@code-surfer/themes";
3 |
4 | import { script } from "mdx-deck/themes";
5 |
6 | {count}
11 | 14 |
24 | {tokens.map((line, i) => (
25 |
26 | {line.map((token, key) => (
27 |
28 | ))}
29 |
30 | ))}
31 |
32 | )}
33 |
38 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/sites/docs/src/home/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | html,
11 | body,
12 | #___gatsby,
13 | #gatsby-focus-wrapper {
14 | height: 100%;
15 | }
16 |
17 | code {
18 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
19 | monospace;
20 | }
21 |
--------------------------------------------------------------------------------
/sites/docs/src/home/logos/bairesdev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pomber/code-surfer/948452f7c1c8adaf019e29600d7d158747a91a90/sites/docs/src/home/logos/bairesdev.png
--------------------------------------------------------------------------------
/sites/docs/src/home/logos/jabci.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pomber/code-surfer/948452f7c1c8adaf019e29600d7d158747a91a90/sites/docs/src/home/logos/jabci.png
--------------------------------------------------------------------------------
/sites/docs/src/home/logos/mdxdeck.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pomber/code-surfer/948452f7c1c8adaf019e29600d7d158747a91a90/sites/docs/src/home/logos/mdxdeck.png
--------------------------------------------------------------------------------
/sites/docs/src/home/logos/ocollective.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/sites/docs/src/home/purty-wood.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pomber/code-surfer/948452f7c1c8adaf019e29600d7d158747a91a90/sites/docs/src/home/purty-wood.png
--------------------------------------------------------------------------------
/sites/docs/src/home/shattered.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pomber/code-surfer/948452f7c1c8adaf019e29600d7d158747a91a90/sites/docs/src/home/shattered.png
--------------------------------------------------------------------------------
/sites/docs/src/home/speaker.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import s0 from "./speakers/0.png";
3 | import s1 from "./speakers/1.png";
4 | import s2 from "./speakers/2.png";
5 | import s3 from "./speakers/3.png";
6 | import s4 from "./speakers/4.png";
7 | import s5 from "./speakers/5.png";
8 | import s6 from "./speakers/6.png";
9 | import s7 from "./speakers/7.png";
10 | import s8 from "./speakers/8.png";
11 | import s9 from "./speakers/9.png";
12 |
13 | const speakers = [s0, s1, s2, s3, s4, s5, s6, s7, s8, s9];
14 |
15 | const speaker = speakers[Math.floor(Math.random() * speakers.length)];
16 |
17 | export default () => (
18 |
46 |
54 |
55 |
57 |
58 |
18 |
19 | Code Surfer: Rad Code Slides
20 |
21 | 
31 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/sites/docs/src/home/wood.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pomber/code-surfer/948452f7c1c8adaf019e29600d7d158747a91a90/sites/docs/src/home/wood.png
--------------------------------------------------------------------------------
/sites/docs/src/remove-overlay.css:
--------------------------------------------------------------------------------
1 | body > iframe {
2 | display: none;
3 | }
4 |
--------------------------------------------------------------------------------
/sites/docs/static/_redirects:
--------------------------------------------------------------------------------
1 | # Redirect domain aliases to primary domain
2 | https://codesurfer.js.org/* https://codesurfer.pomb.us/:splat 301!
3 |
4 | /:site/* /:site/index.html 200
--------------------------------------------------------------------------------
/sites/docs/static/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pomber/code-surfer/948452f7c1c8adaf019e29600d7d158747a91a90/sites/docs/static/android-chrome-192x192.png
--------------------------------------------------------------------------------
/sites/docs/static/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pomber/code-surfer/948452f7c1c8adaf019e29600d7d158747a91a90/sites/docs/static/android-chrome-512x512.png
--------------------------------------------------------------------------------
/sites/docs/static/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pomber/code-surfer/948452f7c1c8adaf019e29600d7d158747a91a90/sites/docs/static/apple-touch-icon.png
--------------------------------------------------------------------------------
/sites/docs/static/card.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pomber/code-surfer/948452f7c1c8adaf019e29600d7d158747a91a90/sites/docs/static/card.png
--------------------------------------------------------------------------------
/sites/docs/static/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pomber/code-surfer/948452f7c1c8adaf019e29600d7d158747a91a90/sites/docs/static/favicon-16x16.png
--------------------------------------------------------------------------------
/sites/docs/static/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pomber/code-surfer/948452f7c1c8adaf019e29600d7d158747a91a90/sites/docs/static/favicon-32x32.png
--------------------------------------------------------------------------------
/sites/docs/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pomber/code-surfer/948452f7c1c8adaf019e29600d7d158747a91a90/sites/docs/static/favicon.ico
--------------------------------------------------------------------------------
/sites/docs/static/site.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Code Surfer",
3 | "short_name": "Code Surfer",
4 | "icons": [
5 | {
6 | "src": "/android-chrome-192x192.png",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | },
10 | {
11 | "src": "/android-chrome-512x512.png",
12 | "sizes": "512x512",
13 | "type": "image/png"
14 | }
15 | ],
16 | "theme_color": "#ffffff",
17 | "background_color": "#ffffff",
18 | "display": "standalone"
19 | }
20 |
--------------------------------------------------------------------------------
Rad Code Slides
32 |
42 | {`npm init code-surfer-deck my-deck
43 | cd my-deck
44 | npm start`}
45 |
46 | 47 | This site is a work in progress, here are the provisional{" "} 48 | 49 | docs for Code Surfer v3.0.0 50 | 51 |
52 |