@untool/react - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

lib/assets.js

+'use strict';
+
+const { extname } = require('path');
+
+module.exports = (stats, modules) => {
+  const { entryFiles, vendorFiles, moduleFileMap } = stats;
+  const moduleFiles = modules.reduce(
+    (result, module) => [...result, ...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: [] }
+    );
+};

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

lib/render.js

-'use strict';
-
-const { extname } = require('path');
-
-const { renderToString } = require('react-dom/server');
-const { Helmet } = require('react-helmet');
-
-function determineAssets(modules, stats) {
-  const { entryFiles, vendorFiles, moduleFileMap } = stats;
-  const moduleFiles = modules.reduce(
-    (result, module) => [...result, ...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: [] }
-    );
-}
-
-module.exports = function render(element, fetchedData, config, stats, modules) {
-  const markup = renderToString(element);
-  const helmet = Helmet.renderStatic();
-  const fragments = Object.entries(helmet).reduce(
-    (result, [key, value]) => ({ ...result, [key]: value.toString() }),
-    { headPrefix: '', headSuffix: '' }
-  );
-  const assets = determineAssets(modules, stats);
-  const { name: mountpoint, _env } = config;
-  const globals = { _env };
-  return { fetchedData, markup, fragments, assets, mountpoint, globals };
-};

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

Dependency count

11

-8.33%

Worsened metrics

Total package byte prevSize

33715

-1.3%

Lines of code

324

-4.71%

Dependency changes

• - Removed

  prop-types@^15.6.2

• Updated

  @untool/core@^1.1.0