SC v4, dynamic imports

- upgrades to Styled Components v4 - closes #127 (Add dynamic imports) - moves `@types` packages to devDependencies - bumps NPM packages: "cssnano": "^4.1.5" "mini-css-extract-plugin": "^0.4.4", "node-sass": "^4.9.4", "styled-components": "^4.0.2" "ts-loader": "^5.2.2 "typescript": "^3.1.3", "webpack": "^4.21.0",
leebenson · Oct 19, 2018 · dd5e9f0 · dd5e9f0
1 parent b9f91c6
commit dd5e9f0
Show file tree

Hide file tree

Showing 10 changed files with 1,145 additions and 1,284 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactql",
-  "version": "3.5.2",
+  "version": "3.6.0",
   "description": "ReactQL - front-end React/GraphQL starter kit",
   "main": "index.js",
   "scripts": {
@@ -17,14 +17,29 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.1.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@types/compression-webpack-plugin": "^0.4.2",
+    "@types/history": "^4.7.2",
     "@types/html-webpack-plugin": "^3.2.0",
+    "@types/kcors": "^2.2.3",
+    "@types/koa": "^2.0.46",
+    "@types/koa-router": "^7.0.32",
+    "@types/koa-send": "^4.1.1",
     "@types/koa-webpack": "^5.0.1",
+    "@types/lodash": "^4.14.117",
     "@types/mini-css-extract-plugin": "^0.2.0",
-    "@types/node": "^10.11.6",
+    "@types/node": "^10.12.0",
+    "@types/ora": "^1.3.4",
+    "@types/prop-types": "^15.5.6",
+    "@types/react": "^16.4.18",
+    "@types/react-dom": "^16.0.9",
+    "@types/react-helmet": "^5.0.7",
+    "@types/react-hot-loader": "^4.1.0",
+    "@types/react-router-dom": "^4.3.1",
     "@types/require-from-string": "^1.2.0",
     "@types/source-map-support": "^0.4.1",
-    "@types/webpack": "^4.4.16",
+    "@types/styled-components": "^4.0.1",
+    "@types/webpack": "^4.4.17",
     "@types/webpack-node-externals": "^1.6.3",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.0.4",
@@ -33,42 +48,29 @@
     "compression-webpack-plugin": "^2.0.0",
     "css-hot-loader": "^1.4.2",
     "css-loader": "^1.0.0",
-    "cssnano": "^4.1.4",
+    "cssnano": "^4.1.5",
     "file-loader": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",
     "koa-webpack": "^5.1.0",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
-    "mini-css-extract-plugin": "^0.4.3",
-    "node-sass": "^4.9.3",
+    "mini-css-extract-plugin": "^0.4.4",
+    "node-sass": "^4.9.4",
     "postcss-cssnext": "^3.1.0",
     "postcss-loader": "^3.0.0",
     "require-from-string": "^2.0.2",
     "resolve-url-loader": "^3.0.0",
     "rimraf": "^2.6.2",
     "sass-loader": "^7.1.0",
     "source-map-support": "^0.5.9",
-    "ts-loader": "^5.2.1",
+    "ts-loader": "^5.2.2",
     "ts-node": "^7.0.1",
     "tslint": "^5.11.0",
-    "typescript": "^3.1.2",
-    "webpack": "^4.20.2",
+    "typescript": "^3.1.3",
+    "webpack": "^4.21.0",
     "webpack-node-externals": "^1.7.2"
   },
   "dependencies": {
-    "@types/history": "^4.7.0",
-    "@types/kcors": "^2.2.3",
-    "@types/koa": "^2.0.46",
-    "@types/koa-router": "^7.0.32",
-    "@types/koa-send": "^4.1.1",
-    "@types/lodash": "^4.14.117",
-    "@types/ora": "^1.3.4",
-    "@types/prop-types": "^15.5.6",
-    "@types/react": "^16.4.16",
-    "@types/react-dom": "^16.0.9",
-    "@types/react-helmet": "^5.0.7",
-    "@types/react-hot-loader": "^4.1.0",
-    "@types/react-router-dom": "^4.3.1",
     "apollo-cache-inmemory": "^1.3.5",
     "apollo-client": "^2.4.2",
     "apollo-link": "^1.2.3",
@@ -99,7 +101,7 @@
     "react-helmet": "^5.2.0",
     "react-hot-loader": "^4.3.11",
     "react-router-dom": "^4.3.1",
-    "styled-components": "^3.4.10",
+    "styled-components": "^4.0.2",
     "subscriptions-transport-ws": "^0.9.15"
   }
 }
diff --git a/src/components/example/dynamic.tsx b/src/components/example/dynamic.tsx
@@ -0,0 +1,19 @@
+// Dynamic component that's loaded by `await import("./dynamic")`
+
+// ----------------------------------------------------------------------------
+// IMPORTS
+
+/* NPM */
+
+import * as React from "react";
+
+// ----------------------------------------------------------------------------
+
+// Say hello from GraphQL, along with a HackerNews feed fetched by GraphQL
+const Dynamic: React.SFC = () => (
+  <>
+    <h2>This component was loaded dynamically!</h2>
+  </>
+);
+
+export default Dynamic;
diff --git a/src/components/example/index.tsx b/src/components/example/index.tsx
@@ -17,11 +17,39 @@ import HackerNews from "./hackernews";
 
 // ----------------------------------------------------------------------------
 
+interface IIndexState {
+  dynamic: React.SFC | null;
+}
+
 // Say hello from GraphQL, along with a HackerNews feed fetched by GraphQL
-export default () => (
-  <>
-    <h1>Hi from ReactQL</h1>
-    <Count />
-    <HackerNews />
-  </>
-);
+class Index extends React.PureComponent<void, IIndexState> {
+  public state = {
+    dynamic: null,
+  };
+
+  public componentDidMount = async () => {
+    // Fetch the component dynamically
+    const dynamic = await import("./dynamic");
+
+    // ... and keep ahold of it locally
+    this.setState({
+      dynamic: dynamic.default,
+    });
+  }
+
+  public render() {
+    const DynamicComponent = this.state.dynamic || (() => <h2>Loading...</h2>);
+
+    return (
+      <>
+        {/* Note: The <h1> style will have a yellow background due to @/global/styles.ts! */}
+        <h1>Hi from ReactQL</h1>
+        <DynamicComponent />
+        <Count />
+        <HackerNews />
+      </>
+    );
+  }
+}
+
+export default Index;
diff --git a/src/components/root.tsx b/src/components/root.tsx
@@ -11,19 +11,20 @@ import { Route, Switch } from "react-router-dom";
 
 /* Local */
 
-// Styles - import for side-effects
-import "@/global/styles";
-
 // Components
 import ScrollTop from "@/components/helpers/scrollTop";
 
+// Global styles
+import { GlobalStyles } from "@/global/styles";
+
 // Routes
 import routes from "@/data/routes";
 
 // ----------------------------------------------------------------------------
 
 const Root = () => (
   <div>
+    <GlobalStyles />
     <Helmet>
       <title>ReactQL starter kit - edit me!</title>
     </Helmet>

diff --git a/src/entry/server.tsx b/src/entry/server.tsx
@@ -90,18 +90,20 @@ export default function(output: Output) {
       return;
     }
 
+    // Create response HTML
+    const html = ReactDOMServer.renderToString(components);
+
     // Create the React render via React Helmet
     const reactRender = ReactDOMServer.renderToString(
       <Html
         css={output.client.main("css")!}
         helmet={Helmet.renderStatic()}
+        html={html}
         js={output.client.main("js")!}
         styles={sheet.getStyleElement()}
         window={{
           __APOLLO_STATE__: client.extract(),
-        }}>
-        {components}
-      </Html>,
+        }} />,
     );
 
     // Set the return type to `text/html`, and stream the response back to

diff --git a/src/global/styles.ts b/src/global/styles.ts
@@ -3,20 +3,21 @@
 // Global styles
 
 /*
-  Import this file for side-effects -- by default, this does two things:
+  By default, this file does two things:
 
   1. Importing `styles.global.scss` will tell Webpack to generate a `main.css`
    which is automatically included along with our SSR / initial HTML. This
    is for processing CSS through the SASS/LESS -> PostCSS pipeline.
 
-  2. Using Styled-Component's `injectGlobal`
+  2. It exports a <GlobalStyles /> component which is used by @components/root.tsx
+   to add global styles to the React render.
 /*
 
 // ----------------------------------------------------------------------------
 // IMPORTS
 
 /* NPM */
-import { injectGlobal } from "@/lib/styledComponents";
+import { createGlobalStyle } from "@/lib/styledComponents";
 
 /* Local */
 
@@ -27,6 +28,13 @@ import "./styles.global.scss";
 
 // ----------------------------------------------------------------------------
 
-// Inject Styled-Components output onto the page. By default, this is blank --
-// you can add global styles to the template tags below
-injectGlobal``;
+// Inject Styled-Components output onto the page. You can add global styles to
+// the template tags below, and will be picked up in @components/root.tsx
+export const GlobalStyles = createGlobalStyle`
+
+  /* Set a default style for all <h1> tags
+  */
+  h1 {
+    background-color: ${props => props.theme.colors.orange};
+  }
+`;
diff --git a/src/lib/styledComponents.ts b/src/lib/styledComponents.ts
@@ -6,7 +6,6 @@
 // IMPORTS
 
 /* NPM */
-import { ComponentClass } from "react";
 import * as styledComponents from "styled-components";
 
 /* Local */
@@ -18,18 +17,19 @@ export interface IClassNameProps {
   className: string;
 }
 
-const {default: styled } = styledComponents as styledComponents.ThemedStyledComponentsModule<ITheme>;
-
-const css = styledComponents.css;
-const injectGlobal = styledComponents.injectGlobal;
-const keyframes = styledComponents.keyframes;
-const ThemeProvider = styledComponents.ThemeProvider as ComponentClass<styledComponents.ThemeProviderProps<ITheme>>;
+const {
+  default: styled,
+  css,
+  createGlobalStyle,
+  keyframes,
+  ThemeProvider,
+} = styledComponents as styledComponents.ThemedStyledComponentsModule<ITheme>;
 
 export {
+  createGlobalStyle,
   css,
-  keyframes,
-  injectGlobal,
   ITheme,
+  keyframes,
   ThemeProvider,
 };
 

diff --git a/src/views/ssr.tsx b/src/views/ssr.tsx
@@ -17,6 +17,7 @@ export interface IHtmlProps {
   css?: string;
   js: string;
   helmet: HelmetData;
+  html: string;
   scripts?: string[];
   styles?: Array<React.ReactElement<{}>>;
   window?: {
@@ -26,7 +27,7 @@ export interface IHtmlProps {
 
 export default class Html extends React.PureComponent<IHtmlProps> {
     public render() {
-      const { css, helmet, js, styles, window = {} } = this.props;
+      const { css, helmet, html, js, styles, window = {} } = this.props;
       return (
         <html lang="en" prefix="og: http://ogp.me/ns#" {...helmet.htmlAttributes.toString()}>
           <head>
@@ -44,7 +45,7 @@ export default class Html extends React.PureComponent<IHtmlProps> {
             {helmet.noscript.toComponent()}
           </head>
           <body {...helmet.bodyAttributes.toComponent()}>
-          <div id="root">{this.props.children}</div>
+          <div id="root" dangerouslySetInnerHTML={{__html: html }} />
           <script
             dangerouslySetInnerHTML={{
               __html: Object.keys(window).reduce(

diff --git a/src/webpack/common.ts b/src/webpack/common.ts
@@ -64,6 +64,7 @@ export default (_ssr: boolean /* <-- not currently used */) => {
               options: {
                 cacheDirectory: true,
                 plugins: [
+                  "@babel/plugin-syntax-dynamic-import",
                   "react-hot-loader/babel",
                   ["styled-components", {
                     displayName: !isProduction,
@@ -106,4 +107,4 @@ export default (_ssr: boolean /* <-- not currently used */) => {
   };
 
   return common;
-};
+};