Revise component lifecycle

Author: FelixHenninger

packages/library/src/base/component.ts

@@ -351,7 +351,17 @@ export class Component {
   private async _reset() {
     this.internals.iterator?.reset()
     await this.#emitter.trigger(EventName.reset)
-    this.status = Status.initialized
+
+    // Reset the component status if it was previously shown (and prepare if
+    // necessary) -- if it is currently being shown, it will be torn down
+    // via the flip logic; if it hasn't been shown yet, it will already be ready.
+    if (this.status >= Status.done) {
+      this.status = Status.initialized
+
+      if (!this.options.tardy) {
+        await this.prepare(false)
+      }
+    }
   }
 
   async reset() {

packages/library/src/base/controller.ts

@@ -1,5 +1,5 @@
 import { FlipIterable, FlipIterator } from './util/iterators/flipIterable'
-import { Component } from './component'
+import { Component, Status } from './component'
 import { Lock } from './util/lock'
 import { Emitter } from './util/emitter'
 
@@ -89,7 +89,10 @@ export class Controller<C extends Component = Component> extends Emitter {
 
     // Flip iterator go brrr
     while (!done) {
-      const output = await this.iterator.next({flipData, context: this.context})
+      const output = await this.iterator.next({
+        flipData,
+        context: this.context,
+      })
       const lockPromise = this.lock.acquire()
       done = output.done ?? true
       this.context = output.value.context
@@ -180,11 +183,15 @@ export class Controller<C extends Component = Component> extends Emitter {
 
         // Having torn down the larger part of the current component stack,
         // issue a reset to the remaining part.
+        const last_c = last(this.currentStack)
         //@ts-ignore
-        await last(this.currentStack)?._reset?.()
+        await last_c?._reset?.()
 
         // Don't re-mount the root component
-        if (this.currentStack.length > 1) {
+        if (
+          this.currentStack.length > 1 &&
+          (last_c?.status ?? Status.running) < Status.running
+        ) {
           //@ts-ignore
           this.iterator?.restartLeaf()
         }

packages/library/src/base/util/iterators/flipIterable.ts

@@ -117,9 +117,9 @@ export class FlipIterable {
           // the current and future stacks
           ;({ incoming, outgoing } = resolveFlip(currentStack, nextStack))
 
-          if (restartLeaf && currentStack.length > 0) {
-            //@ts-ignore
-            incoming.unshift(currentStack.pop())
+          const currentLeaf = last(currentStack)
+          if (restartLeaf && currentLeaf!.status < Status.running) {
+            currentLeaf!.status = Status.running
             restartLeaf = false
           }
 
@@ -181,9 +181,9 @@ export class FlipIterable {
               this.showFrameRequest = undefined
             })
             // Treat locks independently so they aren't cancelled
-            window.requestAnimationFrame(t => {
+            //window.requestAnimationFrame(t => {
               cancelled.map(c => c.lock?.({ timestamp: t }))
-            })
+            //})
             this.renderFrameRequest = undefined
           },
         )