- Added Concurrent mode demo

- Added Suspense list demo
- Added SVG demo
- update npm ignore
- update sierpinski traingle demo

.npmignore

@@ -8,5 +8,8 @@ reference
 .gitignore
 webpack.config.js
 
-# Ignore doc files
-docs
+# Ignore doc and example file
+docs
+example
+example_old
+

example/App.js

@@ -1,6 +1,9 @@
 import Brahmos, { render, Component, useState } from '../src';
 import TodoList from './todo-list/TodoList';
-import SierpinskiTriangleDemo from './sierpinski-triangle/SierpinskiTriangle';
+import SierpinskiTriangleDemo from './sierpinski-triangle';
+import ConcurrentModeDemo from './concurrent-mode';
+import SuspenseListDemo from './suspense-list';
+import SVGDemo from './svg-chart';
 
 import './App.scss';
 
@@ -15,6 +18,21 @@ const examples = [
     id: 'sierpinski-triangle',
     Component: SierpinskiTriangleDemo,
   },
+  {
+    title: 'Concurrent Mode Demo',
+    id: 'concurrent-mode',
+    Component: ConcurrentModeDemo,
+  },
+  {
+    title: 'Suspense List Demo',
+    id: 'suspense-list',
+    Component: SuspenseListDemo,
+  },
+  {
+    title: 'SVG Chart',
+    id: 'svg-chart',
+    Component: SVGDemo,
+  },
 ];
 
 export default function App() {

example/concurrent-mode/fakeApi.js

@@ -0,0 +1,149 @@
+export function fetchProfileData(userId) {
+  const userPromise = fetchUser(userId);
+  const postsPromise = fetchPosts(userId);
+  return {
+    userId,
+    user: wrapPromise(userPromise),
+    posts: wrapPromise(postsPromise),
+  };
+}
+
+// Suspense integrations like Relay implement
+// a contract like this to integrate with React.
+// Real implementations can be significantly more complex.
+// Don't copy-paste this into your project!
+function wrapPromise(promise) {
+  let status = 'pending';
+  let result;
+  const suspender = promise.then(
+    (r) => {
+      status = 'success';
+      result = r;
+    },
+    (e) => {
+      status = 'error';
+      result = e;
+    },
+  );
+  return {
+    read() {
+      if (status === 'pending') {
+        throw suspender;
+      } else if (status === 'error') {
+        throw result;
+      } else if (status === 'success') {
+        return result;
+      }
+    },
+  };
+}
+
+export function fetchUser(userId) {
+  console.log('fetch user ' + userId + '...');
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      console.log('fetched user ' + userId);
+      switch (userId) {
+        case 0:
+          resolve({
+            name: 'Ringo Starr',
+          });
+          break;
+        case 1:
+          resolve({
+            name: 'George Harrison',
+          });
+          break;
+        case 2:
+          resolve({
+            name: 'John Lennon',
+          });
+          break;
+        case 3:
+          resolve({
+            name: 'Paul McCartney',
+          });
+          break;
+        default:
+          throw Error('Unknown user.');
+      }
+    }, 2000 * Math.random());
+  });
+}
+
+export function fetchPosts(userId) {
+  console.log('fetch posts for ' + userId + '...');
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      console.log('fetched posts for ' + userId);
+      switch (userId) {
+        case 0:
+          resolve([
+            {
+              id: 0,
+              text: 'I get by with a little help from my friends',
+            },
+            {
+              id: 1,
+              text: "I'd like to be under the sea in an octupus's garden",
+            },
+            {
+              id: 2,
+              text: 'You got that sand all over your feet',
+            },
+          ]);
+          break;
+        case 1:
+          resolve([
+            {
+              id: 0,
+              text: 'Turn off your mind, relax, and float downstream',
+            },
+            {
+              id: 1,
+              text: 'All things must pass',
+            },
+            {
+              id: 2,
+              text: "I look at the world and I notice it's turning",
+            },
+          ]);
+          break;
+        case 2:
+          resolve([
+            {
+              id: 0,
+              text: 'Living is easy with eyes closed',
+            },
+            {
+              id: 1,
+              text: "Nothing's gonna change my world",
+            },
+            {
+              id: 2,
+              text: 'I am the walrus',
+            },
+          ]);
+          break;
+        case 3:
+          resolve([
+            {
+              id: 0,
+              text: 'Woke up, fell out of bed',
+            },
+            {
+              id: 1,
+              text: 'Here, there, and everywhere',
+            },
+            {
+              id: 2,
+              text: 'Two of us sending postcards, writing letters',
+            },
+          ]);
+          break;
+        default:
+          throw Error('Unknown user.');
+      }
+    }, 2000 * Math.random());
+  });
+}

example/concurrent-mode/index.js

@@ -0,0 +1,76 @@
+/**
+ * Forked from: https://codesandbox.io/s/jovial-lalande-26yep?file=/src/index.js:0-1646
+ */
+import Brahmos, { useState, useTransition, Suspense } from '../../src';
+
+import { fetchProfileData } from './fakeApi';
+
+function getNextId(id) {
+  return id === 3 ? 0 : id + 1;
+}
+
+const initialResource = fetchProfileData(0);
+
+function App() {
+  const [resource, setResource] = useState(initialResource);
+  const [startTransition, isPending] = useTransition({
+    timeoutMs: 3000,
+  });
+  return (
+    <>
+      <button
+        disabled={isPending}
+        onClick={() => {
+          startTransition(() => {
+            const nextUserId = getNextId(resource.userId);
+            setResource(fetchProfileData(nextUserId));
+          });
+        }}
+      >
+        Next
+      </button>
+      {isPending ? ' Loading...' : null}
+      <ProfilePage resource={resource} />
+      <p className="attribute">
+        This demo is forked from concurrent mode demo of React:
+        <br />
+        <strong>Source: </strong>
+        <a
+          href="https://codesandbox.io/s/jovial-lalande-26yep?file=/src/index.js:0-1646"
+          target="_blank"
+        >
+          https://codesandbox.io/s/jovial-lalande-26yep?file=/src/index.js:0-1646
+        </a>
+      </p>
+    </>
+  );
+}
+
+function ProfilePage({ resource }) {
+  return (
+    <Suspense fallback={<h1>Loading profile...</h1>}>
+      <ProfileDetails resource={resource} />
+      <Suspense fallback={<h1>Loading posts...</h1>}>
+        <ProfileTimeline resource={resource} />
+      </Suspense>
+    </Suspense>
+  );
+}
+
+function ProfileDetails({ resource }) {
+  const user = resource.user.read();
+  return <h1>{user.name}</h1>;
+}
+
+function ProfileTimeline({ resource }) {
+  const posts = resource.posts.read();
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>{post.text}</li>
+      ))}
+    </ul>
+  );
+}
+
+export default App;

example/sierpinski-triangle/SierpinskiTriangle.js → example/sierpinski-triangle/index.js

@@ -1,6 +1,4 @@
-import Brahmos, { Component, unstable_deferredUpdates } from '../../src';
-import { withUpdateSource } from '../../src/updateMetaUtils';
-import { UPDATE_SOURCE_EVENT } from '../../src/configs';
+import Brahmos, { Component, unstable_deferredUpdates, unstable_syncUpdates } from '../../src';
 
 /**
  * Source: https://github.com/facebook/react/blob/master/fixtures/fiber-triangle/index.html
@@ -155,7 +153,7 @@ class SierpinskiWrapper extends Component {
       });
     } else {
       // Update is not time-sliced. Causes demo to stutter.
-      this.setState((state) => ({ seconds: (state.seconds % 10) + 1 }));
+      this.setState({ seconds: (this.state.seconds % 10) + 1 });
     }
   }
 
@@ -187,7 +185,7 @@ class SierpinskiWrapper extends Component {
         </div>
         <div style={{ ...containerStyle, transform }}>
           <div className="dot-container">
-            <SierpinskiTriangle x={0} y={0} s={1000}>
+            <SierpinskiTriangle x={0} y={0} s={800}>
               {seconds}
             </SierpinskiTriangle>
           </div>
@@ -212,7 +210,7 @@ export default class DemoApp extends Component {
 
   updateElapsed() {
     requestAnimationFrame(() => {
-      withUpdateSource(UPDATE_SOURCE_EVENT, () => {
+      unstable_syncUpdates(() => {
         this.setState({
           elapsed: Date.now() - this.start,
         });