From 1cddfb67310888cf5c1d9c1784d8c039b5036a4f Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Mon, 25 Sep 2023 14:15:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E5=B0=8F=E5=B9=85=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84;keep-alive=E6=9B=B4=E5=90=88=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                    |  2 +-
 src/router/router-components.js | 94 ++++++++++++++++++---------------
 src/router/router-engine.js     |  1 +
 3 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/package.json b/package.json
index 40cbaba..4772a18 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wkitd",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "type": "module",
   "main": "dist/index.js",
   "files": [
diff --git a/src/router/router-components.js b/src/router/router-components.js
index 24cef99..db7b8d5 100644
--- a/src/router/router-components.js
+++ b/src/router/router-components.js
@@ -5,22 +5,7 @@ import { __ROUTER_VIEW__ } from '../constants.js'
 
 class RouterView extends Component {
   static props = {
-    transition: false,
-    current: {
-      type: String,
-      default: '',
-      attribute: false,
-      observer(v, old) {
-        if (this.keepAlive && v) {
-          if (old && this.$refs[old]) {
-            this.$refs[old].deactivated()
-          }
-          this.$refs[v]?.$requestUpdate()
-          this.$refs[v]?.$animate()
-          this.$refs[v]?.activated()
-        }
-      }
-    }
+    transition: false
   }
 
   static styles = css`
@@ -29,6 +14,43 @@ class RouterView extends Component {
     }
   `
 
+  get current() {
+    return this.#current
+  }
+
+  set current(v) {
+    let old = this.#current
+    this.#current = v
+    if (this.keepAlive) {
+      if (old) {
+        if (this.$refs[old]) {
+          this.$refs[old].deactivated()
+          this.$refs[old].remove()
+        } else {
+          this.$requestUpdate()
+        }
+      } else {
+        this.$requestUpdate()
+      }
+      if (v) {
+        if (this.$refs[v]) {
+          this.root.appendChild(this.$refs[v])
+          this.$refs[v].$requestUpdate()
+          if (this.transition) {
+            this.$refs[v].$animate()
+          }
+          this.$refs[v].activated()
+        } else {
+          this.$requestUpdate()
+        }
+      }
+    } else {
+      this.$requestUpdate()
+    }
+  }
+
+  #current = ''
+
   #views = []
 
   created() {
@@ -47,35 +69,21 @@ class RouterView extends Component {
         { transform: 'translateX(0)', opacity: 1 }
       ]
     }
-    if (this.keepAlive) {
-      let template = this.#views.map(it =>
-        this.transition
-          ? [
-              `<${it} ref="${it}" keep-alive #animation="%s" style="%s"></${it}>`,
-              [
-                { ...option, immediate: this.current === it },
-                this.current === it ? '' : 'display:none'
-              ]
-            ]
-          : [
-              `<${it} ref="${it}" keep-alive style=%s></${it}>`,
-              [this.current === it ? '' : 'display:none']
-            ]
-      )
 
-      return raw(
-        template.map(it => it[0]).join(''),
-        template.map(it => it[1]).flat()
-      )
-    } else {
-      if (this.current) {
-        if (this.transition) {
-          return raw(`<${this.current} #animation="%s"></${this.current}>`, [
-            option
-          ])
-        }
-        return raw(`<${this.current}></${this.current}>`)
+    if (this.current) {
+      if (this.transition) {
+        return raw(
+          `<${this.current} ref="${this.current}" ${
+            this.keepAlive ? 'keep-alive' : ''
+          } #animation="%s"></${this.current}>`,
+          [option]
+        )
       }
+      return raw(
+        `<${this.current} ref="${this.current}" ${
+          this.keepAlive ? 'keep-alive' : ''
+        }></${this.current}>`
+      )
     }
   }
 }
diff --git a/src/router/router-engine.js b/src/router/router-engine.js
index 74e56d3..77e2022 100644
--- a/src/router/router-engine.js
+++ b/src/router/router-engine.js
@@ -138,6 +138,7 @@ class Router {
       let route = this.#tables.get('!')
       $view.current = route.name
       this.#route = { path, name: route.name, params: {}, query: {} }
+      this.#exec(this.#route)
     }
   }