Merge pull request #1205 from DSchau/gatsby-source-filesystem/home-example

feat: tweak plugin to use onCreateNode API, and get hot reloading working

gatsby-config.js

@@ -33,14 +33,14 @@ module.exports = {
     {
       resolve: 'gatsby-source-filesystem',
       options: {
-        path: `${__dirname}/src/pages`,
         name: 'pages',
+        path: `${__dirname}/src/pages`,
       },
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
-        name: 'packages',
+        name: 'content',
         path: `${__dirname}/content/`,
       },
     },

plugins/gatsby-transformer-home-example-code/gatsby-node.js

@@ -1,28 +1,33 @@
-const {readdirSync, readFileSync} = require('fs');
+const crypto = require(`crypto`);
-const {join, resolve} = require('path');
+
+const createContentDigest = obj =>
+  crypto
+    .createHash(`md5`)
+    .update(obj)
+    .digest(`hex`);
 
 // Store code snippets in GraphQL for the home page examples.
 // Snippets will be matched with markdown templates of the same name.
-exports.sourceNodes = ({graphql, actions}) => {
+exports.onCreateNode = async ({actions, node, loadNodeContent}) => {
   const {createNode} = actions;
+  const {absolutePath, ext, name, relativeDirectory, sourceInstanceName} = node;
 
-  const path = resolve(__dirname, '../../content/home/examples');
+  if (
-  const files = readdirSync(path);
+    sourceInstanceName === 'content' &&
-
+    relativeDirectory === 'home/examples' &&
-  files.forEach(file => {
+    ext === '.js'
-    if (file.match(/\.js$/)) {
+  ) {
-      const code = readFileSync(join(path, file), 'utf8');
+    const code = await loadNodeContent(node);
-      const id = file.replace(/\.js$/, '');
-
     createNode({
-        id,
+      id: name,
       children: [],
-        parent: 'EXAMPLES',
+      parent: node.id,
+      code,
+      mdAbsolutePath: absolutePath.replace(/\.js$/, '.md'),
       internal: {
         type: 'ExampleCode',
-          contentDigest: JSON.stringify(code),
+        contentDigest: createContentDigest(JSON.stringify(code)),
       },
     });
   }
-  });
 };

src/components/CodeEditor/CodeEditor.js

@@ -38,6 +38,12 @@ class CodeEditor extends Component {
     }
   }
 
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.code !== nextProps.code) {
+      this.setState(this._updateState(nextProps.code));
+    }
+  }
+
   render() {
     const {children} = this.props;
     const {
@@ -66,50 +72,9 @@ class CodeEditor extends Component {
 
     return (
       <LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
-        <div
-          css={{
-            [media.greaterThan('xlarge')]: {
-              display: 'flex',
-              flexDirection: 'row',
-            },
-
-            [media.lessThan('large')]: {
-              display: 'block',
-            },
-          }}>
-          {children && (
-            <div
-              css={{
-                flex: '0 0 33%',
-
-                [media.lessThan('xlarge')]: {
-                  marginBottom: 20,
-                },
-
-                '& h3': {
-                  color: colors.dark,
-                  maxWidth: '11em',
-                  paddingTop: 0,
-                },
-
-                '& p': {
-                  marginTop: 15,
-                  marginRight: 40,
-                  lineHeight: 1.7,
-
-                  [media.greaterThan('xlarge')]: {
-                    marginTop: 25,
-                  },
-                },
-              }}>
-              {children}
-            </div>
-          )}
-
         <div
           css={{
             [media.greaterThan('medium')]: {
-                flex: '0 0 67%',
               display: 'flex',
               alignItems: 'stretch',
               flexDirection: 'row',
@@ -273,7 +238,6 @@ class CodeEditor extends Component {
             </div>
           )}
         </div>
-        </div>
       </LiveProvider>
     );
   }

src/components/CodeExample/CodeExample.js

@@ -0,0 +1,73 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+import {colors, media} from 'theme';
+import CodeEditor from '../CodeEditor/CodeEditor';
+
+class CodeExample extends Component {
+  render() {
+    const {children, code, id, loaded} = this.props;
+    return (
+      <div
+        id={id}
+        css={{
+          marginTop: 40,
+
+          '&:first-child': {
+            marginTop: 0,
+          },
+
+          '& .react-live': {
+            width: '100%',
+          },
+
+          [media.greaterThan('xlarge')]: {
+            display: 'flex',
+            flexDirection: 'row',
+            marginTop: 80,
+          },
+
+          [media.lessThan('large')]: {
+            display: 'block',
+          },
+        }}>
+        {children && (
+          <div
+            css={{
+              flex: '0 0 33%',
+              [media.lessThan('xlarge')]: {
+                marginBottom: 20,
+              },
+
+              '& h3': {
+                color: colors.dark,
+                maxWidth: '11em',
+                paddingTop: 0,
+              },
+
+              '& p': {
+                marginTop: 15,
+                marginRight: 40,
+                lineHeight: 1.7,
+
+                [media.greaterThan('xlarge')]: {
+                  marginTop: 25,
+                },
+              },
+            }}>
+            {children}
+          </div>
+        )}
+        {loaded ? <CodeEditor code={code} /> : <h4>Loading code example...</h4>}
+      </div>
+    );
+  }
+}
+
+CodeExample.propTypes = {
+  children: PropTypes.node,
+  code: PropTypes.string.isRequired,
+  loaded: PropTypes.bool.isRequired,
+};
+
+export default CodeExample;

src/components/CodeExample/index.js

@@ -0,0 +1,3 @@
+import CodeExample from './CodeExample';
+
+export default CodeExample;

src/pages/index.js

@@ -7,72 +7,46 @@
 import ButtonLink from 'components/ButtonLink';
 import Container from 'components/Container';
 import Flex from 'components/Flex';
-import mountCodeExample from 'utils/mountCodeExample';
+import CodeExample from 'components/CodeExample';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {graphql} from 'gatsby';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import Layout from 'components/Layout';
 import {colors, media, sharedStyles} from 'theme';
-import createOgUrl from 'utils/createOgUrl';
 import loadScript from 'utils/loadScript';
+import createOgUrl from 'utils/createOgUrl';
 import {babelURL} from 'site-constants';
 import ReactDOM from 'react-dom';
 import logoWhiteSvg from 'icons/logo-white.svg';
 
 class Home extends Component {
-  constructor(props, context) {
+  state = {
-    super(props, context);
+    babelLoaded: false,
-
-    const {data} = props;
-
-    const code = data.code.edges.reduce((map, {node}) => {
-      map[node.id] = JSON.parse(node.internal.contentDigest);
-
-      return map;
-    }, {});
-
-    const examples = data.examples.edges.map(({node}) => ({
-      content: node.html,
-      id: node.fields.slug.replace(/^.+\//, '').replace('.html', ''),
-      title: node.frontmatter.title,
-    }));
-
-    const marketing = data.marketing.edges.map(({node}) => ({
-      title: node.frontmatter.title,
-      content: node.html,
-    }));
-
-    this.state = {
-      code,
-      examples,
-      marketing,
   };
-  }
 
   componentDidMount() {
-    const {code, examples} = this.state;
+    loadScript(babelURL).then(
-
+      () => {
-    examples.forEach(({id}) => {
+        this.setState({
-      renderExamplePlaceholder(id);
+          babelLoaded: true,
         });
-
+      },
-    function mountCodeExamples() {
+      error => {
-      examples.forEach(({id}) => {
-        mountCodeExample(id, code[id]);
-      });
-    }
-
-    loadScript(babelURL).then(mountCodeExamples, error => {
         console.error('Babel failed to load.');
-
+      },
-      mountCodeExamples();
+    );
-    });
   }
 
   render() {
-    const {examples, marketing} = this.state;
+    const {babelLoaded} = this.state;
-    const {location} = this.props;
+    const {data, location} = this.props;
+    const {codeExamples, examples, marketing} = data;
+
+    const code = codeExamples.edges.reduce((lookup, {node}) => {
+      lookup[node.mdAbsolutePath] = node;
+      return lookup;
+    }, {});
 
     return (
       <Layout location={location}>
@@ -217,7 +191,7 @@ class Home extends Component {
                       whiteSpace: 'nowrap',
                     },
                   }}>
-                  {marketing.map((column, index) => (
+                  {marketing.edges.map(({node: column}, index) => (
                     <div
                       key={index}
                       css={{
@@ -266,9 +240,9 @@ class Home extends Component {
                             },
                           },
                         ]}>
-                        {column.title}
+                        {column.frontmatter.title}
                       </h3>
-                      <div dangerouslySetInnerHTML={{__html: column.content}} />
+                      <div dangerouslySetInnerHTML={{__html: column.html}} />
                     </div>
                   ))}
                 </div>
@@ -283,27 +257,19 @@ class Home extends Component {
               />
               <section css={sectionStyles}>
                 <div id="examples">
-                  {examples.map((example, index) => (
+                  {examples.edges.map(({node}, index) => {
-                    <div
+                    const snippet = code[node.fileAbsolutePath];
+                    return (
+                      <CodeExample
                         key={index}
-                      css={{
+                        id={snippet.id}
-                        marginTop: 40,
+                        code={snippet.code}
-
+                        loaded={babelLoaded}>
-                        '&:first-child': {
+                        <h3 css={headingStyles}>{node.frontmatter.title}</h3>
-                          marginTop: 0,
+                        <div dangerouslySetInnerHTML={{__html: node.html}} />
-                        },
+                      </CodeExample>
-
+                    );
-                        [media.greaterThan('xlarge')]: {
+                  })}
-                          marginTop: 80,
-                        },
-                      }}>
-                      <h3 css={headingStyles}>{example.title}</h3>
-                      <div
-                        dangerouslySetInnerHTML={{__html: example.content}}
-                      />
-                      <div id={example.id} />
-                    </div>
-                  ))}
                 </div>
               </section>
             </div>
@@ -339,7 +305,6 @@ class Home extends Component {
 
 Home.propTypes = {
   data: PropTypes.shape({
-    code: PropTypes.object.isRequired,
     examples: PropTypes.object.isRequired,
     marketing: PropTypes.object.isRequired,
   }).isRequired,
@@ -382,22 +347,23 @@ const CtaItem = ({children, primary = false}) => (
 
 export const pageQuery = graphql`
   query IndexMarkdown {
-    code: allExampleCode {
+    codeExamples: allExampleCode {
       edges {
         node {
           id
-          internal {
+          code
-            contentDigest
+          mdAbsolutePath
-          }
         }
       }
     }
+
     examples: allMarkdownRemark(
       filter: {fileAbsolutePath: {regex: "//home/examples//"}}
       sort: {fields: [frontmatter___order], order: ASC}
     ) {
       edges {
         node {
+          fileAbsolutePath
           fields {
             slug
           }

src/utils/mountCodeExample.js

@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * @emails react-core
- */
-
-import CodeEditor from '../components/CodeEditor';
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-// TODO This is a huge hack.
-// Remark transform this template to split code examples and their targets apart.
-const mountCodeExample = (containerId, code) => {
-  const container = document.getElementById(containerId);
-  const parent = container.parentElement;
-
-  const children = Array.prototype.filter.call(
-    parent.children,
-    child => child !== container,
-  );
-  children.forEach(child => parent.removeChild(child));
-
-  const description = children
-    .map(child => child.outerHTML)
-    .join('')
-    .replace(/`([^`]+)`/g, '<code>$1</code>');
-
-  ReactDOM.render(
-    <CodeEditor code={code}>
-      {<div dangerouslySetInnerHTML={{__html: description}} />}
-    </CodeEditor>,
-    container,
-  );
-};
-
-export default mountCodeExample;