Merge pull request #2 from bytedo/dev

一小波优化
master 1.10.1
yutent 2023-08-11 19:11:16 +08:00 committed by GitHub
commit c0eb316f87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 19 deletions

View File

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

View File

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

View File

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