@loadable/component - npm Package Compare versions

Comparing version 5.11.0 to 5.12.0

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+# [5.12.0](https://github.com/gregberge/loadable-components/compare/v5.11.0...v5.12.0) (2020-01-09)
+
+
+### Bug Fixes
+
+* apply loadable transformations before any other, fixes [#466](https://github.com/gregberge/loadable-components/issues/466) ([ac5ba45](https://github.com/gregberge/loadable-components/commit/ac5ba45862bad68b971a969e6e8713874add51a6))
+
+
+### Features
+
+* avoid synchronous loading on client if options.ssr is false ([#346](https://github.com/gregberge/loadable-components/issues/346)) ([338bf55](https://github.com/gregberge/loadable-components/commit/338bf555adc68986b12c8dd4e304875425119ca2))
+
+
+
+
+
 # [5.11.0](https://github.com/smooth-code/loadable-components/compare/v5.10.3...v5.11.0) (2019-12-02)
@@ -8,0 +24,0 @@

dist/loadable.cjs.js

@@ -136,5 +136,7 @@ 'use strict';
         // If module is already loaded, we use a synchronous loading
+        // Only perform this synchronous loading if the component has not
+        // been marked with no SSR, else we risk hydration mismatches
 
 
-        if (ctor.isReady && ctor.isReady(props)) {
+        if (options.ssr !== false && ctor.isReady && ctor.isReady(props)) {
           _this.loadSync();
@@ -141,0 +143,0 @@ }

dist/loadable.esm.js

@@ -130,5 +130,7 @@ import React from 'react';
         // If module is already loaded, we use a synchronous loading
+        // Only perform this synchronous loading if the component has not
+        // been marked with no SSR, else we risk hydration mismatches
 
 
-        if (ctor.isReady && ctor.isReady(props)) {
+        if (options.ssr !== false && ctor.isReady && ctor.isReady(props)) {
           _this.loadSync();
@@ -135,0 +137,0 @@ }

dist/loadable.js

@@ -179,5 +179,7 @@ (function (global, factory) {
           // If module is already loaded, we use a synchronous loading
+          // Only perform this synchronous loading if the component has not
+          // been marked with no SSR, else we risk hydration mismatches
 
 
-          if (ctor.isReady && ctor.isReady(props)) {
+          if (options.ssr !== false && ctor.isReady && ctor.isReady(props)) {
             _this.loadSync();
@@ -184,0 +186,0 @@ }

dist/loadable.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("hoist-non-react-statics")):"function"==typeof define&&define.amd?define(["exports","react","hoist-non-react-statics"],t):t((e=e||self).loadable={},e.React,e.hoistNonReactStatics)}(this,(function(e,t,r){"use strict";function n(e,t){if(!e){var r=new Error("loadable: "+t);throw r.framesToPop=1,r.name="Invariant Violation",r}}function o(e){console.warn("loadable: "+e)}t=t&&t.hasOwnProperty("default")?t.default:t,r=r&&r.hasOwnProperty("default")?r.default:r;var a=t.createContext(),i="__LOADABLE_REQUIRED_CHUNKS__";function u(e){return""+e+i}var s=Object.freeze({__proto__:null,getRequiredChunkKey:u,invariant:n,Context:a});function c(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}function l(){return(l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function f(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var d=function(e){return function(r){return t.createElement(a.Consumer,null,(function(n){return t.createElement(e,Object.assign({__chunkExtractor:n},r))}))}},h=function(e){return e};function p(e){var r=e.resolve,o=void 0===r?h:r,a=e.render,i=e.onLoad;function u(e,r){void 0===r&&(r={});var u=function(e){return"function"==typeof e?{requireAsync:e}:e}(e),s={};function h(e){return r.cacheKey?r.cacheKey(e):u.resolve?u.resolve(e):null}var p=function(e){var t,d;function p(t){var o;return(o=e.call(this,t)||this).state={result:null,error:null,loading:!0,cacheKey:h(t)},o.promise=null,n(!t.__chunkExtractor||u.requireSync,"SSR requires `@loadable/babel-plugin`, please install it"),t.__chunkExtractor?!1===r.ssr?f(o):(u.requireAsync(t).catch((function(){})),o.loadSync(),t.__chunkExtractor.addChunk(u.chunkName(t)),f(o)):(u.isReady&&u.isReady(t)&&o.loadSync(),o)}d=e,(t=p).prototype=Object.create(d.prototype),t.prototype.constructor=t,t.__proto__=d,p.getDerivedStateFromProps=function(e,t){var r=h(e);return l({},t,{cacheKey:r,loading:t.loading||t.cacheKey!==r})};var _=p.prototype;return _.componentDidMount=function(){this.mounted=!0,this.state.loading?this.loadAsync():this.state.error||this.triggerOnLoad()},_.componentDidUpdate=function(e,t){t.cacheKey!==this.state.cacheKey&&(this.promise=null,this.loadAsync())},_.componentWillUnmount=function(){this.mounted=!1},_.safeSetState=function(e,t){this.mounted&&this.setState(e,t)},_.triggerOnLoad=function(){var e=this;i&&setTimeout((function(){i(e.state.result,e.props)}))},_.loadSync=function(){if(this.state.loading)try{var e=u.requireSync(this.props),t=o(e,{Loadable:y});this.state.result=t,this.state.loading=!1}catch(e){this.state.error=e}},_.getCacheKey=function(){return h(this.props)||JSON.stringify(this.props)},_.getCache=function(){return s[this.getCacheKey()]},_.setCache=function(e){s[this.getCacheKey()]=e},_.loadAsync=function(){var e=this;if(!this.promise){var t=this.props,n=(t.__chunkExtractor,t.forwardedRef,c(t,["__chunkExtractor","forwardedRef"]));this.promise=u.requireAsync(n).then((function(t){var n=o(t,{Loadable:y});r.suspense&&e.setCache(n),e.safeSetState({result:o(t,{Loadable:y}),loading:!1},(function(){return e.triggerOnLoad()}))})).catch((function(t){e.safeSetState({error:t,loading:!1})}))}return this.promise},_.render=function(){var e=this.props,t=e.forwardedRef,n=e.fallback,o=(e.__chunkExtractor,c(e,["forwardedRef","fallback","__chunkExtractor"])),i=this.state,u=i.error,s=i.loading,f=i.result;if(r.suspense){var d=this.getCache();if(!d)throw this.loadAsync();return a({loading:!1,fallback:null,result:d,options:r,props:l({},o,{ref:t})})}if(u)throw u;var h=n||r.fallback||null;return s?h:a({loading:s,fallback:h,result:f,options:r,props:l({},o,{ref:t})})},p}(t.Component),_=d(p),y=t.forwardRef((function(e,r){return t.createElement(_,Object.assign({forwardedRef:r},e))}));return y.preload=function(e){u.requireAsync(e)},y.load=function(e){return u.requireAsync(e)},y}return{loadable:u,lazy:function(e,t){return u(e,l({},t,{suspense:!0}))}}}var _=p({resolve:function(e,t){var n=t.Loadable,o=e.__esModule?e.default:e.default||e;return r(n,o,{preload:!0}),o},render:function(e){var r=e.result,n=e.props;return t.createElement(r,n)}}),y=_.loadable,v=_.lazy,b=p({onLoad:function(e,t){e&&t.forwardedRef&&("function"==typeof t.forwardedRef?t.forwardedRef(e):t.forwardedRef.current=e)},render:function(e){var t=e.result,r=e.loading,n=e.props;return!r&&n.children?n.children(t):null}}),g=b.loadable,m=b.lazy,E="undefined"!=typeof window;var w=y;w.lib=g;var O=v;O.lib=m;var S=s;e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=S,e.default=w,e.lazy=O,e.loadableReady=function(e,t){void 0===e&&(e=function(){});var r=(void 0===t?{}:t).namespace,n=void 0===r?"":r;if(!E)return o("`loadableReady()` must be called in browser only"),e(),Promise.resolve();var a=null;if(E){var i=document.getElementById(u(n));i&&(a=JSON.parse(i.textContent))}if(!a)return o("`loadableReady()` requires state, please use `getScriptTags` or `getScriptElements` server-side"),e(),Promise.resolve();var s=!1;return new Promise((function(t){window.__LOADABLE_LOADED_CHUNKS__=window.__LOADABLE_LOADED_CHUNKS__||[];var r=window.__LOADABLE_LOADED_CHUNKS__,n=r.push.bind(r);function o(){a.every((function(e){return r.some((function(t){return t[0].indexOf(e)>-1}))}))&&(s||(s=!0,t(),e()))}r.push=function(){n.apply(void 0,arguments),o()},o()}))},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("hoist-non-react-statics")):"function"==typeof define&&define.amd?define(["exports","react","hoist-non-react-statics"],t):t((e=e||self).loadable={},e.React,e.hoistNonReactStatics)}(this,(function(e,t,r){"use strict";function n(e,t){if(!e){var r=new Error("loadable: "+t);throw r.framesToPop=1,r.name="Invariant Violation",r}}function o(e){console.warn("loadable: "+e)}t=t&&t.hasOwnProperty("default")?t.default:t,r=r&&r.hasOwnProperty("default")?r.default:r;var a=t.createContext();function i(e){return e+"__LOADABLE_REQUIRED_CHUNKS__"}var s=Object.freeze({__proto__:null,getRequiredChunkKey:i,invariant:n,Context:a});function u(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}function c(){return(c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function l(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var f=function(e){return e};function d(e){var r=e.resolve,o=void 0===r?f:r,i=e.render,s=e.onLoad;function d(e,r){void 0===r&&(r={});var f=function(e){return"function"==typeof e?{requireAsync:e}:e}(e),d={};function h(e){return r.cacheKey?r.cacheKey(e):f.resolve?f.resolve(e):null}var p,_=function(e){var t,a;function p(t){var o;return(o=e.call(this,t)||this).state={result:null,error:null,loading:!0,cacheKey:h(t)},o.promise=null,n(!t.__chunkExtractor||f.requireSync,"SSR requires `@loadable/babel-plugin`, please install it"),t.__chunkExtractor?!1===r.ssr?l(o):(f.requireAsync(t).catch((function(){})),o.loadSync(),t.__chunkExtractor.addChunk(f.chunkName(t)),l(o)):(!1!==r.ssr&&f.isReady&&f.isReady(t)&&o.loadSync(),o)}a=e,(t=p).prototype=Object.create(a.prototype),t.prototype.constructor=t,t.__proto__=a,p.getDerivedStateFromProps=function(e,t){var r=h(e);return c({},t,{cacheKey:r,loading:t.loading||t.cacheKey!==r})};var _=p.prototype;return _.componentDidMount=function(){this.mounted=!0,this.state.loading?this.loadAsync():this.state.error||this.triggerOnLoad()},_.componentDidUpdate=function(e,t){t.cacheKey!==this.state.cacheKey&&(this.promise=null,this.loadAsync())},_.componentWillUnmount=function(){this.mounted=!1},_.safeSetState=function(e,t){this.mounted&&this.setState(e,t)},_.triggerOnLoad=function(){var e=this;s&&setTimeout((function(){s(e.state.result,e.props)}))},_.loadSync=function(){if(this.state.loading)try{var e=f.requireSync(this.props),t=o(e,{Loadable:v});this.state.result=t,this.state.loading=!1}catch(e){this.state.error=e}},_.getCacheKey=function(){return h(this.props)||JSON.stringify(this.props)},_.getCache=function(){return d[this.getCacheKey()]},_.setCache=function(e){d[this.getCacheKey()]=e},_.loadAsync=function(){var e=this;if(!this.promise){var t=this.props,n=(t.__chunkExtractor,t.forwardedRef,u(t,["__chunkExtractor","forwardedRef"]));this.promise=f.requireAsync(n).then((function(t){var n=o(t,{Loadable:v});r.suspense&&e.setCache(n),e.safeSetState({result:o(t,{Loadable:v}),loading:!1},(function(){return e.triggerOnLoad()}))})).catch((function(t){e.safeSetState({error:t,loading:!1})}))}return this.promise},_.render=function(){var e=this.props,t=e.forwardedRef,n=e.fallback,o=(e.__chunkExtractor,u(e,["forwardedRef","fallback","__chunkExtractor"])),a=this.state,s=a.error,l=a.loading,f=a.result;if(r.suspense){var d=this.getCache();if(!d)throw this.loadAsync();return i({loading:!1,fallback:null,result:d,options:r,props:c({},o,{ref:t})})}if(s)throw s;var h=n||r.fallback||null;return l?h:i({loading:l,fallback:h,result:f,options:r,props:c({},o,{ref:t})})},p}(t.Component),y=(p=_,function(e){return t.createElement(a.Consumer,null,(function(r){return t.createElement(p,Object.assign({__chunkExtractor:r},e))}))}),v=t.forwardRef((function(e,r){return t.createElement(y,Object.assign({forwardedRef:r},e))}));return v.preload=function(e){f.requireAsync(e)},v.load=function(e){return f.requireAsync(e)},v}return{loadable:d,lazy:function(e,t){return d(e,c({},t,{suspense:!0}))}}}var h=d({resolve:function(e,t){var n=t.Loadable,o=e.__esModule?e.default:e.default||e;return r(n,o,{preload:!0}),o},render:function(e){var r=e.result,n=e.props;return t.createElement(r,n)}}),p=h.loadable,_=h.lazy,y=d({onLoad:function(e,t){e&&t.forwardedRef&&("function"==typeof t.forwardedRef?t.forwardedRef(e):t.forwardedRef.current=e)},render:function(e){var t=e.result,r=e.loading,n=e.props;return!r&&n.children?n.children(t):null}}),v=y.loadable,b=y.lazy,g="undefined"!=typeof window;var m=p;m.lib=v;var E=_;E.lib=b;var w=s;e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=w,e.default=m,e.lazy=E,e.loadableReady=function(e,t){void 0===e&&(e=function(){});var r=(void 0===t?{}:t).namespace,n=void 0===r?"":r;if(!g)return o("`loadableReady()` must be called in browser only"),e(),Promise.resolve();var a=null;if(g){var s=document.getElementById(i(n));s&&(a=JSON.parse(s.textContent))}if(!a)return o("`loadableReady()` requires state, please use `getScriptTags` or `getScriptElements` server-side"),e(),Promise.resolve();var u=!1;return new Promise((function(t){window.__LOADABLE_LOADED_CHUNKS__=window.__LOADABLE_LOADED_CHUNKS__||[];var r=window.__LOADABLE_LOADED_CHUNKS__,n=r.push.bind(r);function o(){a.every((function(e){return r.some((function(t){return t[0].indexOf(e)>-1}))}))&&(u||(u=!0,t(),e()))}r.push=function(){n.apply(void 0,arguments),o()},o()}))},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "@loadable/component",
   "description": "React code splitting made easy.",
-  "version": "5.11.0",
+  "version": "5.12.0",
   "main": "dist/loadable.cjs.js",
   "module": "dist/loadable.esm.js",
-  "repository": "[e-mail]:smooth-code/loadable-components.git",
+  "repository": "[e-mail]:gregberge/loadable-components.git",
   "author": "Greg Bergé <[e-mail]>",
@@ -26,2 +26,6 @@ "publishConfig": {
   },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/gregberge"
+  },
   "license": "MIT",
@@ -37,6 +41,6 @@ "scripts": {
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.7",
     "hoist-non-react-statics": "^3.3.1"
   },
-  "gitHead": "2c6bc5156d038a3018330c9c0275adfa07cf47c8"
+  "gitHead": "5e6e0807049ad8439d2ec29a4b1dad732e73ca22"
 }

README.md

@@ -13,3 +13,3 @@ # @loadable/component
 
-👉 [See full documentation](https://www.smooth-code.com/open-source/loadable-components/)
+👉 [See full documentation](https://loadable-components.com/)
 
@@ -16,0 +16,0 @@ ## License

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

56555

increased by2.12%

Lines of code

1176

increased by0.51%

Dependency changes

• Updated@babel/runtime@^7.7.7