封存此仓库, 迁移到新地址
parent
539a79c288
commit
333c4378fa
91
src/core.js
91
src/core.js
|
@ -3,9 +3,23 @@
|
||||||
* @author yutent<yutent.io@gmail.com>
|
* @author yutent<yutent.io@gmail.com>
|
||||||
* @date 2023/03/03 11:21:44
|
* @date 2023/03/03 11:21:44
|
||||||
*/
|
*/
|
||||||
|
const finalize = Symbol('finalize')
|
||||||
|
const RESET_CSS_STYLE = css`
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
export function css(strs, ...args) {
|
export function css(strs, ...args) {
|
||||||
let output = ''
|
let output = `
|
||||||
|
|
||||||
|
`
|
||||||
let tmp = Array.from(strs)
|
let tmp = Array.from(strs)
|
||||||
while (tmp.length) {
|
while (tmp.length) {
|
||||||
output += tmp.shift() + (args.shift() || '')
|
output += tmp.shift() + (args.shift() || '')
|
||||||
|
@ -50,14 +64,61 @@ function getTemplate(html) {
|
||||||
return template.content.cloneNode(true)
|
return template.content.cloneNode(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Compoent extends HTMLElement {
|
function adoptStyles(root, styles = '') {
|
||||||
|
let sheet = new CSSStyleSheet()
|
||||||
|
if (typeof styles === 'string') {
|
||||||
|
styles = [styles]
|
||||||
|
} else {
|
||||||
|
styles = styles.flat(Infinity)
|
||||||
|
}
|
||||||
|
styles = (RESET_CSS_STYLE + styles.join(' ')).trim()
|
||||||
|
sheet.replaceSync(styles)
|
||||||
|
root.adoptedStyleSheets.push(sheet)
|
||||||
|
}
|
||||||
|
|
||||||
|
function render(root, html) {
|
||||||
|
root.appendChild(getTemplate(html))
|
||||||
|
}
|
||||||
|
|
||||||
|
export class Component extends HTMLElement {
|
||||||
static get observedAttributes() {
|
static get observedAttributes() {
|
||||||
console.log(this.properties)
|
this[finalize]()
|
||||||
return []
|
|
||||||
|
let list = []
|
||||||
|
this.elemProps.forEach((it, prop) => {
|
||||||
|
list.push(prop)
|
||||||
|
})
|
||||||
|
return list
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super()
|
super()
|
||||||
|
this.created && this.created()
|
||||||
|
}
|
||||||
|
|
||||||
|
static [finalize]() {
|
||||||
|
if (this.finalized) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.finalized = true
|
||||||
|
|
||||||
|
this.elemProps = new Map()
|
||||||
|
|
||||||
|
for (let k in this.props) {
|
||||||
|
let prop = Symbol(k)
|
||||||
|
let options = this.props[k]
|
||||||
|
this.elemProps.set(k, prop)
|
||||||
|
Object.defineProperty(this.prototype, k, {
|
||||||
|
get() {
|
||||||
|
return this[prop] || options.default
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
this[prop] = val
|
||||||
|
},
|
||||||
|
enumerable: false
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -66,10 +127,28 @@ export class Compoent extends HTMLElement {
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
Object.defineProperty(this, 'root', {
|
Object.defineProperty(this, 'root', {
|
||||||
value: this.attachShadow({ mode: 'open' }),
|
value: this.shadowRoot || this.attachShadow({ mode: 'open' }),
|
||||||
enumerable: false
|
enumerable: false
|
||||||
})
|
})
|
||||||
|
|
||||||
this.root.appendChild(getTemplate(this.render()))
|
adoptStyles(this.root, this.constructor.styles)
|
||||||
|
|
||||||
|
render(this.root, this.render())
|
||||||
|
|
||||||
|
this.mounted && this.mounted()
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnectedCallback() {
|
||||||
|
console.log('>>>>')
|
||||||
|
}
|
||||||
|
|
||||||
|
attributeChangedCallback(name, old, val) {
|
||||||
|
if (old === val) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
adoptedCallback() {
|
||||||
|
//
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue