diff --git a/package.json b/package.json index fb52421..6363fc7 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/html.js b/src/html.js index 55cd9b0..32cb201 100644 --- a/src/html.js +++ b/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 } diff --git a/src/index.js b/src/index.js index af2c50a..3316c42 100644 --- a/src/index.js +++ b/src/index.js @@ -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 } // 简单的类名解析 diff --git a/src/utils.js b/src/utils.js index 3dae653..17b507b 100644 --- a/src/utils.js +++ b/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()