diff --git a/src/html.js b/src/html.js index 1622122e..4a113917 100644 --- a/src/html.js +++ b/src/html.js @@ -19,7 +19,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 { diff --git a/src/site-constants.js b/src/site-constants.js index f359559d..7e99e72a 100644 --- a/src/site-constants.js +++ b/src/site-constants.js @@ -11,5 +11,6 @@ // 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'; -export {urlRoot, version}; +export {urlRoot, version, babelURL}; diff --git a/src/templates/home.js b/src/templates/home.js index a2607617..e3a7bf2a 100644 --- a/src/templates/home.js +++ b/src/templates/home.js @@ -15,13 +15,23 @@ 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'; +import ReactDOM from 'react-dom'; class Home extends Component { componentDidMount() { - mountCodeExample('helloExample', HELLO_COMPONENT); - mountCodeExample('timerExample', TIMER_COMPONENT); - mountCodeExample('todoExample', TODO_COMPONENT); - mountCodeExample('markdownExample', MARKDOWN_COMPONENT); + renderExamplePlaceholder('helloExample'); + renderExamplePlaceholder('timerExample'); + renderExamplePlaceholder('todoExample'); + renderExamplePlaceholder('markdownExample'); + + loadScript(babelURL).then(() => { + mountCodeExample('helloExample', HELLO_COMPONENT); + mountCodeExample('timerExample', TIMER_COMPONENT); + mountCodeExample('todoExample', TODO_COMPONENT); + mountCodeExample('markdownExample', MARKDOWN_COMPONENT); + }); } render() { @@ -163,6 +173,16 @@ Home.propTypes = { location: PropTypes.object.isRequired, }; +// TODO Improve this temporarily placeholder as part of +// converting the home page from markdown template to a Gatsby +// page (see issue #2) +function renderExamplePlaceholder(containerId) { + ReactDOM.render( +

Loading code example...

, + document.getElementById(containerId), + ); +} + const CtaItem = ({children, primary = false}) => (
+ new Promise((resolve, reject) => + document.head.appendChild( + Object.assign(document.createElement('script'), { + async: true, + src: url, + onload: resolve, + onerror: reject, + }), + ), + );