parent
fd154f1bcf
commit
4ebf74f40f
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "wkit",
|
||||
"version": "1.10.8",
|
||||
"version": "1.10.9",
|
||||
"type": "module",
|
||||
"description": "A library for building fast, lightweight web components.",
|
||||
"main": "dist/index.js",
|
||||
|
|
49
src/html.js
49
src/html.js
|
@ -247,12 +247,12 @@ class Template {
|
|||
|
||||
class TemplateInstance {
|
||||
constructor(template, parent) {
|
||||
this._parts = []
|
||||
this._$template = template
|
||||
this._$parent = parent
|
||||
this.$parts = []
|
||||
this.$template = template
|
||||
this.$parent = parent
|
||||
}
|
||||
get parentNode() {
|
||||
return this._$parent.parentNode
|
||||
return this.$parent.parentNode
|
||||
}
|
||||
|
||||
#checkRef(node, walker, options) {
|
||||
|
@ -268,7 +268,7 @@ class TemplateInstance {
|
|||
let {
|
||||
el: { content },
|
||||
parts
|
||||
} = this._$template
|
||||
} = this.$template
|
||||
|
||||
let fragment = document.importNode(content, true)
|
||||
let nodeIndex = 0
|
||||
|
@ -306,7 +306,7 @@ class TemplateInstance {
|
|||
} else if (templatePart.type === ELEMENT_PART) {
|
||||
part = new ElementPart(node, this, options)
|
||||
}
|
||||
this._parts.push(part)
|
||||
this.$parts.push(part)
|
||||
templatePart = parts[++partIndex]
|
||||
}
|
||||
if (
|
||||
|
@ -327,7 +327,7 @@ class TemplateInstance {
|
|||
}
|
||||
_update(values) {
|
||||
let i = 0
|
||||
for (let part of this._parts) {
|
||||
for (let part of this.$parts) {
|
||||
if (part !== void 0) {
|
||||
if (part.strings !== void 0) {
|
||||
part.$setValue(values, i)
|
||||
|
@ -345,26 +345,21 @@ class ChildPart {
|
|||
constructor(startNode, endNode, parent, options) {
|
||||
this.type = CHILD_PART
|
||||
this._$committedValue = NOTHING
|
||||
this._$startNode = startNode
|
||||
this._$endNode = endNode
|
||||
this._$parent = parent
|
||||
this.startNode = startNode
|
||||
this.endNode = endNode
|
||||
this.$parent = parent
|
||||
this.options = options
|
||||
}
|
||||
|
||||
get parentNode() {
|
||||
let parentNode = this._$startNode.parentNode
|
||||
let parent = this._$parent
|
||||
let parentNode = this.startNode.parentNode
|
||||
let parent = this.$parent
|
||||
if (parent !== void 0 && parentNode.nodeType === 11) {
|
||||
parentNode = parent.parentNode
|
||||
}
|
||||
return parentNode
|
||||
}
|
||||
get startNode() {
|
||||
return this._$startNode
|
||||
}
|
||||
get endNode() {
|
||||
return this._$endNode
|
||||
}
|
||||
|
||||
$setValue(value) {
|
||||
if (isPrimitive(value)) {
|
||||
if (value === NOTHING || value == null || value === '') {
|
||||
|
@ -385,8 +380,8 @@ class ChildPart {
|
|||
this._commitText(value)
|
||||
}
|
||||
}
|
||||
_insert(node, target = this._$endNode) {
|
||||
return this._$startNode.parentNode.insertBefore(node, target)
|
||||
_insert(node, target = this.endNode) {
|
||||
return this.startNode.parentNode.insertBefore(node, target)
|
||||
}
|
||||
_commitNode(value) {
|
||||
if (this._$committedValue !== value) {
|
||||
|
@ -399,7 +394,7 @@ class ChildPart {
|
|||
this._$committedValue !== NOTHING &&
|
||||
isPrimitive(this._$committedValue)
|
||||
) {
|
||||
let node = this._$startNode.nextSibling
|
||||
let node = this.startNode.nextSibling
|
||||
|
||||
node.data = value
|
||||
} else {
|
||||
|
@ -415,7 +410,7 @@ class ChildPart {
|
|||
: (type.el === void 0 && (type.el = Template.createElement(type.h)),
|
||||
type)
|
||||
|
||||
if (this._$committedValue?._$template === template) {
|
||||
if (this._$committedValue?.$template === template) {
|
||||
this._$committedValue._update(values)
|
||||
} else {
|
||||
let instance = new TemplateInstance(template, this)
|
||||
|
@ -461,13 +456,13 @@ class ChildPart {
|
|||
partIndex++
|
||||
}
|
||||
if (partIndex < itemParts.length) {
|
||||
this.#clear(itemPart && itemPart._$endNode.nextSibling, partIndex)
|
||||
this.#clear(itemPart && itemPart.endNode.nextSibling, partIndex)
|
||||
itemParts.length = partIndex
|
||||
}
|
||||
}
|
||||
|
||||
#clear(start = this._$startNode.nextSibling, from) {
|
||||
while (start && start !== this._$endNode) {
|
||||
#clear(start = this.startNode.nextSibling, from) {
|
||||
while (start && start !== this.endNode) {
|
||||
let node = start.nextSibling
|
||||
start.remove()
|
||||
start = node
|
||||
|
@ -482,7 +477,7 @@ class AttributePart {
|
|||
this.element = element
|
||||
this.name = name
|
||||
this.decorates = decorates
|
||||
this._$parent = parent
|
||||
this.$parent = parent
|
||||
this.options = options
|
||||
if (strings.length > 2 || strings[0] !== '' || strings[1] !== '') {
|
||||
this._$committedValue = new Array(strings.length - 1).fill(new String())
|
||||
|
@ -668,7 +663,7 @@ class ElementPart {
|
|||
constructor(element, parent, options) {
|
||||
this.element = element
|
||||
this.type = ELEMENT_PART
|
||||
this._$parent = parent
|
||||
this.$parent = parent
|
||||
this.options = options
|
||||
}
|
||||
|
||||
|
|
|
@ -21,7 +21,14 @@ import { render, html, svg, raw } from './html.js'
|
|||
import { animate, MODES } from './anim.js'
|
||||
import { nextTick, fire, bind, unbind, hyphen, camelize } from './utils.js'
|
||||
|
||||
export { $, $$, offset, outsideClick, clearOutsideClick } from './utils.js'
|
||||
export {
|
||||
$,
|
||||
$$,
|
||||
range,
|
||||
offset,
|
||||
outsideClick,
|
||||
clearOutsideClick
|
||||
} from './utils.js'
|
||||
export { html, raw, css, svg, bind, unbind, nextTick, fire, hyphen, camelize }
|
||||
|
||||
// 简单的类名解析
|
||||
|
|
26
src/utils.js
26
src/utils.js
|
@ -43,6 +43,32 @@ export const nextTick = (function () {
|
|||
}
|
||||
})()
|
||||
|
||||
export function range(...args) {
|
||||
let start = 0,
|
||||
end = 0,
|
||||
step = 1,
|
||||
out = []
|
||||
switch (args.length) {
|
||||
case 1:
|
||||
end = args[0]
|
||||
break
|
||||
case 2:
|
||||
case 3:
|
||||
;[start, end, step = 1] = args
|
||||
step = Math.abs(step) || 1
|
||||
break
|
||||
}
|
||||
|
||||
if (start > end) {
|
||||
;[start, end] = [end, start]
|
||||
}
|
||||
|
||||
for (let i = start; i < end; i += step) {
|
||||
out.push(i)
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
//驼峰转换为连字符线风格
|
||||
export function hyphen(target) {
|
||||
return target.replace(/([a-z\d])([A-Z]+)/g, '$1-$2').toLowerCase()
|
||||
|
|
Loading…
Reference in New Issue