From 289c7142efb887d2ab3fedb4602e1291ec1eca6a Mon Sep 17 00:00:00 2001 From: yutent Date: Fri, 11 Aug 2023 14:16:13 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8A=A8=E7=94=BB?= =?UTF-8?q?=E9=85=8D=E7=BD=AE,=20=E5=A2=9E=E5=8A=A0=E7=AB=8B=E5=88=BB?= =?UTF-8?q?=E6=89=A7=E8=A1=8C=E8=AE=BE=E5=AE=9A;=20=E4=BF=AE=E5=A4=8Dprops?= =?UTF-8?q?=E5=A3=B0=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/html.js | 9 +++++---- src/index.js | 26 +++++++++++++++++--------- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/html.js b/src/html.js index ee217a9..533db1a 100644 --- a/src/html.js +++ b/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) { - let strings = [str] +export function raw(str, ...args) { + let strings = args.length ? str.split('%s') : [str] strings.raw = strings - return html(strings) + return html(strings, ...args) } export function svg(strings, ...values) { return { diff --git a/src/index.js b/src/index.js index 1a5b9e8..a3f373f 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,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) From 5748e6a760881ac4cb1374392959c7ab13d8bd3c Mon Sep 17 00:00:00 2001 From: yutent Date: Fri, 11 Aug 2023 17:42:27 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A8=A1=E6=9D=BF?= =?UTF-8?q?=E7=BC=93=E5=AD=98=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/html.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/html.js b/src/html.js index 533db1a..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 } @@ -701,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) @@ -720,10 +722,11 @@ export function html(strings, ...values) { values } } -export function raw(str, ...args) { - let strings = args.length ? str.split('%s') : [str] - strings.raw = strings - return html(strings, ...args) + +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 { From 6f3ea0f0860a5f3aea0816d650bc1ae7767596f0 Mon Sep 17 00:00:00 2001 From: yutent Date: Fri, 11 Aug 2023 19:08:31 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E5=A2=9E=E5=8A=A0keepalive=E6=94=AF?= =?UTF-8?q?=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/index.js b/src/index.js index a3f373f..fa1562e 100644 --- a/src/index.js +++ b/src/index.js @@ -344,6 +344,9 @@ export class Component extends HTMLElement { if (this.$animate?.immediate) { this.$animate() } + if (this.__keep_alive__) { + this.activated() + } this.mounted() } else { this.updated(props) @@ -366,6 +369,8 @@ export class Component extends HTMLElement { // 几个生命周期回调 created() {} mounted() {} + activated() {} + deactivated() {} unmounted() {} updated() {} render() { From 079589febbcd3feff58097be5e0ab382e4f6104d Mon Sep 17 00:00:00 2001 From: yutent Date: Fri, 11 Aug 2023 19:08:59 +0800 Subject: [PATCH 4/4] 1.10.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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",