Skip to content
This repository has been archived by the owner on Sep 21, 2021. It is now read-only.

[WIP] Trying out react@next #525

Closed
wants to merge 1 commit into from
Closed

[WIP] Trying out react@next #525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/devtools-launchpad/.babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

["module-resolver", {
"alias": {
"react-dom": "react-dom/dist/react-dom",
"react-dom": "react-dom/umd/react-dom.development",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Curious: what is the necessity for these aliases?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like it's forcing UMD instead of default (CJS) target?

Copy link

@gaearon gaearon Jul 26, 2017 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right. I’m curious why. In the past people used to do this to speed up DEV builds (since React had too many modules). But now CJS is also a single bundle so maybe it‘s unnecessary.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, sorry. I wasn't really trying to answer your question so much as confirming that I understood what it was doing.

Your assertion seems legit.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jasonLaster is the right person to answer that question, my understanding is that this has to do with how we package react within the browser toolbox.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here was the warning we saw:
firefox-devtools/debugger#1640

And the fix:
firefox-devtools/debugger#1731

We've had several other issues creep in over time
#179
#23

Copy link

@gaearon gaearon Jul 27, 2017 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So the issue is due to a custom module system (per #23)? I'm not sure what “single module plugin” is.

I guess if it works around a bug for you, that’s cool, I just wanted to verify. Please not react.development bundle is not suitable for production.

"devtools/client/shared/vendor/react": "react",
"devtools/client/shared/vendor/react-dom": "react-dom"
}
Expand Down
2 changes: 1 addition & 1 deletion packages/devtools-launchpad/bin/dev-server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function buildwebpackConfig(envConfig) {

resolve: {
alias: {
"react-dom": "react-dom/dist/react-dom"
"react-dom": "react-dom/umd/react-dom.development"
}
}
}
Expand Down
13 changes: 8 additions & 5 deletions packages/devtools-launchpad/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
"chrome-remote-interface": "0.17.0",
"classnames": "^2.2.5",
"co": "=4.6.0",
"create-react-class": "^15.6.0",
"css-loader": "^0.26.1",
"devtools-config": "^0.0.15",
"devtools-connection": "^0.0.6",
Expand All @@ -78,15 +79,17 @@
"postcss": "^5.2.12",
"postcss-bidirection": "=2.3.0",
"postcss-loader": "^1.2.2",
"prop-types": "^15.5.10",
"properties-parser": "^0.3.1",
"ps-node": "^0.1.4",
"raw-loader": "^0.5.1",
"react": "=15.3.2",
"react-dom": "=15.3.2",
"react": "next",
"react-dom": "next",
"react-dom-factories": "^1.0.0",
"react-hot-loader": "^1.3.1",
"react-immutable-proptypes": "^2.1.0",
"react-inlinesvg": "^0.5.3",
"react-redux": "4.4.5",
"react-redux": "next",
"redux": "3.5.2",
"selenium-webdriver": "=3.3.0",
"style-loader": "^0.13.1",
Expand All @@ -100,8 +103,8 @@
"devDependencies": {
"@kadira/storybook": "^2.35.3",
"ipaddr": "^0.0.9",
"yarn": "^0.20.3",
"jest": "^19.0.2"
"jest": "^19.0.2",
"yarn": "^0.20.3"
},
"files": [
"bin",
Expand Down
22 changes: 12 additions & 10 deletions packages/devtools-launchpad/src/components/LandingPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@
const React = require("react");

require("./LandingPage.css");
const { DOM: dom } = React;
const dom = require("react-dom-factories");
const ImPropTypes = require("react-immutable-proptypes");
const configMap = require("../constants").sidePanelItems;
const Tabs = React.createFactory(require("./Tabs"));
const Sidebar = React.createFactory(require("./Sidebar"));
const Settings = React.createFactory(require("./Settings"));
const createReactClass = require("create-react-class");
const PropTypes = require("prop-types");

const githubUrl = "https://github.com/devtools-html/debugger.html/blob/master";

Expand All @@ -32,19 +34,19 @@ function firstTimeMessage(title, urlPart) {
);
}

const LandingPage = React.createClass({
const LandingPage = createReactClass({
displayName: "LandingPage",

propTypes: {
tabs: ImPropTypes.map.isRequired,
supportsFirefox: React.PropTypes.bool.isRequired,
supportsChrome: React.PropTypes.bool.isRequired,
title: React.PropTypes.string.isRequired,
filterString: React.PropTypes.string,
onFilterChange: React.PropTypes.func.isRequired,
onTabClick: React.PropTypes.func.isRequired,
config: React.PropTypes.object.isRequired,
setValue: React.PropTypes.func.isRequired
supportsFirefox: PropTypes.bool.isRequired,
supportsChrome: PropTypes.bool.isRequired,
title: PropTypes.string.isRequired,
filterString: PropTypes.string,
onFilterChange: PropTypes.func.isRequired,
onTabClick: PropTypes.func.isRequired,
config: PropTypes.object.isRequired,
setValue: PropTypes.func.isRequired
},

getInitialState() {
Expand Down
5 changes: 3 additions & 2 deletions packages/devtools-launchpad/src/components/LaunchpadApp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,16 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require("react");
const { PropTypes } = React;
const ImPropTypes = require("react-immutable-proptypes");
const { connect } = require("react-redux");
const { bindActionCreators } = require("redux");
const { getTabs, getFilterString, getConfig } = require("../selectors");
const { getValue } = require("devtools-config");
const LandingPage = React.createFactory(require("./LandingPage"));
const createReactClass = require("create-react-class");
const PropTypes = require("prop-types");

const LaunchpadApp = React.createClass({
const LaunchpadApp = createReactClass({
displayName: "LaunchpadApp",

propTypes: {
Expand Down
10 changes: 6 additions & 4 deletions packages/devtools-launchpad/src/components/Settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,17 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require("react");
const { DOM: dom } = React;
const dom = require("react-dom-factories");
const { showMenu, buildMenu } = require("devtools-contextmenu");
const createReactClass = require("create-react-class");
const PropTypes = require("prop-types");

const Settings = React.createClass({
const Settings = createReactClass({
displayName: "Settings",

propTypes: {
config: React.PropTypes.object.isRequired,
setValue: React.PropTypes.func.isRequired
config: PropTypes.object.isRequired,
setValue: PropTypes.func.isRequired
},

onConfigContextMenu(event, key) {
Expand Down
16 changes: 9 additions & 7 deletions packages/devtools-launchpad/src/components/Sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,20 @@
const React = require("react");

require("./Sidebar.css");
const { DOM: dom } = React;
const dom = require("react-dom-factories");
const classnames = require("classnames");
const createReactClass = require("create-react-class");
const PropTypes = require("prop-types");

const Sidebar = React.createClass({
const Sidebar = createReactClass({
displayName: "Sidebar",

propTypes: {
supportsFirefox: React.PropTypes.bool.isRequired,
supportsChrome: React.PropTypes.bool.isRequired,
title: React.PropTypes.string.isRequired,
selectedPane: React.PropTypes.string.isRequired,
onSideBarItemClick: React.PropTypes.func.isRequired
supportsFirefox: PropTypes.bool.isRequired,
supportsChrome: PropTypes.bool.isRequired,
title: PropTypes.string.isRequired,
selectedPane: PropTypes.string.isRequired,
onSideBarItemClick: PropTypes.func.isRequired
},

render() {
Expand Down
12 changes: 7 additions & 5 deletions packages/devtools-launchpad/src/components/Tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,23 @@
const React = require("react");

require("./Tabs.css");
const { DOM: dom } = React;
const dom = require("react-dom-factories");
const classnames = require("classnames");
const createReactClass = require("create-react-class");
const PropTypes = require("prop-types");

function getTabURL(tab, paramName) {
const tabID = tab.get("id");
return `/?${paramName}=${tabID}`;
}

const Tabs = React.createClass({
const Tabs = createReactClass({
displayName: "Tabs",

propTypes: {
targets: React.PropTypes.object.isRequired,
paramName: React.PropTypes.string.isRequired,
onTabClick: React.PropTypes.func.isRequired,
targets: PropTypes.object.isRequired,
paramName: PropTypes.string.isRequired,
onTabClick: PropTypes.func.isRequired,
},

onTabClick(tab, paramName) {
Expand Down
6 changes: 4 additions & 2 deletions packages/devtools-launchpad/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,19 @@

const React = require("react");
const ReactDOM = require("react-dom");
const dom = require("react-dom-factories");
const { combineReducers } = require("redux");
const configureStore = require("./utils/create-store");
const reducers = require("./reducers");
const createReactClass = require("create-react-class");

const { bootstrap } = require("./index");

const App = React.createClass({
const App = createReactClass({
displayName: "App",
propTypes: {},
render() {
return React.DOM.div({
return dom.div({
style: {
margin: "100px auto",
"text-align": "center"
Expand Down
3 changes: 2 additions & 1 deletion packages/devtools-launchpad/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require("react");
const dom = require("react-dom-factories");
const { storiesOf, action } = require("@kadira/storybook");
const LandingPage = require("../src/components/LandingPage");

Expand Down Expand Up @@ -41,7 +42,7 @@ const getTabs = (tabs, state) => {
};

const renderLandingPage = (props) => {
return React.DOM.div({}, React.createElement(LandingPage, Object.assign({
return dom.div({}, React.createElement(LandingPage, Object.assign({
onFilterChange: action("onFilterChange"),
onTabClick: action("onTabClick"),
title: "Storybook test",
Expand Down
2 changes: 1 addition & 1 deletion packages/devtools-launchpad/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ module.exports = (webpackConfig, envConfig) => {
webpackConfig.resolve = webpackConfig.resolve || {};
webpackConfig.resolve.alias = webpackConfig.resolve.alias || {};
if (!webpackConfig.resolve.alias.react) {
webpackConfig.resolve.alias.react = "react/lib/ReactUMDEntry";
webpackConfig.resolve.alias.react = "react/umd/react.development";
}
}

Expand Down
47 changes: 34 additions & 13 deletions packages/devtools-launchpad/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1622,6 +1622,14 @@ create-error-class@^3.0.1:
dependencies:
capture-stack-trace "^1.0.0"

create-react-class@^15.5.1, create-react-class@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
dependencies:
fbjs "^0.8.9"
loose-envify "^1.3.1"
object-assign "^4.1.1"

create-react-class@^15.5.2:
version "15.5.3"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.5.3.tgz#fb0f7cae79339e9a179e194ef466efa3923820fe"
Expand Down Expand Up @@ -2315,7 +2323,7 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"

fbjs@^0.8, fbjs@^0.8.4, fbjs@^0.8.9:
fbjs@^0.8, fbjs@^0.8.9:
version "0.8.12"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
dependencies:
Expand Down Expand Up @@ -3520,7 +3528,7 @@ locate-path@^2.0.0:
p-locate "^2.0.0"
path-exists "^3.0.0"

lodash-es@^4.2.1:
lodash-es@^4.2.0, lodash-es@^4.2.1:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"

Expand Down Expand Up @@ -4512,7 +4520,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"

prop-types@^15.5.7:
prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.7:
version "15.5.10"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
dependencies:
Expand Down Expand Up @@ -4624,9 +4632,18 @@ react-docgen@^2.12.1:
node-dir "^0.1.10"
recast "^0.11.5"

react-dom@=15.3.2:
version "15.3.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
react-dom-factories@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.0.tgz#f43c05e5051b304f33251618d5bc859b29e46b6d"

react-dom@next:
version "16.0.0-beta.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0-beta.1.tgz#be3e958578dae850884f7abd7ba559f9dfb39815"
dependencies:
fbjs "^0.8.9"
loose-envify "^1.1.0"
object-assign "^4.1.0"
prop-types "^15.5.6"

react-fuzzy@^0.3.3:
version "0.3.3"
Expand Down Expand Up @@ -4696,14 +4713,17 @@ react-modal@^1.2.0, react-modal@^1.2.1:
lodash.assign "^4.2.0"
prop-types "^15.5.7"

react-redux@4.4.5:
version "4.4.5"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-4.4.5.tgz#f509a2981be2252d10c629ef7c559347a4aec457"
react-redux@next:
version "5.0.4"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.4.tgz#1563babadcfb2672f57f9ceaa439fb16bf85d55b"
dependencies:
create-react-class "^15.5.1"
hoist-non-react-statics "^1.0.3"
invariant "^2.0.0"
lodash "^4.2.0"
lodash-es "^4.2.0"
loose-envify "^1.1.0"
prop-types "^15.0.0"

react-simple-di@^1.2.0:
version "1.2.0"
Expand All @@ -4718,13 +4738,14 @@ react-stubber@^1.0.0:
dependencies:
babel-runtime "^6.5.0"

react@=15.3.2:
version "15.3.2"
resolved "https://registry.yarnpkg.com/react/-/react-15.3.2.tgz#a7bccd2fee8af126b0317e222c28d1d54528d09e"
react@next:
version "16.0.0-beta.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.0.0-beta.1.tgz#c02171171e9638b0c506f5a26b90e918f76909ab"
dependencies:
fbjs "^0.8.4"
fbjs "^0.8.9"
loose-envify "^1.1.0"
object-assign "^4.1.0"
prop-types "^15.5.6"

read-all-stream@^3.0.0:
version "3.1.0"
Expand Down