diff --git a/README.md b/README.md index 90f450c..d4276d3 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,10 @@ With that let’s get started! Our tour continues in [./src/mount.js](./src/moun Please note this guide is a work in progress. Much of this knowledge is derived from my experience in creating [React Hardware](https://github.com/iamdustan/react-hardware). +## Tests + +* `npm test` will run the tests with the stack-based renderer +* `npm test -- --fiber` will run the tests with the upcoming fiber implementation ## Renderer Implementations diff --git a/src/fiber/README.md b/src/fiber/README.md index 2e329bc..3110a1e 100644 --- a/src/fiber/README.md +++ b/src/fiber/README.md @@ -1,2 +1,33 @@ -# It begins +# Tiny React Renderer + +> Note that this is currently targeting the **React 16.0.0-alpha.2** release. + +Creating a fiber-based React renderer is quite direct, though there are a few +awkward pieces around tooling that will be smoothed over in time. + +Many languages have this concept of a `main`—the entry point to your +application. If you look at any React application code you’ve written you’ll see +that you “start” your app with a call like the following: + +```jsx +// web +ReactDOM.render(React.createElement(MyApp), document.getElementById('app')); + +// native +AppRegistry.registerComponent('MyApp', () => MyApp); +``` + +This is where your application enters into the React domain and comes alive. Your +root React element is instantiated and attached to the host environment. + +With Fiber, all renderers begin (and maybe even end) in the React{Host}Fiber.js +file. + +With that let’s get started. Our tour continues in +[./ReactTinyFiber.js](./ReactxTinyFiber.js)! + +## Work in Progress + +Please note this guide is a work in progress. Much of this knowledge is derived +from my experience in creating [React Hardware](https://github.com/iamdustan/react-hardware). diff --git a/index.js b/src/stack/index.js similarity index 53% rename from index.js rename to src/stack/index.js index dfb8da5..1c2f572 100644 --- a/index.js +++ b/src/stack/index.js @@ -1,6 +1,6 @@ 'use strict'; -const render = require('./src/mount'); +const render = require('./mount'); module.exports = {render}; diff --git a/src/stack/package.js b/src/stack/package.js new file mode 100644 index 0000000..82c01ba --- /dev/null +++ b/src/stack/package.js @@ -0,0 +1,35 @@ +{ + "name": "tiny-react-renderer-stack", + "private": true, + "description": "A tiny React stack renderer to demonstrate how to write a renderer.", + "main": "./index.js", + "scripts": { + "test": "node ./test" + }, + "repository": { + "type": "git", + "url": "https://github.com/iamdustan/tiny-react-renderer" + }, + "files": [ + "*", + "package.json", + "README.md" + ], + "keywords": [ + "react", + "reactjs", + "renderer" + ], + "author": "Dustan Kasten ", + "license": "MIT", + "bugs": { + "url": "https://github.com/iamdustan/tiny-render-renderer/issues" + }, + "homepage": "https://github.com/iamdustan/tiny-render-renderer", + "dependencies": { + "fbjs": "^0.8.4", + "react": "15.3.x" + }, + "devDependencies": {} +} + diff --git a/src/stack/yarn.lock b/src/stack/yarn.lock new file mode 100644 index 0000000..fb57ccd --- /dev/null +++ b/src/stack/yarn.lock @@ -0,0 +1,4 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + diff --git a/test.js b/test.js index 068b69a..ef47e19 100644 --- a/test.js +++ b/test.js @@ -2,7 +2,13 @@ const assert = require('assert'); const React = require('react'); -const TinyRenderer = require('./'); +const args = process.argv.slice(2); + +const TEST_FILE = args[0] === '-f' || args[0] === '--fiber' + ? 'fiber' + : 'stack'; + +const TinyRenderer = require('./src/' + TEST_FILE); const render = TinyRenderer.render; const toJSON = (props) => { if (props.children) {