@untool/react - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+# [1.1.0](https://github.com/untool/untool/compare/v1.0.0...v1.1.0) (2019-02-14)
+
+**Note:** Version bump only for package @untool/react
+
+
+
+
+
 # [1.0.0](https://github.com/untool/untool/compare/v1.0.0-rc.20...v1.0.0) (2019-01-29)
@@ -8,0 +16,0 @@

lib/babel.js

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

lib/runtime.js

@@ -9,10 +9,8 @@ 'use strict';
 
-exports.render = function render(element, options) {
-  return function render(...args) {
-    const { render } = initialize({}, element, options);
-    if (!render) {
-      throw new Error("Can't use @untool/react mixin");
-    }
-    return render(...args);
-  };
+exports.render = (element, options) => (...args) => {
+  const { render } = initialize({}, element, options);
+  if (!render) {
+    throw new Error("Can't use @untool/react mixin");
+  }
+  return render(...args);
 };
@@ -42,4 +40,4 @@
 exports.importComponent = ({ load, moduleId }, name = 'default') => {
-  const ImportComponent = withRouter(
-    class ImportComponent extends Component {
+  const Importer = withRouter(
+    class Importer extends Component {
       constructor({ staticContext }) {
@@ -81,4 +79,4 @@ super();
   return function Import({ loader, render, ...ownProps }) {
-    return createElement(ImportComponent, { loader, render, ownProps });
+    return createElement(Importer, { loader, render, ownProps });
   };
 };

lib/template.js

@@ -5,16 +5,3 @@ 'use strict';
 
-const renderCSS = (css) =>
-  css.map((asset) => `<link rel="stylesheet" href="/${asset}" />`).join('');
-
-const renderJS = (js) =>
-  js.map((asset) => `<script src="/${asset}"></script>`).join('');
-
-const renderGlobals = (globals) => {
-  const entries = Object.entries(globals).map(([k, v]) => `${k}=${esc(v)}`);
-  return entries.length ? `<script>var ${entries.join(',')};</script>` : '';
-};
-
 module.exports = ({
-  markup,
-  mountpoint,
   fragments = {},
@@ -32,3 +19,3 @@ globals = {},
     ${fragments.link || ''}
-    ${renderCSS(css)}
+    ${css.map((asset) => `<link rel="stylesheet" href="${asset}" />`).join('')}
     ${fragments.style || ''}
@@ -39,7 +26,11 @@ ${fragments.script || ''}
   <body ${fragments.bodyAttributes || ''}>
-    <div id="${mountpoint || ''}">${markup || ''}</div>
+    <div data-mountpoint>${fragments.reactMarkup || ''}</div>
     ${fragments.noscript || ''}
-    ${renderGlobals(globals)}
-    ${renderJS(js)}
+    <script>
+      ${Object.entries(globals)
+        .map(([key, value]) => `var ${key}=${esc(value)};`)
+        .join(' ')}
+    </script>
+    ${js.map((asset) => `<script src="${asset}"></script>`).join('')}
   </body>
 </html>`;

mixins/mixin.browser.js

@@ -29,10 +29,8 @@ 'use strict';
   render() {
-    const { name } = this.config;
-    const attribute = `data-${name}`;
-    const mountpoint = document.getElementById(name);
-    const isMounted = mountpoint.hasAttribute(attribute);
+    const mountpoint = document.querySelector('[data-mountpoint]');
+    const isMounted = mountpoint.hasAttribute('data-mounted');
     if (isMounted) {
       unmountComponentAtNode(mountpoint);
     } else {
-      mountpoint.setAttribute(attribute, '');
+      mountpoint.setAttribute('data-mounted', '');
     }
@@ -39,0 +37,0 @@ Promise.resolve()

mixins/mixin.server.js

@@ -6,3 +6,7 @@ 'use strict';
 const { createElement } = require('react');
+const { renderToString } = require('react-dom/server');
 const { default: StaticRouter } = require('react-router-dom/es/StaticRouter');
+const {
+  Helmet: { renderStatic },
+} = require('react-helmet');
 
@@ -16,3 +20,3 @@ const {
 
-const render = require('../lib/render');
+const getAssets = require('../lib/assets');
 const template = require('../lib/template');
@@ -44,7 +48,13 @@
       .then(() => this.enhanceElement(this.element))
-      .then((element) =>
-        this.fetchData({}, element).then((data) =>
-          render(element, data, this.config, this.stats, this.context.modules)
-        )
-      )
+      .then((element) => this.fetchData({}, element).then(() => element))
+      .then((element) => {
+        const reactMarkup = renderToString(element);
+        const fragments = Object.entries(renderStatic()).reduce(
+          (result, [key, value]) => ({ ...result, [key]: value.toString() }),
+          { reactMarkup, headPrefix: '', headSuffix: '' }
+        );
+        const assets = getAssets(this.stats, this.context.modules);
+        const globals = { _env: this.config._env };
+        return { fragments, assets, globals };
+      })
       .then((initialData) => {
@@ -51,0 +61,0 @@ if (this.context.miss) {

package.json

 {
   "name": "@untool/react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "untool react mixin",
@@ -23,7 +23,6 @@ "browser": "lib/runtime.js",
     "@babel/preset-react": "^7.0.0",
-    "@untool/core": "^1.0.0",
+    "@untool/core": "^1.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.19",
     "clone": "^2.1.2",
     "mixinable": "^4.0.0",
-    "prop-types": "^15.6.2",
     "serialize-javascript": "^1.4.0"
@@ -40,3 +39,3 @@ },
   },
-  "gitHead": "b62ab7c2654092232afe45b13e230c64e30695a8"
+  "gitHead": "e92a4e17440f172b7211c57d7bbf9badd34ec8b3"
 }

No alert changes

Improved metrics

Dependency count

11

decreased by-8.33%

Worsened metrics

Total package byte prevSize

33715

decreased by-1.3%

Lines of code

324

decreased by-4.71%

Dependency changes

• - Removedprop-types@^15.6.2

• Updated@untool/core@^1.1.0