parent
d2ccaa5c3d
commit
f7e0ce08c3
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@bd/core",
|
"name": "@bd/core",
|
||||||
"version": "1.5.13",
|
"version": "1.5.14",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"description": "百搭UI组件库的核心",
|
"description": "百搭UI组件库的核心",
|
||||||
"main": "dist/index.js",
|
"main": "dist/index.js",
|
||||||
|
|
|
@ -39,18 +39,11 @@ export const WC_PART = Symbol('wc_path')
|
||||||
export const NO_CHANGE = Symbol('wc-noChange')
|
export const NO_CHANGE = Symbol('wc-noChange')
|
||||||
export const NOTHING = Symbol('wc-nothing')
|
export const NOTHING = Symbol('wc-nothing')
|
||||||
export const __finalized__ = Symbol('finalized')
|
export const __finalized__ = Symbol('finalized')
|
||||||
export const __render__ = Symbol('render')
|
|
||||||
export const __init__ = Symbol('init')
|
|
||||||
export const __props__ = Symbol('props')
|
export const __props__ = Symbol('props')
|
||||||
export const __changed_props__ = Symbol('changed_props')
|
export const __changed_props__ = Symbol('changed_props')
|
||||||
export const __mounted__ = Symbol('mounted')
|
export const __mounted__ = Symbol('mounted')
|
||||||
export const __feedback__ = Symbol('feedback')
|
|
||||||
export const __pending__ = Symbol('pending')
|
export const __pending__ = Symbol('pending')
|
||||||
export const __prop2attr__ = Symbol('prop2attr')
|
|
||||||
export const __attr2prop__ = Symbol('attr2prop')
|
|
||||||
export const __clear_update__ = Symbol('clearupdate')
|
|
||||||
export const __children__ = Symbol('children')
|
export const __children__ = Symbol('children')
|
||||||
export const __updated__ = Symbol('updated')
|
|
||||||
|
|
||||||
export const RESET_CSS_STYLE = `* {box-sizing: border-box;margin: 0;padding: 0;}::before,::after {box-sizing: border-box;}`
|
export const RESET_CSS_STYLE = `* {box-sizing: border-box;margin: 0;padding: 0;}::before,::after {box-sizing: border-box;}`
|
||||||
|
|
||||||
|
|
43
src/index.js
43
src/index.js
|
@ -8,18 +8,11 @@ import {
|
||||||
parsePropsDeclaration,
|
parsePropsDeclaration,
|
||||||
boolMap,
|
boolMap,
|
||||||
__finalized__,
|
__finalized__,
|
||||||
__render__,
|
|
||||||
__init__,
|
|
||||||
__props__,
|
__props__,
|
||||||
__changed_props__,
|
__changed_props__,
|
||||||
__mounted__,
|
__mounted__,
|
||||||
__feedback__,
|
|
||||||
__pending__,
|
__pending__,
|
||||||
__prop2attr__,
|
__children__
|
||||||
__attr2prop__,
|
|
||||||
__clear_update__,
|
|
||||||
__children__,
|
|
||||||
__updated__
|
|
||||||
} from './constants.js'
|
} from './constants.js'
|
||||||
import { css, adoptStyles } from './css.js'
|
import { css, adoptStyles } from './css.js'
|
||||||
import { render, html, svg } from './html.js'
|
import { render, html, svg } from './html.js'
|
||||||
|
@ -114,7 +107,7 @@ export class Component extends HTMLElement {
|
||||||
this.created()
|
this.created()
|
||||||
}
|
}
|
||||||
|
|
||||||
[__init__]() {
|
#init() {
|
||||||
// 这里重新赋值一次, 用于清除掉因为 observer 修正产生的变化
|
// 这里重新赋值一次, 用于清除掉因为 observer 修正产生的变化
|
||||||
this[__changed_props__] = new Map()
|
this[__changed_props__] = new Map()
|
||||||
// 初始化 props
|
// 初始化 props
|
||||||
|
@ -125,7 +118,7 @@ export class Component extends HTMLElement {
|
||||||
// 若无定义props时, 手动执行一次渲染
|
// 若无定义props时, 手动执行一次渲染
|
||||||
if (this[__pending__] === false) {
|
if (this[__pending__] === false) {
|
||||||
this[__pending__] = true
|
this[__pending__] = true
|
||||||
nextTick(_ => this[__updated__]())
|
nextTick(_ => this.#confirmUpdate())
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -134,7 +127,7 @@ export class Component extends HTMLElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
this[__init__]()
|
this.#init()
|
||||||
adoptStyles(this.root, this.constructor.styles)
|
adoptStyles(this.root, this.constructor.styles)
|
||||||
|
|
||||||
this[__children__]?.setConnected(true)
|
this[__children__]?.setConnected(true)
|
||||||
|
@ -149,7 +142,7 @@ export class Component extends HTMLElement {
|
||||||
if (old === val) {
|
if (old === val) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this[__attr2prop__](name, val, old)
|
this.#attr2prop(name, val, old)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -158,7 +151,7 @@ export class Component extends HTMLElement {
|
||||||
* @param name<String>
|
* @param name<String>
|
||||||
* @param value<String|Boolean|Number>
|
* @param value<String|Boolean|Number>
|
||||||
*/
|
*/
|
||||||
[__prop2attr__](name, value) {
|
#prop2attr(name, value) {
|
||||||
let options = this.#getPropOptions(name)
|
let options = this.#getPropOptions(name)
|
||||||
|
|
||||||
if (options.attribute === false) {
|
if (options.attribute === false) {
|
||||||
|
@ -191,7 +184,7 @@ export class Component extends HTMLElement {
|
||||||
* @param name<String>
|
* @param name<String>
|
||||||
* @param value<String|Boolean|Number>
|
* @param value<String|Boolean|Number>
|
||||||
*/
|
*/
|
||||||
[__attr2prop__](name, value, old) {
|
#attr2prop(name, value, old) {
|
||||||
let _name = boolMap[name],
|
let _name = boolMap[name],
|
||||||
options
|
options
|
||||||
if (_name) {
|
if (_name) {
|
||||||
|
@ -206,27 +199,25 @@ export class Component extends HTMLElement {
|
||||||
$requestUpdate(name, oldValue) {
|
$requestUpdate(name, oldValue) {
|
||||||
if (name !== void 0) {
|
if (name !== void 0) {
|
||||||
this[__changed_props__].set(name, this[name])
|
this[__changed_props__].set(name, this[name])
|
||||||
this[__prop2attr__](name, this[name])
|
this.#prop2attr(name, this[name])
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this[__pending__] === false) {
|
if (this[__pending__] === false) {
|
||||||
this[__pending__] = true
|
this[__pending__] = true
|
||||||
nextTick(_ => this[__updated__]())
|
nextTick(_ => this.#confirmUpdate())
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 确认更新到视图
|
// 确认更新到视图
|
||||||
[__updated__]() {
|
#confirmUpdate() {
|
||||||
if (this[__pending__]) {
|
let props = this[__changed_props__]
|
||||||
let props = this[__changed_props__]
|
this.#render()
|
||||||
this[__render__]()
|
this.#feedback(props)
|
||||||
this[__feedback__](props)
|
this.#clearUpdate()
|
||||||
this[__clear_update__]()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新回调反馈
|
// 更新回调反馈
|
||||||
[__feedback__](props) {
|
#feedback(props) {
|
||||||
// 初始化时不触发updated回调
|
// 初始化时不触发updated回调
|
||||||
if (this[__mounted__] === false) {
|
if (this[__mounted__] === false) {
|
||||||
this[__mounted__] = true
|
this[__mounted__] = true
|
||||||
|
@ -236,13 +227,13 @@ export class Component extends HTMLElement {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[__clear_update__]() {
|
#clearUpdate() {
|
||||||
this[__changed_props__] = new Map()
|
this[__changed_props__] = new Map()
|
||||||
this[__pending__] = false
|
this[__pending__] = false
|
||||||
}
|
}
|
||||||
|
|
||||||
// 渲染视图
|
// 渲染视图
|
||||||
[__render__]() {
|
#render() {
|
||||||
let ast = this.render()
|
let ast = this.render()
|
||||||
|
|
||||||
this[__children__] = render(ast, this.root, {
|
this[__children__] = render(ast, this.root, {
|
||||||
|
|
Loading…
Reference in New Issue