From b3ec0cb488c081b4e41c247b41821400632e4af7 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 3 Apr 2017 20:32:02 +0100 Subject: [PATCH] Remove examples/ folder (#9323) --- .eslintignore | 4 + .flowconfig | 4 + .gitignore | 5 + docs/docs/web-components.md | 2 - examples/README.md | 5 - examples/basic-commonjs/.babelrc | 3 - examples/basic-commonjs/README.md | 9 - examples/basic-commonjs/index.html | 37 - examples/basic-commonjs/index.js | 24 - examples/basic-commonjs/package.json | 19 - examples/basic-jsx-external/example.js | 19 - examples/basic-jsx-precompile/example.js | 19 - examples/basic-jsx-precompile/index.html | 40 - examples/basic/index.html | 52 - examples/jquery-bootstrap/css/example.css | 3 - examples/jquery-bootstrap/js/app.js | 139 - examples/jquery-mobile/README.md | 6 - examples/jquery-mobile/index.html | 19 - examples/jquery-mobile/js/app.js | 191 - examples/quadratic/example.js | 59 - examples/shared/css/base.css | 62 - examples/transitions/transition.css | 44 - fixtures/fiber-debugger/.env | 1 + fixtures/fiber-debugger/.gitignore | 14 + fixtures/fiber-debugger/README.md | 25 + fixtures/fiber-debugger/package.json | 18 + fixtures/fiber-debugger/public/favicon.ico | Bin 0 -> 24838 bytes fixtures/fiber-debugger/public/index.html | 13 + fixtures/fiber-debugger/src/App.js | 196 + fixtures/fiber-debugger/src/Editor.js | 35 + fixtures/fiber-debugger/src/Fibers.js | 395 ++ fixtures/fiber-debugger/src/describeFibers.js | 96 + fixtures/fiber-debugger/src/index.css | 15 + fixtures/fiber-debugger/src/index.js | 9 + fixtures/fiber-debugger/yarn.lock | 5741 +++++++++++++++++ .../fiber-triangle}/index.html | 0 fixtures/packaging/babel-standalone.html | 14 + 37 files changed, 6585 insertions(+), 752 deletions(-) delete mode 100644 examples/README.md delete mode 100644 examples/basic-commonjs/.babelrc delete mode 100644 examples/basic-commonjs/README.md delete mode 100644 examples/basic-commonjs/index.html delete mode 100644 examples/basic-commonjs/index.js delete mode 100644 examples/basic-commonjs/package.json delete mode 100644 examples/basic-jsx-external/example.js delete mode 100644 examples/basic-jsx-precompile/example.js delete mode 100644 examples/basic-jsx-precompile/index.html delete mode 100644 examples/basic/index.html delete mode 100644 examples/jquery-bootstrap/css/example.css delete mode 100644 examples/jquery-bootstrap/js/app.js delete mode 100644 examples/jquery-mobile/README.md delete mode 100644 examples/jquery-mobile/index.html delete mode 100644 examples/jquery-mobile/js/app.js delete mode 100644 examples/quadratic/example.js delete mode 100644 examples/shared/css/base.css delete mode 100644 examples/transitions/transition.css create mode 100644 fixtures/fiber-debugger/.env create mode 100644 fixtures/fiber-debugger/.gitignore create mode 100644 fixtures/fiber-debugger/README.md create mode 100644 fixtures/fiber-debugger/package.json create mode 100644 fixtures/fiber-debugger/public/favicon.ico create mode 100644 fixtures/fiber-debugger/public/index.html create mode 100644 fixtures/fiber-debugger/src/App.js create mode 100644 fixtures/fiber-debugger/src/Editor.js create mode 100644 fixtures/fiber-debugger/src/Fibers.js create mode 100644 fixtures/fiber-debugger/src/describeFibers.js create mode 100644 fixtures/fiber-debugger/src/index.css create mode 100644 fixtures/fiber-debugger/src/index.js create mode 100644 fixtures/fiber-debugger/yarn.lock rename {examples/fiber => fixtures/fiber-triangle}/index.html (100%) create mode 100644 fixtures/packaging/babel-standalone.html diff --git a/.eslintignore b/.eslintignore index 0ffbe9528c..2d7c565d32 100644 --- a/.eslintignore +++ b/.eslintignore @@ -9,7 +9,11 @@ docs/_site/ docs/vendor/bundle/ # This should be more like examples/**/thirdparty/** but # we should fix https://github.com/facebook/esprima/pull/85 first +<<<<<<< HEAD examples/ +======= +fixtures/ +>>>>>>> 4a37718... Remove examples/ folder (#9323) # Ignore built files. build/ coverage/ diff --git a/.flowconfig b/.flowconfig index f483c7c51a..1b15b4d7d2 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,6 +1,10 @@ [ignore] +<<<<<<< HEAD /examples/.* +======= +/fixtures/.* +>>>>>>> 4a37718... Remove examples/ folder (#9323) /build/.* /.*/node_modules/y18n/.* /.*/__mocks__/.* diff --git a/.gitignore b/.gitignore index 21728725b2..7cf76ab520 100644 --- a/.gitignore +++ b/.gitignore @@ -17,8 +17,13 @@ docs/.sass-cache docs/js/* docs/downloads/*.zip docs/vendor/bundle +<<<<<<< HEAD examples/shared/*.js examples/**/bundle.js +======= +fixtures/dom/public/react-dom.js +fixtures/dom/public/react.js +>>>>>>> 4a37718... Remove examples/ folder (#9323) test/the-files-to-test.generated.js *.log* chrome-user-data diff --git a/docs/docs/web-components.md b/docs/docs/web-components.md index 4063db0e1c..1012ea795b 100644 --- a/docs/docs/web-components.md +++ b/docs/docs/web-components.md @@ -56,5 +56,3 @@ const proto = Object.create(HTMLElement.prototype, { }); document.registerElement('x-search', {prototype: proto}); ``` - -You can also check out this [complete Web Components example on GitHub](https://github.com/facebook/react/tree/master/examples/webcomponents). diff --git a/examples/README.md b/examples/README.md deleted file mode 100644 index 53d7a6445b..0000000000 --- a/examples/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# React Examples - -Here are some small React demos. Some use [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) and some include third-party library integration. - -For more fully-featured examples, check out [React TodoMVC](http://todomvc.com/examples/react/) and [React + Backbone TodoMVC](http://todomvc.com/examples/react-backbone/). diff --git a/examples/basic-commonjs/.babelrc b/examples/basic-commonjs/.babelrc deleted file mode 100644 index 0578679419..0000000000 --- a/examples/basic-commonjs/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["react", "es2015"] -} diff --git a/examples/basic-commonjs/README.md b/examples/basic-commonjs/README.md deleted file mode 100644 index 87025c46e2..0000000000 --- a/examples/basic-commonjs/README.md +++ /dev/null @@ -1,9 +0,0 @@ -# Basic example of using React with Browserify - -Run `npm install` in the directory to install React from npm. Then run: - -```sh -npm start -``` - -to produce `bundle.js` with example code and React. diff --git a/examples/basic-commonjs/index.html b/examples/basic-commonjs/index.html deleted file mode 100644 index 0b6c023c3f..0000000000 --- a/examples/basic-commonjs/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - Basic CommonJS Example with Browserify - - - -

Basic CommonJS Example with Browserify

-
-

- To install React, follow the instructions on - GitHub. -

-

- If you can see this, React is not working right. - If you checked out the source from GitHub make sure to run grunt. -

-
-

Example Details

-

This is written with JSX in a CommonJS module and precompiled to vanilla JS by navigating to the example - directory - 

cd /path/to/react/examples/example-name
- and running - 
npm start
-
- (don't forget to install first) - 
npm install
-
-

-

- Learn more about React at - facebook.github.io/react. -

- - - diff --git a/examples/basic-commonjs/index.js b/examples/basic-commonjs/index.js deleted file mode 100644 index ef90bbb89c..0000000000 --- a/examples/basic-commonjs/index.js +++ /dev/null @@ -1,24 +0,0 @@ -'use strict'; - -var React = require('react'); -var ReactDOM = require('react-dom'); - -var ExampleApplication = React.createClass({ - render: function() { - var elapsed = Math.round(this.props.elapsed / 100); - var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' ); - var message = - 'React has been successfully running for ' + seconds + ' seconds.'; - - return

{message}

; - } -}); - -var start = new Date().getTime(); - -setInterval(function() { - ReactDOM.render( - , - document.getElementById('container') - ); -}, 50); diff --git a/examples/basic-commonjs/package.json b/examples/basic-commonjs/package.json deleted file mode 100644 index e42eb80de4..0000000000 --- a/examples/basic-commonjs/package.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "react-basic-commonjs-example", - "description": "Basic example of using React with CommonJS", - "private": true, - "main": "index.js", - "dependencies": { - "babel-preset-es2015": "^6.6.0", - "babel-preset-react": "^6.5.0", - "babelify": "^7.3.0", - "browserify": "^13.0.0", - "react": "^15.0.2", - "react-dom": "^15.0.2", - "watchify": "^3.7.0" - }, - "scripts": { - "build": "browserify ./index.js -t babelify -o bundle.js", - "start": "watchify ./index.js -v -t babelify -o bundle.js" - } -} diff --git a/examples/basic-jsx-external/example.js b/examples/basic-jsx-external/example.js deleted file mode 100644 index 7d9911eb6c..0000000000 --- a/examples/basic-jsx-external/example.js +++ /dev/null @@ -1,19 +0,0 @@ -var ExampleApplication = React.createClass({ - render: function() { - var elapsed = Math.round(this.props.elapsed / 100); - var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' ); - var message = - 'React has been successfully running for ' + seconds + ' seconds.'; - - return

{message}

; - } -}); - -var start = new Date().getTime(); - -setInterval(function() { - ReactDOM.render( - , - document.getElementById('container') - ); -}, 50); diff --git a/examples/basic-jsx-precompile/example.js b/examples/basic-jsx-precompile/example.js deleted file mode 100644 index 7d9911eb6c..0000000000 --- a/examples/basic-jsx-precompile/example.js +++ /dev/null @@ -1,19 +0,0 @@ -var ExampleApplication = React.createClass({ - render: function() { - var elapsed = Math.round(this.props.elapsed / 100); - var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' ); - var message = - 'React has been successfully running for ' + seconds + ' seconds.'; - - return

{message}

; - } -}); - -var start = new Date().getTime(); - -setInterval(function() { - ReactDOM.render( - , - document.getElementById('container') - ); -}, 50); diff --git a/examples/basic-jsx-precompile/index.html b/examples/basic-jsx-precompile/index.html deleted file mode 100644 index 88720b6a01..0000000000 --- a/examples/basic-jsx-precompile/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - Basic Example with Precompiled JSX - - - -

Basic Example with Precompiled JSX

-
-

- If you can see this, React is not running. Try running: -

- 
npm install -g babel-cli
-cd examples/basic-jsx-precompile/
-npm install babel-preset-react
-babel example.js --presets react --out-dir=build
-
-

Example Details

-

This is written with JSX in a separate file and precompiled to vanilla JS by running:

- -

With Babel lower than 6.0

- 
npm install -g babel
-cd examples/basic-jsx-precompile/
-babel example.js --out-dir=build
- -

With Babel 6.0 or higher

- 
npm install -g babel-cli
-cd examples/basic-jsx-precompile/
-npm install babel-preset-react
-babel example.js --presets react --out-dir=build
-

- Learn more about React at - facebook.github.io/react. -

- - - - - diff --git a/examples/basic/index.html b/examples/basic/index.html deleted file mode 100644 index 9fc1fb3c30..0000000000 --- a/examples/basic/index.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - Basic Example - - - -

Basic Example

-
-

- To install React, follow the instructions on - GitHub. -

-

- If you can see this, React is not working right. - If you checked out the source from GitHub make sure to run grunt. -

-
-

Example Details

-

This is written in vanilla JavaScript (without JSX) and transformed in the browser.

-

- Learn more about React at - facebook.github.io/react. -

- - - - - diff --git a/examples/jquery-bootstrap/css/example.css b/examples/jquery-bootstrap/css/example.css deleted file mode 100644 index d40f2fbd05..0000000000 --- a/examples/jquery-bootstrap/css/example.css +++ /dev/null @@ -1,3 +0,0 @@ -.example { - margin: 20px; -} \ No newline at end of file diff --git a/examples/jquery-bootstrap/js/app.js b/examples/jquery-bootstrap/js/app.js deleted file mode 100644 index c1342d82a7..0000000000 --- a/examples/jquery-bootstrap/js/app.js +++ /dev/null @@ -1,139 +0,0 @@ -'use strict'; - -// Simple pure-React component so we don't have to remember -// Bootstrap's classes -var BootstrapButton = React.createClass({ - render: function() { - return ( - - ); - } -}); - -var BootstrapModal = React.createClass({ - // The following two methods are the only places we need to - // integrate Bootstrap or jQuery with the components lifecycle methods. - componentDidMount: function() { - // When the component is added, turn it into a modal - $(this.refs.root).modal({backdrop: 'static', keyboard: false, show: false}); - - // Bootstrap's modal class exposes a few events for hooking into modal - // functionality. Lets hook into one of them: - $(this.refs.root).on('hidden.bs.modal', this.handleHidden); - }, - componentWillUnmount: function() { - $(this.refs.root).off('hidden.bs.modal', this.handleHidden); - }, - close: function() { - $(this.refs.root).modal('hide'); - }, - open: function() { - $(this.refs.root).modal('show'); - }, - render: function() { - var confirmButton = null; - var cancelButton = null; - - if (this.props.confirm) { - confirmButton = ( - - {this.props.confirm} - - ); - } - if (this.props.cancel) { - cancelButton = ( - - {this.props.cancel} - - ); - } - - return ( -
-
-
-
- -

{this.props.title}

-
-
- {this.props.children} -
-
- {cancelButton} - {confirmButton} -
-
-
-
- ); - }, - handleCancel: function() { - if (this.props.onCancel) { - this.props.onCancel(); - } - }, - handleConfirm: function() { - if (this.props.onConfirm) { - this.props.onConfirm(); - } - }, - handleHidden: function() { - if (this.props.onHidden) { - this.props.onHidden(); - } - } -}); - -var Example = React.createClass({ - handleCancel: function() { - if (confirm('Are you sure you want to cancel?')) { - this.refs.modal.close(); - } - }, - render: function() { - var modal = null; - modal = ( - - This is a React component powered by jQuery and Bootstrap! - - ); - return ( -
- {modal} - - Open modal - -
- ); - }, - openModal: function() { - this.refs.modal.open(); - }, - closeModal: function() { - this.refs.modal.close(); - }, - handleModalDidClose: function() { - alert("The modal has been dismissed!"); - } -}); - -ReactDOM.render(, document.getElementById('jqueryexample')); diff --git a/examples/jquery-mobile/README.md b/examples/jquery-mobile/README.md deleted file mode 100644 index dd9661a363..0000000000 --- a/examples/jquery-mobile/README.md +++ /dev/null @@ -1,6 +0,0 @@ -jQuery Mobile React Example -=========================== - -This example demonstrates how jQuery Mobile applications can be built with React. - -The source code is based on jQuery Mobile's [pages-multi-page example](https://github.com/jquery/jquery-mobile/tree/master/demos/pages-multi-page). diff --git a/examples/jquery-mobile/index.html b/examples/jquery-mobile/index.html deleted file mode 100644 index b244949b49..0000000000 --- a/examples/jquery-mobile/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - jQuery Mobile React Example - - - - -
- - - - - - - diff --git a/examples/jquery-mobile/js/app.js b/examples/jquery-mobile/js/app.js deleted file mode 100644 index 1eb728bbd5..0000000000 --- a/examples/jquery-mobile/js/app.js +++ /dev/null @@ -1,191 +0,0 @@ -/** - * jQuery Mobile React Example - * - * Main application script. - * For variety, this example is written in 100% JSHint-compliant JavaScript, not in JSX. - * - * Component structure: - * - * - App - * |-- JQueryMobilePage (one) - * | |-- JQueryMobileHeader - * | |-- JQueryMobileContent - * | | |-- PageOneContent - * | | |-- JQueryMobileButton - * | |-- JQueryMobileFooter - * |-- JQueryMobilePage (two) - * | |-- JQueryMobileHeader - * | |-- JQueryMobileContent - * | | |-- PageTwoContent - * | | |-- JQueryMobileButton - * | |-- JQueryMobileFooter - * |-- JQueryMobilePage (popup) - * |-- JQueryMobileHeader - * |-- JQueryMobileContent - * | |-- PagePopUpContent - * | |-- JQueryMobileButton - * |-- JQueryMobileFooter - */ - - /* global document, React */ - -'use strict'; - -/** Main application component. */ -var App = React.createClass({ - displayName: 'App', - - render: function() { - return React.DOM.div({className:'app'}, - JQueryMobilePage({id:'one'}, PageOneContent(null)), - JQueryMobilePage({id:'two'}, PageTwoContent(null)), - JQueryMobilePage({id:'popup', headerTheme:'b'}, PagePopUpContent(null)) - ); - } -}); -App = React.createFactory(App); - -/** jQuery Mobile button component. */ -var JQueryMobileButton = React.createClass({ - displayName: 'JQueryMobileButton', - - getDefaultProps: function() { - return {className:'ui-btn ui-shadow ui-corner-all'}; - }, - - render: function() { - return React.DOM.p(null, - React.DOM.a(this.props, this.props.children) - ); - } -}); -JQueryMobileButton = React.createFactory(JQueryMobileButton); - -/** jQuery Mobile page content component. */ -var JQueryMobileContent = React.createClass({ - displayName: 'JQueryMobileContent', - - render: function() { - return React.DOM.div({role:'main', className:'ui-content'}, - this.props.children - ); - } -}); -JQueryMobileContent = React.createFactory(JQueryMobileContent); - -/** jQuery Mobile footer component. */ -var JQueryMobileFooter = React.createClass({ - displayName: 'JQueryMobileFooter', - - render: function() { - return React.DOM.div({'data-role':'footer'}, - React.DOM.h4(null, 'Page footer') - ); - } -}); -JQueryMobileFooter = React.createFactory(JQueryMobileFooter); - -/** jQuery Mobile header component. */ -var JQueryMobileHeader = React.createClass({ - displayName: 'JQueryMobileHeader', - - render: function() { - return React.DOM.div({'data-role':'header', 'data-theme':this.props.headerTheme}, - React.DOM.h1(null, this.props.title) - ); - } -}); -JQueryMobileHeader = React.createFactory(JQueryMobileHeader); - -/** jQuery Mobile page component. */ -var JQueryMobilePage = React.createClass({ - displayName: 'JQueryMobilePage', - - getDefaultProps: function() { - return {'data-role':'page', 'data-theme':'a', headerTheme:'a'}; - }, - - render: function() { - var props = {}; - for (var key in this.props) { - props[key] = this.props[key]; - } - return React.DOM.div(props, - JQueryMobileHeader({title:'Page ' + this.props.id, headerTheme:this.props.headerTheme}), - JQueryMobileContent(null, this.props.children), - JQueryMobileFooter(null) - ); - } -}); -JQueryMobilePage = React.createFactory(JQueryMobilePage); - -/** Application page one component. */ -var PageOneContent = React.createClass({ - displayName: 'PageOneContent', - - render: function() { - return React.DOM.div(null, - React.DOM.h2(null, 'One'), - React.DOM.p(null, - 'I have an ', - React.DOM.code(null, 'id'), - ' of "one" on my page container. I\'m first in the source order so I\'m shown when the page loads.' - ), - React.DOM.p(null, 'This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a single page template that has just one page within it.'), - React.DOM.p(null, 'Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.'), - React.DOM.p(null, - 'You link to internal pages by referring to the ', - React.DOM.code(null, 'id'), - ' of the page you want to show. For example, to ', - React.DOM.a({href:'#two'}, 'link'), - ' to the page with an ', - React.DOM.code(null, 'id'), - ' of "two", my link would have a ', - React.DOM.code(null, 'href="#two"'), - ' in the code.' - ), - React.DOM.h3(null, 'Show internal pages:'), - JQueryMobileButton({href:'#two'}, 'Show page "two"'), - JQueryMobileButton({href:'#popup', 'data-rel':'dialog', 'data-transition':'pop'}, 'Show page "popup" (as a dialog)') - ); - } -}); -PageOneContent = React.createFactory(PageOneContent); - -/** Application page two component. */ -var PageTwoContent = React.createClass({ - displayName: 'PageTwoContent', - - render: function() { - return React.DOM.div(null, - React.DOM.h2(null, 'Two'), - React.DOM.p(null, 'I have an id of "two" on my page container. I\'m the second page container in this multi-page template.'), - React.DOM.p(null, 'Notice that the theme is different for this page because we\'ve added a few ', - React.DOM.code(null, 'data-theme'), - ' swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we\'re keeping these simple.'), - JQueryMobileButton({href:'#one', 'data-direction':'reverse', className:'ui-btn ui-shadow ui-corner-all ui-btn-b'}, 'Back to page "one"') - ); - } -}); -PageTwoContent = React.createFactory(PageTwoContent); - -/** Application popup page component. */ -var PagePopUpContent = React.createClass({ - displayName: 'PagePopUpContent', - - render: function() { - return React.DOM.div(null, - React.DOM.h2(null, 'Popup'), - React.DOM.p(null, 'I have an id of "popup" on my page container and only look like a dialog because the link to me had a ', - React.DOM.code(null, 'data-rel="dialog"'), - ' attribute which gives me this inset look and a ', - React.DOM.code(null, 'data-transition="pop"'), - ' attribute to change the transition to pop. Without this, I\'d be styled as a normal page.'), - JQueryMobileButton({href:'#one', 'data-rel':'back', className:'ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left'}, 'Back to page "one"') - ); - } -}); -PagePopUpContent = React.createFactory(PagePopUpContent); - -// Render application. -ReactDOM.render(App(null), document.getElementById('content')); diff --git a/examples/quadratic/example.js b/examples/quadratic/example.js deleted file mode 100644 index c86ba29aab..0000000000 --- a/examples/quadratic/example.js +++ /dev/null @@ -1,59 +0,0 @@ -var QuadraticCalculator = React.createClass({ - getInitialState: function() { - return { - a: 1, - b: 3, - c: -4 - }; - }, - - /** - * This function will be re-bound in render multiple times. Each .bind() will - * create a new function that calls this with the appropriate key as well as - * the event. The key is the key in the state object that the value should be - * mapped from. - */ - handleInputChange: function(key, event) { - var partialState = {}; - partialState[key] = parseFloat(event.target.value); - this.setState(partialState); - }, - - render: function() { - var a = this.state.a; - var b = this.state.b; - var c = this.state.c; - var root = Math.sqrt(Math.pow(b, 2) - 4 * a * c); - var denominator = 2 * a; - var x1 = (-b + root) / denominator; - var x2 = (-b - root) / denominator; - return ( -
- - ax2 + bx + c = 0 - -

Solve for x:

-

- -
- -
- -
- x: {x1}, {x2} -

-
- ); - } -}); - -ReactDOM.render( - , - document.getElementById('container') -); diff --git a/examples/shared/css/base.css b/examples/shared/css/base.css deleted file mode 100644 index bf382be389..0000000000 --- a/examples/shared/css/base.css +++ /dev/null @@ -1,62 +0,0 @@ -body { - background: #fff; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 15px; - line-height: 1.7; - margin: 0; - padding: 30px; -} - -a { - color: #4183c4; - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -code { - background-color: #f8f8f8; - border: 1px solid #ddd; - border-radius: 3px; - font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; - font-size: 12px; - margin: 0 2px; - padding: 0px 5px; -} - -h1, h2, h3, h4 { - font-weight: bold; - margin: 0 0 15px; - padding: 0; -} - -h1 { - border-bottom: 1px solid #ddd; - font-size: 2.5em; - font-weight: bold; - margin: 0 0 15px; - padding: 0; -} - -h2 { - border-bottom: 1px solid #eee; - font-size: 2em; -} - -h3 { - font-size: 1.5em; -} - -h4 { - font-size: 1.2em; -} - -p, ul { - margin: 15px 0; -} - -ul { - padding-left: 30px; -} diff --git a/examples/transitions/transition.css b/examples/transitions/transition.css deleted file mode 100644 index ee851d1136..0000000000 --- a/examples/transitions/transition.css +++ /dev/null @@ -1,44 +0,0 @@ -.example-enter, -.example-leave { - -webkit-transition: all .25s; - transition: all .25s; -} - -.example-enter, -.example-leave.example-leave-active { - opacity: 0.01; -} - -.example-leave.example-leave-active { - margin-left: -128px; -} - -.example-enter { - margin-left: 128px; -} - -.example-enter.example-enter-active, -.example-leave { - margin-left: 0; - opacity: 1; -} - -.animateExample { - display: block; - height: 128px; - position: relative; - width: 384px; -} - -.animateItem { - color: white; - font-size: 36px; - font-weight: bold; - height: 128px; - line-height: 128px; - position: absolute; - text-align: center; - -webkit-transition: all .25s; /* TODO: make this a move animation */ - transition: all .25s; /* TODO: make this a move animation */ - width: 128px; -} diff --git a/fixtures/fiber-debugger/.env b/fixtures/fiber-debugger/.env new file mode 100644 index 0000000000..9be7932319 --- /dev/null +++ b/fixtures/fiber-debugger/.env @@ -0,0 +1 @@ +NODE_PATH=../../build/packages \ No newline at end of file diff --git a/fixtures/fiber-debugger/.gitignore b/fixtures/fiber-debugger/.gitignore new file mode 100644 index 0000000000..56b6cc8a31 --- /dev/null +++ b/fixtures/fiber-debugger/.gitignore @@ -0,0 +1,14 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules + +# testing +coverage + +# production +build + +# misc +.DS_Store +npm-debug.log diff --git a/fixtures/fiber-debugger/README.md b/fixtures/fiber-debugger/README.md new file mode 100644 index 0000000000..f52646d9c6 --- /dev/null +++ b/fixtures/fiber-debugger/README.md @@ -0,0 +1,25 @@ +# Fiber Debugger + +This is a debugger handy for visualizing how [Fiber](https://github.com/facebook/react/issues/6170) works internally. + +**It is only meant to be used by React contributors, and not by React users.** + +It is likely that it might get broken at some point. If it's broken, ping [Dan](https://twitter.com/dan_abramov). + +### Running + +First, `npm run build` in React root repo folder. + +Then `npm install` and `npm start` in this folder. + +Open `http://localhost:3000` in Chrome. + +### Features + +* Edit code that uses `ReactNoop` renderer +* Visualize how relationships between fibers change over time +* Current tree is displayed in green + +![fiber debugger](https://d17oy1vhnax1f7.cloudfront.net/items/3R2W1H2M3a0h3p1l133r/Screen%20Recording%202016-10-21%20at%2020.41.gif?v=e4323e51) + + diff --git a/fixtures/fiber-debugger/package.json b/fixtures/fiber-debugger/package.json new file mode 100644 index 0000000000..24c73be500 --- /dev/null +++ b/fixtures/fiber-debugger/package.json @@ -0,0 +1,18 @@ +{ + "name": "react-fiber-debugger", + "version": "0.0.1", + "private": true, + "devDependencies": { + "react-scripts": "0.9.0" + }, + "dependencies": { + "dagre": "^0.7.4", + "pretty-format": "^4.2.1", + "react-draggable": "^2.2.2", + "react-motion": "^0.4.5" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build" + } +} diff --git a/fixtures/fiber-debugger/public/favicon.ico b/fixtures/fiber-debugger/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..5c125de5d897c1ff5692a656485b3216123dcd89 GIT binary patch literal 24838 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 + + + + + + + React App + + +
+ + diff --git a/fixtures/fiber-debugger/src/App.js b/fixtures/fiber-debugger/src/App.js new file mode 100644 index 0000000000..56c6a56798 --- /dev/null +++ b/fixtures/fiber-debugger/src/App.js @@ -0,0 +1,196 @@ +import React, { Component } from 'react'; +import Draggable from 'react-draggable'; +import ReactNoop from 'react-noop-renderer'; +import ReactFiberInstrumentation from 'react-noop-renderer/lib/ReactFiberInstrumentation'; +import Editor from './Editor'; +import Fibers from './Fibers'; +import describeFibers from './describeFibers'; + +function getFiberState(root, workInProgress) { + if (!root) { + return null; + } + return describeFibers(root.current, workInProgress); +} + +const defaultCode = ` +log('Render
Hello
'); +ReactNoop.render(
Hello
); +ReactNoop.flush(); + +log('Render

Goodbye

'); +ReactNoop.render(

Goodbye

); +ReactNoop.flush(); +`; + +class App extends Component { + constructor(props) { + super(props); + this.state = { + code: localStorage.getItem('fiber-debugger-code') || defaultCode, + isEditing: false, + history: [], + currentStep: 0, + show: { + alt: false, + child: true, + sibling: true, + return: false, + fx: false, + progressedChild: false, + progressedDel: false + } + }; + } + + componentDidMount() { + this.runCode(this.state.code); + } + + runCode(code) { + let currentStage; + let currentRoot; + + ReactFiberInstrumentation.debugTool = null; + ReactNoop.render(null); + ReactNoop.flush(); + ReactFiberInstrumentation.debugTool = { + onMountContainer: (root) => { + currentRoot = root; + }, + onUpdateContainer: (root) => { + currentRoot = root; + }, + onBeginWork: (fiber) => { + const fibers = getFiberState(currentRoot, fiber); + const stage = currentStage; + this.setState(({ history }) => ({ + history: [ + ...history, { + action: 'BEGIN', + fibers, + stage + } + ] + })); + }, + onCompleteWork: (fiber) => { + const fibers = getFiberState(currentRoot, fiber); + const stage = currentStage; + this.setState(({ history }) => ({ + history: [ + ...history, { + action: 'COMPLETE', + fibers, + stage + } + ] + })); + }, + onCommitWork: (fiber) => { + const fibers = getFiberState(currentRoot, fiber); + const stage = currentStage; + this.setState(({ history }) => ({ + history: [ + ...history, { + action: 'COMMIT', + fibers, + stage + } + ] + })); + }, + }; + window.React = React; + window.ReactNoop = ReactNoop; + window.expect = () => ({ + toBe() {}, + toContain() {}, + toEqual() {}, + }); + window.log = s => currentStage = s; + // eslint-disable-next-line + eval(window.Babel.transform(code, { + presets: ['react', 'es2015'] + }).code); + } + + handleEdit = (e) => { + e.preventDefault(); + this.setState({ + isEditing: true + }); + } + + handleCloseEdit = (nextCode) => { + localStorage.setItem('fiber-debugger-code', nextCode); + this.setState({ + isEditing: false, + history: [], + currentStep: 0, + code: nextCode + }); + this.runCode(nextCode); + } + + render() { + const { history, currentStep, isEditing, code } = this.state; + if (isEditing) { + return ; + } + + const { fibers, action, stage } = history[currentStep] || {}; + let friendlyAction; + if (fibers) { + let wipFiber = fibers.descriptions[fibers.workInProgressID]; + let friendlyFiber = wipFiber.type || wipFiber.tag + ' #' + wipFiber.id; + friendlyAction = `After ${action} on ${friendlyFiber}`; + } + + return ( +
+ {fibers && + + + + } +
+ this.setState({ currentStep: Number(e.target.value) })} + /> +

Step {currentStep}: {friendlyAction} (Edit)

+ {stage &&

Stage: {stage}

} + {Object.keys(this.state.show).map(key => + + )} +
+
+ ); + } +} + +export default App; diff --git a/fixtures/fiber-debugger/src/Editor.js b/fixtures/fiber-debugger/src/Editor.js new file mode 100644 index 0000000000..644d04f6d4 --- /dev/null +++ b/fixtures/fiber-debugger/src/Editor.js @@ -0,0 +1,35 @@ +import React, { Component } from 'react'; + +class Editor extends Component { + constructor(props) { + super(props); + this.state = { + code: props.code + }; + } + + render() { + return ( +
+