diff --git a/package.json b/package.json index 62215ee..d4c017e 100644 --- a/package.json +++ b/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", diff --git a/src/html.js b/src/html.js index ee217a9..1842aa3 100644 --- a/src/html.js +++ b/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 { diff --git a/src/index.js b/src/index.js index 1a5b9e8..fa1562e 100644 --- a/src/index.js +++ b/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() {