Skip to content

Instantly share code, notes, and snippets.

Avatar
🤓
typing fast

Tev Tevinthuku

🤓
typing fast
View GitHub Profile
View fiber.js
//NB: ALL DOM nodes have their corresponding fibers in our new implementation
// most of this properties will make sense once we begin using them
let fiber = {
tag: HOST_COMPONENT, // we can have either host of class component
type: "input",
parent: parentFiber, // the parentNode’s fiber
child: childFiber, // the childNode’s fiber if it has any
sibling: null, // the element that is in the same tree level as this input
alternate: currentFiber, // the fiber that has been rendered on the dom. Will be null if its on initial render
stateNode: document.createElement(“div”),
View demo-index.js
const rootElement = document.getElementById("root")
ReactDom.render(<Component />, rootElement) // renders for the first time
ReactDom.render(<Component />, rootElement) // does the app component render twice
View package.json
{
"main": "dist/tevreact.umd.js",
"module": "dist/tevreact.es.js", // ESM-aware tools like Rollup need this field to import the es module directly
"name": "tevreact",
"version": "1.0.0",
"license": "MIT",
"files": [
"dist"
],
"scripts": {
View bash
$ yarn init -y // if you have yarn installed
$ npm init -y // if you have npm
// install rollup
$ yarn add rollup —-dev
$ npm install rollup —-save-dev
View demo-index.js
const root = document.getElementById("root")
ReactDom.render(<Component />, root)
@Tevinthuku
Tevinthuku / .babelrc
Last active Aug 27, 2019
Full project setup.
View .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
@Tevinthuku
Tevinthuku / reconciler.js
Created Aug 14, 2019
commitAllWork() now
View reconciler.js
function performWork(deadline) {
// ...code
if (pendingCommit) {
commitAllWork(pendingCommit);
}
}
function commitAllWork(fiber) {
// this fiber has all the effects of the entire tree
fiber.effects.forEach(f => {
View reconciler.js
// ...code
let pendingCommit = null; // this is what will be flushed to the dom
// ... code
function completeWork(fiber) {
// this function takes the list of effects of the children and appends them to the effects of
// the parent
if (fiber.tag == CLASS_COMPONENT) {
View reconciler.js
// .. code
function cloneChildFibers(parentFiber) {
const oldFiber = parentFiber.alternate;
// if there is no child for the alternate
// there's no more work to do
// so just kill the execution
if (!oldFiber.child) {
return;
}
@Tevinthuku
Tevinthuku / reconciler.js
Last active Aug 14, 2019
reconciling children
View reconciler.js
// .. code
const PLACEMENT = "PLACEMENT"; // this is for a child that needs to be added
const DELETION = "DELETION"; //for a child that needs to be deleted.
const UPDATE = "UPDATE"; // for a child that needs to be updated. refresh the props
function createArrayOfChildren(children) {
// we can pass children as an array now in the call to render
/**