Adds HMR support for development workflow (#159)

documentation/docs/references/creating-a-plugin/creating-endpoints.md

@@ -1,3 +1,8 @@
+---
+title: Creating endpoints
+path: /creating-endpoints
+---
+
 # Creating endpoints
 
 > Fusion.js provides an [RPC plugin](https://github.com/fusionjs/fusion-plugin-rpc-redux-react) that integrates with Redux and React. We recommend using that RPC plugin rather than writing HTTP endpoints manually.

documentation/docs/references/creating-a-plugin/dependencies.md

@@ -1,3 +1,8 @@
+---
+title: Dependencies
+path: /dependencies
+---
+
 # Dependencies
 
 The Fusion.js plugin architecture allows plugins to explicitly depend on other service plugins. This allows us to swap implementations of various subsystems, for example for testing, or to provide extended functionality.

documentation/docs/references/creating-a-plugin/index.md

@@ -1,3 +1,8 @@
+---
+title: Creating a Plugin
+path: /creating-a-plugin
+---
+
 # Plugins
 
 Fusion.js provides official plugins for a wide variety of tasks, and it's possible to write complex applications without ever writing a single custom plugin. With that said, it's possible you might find that there's no plugin available for a task you're trying to accomplish, or that you don't agree with the opinions of an existing plugin. This section explains the Fusion.js plugin architecture and how to implement various types of plugins.

documentation/docs/references/creating-a-plugin/tokens.md

@@ -1,3 +1,8 @@
+---
+title: Tokens
+path: /tokens
+---
+
 # Tokens
 
 Tokens are used by the Fusion.js [dependency injection](/docs/references/creating-a-plugin#dependency-injection) system to define the dependency tree of an application. Tokens are designed to bridge the gap between the type checking and runtime information. Your app may register your own Fusion.js plugin to a token to control behavior of your application or test.
@@ -54,4 +59,4 @@ app.register(FetchTokenPolyfill, unfetch);
 app.register(PluginA).alias(FetchToken, FetchTokenPolyfill);
 ```
 
----
+---

documentation/docs/references/creating-a-plugin/using-services.md

@@ -1,3 +1,8 @@
+---
+title: Using services
+path: /using-services
+---
+
 # Using services
 
 React hooks are the preferred method for using services in React. In fact, many cases where we used class components can now be accomplished easier with hooks. Keep in mind that most plugins currently do not provide a service we would be able to use on the client-side. This feature is future-facing for how we want to consume services.

documentation/docs/references/css-modules.md

@@ -1,3 +1,8 @@
+---
+title: CSS Modules
+path: /css-modules/
+---
+
 # CSS Modules
 
 ## Setup

documentation/docs/references/index.md

@@ -6,11 +6,11 @@ path: /references/
 # References
 
 - [State management](/docs/references/state-management)
-- [Styling components](/docs/references/styling)
+- [Styling](/docs/references/styling)
 - [Routing](/docs/references/routing)
-- [Data fetching](/docs/references/fetching-data)
+- [Fetching data](/docs/references/fetching-data)
 - [Internationalization](/docs/references/internationalization)
-- [Creating a plugin](/docs/references/creating-a-plugin)
+- [Plugins](/docs/references/creating-a-plugin)
 - [Testing](/docs/references/testing)
 - [Typing](/docs/references/typing)
 - [Security](/docs/references/security)
@@ -19,6 +19,8 @@ path: /references/
 - [Debugging](/docs/references/debugging)
 - [Static assets](/docs/references/static-assets)
 - [Configuration](/docs/references/configuration)
+- [Web workers](/docs/references/web-workers)
+- [WebSockets](/docs/references/websockets)
 - [Virtual modules](/docs/references/virtual-modules)
 - [SVG React components](/docs/references/svg-react-components)
 - [CSS Modules](/docs/references/css-modules)

documentation/docs/references/performance.md

@@ -1,8 +1,6 @@
 ---
 title: Performance
-date:  2019-02-01
 path: /performance/
-category: Documentation
 ---
 
 # Performance

documentation/docs/references/performance/measuring-browser-performance.md

@@ -2,6 +2,7 @@
 title: "Measuring Browser Performance"
 path: /measuring-browser-performance
 ---
+
 # Measuring Browser Performance
 
 ## Chrome DevTools timings versus Performance API data

documentation/docs/references/state-management.md

@@ -1,8 +1,6 @@
 ---
 title: State management
-date:  2017-10-31
 path: /state-management/
-category: References
 ---
 
 # State management
@@ -92,4 +90,4 @@ export default {
   reducer,
   enhancer: myEnhancer,
 };
-```
+```

documentation/docs/references/svg-react-components.md

@@ -1,3 +1,8 @@
+---
+title: SVG React Components
+path: /svg-react-components/
+---
+
 # SVG React Components
 
 React components can be generated from SVG files using [https://github.com/smooth-code/svgr](https://github.com/smooth-code/svgr).

documentation/docs/references/testing/component.md

@@ -1,3 +1,8 @@
+---
+title: Component testing
+path: /component
+---
+
 # Component testing
 
 There are two strategies for testing individual components and the interactions between those components.

documentation/docs/references/testing/integration.md

@@ -1,3 +1,8 @@
+---
+title: Integration testing
+path: /integration
+---
+
 # Integration testing
 
 Integration tests verify that your modules work together as expected. They open your application within a browser, and perform actions in the same way that an end user would.

documentation/docs/references/testing/simulation.md

@@ -1,3 +1,8 @@
+---
+title: Simulation testing
+path: /simulation
+---
+
 # Simulation testing
 
 It is often useful to simulate a request/render of a Fusion application. The `fusion-test-utils` library exports some utilities to make this easy.

documentation/docs/references/testing/snapshot.md

@@ -1,3 +1,8 @@
+---
+title: Snapshot testing
+path: /snapshot
+---
+
 # Snapshot testing
 
 Snapshot testing is one possible way of preventing regressions by surfacing differences in components and objects. These tests may be run in either Node or browser environments, and against components or data structures. When snapshots need to be updated, you can update them with: `yarn test --updateSnapshot`. For more information see the [Jest snapshot testing documentation](https://facebook.github.io/jest/docs/en/snapshot-testing.html).

documentation/docs/references/testing/unit.md

@@ -1,3 +1,8 @@
+---
+title: Unit testing
+path: /unit
+---
+
 # Unit testing
 
 Use unit testing to ensure that your methods behave as expected within the browser and Node environments.

documentation/docs/references/virtual-modules.md

@@ -1,3 +1,8 @@
+---
+title: Virtual modules
+path: /virtual-modules/
+---
+
 # Framework virtual modules
 
 Virtual modules are the means for userland consumption of Fusion-owned static analysis and build artifacts in a way that:

gatsby-node.js

@@ -22,8 +22,6 @@ exports.createPages = ({graphql, boundActionCreators}) => {
                   frontmatter {
                     title
                     path
-                    date(formatString: "MMMM DD, YYYY")
-                    category
                   }
                 }
                 relativePath
@@ -38,18 +36,17 @@ exports.createPages = ({graphql, boundActionCreators}) => {
         if (result.errors) {
           reject(result.errors);
         }
-
         // Create docs pages
         result.data.allFile.edges.forEach(({node}) => {
           const {localPath, remoteUrl} = buildPagePath(node);
           createPage({
             path: localPath,
             component: templates[node.sourceInstanceName] || templates.docs,
             context: {
-              localPath: localPath,
-              metadata: node.childMarkdownRemark.frontmatter,
-              html: node.childMarkdownRemark.html,
+              // Needed for api doc query
               remoteUrl,
+              // Used to query for HTML data on the actual page
+              relativePath: node.relativePath,
             },
           });
         });

package.json

@@ -23,6 +23,7 @@
     "gatsby-remark-prismjs": "^1.2.8",
     "gatsby-source-filesystem": "^1.4.12",
     "gatsby-transformer-remark": "^1.7.7",
+    "just-safe-get": "^2.0.0",
     "prismjs": "^1.15.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",

src/templates/doc.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {styled} from 'styletron-react';
+import {extractChildMarkdownRemark} from '../utils';
 
 const DocsWrapper = styled('div', {
   position: 'relative',
@@ -22,19 +23,35 @@ const EditLink = styled('a', {
 
 class DocTemplate extends React.Component {
   render() {
-    const {pathContext, location} = this.props;
+    const {data, pathContext} = this.props;
+    let html = extractChildMarkdownRemark(data).html || '';
+
     return (
       <DocsWrapper className="docSearch-content">
         {pathContext.remoteUrl ? (
           <EditLink href={pathContext.remoteUrl}>Edit</EditLink>
         ) : null}
         <DocsContainer
           // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{__html: pathContext.html}}
+          dangerouslySetInnerHTML={{__html: html}}
         />
       </DocsWrapper>
     );
   }
 }
 
+export const query = graphql`
+  query DocQuery($relativePath: String!) {
+    allFile(filter: {relativePath: {eq: $relativePath}}) {
+      edges {
+        node {
+          childMarkdownRemark {
+            html
+          }
+        }
+      }
+    }
+  }
+`;
+
 export default DocTemplate;

src/utils/index.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const get = require('just-safe-get');
 
 function getPath(prefix = '', childItem) {
   if (childItem.path) {
@@ -88,3 +89,11 @@ exports.buildPageName = node => {
     return `${pkgName ? `${pkgName}-` : ''}${node.name}`;
   }
 };
+
+exports.extractChildMarkdownRemark = blob => {
+  const edges = get(blob, 'allFile.edges');
+  if (edges.length) {
+    return get(edges[0], 'node.childMarkdownRemark') || {};
+  }
+  return {};
+};

yarn.lock

@@ -5915,6 +5915,11 @@ jsx-ast-utils@^2.0.1:
   dependencies:
     array-includes "^3.0.3"
 
+just-safe-get@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/just-safe-get/-/just-safe-get-2.0.0.tgz#a028262a8f1896fac4de90227b2d192dfdc3f907"
+  integrity sha512-OBUeNXA7efFIGh0hSLW4nxrOtFWfmjoc3T8B5oixm3b+D7SZN10VKwORUEk4oDeBaR/sqkDMxXb0gE0DRYreEA==
+
 kebab-case@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/kebab-case/-/kebab-case-1.0.0.tgz#3f9e4990adcad0c686c0e701f7645868f75f91eb"