Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add a checkbox to fixtures UI to choose React production build #13786

Merged
merged 3 commits into from
Nov 14, 2018
Merged

Add a checkbox to fixtures UI to choose React production build #13786

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0f72be8
Add a checkbox to fixtures UI to choose React production build
poeschko Sep 11, 2018
ccc5849
Assign header__label class name to label directly, instead of using a…
poeschko Nov 14, 2018
8d0db37
center the production checkbox vertically
poeschko Nov 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions fixtures/dom/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,11 @@ coverage
# production
build
public/react.development.js
public/react.production.min.js
public/react-dom.development.js
public/react-dom.production.min.js
public/react-dom-server.browser.development.js
public/react-dom-server.browser.production.min.js

# misc
.DS_Store
Expand Down
2 changes: 1 addition & 1 deletion fixtures/dom/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
},
"scripts": {
"start": "react-scripts start",
"prestart": "cp ../../build/dist/react.development.js ../../build/dist/react-dom.development.js ../../build/dist/react-dom-server.browser.development.js public/",
"prestart": "cp ../../build/dist/react.development.js ../../build/dist/react-dom.development.js ../../build/dist/react.production.min.js ../../build/dist/react-dom.production.min.js ../../build/dist/react-dom-server.browser.development.js ../../build/dist/react-dom-server.browser.production.min.js public/",
"build": "react-scripts build && cp build/index.html build/200.html",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
Expand Down
20 changes: 19 additions & 1 deletion fixtures/dom/src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ class Header extends React.Component {
super(props, context);
const query = parse(window.location.search);
const version = query.version || 'local';
const production = query.production || false;
const versions = [version];
this.state = {version, versions};
this.state = {version, versions, production};
}
componentWillMount() {
getVersionTags().then(tags => {
Expand All @@ -25,6 +26,14 @@ class Header extends React.Component {
}
window.location.search = stringify(query);
}
handleProductionChange(event) {
const query = parse(window.location.search);
query.production = event.target.checked;
if (!query.production) {
delete query.production;
}
window.location.search = stringify(query);
}
handleFixtureChange(event) {
window.location.pathname = event.target.value;
}
Expand All @@ -43,6 +52,15 @@ class Header extends React.Component {
</span>

<div className="header-controls">
<input
id="react_production"
type="checkbox"
checked={this.state.production}
onChange={this.handleProductionChange}
/>
Copy link
Contributor

Choose a reason for hiding this comment

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

Could you add a style to center this vertically with the label? maybe:

.header__checkbox {
  vertical-align: middle;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, done.

<label htmlFor="react_production">
<span className="header__label">Production</span>
Copy link
Contributor

Choose a reason for hiding this comment

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

Could you eliminate this extra span by adding the class name to the label?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, good idea.

</label>
<label htmlFor="example">
<span className="sr-only">Select an example</span>
<select
Expand Down
36 changes: 26 additions & 10 deletions fixtures/dom/src/react-loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,15 @@ function loadScript(src) {
}

export function reactPaths() {
let reactPath = 'react.development.js';
let reactDOMPath = 'react-dom.development.js';
let reactDOMServerPath = 'react-dom-server.browser.development.js';

let query = parseQuery(window.location.search);
let version = query.version || 'local';
let isProduction = query.production === 'true';

let environment = isProduction ? 'production.min' : 'development';

let reactPath = 'react.' + environment + '.js';
let reactDOMPath = 'react-dom.' + environment + '.js';
let reactDOMServerPath = 'react-dom-server.browser.' + environment + '.js';

if (version !== 'local') {
const {major, minor, prerelease} = semver(version);
Expand All @@ -51,21 +54,34 @@ export function reactPaths() {
// Load the old module location for anything less than 16 RC
if (major >= 16 && !(minor === 0 && preReleaseStage === 'alpha')) {
reactPath =
'https://unpkg.com/react@' + version + '/umd/react.development.js';
'https://unpkg.com/react@' +
version +
'/umd/react.' +
environment +
'.js';
reactDOMPath =
'https://unpkg.com/react-dom@' +
version +
'/umd/react-dom.development.js';
'/umd/react-dom.' +
environment +
'.js';
reactDOMServerPath =
'https://unpkg.com/react-dom@' +
version +
'/umd/react-dom-server.browser.development';
'/umd/react-dom-server.browser.' +
environment +
'.js';
} else {
reactPath = 'https://unpkg.com/react@' + version + '/dist/react.js';
let suffix = isProduction ? '.min.js' : '.js';

reactPath = 'https://unpkg.com/react@' + version + '/dist/react' + suffix;
reactDOMPath =
'https://unpkg.com/react-dom@' + version + '/dist/react-dom.js';
'https://unpkg.com/react-dom@' + version + '/dist/react-dom' + suffix;
reactDOMServerPath =
'https://unpkg.com/react-dom@' + version + '/dist/react-dom-server.js';
'https://unpkg.com/react-dom@' +
version +
'/dist/react-dom-server' +
suffix;
}
}

Expand Down
5 changes: 5 additions & 0 deletions fixtures/dom/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,11 @@ textarea {
width: 100%;
}

.header__label {
font-size: 12px;
color: #ccc;
}

.sr-only {
clip: rect(0, 0, 0, 0);
height: 0;
Expand Down