package.json

@@ -1,6 +1,6 @@
 {
   "name": "wkit",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "type": "module",
   "description": "A library for building fast, lightweight web components.",
   "main": "dist/index.js",

src/html.js

@@ -48,7 +48,7 @@ const EVENT_PART = 5
 const ELEMENT_PART = 6
 const COMMENT_PART = 7
 
-const templateCache = new WeakMap()
+const TEMPLATE_CACHE = new Map()
 const walker = document.createTreeWalker(document, 129, null, false)
 
 function noop() {}
@@ -436,10 +436,11 @@ class ChildPart {
     }
   }
   #getTemplate(result) {
-    let template = templateCache.get(result.strings)
+    let template = TEMPLATE_CACHE.get(result.strings.join())
+
     if (template === void 0) {
       template = new Template(result, this.options)
-      templateCache.set(result.strings, template)
+      TEMPLATE_CACHE.set(result.strings.join(), template)
     }
     return template
   }
@@ -584,7 +585,7 @@ class AnimPart extends AttributePart {
     super(...args)
   }
 
-  commitValue({ type = 'fade', duration, custom } = {}) {
+  commitValue({ type = 'fade', duration, custom, immediate = false } = {}) {
     let fromto = MODES[type] || MODES.fade
 
     if (custom) {
@@ -593,6 +594,7 @@ class AnimPart extends AttributePart {
     this.element.$animate = function (out = false) {
       return animate.call(this, duration, fromto, out)
     }
+    this.element.$animate.immediate = immediate
   }
 }
 
@@ -700,12 +702,13 @@ export function render(value, container, options = {}) {
   let part = container[WC_PART]
 
   if (part === void 0) {
-    container[WC_PART] = part = new ChildPart(
+    part = new ChildPart(
       container.insertBefore(createMarker(), null),
       null,
       void 0,
       options
     )
+    container[WC_PART] = part
   }
   part._$setValue(value)
 
@@ -719,10 +722,11 @@ export function html(strings, ...values) {
     values
   }
 }
-export function raw(str) {
-  let strings = [str]
-  strings.raw = strings
-  return html(strings)
+
+export function raw(str, values = []) {
+  let strings = values.length ? str.split('%s') : [str]
+  strings.raw = true
+  return html(strings, ...values)
 }
 export function svg(strings, ...values) {
   return {

src/index.js

@@ -62,15 +62,25 @@ export class Component extends HTMLElement {
 
   static parseAnim() {
     if (this.hasOwnProperty('animation')) {
-      let { type = 'fade', duration } = this.animation
+      let {
+        type = 'fade',
+        duration,
+        custom,
+        immediate = false
+      } = this.animation
+      let fromto = MODES[type] || MODES.fade
+      if (custom) {
+        fromto = custom
+      }
       Object.defineProperty(this.prototype, '$animate', {
         value(out) {
           if (this[__mounted__]) {
-            return animate.call(this, duration, MODES[type], out)
+            return animate.call(this, duration, fromto, out)
           }
         },
         enumerable: false
       })
+      this.prototype.$animate.immediate = immediate
       delete this.animation
     }
   }
@@ -98,7 +108,6 @@ export class Component extends HTMLElement {
           k = camelize(k)
         }
         this[__props__].set(k, options)
-        // this.createProperty(k, options)
       }
     }
 
@@ -133,6 +142,7 @@ export class Component extends HTMLElement {
 
     for (let [prop, options] of this.constructor[__props__]) {
       this.createProperty(prop, options)
+      this.$requestUpdate(prop)
     }
 
     this.created()
@@ -200,12 +210,7 @@ export class Component extends HTMLElement {
   #init() {
     // 这里重新赋值一次, 用于清除掉因为 observer 修正产生的变化
     this[__changed_props__] = new Map()
-
-    // 若无定义props时, 手动执行一次渲染
-    if (this[__pending__] === false) {
-      this[__pending__] = true
-      nextTick(_ => this.#confirmUpdate())
-    }
+    this.$requestUpdate()
   }
 
   #getPropOptions(name) {
@@ -336,6 +341,12 @@ export class Component extends HTMLElement {
     // 初始化时不触发updated回调
     if (this[__mounted__] === false) {
       this[__mounted__] = true
+      if (this.$animate?.immediate) {
+        this.$animate()
+      }
+      if (this.__keep_alive__) {
+        this.activated()
+      }
       this.mounted()
     } else {
       this.updated(props)
@@ -358,6 +369,8 @@ export class Component extends HTMLElement {
   // 几个生命周期回调
   created() {}
   mounted() {}
+  activated() {}
+  deactivated() {}
   unmounted() {}
   updated() {}
   render() {