修复动画配置, 增加立刻执行设定; 修复props声明

src/html.js

@@ -584,7 +584,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 +593,7 @@ class AnimPart extends AttributePart {
     this.element.$animate = function (out = false) {
       return animate.call(this, duration, fromto, out)
     }
+    this.element.$animate.immediate = immediate
   }
 }
 
@@ -719,10 +720,10 @@ export function html(strings, ...values) {
     values
   }
 }
-export function raw(str) {
+export function raw(str, ...args) {
-  let strings = [str]
+  let strings = args.length ? str.split('%s') : [str]
   strings.raw = strings
-  return html(strings)
+  return html(strings, ...args)
 }
 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()
-
+    this.$requestUpdate()
-    // 若无定义props时, 手动执行一次渲染
-    if (this[__pending__] === false) {
-      this[__pending__] = true
-      nextTick(_ => this.#confirmUpdate())
-    }
   }
 
   #getPropOptions(name) {
@@ -336,6 +341,9 @@ export class Component extends HTMLElement {
     // 初始化时不触发updated回调
     if (this[__mounted__] === false) {
       this[__mounted__] = true
+      if (this.$animate?.immediate) {
+        this.$animate()
+      }
       this.mounted()
     } else {
       this.updated(props)