@untool/react - npm Package Compare versions

Comparing version 0.22.0 to 0.23.0

lib/babel.js

+'use strict';
+
+module.exports = function({ types: t }) {
+  return {
+    visitor: {
+      ImportDeclaration(path) {
+        const module = this.opts.module || '@untool/react';
+        const source = path.node.source.value;
+        if (source !== module) return;
+
+        const specifiers = path.get('specifiers');
+        const specifier = specifiers.find(
+          (specifier) => specifier.node.imported.name === 'Import'
+        );
+        if (!specifier) return;
+
+        const bindingName = specifier.node.local.name;
+        const binding = path.scope.getBinding(bindingName);
+
+        binding.referencePaths.forEach((refPath) => {
+          const call = refPath.parentPath;
+          t.assertCallExpression(call);
+
+          const argument = call.get('arguments')[0];
+          t.assertStringLiteral(argument);
+
+          argument.replaceWith(
+            t.objectExpression([
+              t.objectProperty(t.identifier('module'), argument.node),
+              t.objectProperty(
+                t.identifier('load'),
+                t.arrowFunctionExpression(
+                  [],
+                  t.callExpression(t.identifier('import'), [argument.node])
+                )
+              ),
+              t.objectProperty(
+                t.identifier('weakId'),
+                t.callExpression(
+                  t.memberExpression(
+                    t.identifier('require'),
+                    t.identifier('resolveWeak')
+                  ),
+                  [argument.node]
+                )
+              ),
+            ])
+          );
+        });
+      },
+    },
+  };
+};

lib/components.js

+'use strict';
+/* global __webpack_modules__, __webpack_require__ */
+
+const { createElement, Component } = require('react');
+const { default: withRouter } = require('react-router-dom/es/withRouter');
+
+exports.Miss = withRouter(({ staticContext }) => {
+  if (staticContext) {
+    staticContext.miss = true;
+  }
+  return null;
+});
+
+exports.Status = withRouter(({ staticContext, code }) => {
+  if (staticContext) {
+    staticContext.status = code;
+  }
+  return null;
+});
+
+exports.Header = withRouter(({ staticContext, name, value }) => {
+  if (staticContext) {
+    staticContext.headers = { ...staticContext.headers, [name]: value };
+  }
+  return null;
+});
+
+exports.Import = ({ module, load, weakId }, name = 'default') => {
+  const ImportComponent = withRouter(
+    class ImportComponent extends Component {
+      constructor({ staticContext }) {
+        super();
+        if (staticContext) {
+          staticContext.modules.push(module);
+        }
+        if (staticContext || __webpack_modules__[weakId]) {
+          this.state = { Component: __webpack_require__(weakId)[name] };
+        } else {
+          this.state = { loading: true };
+        }
+      }
+      componentDidMount() {
+        const { loader } = this.props;
+        const { loading } = this.state;
+        if (loading) {
+          const state = { Component: null, error: null, loading: false };
+          Promise.resolve()
+            .then(() => (loader ? loader(load) : load()))
+            .then(
+              ({ [name]: Component }) => this.setState({ ...state, Component }),
+              (error) => this.setState({ ...state, error })
+            );
+        }
+      }
+      render() {
+        const {
+          render = ({ Component, error, loading, ...props }) => {
+            return !(error || loading) ? createElement(Component, props) : null;
+          },
+          ownProps,
+        } = this.props;
+        return render({ ...ownProps, ...this.state });
+      }
+    }
+  );
+  return function Import({ loader, render, ...ownProps }) {
+    return createElement(ImportComponent, { loader, render, ownProps });
+  };
+};

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"
 }

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25291

29.8%

Number of package files

12

20%

Lines of code

319

77.22%

Worsened metrics

Dependency count

11

10%

Dependency changes

• + Added

  prop-types@^15.6.2

• + Added

  @untool/core@0.23.0
  (transitive)

• - Removed

  @untool/core@0.22.0
  (transitive)

• Updated

  @untool/core@^0.23.0