Updates to react-tree-walker@2.0.0-alpha.1

Author: ctrlplusb

package.json

@@ -42,7 +42,7 @@
     "react-dom": "^0.14.0 || ^15.0.0-0"
   },
   "dependencies": {
-    "react-tree-walker": "^1.0.0"
+    "react-tree-walker": "2.0.0-alpha.1"
   },
   "devDependencies": {
     "app-root-dir": "1.0.2",

src/__tests__/integration.test.js

@@ -8,7 +8,6 @@ import { createAsyncComponent, withAsyncComponents } from '../'
 import { STATE_IDENTIFIER } from '../constants'
 
 function Bob({ children }) {
-  console.log(this)
   return (<div>{children}</div>)
 }
 Bob.propTypes = { children: React.PropTypes.node }

src/createAsyncComponent.js

@@ -42,7 +42,7 @@ function createAsyncComponent(args) {
     constructor(props, context) {
       super(props)
 
-      const { asyncComponents, asyncComponentsAncestor } = context
+      const { asyncComponents } = context
 
       this.state = { Component: null }
 
@@ -57,23 +57,20 @@ function createAsyncComponent(args) {
       const Component = es6Resolve(getComponent(id))
       if (Component) {
         this.state = { Component }
-      } else {
-        this.getAsyncComponentData = () => ({
-          id,
-          defer: ssrMode === 'defer'
-            || (asyncComponentsAncestor && asyncComponentsAncestor.isBoundary),
-          getResolver: () => this.resolveComponent(),
-        })
       }
+
+      // Bind the function to be used by our tree walking (re)hydrator
+      this.getAsyncComponentData = () => ({
+        id,
+        ssrMode,
+        getResolver: () => this.resolveComponent(),
+      })
     }
 
     getChildContext() {
-      if (ssrMode !== 'boundary') {
-        return undefined
-      }
       return {
         asyncComponentsAncestor: {
-          isBoundary: true,
+          isBoundary: ssrMode === 'boundary',
         },
       }
     }
@@ -117,10 +114,13 @@ function createAsyncComponent(args) {
   AsyncComponent.childContextTypes = {
     asyncComponentsAncestor: React.PropTypes.shape({
       isBoundary: React.PropTypes.bool,
-    }),
+    }).isRequired,
   }
 
   AsyncComponent.contextTypes = {
+    asyncComponentsAncestor: React.PropTypes.shape({
+      isBoundary: React.PropTypes.bool,
+    }),
     asyncComponents: React.PropTypes.shape({
       getNextId: React.PropTypes.func.isRequired,
       getComponent: React.PropTypes.func.isRequired,

src/index.js

@@ -3,6 +3,9 @@
 import createAsyncComponent from './createAsyncComponent'
 import withAsyncComponents from './withAsyncComponents'
 
+// create context
+// pass context into createAsyncComponentFactory
+
 export {
   createAsyncComponent,
   withAsyncComponents,

src/withAsyncComponents.js

@@ -56,50 +56,28 @@ export default function withAsyncComponents(app : React$Element) : Promise<Resul
     })
   }
 
-  const doWalk = (el, ctx = {}, fetchRoot = false) => {
-    const resolvers = []
+  const visitor = (element, instance, context) => {
+    if (instance && typeof instance.getAsyncComponentData === 'function') {
+      const { id, ssrMode, getResolver } = instance.getAsyncComponentData()
 
-    const visitor = (element, instance, context) => {
-      const skipRoot = !fetchRoot && (element === el)
-      if (instance
-        && typeof instance.getAsyncComponentData === 'function'
-        && !skipRoot
-      ) {
-        const { id, defer, getResolver } = instance.getAsyncComponentData()
+      const isBoundary = context.asyncComponentsAncestor &&
+        context.asyncComponentsAncestor.isBoundary
 
-        if (rehydrateState) {
-          if (!rehydrateState.resolved[id]) {
-            return false
-          }
-          rehydrateState[id] = false
-        } else if (defer) {
-          // Deferred, so return false to stop walking down this branch.
+      if (rehydrateState != null) {
+        if (!rehydrateState.resolved[id]) {
           return false
         }
-
-        const resolver = getResolver()
-        resolvers.push({
-          resolver,
-          element,
-          context: Object.assign(context, { ASYNC_WALKER_BOUNDARY: true }),
-        })
+        rehydrateState[id] = false
+      } else if (ssrMode === 'defer' || isBoundary) {
+        // Deferred, so return false to stop walking down this branch.
         return false
       }
-      return undefined
+      return getResolver()
     }
-
-    reactTreeWalker(el, visitor, ctx)
-
-    const nestedPromises = resolvers.map(({ resolver, element, context }) =>
-      resolver.then(() => doWalk(element, context)),
-    )
-
-    return nestedPromises.length > 0
-      ? Promise.all(nestedPromises)
-      : Promise.resolve([])
+    return true
   }
 
-  return doWalk(appWithAsyncComponents, {}, true)
+  return reactTreeWalker(appWithAsyncComponents, visitor, {})
     // Swallow errors.
     .catch(() => undefined)
     // Ensure that state rehydration is killed

tools/webpack/configFactory.js

@@ -22,7 +22,7 @@ function webpackConfigFactory({ target } : Args) {
       filename: target === 'umd'
         ? `${libraryName}.js`
         : `${libraryName}.min.js`,
-      library: libraryName,
+      library: 'ReactAsyncComponent',
       libraryTarget: 'umd',
     },
     externals: {
@@ -69,7 +69,13 @@ function webpackConfigFactory({ target } : Args) {
         {
           test: /\.js$/,
           loader: 'babel-loader',
-          include: [resolvePath(appRootDir.get(), './src')],
+          include: [
+            resolvePath(appRootDir.get(), './src'),
+            resolvePath(appRootDir.get(), './node_modules/p-limit'),
+            resolvePath(appRootDir.get(), './node_modules/p-locate'),
+            resolvePath(appRootDir.get(), './node_modules/p-map-series'),
+            resolvePath(appRootDir.get(), './node_modules/p-reduce'),
+          ],
         },
       ],
     },

yarn.lock

@@ -296,20 +296,7 @@ babel-eslint@7.1.1:
     babylon "^6.13.0"
     lodash.pickby "^4.6.0"
 
-babel-generator@^6.18.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.23.0.tgz#6b8edab956ef3116f79d8c84c5a3c05f32a74bc5"
-  dependencies:
-    babel-messages "^6.23.0"
-    babel-runtime "^6.22.0"
-    babel-types "^6.23.0"
-    detect-indent "^4.0.0"
-    jsesc "^1.3.0"
-    lodash "^4.2.0"
-    source-map "^0.5.0"
-    trim-right "^1.0.1"
-
-babel-generator@^6.24.0:
+babel-generator@^6.18.0, babel-generator@^6.24.0:
   version "6.24.0"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.24.0.tgz#eba270a8cc4ce6e09a61be43465d7c62c1f87c56"
   dependencies:
@@ -3795,6 +3782,16 @@ p-locate@^2.0.0:
   dependencies:
     p-limit "^1.1.0"
 
+p-map-series@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-map-series/-/p-map-series-1.0.0.tgz#bf98fe575705658a9e1351befb85ae4c1f07bdca"
+  dependencies:
+    p-reduce "^1.0.0"
+
+p-reduce@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
+
 pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
@@ -4027,9 +4024,11 @@ react-dom@15.4.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.0"
 
-react-tree-walker@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/react-tree-walker/-/react-tree-walker-1.0.0.tgz#061f719232a5b77b01fbab21b8ee6a3ab7be7085"
+react-tree-walker@2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/react-tree-walker/-/react-tree-walker-2.0.0-alpha.1.tgz#30621dad9732ada495ef82154b937f7971deb2b9"
+  dependencies:
+    p-map-series "^1.0.0"
 
 react@15.3.1:
   version "15.3.1"