react-ssr-prepass - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/react-ssr-prepass.development.js

@@ -441,2 +441,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
   type._status = 0;
+  /* PENDING */
+
   return type._ctor().then(function (Component) {
@@ -446,7 +448,10 @@ if (Component !== null && (typeof Component === 'function' || typeof Component === 'object')) {
       type._status = 1;
+      /* SUCCESSFUL */
     } else {
       type._status = 2;
+      /* FAILED */
     }
   }).catch(function () {
     type._status = 2;
+    /* FAILED */
   });
@@ -456,2 +461,4 @@ };
 var render = function (type, props, queue) {
+  // Component has previously been fetched successfully,
+  // so create the element with passed props and return it
   if (type._status === 1) {
@@ -471,2 +478,3 @@ var Component = type._result;
 var mount = function (type, props, queue) {
+  // If the component has not been fetched yet, suspend this component
   if (type._status !== 2 && type._status !== 1) {
@@ -709,3 +717,4 @@ queue.push({
       {
-        var providerElement = element;
+        var providerElement = element; // Add provider's value prop to context
+
         var newContextMap = forkContextMap();
@@ -723,3 +732,3 @@ var ref = providerElement.props;
         var ref$1 = consumerElement.props;
-        var children$1 = ref$1.children;
+        var children$1 = ref$1.children; // Read from context and call children, if it's been passed
 
@@ -744,3 +753,4 @@ if (typeof children$1 === 'function') {
       {
-        var refElement = element;
+        var refElement = element; // Treat inner type as the component instead of React.forwardRef itself
+
         var type$1 = refElement.type.render;
@@ -754,3 +764,4 @@ var props = refElement.props;
       {
-        var memoElement = element;
+        var memoElement = element; // Treat inner type as the component instead of React.memo itself
+
         var type$2 = memoElement.type.type;
@@ -765,2 +776,3 @@ return getChildrenArray(render$3(type$2, memoElement.props, queue, visitor));
         if (typeof el.type === 'string') {
+          // String elements can be skipped, so we just return children
           return getChildrenArray(el.props.children);
@@ -812,3 +824,2 @@ } else {
   var frame = queue.shift();
-  console.log(frame);
   return frame.thenable.then(function () {
@@ -815,0 +826,0 @@ var children = [];

dist/react-ssr-prepass.production.min.js

@@ -1,2 +0,2 @@
-function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}var e=require("react-is"),n=require("react"),r=t(n),u=t(require("object-is")),o=e.Element,i=e.Portal,l=e.Fragment,a=e.StrictMode,c=e.Profiler,f=e.ContextProvider,s=e.ContextConsumer,p=e.ConcurrentMode,d=e.ForwardRef,v=e.Suspense,h=e.Memo,y=e.Lazy,m=n.Children.toArray,_=function(t){return null!==t&&"object"==typeof t},x=function(t){return m(t).filter(_)},g=function(t,e){return"object"==typeof e?Object.assign({},e,t):t},S=new Map,M=null,b=S,C=function(t){M=t},E=function(){if(null===M)throw new Error("Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)");return M},w=function(t){b=t},z=function(){return b},k=function(t){return b.has(t)?b.get(t):"string"!=typeof t?t._currentValue:void 0},j=function(){var t=new Map(b);return w(t),t},q={},F=function(t){var e=t.contextType,n=t.contextTypes;if(e)return k(e);if(!n)return q;var r={};for(var u in n)r[u]=k(u);return r},R=null,O=null,P=!1,W=!1,D=null,U=0,N=function(t){R=t};function T(){return null===O?null===R?(P=!1,R=O={memoizedState:null,queue:null,next:null}):(P=!0,O=R):null===O.next?(P=!1,O=O.next={memoizedState:null,queue:null,next:null}):(P=!0,O=O.next),O}function A(t,e){return"function"==typeof e?e(t):e}function L(t,e,n){var r,u=E();if(O=T(),P){var o=O.queue,i=o.dispatch;if(null!==D){var l=D.get(o);if(void 0!==l){D.delete(o);var a=O.memoizedState,c=l;do{a=t(a,c.action),c=c.next}while(null!==c);return O.memoizedState=a,[a,i]}}return[O.memoizedState,i]}r=t===A?"function"==typeof e?e():e:void 0!==n?n(e):e,O.memoizedState=r;var f=O.queue={last:null,dispatch:null},s=f.dispatch=function(t,e,n){if(t===E()){W=!0;var r={action:n,next:null};null===D&&(D=new Map);var u=D.get(e);if(void 0===u)D.set(e,r);else{for(var o=u;null!==o.next;)o=o.next;o.next=r}}}.bind(null,u,f);return[O.memoizedState,s]}function I(){}var $={readContext:function(t,e){return k(t)},useContext:function(t,e){return E(),k(t)},useMemo:function(t,e){E();var n=void 0===e?null:e;if(null!==(O=T())){var r=O.memoizedState;if(null!==r&&null!==n&&function(t,e){if(null===e)return!1;for(var n=0;n<e.length&&n<t.length;n++)if(!u(t[n],e[n]))return!1;return!0}(n,r[1]))return r[0]}var o=t();return O.memoizedState=[o,n],o},useReducer:L,useRef:function(t){E();var e=(O=T()).memoizedState;if(null===e){var n={current:t};return __DEV__&&Object.seal(n),O.memoizedState=n,n}return e},useState:function(t){return L(A,t)},useCallback:function(t,e){return t},useLayoutEffect:I,useImperativeHandle:I,useEffect:I,useDebugValue:I},V=function(t){return t._status=0,t._ctor().then(function(e){null===e||"function"!=typeof e&&"object"!=typeof e?t._status=2:(t._result=e,t._status=1)}).catch(function(){t._status=2})},H=function(t,e,r){if(1===t._status){var u=t._result;return u.default&&(u=u.default),n.createElement(u,e)}return null},B=function(t,e,n){return{contextMap:z(),id:E(),hook:R,kind:"frame.hooks",thenable:n,props:e,type:t}},Y=function(t,e,n){try{return function(t,e,n){for(var r=t(e,n);U<25&&W;)W=!1,U+=1,O=null,r=t(e,n);return U=0,D=null,O=null,r}(t,g(e,t.defaultProps),F(t))}catch(r){if("function"!=typeof r.then)throw r;return n.push(B(t,e,r)),null}finally{C(null)}},G=function(t,e,n,r,u){if(void 0!==u){var o=r(u);if("object"==typeof o&&null!==o&&"function"==typeof o.then)return n.push(B(t,e,o)),null}return N(null),C({}),Y(t,e,n)},J=function(t,e,n){return{contextMap:z(),thenable:n,kind:"frame.class",instance:e,type:t}},K=function(t,e,n){!function(t){var e=t.updater.queue;if(e.length>0){for(var n=Object.assign({},t.state),r=0,u=e.length;r<u;r++){var o=e[r],i="function"==typeof o?o.call(t,n,t.props,t.context):o;null!==i&&Object.assign(n,i)}t.state=n,e.length=0}}(e);var r=null;try{r=e.render()}catch(r){if("function"!=typeof r.then)throw r;return n.push(J(t,e,r)),null}if(void 0!==t.childContextTypes&&"function"==typeof e.getChildContext){var u=e.getChildContext();if(u){var o=j();for(var i in u)o.set(i,u[i])}}if("function"!=typeof e.getDerivedStateFromProps&&("function"==typeof e.componentWillMount||"function"==typeof e.UNSAFE_componentWillMount)&&"function"==typeof e.componentWillUnmount)try{e.componentWillUnmount()}catch(t){}return e._isMounted=!1,r},Q=function(t,e,n,r,u){return(o=t).prototype&&o.prototype.isReactComponent?function(t,e,n,r,u){C(null);var o=function(t,e){var n,r={queue:n=[],isMounted:function(){return!1},enqueueForceUpdate:function(){return null},enqueueReplaceState:function(t,e){t._isMounted&&(n.length=0,n.push(e))},enqueueSetState:function(t,e){t._isMounted&&n.push(e)}},u=g(e,t.defaultProps),o=F(t),i=new t(u,o,r);if(i.props=u,i.context=o,i.updater=r,i._isMounted=!0,void 0===i.state&&(i.state=null),"function"==typeof t.getDerivedStateFromProps){var l=(0,t.getDerivedStateFromProps)(i.props,i.state);null!=l&&(i.state=Object.assign({},i.state,l))}else"function"==typeof i.componentWillMount?i.componentWillMount():"function"==typeof i.UNSAFE_componentWillMount&&i.UNSAFE_componentWillMount();return i}(t,e);if(void 0!==u){var i=r(u,o);if("object"==typeof i&&null!==i&&"function"==typeof i.then)return n.push(J(t,o,i)),null}return K(t,o,n)}(t,e,n,r,u):G(t,e,n,r,u);var o},X=function(t,e,n){switch(function(t){switch(t.$$typeof){case i:return i;case o:switch(t.type){case p:return p;case l:return l;case c:return c;case a:return a;case v:return v;default:switch(t.type&&t.type.$$typeof){case y:return y;case h:return h;case s:return s;case f:return f;case d:return d;default:return o}}default:return}}(t)){case v:case a:case p:case c:case l:return x(t.props.children);case f:var r=t,u=j(),m=r.props,_=m.children;return u.set(r.type._context,m.value),x(_);case s:var g=t.props.children;if("function"==typeof g){var S=k(t.type._context);return x(g(S))}return[];case y:var M=function(t,e,n){return 2!==t._status&&1!==t._status?(n.push({contextMap:z(),kind:"frame.lazy",thenable:V(t),props:e,type:t}),null):H(t,e)}(t.type,t.props,e);return x(M);case d:var b=G(t.type.render,t.props,e,n);return x(b);case h:return x(Q(t.type.type,t.props,e,n));case o:if("string"==typeof t.type)return x(t.props.children);var C=Q(t.type,t.props,e,n,t);return x(C);case i:default:return[]}},Z=function(t,e,n){if(1===t.length)Z(X(t[0],e,n),e,n);else if(t.length>1)for(var r=z(),u=0,o=t.length;u<o;u++)Z(X(t[u],e,n),e,n),w(r)},tt=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher,et=function(t,e,n){var r=tt.current;tt.current=$,Z(t,e,n),tt.current=r},nt=function(t,e){if(0===t.length)return Promise.resolve();var n=t.shift();return console.log(n),n.thenable.then(function(){var r=[];return"frame.class"===n.kind?r=x(function(t,e){return C(null),w(e.contextMap),K(e.type,e.instance,t)}(t,n)):"frame.hooks"===n.kind?r=x(function(t,e){return N(e.hook),C(e.id),w(e.contextMap),Y(e.type,e.props,t)}(t,n)):"frame.lazy"===n.kind&&(r=x(function(t,e){return C(null),w(e.contextMap),H(e.type,e.props)}(0,n))),et(r,t,e),nt(t,e)})},rt=function(){};module.exports=function(t,e){var n=[],r=void 0!==e?e:rt;return b=S,et(x(t),n,r),nt(n,r)};
+function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}var e=require("react-is"),n=require("react"),r=t(n),u=t(require("object-is")),o=e.Element,i=e.Portal,l=e.Fragment,a=e.StrictMode,c=e.Profiler,f=e.ContextProvider,s=e.ContextConsumer,p=e.ConcurrentMode,d=e.ForwardRef,v=e.Suspense,h=e.Memo,y=e.Lazy,m=n.Children.toArray,_=function(t){return null!==t&&"object"==typeof t},x=function(t){return m(t).filter(_)},g=function(t,e){return"object"==typeof e?Object.assign({},e,t):t},S=new Map,M=null,b=S,C=function(t){M=t},E=function(){if(null===M)throw new Error("Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)");return M},w=function(t){b=t},z=function(){return b},k=function(t){return b.has(t)?b.get(t):"string"!=typeof t?t._currentValue:void 0},j=function(){var t=new Map(b);return w(t),t},q={},F=function(t){var e=t.contextType,n=t.contextTypes;if(e)return k(e);if(!n)return q;var r={};for(var u in n)r[u]=k(u);return r},R=null,O=null,P=!1,W=!1,D=null,U=0,N=function(t){R=t};function T(){return null===O?null===R?(P=!1,R=O={memoizedState:null,queue:null,next:null}):(P=!0,O=R):null===O.next?(P=!1,O=O.next={memoizedState:null,queue:null,next:null}):(P=!0,O=O.next),O}function A(t,e){return"function"==typeof e?e(t):e}function L(t,e,n){var r,u=E();if(O=T(),P){var o=O.queue,i=o.dispatch;if(null!==D){var l=D.get(o);if(void 0!==l){D.delete(o);var a=O.memoizedState,c=l;do{a=t(a,c.action),c=c.next}while(null!==c);return O.memoizedState=a,[a,i]}}return[O.memoizedState,i]}r=t===A?"function"==typeof e?e():e:void 0!==n?n(e):e,O.memoizedState=r;var f=O.queue={last:null,dispatch:null},s=f.dispatch=function(t,e,n){if(t===E()){W=!0;var r={action:n,next:null};null===D&&(D=new Map);var u=D.get(e);if(void 0===u)D.set(e,r);else{for(var o=u;null!==o.next;)o=o.next;o.next=r}}}.bind(null,u,f);return[O.memoizedState,s]}function I(){}var $={readContext:function(t,e){return k(t)},useContext:function(t,e){return E(),k(t)},useMemo:function(t,e){E();var n=void 0===e?null:e;if(null!==(O=T())){var r=O.memoizedState;if(null!==r&&null!==n&&function(t,e){if(null===e)return!1;for(var n=0;n<e.length&&n<t.length;n++)if(!u(t[n],e[n]))return!1;return!0}(n,r[1]))return r[0]}var o=t();return O.memoizedState=[o,n],o},useReducer:L,useRef:function(t){E();var e=(O=T()).memoizedState;if(null===e){var n={current:t};return __DEV__&&Object.seal(n),O.memoizedState=n,n}return e},useState:function(t){return L(A,t)},useCallback:function(t,e){return t},useLayoutEffect:I,useImperativeHandle:I,useEffect:I,useDebugValue:I},V=function(t){return t._status=0,t._ctor().then(function(e){null===e||"function"!=typeof e&&"object"!=typeof e?t._status=2:(t._result=e,t._status=1)}).catch(function(){t._status=2})},H=function(t,e,r){if(1===t._status){var u=t._result;return u.default&&(u=u.default),n.createElement(u,e)}return null},B=function(t,e,n){return{contextMap:z(),id:E(),hook:R,kind:"frame.hooks",thenable:n,props:e,type:t}},Y=function(t,e,n){try{return function(t,e,n){for(var r=t(e,n);U<25&&W;)W=!1,U+=1,O=null,r=t(e,n);return U=0,D=null,O=null,r}(t,g(e,t.defaultProps),F(t))}catch(r){if("function"!=typeof r.then)throw r;return n.push(B(t,e,r)),null}finally{C(null)}},G=function(t,e,n,r,u){if(void 0!==u){var o=r(u);if("object"==typeof o&&null!==o&&"function"==typeof o.then)return n.push(B(t,e,o)),null}return N(null),C({}),Y(t,e,n)},J=function(t,e,n){return{contextMap:z(),thenable:n,kind:"frame.class",instance:e,type:t}},K=function(t,e,n){!function(t){var e=t.updater.queue;if(e.length>0){for(var n=Object.assign({},t.state),r=0,u=e.length;r<u;r++){var o=e[r],i="function"==typeof o?o.call(t,n,t.props,t.context):o;null!==i&&Object.assign(n,i)}t.state=n,e.length=0}}(e);var r=null;try{r=e.render()}catch(r){if("function"!=typeof r.then)throw r;return n.push(J(t,e,r)),null}if(void 0!==t.childContextTypes&&"function"==typeof e.getChildContext){var u=e.getChildContext();if(u){var o=j();for(var i in u)o.set(i,u[i])}}if("function"!=typeof e.getDerivedStateFromProps&&("function"==typeof e.componentWillMount||"function"==typeof e.UNSAFE_componentWillMount)&&"function"==typeof e.componentWillUnmount)try{e.componentWillUnmount()}catch(t){}return e._isMounted=!1,r},Q=function(t,e,n,r,u){return(o=t).prototype&&o.prototype.isReactComponent?function(t,e,n,r,u){C(null);var o=function(t,e){var n,r={queue:n=[],isMounted:function(){return!1},enqueueForceUpdate:function(){return null},enqueueReplaceState:function(t,e){t._isMounted&&(n.length=0,n.push(e))},enqueueSetState:function(t,e){t._isMounted&&n.push(e)}},u=g(e,t.defaultProps),o=F(t),i=new t(u,o,r);if(i.props=u,i.context=o,i.updater=r,i._isMounted=!0,void 0===i.state&&(i.state=null),"function"==typeof t.getDerivedStateFromProps){var l=(0,t.getDerivedStateFromProps)(i.props,i.state);null!=l&&(i.state=Object.assign({},i.state,l))}else"function"==typeof i.componentWillMount?i.componentWillMount():"function"==typeof i.UNSAFE_componentWillMount&&i.UNSAFE_componentWillMount();return i}(t,e);if(void 0!==u){var i=r(u,o);if("object"==typeof i&&null!==i&&"function"==typeof i.then)return n.push(J(t,o,i)),null}return K(t,o,n)}(t,e,n,r,u):G(t,e,n,r,u);var o},X=function(t,e,n){switch(function(t){switch(t.$$typeof){case i:return i;case o:switch(t.type){case p:return p;case l:return l;case c:return c;case a:return a;case v:return v;default:switch(t.type&&t.type.$$typeof){case y:return y;case h:return h;case s:return s;case f:return f;case d:return d;default:return o}}default:return}}(t)){case v:case a:case p:case c:case l:return x(t.props.children);case f:var r=t,u=j(),m=r.props,_=m.children;return u.set(r.type._context,m.value),x(_);case s:var g=t.props.children;if("function"==typeof g){var S=k(t.type._context);return x(g(S))}return[];case y:var M=function(t,e,n){return 2!==t._status&&1!==t._status?(n.push({contextMap:z(),kind:"frame.lazy",thenable:V(t),props:e,type:t}),null):H(t,e)}(t.type,t.props,e);return x(M);case d:var b=G(t.type.render,t.props,e,n);return x(b);case h:return x(Q(t.type.type,t.props,e,n));case o:if("string"==typeof t.type)return x(t.props.children);var C=Q(t.type,t.props,e,n,t);return x(C);case i:default:return[]}},Z=function(t,e,n){if(1===t.length)Z(X(t[0],e,n),e,n);else if(t.length>1)for(var r=z(),u=0,o=t.length;u<o;u++)Z(X(t[u],e,n),e,n),w(r)},tt=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher,et=function(t,e,n){var r=tt.current;tt.current=$,Z(t,e,n),tt.current=r},nt=function(t,e){if(0===t.length)return Promise.resolve();var n=t.shift();return n.thenable.then(function(){var r=[];return"frame.class"===n.kind?r=x(function(t,e){return C(null),w(e.contextMap),K(e.type,e.instance,t)}(t,n)):"frame.hooks"===n.kind?r=x(function(t,e){return N(e.hook),C(e.id),w(e.contextMap),Y(e.type,e.props,t)}(t,n)):"frame.lazy"===n.kind&&(r=x(function(t,e){return C(null),w(e.contextMap),H(e.type,e.props)}(0,n))),et(r,t,e),nt(t,e)})},rt=function(){};module.exports=function(t,e){var n=[],r=void 0!==e?e:rt;return b=S,et(x(t),n,r),nt(n,r)};
 //# sourceMappingURL=react-ssr-prepass.production.min.js.map

package.json

 {
   "name": "react-ssr-prepass",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A custom partial React SSR renderer for prefetching and suspense",
@@ -15,2 +15,3 @@ "main": "index.js",
   "scripts": {
+    "prepublishOnly": "run-s build",
     "build:prod": "microbundle --target node -f cjs --compress --globals '__DEV__=false' -o dist/react-ssr-prepass.production.min.js",
@@ -17,0 +18,0 @@ "build:dev": "microbundle --target node -f cjs --no-compress --globals '__DEV__=true' -o dist/react-ssr-prepass.development.js",

README.md

@@ -15,1 +15,40 @@ # react-ssr-prepass 🌲
 > automatically. There be dragons!
+
+## Quick Start Guide
+
+First install `react-ssr-prepass` alongside `react` and `react-dom`:
+
+```sh
+yarn add react-ssr-prepass
+# or
+npm install --save react-ssr-prepass
+```
+
+In your SSR code you may now add it in front of your usual `renderToString`
+or `renderToNodeStream` code:
+
+```js
+import { createElement } from 'react'
+import { renderToString } from 'react-dom/server'
+
+import ssrPrepass from 'react-ssr-prepass'
+
+const renderApp = async App => {
+  const element = createElement(App)
+  await ssrPrepass(element)
+
+  return renderToString(element)
+}
+```
+
+You should also be aware that `react-ssr-prepass` does not handle any
+data rehydration. In most cases it's fine to collect data from your cache
+or store after running `ssrPrepass`, turn it into JSON, and send it
+down in your HTML result.
+
+## Prior Art
+
+This library is mostly based on `react-dom`'s `ReactPartialRenderer`
+implementation. Its API and purpose is based on `react-apollo`'s
+`getDataFromTree` function and hence it's also a successor to
+`react-tree-walker`.

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

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

Improved metrics

Total package byte prevSize

75464

increased by9.89%

Lines of code

721

increased by0.98%

Number of lines in readme file

54

increased by260%

No dependency changes