Skip to content

Instantly share code, notes, and snippets.

🤓
typing fast

Tev Tevinthuku

🤓
typing fast
Block or report user

Report or block Tevinthuku

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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
/**
You can’t perform that action at this time.