- Implemented error boundary

- Implenented portals
- Fixed refs
- Fixed unmountComponentAtNode
- Fix issue with work loop when loop resets in sync mode (due to suspense/error boundary) and the boundary is before top fiber.
-

example/App.js

@@ -7,6 +7,7 @@ import RefsExample from './RefsExample';
 import CreatePortalExample from './createPortalExample';
 import SVGExample from './SVGExample';
 import LazySuspenseExample from './lazySuspenseExample';
+import ErrorBoundaryExample from './ErrorBoundaryExample';
 
 function shuffle(array) {
   array = [...array];
@@ -29,33 +30,37 @@ function shuffle(array) {
   return array;
 }
 
-export function oldApp() {
+export function OldApp() {
   return (
     <div>
-      <div className="wrapper">
+      {/* <div className="wrapper">
         <h2>Todo List</h2>
         <TodoList />
       </div>
       <div className="wrapper">
         <h2>useState hook example</h2>
         <UseStateExample />
-      </div>
-      <div className="wrapper">
+      </div> */}
+      {/* <div className="wrapper">
         <h2>Context api example</h2>
         <ContextExample />
-      </div>
-      <div className="wrapper">
+      </div> */}
+      {/* <div className="wrapper">
         <h2>Refs example</h2>
         <RefsExample />
-      </div>
-      <div className="wrapper">
+      </div> */}
+      {/* <div className="wrapper">
         <h2>SVG Example</h2>
         <SVGExample />
-      </div>
-      <div className="wrapper">
+      </div> */}
+      {/* <div className="wrapper">
         <h2>Lazy and Suspense Example</h2>
         <LazySuspenseExample />
-      </div>
+      </div> */}
+      {/* <div className="wrapper">
+        <h2>Error Boundary Example</h2>
+        <ErrorBoundaryExample />
+      </div> */}
       {/** Keep the portal example on last */}
       <div className="wrapper">
         <h2>CreatePortal Example</h2>
@@ -112,8 +117,7 @@ export class AppBase extends Component {
 export default function App() {
   return (
     <div>
-      <AppBase />
-      <AppBase />
+      <OldApp />
     </div>
   );
 }

example/ErrorBoundaryExample.js

@@ -0,0 +1,99 @@
+import Brahmos from '../src';
+
+class ErrorBoundary extends Brahmos.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // Catch errors in any components below and re-render with error message
+    this.setState({
+      error: error,
+      errorInfo: errorInfo,
+    });
+    // You can also log error messages to an error reporting service here
+  }
+
+  render() {
+    if (this.state.error) {
+      // Error path
+      return (
+        <div>
+          <h2>Something went wrong.</h2>
+          <details style={{ whiteSpace: 'pre-wrap' }}>
+            {this.state.error && this.state.error.toString()}
+            <br />
+            {this.state.errorInfo && this.state.errorInfo.componentStack}
+          </details>
+        </div>
+      );
+    }
+    // Normally, just render children
+    return this.props.children;
+  }
+}
+
+class BuggyCounter extends Brahmos.Component {
+  constructor(props) {
+    super(props);
+    this.state = { counter: 0 };
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    this.setState(({ counter }) => ({
+      counter: counter + 1,
+    }));
+  }
+
+  render() {
+    if (this.state.counter === 5) {
+      // Simulate a JS error
+      throw new Error('I crashed!');
+    }
+    return <h1 onClick={this.handleClick}>{this.state.counter}</h1>;
+  }
+}
+
+export default function ErrorBoundaryExample() {
+  return (
+    <div>
+      <p>
+        <b>
+          This is an example of error boundaries in React 16.
+          <br />
+          <br />
+          Click on the numbers to increase the counters.
+          <br />
+          The counter is programmed to throw when it reaches 5. This simulates a JavaScript error in
+          a component.
+        </b>
+      </p>
+      <hr />
+      <ErrorBoundary>
+        <p>
+          These two counters are inside the same error boundary. If one crashes, the error boundary
+          will replace both of them.
+        </p>
+        <BuggyCounter />
+        <BuggyCounter />
+      </ErrorBoundary>
+      <hr />
+      <p>
+        These two counters are each inside of their own error boundary. So if one crashes, the other
+        is not affected.
+      </p>
+      <ErrorBoundary>
+        <BuggyCounter />
+      </ErrorBoundary>
+      <ErrorBoundary>
+        <BuggyCounter />
+      </ErrorBoundary>
+    </div>
+  );
+}

example/RefsExample.js

@@ -23,11 +23,11 @@ export default class RefsExample extends Component {
   }
 
   logRefs = () => {
-    // console.log(this.childCreateRef);
-    // console.log(this.childCallbackRef);
-    // console.log(this.domCreateRef);
-    // console.log(this.domCbRef);
-    // console.log(this.forwardedRef);
+    console.log(this.childCreateRef);
+    console.log(this.childCallbackRef);
+    console.log(this.domCreateRef);
+    console.log(this.domCbRef);
+    console.log(this.forwardedRef);
   };
 
   render() {

example/createPortalExample.js

@@ -17,10 +17,10 @@ function CreatePortalExample() {
       {display && createPortal(<Child />, document.querySelector('#another-root'))}
       <button
         onClick={() => {
-          setDisplay(false);
+          setDisplay(!display);
         }}
       >
-        Hide
+        Toggle
       </button>
     </div>
   );

example/index.js

@@ -5,6 +5,6 @@ import ConcurrentApp from './concurrentApp';
 import SuspenseApp from './suspenseExamples';
 import SuspenseListApp from './suspenseListExample';
 
-render(<ConcurrentApp />, document.getElementById('app'));
+render(<App />, document.getElementById('app'));
 
-// render(<UnMountAtNode/>, document.getElementById('unmount-node'));
+render(<UnMountAtNode />, document.getElementById('unmount-node'));

example/suspenseListExample.js

@@ -10,7 +10,7 @@ export default function App() {
 
 function ProfilePage({ resource }) {
   return (
-    <SuspenseList revealOrder="forwards">
+    <SuspenseList revealOrder="forwards" tail="collapsed">
       <Suspense fallback={<h1>Loading...</h1>}>
         <ProfileDetails resource={resource} />
       </Suspense>

rollup.config.js

@@ -44,7 +44,7 @@ const defaultConfig = {
     license({
       banner,
     }),
-    // terser(),
+    terser(),
   ],
 };
 
@@ -55,7 +55,7 @@ const minConfig = {
     format: 'umd',
     name: 'Brahmos',
   },
-  plugins: [...defaultConfig.plugins, terser()],
+  plugins: [...defaultConfig.plugins],
 };
 
 export default [defaultConfig, minConfig];

src/Component.js

@@ -60,8 +60,6 @@ export class Component {
     if (callback) callback(this.state);
   }
 
-  __handleError() {}
-
   __render() {
     // get the new rendered node
     const nodes = this.render();

src/brahmosNode.js

@@ -73,6 +73,7 @@ export function brahmosNode(props, values, key) {
     key,
     added: false,
     ref: null,
+    portalContainer: null,
 
     /** Component specific properties */
     type: null,

src/createPortal.js

@@ -1,17 +1,12 @@
-import render from './render';
-
 /**
  *  Render children outside the main DOM hierarchy of
  *  the parent component without losing the context
  */
 function createPortal(child, container) {
-  // mark the child node as ported node
-  // TODO: Work on portal container logic with fiber
-  // child.portalContainer = container;
-
-  render(child, container);
+  // add portal container information in child
+  // which we can use for forming the part
+  if (child) child.portalContainer = container;
 
-  // We need to return the rendered child node so that life cycles are handled properly on render flow
   return child;
 }
 

src/effectLoop.js

@@ -156,7 +156,7 @@ function handleComponentEffect(fiber) {
 }
 
 function handleComponentPostCommitEffect(fiber) {
-  const { node, nodeInstance, root } = fiber;
+  const { node, nodeInstance, root, childFiberError } = fiber;
   const { updateType } = root;
 
   const { nodeType, ref } = node;
@@ -177,6 +177,16 @@ function handleComponentPostCommitEffect(fiber) {
       callLifeCycle(nodeInstance, 'componentDidUpdate', [prevProps, prevState, lastSnapshot]);
     }
 
+    if (childFiberError) {
+      callLifeCycle(nodeInstance, 'componentDidCatch', [
+        childFiberError.error,
+        childFiberError.errorInfo,
+      ]);
+
+      // reset the error
+      fiber.childFiberError = null;
+    }
+
     // if the component node has ref call the ref with the node instance
     if (ref) setRef(ref, nodeInstance);
 

src/fiber.js

@@ -173,6 +173,11 @@ export function createHostFiber(domNode) {
 }
 
 export function createFiber(root, node, part) {
+  // if a node is ported node, update the part information
+  if (node && node.portalContainer) {
+    part.parentNode = node.portalContainer;
+  }
+
   return {
     node,
     nodeInstance: null,
@@ -183,7 +188,7 @@ export function createFiber(root, node, part) {
     part,
     alternate: null, // points to the current fiber
     context: null, // Points to the context applicable for that fiber
-    errorBoundary: null,
+    childFiberError: null,
     isSvgPart: false,
     deferredUpdateTime: 0,
     updateTime: 0,
@@ -231,7 +236,6 @@ export function createAndLink(node, part, currentFiber, refFiber, parentFiber) {
   fiber[updateTimeKey] = parentFiber[updateTimeKey];
   fiber.context = parentFiber.context;
   fiber.isSvgPart = parentFiber.isSvgPart;
-  fiber.errorBoundary = parentFiber.errorBoundary;
 
   return fiber;
 }
@@ -268,15 +272,6 @@ function getFiberWhichRequiresProcessing(fiber, lastCompleteTime, updateTimeKey)
 }
 
 export function getNextFiber(fiber, topFiber, lastCompleteTime, updateTimeKey) {
-  // if we have any retry fiber reset return that fiber
-  const { root } = fiber;
-  const { retryFiber } = root;
-  if (retryFiber) {
-    // reset the retry fiber and return it
-    root.retryFiber = null;
-    return retryFiber;
-  }
-
   /**
    * Skip fibers which does not require processing
    */