react-ssr-prepass - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

dist/react-ssr-prepass.development.js

@@ -111,3 +111,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
   if (currentIdentity === null) {
-    throw new Error('Hooks can only be called inside the body of a function component. ' + '(https://fb.me/react-invalid-hook-call)');
+    throw new Error('[react-ssr-prepass] Hooks can only be called inside the body of a function component. ' + '(https://fb.me/react-invalid-hook-call)');
   } // NOTE: The warning that is used in ReactPartialRendererHooks is obsolete
@@ -366,7 +366,2 @@ // in a prepass, since it'll be caught by a subsequent renderer anyway
     };
-
-    if (__DEV__) {
-      Object.seal(ref);
-    }
-
     workInProgressHook.memoizedState = ref;
@@ -446,6 +441,10 @@ return ref;
   return type._ctor().then(function (Component) {
-    if (Component !== null && (typeof Component === 'function' || typeof Component === 'object')) {
+    if (typeof Component === 'function') {
       type._result = Component;
       type._status = 1;
       /* SUCCESSFUL */
+    } else if (Component !== null && typeof Component === 'object' && typeof Component.default === 'function') {
+      type._result = Component.default;
+      type._status = 1;
+      /* SUCCESSFUL */
     } else {
@@ -465,9 +464,3 @@ type._status = 2;
   if (type._status === 1) {
-    var Component = type._result;
-
-    if (Component.default) {
-      Component = Component.default;
-    }
-
-    return React.createElement(Component, props);
+    return React.createElement(type._result, props);
   }
@@ -529,2 +522,5 @@
 var mount$1 = function (type, props, queue, visitor, element) {
+  setFirstHook(null);
+  setCurrentIdentity(makeIdentity());
+
   if (element !== undefined) {
@@ -539,4 +535,2 @@ var p = visitor(element);
 
-  setFirstHook(null);
-  setCurrentIdentity(makeIdentity());
   return render$1(type, props, queue);
@@ -751,18 +745,18 @@ };
 
-    case REACT_FORWARD_REF_TYPE:
+    case REACT_MEMO_TYPE:
       {
-        var refElement = element; // Treat inner type as the component instead of React.forwardRef itself
-
-        var type$1 = refElement.type.render;
-        var props = refElement.props;
-        var child$1 = mount$1(type$1, props, queue, visitor);
+        var memoElement = element;
+        var type$1 = memoElement.type.type;
+        var child$1 = render$3(type$1, memoElement.props, queue, visitor);
         return getChildrenArray(child$1);
       }
 
-    case REACT_MEMO_TYPE:
+    case REACT_FORWARD_REF_TYPE:
       {
-        var memoElement = element; // Treat inner type as the component instead of React.memo itself
+        var refElement = element; // Treat inner type as the component instead of React.forwardRef itself
 
-        var type$2 = memoElement.type.type;
-        return getChildrenArray(render$3(type$2, memoElement.props, queue, visitor));
+        var type$2 = refElement.type.render;
+        var props = refElement.props;
+        var child$2 = mount$1(type$2, props, queue, visitor);
+        return getChildrenArray(child$2);
       }
@@ -781,4 +775,4 @@
           var props$1 = userElement.props;
-          var child$2 = render$3(type$3, props$1, queue, visitor, userElement);
-          return getChildrenArray(child$2);
+          var child$3 = render$3(type$3, props$1, queue, visitor, userElement);
+          return getChildrenArray(child$3);
         }
@@ -809,10 +803,4 @@ }
 var ReactCurrentDispatcher = ref.ReactCurrentDispatcher;
+var prevDispatcher = ReactCurrentDispatcher.current;
 
-var visit = function (children, queue, visitor) {
-  var prevDispatcher = ReactCurrentDispatcher.current;
-  ReactCurrentDispatcher.current = Dispatcher;
-  visitChildren(children, queue, visitor);
-  ReactCurrentDispatcher.current = prevDispatcher;
-};
-
 var flushFrames = function (queue, visitor) {
@@ -825,2 +813,4 @@ if (queue.length === 0) {
   return frame.thenable.then(function () {
+    prevDispatcher = ReactCurrentDispatcher.current;
+    ReactCurrentDispatcher.current = Dispatcher;
     var children = [];
@@ -836,3 +826,4 @@
 
-    visit(children, queue, visitor);
+    visitChildren(children, queue, visitor);
+    ReactCurrentDispatcher.current = prevDispatcher;
     return flushFrames(queue, visitor);
@@ -848,3 +839,13 @@ });
   clearCurrentContextMap();
-  visit(getChildrenArray(element), queue, fn);
+
+  try {
+    prevDispatcher = ReactCurrentDispatcher.current;
+    ReactCurrentDispatcher.current = Dispatcher;
+    visitChildren(getChildrenArray(element), queue, fn);
+  } catch (error) {
+    return Promise.reject(error);
+  } finally {
+    ReactCurrentDispatcher.current = prevDispatcher;
+  }
+
   return flushFrames(queue, fn);
@@ -851,0 +852,0 @@ };

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 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,y=e.Memo,h=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},w=function(){if(null===M)throw new Error("[react-ssr-prepass] Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)");return M},z=function(t){b=t},E=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 z(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},P=null,R=null,W=!1,O=!1,U=null,D=0,N=function(t){P=t};function T(){return null===R?null===P?(W=!1,P=R={memoizedState:null,queue:null,next:null}):(W=!0,R=P):null===R.next?(W=!1,R=R.next={memoizedState:null,queue:null,next:null}):(W=!0,R=R.next),R}function A(t,e){return"function"==typeof e?e(t):e}function L(t,e,n){var r,u=w();if(R=T(),W){var o=R.queue,i=o.dispatch;if(null!==U){var l=U.get(o);if(void 0!==l){U.delete(o);var a=R.memoizedState,c=l;do{a=t(a,c.action),c=c.next}while(null!==c);return R.memoizedState=a,[a,i]}}return[R.memoizedState,i]}r=t===A?"function"==typeof e?e():e:void 0!==n?n(e):e,R.memoizedState=r;var f=R.queue={last:null,dispatch:null},s=f.dispatch=function(t,e,n){if(t===w()){O=!0;var r={action:n,next:null};null===U&&(U=new Map);var u=U.get(e);if(void 0===u)U.set(e,r);else{for(var o=u;null!==o.next;)o=o.next;o.next=r}}}.bind(null,u,f);return[R.memoizedState,s]}function I(){}var $={readContext:function(t,e){return k(t)},useContext:function(t,e){return w(),k(t)},useMemo:function(t,e){w();var n=void 0===e?null:e;if(null!==(R=T())){var r=R.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 R.memoizedState=[o,n],o},useReducer:L,useRef:function(t){w();var e=(R=T()).memoizedState;if(null===e){var n={current:t};return R.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},H=function(t){return t._status=0,t._ctor().then(function(e){"function"==typeof e?(t._result=e,t._status=1):null!==e&&"object"==typeof e&&"function"==typeof e.default?(t._result=e.default,t._status=1):t._status=2}).catch(function(){t._status=2})},V=function(t,e,r){return 1===t._status?n.createElement(t._result,e):null},B=function(t,e,n){return{contextMap:E(),id:w(),hook:P,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);D<25&&O;)O=!1,D+=1,R=null,r=t(e,n);return D=0,U=null,R=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(N(null),C({}),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 Y(t,e,n)},J=function(t,e,n){return{contextMap:E(),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 h:return h;case y:return y;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 h:var M=function(t,e,n){return 2!==t._status&&1!==t._status?(n.push({contextMap:E(),kind:"frame.lazy",thenable:H(t),props:e,type:t}),null):V(t,e)}(t.type,t.props,e);return x(M);case y:var b=Q(t.type.type,t.props,e,n);return x(b);case d:var C=G(t.type.render,t.props,e,n);return x(C);case o:if("string"==typeof t.type)return x(t.props.children);var w=Q(t.type,t.props,e,n,t);return x(w);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=E(),u=0,o=t.length;u<o;u++)Z(X(t[u],e,n),e,n),z(r)},tt=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher,et=tt.current,nt=function(t,e){if(0===t.length)return Promise.resolve();var n=t.shift();return n.thenable.then(function(){et=tt.current,tt.current=$;var r=[];return"frame.class"===n.kind?r=x(function(t,e){return C(null),z(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),z(e.contextMap),Y(e.type,e.props,t)}(t,n)):"frame.lazy"===n.kind&&(r=x(function(t,e){return C(null),z(e.contextMap),V(e.type,e.props)}(0,n))),Z(r,t,e),tt.current=et,nt(t,e)})},rt=function(){};module.exports=function(t,e){var n=[],r=void 0!==e?e:rt;b=S;try{et=tt.current,tt.current=$,Z(x(t),n,r)}catch(t){return Promise.reject(t)}finally{tt.current=et}return nt(n,r)};
 //# sourceMappingURL=react-ssr-prepass.production.min.js.map

package.json

 {
   "name": "react-ssr-prepass",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "A custom partial React SSR renderer for prefetching and suspense",
@@ -9,2 +9,5 @@ "main": "index.js",
   "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kitten/react-ssr-prepass/issues"
+  },
   "files": [
@@ -36,3 +39,3 @@ "index.js",
   "lint-staged": {
-    "*.{js}": [
+    "**/*.js": [
       "flow focus-check",
@@ -42,3 +45,3 @@ "prettier --write",
     ],
-    "*.{json,md}": [
+    "**/*.{json,md}": [
       "prettier --write",
@@ -62,2 +65,3 @@ "git add"
     "@babel/preset-react": "^7.0.0",
+    "coveralls": "^3.0.3",
     "flow-bin": "^0.94.0",
@@ -64,0 +68,0 @@ "husky": "^1.3.1",

README.md

@@ -1,16 +0,62 @@
-# react-ssr-prepass 🌲
+# react-ssr-prepass
 
-`react-ssr-prepass` is a partial server-side React renderer that is meant
-to do a prepass on a React tree and await all suspended promises. It also
-accepts a visitor function that can be used to await on custom promises.
+<p>
+  <a href="https://travis-ci.org/kitten/react-ssr-prepass">
+    <img alt="Build Status" src="https://travis-ci.org/kitten/react-ssr-prepass.svg?branch=master" />
+  </a>
+  <a href="https://coveralls.io/github/kitten/react-ssr-prepass?branch=master">
+    <img alt="Test Coverage" src="https://coveralls.io/repos/github/kitten/react-ssr-prepass/badge.svg?branch=master" />
+  </a>
+  <a href="https://npmjs.com/package/react-ssr-prepass">
+    <img alt="NPM Version" src="https://img.shields.io/npm/v/react-ssr-prepass.svg" />
+  </a>
+</p>
 
-It's meant to be used for fetching data before executing `renderToString`
-or `renderToNodeStream` and provides a crude way to support suspense during
-SSR today. ✨
+<p>
+  <code>react-dom/server</code> does not have support for suspense yet.<br />
+  <code>react-ssr-prepass</code> offers suspense on the server-side today, until it does. ✨
+</p>
 
-> ⚠️ **Disclaimer:** Suspense is unstable and experimental. Its API may change
-> and hence this library may break. Awaiting promises is only part of the
-> story and does not mean that any data will be rehydrated on the client
-> automatically. There be dragons!
+`react-ssr-prepass` is a **partial server-side React renderer** that does a prepass
+on a React element tree and suspends when it finds thrown promises. It also
+accepts a visitor function that can be used to suspend on anything.
 
+You can use it to fetch data before your SSR code calls `renderToString` or
+`renderToNodeStream`.
+
+> ⚠️ **Note:** Suspense is unstable and experimental. This library purely
+> exists since `react-dom/server` does not support data fetching or suspense
+> yet. This two-pass approach should just be used until server-side suspense
+> support lands in React.
+
+## The Why & How
+
+It's quite common to have some data that needs to be fetched before
+server-side rendering and often it's inconvenient to specifically call
+out to random fetch calls to get some data. Instead **Suspense**
+offers a practical way to automatically fetch some required data,
+but is currently only supported in client-side React.
+
+`react-ssr-prepass` offers a solution by being a "prepass" function
+that walks a React element tree and executing suspense. It finds all
+thrown promises (a custom visitor can also be provided) and waits for
+those promises to resolve before continuing to walk that particular
+suspended subtree. Hence, it attempts to offer a practical way to
+use suspense and complex data fetching logic today.
+
+A two-pass React render is already quite common for in other libraries
+that do implement data fetching. This has however become quite impractical.
+While it was trivial to previously implement a primitive React renderer,
+these days a lot more moving parts are involved to make such a renderer
+correct and stable. This is why some implementations now simply rely
+on calling `renderToStaticMarkup` repeatedly.
+
+`react-ssr-prepass` on the other hand is a custom implementation
+of a React renderer. It attempts to stay true and correct to the
+React implementation by:
+
+- Mirroring some of the implementation of `ReactPartialRenderer`
+- Leaning on React elements' symbols from `react-is`
+- Providing only the simplest support for suspense
+
 ## Quick Start Guide
@@ -43,3 +89,22 @@
 
-You should also be aware that `react-ssr-prepass` does not handle any
+Additionally you can also pass a "visitor function" as your second argument.
+This function is called for every React class or function element that is
+encountered.
+
+```js
+ssrPrepass(<App />, (element, instance) => {
+  if (element.type === SomeData) {
+    return fetchData()
+  } else if (instance && instance.fetchData) {
+    return instance.fetchData()
+  }
+})
+```
+
+The first argument of the visitor is the React element. The second is
+the instance of a class component or undefined. When you return
+a promise from this function `react-ssr-prepass` will suspend before
+rendering this element.
+
+You should be aware that `react-ssr-prepass` does not handle any
 data rehydration. In most cases it's fine to collect data from your cache
@@ -49,7 +114,36 @@ or store after running `ssrPrepass`, turn it into JSON, and send it
 
+## Examples & Recipes
+
+### Usage with `react-apollo`
+
+Instead of using `react-apollo`'s own `getDataFromTree` function, `react-ssr-prepass`
+can be used instead. For this to work, we will have to write a visitor function
+that knows how to suspend on `react-apollo`'s `Query` component.
+
+Luckily this is quite simple, since all we need to do is call the `fetchData`
+method on the `Query` component's instance.
+
+```js
+ssrPrepass(<App />, (_element, instance) => {
+  if (instance !== undefined && typeof instance.fetchData === 'function') {
+    return instance.fetchData()
+  }
+})
+```
+
+Since we're now calling `fetchData` when it exists, which returns a `Promise`
+already, `ssrPrepass` will suspend on `<Query>` components.
+
+[More information can be found in Apollo's own docs](https://www.apollographql.com/docs/react/features/server-side-rendering.html#getDataFromTree)
+
 ## 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`.
+This library is (luckily) not a reimplementation from scratch of
+React's server-side rendering. Instead it's mostly based on
+React's own server-side rendering logic that resides in its
+[`ReactPartialRenderer`](https://github.com/facebook/react/blob/13645d2/packages/react-dom/src/server/ReactPartialRenderer.js).
+
+The approach of doing an initial "data fetching pass" is inspired by:
+
+- [`react-apollo`'s `getDataFromTree`](https://github.com/apollographql/react-apollo/blob/master/src/getDataFromTree.ts)
+- [`react-tree-walker`](https://github.com/ctrlplusb/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

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

79806

increased by5.75%

Lines of code

725

increased by0.55%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

148

increased by174.07%

Worsened metrics

Dev dependency count

15

increased by7.14%

No dependency changes