Fiber Example<\/title>\n+ <link rel=\"stylesheet\" href=\"..\/shared\/css\/base.css\" \/>\n+ <\/head>\n+ <body>\n+ <h1>Fiber Example<\/h1>\n+ <div id=\"container\">\n+ <p>\n+ To install React, follow the instructions on\n+ <a href=\"https:\/\/github.com\/facebook\/react\/\">GitHub<\/a>.\n+ <\/p>\n+ <p>\n+ If you can see this, React is <strong>not<\/strong> working right.\n+ If you checked out the source from GitHub make sure to run <code>grunt<\/code>.\n+ <\/p>\n+ <\/div>\n+ <script src=\"..\/..\/build\/react.js\"><\/script>\n+ <script src=\"..\/..\/build\/react-dom.js\"><\/script>\n+ <script>\n+ function ExampleApplication(props) {\n+ var elapsed = Math.round(props.elapsed \/ 100);\n+ var seconds = elapsed \/ 10 + (elapsed % 10 ? '' : '.0' );\n+ var message =\n+ 'React has been successfully running for ' + seconds + ' seconds.';\n+\n+ return React.DOM.p(null, message);\n+ }\n+\n+ \/\/ Call React.createFactory instead of directly call ExampleApplication({...}) in React.render\n+ var ExampleApplicationFactory = React.createFactory(ExampleApplication);\n+\n+ var start = new Date().getTime();\n+ setInterval(function() {\n+ ReactDOM.render(\n+ ExampleApplicationFactory({elapsed: new Date().getTime() - start}),\n+ document.getElementById('container')\n+ );\n+ }, 50);\n+ <\/script>\n+ <\/body>\n+<\/html>\ndiff --git a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\nnew file mode 100644\nindex 0000000000..9d872374ae\n--- \/dev\/null\n+++ b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n@@ -0,0 +1,99 @@\n+\/**\n+ * Copyright 2013-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule ReactDOMFiber\n+ * @flow\n+ *\/\n+\n+\/**\n+ * This is a renderer of React that doesn't have a render target output.\n+ * It is useful to demonstrate the internals of the reconciler in isolation\n+ * and for testing semantics of reconciliation separate from the host\n+ * environment.\n+ *\/\n+\n+'use strict';\n+\n+import type { HostChildren } from 'ReactFiberReconciler';\n+\n+var ReactFiberReconciler = require('ReactFiberReconciler');\n+\n+type DOMContainerElement = Element & { _reactRootContainer: Object };\n+\n+type Container = Element;\n+type Props = { };\n+type Instance = Element;\n+\n+function recursivelyAppendChildren(parent : Element, child : HostChildren<Instance>) {\n+ if (!child) {\n+ return;\n+ }\n+ \/* $FlowFixMe: Element should have this property. *\/\n+ if (child.nodeType === 1) {\n+ \/* $FlowFixMe: Refinement issue. I don't know how to express different. *\/\n+ parent.appendChild(child);\n+ } else {\n+ \/* As a result of the refinement issue this type isn't known. *\/\n+ let node : any = child;\n+ do {\n+ recursivelyAppendChildren(parent, node.output);\n+ } while (node = node.sibling);\n+ }\n+}\n+\n+var DOMRenderer = ReactFiberReconciler({\n+\n+ updateContainer(container : Container, children : HostChildren<Instance>) : void {\n+ container.innerHTML = '';\n+ recursivelyAppendChildren(container, children);\n+ },\n+\n+ createInstance(type : string, props : Props, children : HostChildren<Instance>) : Instance {\n+ const domElement = document.createElement(type);\n+ recursivelyAppendChildren(domElement, children);\n+ if (typeof props.children === 'string') {\n+ domElement.textContent = props.children;\n+ }\n+ return domElement;\n+ },\n+\n+ prepareUpdate(domElement : Instance, oldProps : Props, newProps : Props, children : HostChildren<Instance>) : boolean {\n+ return true;\n+ },\n+\n+ commitUpdate(domElement : Instance, oldProps : Props, newProps : Props, children : HostChildren<Instance>) : void {\n+ domElement.innerHTML = '';\n+ recursivelyAppendChildren(domElement, children);\n+ if (typeof newProps.children === 'string') {\n+ domElement.textContent = newProps.children;\n+ }\n+ },\n+\n+ deleteInstance(instance : Instance) : void {\n+ \/\/ Noop\n+ },\n+\n+ scheduleHighPriCallback: window.requestAnimationFrame,\n+\n+ scheduleLowPriCallback: window.requestIdleCallback,\n+\n+});\n+\n+var ReactDOM = {\n+\n+ render(element : ReactElement<any>, container : DOMContainerElement) {\n+ if (!container._reactRootContainer) {\n+ container._reactRootContainer = DOMRenderer.mountContainer(element, container);\n+ } else {\n+ DOMRenderer.updateContainer(element, container._reactRootContainer);\n+ }\n+ },\n+\n+};\n+\n+module.exports = ReactDOM;\n","parents":["c6b5622bffa92e358f12ac21d485aac67bb4f8d9"],"body":"","files":[{"status":"A","path":"examples\/fiber\/index.html"},{"status":"A","path":"src\/renderers\/dom\/fiber\/ReactDOMFiber.js"}]}</article></body></html>

{"commit":{"revision":"05c69252821cafaea921dce7fcddae51c0aa3121","shortRevision":"05c6925282","authorName":"Sebastian Markbage","authorEmail":"sema@fb.com","subject":"Rudimentary DOM Renderer with Example","authoredAt":"2016-06-30T14:30:16-07:00"},"patch":"diff --git a\/examples\/fiber\/index.html b\/examples\/fiber\/index.html\nnew file mode 100644\nindex 0000000000..c507993794\n--- \/dev\/null\n+++ b\/examples\/fiber\/index.html\n@@ -0,0 +1,44 @@\n+\n+\n+ \n+ \n+ Fiber Example<\/title>\n+ <link rel=\"stylesheet\" href=\"..\/shared\/css\/base.css\" \/>\n+ <\/head>\n+ <body>\n+ <h1>Fiber Example<\/h1>\n+ <div id=\"container\">\n+ <p>\n+ To install React, follow the instructions on\n+ <a href=\"https:\/\/github.com\/facebook\/react\/\">GitHub<\/a>.\n+ <\/p>\n+ <p>\n+ If you can see this, React is <strong>not<\/strong> working right.\n+ If you checked out the source from GitHub make sure to run <code>grunt<\/code>.\n+ <\/p>\n+ <\/div>\n+ <script src=\"..\/..\/build\/react.js\"><\/script>\n+ <script src=\"..\/..\/build\/react-dom.js\"><\/script>\n+ <script>\n+ function ExampleApplication(props) {\n+ var elapsed = Math.round(props.elapsed \/ 100);\n+ var seconds = elapsed \/ 10 + (elapsed % 10 ? '' : '.0' );\n+ var message =\n+ 'React has been successfully running for ' + seconds + ' seconds.';\n+\n+ return React.DOM.p(null, message);\n+ }\n+\n+ \/\/ Call React.createFactory instead of directly call ExampleApplication({...}) in React.render\n+ var ExampleApplicationFactory = React.createFactory(ExampleApplication);\n+\n+ var start = new Date().getTime();\n+ setInterval(function() {\n+ ReactDOM.render(\n+ ExampleApplicationFactory({elapsed: new Date().getTime() - start}),\n+ document.getElementById('container')\n+ );\n+ }, 50);\n+ <\/script>\n+ <\/body>\n+<\/html>\ndiff --git a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\nnew file mode 100644\nindex 0000000000..9d872374ae\n--- \/dev\/null\n+++ b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n@@ -0,0 +1,99 @@\n+\/**\n+ * Copyright 2013-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule ReactDOMFiber\n+ * @flow\n+ *\/\n+\n+\/**\n+ * This is a renderer of React that doesn't have a render target output.\n+ * It is useful to demonstrate the internals of the reconciler in isolation\n+ * and for testing semantics of reconciliation separate from the host\n+ * environment.\n+ *\/\n+\n+'use strict';\n+\n+import type { HostChildren } from 'ReactFiberReconciler';\n+\n+var ReactFiberReconciler = require('ReactFiberReconciler');\n+\n+type DOMContainerElement = Element & { _reactRootContainer: Object };\n+\n+type Container = Element;\n+type Props = { };\n+type Instance = Element;\n+\n+function recursivelyAppendChildren(parent : Element, child : HostChildren<Instance>) {\n+ if (!child) {\n+ return;\n+ }\n+ \/* $FlowFixMe: Element should have this property. *\/\n+ if (child.nodeType === 1) {\n+ \/* $FlowFixMe: Refinement issue. I don't know how to express different. *\/\n+ parent.appendChild(child);\n+ } else {\n+ \/* As a result of the refinement issue this type isn't known. *\/\n+ let node : any = child;\n+ do {\n+ recursivelyAppendChildren(parent, node.output);\n+ } while (node = node.sibling);\n+ }\n+}\n+\n+var DOMRenderer = ReactFiberReconciler({\n+\n+ updateContainer(container : Container, children : HostChildren<Instance>) : void {\n+ container.innerHTML = '';\n+ recursivelyAppendChildren(container, children);\n+ },\n+\n+ createInstance(type : string, props : Props, children : HostChildren<Instance>) : Instance {\n+ const domElement = document.createElement(type);\n+ recursivelyAppendChildren(domElement, children);\n+ if (typeof props.children === 'string') {\n+ domElement.textContent = props.children;\n+ }\n+ return domElement;\n+ },\n+\n+ prepareUpdate(domElement : Instance, oldProps : Props, newProps : Props, children : HostChildren<Instance>) : boolean {\n+ return true;\n+ },\n+\n+ commitUpdate(domElement : Instance, oldProps : Props, newProps : Props, children : HostChildren<Instance>) : void {\n+ domElement.innerHTML = '';\n+ recursivelyAppendChildren(domElement, children);\n+ if (typeof newProps.children === 'string') {\n+ domElement.textContent = newProps.children;\n+ }\n+ },\n+\n+ deleteInstance(instance : Instance) : void {\n+ \/\/ Noop\n+ },\n+\n+ scheduleHighPriCallback: window.requestAnimationFrame,\n+\n+ scheduleLowPriCallback: window.requestIdleCallback,\n+\n+});\n+\n+var ReactDOM = {\n+\n+ render(element : ReactElement<any>, container : DOMContainerElement) {\n+ if (!container._reactRootContainer) {\n+ container._reactRootContainer = DOMRenderer.mountContainer(element, container);\n+ } else {\n+ DOMRenderer.updateContainer(element, container._reactRootContainer);\n+ }\n+ },\n+\n+};\n+\n+module.exports = ReactDOM;\n","parents":["c6b5622bffa92e358f12ac21d485aac67bb4f8d9"],"body":"","files":[{"status":"A","path":"examples\/fiber\/index.html"},{"status":"A","path":"src\/renderers\/dom\/fiber\/ReactDOMFiber.js"}]}</article></body></html>

dillon1000/react

Files changed