diff --git a/demo/index.html b/demo/index.html index 5a2951c85..36c526d54 100644 --- a/demo/index.html +++ b/demo/index.html @@ -16,7 +16,8 @@
  • Logger
  • Fetch
  • Signal
    • -
  • Signal simple
    • +
  • Signal Simple
    • +
  • Context Signal
  • Signal multithread
  • Router
  • Font
    • diff --git a/demo/signal2/context/index.html b/demo/signal2/context/index.html new file mode 100644 index 000000000..1b98cbfd7 --- /dev/null +++ b/demo/signal2/context/index.html @@ -0,0 +1,24 @@ + + + + + + @alwatr/signal2/context + + + + + +

    Check the console

    + + + + + + + + diff --git a/demo/signal2/context/index.ts b/demo/signal2/context/index.ts new file mode 100644 index 000000000..08f647146 --- /dev/null +++ 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'); +}); diff --git a/demo/signal2/simple/index.html b/demo/signal2/simple/index.html index 4f9a0ba7d..fe9e1d7af 100644 --- a/demo/signal2/simple/index.html +++ b/demo/signal2/simple/index.html @@ -14,7 +14,9 @@

    Check the console

    - + + + diff --git a/demo/signal2/simple/index.ts b/demo/signal2/simple/index.ts index f2cbe7137..5c0a2b585 100644 --- a/demo/signal2/simple/index.ts +++ b/demo/signal2/simple/index.ts @@ -1,17 +1,32 @@ import {AlwatrEventSignal, AlwatrSimpleSignal} from '@alwatr/signal2'; -const clickEvent = new AlwatrSimpleSignal('myClick'); +// button 1 +const clickEvent = new AlwatrSimpleSignal('button-1-click-event'); +document.getElementById('myButton1')?.addEventListener('click', () => clickEvent.dispatch()); +function clickEventSubscribeHandler(): void { + console.log('subscribe: a new signal received'); +} +clickEvent.subscribe(clickEventSubscribeHandler); -document.getElementById('myButton')?.addEventListener('click', () => clickEvent.dispatch()); -clickEvent.subscribe(() => { - console.log('subscribe: a new signal received '); -}); +// button 2 +const clickEvent2 = new AlwatrEventSignal('button-2-click-event'); +document.getElementById('myButton2')?.addEventListener('click', () => clickEvent2.dispatch({clickedBy: 'BTN_2'})); +function clickEvent2SubscribeHandler(detail: unknown): void { + console.log('subscribe: a new signal received ', detail); +} +clickEvent2.subscribe(clickEvent2SubscribeHandler); -const clickEvent2 = new AlwatrEventSignal('myClick2'); -document.getElementById('myButton2')?.addEventListener('click', () => clickEvent2.dispatch({clickedBy: 'MHF'})); +// button 3 +document.getElementById('myButton3')?.addEventListener('click', () => { + clickEvent.subscribe(clickEventSubscribeHandler); + clickEvent2.subscribe(clickEvent2SubscribeHandler); +}); -clickEvent2.subscribe((detail) => { - console.log('subscribe: a new signal received ', detail); + +// button 4 +document.getElementById('myButton4')?.addEventListener('click', () => { + clickEvent.unsubscribe(clickEventSubscribeHandler); + clickEvent2.unsubscribe(clickEvent2SubscribeHandler); });