- Fixed tag slots mapping issue with old fibers.

- Move update source related constants to config file. - Code refactor - Fixed issue with cloning children fiber in cloneChildren fiber. - Fix transition issue related to update pending state. - New approach to handle Suspense with transition.
brahmosjs · Jul 7, 2020 · b1f3b67 · b1f3b67
1 parent d779406
commit b1f3b67
Show file tree

Hide file tree

Showing 22 changed files with 325 additions and 167 deletions.
diff --git a/example/App.js b/example/App.js
@@ -66,7 +66,7 @@ export function oldApp() {
 }
 
 function Div() {
-  // console.log('rendering Div');
+  // // console.log('rendering Div');
   return <div>askjdkajsdks</div>;
 }
 

diff --git a/example/RefsExample.js b/example/RefsExample.js
@@ -1,43 +1,53 @@
 import Brahmos, { Component, createRef, forwardRef } from '../src';
 
 class Child extends Component {
-  logSomething () {
-    console.log('something');
+  logSomething() {
+    // console.log('something');
   }
 
-  render () {
-    return (<div>Hello World!!</div>);
+  render() {
+    return <div>Hello World!!</div>;
   }
 }
 
 const ChildWithForwardedRef = forwardRef((props, ref) => {
-  return (<div ref={ref}>Forwarded Ref</div>);
+  return <div ref={ref}>Forwarded Ref</div>;
 });
 
 export default class RefsExample extends Component {
-  constructor () {
+  constructor() {
     super();
     this.childCreateRef = createRef();
     this.domCreateRef = createRef();
     this.forwardedRef = createRef();
   }
 
   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 () {
+  render() {
     return (
       <div>
-        <Child ref={this.childCreateRef}/>
-        <Child ref={(instance) => { this.childCallbackRef = instance; }}/>
+        <Child ref={this.childCreateRef} />
+        <Child
+          ref={(instance) => {
+            this.childCallbackRef = instance;
+          }}
+        />
         <div ref={this.domCreateRef}>Dom create ref</div>
-        <div ref={(elm) => { this.domCbRef = elm; }}>Dom callback ref</div>
-        <ChildWithForwardedRef ref={this.forwardedRef}/>
+        <div
+          ref={(elm) => {
+            this.domCbRef = elm;
+          }}
+        >
+          Dom callback ref
+        </div>
+        <ChildWithForwardedRef ref={this.forwardedRef} />
         <button onClick={this.logRefs}>Log refs</button>
       </div>
     );

diff --git a/example/TodoList.js b/example/TodoList.js
@@ -7,7 +7,7 @@ export default class TodoList extends Component {
 
   state = { todos: [], text: '' };
 
-  setText = e => {
+  setText = (e) => {
     this.setState({ text: e.target.value });
   };
 
@@ -21,11 +21,11 @@ export default class TodoList extends Component {
     this.setState({ todos, text: '' });
   };
 
-  componentDidMount () {
-    console.log('TODO List mounted');
+  componentDidMount() {
+    // console.log('TODO List mounted');
   }
 
-  render () {
+  render() {
     const { todos, text } = this.state;
     const { maxCount } = this.props;
     return (

diff --git a/example/UnMountAtNode.js b/example/UnMountAtNode.js
@@ -5,18 +5,23 @@ export default class UnMountAtNode extends Component {
     setTimeout(() => {
       unmountComponentAtNode(document.getElementById('unmount-node'));
     }, 1000);
-  }
+  };
 
-  componentWillUnmount () {
-    console.log('component will unmount life cycle called!!');
+  componentWillUnmount() {
+    // console.log('component will unmount life cycle called!!');
   }
 
-  render () {
+  render() {
     return (
       <div>
-        <p> Remove a mounted Brahmos component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns true if a component was unmounted and false if there was no component to unmount. </p>
+        <p>
+          {' '}
+          Remove a mounted Brahmos component from the DOM and clean up its event handlers and state.
+          If no component was mounted in the container, calling this function does nothing. Returns
+          true if a component was unmounted and false if there was no component to unmount.{' '}
+        </p>
         <div>
-          <button onClick={ this.removeNode }> Remove node</button>
+          <button onClick={this.removeNode}> Remove node</button>
         </div>
       </div>
     );

diff --git a/example/concurrentApp.js b/example/concurrentApp.js
@@ -58,11 +58,11 @@ export default class App extends Component {
   }
 
   componentDidUpdate() {
-    console.log(performance.now() - this.stateUpdateTime);
+    // console.log(performance.now() - this.stateUpdateTime);
   }
 
   shuffle = () => {
-    console.log('State update');
+    // console.log('State update');
     this.stateUpdateTime = performance.now();
 
     this.setState({ results: shuffle(this.state.results) });
@@ -80,7 +80,7 @@ export default class App extends Component {
         <input
           value={value}
           onChange={(e) => {
-            console.log('Event update');
+            // console.log('Event update');
 
             this.stateUpdateTime = performance.now();
             this.setState({ value: e.target.value.slice(0, 10) });

diff --git a/example/createPortalExample.js b/example/createPortalExample.js
@@ -1,21 +1,29 @@
 import Brahmos, { Component, createPortal, useState } from '../src';
 
 class Child extends Component {
-  componentWillUnmount () {
-    console.log('unmounted');
+  componentWillUnmount() {
+    // console.log('unmounted');
   }
 
-  render () {
-    return (<div>Hello New Root!</div>);
+  render() {
+    return <div>Hello New Root!</div>;
   }
 }
 
-function CreatePortalExample () {
+function CreatePortalExample() {
   const [display, setDisplay] = useState(true);
-  return (<div>
-    {display && createPortal(<Child/>, document.querySelector('#another-root'))}
-    <button onClick={() => { setDisplay(false); }}>Hide</button>
-  </div>);
+  return (
+    <div>
+      {display && createPortal(<Child />, document.querySelector('#another-root'))}
+      <button
+        onClick={() => {
+          setDisplay(false);
+        }}
+      >
+        Hide
+      </button>
+    </div>
+  );
 }
 
 export default CreatePortalExample;
diff --git a/example/fakeApi.js b/example/fakeApi.js
@@ -19,7 +19,7 @@ function wrapPromise(promise) {
   let result;
   const suspender = promise.then(
     (r) => {
-      console.log('promiseId on success ---', promiseId, r);
+      // console.log('promiseId on success ---', promiseId, r);
       status = 'success';
       result = r;
       return result;
@@ -32,7 +32,7 @@ function wrapPromise(promise) {
   return {
     read() {
       if (status === 'pending') {
-        console.log('promiseId on suspend ---', promiseId);
+        // console.log('promiseId on suspend ---', promiseId);
         throw suspender;
       } else if (status === 'error') {
         throw result;
@@ -44,10 +44,10 @@ function wrapPromise(promise) {
 }
 
 function fetchUser() {
-  console.log('fetch user...');
+  // console.log('fetch user...');
   return new Promise((resolve) => {
     setTimeout(() => {
-      console.log('fetched user');
+      // console.log('fetched user');
       resolve({
         name: 'Ringo Starr',
       });
@@ -72,10 +72,10 @@ const ringoPosts = [
 
 function fetchPosts() {
   const ringoPostsAtTheTime = ringoPosts;
-  console.log('fetch posts...');
+  // console.log('fetch posts...');
   return new Promise((resolve) => {
     setTimeout(() => {
-      console.log('fetched posts');
+      // console.log('fetched posts');
       resolve(ringoPostsAtTheTime);
     }, 2000);
   });
@@ -84,7 +84,7 @@ function fetchPosts() {
 function fetchTrivia() {
   return new Promise((resolve) => {
     setTimeout(() => {
-      console.log('fetched trivia');
+      // console.log('fetched trivia');
 
       resolve([
         {
@@ -99,6 +99,10 @@ function fetchTrivia() {
           id: 3,
           text: 'Nominated for one Daytime Emmy Award, but did not win',
         },
+        {
+          id: 4,
+          text: 'Nominated for one Daytime Emmy Award, and did win this time',
+        },
       ]);
     }, 3000);
   });

diff --git a/example/suspenseExamples.js b/example/suspenseExamples.js
@@ -31,6 +31,10 @@ function HomePage({ showProfile }) {
   );
 }
 
+function Separator() {
+  return <div>Something Separator</div>;
+}
+
 function ProfilePage() {
   const [resource, setResource] = useState();
 
@@ -47,6 +51,7 @@ function ProfilePage() {
             <ProfileDetails resource={resource} />
           </>
         )}
+        {/* <Separator /> */}
         {/* <Suspense fallback={<h2>Loading timeline...</h2>}> */}
         {resource && (
           <>

diff --git a/src/Component.js b/src/Component.js
@@ -1,12 +1,11 @@
 import reRender from './reRender';
 import {
-  UPDATE_SOURCE_FORCE_UPDATE,
   withUpdateSource,
   getUpdateType,
   getPendingUpdatesKey,
   getCurrentTransition,
 } from './updateMetaUtils';
-import { BRAHMOS_DATA_KEY } from './configs';
+import { UPDATE_SOURCE_FORCE_UPDATE, BRAHMOS_DATA_KEY } from './configs';
 
 export class Component {
   constructor(props) {