710 lines
19 KiB
JavaScript
710 lines
19 KiB
JavaScript
/**
|
|
* {模板解析, 基于 lit-html 二次开发}
|
|
* @author yutent<yutent.io@gmail.com>
|
|
* @date 2023/03/7 16:36:59
|
|
*/
|
|
|
|
import { boolMap, WC_PART, NOTHING } from './constants.js'
|
|
import { animate, MODES } from './anim.js'
|
|
|
|
const boundAttributeSuffix = '$wc$'
|
|
const marker = `wc$${String(Math.random()).slice(9)}$`
|
|
const markerMatch = '?' + marker
|
|
const nodeMarker = `<${markerMatch}>`
|
|
const createMarker = (v = '') => document.createComment(v)
|
|
const isPrimitive = value =>
|
|
value === null || (typeof value != 'object' && typeof value != 'function')
|
|
const isArray = Array.isArray
|
|
const isIterable = value =>
|
|
isArray(value) ||
|
|
typeof (value === null || value === void 0
|
|
? false
|
|
: value[Symbol.iterator]) === 'function'
|
|
const SPACE_CHAR = `[ \n\f\r]`
|
|
const ATTR_VALUE_CHAR = `[^ \n\f\r"'\`<>=]`
|
|
const NAME_CHAR = `[^\\s"'>=/]`
|
|
const textEndRegex = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g
|
|
const COMMENT_START = 1
|
|
const TAG_NAME = 2
|
|
const DYNAMIC_TAG_NAME = 3
|
|
const commentEndRegex = /-->/g
|
|
const comment2EndRegex = />/g
|
|
const tagEndRegex = new RegExp(
|
|
`>|${SPACE_CHAR}(?:(${NAME_CHAR}+)(${SPACE_CHAR}*=${SPACE_CHAR}*(?:${ATTR_VALUE_CHAR}|("|')|))|$)`,
|
|
'g'
|
|
)
|
|
const ENTIRE_MATCH = 0
|
|
const ATTRIBUTE_NAME = 1
|
|
const SPACES_AND_EQUALS = 2
|
|
const QUOTE_CHAR = 3
|
|
const singleQuoteAttrEndRegex = /'/g
|
|
const doubleQuoteAttrEndRegex = /"/g
|
|
const rawTextElement = /^(?:script|style|textarea|title)$/i
|
|
const HTML_RESULT = 1
|
|
const SVG_RESULT = 2
|
|
const ATTRIBUTE_PART = 1
|
|
const CHILD_PART = 2
|
|
const EVENT_PART = 5
|
|
const ELEMENT_PART = 6
|
|
const COMMENT_PART = 7
|
|
|
|
const TEMPLATE_CACHE = new Map()
|
|
const walker = document.createTreeWalker(document, 129, null, false)
|
|
|
|
function noop() {}
|
|
|
|
function getTemplateHtml(strings, type) {
|
|
let len = strings.length - 1
|
|
let attrNames = []
|
|
let html2 = type === SVG_RESULT ? '<svg>' : ''
|
|
let rawTextEndRegex
|
|
let regex = textEndRegex
|
|
for (let i = 0; i < len; i++) {
|
|
let s = strings[i]
|
|
let attrNameEndIndex = -1
|
|
let attrName
|
|
let lastIndex = 0
|
|
let match
|
|
while (lastIndex < s.length) {
|
|
regex.lastIndex = lastIndex
|
|
match = regex.exec(s)
|
|
if (match === null) {
|
|
break
|
|
}
|
|
lastIndex = regex.lastIndex
|
|
if (regex === textEndRegex) {
|
|
if (match[COMMENT_START] === '!--') {
|
|
regex = commentEndRegex
|
|
} else if (match[COMMENT_START] !== void 0) {
|
|
regex = comment2EndRegex
|
|
} else if (match[TAG_NAME] !== void 0) {
|
|
if (rawTextElement.test(match[TAG_NAME])) {
|
|
rawTextEndRegex = new RegExp(`</${match[TAG_NAME]}`, 'g')
|
|
}
|
|
regex = tagEndRegex
|
|
} else if (match[DYNAMIC_TAG_NAME] !== void 0) {
|
|
regex = tagEndRegex
|
|
}
|
|
} else if (regex === tagEndRegex) {
|
|
if (match[ENTIRE_MATCH] === '>') {
|
|
regex =
|
|
rawTextEndRegex !== null && rawTextEndRegex !== void 0
|
|
? rawTextEndRegex
|
|
: textEndRegex
|
|
attrNameEndIndex = -1
|
|
} else if (match[ATTRIBUTE_NAME] === void 0) {
|
|
attrNameEndIndex = -2
|
|
} else {
|
|
attrNameEndIndex = regex.lastIndex - match[SPACES_AND_EQUALS].length
|
|
attrName = match[ATTRIBUTE_NAME]
|
|
regex =
|
|
match[QUOTE_CHAR] === void 0
|
|
? tagEndRegex
|
|
: match[QUOTE_CHAR] === '"'
|
|
? doubleQuoteAttrEndRegex
|
|
: singleQuoteAttrEndRegex
|
|
}
|
|
} else if (
|
|
regex === doubleQuoteAttrEndRegex ||
|
|
regex === singleQuoteAttrEndRegex
|
|
) {
|
|
regex = tagEndRegex
|
|
} else if (regex === commentEndRegex || regex === comment2EndRegex) {
|
|
regex = textEndRegex
|
|
} else {
|
|
regex = tagEndRegex
|
|
rawTextEndRegex = void 0
|
|
}
|
|
}
|
|
|
|
let end =
|
|
regex === tagEndRegex && strings[i + 1].startsWith('/>') ? ' ' : ''
|
|
html2 +=
|
|
regex === textEndRegex
|
|
? s + nodeMarker
|
|
: attrNameEndIndex >= 0
|
|
? (attrNames.push(attrName),
|
|
s.slice(0, attrNameEndIndex) +
|
|
boundAttributeSuffix +
|
|
s.slice(attrNameEndIndex)) +
|
|
marker +
|
|
end
|
|
: s +
|
|
marker +
|
|
(attrNameEndIndex === -2 ? (attrNames.push(void 0), i) : end)
|
|
}
|
|
let htmlResult =
|
|
html2 + (strings[len] || '<?>') + (type === SVG_RESULT ? '</svg>' : '')
|
|
if (!Array.isArray(strings) || !strings.hasOwnProperty('raw')) {
|
|
throw new Error('invalid html ast')
|
|
}
|
|
return [htmlResult, attrNames]
|
|
}
|
|
class Template {
|
|
constructor({ strings, ['__dom_type__']: type }, options) {
|
|
this.parts = []
|
|
let node
|
|
let nodeIndex = 0
|
|
let attrNameIndex = 0
|
|
let partCount = strings.length - 1
|
|
let parts = this.parts
|
|
let [html2, attrNames] = getTemplateHtml(strings, type)
|
|
this.el = Template.createElement(html2)
|
|
walker.currentNode = this.el.content
|
|
if (type === SVG_RESULT) {
|
|
let content = this.el.content
|
|
let svgElement = content.firstChild
|
|
svgElement.remove()
|
|
content.append(...svgElement.childNodes)
|
|
}
|
|
|
|
while ((node = walker.nextNode()) !== null && parts.length < partCount) {
|
|
if (node.nodeType === 1) {
|
|
if (node.hasAttributes()) {
|
|
let attrsToRemove = []
|
|
|
|
for (let name of node.getAttributeNames()) {
|
|
if (
|
|
name.endsWith(boundAttributeSuffix) ||
|
|
name.startsWith(marker)
|
|
) {
|
|
let realName = attrNames[attrNameIndex++]
|
|
attrsToRemove.push(name)
|
|
if (realName !== void 0) {
|
|
let value = node.getAttribute(
|
|
realName.toLowerCase() + boundAttributeSuffix
|
|
)
|
|
let statics = value.split(marker)
|
|
let m = /([#:@])?(.*)/.exec(realName)
|
|
let decorates = []
|
|
|
|
if (m[1] === '@' && m[2].includes('.')) {
|
|
decorates = m[2].split('.')
|
|
m[2] = decorates.shift()
|
|
}
|
|
|
|
parts.push({
|
|
type: ATTRIBUTE_PART,
|
|
index: nodeIndex,
|
|
name: m[2],
|
|
strings: statics,
|
|
decorates,
|
|
ctor:
|
|
m[1] === ':'
|
|
? PropertyPart
|
|
: m[1] === '#' && m[2] === 'animation'
|
|
? AnimPart
|
|
: m[1] === '@'
|
|
? EventPart
|
|
: AttributePart
|
|
})
|
|
} else {
|
|
parts.push({
|
|
type: ELEMENT_PART,
|
|
index: nodeIndex
|
|
})
|
|
}
|
|
}
|
|
}
|
|
for (let name of attrsToRemove) {
|
|
node.removeAttribute(name)
|
|
}
|
|
}
|
|
if (rawTextElement.test(node.tagName)) {
|
|
let strings2 = node.textContent.split(marker)
|
|
let lastIndex = strings2.length - 1
|
|
if (lastIndex > 0) {
|
|
node.textContent = ''
|
|
for (let i = 0; i < lastIndex; i++) {
|
|
node.append(strings2[i], createMarker())
|
|
walker.nextNode()
|
|
parts.push({ type: CHILD_PART, index: ++nodeIndex })
|
|
}
|
|
node.append(strings2[lastIndex], createMarker())
|
|
}
|
|
}
|
|
} else if (node.nodeType === 8) {
|
|
let data = node.data
|
|
if (data === markerMatch) {
|
|
parts.push({ type: CHILD_PART, index: nodeIndex })
|
|
} else {
|
|
let i = -1
|
|
while ((i = node.data.indexOf(marker, i + 1)) !== -1) {
|
|
parts.push({ type: COMMENT_PART, index: nodeIndex })
|
|
i += marker.length - 1
|
|
}
|
|
}
|
|
}
|
|
nodeIndex++
|
|
}
|
|
}
|
|
static createElement(html2) {
|
|
let el = document.createElement('template')
|
|
el.innerHTML = html2
|
|
return el
|
|
}
|
|
}
|
|
|
|
class TemplateInstance {
|
|
constructor(template, parent) {
|
|
this.$parts = []
|
|
this.$template = template
|
|
this.$parent = parent
|
|
}
|
|
get parentNode() {
|
|
return this.$parent.parentNode
|
|
}
|
|
|
|
#checkRef(node, walker, options) {
|
|
do {
|
|
if (node && node.nodeType === 1 && node.getAttribute('ref')) {
|
|
options.host.$refs[node.getAttribute('ref')] = node
|
|
node.removeAttribute('ref')
|
|
}
|
|
} while ((node = walker.nextNode()) !== null)
|
|
}
|
|
|
|
_clone(options) {
|
|
let {
|
|
el: { content },
|
|
parts
|
|
} = this.$template
|
|
|
|
let fragment = document.importNode(content, true)
|
|
let nodeIndex = 0
|
|
let partIndex = 0
|
|
let templatePart = parts[0]
|
|
let node = null
|
|
|
|
walker.currentNode = fragment
|
|
node = walker.nextNode()
|
|
|
|
// 没有动态绑定时, 查一遍是否有ref属性
|
|
if (templatePart === void 0) {
|
|
this.#checkRef(node, walker, options)
|
|
} else {
|
|
while (templatePart !== void 0) {
|
|
if (node.nodeType === 1 && node.getAttribute('ref')) {
|
|
if (options.host.$refs) {
|
|
options.host.$refs[node.getAttribute('ref')] = node
|
|
node.removeAttribute('ref')
|
|
}
|
|
}
|
|
if (nodeIndex === templatePart.index) {
|
|
let part
|
|
if (templatePart.type === CHILD_PART) {
|
|
part = new ChildPart(node, node.nextSibling, this, options)
|
|
} else if (templatePart.type === ATTRIBUTE_PART) {
|
|
part = new templatePart.ctor(
|
|
node,
|
|
templatePart.name,
|
|
templatePart.strings,
|
|
templatePart.decorates,
|
|
this,
|
|
options
|
|
)
|
|
} else if (templatePart.type === ELEMENT_PART) {
|
|
part = new ElementPart(node, this, options)
|
|
}
|
|
this.$parts.push(part)
|
|
templatePart = parts[++partIndex]
|
|
}
|
|
if (
|
|
nodeIndex !==
|
|
(templatePart === null || templatePart === void 0
|
|
? void 0
|
|
: templatePart.index)
|
|
) {
|
|
node = walker.nextNode()
|
|
nodeIndex++
|
|
}
|
|
}
|
|
// 再检查剩下没有动态绑定的节点
|
|
this.#checkRef(node, walker, options)
|
|
}
|
|
|
|
return fragment
|
|
}
|
|
_update(values) {
|
|
let i = 0
|
|
for (let part of this.$parts) {
|
|
if (part !== void 0) {
|
|
if (part.strings !== void 0) {
|
|
part.$setValue(values, i)
|
|
i += part.strings.length - 2
|
|
} else {
|
|
part.$setValue(values[i])
|
|
}
|
|
}
|
|
i++
|
|
}
|
|
}
|
|
}
|
|
|
|
class ChildPart {
|
|
constructor(startNode, endNode, parent, options) {
|
|
this.type = CHILD_PART
|
|
this._$committedValue = NOTHING
|
|
this.startNode = startNode
|
|
this.endNode = endNode
|
|
this.$parent = parent
|
|
this.options = options
|
|
}
|
|
|
|
get parentNode() {
|
|
let parentNode = this.startNode.parentNode
|
|
let parent = this.$parent
|
|
if (parent !== void 0 && parentNode.nodeType === 11) {
|
|
parentNode = parent.parentNode
|
|
}
|
|
return parentNode
|
|
}
|
|
|
|
$setValue(value) {
|
|
if (isPrimitive(value)) {
|
|
if (value === NOTHING || value == null || value === '') {
|
|
if (this._$committedValue !== NOTHING) {
|
|
this.#clear()
|
|
}
|
|
this._$committedValue = NOTHING
|
|
} else if (value !== this._$committedValue) {
|
|
this._commitText(value)
|
|
}
|
|
} else if (value['__dom_type__'] !== void 0) {
|
|
this._commitTemplateResult(value)
|
|
} else if (value.nodeType !== void 0) {
|
|
this._commitNode(value)
|
|
} else if (isIterable(value)) {
|
|
this._commitIterable(value)
|
|
} else {
|
|
this._commitText(value)
|
|
}
|
|
}
|
|
_insert(node, target = this.endNode) {
|
|
return this.startNode.parentNode.insertBefore(node, target)
|
|
}
|
|
_commitNode(value) {
|
|
if (this._$committedValue !== value) {
|
|
this.#clear()
|
|
this._$committedValue = this._insert(value)
|
|
}
|
|
}
|
|
_commitText(value) {
|
|
if (
|
|
this._$committedValue !== NOTHING &&
|
|
isPrimitive(this._$committedValue)
|
|
) {
|
|
let node = this.startNode.nextSibling
|
|
|
|
node.data = value
|
|
} else {
|
|
this._commitNode(document.createTextNode(value))
|
|
}
|
|
this._$committedValue = value
|
|
}
|
|
_commitTemplateResult(result) {
|
|
let { values, ['__dom_type__']: type } = result
|
|
let template =
|
|
typeof type === 'number'
|
|
? this.#getTemplate(result)
|
|
: (type.el === void 0 && (type.el = Template.createElement(type.h)),
|
|
type)
|
|
|
|
if (this._$committedValue?.$template === template) {
|
|
this._$committedValue._update(values)
|
|
} else {
|
|
let instance = new TemplateInstance(template, this)
|
|
let fragment = instance._clone(this.options)
|
|
|
|
instance._update(values)
|
|
|
|
this._commitNode(fragment)
|
|
this._$committedValue = instance
|
|
}
|
|
}
|
|
#getTemplate(result) {
|
|
let template = TEMPLATE_CACHE.get(result.strings.join())
|
|
|
|
if (template === void 0) {
|
|
template = new Template(result, this.options)
|
|
TEMPLATE_CACHE.set(result.strings.join(), template)
|
|
}
|
|
return template
|
|
}
|
|
_commitIterable(value) {
|
|
if (!isArray(this._$committedValue)) {
|
|
this._$committedValue = []
|
|
this.#clear()
|
|
}
|
|
let itemParts = this._$committedValue
|
|
let partIndex = 0
|
|
let itemPart
|
|
for (let item of value) {
|
|
if (partIndex === itemParts.length) {
|
|
itemParts.push(
|
|
(itemPart = new ChildPart(
|
|
this._insert(createMarker()),
|
|
this._insert(createMarker()),
|
|
this,
|
|
this.options
|
|
))
|
|
)
|
|
} else {
|
|
itemPart = itemParts[partIndex]
|
|
}
|
|
itemPart.$setValue(item)
|
|
partIndex++
|
|
}
|
|
if (partIndex < itemParts.length) {
|
|
this.#clear(itemPart && itemPart.endNode.nextSibling, partIndex)
|
|
itemParts.length = partIndex
|
|
}
|
|
}
|
|
|
|
#clear(start = this.startNode.nextSibling, from) {
|
|
while (start && start !== this.endNode) {
|
|
let node = start.nextSibling
|
|
start.remove()
|
|
start = node
|
|
}
|
|
}
|
|
}
|
|
// 常规属性
|
|
class AttributePart {
|
|
constructor(element, name, strings, decorates, parent, options = {}) {
|
|
this.type = ATTRIBUTE_PART
|
|
this._$committedValue = NOTHING
|
|
this.element = element
|
|
this.name = name
|
|
this.decorates = decorates
|
|
this.$parent = parent
|
|
this.options = options
|
|
if (strings.length > 2 || strings[0] !== '' || strings[1] !== '') {
|
|
this._$committedValue = new Array(strings.length - 1).fill(new String())
|
|
this.strings = strings
|
|
} else {
|
|
this._$committedValue = NOTHING
|
|
}
|
|
}
|
|
get tagName() {
|
|
return this.element.tagName
|
|
}
|
|
|
|
$setValue(value, valueIndex) {
|
|
let strings = this.strings
|
|
let changed = false
|
|
if (strings === void 0) {
|
|
changed = !isPrimitive(value) || value !== this._$committedValue
|
|
if (changed) {
|
|
this._$committedValue = value
|
|
}
|
|
} else {
|
|
let values = value
|
|
value = strings[0]
|
|
|
|
for (let i = 0; i < strings.length - 1; i++) {
|
|
let v = values[valueIndex + i]
|
|
|
|
changed || (changed = !isPrimitive(v) || v !== this._$committedValue[i])
|
|
if (v === NOTHING) {
|
|
value = NOTHING
|
|
} else if (value !== NOTHING) {
|
|
value += (v !== null && v !== void 0 ? v : '') + strings[i + 1]
|
|
}
|
|
this._$committedValue[i] = v
|
|
}
|
|
}
|
|
if (changed) {
|
|
this.commitValue(value)
|
|
}
|
|
}
|
|
|
|
commitValue(value) {
|
|
let isBoolAttr = boolMap[this.name]
|
|
// ref属性不渲染到节点上
|
|
if (this.name === 'ref') {
|
|
this.options.host.$refs[value] = this.element
|
|
return
|
|
}
|
|
|
|
if (isBoolAttr) {
|
|
this.element[isBoolAttr] = !(value === false || value === null)
|
|
|
|
if (this.element[isBoolAttr]) {
|
|
this.element.setAttribute(this.name, '')
|
|
} else {
|
|
this.element.removeAttribute(this.name)
|
|
}
|
|
} else {
|
|
if (value === null || value === void 0) {
|
|
this.element.removeAttribute(this.name)
|
|
} else {
|
|
this.element.setAttribute(this.name, value)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 赋值属性
|
|
class PropertyPart extends AttributePart {
|
|
constructor(...args) {
|
|
super(...args)
|
|
}
|
|
|
|
commitValue(value) {
|
|
this.element[this.name] = value
|
|
}
|
|
}
|
|
// 动画属性
|
|
class AnimPart extends AttributePart {
|
|
constructor(...args) {
|
|
super(...args)
|
|
}
|
|
|
|
commitValue({ type = 'fade', duration, custom, immediate = false } = {}) {
|
|
let fromto = MODES[type] || MODES.fade
|
|
|
|
if (custom) {
|
|
fromto = custom
|
|
}
|
|
this.element.$animate = function (out = false) {
|
|
return animate.call(this, duration, fromto, out)
|
|
}
|
|
this.element.$animate.immediate = immediate
|
|
}
|
|
}
|
|
|
|
// 事件属性
|
|
class EventPart extends AttributePart {
|
|
#listener = null
|
|
|
|
#prevent = noop
|
|
#stop = noop
|
|
#checkSelf = noop
|
|
|
|
constructor(...args) {
|
|
super(...args)
|
|
this.type = EVENT_PART
|
|
}
|
|
|
|
$setValue(listener) {
|
|
let host = this.options.host
|
|
let options = {}
|
|
|
|
if (this.decorates.length) {
|
|
for (let it of this.decorates) {
|
|
switch (it) {
|
|
case 'stop':
|
|
this.#stop = ev => ev.stopPropagation()
|
|
break
|
|
case 'prevent':
|
|
this.#prevent = ev => ev.preventDefault()
|
|
break
|
|
case 'self':
|
|
this.#checkSelf = ev => ev.target === this.element
|
|
break
|
|
case 'capture':
|
|
case 'once':
|
|
case 'passive':
|
|
options[it] = true
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
let shouldRemove = listener !== this.#listener
|
|
|
|
if (this.#listener && host.$events[this.name]) {
|
|
for (let it of host.$events[this.name]) {
|
|
if (it.el === this.element) {
|
|
shouldRemove =
|
|
options.capture !== it.capture ||
|
|
options.once !== it.once ||
|
|
options.passive !== it.passive
|
|
if (shouldRemove) {
|
|
this.element.removeEventListener(this.name, it.listener, it.options)
|
|
}
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
if (listener && shouldRemove) {
|
|
this.element.addEventListener(this.name, this, options)
|
|
this.#listener = listener
|
|
|
|
if (host.$events[this.name]) {
|
|
host.$events[this.name].push({
|
|
el: this.element,
|
|
listener: this,
|
|
options
|
|
})
|
|
} else {
|
|
host.$events[this.name] = [
|
|
{
|
|
el: this.element,
|
|
listener: this,
|
|
options
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
handleEvent(ev) {
|
|
this.#stop(ev)
|
|
this.#prevent(ev)
|
|
if (this.#checkSelf(ev) === false) {
|
|
return
|
|
}
|
|
this.#listener.call(this.options.host, ev)
|
|
}
|
|
}
|
|
|
|
class ElementPart {
|
|
constructor(element, parent, options) {
|
|
this.element = element
|
|
this.type = ELEMENT_PART
|
|
this.$parent = parent
|
|
this.options = options
|
|
}
|
|
|
|
$setValue(value) {}
|
|
}
|
|
|
|
export function render(value, container, options = {}) {
|
|
let part = container[WC_PART]
|
|
|
|
if (part === void 0) {
|
|
part = new ChildPart(
|
|
container.insertBefore(createMarker(), null),
|
|
null,
|
|
void 0,
|
|
options
|
|
)
|
|
container[WC_PART] = part
|
|
}
|
|
part.$setValue(value)
|
|
|
|
return part
|
|
}
|
|
|
|
export function html(strings, ...values) {
|
|
return {
|
|
__dom_type__: HTML_RESULT,
|
|
strings,
|
|
values
|
|
}
|
|
}
|
|
|
|
export function raw(str, values = []) {
|
|
let strings = values.length ? str.split('%s') : [str]
|
|
strings.raw = true
|
|
return html(strings, ...values)
|
|
}
|
|
export function svg(strings, ...values) {
|
|
return {
|
|
__dom_type__: SVG_RESULT,
|
|
strings,
|
|
values
|
|
}
|
|
}
|
JavaScript
97%
HTML
3%