feat(#773): use @stencil/store instead of rxjs

CHANGELOG.md

@@ -1,3 +1,11 @@
+<a name="1.5.0"></a>
+
+# [1.5.0](https://github.com/deckgo/deckdeckgo/compare/v1.4.0...v1.5.0) (In progress)
+
+### Web Components
+
+- remote: v1.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/remote/CHANGELOG.md))
+
 <a name="1.4.0"></a>
 
 # [1.4.0](https://github.com/deckgo/deckdeckgo/compare/v1.3.0...v1.4.0) (2020-06-25)

docs/package.json

@@ -43,8 +43,7 @@
     "@deckdeckgo/social": "^1.0.1",
     "@deckdeckgo/youtube": "^1.1.2",
     "@ionic/core": "^5.2.2",
-    "idb-keyval": "^3.2.0",
-    "rxjs": "^6.5.5"
+    "idb-keyval": "^3.2.0"
   },
   "devDependencies": {
     "@deckdeckgo/types": "^1.1.0",

remote/package.json

@@ -47,7 +47,6 @@
     "date-fns": "^2.14.0",
     "idb-keyval": "^3.2.0",
     "remarkable": "^2.0.1",
-    "rxjs": "^6.5.5",
     "socket.io-client": "^2.3.0",
     "uuid": "^8.2.0"
   },
@@ -56,6 +55,7 @@
     "@stencil/core": "^1.15.0",
     "@stencil/postcss": "^1.0.1",
     "@stencil/sass": "^1.3.2",
+    "@stencil/store": "^1.3.0",
     "@types/socket.io-client": "^1.4.33",
     "@types/w3c-generic-sensor": "^1.0.2",
     "@types/webrtc": "0.0.26",

remote/src/app/app-root.tsx

@@ -1,7 +1,5 @@
 import {Build, Component, h, State} from '@stencil/core';
 
-import {Subscription} from 'rxjs';
-
 import {TimerService} from './services/timer/timer.service';
 import {AccelerometerService} from './services/accelerometer/accelerometer.service';
 import {ThemeService} from './services/theme/theme.service';
@@ -14,11 +12,8 @@ export class AppRoot {
   private timerService: TimerService;
   private accelerometerService: AccelerometerService;
 
-  private themeSubscription: Subscription;
   private themeService: ThemeService;
 
-  private domBodyClassList: DOMTokenList = document.body.classList;
-
   @State()
   private loading: boolean = true;
 
@@ -29,10 +24,6 @@ export class AppRoot {
   }
 
   async componentWillLoad() {
-    this.themeSubscription = this.themeService.watch().subscribe((dark: boolean) => {
-      this.updateDarkModePreferences(dark);
-    });
-
     await this.themeService.initDarkModePreference();
   }
 
@@ -46,16 +37,8 @@ export class AppRoot {
     }
   }
 
-  componentDidUnload() {
-    this.timerService.destroy();
-
-    if (this.themeSubscription) {
-      this.themeSubscription.unsubscribe();
-    }
-  }
-
-  private updateDarkModePreferences(dark: boolean) {
-    dark ? this.domBodyClassList.add('dark') : this.domBodyClassList.remove('dark');
+  async componentDidUnload() {
+    await this.timerService.destroy();
   }
 
   render() {

remote/src/app/components/app-header/app-header.tsx

@@ -1,40 +1,16 @@
-import {Component, h, State} from '@stencil/core';
+import {Component, h} from '@stencil/core';
 
-import {Subscription} from 'rxjs';
-
-import {ThemeService} from '../../services/theme/theme.service';
+import themeStore from '../../stores/theme.store';
 
 @Component({
   tag: 'app-header',
-  styleUrl: 'app-header.scss'
+  styleUrl: 'app-header.scss',
 })
 export class AppHeader {
-  private themeSubscription: Subscription;
-  private themeService: ThemeService;
-
-  @State()
-  private darkTheme: boolean;
-
-  constructor() {
-    this.themeService = ThemeService.getInstance();
-  }
-
-  async componentWillLoad() {
-    this.themeSubscription = this.themeService.watch().subscribe((dark: boolean) => {
-      this.darkTheme = dark;
-    });
-  }
-
-  componentWillUnload() {
-    if (this.themeSubscription) {
-      this.themeSubscription.unsubscribe();
-    }
-  }
-
   render() {
     return (
       <ion-header>
-        <ion-toolbar color={this.darkTheme ? 'dark' : 'primary'}>
+        <ion-toolbar color={themeStore.state.darkTheme ? 'dark' : 'primary'}>
           <slot name="start">
             <ion-buttons slot="start">
               <ion-menu-toggle>

remote/src/app/components/app-notes/app-notes.tsx

@@ -1,32 +1,24 @@
 import {Component, h, Listen, State} from '@stencil/core';
 
-import {Subscription} from 'rxjs';
+import notesStores from '../../stores/notes.store';
 
 import {Remarkable} from 'remarkable';
 
-import {NotesService} from '../../services/notes/notes.service';
-
 @Component({
   tag: 'app-notes',
-  styleUrl: 'app-notes.scss'
+  styleUrl: 'app-notes.scss',
 })
 export class AppNotes {
-  private notesService: NotesService;
-
-  private subscription: Subscription;
+  private destroyListener;
 
   @State()
   private portrait: boolean = true;
 
   @State()
   private notes: string;
 
-  constructor() {
-    this.notesService = NotesService.getInstance();
-  }
-
   componentWillLoad() {
-    this.subscription = this.notesService.watch().subscribe((element: HTMLElement) => {
+    notesStores.onChange('currentSlide', (element: HTMLElement) => {
       let notes: string = undefined;
 
       if (document && element) {
@@ -36,7 +28,7 @@ export class AppNotes {
           const md: Remarkable = new Remarkable({
             html: true,
             xhtmlOut: true,
-            breaks: true
+            breaks: true,
           });
 
           const codeRule = (inline: boolean) => (tokens, idx, _options, _env) => {
@@ -63,8 +55,8 @@ export class AppNotes {
   }
 
   componentDidUnload() {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
+    if (this.destroyListener) {
+      this.destroyListener();
     }
   }
 

remote/src/app/components/app-stopwatch-time/app-stopwatch-time.tsx

@@ -1,84 +1,24 @@
-import {Component, State, h} from '@stencil/core';
+import {Component, h} from '@stencil/core';
 
-import {BehaviorSubject, Subscription} from 'rxjs';
-
-import {addMilliseconds, formatDistanceStrict} from 'date-fns';
-
-import {TimerInterval, TimerService} from '../../services/timer/timer.service';
+import timerStore from '../../stores/timer.store';
 
 @Component({
   tag: 'app-stopwatch-time',
-  styleUrl: 'app-stopwatch-time.scss'
+  styleUrl: 'app-stopwatch-time.scss',
 })
 export class AppStopwatchTime {
-  private watcherSubscription: Subscription;
-  private timerSubscription: Subscription;
-
-  @State()
-  private remainingText: string;
-
-  @State()
-  private remainingTime: number = 0;
-
-  private timerService: TimerService;
-
-  constructor() {
-    this.timerService = TimerService.getInstance();
-  }
-
-  async componentWillLoad() {
-    this.watcherSubscription = this.timerService.watch().subscribe((timer: BehaviorSubject<TimerInterval>) => {
-      if (timer) {
-        this.timerSubscription = timer.subscribe(
-          (interval: TimerInterval) => {
-            if (interval) {
-              this.remainingTime = interval.timerRemaining;
-
-              const end: Date = addMilliseconds(new Date(), this.remainingTime);
-              this.remainingText = formatDistanceStrict(end, new Date());
-            } else {
-              this.remainingTime = 0;
-              this.remainingText = formatDistanceStrict(new Date(), new Date());
-            }
-          },
-          (_err) => {
-            // Do nothing
-          },
-          async () => {
-            this.remainingTime = 0;
-            this.remainingText = formatDistanceStrict(new Date(), new Date());
-
-            if (this.timerSubscription) {
-              this.timerSubscription.unsubscribe();
-            }
-          }
-        );
-      }
-    });
-  }
-
-  async componentDidUnload() {
-    if (this.timerSubscription) {
-      this.timerSubscription.unsubscribe();
-    }
-
-    if (this.watcherSubscription) {
-      this.watcherSubscription.unsubscribe();
-    }
-  }
-
   render() {
     let color: string = 'primary';
-    if (this.remainingTime >= 30000 && this.remainingTime < 60000) {
+    if (timerStore.state.remainingTime >= 30000 && timerStore.state.remainingTime < 60000) {
       color = 'secondary';
-    } else if (this.remainingTime < 30000 && this.remainingTime >= 0) {
+    } else if (timerStore.state.remainingTime < 30000 && timerStore.state.remainingTime >= 0) {
       color = 'tertiary';
     }
 
-    if (this.remainingText) {
+    if (timerStore.state.remainingText) {
       return (
         <ion-chip color="danger" style={{background: `var(--ion-color-${color})`, color: 'var(--ion-color-light)'}}>
-          <ion-label>{this.remainingText}</ion-label>
+          <ion-label>{timerStore.state.remainingText}</ion-label>
         </ion-chip>
       );
     } else {