feat(demo/signal2): add context example

Alwatr · Jun 5, 2023 · 36dd28d · 36dd28d
1 parent 9312b65
commit 36dd28d
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/demo/index.html b/demo/index.html
@@ -16,7 +16,8 @@
       <li><a href="./logger/">Logger</a></li>
       <li><a href="./fetch/">Fetch</a></li>
       <li><a href="./signal/">Signal</a></li>
-      <li><a href="./signal2/simple/">Signal simple</a></li>
+      <li><a href="./signal2/simple/">Signal Simple</a></li>
+      <li><a href="./signal2/context/">Context Signal</a></li>
       <li><a href="./signal2/multithread-context/">Signal multithread</a></li>
       <li><a href="./router/">Router</a></li>
       <li><a href="./font/">Font</a></li>

diff --git a/demo/signal2/context/index.html b/demo/signal2/context/index.html
@@ -0,0 +1,24 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@alwatr/signal2/context</title>
+    <script type="module" src="./index.js"></script>
+    <style>
+      html {
+        color-scheme: light dark;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h3>Check the console</h3>
+    <button id="myButton1">Set Value</button>
+    <button id="myButton2">Subscribe</button>
+    <button id="myButton3">Unsubscribe</button>
+    <button id="myButton4">Expire</button>
+    <button id="myButton5">Get Value</button>
+    <button id="myButton6">Wait Until Change</button>
+  </body>
+</html>
diff --git a/demo/signal2/context/index.ts b/demo/signal2/context/index.ts
@@ -0,0 +1,33 @@
+import {AlwatrContextSignal} from '@alwatr/signal2';
+
+const context = new AlwatrContextSignal<{name: string; age: number}>('user-info-context');
+
+function subscribeHandler(context: {name: string; age: number}): void {
+  console.log('subscribe: a new context signal received', context);
+}
+context.subscribe(subscribeHandler);
+
+document.getElementById('myButton1')?.addEventListener('click', () => {
+  context.setValue({name: 'Ali', age: 20});
+});
+
+document.getElementById('myButton2')?.addEventListener('click', () => {
+  context.subscribe(subscribeHandler);
+});
+
+document.getElementById('myButton3')?.addEventListener('click', () => {
+  context.unsubscribe(subscribeHandler);
+});
+
+document.getElementById('myButton4')?.addEventListener('click', () => {
+  context.expire();
+});
+
+document.getElementById('myButton5')?.addEventListener('click', () => {
+  console.log('value:', context.getValue());
+});
+
+document.getElementById('myButton6')?.addEventListener('click', async () => {
+  await context.untilChange();
+  console.log('until change reolved');
+});