lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

load babel only when needed

main
renanpvaz 7 years ago
parent
9c68ee4afd
commit
1d48f7574e
5 changed files with 43 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/html.js
  2. 18
      src/layouts/index.js
  3. 4
      src/site-constants.js
  4. 12
      src/templates/home.js
  5. 21
      src/utils/loadScript.js

8
src/html.js
View File

@ -20,11 +20,6 @@ if (process.env.NODE_ENV === `production`) {
} }
} }
const JS_NPM_URLS = [
'//unpkg.com/docsearch.js@2.4.1/dist/cdn/docsearch.min.js',
'//unpkg.com/babel-standalone@6.26.0/babel.min.js',
];
export default class HTML extends Component { export default class HTML extends Component {
render() { render() {
let css; let css;
@ -37,8 +32,6 @@ export default class HTML extends Component {
); );
} }
const js = JS_NPM_URLS.map(url => <script key={url} src={url} />);
return ( return (
<html lang="en"> <html lang="en">
<head> <head>
@ -50,7 +43,6 @@ export default class HTML extends Component {
/> />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
{this.props.headComponents} {this.props.headComponents}
{js}
{css} {css}
</head> </head>
<body> <body>

18
src/layouts/index.js
View File

@ -19,6 +19,8 @@ import Flex from 'components/Flex';
import Footer from 'components/LayoutFooter'; import Footer from 'components/LayoutFooter';
import Header from 'components/LayoutHeader'; import Header from 'components/LayoutHeader';
import {media} from 'theme'; import {media} from 'theme';
import loadScript from 'utils/loadScript';
import {docsearchURL} from 'site-constants';
// Import global styles // Import global styles
import '../prism-styles'; import '../prism-styles';
@ -28,13 +30,15 @@ import 'css/algolia.css';
class Template extends Component { class Template extends Component {
componentDidMount() { componentDidMount() {
// Initialize Algolia search. loadScript(docsearchURL).then(() => {
// TODO Is this expensive? Should it be deferred until a user is about to search? // Initialize Algolia search.
// eslint-disable-next-line no-undef // TODO Is this expensive? Should it be deferred until a user is about to search?
docsearch({ // eslint-disable-next-line no-undef
apiKey: '36221914cce388c46d0420343e0bb32e', docsearch({
indexName: 'react', apiKey: '36221914cce388c46d0420343e0bb32e',
inputSelector: '#algolia-doc-search', indexName: 'react',
inputSelector: '#algolia-doc-search',
});
}); });
} }

4
src/site-constants.js
View File

@ -14,5 +14,7 @@
// the SSR part in node.js we won't have a proper location. // the SSR part in node.js we won't have a proper location.
const urlRoot = 'https://reactjs.org'; const urlRoot = 'https://reactjs.org';
const version = '16.0.0'; const version = '16.0.0';
const babelURL = '//unpkg.com/babel-standalone@6.26.0/babel.min.js';
const docsearchURL = '//unpkg.com/docsearch.js@2.4.1/dist/cdn/docsearch.min.js';
export {urlRoot, version}; export {urlRoot, version, babelURL, docsearchURL};

12
src/templates/home.js
View File

@ -18,13 +18,17 @@ import React, {Component} from 'react';
import TitleAndMetaTags from 'components/TitleAndMetaTags'; import TitleAndMetaTags from 'components/TitleAndMetaTags';
import {colors, media, sharedStyles} from 'theme'; import {colors, media, sharedStyles} from 'theme';
import createOgUrl from 'utils/createOgUrl'; import createOgUrl from 'utils/createOgUrl';
import loadScript from 'utils/loadScript';
import {babelURL} from 'site-constants';
class Home extends Component { class Home extends Component {
componentDidMount() { componentDidMount() {
mountCodeExample('helloExample', HELLO_COMPONENT); loadScript(babelURL).then(() => {
mountCodeExample('timerExample', TIMER_COMPONENT); mountCodeExample('helloExample', HELLO_COMPONENT);
mountCodeExample('todoExample', TODO_COMPONENT); mountCodeExample('timerExample', TIMER_COMPONENT);
mountCodeExample('markdownExample', MARKDOWN_COMPONENT); mountCodeExample('todoExample', TODO_COMPONENT);
mountCodeExample('markdownExample', MARKDOWN_COMPONENT);
})
} }
render() { render() {

21
src/utils/loadScript.js
View File

@ -0,0 +1,21 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @emails react-core
*/
'use strict';
export default url => new Promise((resolve, reject) =>
document.head.appendChild(
Object.assign(document.createElement('script'), {
async: true,
src: url,
onload: resolve,
onerror: reject
})
)
);
Write Preview
Loading…
Cancel
Save