From 7f2e6543edb9a41025bc0d7f6996669ad8ba13c8 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Thu, 19 Aug 2021 11:14:50 +0200
Subject: [PATCH] Add typings for class component state attribute (#2995)

* Add `state` typings to class components
---
 js/src/common/Component.ts | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/js/src/common/Component.ts b/js/src/common/Component.ts
index 4b5a59947..09b91b019 100644
--- a/js/src/common/Component.ts
+++ b/js/src/common/Component.ts
@@ -29,7 +29,7 @@ export interface ComponentAttrs extends Mithril.Attributes {}
  *
  * @see https://mithril.js.org/components.html
  */
-export default abstract class Component<T extends ComponentAttrs = ComponentAttrs> implements Mithril.ClassComponent<T> {
+export default abstract class Component<Attrs extends ComponentAttrs = ComponentAttrs, State = undefined> implements Mithril.ClassComponent<Attrs> {
   /**
    * The root DOM element for the component.
    */
@@ -40,48 +40,61 @@ export default abstract class Component<T extends ComponentAttrs = ComponentAttr
    *
    * @see https://mithril.js.org/components.html#passing-data-to-components
    */
-  protected attrs!: T;
+  protected attrs!: Attrs;
+
+  /**
+   * Class component state that is persisted between redraws.
+   *
+   * Updating this will **not** automatically trigger a redraw, unlike
+   * other frameworks.
+   *
+   * This is different to Vnode state, which is always an instance of your
+   * class component.
+   *
+   * This is `undefined` by default.
+   */
+  protected state!: State;
 
   /**
    * @inheritdoc
    */
-  abstract view(vnode: Mithril.Vnode<T, this>): Mithril.Children;
+  abstract view(vnode: Mithril.Vnode<Attrs, this>): Mithril.Children;
 
   /**
    * @inheritdoc
    */
-  oninit(vnode: Mithril.Vnode<T, this>) {
+  oninit(vnode: Mithril.Vnode<Attrs, this>) {
     this.setAttrs(vnode.attrs);
   }
 
   /**
    * @inheritdoc
    */
-  oncreate(vnode: Mithril.VnodeDOM<T, this>) {
+  oncreate(vnode: Mithril.VnodeDOM<Attrs, this>) {
     this.element = vnode.dom;
   }
 
   /**
    * @inheritdoc
    */
-  onbeforeupdate(vnode: Mithril.VnodeDOM<T, this>) {
+  onbeforeupdate(vnode: Mithril.VnodeDOM<Attrs, this>) {
     this.setAttrs(vnode.attrs);
   }
 
   /**
    * @inheritdoc
    */
-  onupdate(vnode: Mithril.VnodeDOM<T, this>) {}
+  onupdate(vnode: Mithril.VnodeDOM<Attrs, this>) {}
 
   /**
    * @inheritdoc
    */
-  onbeforeremove(vnode: Mithril.VnodeDOM<T, this>) {}
+  onbeforeremove(vnode: Mithril.VnodeDOM<Attrs, this>) {}
 
   /**
    * @inheritdoc
    */
-  onremove(vnode: Mithril.VnodeDOM<T, this>) {}
+  onremove(vnode: Mithril.VnodeDOM<Attrs, this>) {}
 
   /**
    * Returns a jQuery object for this component's element. If you pass in a
@@ -118,7 +131,7 @@ export default abstract class Component<T extends ComponentAttrs = ComponentAttr
    * Saves a reference to the vnode attrs after running them through initAttrs,
    * and checking for common issues.
    */
-  private setAttrs(attrs: T = {} as T): void {
+  private setAttrs(attrs: Attrs = {} as Attrs): void {
     (this.constructor as typeof Component).initAttrs(attrs);
 
     if (attrs) {