@untool/react - npm Package Compare versions

Comparing version 0.22.0 to 0.23.0

CHANGELOG.md

@@ -6,2 +6,26 @@ # Change Log
 
+<a name="0.23.0"></a>
+# [0.23.0](https://github.com/untool/untool/compare/v0.22.0...v0.23.0) (2018-09-25)
+
+
+### Bug Fixes
+
+* **react:** get rid of html cosmetics ([827f76d](https://github.com/untool/untool/commit/827f76d))
+* switch to esm imports where possible ([b27b212](https://github.com/untool/untool/commit/b27b212))
+
+
+### Features
+
+* **react:** add code-splitting `Import` component ([be424fe](https://github.com/untool/untool/commit/be424fe))
+* **react:** add loader prop instead of placeholder ([528d547](https://github.com/untool/untool/commit/528d547))
+* **react:** add support for nested async imports ([4352b67](https://github.com/untool/untool/commit/4352b67))
+* **react:** deep import react-router to avoid bundling everything ([c0d00ef](https://github.com/untool/untool/commit/c0d00ef))
+* **react:** introduce `ImportPlaceholder` export ([488baa8](https://github.com/untool/untool/commit/488baa8))
+* **react:** introduce placeholder render prop ([87aa46b](https://github.com/untool/untool/commit/87aa46b))
+* **react:** make `Import` location configurable ([e7c46cc](https://github.com/untool/untool/commit/e7c46cc))
+
+
+
+
+
 <a name="0.22.0"></a>
@@ -8,0 +32,0 @@ # [0.22.0](https://github.com/untool/untool/compare/v0.21.0...v0.22.0) (2018-09-13)

lib/template.js

@@ -36,2 +36,2 @@ 'use strict';
   </body>
-</html>`.replace(/(^\s*[\r\n]| (?=>))/gm, '');
+</html>`;

mixin.browser.js

@@ -7,3 +7,3 @@ 'use strict';
 const { unmountComponentAtNode, hydrate, render } = require('react-dom');
-const { BrowserRouter } = require('react-router-dom');
+const { default: BrowserRouter } = require('react-router-dom/es/BrowserRouter');
 
@@ -10,0 +10,0 @@ const {

mixin.core.js

@@ -20,2 +20,3 @@ 'use strict';
     }
+    jsLoaderConfig.options.plugins.push(require.resolve('./lib/babel'));
 
@@ -22,0 +23,0 @@ return webpackConfig;

mixin.server.js

 'use strict';
 
+const { extname } = require('path');
+
 const { createElement } = require('react');
 const { renderToString } = require('react-dom/server');
-const { StaticRouter } = require('react-router-dom');
+const { default: StaticRouter } = require('react-router-dom/es/StaticRouter');
 const { Helmet } = require('react-helmet');
-const clone = require('clone');
 
@@ -21,5 +22,6 @@ const {
     this.element = element;
+    this.modules = [];
     this.options = Object.assign(
       {
-        context: {},
+        context: { modules: this.modules },
         basename: config.basePath,
@@ -30,14 +32,32 @@ },
   }
-  bootstrap(req, res) {
-    this.options.location = req.path;
-    this.assets = clone(res.locals.stats.entryAssetsByType);
+  procureAssets() {
+    const { stats, modules } = this;
+    const { entryFiles, vendorFiles, moduleFileMap } = stats;
+    const moduleFiles = modules.reduce(
+      (result, module) => result.concat(moduleFileMap[module]),
+      []
+    );
+    return [
+      ...vendorFiles.sort((a, b) => b.localeCompare(a)),
+      ...moduleFiles.sort((a, b) => b.localeCompare(a)),
+      ...entryFiles.sort((a, b) => b.localeCompare(a)),
+    ]
+      .filter(
+        (asset, index, self) =>
+          self.indexOf(asset) === index &&
+          /\.(css|js)$/.test(asset) &&
+          !/\.hot-update\./.test(asset)
+      )
+      .reduce(
+        (result, asset) => {
+          const extension = extname(asset).substring(1);
+          result[extension].push(asset);
+          return result;
+        },
+        { css: [], js: [] }
+      );
   }
-  enhanceElement(element) {
-    return createElement(StaticRouter, this.options, element);
-  }
   procureTemplateData(data) {
+    const { name: mountpoint, _env } = this.config;
     const { helmet } = data;
-    const { assets, config } = this;
-    const { name: mountpoint, _env } = config;
-    const globals = { _env };
     const fragments = Object.keys(helmet).reduce(
@@ -47,6 +67,14 @@ (result, key) => Object.assign(result, { [key]: helmet[key].toString() }),
     );
+    const assets = this.procureAssets();
     return this.getTemplateData(
-      Object.assign(data, { assets, mountpoint, globals, fragments })
+      Object.assign(data, { assets, mountpoint, fragments, globals: { _env } })
     );
   }
+  bootstrap(req, res) {
+    this.options.location = req.path;
+    this.stats = res.locals.stats;
+  }
+  enhanceElement(element) {
+    return createElement(StaticRouter, this.options, element);
+  }
   render(req, res, next) {
@@ -53,0 +81,0 @@ Promise.resolve()

package.json

 {
   "name": "@untool/react",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "untool react mixin",
+  "jsnext": "lib/components.js",
   "keywords": [
@@ -27,6 +28,7 @@ "unmixin",
     "@babel/preset-react": "^7.0.0",
-    "@untool/core": "^0.22.0",
+    "@untool/core": "^0.23.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
     "clone": "^2.1.2",
     "mixinable": "^4.0.0",
+    "prop-types": "^15.6.2",
     "serialize-javascript": "^1.4.0"
@@ -43,3 +45,3 @@ },
   },
-  "gitHead": "bec152e8dc81ae24186facd87b0db4d9be521adb"
+  "gitHead": "56663d8a79cfb4573d250dc8daca0790f54c40ce"
 }

No alert changes

Improved metrics

Total package byte prevSize

25291

increased by29.8%

Number of package files

12

increased by20%

Lines of code

319

increased by77.22%

Worsened metrics

Dependency count

11

increased by10%

Dependency changes

• + Addedprop-types@^15.6.2

• + Added@untool/core@0.23.0(transitive)

• - Removed@untool/core@0.22.0(transitive)

• Updated@untool/core@^0.23.0