commit
c0eb316f87
|
@ -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",
|
||||||
|
|
22
src/html.js
22
src/html.js
|
@ -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 {
|
||||||
|
|
31
src/index.js
31
src/index.js
|
@ -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() {
|
||||||
|
|
Loading…
Reference in New Issue