Mobx reactive property working with lit

Author: WernerWaage

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-    "editor.formatOnSave": true
+    "editor.formatOnSave": true,
+    "appService.defaultWebAppToDeploy": "/subscriptions/53e3928f-5a21-47c1-80e8-4021fac7cae7/microsoft.web/sites/subscriptions/53e3928f-5a21-47c1-80e8-4021fac7cae7/resourceGroups/testing-werner/providers/Microsoft.Web/sites/typescripttemplate",
+    "appService.deploySubpath": "build"
 }

public/index.html

@@ -8,10 +8,11 @@
   <meta name="description" content="Web site created using create-snowpack-app" />
   <link rel="stylesheet" type="text/css" href="/index.css" />
   <link rel="stylesheet" type="text/css" href="/style.css" />
-  <script type="module" src="/dist/index.js"></script>
 
+  <script type="module" src="/dist/index.js"></script>
   <script type="module" src="/dist/components/name-tag.js"></script>
   <script type="module" src="/dist/components/observable-timer.js"></script>
+  <!-- <script type="module" src="/dist/components/my-element-component.js"></script> -->
 
   <title>Werners typescript template</title>
 </head>
@@ -23,6 +24,9 @@
   <header>
     <div class="container">
       <h1 id="welcomeText">Welcome to the todo list</h1>
+
+      <b>Import tasks</b>-<b>Export tasks</b>-<b>Clear tasks</b>
+
     </div>
   </header>
 
@@ -34,6 +38,11 @@ <h1 id="welcomeText">Welcome to the todo list</h1>
     <observable-timer></observable-timer>
   </div>
 
+  <!-- <div class="container">
+    <hr>
+    <my-element2></my-element2>
+  </div> -->
+
   <footer>
     <div class="container">
       <p>Git repository: <a href="https://github.com/WernerWaage/typescript-todo">typescript-todo</a></p>

src/components/countdown.component.ts

@@ -0,0 +1,41 @@
+import { html, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { observable, action } from 'mobx';
+import { MobxLitElement } from '@adobe/lit-mobx';
+
+// create a mobx observable
+class Counter {
+    @observable
+    public count = 0;
+
+    @action
+    public increment() {
+        this.count++;
+    }
+}
+
+// create instance that can be shared across components
+const counter = new Counter();
+
+// create a new custom element, and use the base MobxLitElement class
+// alternatively you can use the MobxReactionUpdate mixin, e.g. `class MyElement extends MobxReactionUpdate(LitElement)`
+@customElement('my-element2')
+export class MyElement extends MobxLitElement {
+    
+    private counter = counter;
+
+    // any observables accessed in the render method will now trigger an update
+    public render(): TemplateResult {
+        return html`
+            Count is ${this.counter.count}
+            <br />
+            <button @click=${this.incrementCount}>Add</button>
+        `;
+    }
+
+    private incrementCount() {
+        console.log("incrementing count " + this.counter.count);
+        this.counter.increment();
+        // this.requestUpdate()
+    }
+}

src/components/list/index.ts

@@ -6,12 +6,26 @@ import {
     observable,
 } from 'mobx'
 export class ObservableTimer {
-    public secondsPassed: number = -1
+    @observable
+    public secondsPassed: number = 0
+
+    @action
+    public increment() {
+        this.secondsPassed++;
+    }
+
+    @action
+    public resetTimer() {
+        this.secondsPassed =0;
+    }
+
     constructor() {
         makeAutoObservable(this, {
             secondsPassed: observable,
             handleSecondsUpdated: action,
-            staticSeconds: computed,
+            minutesPassed: computed,
+            increase: action,
+            resetTimer: action,
         })
 
         let intervalId = setInterval(() => {
@@ -20,26 +34,17 @@ export class ObservableTimer {
     }
 
     // Computed value example
-    public get staticSeconds() {
-        return 5 * this.secondsPassed
+    public get minutesPassed() {
+        return this.secondsPassed / 60;
     }
 
     increase() {
-        console.log('increasing ' + this.secondsPassed)
+        // console.log('increasing ' + this.secondsPassed)
         this.secondsPassed += 1
     }
 
-    reset() {
-        this.secondsPassed = 0
-    }
-
     // Change the seconds from outside the class (eg. not the timer)
     public handleSecondsUpdated(secondsPassed: number) {
-        console.log('Handling change')
         this.secondsPassed = secondsPassed
     }
-}
-
-// const TimerView = observer(({ timer }) => (
-//     <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
-// ))
+}

src/components/my-element-component.ts

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit'
+import { html } from 'lit'
 import {map} from 'lit/directives/map.js';
 import {
     makeObservable,
@@ -10,8 +10,9 @@ import {
 import { MobxLitElement } from '@adobe/lit-mobx'
 import { ObservableTimer } from './observable-timer-base'
 
-export class ObservableTimerView extends LitElement {
+export class ObservableTimerView extends MobxLitElement {
     // Properties
+    @observable
     public secondsPassed = myTimer.secondsPassed
 
     constructor() {
@@ -33,30 +34,21 @@ export class ObservableTimerView extends LitElement {
 
 
     render() {
-        const resetbutton = html`<button
-            @click=${() => this.forceUpdate(myTimer.secondsPassed)}
-        >
-            Test ${myTimer.staticSeconds}
-        </button><br><button @click="${this.getNewVal}">get new value</button>`
+        const resetbutton = html`<button @click=${() => this.forceUpdate(0)} >Reset timer </button>`
         return html`
             <div>
                 This is an observable timer!
-                <p>${this.secondsPassed} seconds</p>
+                <p>${myTimer.secondsPassed} seconds since last refresh</p>
                 <br />${resetbutton}
             </div>
         `
     }
 
 
-        getNewVal(){
-            let newVal = Math.floor(Math.random()*10);
-            this.secondsPassed = newVal;
-        }
-
-
     forceUpdate(newValue: number) {
-        this.secondsPassed = newValue
-        this.requestUpdate()
+        // this.secondsPassed = newValue
+        // this.requestUpdate()
+        myTimer.resetTimer()
         return null
     }
 }

src/components/observable-timer-base.ts

@@ -1,18 +1,18 @@
 import { html, css, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+// This example shows a simple component with an input parameter(name) and css styling that does not bubble up to the parent.
 @customElement('simple-greeting')
 export class SimpleGreeting extends LitElement {
     static styles = css`
         p {
             color: blue;
         }
     `
-
     @property()
     name = 'Somebody'
 
     render() {
         return html`<p>Hello, ${this.name}!</p>`
     }
-}
+}

src/components/observable-timer.ts

@@ -1,3 +1,4 @@
+import { MobxLitElement } from '@adobe/lit-mobx'
 import { LitElement, html, css, PropertyValues } from 'lit'
 import { customElement, state, property, query } from 'lit/decorators.js'
 import type { Task } from 'src/types/task.type'
@@ -17,7 +18,7 @@ export function loadTasks(): Task[] {
 }
 
 @customElement('todo-list')
-export class ToDoList extends LitElement {
+export class ToDoList extends MobxLitElement {
     static styles = css`
         .completed {
             text-decoration-line: line-through;

src/components/simple-greeting/simple-greeting.ts renamed to src/components/simple-greeting.ts

@@ -11,7 +11,7 @@ import { customElement, property } from 'lit/decorators.js'
 import { MobxLitElement } from '@adobe/lit-mobx'
 
 // Lit element components:
-import './components/simple-greeting/simple-greeting'
+import './components/simple-greeting'
 import './components/todo.component'
 import { Timer } from './classes/timer.class'