demo 01

jotaijs · Aug 23, 2024 · 4e7c523 · 4e7c523
1 parent f2aadee
commit 4e7c523
Show file tree

Hide file tree

Showing 10 changed files with 12,111 additions and 28,785 deletions.
diff --git a/examples/01/package-lock.json b/examples/01/package-lock.json
diff --git a/examples/01/package.json → examples/demo-01/package.json b/examples/01/package.json → examples/demo-01/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@types/react": "latest",
     "@types/react-dom": "latest",
-    "jotai-scheduler": "^0.0.1",
+    "jotai-scheduler": "^0.0.4",
     "jotai": "latest",
     "react": "latest",
     "react-dom": "latest",

diff --git a/examples/demo-01/pnpm-lock.yaml b/examples/demo-01/pnpm-lock.yaml
diff --git a/examples/demo-01/public/index.html b/examples/demo-01/public/index.html
@@ -0,0 +1,11 @@
+<html>
+
+<head>
+  <title>jotai-scheduler example</title>
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+
+</html>
diff --git a/examples/demo-01/src/App.css b/examples/demo-01/src/App.css
@@ -0,0 +1,31 @@
+.app {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+
+  .header, .footer, .sidebar, .content {
+    border: 2px solid black;
+    padding: 20px;
+    font-size: 24px;
+    text-align: center;
+  }
+
+
+  .footer {
+    margin-top: auto;
+  }
+
+  .body {
+    display: flex;
+    flex: 1;
+  }
+
+  .sidebar {
+    width: 200px;
+  }
+
+  .content {
+    flex: 1;
+  }
+
diff --git a/examples/demo-01/src/App.tsx b/examples/demo-01/src/App.tsx
@@ -0,0 +1,75 @@
+import { atom } from 'jotai';
+import { useAtomValueWithSchedule, useAtomWithSchedule, ImmediatePriority, LowPriority } from 'jotai-scheduler';
+import { useAtom, useAtomValue } from 'jotai';
+
+import './App.css';
+
+const anAtom = atom(0);
+
+const simulateHeavyRender = () => {
+  const start = performance.now();
+  while (performance.now() - start < 500) {}
+};
+
+const Header = () => {
+  simulateHeavyRender();
+  // const num = useAtomValue(anAtom);
+  console.log('Header Component Render');
+  const num = useAtomValueWithSchedule(anAtom, {
+    priority: LowPriority,
+  });
+  return <div className="header">Header-{num}</div>;
+};
+
+const Footer = () => {
+  simulateHeavyRender();
+  // const num = useAtomValue(anAtom);
+  console.log('Footer Component Render');
+  const num = useAtomValueWithSchedule(anAtom, {
+    priority: LowPriority,
+  });
+  return <div className="footer">Footer-{num}</div>;
+};
+
+const Sidebar = () => {
+  simulateHeavyRender();
+  // const num = useAtomValue(anAtom);
+  console.log('Sidebar Component Render');
+  const num = useAtomValueWithSchedule(anAtom);
+  return <div className="sidebar">Sidebar-{num}</div>;
+};
+
+const Content = () => {
+  simulateHeavyRender();
+  // const [num, setNum] = useAtom(anAtom);
+  console.log('Content Component Render');
+  const [num, setNum] = useAtomWithSchedule(anAtom, {
+    priority: ImmediatePriority,
+  });
+  return (
+    <div className="content">
+      <div>Content-{num}</div>
+      <button
+        onClick={() => {
+          setNum((num) => ++num);
+          console.log('trigger');
+        }}
+      >
+        +1
+      </button>
+    </div>
+  );
+};
+
+export function App() {
+  return (
+    <div className="app">
+      <Header />
+      <div className="body">
+        <Sidebar />
+        <Content />
+      </div>
+      <Footer />
+    </div>
+  );
+}
diff --git a/examples/demo-01/src/index.tsx b/examples/demo-01/src/index.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+const ele = document.getElementById('app');
+if (ele) {
+  createRoot(ele).render(React.createElement(App));
+}
diff --git a/examples/01/tsconfig.json → examples/demo-01/tsconfig.json b/examples/01/tsconfig.json → examples/demo-01/tsconfig.json
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "jotai-scheduler",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "author": "Lincoln",
   "repository": {
     "type": "git",
-    "url": "https://github.com/L-Qun/jotai-scheduler"
+    "url": "https://github.com/jotaijs/jotai-scheduler"
   },
   "source": "./src/index.ts",
   "main": "./dist/index.umd.js",
@@ -21,12 +21,12 @@
   },
   "sideEffects": false,
   "files": [
-    "src",
     "dist"
   ],
   "scripts": {
     "compile": "microbundle build -f modern,umd --globals react=React --no-compress",
     "postcompile": "cp dist/index.modern.mjs dist/index.modern.js && cp dist/index.modern.mjs.map dist/index.modern.js.map",
+    "prepublishOnly": "pnpm run compile && pnpm run postcompile",
     "test": "run-s eslint tsc-test jest",
     "eslint": "eslint --ext .js,.ts,.tsx .",
     "jest": "jest",

diff --git a/src/useAtomValueWithSchedule.ts b/src/useAtomValueWithSchedule.ts
@@ -78,7 +78,7 @@ export function useAtomValueWithSchedule<Value>(
         for (const listener of listeners) {
           addTask({
             subscribe: listener,
-            priority: prioritySubscriptionsMap.get(subscribe)!,
+            priority: prioritySubscriptionsMap.get(listener)!,
           });
         }
         initiateWorkLoop();