一大波精简
parent
e53a60d7a4
commit
65753a6e02
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@ninejs/core",
|
"name": "@ninejs/core",
|
||||||
"version": "0.1.0",
|
"version": "0.2.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"description": "9号UI组件库的核心",
|
"description": "9号UI组件库的核心",
|
||||||
"main": "dist/index.js",
|
"main": "dist/index.js",
|
||||||
|
|
|
@ -4,9 +4,57 @@
|
||||||
* @date 2023/03/06 12:08:35
|
* @date 2023/03/06 12:08:35
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const finalize = Symbol('finalize')
|
export const FINALIZED = Symbol('finalized')
|
||||||
|
export const UPDATE = Symbol('update')
|
||||||
|
|
||||||
export const RESET_CSS_STYLE = `
|
export const RESET_CSS_STYLE = `
|
||||||
* {box-sizing: border-box;margin: 0;padding: 0;}
|
* {box-sizing: border-box;margin: 0;padding: 0;}
|
||||||
::before,::after {box-sizing: border-box;}
|
::before,::after {box-sizing: border-box;}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
export const DEFAULT_CONVERTER = {
|
||||||
|
toAttribute(value, type) {
|
||||||
|
switch (type) {
|
||||||
|
case Boolean:
|
||||||
|
value = value ? '' : null
|
||||||
|
break
|
||||||
|
case Object:
|
||||||
|
case Array:
|
||||||
|
value = value == null ? value : JSON.stringify(value)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
return value
|
||||||
|
},
|
||||||
|
fromAttribute(value, type) {
|
||||||
|
let fromValue = value
|
||||||
|
switch (type) {
|
||||||
|
case Boolean:
|
||||||
|
fromValue = value !== null
|
||||||
|
break
|
||||||
|
case Number:
|
||||||
|
fromValue = value === null ? null : Number(value)
|
||||||
|
break
|
||||||
|
case Object:
|
||||||
|
case Array:
|
||||||
|
try {
|
||||||
|
fromValue = JSON.parse(value)
|
||||||
|
} catch (e) {
|
||||||
|
fromValue = null
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
return fromValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function notEqual(value, old) {
|
||||||
|
return old !== value && (old === old || value === value)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DEFAULT_PROPERTY_DECLARATION = {
|
||||||
|
attribute: true,
|
||||||
|
type: String,
|
||||||
|
converter: DEFAULT_CONVERTER,
|
||||||
|
reflect: false,
|
||||||
|
hasChanged: notEqual
|
||||||
|
}
|
||||||
|
|
142
src/html.js
142
src/html.js
|
@ -1,11 +1,8 @@
|
||||||
var ENABLE_EXTRA_SECURITY_HOOKS = true
|
var ENABLE_EXTRA_SECURITY_HOOKS = true
|
||||||
var global3 = window
|
var global3 = window
|
||||||
var debugLogEvent2 = void 0
|
|
||||||
var debugLogRenderId = 0
|
var debugLogRenderId = 0
|
||||||
var issueWarning2
|
var issueWarning2
|
||||||
|
|
||||||
var wrap = node => node
|
|
||||||
|
|
||||||
var identityFunction = value => value
|
var identityFunction = value => value
|
||||||
var noopSanitizer = (_node, _name, _type) => identityFunction
|
var noopSanitizer = (_node, _name, _type) => identityFunction
|
||||||
var setSanitizer = newSanitizer => {
|
var setSanitizer = newSanitizer => {
|
||||||
|
@ -262,15 +259,6 @@ class Template {
|
||||||
}
|
}
|
||||||
nodeIndex++
|
nodeIndex++
|
||||||
}
|
}
|
||||||
debugLogEvent2 === null || debugLogEvent2 === void 0
|
|
||||||
? void 0
|
|
||||||
: debugLogEvent2({
|
|
||||||
kind: 'template prep',
|
|
||||||
template: this,
|
|
||||||
clonableTemplate: this.el,
|
|
||||||
parts: this.parts,
|
|
||||||
strings
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
static createElement(html2, _options) {
|
static createElement(html2, _options) {
|
||||||
const el = d.createElement('template')
|
const el = d.createElement('template')
|
||||||
|
@ -396,16 +384,6 @@ class TemplateInstance {
|
||||||
let i = 0
|
let i = 0
|
||||||
for (const part of this._parts) {
|
for (const part of this._parts) {
|
||||||
if (part !== void 0) {
|
if (part !== void 0) {
|
||||||
debugLogEvent2 === null || debugLogEvent2 === void 0
|
|
||||||
? void 0
|
|
||||||
: debugLogEvent2({
|
|
||||||
kind: 'set part',
|
|
||||||
part,
|
|
||||||
value: values[i],
|
|
||||||
valueIndex: i,
|
|
||||||
values,
|
|
||||||
templateInstance: this
|
|
||||||
})
|
|
||||||
if (part.strings !== void 0) {
|
if (part.strings !== void 0) {
|
||||||
part._$setValue(values, part, i)
|
part._$setValue(values, part, i)
|
||||||
i += part.strings.length - 2
|
i += part.strings.length - 2
|
||||||
|
@ -448,7 +426,7 @@ class ChildPart {
|
||||||
: this.__isConnected
|
: this.__isConnected
|
||||||
}
|
}
|
||||||
get parentNode() {
|
get parentNode() {
|
||||||
let parentNode = wrap(this._$startNode).parentNode
|
let parentNode = this._$startNode.parentNode
|
||||||
const parent = this._$parent
|
const parent = this._$parent
|
||||||
if (parent !== void 0 && parentNode.nodeType === 11) {
|
if (parent !== void 0 && parentNode.nodeType === 11) {
|
||||||
parentNode = parent.parentNode
|
parentNode = parent.parentNode
|
||||||
|
@ -468,15 +446,6 @@ class ChildPart {
|
||||||
if (isPrimitive(value)) {
|
if (isPrimitive(value)) {
|
||||||
if (value === nothing || value == null || value === '') {
|
if (value === nothing || value == null || value === '') {
|
||||||
if (this._$committedValue !== nothing) {
|
if (this._$committedValue !== nothing) {
|
||||||
debugLogEvent2 === null || debugLogEvent2 === void 0
|
|
||||||
? void 0
|
|
||||||
: debugLogEvent2({
|
|
||||||
kind: 'commit nothing to child',
|
|
||||||
start: this._$startNode,
|
|
||||||
end: this._$endNode,
|
|
||||||
parent: this._$parent,
|
|
||||||
options: this.options
|
|
||||||
})
|
|
||||||
this._$clear()
|
this._$clear()
|
||||||
}
|
}
|
||||||
this._$committedValue = nothing
|
this._$committedValue = nothing
|
||||||
|
@ -494,7 +463,7 @@ class ChildPart {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
_insert(node, ref = this._$endNode) {
|
_insert(node, ref = this._$endNode) {
|
||||||
return wrap(wrap(this._$startNode).parentNode).insertBefore(node, ref)
|
return this._$startNode.parentNode.insertBefore(node, ref)
|
||||||
}
|
}
|
||||||
_commitNode(value) {
|
_commitNode(value) {
|
||||||
var _a4
|
var _a4
|
||||||
|
@ -514,15 +483,7 @@ class ChildPart {
|
||||||
throw new Error(message)
|
throw new Error(message)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
debugLogEvent2 === null || debugLogEvent2 === void 0
|
|
||||||
? void 0
|
|
||||||
: debugLogEvent2({
|
|
||||||
kind: 'commit node',
|
|
||||||
start: this._$startNode,
|
|
||||||
parent: this._$parent,
|
|
||||||
value,
|
|
||||||
options: this.options
|
|
||||||
})
|
|
||||||
this._$committedValue = this._insert(value)
|
this._$committedValue = this._insert(value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -531,21 +492,14 @@ class ChildPart {
|
||||||
this._$committedValue !== nothing &&
|
this._$committedValue !== nothing &&
|
||||||
isPrimitive(this._$committedValue)
|
isPrimitive(this._$committedValue)
|
||||||
) {
|
) {
|
||||||
const node = wrap(this._$startNode).nextSibling
|
const node = this._$startNode.nextSibling
|
||||||
if (ENABLE_EXTRA_SECURITY_HOOKS) {
|
if (ENABLE_EXTRA_SECURITY_HOOKS) {
|
||||||
if (this._textSanitizer === void 0) {
|
if (this._textSanitizer === void 0) {
|
||||||
this._textSanitizer = createSanitizer(node, 'data', 'property')
|
this._textSanitizer = createSanitizer(node, 'data', 'property')
|
||||||
}
|
}
|
||||||
value = this._textSanitizer(value)
|
value = this._textSanitizer(value)
|
||||||
}
|
}
|
||||||
debugLogEvent2 === null || debugLogEvent2 === void 0
|
|
||||||
? void 0
|
|
||||||
: debugLogEvent2({
|
|
||||||
kind: 'commit text',
|
|
||||||
node,
|
|
||||||
value,
|
|
||||||
options: this.options
|
|
||||||
})
|
|
||||||
node.data = value
|
node.data = value
|
||||||
} else {
|
} else {
|
||||||
if (ENABLE_EXTRA_SECURITY_HOOKS) {
|
if (ENABLE_EXTRA_SECURITY_HOOKS) {
|
||||||
|
@ -555,25 +509,10 @@ class ChildPart {
|
||||||
this._textSanitizer = createSanitizer(textNode, 'data', 'property')
|
this._textSanitizer = createSanitizer(textNode, 'data', 'property')
|
||||||
}
|
}
|
||||||
value = this._textSanitizer(value)
|
value = this._textSanitizer(value)
|
||||||
debugLogEvent2 === null || debugLogEvent2 === void 0
|
|
||||||
? void 0
|
|
||||||
: debugLogEvent2({
|
|
||||||
kind: 'commit text',
|
|
||||||
node: textNode,
|
|
||||||
value,
|
|
||||||
options: this.options
|
|
||||||
})
|
|
||||||
textNode.data = value
|
textNode.data = value
|
||||||
} else {
|
} else {
|
||||||
this._commitNode(d.createTextNode(value))
|
this._commitNode(d.createTextNode(value))
|
||||||
debugLogEvent2 === null || debugLogEvent2 === void 0
|
|
||||||
? void 0
|
|
||||||
: debugLogEvent2({
|
|
||||||
kind: 'commit text',
|
|
||||||
node: wrap(this._$startNode).nextSibling,
|
|
||||||
value,
|
|
||||||
options: this.options
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this._$committedValue = value
|
this._$committedValue = value
|
||||||
|
@ -635,18 +574,18 @@ class ChildPart {
|
||||||
partIndex++
|
partIndex++
|
||||||
}
|
}
|
||||||
if (partIndex < itemParts.length) {
|
if (partIndex < itemParts.length) {
|
||||||
this._$clear(itemPart && wrap(itemPart._$endNode).nextSibling, partIndex)
|
this._$clear(itemPart && itemPart._$endNode.nextSibling, partIndex)
|
||||||
itemParts.length = partIndex
|
itemParts.length = partIndex
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
_$clear(start = wrap(this._$startNode).nextSibling, from) {
|
_$clear(start = this._$startNode.nextSibling, from) {
|
||||||
var _a4
|
var _a4
|
||||||
;(_a4 = this._$notifyConnectionChanged) === null || _a4 === void 0
|
;(_a4 = this._$notifyConnectionChanged) === null || _a4 === void 0
|
||||||
? void 0
|
? void 0
|
||||||
: _a4.call(this, false, true, from)
|
: _a4.call(this, false, true, from)
|
||||||
while (start && start !== this._$endNode) {
|
while (start && start !== this._$endNode) {
|
||||||
const n = wrap(start).nextSibling
|
const n = start.nextSibling
|
||||||
wrap(start).remove()
|
start.remove()
|
||||||
start = n
|
start = n
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -720,7 +659,7 @@ class AttributePart {
|
||||||
}
|
}
|
||||||
_commitValue(value) {
|
_commitValue(value) {
|
||||||
if (value === nothing) {
|
if (value === nothing) {
|
||||||
wrap(this.element).removeAttribute(this.name)
|
this.element.removeAttribute(this.name)
|
||||||
} else {
|
} else {
|
||||||
if (ENABLE_EXTRA_SECURITY_HOOKS) {
|
if (ENABLE_EXTRA_SECURITY_HOOKS) {
|
||||||
if (this._sanitizer === void 0) {
|
if (this._sanitizer === void 0) {
|
||||||
|
@ -732,16 +671,8 @@ class AttributePart {
|
||||||
}
|
}
|
||||||
value = this._sanitizer(value !== null && value !== void 0 ? value : '')
|
value = this._sanitizer(value !== null && value !== void 0 ? value : '')
|
||||||
}
|
}
|
||||||
debugLogEvent2 === null || debugLogEvent2 === void 0
|
|
||||||
? void 0
|
this.element.setAttribute(
|
||||||
: debugLogEvent2({
|
|
||||||
kind: 'commit attribute',
|
|
||||||
element: this.element,
|
|
||||||
name: this.name,
|
|
||||||
value,
|
|
||||||
options: this.options
|
|
||||||
})
|
|
||||||
wrap(this.element).setAttribute(
|
|
||||||
this.name,
|
this.name,
|
||||||
value !== null && value !== void 0 ? value : ''
|
value !== null && value !== void 0 ? value : ''
|
||||||
)
|
)
|
||||||
|
@ -764,15 +695,7 @@ class PropertyPart extends AttributePart {
|
||||||
}
|
}
|
||||||
value = this._sanitizer(value)
|
value = this._sanitizer(value)
|
||||||
}
|
}
|
||||||
debugLogEvent2 === null || debugLogEvent2 === void 0
|
|
||||||
? void 0
|
|
||||||
: debugLogEvent2({
|
|
||||||
kind: 'commit property',
|
|
||||||
element: this.element,
|
|
||||||
name: this.name,
|
|
||||||
value,
|
|
||||||
options: this.options
|
|
||||||
})
|
|
||||||
this.element[this.name] = value === nothing ? void 0 : value
|
this.element[this.name] = value === nothing ? void 0 : value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -783,22 +706,10 @@ class BooleanAttributePart extends AttributePart {
|
||||||
this.type = BOOLEAN_ATTRIBUTE_PART
|
this.type = BOOLEAN_ATTRIBUTE_PART
|
||||||
}
|
}
|
||||||
_commitValue(value) {
|
_commitValue(value) {
|
||||||
debugLogEvent2 === null || debugLogEvent2 === void 0
|
|
||||||
? void 0
|
|
||||||
: debugLogEvent2({
|
|
||||||
kind: 'commit boolean attribute',
|
|
||||||
element: this.element,
|
|
||||||
name: this.name,
|
|
||||||
value: !!(value && value !== nothing),
|
|
||||||
options: this.options
|
|
||||||
})
|
|
||||||
if (value && value !== nothing) {
|
if (value && value !== nothing) {
|
||||||
wrap(this.element).setAttribute(
|
this.element.setAttribute(this.name, emptyStringForBooleanAttribute2)
|
||||||
this.name,
|
|
||||||
emptyStringForBooleanAttribute2
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
wrap(this.element).removeAttribute(this.name)
|
this.element.removeAttribute(this.name)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -826,18 +737,7 @@ class EventPart extends AttributePart {
|
||||||
const shouldAddListener =
|
const shouldAddListener =
|
||||||
newListener !== nothing &&
|
newListener !== nothing &&
|
||||||
(oldListener === nothing || shouldRemoveListener)
|
(oldListener === nothing || shouldRemoveListener)
|
||||||
debugLogEvent2 === null || debugLogEvent2 === void 0
|
|
||||||
? void 0
|
|
||||||
: debugLogEvent2({
|
|
||||||
kind: 'commit event listener',
|
|
||||||
element: this.element,
|
|
||||||
name: this.name,
|
|
||||||
value: newListener,
|
|
||||||
options: this.options,
|
|
||||||
removeListener: shouldRemoveListener,
|
|
||||||
addListener: shouldAddListener,
|
|
||||||
oldListener
|
|
||||||
})
|
|
||||||
if (shouldRemoveListener) {
|
if (shouldRemoveListener) {
|
||||||
this.element.removeEventListener(this.name, this, oldListener)
|
this.element.removeEventListener(this.name, this, oldListener)
|
||||||
}
|
}
|
||||||
|
@ -875,14 +775,6 @@ class ElementPart {
|
||||||
return this._$parent._$isConnected
|
return this._$parent._$isConnected
|
||||||
}
|
}
|
||||||
_$setValue(value) {
|
_$setValue(value) {
|
||||||
debugLogEvent2 === null || debugLogEvent2 === void 0
|
|
||||||
? void 0
|
|
||||||
: debugLogEvent2({
|
|
||||||
kind: 'commit to element binding',
|
|
||||||
element: this.element,
|
|
||||||
value,
|
|
||||||
options: this.options
|
|
||||||
})
|
|
||||||
resolveDirective(this, value)
|
resolveDirective(this, value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
206
src/index.js
206
src/index.js
|
@ -3,6 +3,13 @@
|
||||||
* @author yutent<yutent.io@gmail.com>
|
* @author yutent<yutent.io@gmail.com>
|
||||||
* @date 2023/03/07 18:10:43
|
* @date 2023/03/07 18:10:43
|
||||||
*/
|
*/
|
||||||
|
import {
|
||||||
|
FINALIZED,
|
||||||
|
UPDATE,
|
||||||
|
DEFAULT_CONVERTER,
|
||||||
|
DEFAULT_PROPERTY_DECLARATION,
|
||||||
|
notEqual
|
||||||
|
} 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'
|
||||||
import {
|
import {
|
||||||
|
@ -16,10 +23,9 @@ import {
|
||||||
clearOutsideClick,
|
clearOutsideClick,
|
||||||
fire
|
fire
|
||||||
} from './utils.js'
|
} from './utils.js'
|
||||||
|
|
||||||
|
export { html, css, svg }
|
||||||
export {
|
export {
|
||||||
html,
|
|
||||||
css,
|
|
||||||
svg,
|
|
||||||
$,
|
$,
|
||||||
$$,
|
$$,
|
||||||
nextTick,
|
nextTick,
|
||||||
|
@ -30,52 +36,6 @@ export {
|
||||||
clearOutsideClick
|
clearOutsideClick
|
||||||
}
|
}
|
||||||
|
|
||||||
var defaultConverter = {
|
|
||||||
toAttribute(value, type) {
|
|
||||||
switch (type) {
|
|
||||||
case Boolean:
|
|
||||||
value = value ? '' : null
|
|
||||||
break
|
|
||||||
case Object:
|
|
||||||
case Array:
|
|
||||||
value = value == null ? value : JSON.stringify(value)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
return value
|
|
||||||
},
|
|
||||||
fromAttribute(value, type) {
|
|
||||||
let fromValue = value
|
|
||||||
switch (type) {
|
|
||||||
case Boolean:
|
|
||||||
fromValue = value !== null
|
|
||||||
break
|
|
||||||
case Number:
|
|
||||||
fromValue = value === null ? null : Number(value)
|
|
||||||
break
|
|
||||||
case Object:
|
|
||||||
case Array:
|
|
||||||
try {
|
|
||||||
fromValue = JSON.parse(value)
|
|
||||||
} catch (e) {
|
|
||||||
fromValue = null
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
return fromValue
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var notEqual = (value, old) => {
|
|
||||||
return old !== value && (old === old || value === value)
|
|
||||||
}
|
|
||||||
var defaultPropertyDeclaration = {
|
|
||||||
attribute: true,
|
|
||||||
type: String,
|
|
||||||
converter: defaultConverter,
|
|
||||||
reflect: false,
|
|
||||||
hasChanged: notEqual
|
|
||||||
}
|
|
||||||
var finalized = 'finalized'
|
|
||||||
|
|
||||||
export class Component extends HTMLElement {
|
export class Component extends HTMLElement {
|
||||||
constructor() {
|
constructor() {
|
||||||
super()
|
super()
|
||||||
|
@ -85,14 +45,14 @@ export class Component extends HTMLElement {
|
||||||
this.hasUpdated = false
|
this.hasUpdated = false
|
||||||
this.__reflectingProperty = null
|
this.__reflectingProperty = null
|
||||||
this._initialize()
|
this._initialize()
|
||||||
|
this.created && this.created()
|
||||||
}
|
}
|
||||||
static addInitializer(initializer) {
|
static addInitializer(initializer) {
|
||||||
var _a4
|
|
||||||
this.finalize()
|
this.finalize()
|
||||||
;((_a4 = this._initializers) !== null && _a4 !== void 0
|
if (!this._initializers) {
|
||||||
? _a4
|
this._initializers = []
|
||||||
: (this._initializers = [])
|
}
|
||||||
).push(initializer)
|
this._initializers.push(initializer)
|
||||||
}
|
}
|
||||||
static get observedAttributes() {
|
static get observedAttributes() {
|
||||||
this.finalize()
|
this.finalize()
|
||||||
|
@ -106,11 +66,11 @@ export class Component extends HTMLElement {
|
||||||
})
|
})
|
||||||
return attributes
|
return attributes
|
||||||
}
|
}
|
||||||
static createProperty(name, options = defaultPropertyDeclaration) {
|
static createProperty(name, options = DEFAULT_PROPERTY_DECLARATION) {
|
||||||
if (options.state) {
|
if (options.state) {
|
||||||
options.attribute = false
|
options.attribute = false
|
||||||
}
|
}
|
||||||
this.finalize()
|
|
||||||
this.elementProperties.set(name, options)
|
this.elementProperties.set(name, options)
|
||||||
|
|
||||||
let key = Symbol(name)
|
let key = Symbol(name)
|
||||||
|
@ -133,13 +93,13 @@ export class Component extends HTMLElement {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
static getPropertyOptions(name) {
|
static getPropertyOptions(name) {
|
||||||
return this.elementProperties.get(name) || defaultPropertyDeclaration
|
return this.elementProperties.get(name) || DEFAULT_PROPERTY_DECLARATION
|
||||||
}
|
}
|
||||||
static finalize() {
|
static finalize() {
|
||||||
if (this.hasOwnProperty(finalized)) {
|
if (this[FINALIZED]) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
this[finalized] = true
|
this[FINALIZED] = true
|
||||||
|
|
||||||
this.elementProperties = new Map()
|
this.elementProperties = new Map()
|
||||||
this.__attributeToPropertyMap = new Map()
|
this.__attributeToPropertyMap = new Map()
|
||||||
|
@ -163,32 +123,24 @@ export class Component extends HTMLElement {
|
||||||
: void 0
|
: void 0
|
||||||
}
|
}
|
||||||
_initialize() {
|
_initialize() {
|
||||||
var _a4
|
|
||||||
this.__updatePromise = new Promise(res => (this.enableUpdating = res))
|
this.__updatePromise = new Promise(res => (this.enableUpdating = res))
|
||||||
this._$changedProperties = new Map()
|
this._$changedProperties = new Map()
|
||||||
this.__saveInstanceProperties()
|
this.__saveInstanceProperties()
|
||||||
this.requestUpdate()
|
this.requestUpdate()
|
||||||
;(_a4 = this.constructor._initializers) === null || _a4 === void 0
|
this.constructor._initializers?.forEach(i => i(this))
|
||||||
? void 0
|
|
||||||
: _a4.forEach(i => i(this))
|
|
||||||
}
|
}
|
||||||
addController(controller) {
|
addController(controller) {
|
||||||
var _a4, _b4
|
if (!this.__controllers) {
|
||||||
;((_a4 = this.__controllers) !== null && _a4 !== void 0
|
this.__controllers = []
|
||||||
? _a4
|
}
|
||||||
: (this.__controllers = [])
|
this.__controllers.push(controller)
|
||||||
).push(controller)
|
|
||||||
if (this.root !== void 0 && this.isConnected) {
|
if (this.root !== void 0 && this.isConnected) {
|
||||||
;(_b4 = controller.hostConnected) === null || _b4 === void 0
|
controller.hostConnected?.call(controller)
|
||||||
? void 0
|
|
||||||
: _b4.call(controller)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
removeController(controller) {
|
removeController(controller) {
|
||||||
var _a4
|
this.__controllers?.splice(this.__controllers.indexOf(controller) >>> 0, 1)
|
||||||
;(_a4 = this.__controllers) === null || _a4 === void 0
|
|
||||||
? void 0
|
|
||||||
: _a4.splice(this.__controllers.indexOf(controller) >>> 0, 1)
|
|
||||||
}
|
}
|
||||||
__saveInstanceProperties() {
|
__saveInstanceProperties() {
|
||||||
this.constructor.elementProperties.forEach((_v, p) => {
|
this.constructor.elementProperties.forEach((_v, p) => {
|
||||||
|
@ -198,54 +150,33 @@ export class Component extends HTMLElement {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
createRenderRoot() {
|
|
||||||
let root = this.shadowRoot || this.attachShadow({ mode: 'open' })
|
|
||||||
adoptStyles(root, this.constructor.styles)
|
|
||||||
return root
|
|
||||||
}
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
var _a4
|
this.root = this.shadowRoot || this.attachShadow({ mode: 'open' })
|
||||||
if (this.root === void 0) {
|
|
||||||
this.root = this.createRenderRoot()
|
adoptStyles(this.root, this.constructor.styles)
|
||||||
}
|
|
||||||
|
|
||||||
this.enableUpdating(true)
|
this.enableUpdating(true)
|
||||||
;(_a4 = this.__controllers) === null || _a4 === void 0
|
|
||||||
? void 0
|
this.__controllers?.forEach(it => it.hostConnected?.call(it))
|
||||||
: _a4.forEach(c => {
|
this.__childPart?.setConnected(true)
|
||||||
var _a5
|
|
||||||
return (_a5 = c.hostConnected) === null || _a5 === void 0
|
this.mounted && this.mounted()
|
||||||
? void 0
|
|
||||||
: _a5.call(c)
|
|
||||||
})
|
|
||||||
this.__childPart && this.__childPart.setConnected(true)
|
|
||||||
}
|
}
|
||||||
enableUpdating(_requestedUpdate) {}
|
enableUpdating(_requestedUpdate) {}
|
||||||
disconnectedCallback() {
|
disconnectedCallback() {
|
||||||
var _a4
|
this.__controllers?.forEach(it => it.hostDisconnected?.call(it))
|
||||||
;(_a4 = this.__controllers) === null || _a4 === void 0
|
this.__childPart?.setConnected(false)
|
||||||
? void 0
|
|
||||||
: _a4.forEach(c => {
|
|
||||||
var _a5
|
|
||||||
return (_a5 = c.hostDisconnected) === null || _a5 === void 0
|
|
||||||
? void 0
|
|
||||||
: _a5.call(c)
|
|
||||||
})
|
|
||||||
this.__childPart && this.__childPart.setConnected(false)
|
|
||||||
}
|
}
|
||||||
attributeChangedCallback(name, _old, value) {
|
attributeChangedCallback(name, _old, value) {
|
||||||
this._$attributeToProperty(name, value)
|
this._$attributeToProperty(name, value)
|
||||||
}
|
}
|
||||||
__propertyToAttribute(name, value, options = defaultPropertyDeclaration) {
|
__propertyToAttribute(name, value, options = DEFAULT_PROPERTY_DECLARATION) {
|
||||||
var _a4
|
|
||||||
const attr = this.constructor.__attributeNameForProperty(name, options)
|
const attr = this.constructor.__attributeNameForProperty(name, options)
|
||||||
if (attr !== void 0 && options.reflect === true) {
|
if (attr !== void 0 && options.reflect === true) {
|
||||||
const converter =
|
const converter = options.converter?.toAttribute
|
||||||
((_a4 = options.converter) === null || _a4 === void 0
|
? options.converter
|
||||||
? void 0
|
: DEFAULT_CONVERTER
|
||||||
: _a4.toAttribute) !== void 0
|
|
||||||
? options.converter
|
|
||||||
: defaultConverter
|
|
||||||
const attrValue = converter.toAttribute(value, options.type)
|
const attrValue = converter.toAttribute(value, options.type)
|
||||||
|
|
||||||
this.__reflectingProperty = name
|
this.__reflectingProperty = name
|
||||||
|
@ -258,7 +189,6 @@ export class Component extends HTMLElement {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
_$attributeToProperty(name, value) {
|
_$attributeToProperty(name, value) {
|
||||||
var _a4
|
|
||||||
const ctor = this.constructor
|
const ctor = this.constructor
|
||||||
const propName = ctor.__attributeToPropertyMap.get(name)
|
const propName = ctor.__attributeToPropertyMap.get(name)
|
||||||
if (propName !== void 0 && this.__reflectingProperty !== propName) {
|
if (propName !== void 0 && this.__reflectingProperty !== propName) {
|
||||||
|
@ -266,11 +196,9 @@ export class Component extends HTMLElement {
|
||||||
const converter =
|
const converter =
|
||||||
typeof options.converter === 'function'
|
typeof options.converter === 'function'
|
||||||
? { fromAttribute: options.converter }
|
? { fromAttribute: options.converter }
|
||||||
: ((_a4 = options.converter) === null || _a4 === void 0
|
: options.converter?.fromAttribute
|
||||||
? void 0
|
|
||||||
: _a4.fromAttribute) !== void 0
|
|
||||||
? options.converter
|
? options.converter
|
||||||
: defaultConverter
|
: DEFAULT_CONVERTER
|
||||||
this.__reflectingProperty = propName
|
this.__reflectingProperty = propName
|
||||||
this[propName] = converter.fromAttribute(value, options.type)
|
this[propName] = converter.fromAttribute(value, options.type)
|
||||||
this.__reflectingProperty = null
|
this.__reflectingProperty = null
|
||||||
|
@ -316,7 +244,6 @@ export class Component extends HTMLElement {
|
||||||
return this.performUpdate()
|
return this.performUpdate()
|
||||||
}
|
}
|
||||||
performUpdate() {
|
performUpdate() {
|
||||||
var _a4, _b4
|
|
||||||
if (!this.isUpdatePending) {
|
if (!this.isUpdatePending) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
@ -325,44 +252,20 @@ export class Component extends HTMLElement {
|
||||||
this.__instanceProperties.forEach((v, p) => (this[p] = v))
|
this.__instanceProperties.forEach((v, p) => (this[p] = v))
|
||||||
this.__instanceProperties = void 0
|
this.__instanceProperties = void 0
|
||||||
}
|
}
|
||||||
let shouldUpdate = false
|
|
||||||
const changedProperties = this._$changedProperties
|
const changedProperties = this._$changedProperties
|
||||||
try {
|
try {
|
||||||
shouldUpdate = this.shouldUpdate(changedProperties)
|
this.__controllers?.forEach(it => it.hostUpdate?.call(it))
|
||||||
if (shouldUpdate) {
|
this[UPDATE](changedProperties)
|
||||||
this.willUpdate(changedProperties)
|
this._$didUpdate(changedProperties)
|
||||||
;(_b4 = this.__controllers) === null || _b4 === void 0
|
|
||||||
? void 0
|
|
||||||
: _b4.forEach(c => {
|
|
||||||
var _a5
|
|
||||||
return (_a5 = c.hostUpdate) === null || _a5 === void 0
|
|
||||||
? void 0
|
|
||||||
: _a5.call(c)
|
|
||||||
})
|
|
||||||
this.update(changedProperties)
|
|
||||||
} else {
|
|
||||||
this.__markUpdated()
|
|
||||||
}
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
shouldUpdate = false
|
|
||||||
this.__markUpdated()
|
this.__markUpdated()
|
||||||
throw e
|
throw e
|
||||||
}
|
}
|
||||||
if (shouldUpdate) {
|
|
||||||
this._$didUpdate(changedProperties)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
willUpdate(_changedProperties) {}
|
|
||||||
_$didUpdate(changedProperties) {
|
_$didUpdate(changedProperties) {
|
||||||
var _a4
|
this.__controllers?.forEach(it => it.hostUpdated?.call(it))
|
||||||
;(_a4 = this.__controllers) === null || _a4 === void 0
|
|
||||||
? void 0
|
|
||||||
: _a4.forEach(c => {
|
|
||||||
var _a5
|
|
||||||
return (_a5 = c.hostUpdated) === null || _a5 === void 0
|
|
||||||
? void 0
|
|
||||||
: _a5.call(c)
|
|
||||||
})
|
|
||||||
if (!this.hasUpdated) {
|
if (!this.hasUpdated) {
|
||||||
this.hasUpdated = true
|
this.hasUpdated = true
|
||||||
this.firstUpdated(changedProperties)
|
this.firstUpdated(changedProperties)
|
||||||
|
@ -379,13 +282,10 @@ export class Component extends HTMLElement {
|
||||||
getUpdateComplete() {
|
getUpdateComplete() {
|
||||||
return this.__updatePromise
|
return this.__updatePromise
|
||||||
}
|
}
|
||||||
shouldUpdate(_changedProperties) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
update(_changedProperties) {
|
|
||||||
const value = this.render()
|
|
||||||
|
|
||||||
/* */
|
[UPDATE](_changedProperties) {
|
||||||
|
let value = this.render()
|
||||||
|
|
||||||
if (this.__reflectingProperties !== void 0) {
|
if (this.__reflectingProperties !== void 0) {
|
||||||
this.__reflectingProperties.forEach((v, k) =>
|
this.__reflectingProperties.forEach((v, k) =>
|
||||||
this.__propertyToAttribute(k, this[k], v)
|
this.__propertyToAttribute(k, this[k], v)
|
||||||
|
|
Loading…
Reference in New Issue