diff --git a/src/html.js b/src/html.js
index 5e186dd6..26621d72 100644
--- a/src/html.js
+++ b/src/html.js
@@ -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 {
render() {
let css;
@@ -37,8 +32,6 @@ export default class HTML extends Component {
);
}
- const js = JS_NPM_URLS.map(url => );
-
return (
@@ -50,7 +43,6 @@ export default class HTML extends Component {
/>
{this.props.headComponents}
- {js}
{css}
diff --git a/src/layouts/index.js b/src/layouts/index.js
index ca2e8c9f..4f042ce1 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -19,6 +19,8 @@ import Flex from 'components/Flex';
import Footer from 'components/LayoutFooter';
import Header from 'components/LayoutHeader';
import {media} from 'theme';
+import loadScript from 'utils/loadScript';
+import {docsearchURL} from 'site-constants';
// Import global styles
import '../prism-styles';
@@ -28,13 +30,15 @@ import 'css/algolia.css';
class Template extends Component {
componentDidMount() {
- // Initialize Algolia search.
- // TODO Is this expensive? Should it be deferred until a user is about to search?
- // eslint-disable-next-line no-undef
- docsearch({
- apiKey: '36221914cce388c46d0420343e0bb32e',
- indexName: 'react',
- inputSelector: '#algolia-doc-search',
+ loadScript(docsearchURL).then(() => {
+ // Initialize Algolia search.
+ // TODO Is this expensive? Should it be deferred until a user is about to search?
+ // eslint-disable-next-line no-undef
+ docsearch({
+ apiKey: '36221914cce388c46d0420343e0bb32e',
+ indexName: 'react',
+ inputSelector: '#algolia-doc-search',
+ });
});
}
diff --git a/src/site-constants.js b/src/site-constants.js
index 8d3b25df..826b2487 100644
--- a/src/site-constants.js
+++ b/src/site-constants.js
@@ -14,5 +14,7 @@
// the SSR part in node.js we won't have a proper location.
const urlRoot = 'https://reactjs.org';
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};
diff --git a/src/templates/home.js b/src/templates/home.js
index d2410ec2..6c816740 100644
--- a/src/templates/home.js
+++ b/src/templates/home.js
@@ -18,13 +18,17 @@ import React, {Component} from 'react';
import TitleAndMetaTags from 'components/TitleAndMetaTags';
import {colors, media, sharedStyles} from 'theme';
import createOgUrl from 'utils/createOgUrl';
+import loadScript from 'utils/loadScript';
+import {babelURL} from 'site-constants';
class Home extends Component {
componentDidMount() {
- mountCodeExample('helloExample', HELLO_COMPONENT);
- mountCodeExample('timerExample', TIMER_COMPONENT);
- mountCodeExample('todoExample', TODO_COMPONENT);
- mountCodeExample('markdownExample', MARKDOWN_COMPONENT);
+ loadScript(babelURL).then(() => {
+ mountCodeExample('helloExample', HELLO_COMPONENT);
+ mountCodeExample('timerExample', TIMER_COMPONENT);
+ mountCodeExample('todoExample', TODO_COMPONENT);
+ mountCodeExample('markdownExample', MARKDOWN_COMPONENT);
+ })
}
render() {
diff --git a/src/utils/loadScript.js b/src/utils/loadScript.js
new file mode 100644
index 00000000..2e90e319
--- /dev/null
+++ b/src/utils/loadScript.js
@@ -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
+ })
+ )
+);