Add chunk flushing; fixes SSR, allows preloading

Resolves #2
GeKorm · Jun 6, 2018 · a509c73 · a509c73
1 parent 317ce38
commit a509c73
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -61,6 +61,71 @@ A path can contain a glob but must be dot-delimited.
 `withCSS(__CSS__, scriptBlock: boolean = true)(Component);`
 If `scriptBlock` is false, then it won't inject empty script tags to work around Firefox Flash Of Unstyled Content
 
+##### Server-side rendering
+**flushCSS()**  
+
+If you perform server-side rendering you must let progressive-css know when to flush its CSS chunks. This is usually every
+time you call the reactDomServer methods (eg renderToString())
+
+Example
+```jsx
+// server-render.js
+
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { flushCSS } from 'progressive-css'
+
+const getPage = (req, res) => {
+   const toRender = renderToString(<App />);
+   flushCSS();
+
+   const result = `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charSet="utf-8">
+    <title>Example</title>
+  </head>
+  <body>
+    <div id="root">${toRender}</div>
+  </body>
+</html>
+`;
+
+   res.status(200).send(result);
+}
+```
+
+**flushCSS()** returns an array of the loaded CSS paths that were cleared, which you can optionally be used
+for things like preloading.
+
+###### Example: preload the first 3 css chunks
+```jsx
+   const toRender = renderToString(<App />);
+   const cssChunks = flushCSS();
+
+   const result = `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charSet="utf-8">
+    <title>Example</title>
+    ${
+      cssChunks && cssChunks[0]
+        ? cssChunks
+            .slice(0, 3)
+            .map((href) => `<link rel="preload" href="${href}" as="style">`)
+            .join('\n')
+        : ''
+    }
+  </head>
+  <body>
+    <div id="root">${toRender}</div>
+  </body>
+</html>
+`;
+```
+
 #### Babel
 ```javascript
 const defaultOptions = {

diff --git a/lib/index.js b/lib/index.js
@@ -2,14 +2,6 @@
 
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
-
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -28,6 +20,14 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
 var React = require('react');
 
 var hoistStatics = require('hoist-non-react-statics');
@@ -45,6 +45,13 @@ function getDisplayName(WrappedComponent) {
   var name = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   return name.startsWith('_') ? name.slice(1) : name;
 }
+
+function flushCSS() {
+  var currentChunks = _toConsumableArray(loadedChunks);
+
+  loadedChunks.clear();
+  return currentChunks;
+}
 /**
  * Enhancer that places <link ref="stylesheet" ...> before your component
  *
@@ -113,4 +120,5 @@ var withCSS = function withCSS(paths) {
   };
 };
 
-module.exports = withCSS;
+exports.flushCSS = flushCSS;
+exports.default = withCSS;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "progressive-css",
-  "version": "3.2.0",
+  "version": "3.3.1",
   "description": "The future of loading CSS in your React application",
   "main": "lib/index.js",
   "repository": "git@github.com:GeKorm/progressive-css.git",

diff --git a/src/index.js b/src/index.js
@@ -11,6 +11,13 @@ function getDisplayName(WrappedComponent) {
   return name.startsWith('_') ? name.slice(1) : name;
 }
 
+function flushCSS() {
+  const currentChunks = [...loadedChunks];
+  loadedChunks.clear();
+
+  return currentChunks;
+}
+
 /**
  * Enhancer that places <link ref="stylesheet" ...> before your component
  *
@@ -55,4 +62,5 @@ const withCSS = (paths, scriptBlock = true) => (BaseComponent) => {
   return hoistStatics(CSS, BaseComponent);
 };
 
-module.exports = withCSS;
+exports.flushCSS = flushCSS;
+exports.default = withCSS;