调整代码结构
parent
c2347ab302
commit
695161ab69
93
src/html.js
93
src/html.js
|
@ -1,4 +1,4 @@
|
||||||
import { WC_PART } from './constants.js'
|
import { WC_PART, NO_CHANGE, NOTHING } from './constants.js'
|
||||||
|
|
||||||
var ENABLE_EXTRA_SECURITY_HOOKS = true
|
var ENABLE_EXTRA_SECURITY_HOOKS = true
|
||||||
var global3 = window
|
var global3 = window
|
||||||
|
@ -67,29 +67,17 @@ var BOOLEAN_ATTRIBUTE_PART = 4
|
||||||
var EVENT_PART = 5
|
var EVENT_PART = 5
|
||||||
var ELEMENT_PART = 6
|
var ELEMENT_PART = 6
|
||||||
var COMMENT_PART = 7
|
var COMMENT_PART = 7
|
||||||
var tag =
|
|
||||||
type =>
|
|
||||||
(strings, ...values) => {
|
|
||||||
return {
|
|
||||||
__dom_type__: type,
|
|
||||||
strings,
|
|
||||||
values
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export const html = tag(HTML_RESULT)
|
|
||||||
export const svg = tag(SVG_RESULT)
|
|
||||||
var noChange = Symbol.for('wc-noChange')
|
|
||||||
var nothing = Symbol.for('wc-nothing')
|
|
||||||
var templateCache = new WeakMap()
|
var templateCache = new WeakMap()
|
||||||
var walker = d.createTreeWalker(d, 129, null, false)
|
var walker = d.createTreeWalker(d, 129, null, false)
|
||||||
var sanitizerFactoryInternal = noopSanitizer
|
var sanitizerFactoryInternal = noopSanitizer
|
||||||
var getTemplateHtml = (strings, type) => {
|
var getTemplateHtml = (strings, type) => {
|
||||||
const l = strings.length - 1
|
const len = strings.length - 1
|
||||||
const attrNames = []
|
const attrNames = []
|
||||||
let html2 = type === SVG_RESULT ? '<svg>' : ''
|
let html2 = type === SVG_RESULT ? '<svg>' : ''
|
||||||
let rawTextEndRegex
|
let rawTextEndRegex
|
||||||
let regex = textEndRegex
|
let regex = textEndRegex
|
||||||
for (let i = 0; i < l; i++) {
|
for (let i = 0; i < len; i++) {
|
||||||
const s = strings[i]
|
const s = strings[i]
|
||||||
let attrNameEndIndex = -1
|
let attrNameEndIndex = -1
|
||||||
let attrName
|
let attrName
|
||||||
|
@ -164,7 +152,7 @@ var getTemplateHtml = (strings, type) => {
|
||||||
(attrNameEndIndex === -2 ? (attrNames.push(void 0), i) : end)
|
(attrNameEndIndex === -2 ? (attrNames.push(void 0), i) : end)
|
||||||
}
|
}
|
||||||
const htmlResult =
|
const htmlResult =
|
||||||
html2 + (strings[l] || '<?>') + (type === SVG_RESULT ? '</svg>' : '')
|
html2 + (strings[len] || '<?>') + (type === SVG_RESULT ? '</svg>' : '')
|
||||||
if (!Array.isArray(strings) || !strings.hasOwnProperty('raw')) {
|
if (!Array.isArray(strings) || !strings.hasOwnProperty('raw')) {
|
||||||
let message = 'invalid template strings array'
|
let message = 'invalid template strings array'
|
||||||
|
|
||||||
|
@ -267,7 +255,7 @@ class Template {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function resolveDirective(part, value, parent = part, attributeIndex) {
|
function resolveDirective(part, value, parent = part, attributeIndex) {
|
||||||
if (value === noChange) {
|
if (value === NO_CHANGE) {
|
||||||
return value
|
return value
|
||||||
}
|
}
|
||||||
let currentDirective =
|
let currentDirective =
|
||||||
|
@ -392,7 +380,7 @@ class ChildPart {
|
||||||
constructor(startNode, endNode, parent, options) {
|
constructor(startNode, endNode, parent, options) {
|
||||||
var _a4
|
var _a4
|
||||||
this.type = CHILD_PART
|
this.type = CHILD_PART
|
||||||
this._$committedValue = nothing
|
this._$committedValue = NOTHING
|
||||||
this._$disconnectableChildren = void 0
|
this._$disconnectableChildren = void 0
|
||||||
this._$startNode = startNode
|
this._$startNode = startNode
|
||||||
this._$endNode = endNode
|
this._$endNode = endNode
|
||||||
|
@ -423,12 +411,12 @@ class ChildPart {
|
||||||
_$setValue(value, directiveParent = this) {
|
_$setValue(value, directiveParent = this) {
|
||||||
value = resolveDirective(this, value, directiveParent)
|
value = resolveDirective(this, value, directiveParent)
|
||||||
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) {
|
||||||
this._$clear()
|
this._$clear()
|
||||||
}
|
}
|
||||||
this._$committedValue = nothing
|
this._$committedValue = NOTHING
|
||||||
} else if (value !== this._$committedValue && value !== noChange) {
|
} else if (value !== this._$committedValue && value !== NO_CHANGE) {
|
||||||
this._commitText(value)
|
this._commitText(value)
|
||||||
}
|
}
|
||||||
} else if (value['__dom_type__'] !== void 0) {
|
} else if (value['__dom_type__'] !== void 0) {
|
||||||
|
@ -463,7 +451,7 @@ class ChildPart {
|
||||||
}
|
}
|
||||||
_commitText(value) {
|
_commitText(value) {
|
||||||
if (
|
if (
|
||||||
this._$committedValue !== nothing &&
|
this._$committedValue !== NOTHING &&
|
||||||
isPrimitive(this._$committedValue)
|
isPrimitive(this._$committedValue)
|
||||||
) {
|
) {
|
||||||
const node = this._$startNode.nextSibling
|
const node = this._$startNode.nextSibling
|
||||||
|
@ -567,7 +555,7 @@ class ChildPart {
|
||||||
class AttributePart {
|
class AttributePart {
|
||||||
constructor(element, name, strings, parent, options) {
|
constructor(element, name, strings, parent, options) {
|
||||||
this.type = ATTRIBUTE_PART
|
this.type = ATTRIBUTE_PART
|
||||||
this._$committedValue = nothing
|
this._$committedValue = NOTHING
|
||||||
this._$disconnectableChildren = void 0
|
this._$disconnectableChildren = void 0
|
||||||
this.element = element
|
this.element = element
|
||||||
this.name = name
|
this.name = name
|
||||||
|
@ -577,7 +565,7 @@ class AttributePart {
|
||||||
this._$committedValue = new Array(strings.length - 1).fill(new String())
|
this._$committedValue = new Array(strings.length - 1).fill(new String())
|
||||||
this.strings = strings
|
this.strings = strings
|
||||||
} else {
|
} else {
|
||||||
this._$committedValue = nothing
|
this._$committedValue = NOTHING
|
||||||
}
|
}
|
||||||
if (ENABLE_EXTRA_SECURITY_HOOKS) {
|
if (ENABLE_EXTRA_SECURITY_HOOKS) {
|
||||||
this._sanitizer = void 0
|
this._sanitizer = void 0
|
||||||
|
@ -596,23 +584,28 @@ class AttributePart {
|
||||||
value = resolveDirective(this, value, directiveParent, 0)
|
value = resolveDirective(this, value, directiveParent, 0)
|
||||||
change =
|
change =
|
||||||
!isPrimitive(value) ||
|
!isPrimitive(value) ||
|
||||||
(value !== this._$committedValue && value !== noChange)
|
(value !== this._$committedValue && value !== NO_CHANGE)
|
||||||
if (change) {
|
if (change) {
|
||||||
this._$committedValue = value
|
this._$committedValue = value
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
const values = value
|
const values = value
|
||||||
value = strings[0]
|
value = strings[0]
|
||||||
let i, v
|
|
||||||
for (i = 0; i < strings.length - 1; i++) {
|
for (let i = 0; i < strings.length - 1; i++) {
|
||||||
v = resolveDirective(this, values[valueIndex + i], directiveParent, i)
|
let v = resolveDirective(
|
||||||
if (v === noChange) {
|
this,
|
||||||
|
values[valueIndex + i],
|
||||||
|
directiveParent,
|
||||||
|
i
|
||||||
|
)
|
||||||
|
if (v === NO_CHANGE) {
|
||||||
v = this._$committedValue[i]
|
v = this._$committedValue[i]
|
||||||
}
|
}
|
||||||
change || (change = !isPrimitive(v) || v !== this._$committedValue[i])
|
change || (change = !isPrimitive(v) || v !== this._$committedValue[i])
|
||||||
if (v === nothing) {
|
if (v === NOTHING) {
|
||||||
value = nothing
|
value = NOTHING
|
||||||
} else if (value !== nothing) {
|
} else if (value !== NOTHING) {
|
||||||
value += (v !== null && v !== void 0 ? v : '') + strings[i + 1]
|
value += (v !== null && v !== void 0 ? v : '') + strings[i + 1]
|
||||||
}
|
}
|
||||||
this._$committedValue[i] = v
|
this._$committedValue[i] = v
|
||||||
|
@ -623,7 +616,7 @@ class AttributePart {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
_commitValue(value) {
|
_commitValue(value) {
|
||||||
if (value === nothing) {
|
if (value === NOTHING) {
|
||||||
this.element.removeAttribute(this.name)
|
this.element.removeAttribute(this.name)
|
||||||
} else {
|
} else {
|
||||||
if (ENABLE_EXTRA_SECURITY_HOOKS) {
|
if (ENABLE_EXTRA_SECURITY_HOOKS) {
|
||||||
|
@ -661,7 +654,7 @@ class PropertyPart extends AttributePart {
|
||||||
value = this._sanitizer(value)
|
value = this._sanitizer(value)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.element[this.name] = value === nothing ? void 0 : value
|
this.element[this.name] = value === NOTHING ? void 0 : value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var emptyStringForBooleanAttribute2 = ''
|
var emptyStringForBooleanAttribute2 = ''
|
||||||
|
@ -671,7 +664,7 @@ class BooleanAttributePart extends AttributePart {
|
||||||
this.type = BOOLEAN_ATTRIBUTE_PART
|
this.type = BOOLEAN_ATTRIBUTE_PART
|
||||||
}
|
}
|
||||||
_commitValue(value) {
|
_commitValue(value) {
|
||||||
if (value && value !== nothing) {
|
if (value && value !== NOTHING) {
|
||||||
this.element.setAttribute(this.name, emptyStringForBooleanAttribute2)
|
this.element.setAttribute(this.name, emptyStringForBooleanAttribute2)
|
||||||
} else {
|
} else {
|
||||||
this.element.removeAttribute(this.name)
|
this.element.removeAttribute(this.name)
|
||||||
|
@ -685,20 +678,20 @@ class EventPart extends AttributePart {
|
||||||
}
|
}
|
||||||
_$setValue(newListener, directiveParent = this) {
|
_$setValue(newListener, directiveParent = this) {
|
||||||
newListener =
|
newListener =
|
||||||
resolveDirective(this, newListener, directiveParent, 0) || nothing
|
resolveDirective(this, newListener, directiveParent, 0) || NOTHING
|
||||||
|
|
||||||
if (newListener === noChange) {
|
if (newListener === NO_CHANGE) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const oldListener = this._$committedValue
|
const oldListener = this._$committedValue
|
||||||
const shouldRemoveListener =
|
const shouldRemoveListener =
|
||||||
(newListener === nothing && oldListener !== nothing) ||
|
(newListener === NOTHING && oldListener !== NOTHING) ||
|
||||||
newListener.capture !== oldListener.capture ||
|
newListener.capture !== oldListener.capture ||
|
||||||
newListener.once !== oldListener.once ||
|
newListener.once !== oldListener.once ||
|
||||||
newListener.passive !== oldListener.passive
|
newListener.passive !== oldListener.passive
|
||||||
const shouldAddListener =
|
const shouldAddListener =
|
||||||
newListener !== nothing &&
|
newListener !== NOTHING &&
|
||||||
(oldListener === nothing || shouldRemoveListener)
|
(oldListener === NOTHING || shouldRemoveListener)
|
||||||
|
|
||||||
if (shouldRemoveListener) {
|
if (shouldRemoveListener) {
|
||||||
this.element.removeEventListener(this.name, this, oldListener)
|
this.element.removeEventListener(this.name, this, oldListener)
|
||||||
|
@ -752,6 +745,22 @@ export function render(value, container, options) {
|
||||||
|
|
||||||
return part
|
return part
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const html = (strings, ...values) => {
|
||||||
|
return {
|
||||||
|
__dom_type__: HTML_RESULT,
|
||||||
|
strings,
|
||||||
|
values
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export const svg = (strings, ...values) => {
|
||||||
|
return {
|
||||||
|
__dom_type__: SVG_RESULT,
|
||||||
|
strings,
|
||||||
|
values
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (ENABLE_EXTRA_SECURITY_HOOKS) {
|
if (ENABLE_EXTRA_SECURITY_HOOKS) {
|
||||||
render.setSanitizer = setSanitizer
|
render.setSanitizer = setSanitizer
|
||||||
render.createSanitizer = createSanitizer
|
render.createSanitizer = createSanitizer
|
||||||
|
|
Loading…
Reference in New Issue