精简AST,;增加range

master 1.10.9
yutent 2023-09-21 10:24:53 +08:00
parent fd154f1bcf
commit 4ebf74f40f
4 changed files with 57 additions and 29 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "wkit", "name": "wkit",
"version": "1.10.8", "version": "1.10.9",
"type": "module", "type": "module",
"description": "A library for building fast, lightweight web components.", "description": "A library for building fast, lightweight web components.",
"main": "dist/index.js", "main": "dist/index.js",

View File

@ -247,12 +247,12 @@ class Template {
class TemplateInstance { class TemplateInstance {
constructor(template, parent) { constructor(template, parent) {
this._parts = [] this.$parts = []
this._$template = template this.$template = template
this._$parent = parent this.$parent = parent
} }
get parentNode() { get parentNode() {
return this._$parent.parentNode return this.$parent.parentNode
} }
#checkRef(node, walker, options) { #checkRef(node, walker, options) {
@ -268,7 +268,7 @@ class TemplateInstance {
let { let {
el: { content }, el: { content },
parts parts
} = this._$template } = this.$template
let fragment = document.importNode(content, true) let fragment = document.importNode(content, true)
let nodeIndex = 0 let nodeIndex = 0
@ -306,7 +306,7 @@ class TemplateInstance {
} else if (templatePart.type === ELEMENT_PART) { } else if (templatePart.type === ELEMENT_PART) {
part = new ElementPart(node, this, options) part = new ElementPart(node, this, options)
} }
this._parts.push(part) this.$parts.push(part)
templatePart = parts[++partIndex] templatePart = parts[++partIndex]
} }
if ( if (
@ -327,7 +327,7 @@ class TemplateInstance {
} }
_update(values) { _update(values) {
let i = 0 let i = 0
for (let part of this._parts) { for (let part of this.$parts) {
if (part !== void 0) { if (part !== void 0) {
if (part.strings !== void 0) { if (part.strings !== void 0) {
part.$setValue(values, i) part.$setValue(values, i)
@ -345,26 +345,21 @@ class ChildPart {
constructor(startNode, endNode, parent, options) { constructor(startNode, endNode, parent, options) {
this.type = CHILD_PART this.type = CHILD_PART
this._$committedValue = NOTHING this._$committedValue = NOTHING
this._$startNode = startNode this.startNode = startNode
this._$endNode = endNode this.endNode = endNode
this._$parent = parent this.$parent = parent
this.options = options this.options = options
} }
get parentNode() { get parentNode() {
let parentNode = this._$startNode.parentNode let parentNode = this.startNode.parentNode
let parent = this._$parent let parent = this.$parent
if (parent !== void 0 && parentNode.nodeType === 11) { if (parent !== void 0 && parentNode.nodeType === 11) {
parentNode = parent.parentNode parentNode = parent.parentNode
} }
return parentNode return parentNode
} }
get startNode() {
return this._$startNode
}
get endNode() {
return this._$endNode
}
$setValue(value) { $setValue(value) {
if (isPrimitive(value)) { if (isPrimitive(value)) {
if (value === NOTHING || value == null || value === '') { if (value === NOTHING || value == null || value === '') {
@ -385,8 +380,8 @@ class ChildPart {
this._commitText(value) this._commitText(value)
} }
} }
_insert(node, target = this._$endNode) { _insert(node, target = this.endNode) {
return this._$startNode.parentNode.insertBefore(node, target) return this.startNode.parentNode.insertBefore(node, target)
} }
_commitNode(value) { _commitNode(value) {
if (this._$committedValue !== value) { if (this._$committedValue !== value) {
@ -399,7 +394,7 @@ class ChildPart {
this._$committedValue !== NOTHING && this._$committedValue !== NOTHING &&
isPrimitive(this._$committedValue) isPrimitive(this._$committedValue)
) { ) {
let node = this._$startNode.nextSibling let node = this.startNode.nextSibling
node.data = value node.data = value
} else { } else {
@ -415,7 +410,7 @@ class ChildPart {
: (type.el === void 0 && (type.el = Template.createElement(type.h)), : (type.el === void 0 && (type.el = Template.createElement(type.h)),
type) type)
if (this._$committedValue?._$template === template) { if (this._$committedValue?.$template === template) {
this._$committedValue._update(values) this._$committedValue._update(values)
} else { } else {
let instance = new TemplateInstance(template, this) let instance = new TemplateInstance(template, this)
@ -461,13 +456,13 @@ class ChildPart {
partIndex++ partIndex++
} }
if (partIndex < itemParts.length) { if (partIndex < itemParts.length) {
this.#clear(itemPart && itemPart._$endNode.nextSibling, partIndex) this.#clear(itemPart && itemPart.endNode.nextSibling, partIndex)
itemParts.length = partIndex itemParts.length = partIndex
} }
} }
#clear(start = this._$startNode.nextSibling, from) { #clear(start = this.startNode.nextSibling, from) {
while (start && start !== this._$endNode) { while (start && start !== this.endNode) {
let node = start.nextSibling let node = start.nextSibling
start.remove() start.remove()
start = node start = node
@ -482,7 +477,7 @@ class AttributePart {
this.element = element this.element = element
this.name = name this.name = name
this.decorates = decorates this.decorates = decorates
this._$parent = parent this.$parent = parent
this.options = options this.options = options
if (strings.length > 2 || strings[0] !== '' || strings[1] !== '') { if (strings.length > 2 || strings[0] !== '' || strings[1] !== '') {
this._$committedValue = new Array(strings.length - 1).fill(new String()) this._$committedValue = new Array(strings.length - 1).fill(new String())
@ -668,7 +663,7 @@ class ElementPart {
constructor(element, parent, options) { constructor(element, parent, options) {
this.element = element this.element = element
this.type = ELEMENT_PART this.type = ELEMENT_PART
this._$parent = parent this.$parent = parent
this.options = options this.options = options
} }

View File

@ -21,7 +21,14 @@ import { render, html, svg, raw } from './html.js'
import { animate, MODES } from './anim.js' import { animate, MODES } from './anim.js'
import { nextTick, fire, bind, unbind, hyphen, camelize } from './utils.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 } export { html, raw, css, svg, bind, unbind, nextTick, fire, hyphen, camelize }
// 简单的类名解析 // 简单的类名解析

View File

@ -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) { export function hyphen(target) {
return target.replace(/([a-z\d])([A-Z]+)/g, '$1-$2').toLowerCase() return target.replace(/([a-z\d])([A-Z]+)/g, '$1-$2').toLowerCase()