update

一小波优化

.gitignore

@@ -1,12 +1,9 @@
 *.min.js
 .httpserver
-index.html
-test.js
 .vscode
 node_modules/
 dist/
-*.sublime-project
-*.sublime-workspace
+
 package-lock.json
 
 

.npmignore

@@ -0,0 +1 @@
+test/

Readme.md

@@ -1,12 +1,30 @@
-## 9号UI组件库的核心
+## Wkit
+> 一个简单易用、功能完善的用于开发`web components`的轻量级开发库。模板解析基于`lit-html`二次开发
+
+![downloads](https://img.shields.io/npm/dt/wkit.svg)
+![version](https://img.shields.io/npm/v/wkit.svg)
 
 ### 开发文档
-[开发文档](https://github.com/bd-js/core/wiki)
+[开发文档](https://git.wkit.fun/bytedo/wkit/wiki)
+
+
+### 我们的特色
+
+- `@xxx=yyy` 事件绑定, 可以任意节点上直接使用类似`vue事件绑定`的这种写法, 就可实现事件绑定。组件被移出文档时, 事件会**自动销毁**, 无须手动销毁。
+- `@click.stop=xxx` 事件绑定支持修饰符
+- `:xxx=yyy`, 属性绑定, 类似`vue`,在属性前加上`:`, 该属性不再使用`setAttribute()`, 而是直接赋值, 可满足你需要传递复杂数据结构的需求。
+- `#animation={type}`, 开箱即用的动画配置, 内置6种动画`fade(默认), scale, bounce, micro-bounce, rotate, slide`
+- `ref=xxx`, 类似`vue`的节点标识, 可方便的在`mounted()`之后通过 `this.$refs.xxx` 来访问该节点
+- 内置特色的双向绑定方法`live()`
+- 用内置的`bind()`方法来给当前组件绑定事件时, 组件移除时事件也会自动销毁,无需手动销毁。
+- 灵活的`props`定义
+
 
 ### 示例
 
 ```js
-import { css, html, Component } from '//jscdn.ink/@bd/core/latest/index.js'
+// alias wkit='//jscdn.ink/wkit/latest/index.js'
+import { css, html, Component } from 'wkit'
 
 class Hello extends Component {
 
@@ -20,7 +38,7 @@ class Hello extends Component {
     bar: String // 简写
   }
 
-  // 若需要支持 scss, 则需要使用 @bd/wcui-cli,预处理。
+  // 若需要支持 scss语法, 则需要使用构建工具编译。
   // 可支持数组
   static styles = css`
     button { color: #09f; }
@@ -48,7 +66,12 @@ class Hello extends Component {
 
 }
 
+if (!customElements.get('wc-hello')) {
   customElements.define('wc-hello', Hello)
+}
+// 和上面的写法等价
+// 如果不希望修改前缀`wc-`的话, 可以直接调用内置的reg方法注册组件即可。
+Hello.reg('hello')
 
 
 /* 
@@ -62,3 +85,7 @@ customElements.define('wc-hello', Hello)
 
 
 
+### 开源协议
+
+- BSD 3-Clause License (Lit框架的html模板解析的源码)
+- MIT (除Lit代码之外的所有代码)

package.json

@@ -1,26 +1,29 @@
 {
-  "name": "@bd/core",
-  "version": "1.5.4",
+  "name": "wkit",
+  "version": "1.12.0",
   "type": "module",
-  "description": "百搭UI组件库的核心",
+  "description": "A library for building fast, lightweight web components.",
   "main": "dist/index.js",
   "files": [
     "dist/*"
   ],
   "scripts": {
-    "build": "esbuild src/index.js --minify --bundle --format=esm --target=esnext --outfile=dist/index.js",
-    "build:es6": "esbuild src/index.js --minify --bundle --format=esm --target=es6 --outfile=dist/index.es6.js"
+    "build:next": "esbuild src/index.js --minify --bundle --format=esm --target=esnext --outfile=dist/index.js",
+    "build:es6": "esbuild src/index.js --minify --bundle --format=esm --target=es6 --outfile=dist/index.es6.js",
+    "build": "npm run build:next && npm run build:es6"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/bd-js/core.git"
+    "url": "https://git.wkit.fun/bytedo/wkit.git"
   },
   "keywords": [
-    "bd.js",
-    "bdjs",
-    "bd-ui",
+    "wkit",
     "wcui",
-    "bd-core"
+    "web-components",
+    "native",
+    "cross-framework",
+    "html",
+    "css"
   ],
   "devDependencies": {
     "esbuild": "^0.17.11"

src/anim.js

@@ -0,0 +1,48 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/03/29 10:28:16
+ */
+
+export function animate(duration = 200, fromto = [], out = false) {
+  if (out === false && this.style.display === 'none') {
+    this.style.display = ''
+  }
+  let res = this.animate(fromto, {
+    duration,
+    direction: out ? 'reverse' : 'normal',
+    fill: 'forwards'
+  })
+  return new Promise(resolve => {
+    res.addEventListener(
+      'finish',
+      _ => {
+        if (out) {
+          this.style.display = 'none'
+        }
+        res.cancel()
+        resolve()
+      },
+      { once: true }
+    )
+  })
+}
+export const MODES = {
+  fade: [{ opacity: 0 }, { opacity: 1 }],
+  scale: [{ transform: 'scale(0)' }, { transform: 'scale(1)' }],
+  'micro-bounce': [
+    { opacity: 0, transform: 'scale(0.8)' },
+    { transform: 'scale(1.05)', opacity: 1 },
+    { transform: 'scale(1)' }
+  ],
+  slide: [
+    { opacity: 0, transform: 'translateY(-50px)' },
+    { opacity: 1, transform: 'translateY(0)' }
+  ],
+  bounce: [
+    { transform: 'scale(0)' },
+    { transform: 'scale(1.2)' },
+    { transform: 'scale(1)' }
+  ],
+  rotate: [{ transform: 'rotate(0)' }, { transform: 'rotate(360deg)' }]
+}

src/constants.js

@@ -35,24 +35,17 @@ const boolMap = Object.create(null)
 
 export { boolMap }
 
+export const KEEP_ALIVE = 'keep-alive' // hyphen
+export const KEEP_ALIVE_C = 'keepAlive' // camelize
 export const WC_PART = Symbol('wc_path')
-export const NO_CHANGE = Symbol('wc-noChange')
 export const NOTHING = Symbol('wc-nothing')
 export const __finalized__ = Symbol('finalized')
-export const __render__ = Symbol('render')
-export const __init__ = Symbol('init')
 export const __props__ = Symbol('props')
 export const __changed_props__ = Symbol('changed_props')
 export const __mounted__ = Symbol('mounted')
-export const __feedback__ = Symbol('feedback')
 export const __pending__ = Symbol('pending')
-export const __prop2attr__ = Symbol('prop2attr')
-export const __attr2prop__ = Symbol('attr2prop')
-export const __clear_update__ = Symbol('clearupdate')
-export const __children__ = Symbol('children')
-export const __updated__ = Symbol('updated')
 
-export const RESET_CSS_STYLE = `* {box-sizing: border-box;margin: 0;padding: 0;}::before,::after {box-sizing: border-box;}`
+export const RESET_CSS_STYLE = `* {box-sizing: border-box;margin: 0;padding: 0;}::before,::after {box-sizing: border-box;}::selection {background: var(--selection-background, var(--color-plain-a));color: var(--selection-color, inherit);}`
 
 function getDefaultValue(type) {
   switch (type) {
@@ -86,8 +79,26 @@ function getType(v) {
         ? { type: Array, default: v }
         : { type: Object, default: v }
 
+    case 'string':
+      let type = String
+      let attribute = true
+      if (v.includes('!')) {
+        if (v.startsWith('str!')) {
+          v = v.slice(4)
+        } else if (v.startsWith('num!')) {
+          type = Number
+          v = +v.slice(4) || 0
+        } else if (v.startsWith('bool!')) {
+          type = Boolean
+          v = v.slice(5)
+          v = v !== 'false' && v !== ''
+        }
+        attribute = false
+      }
+      return { type, default: v, attribute }
+
     default:
-      return { type: String, default: v + '' }
+      return { type: null, default: '' }
   }
 }
 
@@ -117,6 +128,10 @@ export function parsePropsDeclaration(options) {
       options = { type: Array }
       break
 
+    case String:
+      options = { type: String }
+      break
+
     default:
       options = getType(options)
       break
@@ -124,7 +139,9 @@ export function parsePropsDeclaration(options) {
   options.default = options.hasOwnProperty('default')
     ? options.default
     : getDefaultValue(options.type)
-  options.attribute = true
+  options.attribute = options.hasOwnProperty('attribute')
+    ? options.attribute
+    : true
   return options
 }
 
@@ -158,6 +175,9 @@ export function fixedValue(value, options) {
         }
       }
 
+    case null:
+      return value
+
     default:
       return value === null || value === void 0 ? null : value + ''
   }

src/css.js

@@ -37,7 +37,7 @@ export function adoptStyles(root, styles = '') {
   styles = (RESET_CSS_STYLE + styles.join(' ')).trim()
   sheet.replaceSync(styles)
   if (root.adoptedStyleSheets) {
-    root.adoptedStyleSheets.push(sheet)
+    root.adoptedStyleSheets = [sheet]
   } else {
     root.appendChild(sheet.elem)
   }

src/html.js

@@ -1,28 +1,35 @@
-import { boolMap, WC_PART, NO_CHANGE, NOTHING } from './constants.js'
+/**
+ * {模板解析, 基于 lit-html 二次开发}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/03/7 16:36:59
+ */
 
-const boundAttributeSuffix = '$wc$'
-const marker = `wc$${String(Math.random()).slice(9)}$`
-const markerMatch = '?' + marker
-const nodeMarker = `<${markerMatch}>`
-const createMarker = (v = '') => document.createComment(v)
+import { boolMap, WC_PART, NOTHING } from './constants.js'
+import { animate, MODES } from './anim.js'
+import { nextTick, noop } from './utils.js'
+
+const BIND_ATTR_SUFFIX = '{{$wkit$}}'
+const MARKER = `{{^wkit${String(Math.random()).slice(-8)}^}}`
+const MARKER_MATCH = '?' + MARKER
+const NODE_MARKER = `<${MARKER_MATCH}>`
+
+// 是否原始值
 const isPrimitive = value =>
-  value === null || (typeof value != 'object' && typeof value != 'function')
+  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'
+  value ? isArray(value) || typeof value[Symbol.iterator] === 'function' : false
+
 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 TEXT_END_REGEX = /<(?:(!--|\/[^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(
+const COMMENT_END_REGEXP = /-->/g
+const COMMENT_END_REGEXP_2 = />/g
+const TAG_END_REGEXP = new RegExp(
   `>|${SPACE_CHAR}(?:(${NAME_CHAR}+)(${SPACE_CHAR}*=${SPACE_CHAR}*(?:${ATTR_VALUE_CHAR}|("|')|))|$)`,
   'g'
 )
@@ -30,9 +37,9 @@ 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 SINGLE_QUOTE_REGEXP = /'/g
+const DOUBLE_QUOTE_REGEXP = /"/g
+const RAW_TEXT_ELEM_REGEXP = /^(?:script|style|textarea|title)$/i
 const HTML_RESULT = 1
 const SVG_RESULT = 2
 const ATTRIBUTE_PART = 1
@@ -41,7 +48,7 @@ const EVENT_PART = 5
 const ELEMENT_PART = 6
 const COMMENT_PART = 7
 
-const templateCache = new WeakMap()
+const TEMPLATE_CACHE = new Map()
 const walker = document.createTreeWalker(document, 129, null, false)
 
 function getTemplateHtml(strings, type) {
@@ -49,7 +56,7 @@ function getTemplateHtml(strings, type) {
   let attrNames = []
   let html2 = type === SVG_RESULT ? '<svg>' : ''
   let rawTextEndRegex
-  let regex = textEndRegex
+  let regex = TEXT_END_REGEX
   for (let i = 0; i < len; i++) {
     let s = strings[i]
     let attrNameEndIndex = -1
@@ -63,25 +70,26 @@ function getTemplateHtml(strings, type) {
         break
       }
       lastIndex = regex.lastIndex
-      if (regex === textEndRegex) {
+
+      if (regex === TEXT_END_REGEX) {
         if (match[COMMENT_START] === '!--') {
-          regex = commentEndRegex
+          regex = COMMENT_END_REGEXP
         } else if (match[COMMENT_START] !== void 0) {
-          regex = comment2EndRegex
+          regex = COMMENT_END_REGEXP_2
         } else if (match[TAG_NAME] !== void 0) {
-          if (rawTextElement.test(match[TAG_NAME])) {
+          if (RAW_TEXT_ELEM_REGEXP.test(match[TAG_NAME])) {
             rawTextEndRegex = new RegExp(`</${match[TAG_NAME]}`, 'g')
           }
-          regex = tagEndRegex
+          regex = TAG_END_REGEXP
         } else if (match[DYNAMIC_TAG_NAME] !== void 0) {
-          regex = tagEndRegex
+          regex = TAG_END_REGEXP
         }
-      } else if (regex === tagEndRegex) {
+      } else if (regex === TAG_END_REGEXP) {
         if (match[ENTIRE_MATCH] === '>') {
           regex =
             rawTextEndRegex !== null && rawTextEndRegex !== void 0
               ? rawTextEndRegex
-              : textEndRegex
+              : TEXT_END_REGEX
           attrNameEndIndex = -1
         } else if (match[ATTRIBUTE_NAME] === void 0) {
           attrNameEndIndex = -2
@@ -90,60 +98,76 @@ function getTemplateHtml(strings, type) {
           attrName = match[ATTRIBUTE_NAME]
           regex =
             match[QUOTE_CHAR] === void 0
-              ? tagEndRegex
+              ? TAG_END_REGEXP
               : match[QUOTE_CHAR] === '"'
-              ? doubleQuoteAttrEndRegex
-              : singleQuoteAttrEndRegex
+              ? DOUBLE_QUOTE_REGEXP
+              : SINGLE_QUOTE_REGEXP
         }
       } else if (
-        regex === doubleQuoteAttrEndRegex ||
-        regex === singleQuoteAttrEndRegex
+        regex === DOUBLE_QUOTE_REGEXP ||
+        regex === SINGLE_QUOTE_REGEXP
       ) {
-        regex = tagEndRegex
-      } else if (regex === commentEndRegex || regex === comment2EndRegex) {
-        regex = textEndRegex
+        regex = TAG_END_REGEXP
+      } else if (
+        regex === COMMENT_END_REGEXP ||
+        regex === COMMENT_END_REGEXP_2
+      ) {
+        regex = TEXT_END_REGEX
       } else {
-        regex = tagEndRegex
+        regex = TAG_END_REGEXP
         rawTextEndRegex = void 0
       }
     }
 
     let end =
-      regex === tagEndRegex && strings[i + 1].startsWith('/>') ? ' ' : ''
+      regex === TAG_END_REGEXP && strings[i + 1].startsWith('/>') ? ' ' : ''
     html2 +=
-      regex === textEndRegex
-        ? s + nodeMarker
+      regex === TEXT_END_REGEX
+        ? s + NODE_MARKER
         : attrNameEndIndex >= 0
         ? (attrNames.push(attrName),
           s.slice(0, attrNameEndIndex) +
-            boundAttributeSuffix +
+            BIND_ATTR_SUFFIX +
             s.slice(attrNameEndIndex)) +
-          marker +
+          MARKER +
           end
         : s +
-          marker +
+          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')) {
-    let message = 'invalid template strings array'
-
-    throw new Error(message)
+  if (!isArray(strings) || !strings.hasOwnProperty('raw')) {
+    throw new Error('invalid html ast')
   }
   return [htmlResult, attrNames]
 }
+
+function createElement(v = '') {
+  let el = document.createElement('template')
+  el.innerHTML = v
+  return el
+}
+
+function createMarker(v = '') {
+  return document.createComment(v)
+}
+
 class Template {
-  constructor({ strings, ['__dom_type__']: type }, options) {
-    this.parts = []
+  parts = []
+
+  constructor({ strings, values, __dom_type__: type }, options) {
     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)
+
+    this.el = createElement(html2)
+
     walker.currentNode = this.el.content
+
     if (type === SVG_RESULT) {
       let content = this.el.content
       let svgElement = content.firstChild
@@ -157,27 +181,33 @@ class Template {
           let attrsToRemove = []
 
           for (let name of node.getAttributeNames()) {
-            if (
-              name.endsWith(boundAttributeSuffix) ||
-              name.startsWith(marker)
-            ) {
+            if (name.endsWith(BIND_ATTR_SUFFIX) || name.startsWith(MARKER)) {
               let realName = attrNames[attrNameIndex++]
               attrsToRemove.push(name)
               if (realName !== void 0) {
                 let value = node.getAttribute(
-                  realName.toLowerCase() + boundAttributeSuffix
+                  realName.toLowerCase() + BIND_ATTR_SUFFIX
                 )
-                let statics = value.split(marker)
-                let m = /([:@])?(.*)/.exec(realName)
+                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
@@ -194,8 +224,8 @@ class Template {
             node.removeAttribute(name)
           }
         }
-        if (rawTextElement.test(node.tagName)) {
-          let strings2 = node.textContent.split(marker)
+        if (RAW_TEXT_ELEM_REGEXP.test(node.tagName)) {
+          let strings2 = node.textContent.split(MARKER)
           let lastIndex = strings2.length - 1
           if (lastIndex > 0) {
             node.textContent = ''
@@ -209,108 +239,66 @@ class Template {
         }
       } else if (node.nodeType === 8) {
         let data = node.data
-        if (data === markerMatch) {
+        if (data === MARKER_MATCH) {
           parts.push({ type: CHILD_PART, index: nodeIndex })
         } else {
           let i = -1
-          while ((i = node.data.indexOf(marker, i + 1)) !== -1) {
+          while ((i = node.data.indexOf(MARKER, i + 1)) !== -1) {
             parts.push({ type: COMMENT_PART, index: nodeIndex })
-            i += marker.length - 1
+            i += MARKER.length - 1
           }
         }
       }
       nodeIndex++
     }
   }
-  static createElement(html2) {
-    let el = document.createElement('template')
-    el.innerHTML = html2
-    return el
-  }
-}
-function resolveDirective(part, value, parent = part, attributeIndex) {
-  if (value === NO_CHANGE) {
-    return value
-  }
-  let currentDirective =
-    attributeIndex !== void 0
-      ? parent.__directives?.[attributeIndex]
-      : parent.__directive
-
-  let nextDirectiveConstructor = isPrimitive(value)
-    ? void 0
-    : value['_$litDirective$']
-
-  if (currentDirective?.constructor !== nextDirectiveConstructor) {
-    currentDirective._$notifyDirectiveConnectionChanged?.call(
-      currentDirective,
-      false
-    )
-
-    if (nextDirectiveConstructor === void 0) {
-      currentDirective = void 0
-    } else {
-      currentDirective = new nextDirectiveConstructor(part)
-      currentDirective._$initialize(part, parent, attributeIndex)
-    }
-    if (attributeIndex !== void 0) {
-      if (!parent.__directives) {
-        parent.__directives = []
-      }
-      parent.__directives[attributeIndex] = currentDirective
-    } else {
-      parent.__directive = currentDirective
-    }
-  }
-  if (currentDirective !== void 0) {
-    value = resolveDirective(
-      part,
-      currentDirective._$resolve(part, value.values),
-      currentDirective,
-      attributeIndex
-    )
-  }
-  return value
 }
 
 class TemplateInstance {
   constructor(template, parent) {
-    this._parts = []
-    this._$disconnectableChildren = void 0
-    this._$template = template
-    this._$parent = parent
+    this.$parts = []
+    this.$template = template
+    this.$parent = parent
   }
   get parentNode() {
-    return this._$parent.parentNode
+    return this.$parent.parentNode
   }
-  get _$isConnected() {
-    return this._$parent._$isConnected
-  }
-  _clone(options) {
-    let {
-      el: { content },
-      parts
-    } = this._$template
 
-    let fragment = (options?.creationScope || document).importNode(
-      content,
-      true
-    )
-    walker.currentNode = fragment
-    let node = walker.nextNode()
-    let nodeIndex = 0
-    let partIndex = 0
-    let templatePart = parts[0]
-    // 没有动态绑定时, 查一遍是否有ref属性
-    if (templatePart === void 0) {
+  #checkRef(node, walker, options) {
     do {
-        if (node.nodeType === 1 && node.getAttribute('ref')) {
+      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) {
@@ -320,18 +308,14 @@ class TemplateInstance {
               node,
               templatePart.name,
               templatePart.strings,
+              templatePart.decorates,
               this,
               options
             )
           } else if (templatePart.type === ELEMENT_PART) {
             part = new ElementPart(node, this, options)
           }
-          if (node.nodeType === 1 && node.getAttribute('ref')) {
-            if (options.host.$refs) {
-              options.host.$refs[node.getAttribute('ref')] = node
-            }
-          }
-          this._parts.push(part)
+          this.$parts.push(part)
           templatePart = parts[++partIndex]
         }
         if (
@@ -344,19 +328,22 @@ class TemplateInstance {
           nodeIndex++
         }
       }
+      // 再检查剩下没有动态绑定的节点
+      this.#checkRef(node, walker, options)
     }
 
     return fragment
   }
-  _update(values) {
+
+  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, part, i)
+          part.$setValue(values, i)
           i += part.strings.length - 2
         } else {
-          part._$setValue(values[i])
+          part.$setValue(values[i])
         }
       }
       i++
@@ -365,118 +352,116 @@ class TemplateInstance {
 }
 
 class ChildPart {
+  type = CHILD_PART
+  #value = NOTHING
+
   constructor(startNode, endNode, parent, options) {
-    this.type = CHILD_PART
-    this._$committedValue = NOTHING
-    this._$disconnectableChildren = void 0
-    this._$startNode = startNode
-    this._$endNode = endNode
-    this._$parent = parent
+    this.startNode = startNode
+    this.endNode = endNode
+    this.$parent = parent
     this.options = options
-    this.__isConnected = options?.isConnected || true
-  }
-  get _$isConnected() {
-    return this._$parent?._$isConnected || this.__isConnected
   }
+
   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, directiveParent = this) {
-    value = resolveDirective(this, value, directiveParent)
+
+  $setValue(value, clear) {
     if (isPrimitive(value)) {
       if (value === NOTHING || value == null || value === '') {
-        if (this._$committedValue !== NOTHING) {
+        if (this.#value !== NOTHING) {
           this.#clear()
         }
-        this._$committedValue = NOTHING
-      } else if (value !== this._$committedValue && value !== NO_CHANGE) {
-        this._commitText(value)
+        this.#value = NOTHING
+      } else if (value !== this.#value) {
+        this.#commitText(value)
       }
-    } else if (value['__dom_type__'] !== void 0) {
-      this._commitTemplateResult(value)
+    } else if (value.__dom_type__ !== void 0) {
+      this.#commitTemplateResult(value)
     } else if (value.nodeType !== void 0) {
-      this._commitNode(value)
+      this.#commitNode(value)
     } else if (isIterable(value)) {
-      this._commitIterable(value)
+      this.#commitIterable(value)
     } else {
-      this._commitText(value)
+      this.#commitText(value)
+    }
+    if (clear) {
+      nextTick(_ => this.#clearBindings())
     }
   }
-  _insert(node, ref = this._$endNode) {
-    return this._$startNode.parentNode.insertBefore(node, ref)
+
+  #insert(node, target = this.endNode) {
+    return this.startNode.parentNode.insertBefore(node, target)
   }
-  _commitNode(value) {
-    if (this._$committedValue !== value) {
+
+  #commitNode(value) {
+    if (this.#value !== value) {
       this.#clear()
-      this._$committedValue = this._insert(value)
+      this.#value = this.#insert(value)
     }
   }
-  _commitText(value) {
-    if (
-      this._$committedValue !== NOTHING &&
-      isPrimitive(this._$committedValue)
-    ) {
-      let node = this._$startNode.nextSibling
+
+  #commitText(value) {
+    if (this.#value !== NOTHING && isPrimitive(this.#value)) {
+      let node = this.startNode.nextSibling
 
       node.data = value
     } else {
-      this._commitNode(document.createTextNode(value))
+      this.#commitNode(document.createTextNode(value))
     }
-    this._$committedValue = value
+    this.#value = value
   }
-  _commitTemplateResult(result) {
-    let { values, ['__dom_type__']: type } = result
+
+  #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)
+        : (type.el === void 0 && (type.el = createElement(type.h)), type)
 
-    if (this._$committedValue?._$template === template) {
-      this._$committedValue._update(values)
+    if (this.#value?.$template === template) {
+      this.#value.update(values)
     } else {
       let instance = new TemplateInstance(template, this)
-      let fragment = instance._clone(this.options)
+      let fragment = instance.clone(this.options)
 
-      instance._update(values)
+      instance.update(values)
 
-      this._commitNode(fragment)
-      this._$committedValue = instance
+      this.#commitNode(fragment)
+      this.#value = instance
     }
   }
+
   #getTemplate(result) {
-    let template = templateCache.get(result.strings)
+    let key = result.strings.join()
+    let template = TEMPLATE_CACHE.get(key)
+
     if (template === void 0) {
       template = new Template(result, this.options)
-      templateCache.set(result.strings, template)
+      TEMPLATE_CACHE.set(key, template)
     }
     return template
   }
-  _commitIterable(value) {
-    if (!isArray(this._$committedValue)) {
-      this._$committedValue = []
+
+  #commitIterable(value) {
+    if (!isArray(this.#value)) {
+      this.#value = []
       this.#clear()
     }
-    let itemParts = this._$committedValue
+    let itemParts = this.#value
     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.#insert(createMarker()),
+            this.#insert(createMarker()),
             this,
             this.options
           ))
@@ -484,115 +469,125 @@ class ChildPart {
       } else {
         itemPart = itemParts[partIndex]
       }
-      itemPart._$setValue(item)
+      itemPart.$setValue(item)
       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) {
-    this._$notifyConnectionChanged?.call(this, false, true, 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
     }
   }
-  setConnected(isConnected) {
-    if (this._$parent === void 0) {
-      this.__isConnected = isConnected
-      this._$notifyConnectionChanged?.call(this, isConnected)
+
+  /**
+   * 清除已被移除的节点事件
+   */
+  #clearBindings() {
+    let host = this.options.host
+    let events = host.$events
+
+    for (let ev in events) {
+      for (let i = -1, it; (it = events[ev][++i]); ) {
+        if (!host.root.contains(it.el)) {
+          it.el.removeEventListener(this.name, it.listener, it.options)
+          events[ev][i] = null
+        }
+      }
+      events[ev] = events[ev].filter(e => e !== null)
     }
   }
 }
 // 常规属性
 class AttributePart {
-  constructor(element, name, strings, parent, options) {
-    this.type = ATTRIBUTE_PART
-    this._$committedValue = NOTHING
-    this._$disconnectableChildren = void 0
+  type = ATTRIBUTE_PART
+
+  #value = NOTHING
+
+  constructor(element, name, strings, decorates, parent, options = {}) {
     this.element = element
     this.name = name
-    this._$parent = parent
+    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.#value = Array(strings.length - 1).fill(null)
       this.strings = strings
-    } else {
-      this._$committedValue = NOTHING
     }
   }
   get tagName() {
     return this.element.tagName
   }
-  get _$isConnected() {
-    return this._$parent._$isConnected
+
+  $setValue(value, valueIndex) {
+    let strings = this.strings
+    let changed = false
+
+    if (typeof value === 'function') {
+      value = value(this.element)
     }
 
-  _$setValue(value, directiveParent = this, valueIndex, noCommit) {
-    let strings = this.strings
-    let change = false
     if (strings === void 0) {
-      value = resolveDirective(this, value, directiveParent, 0)
-      change =
-        !isPrimitive(value) ||
-        (value !== this._$committedValue && value !== NO_CHANGE)
-      if (change) {
-        this._$committedValue = value
+      changed = !isPrimitive(value) || value !== this.#value
+      if (changed) {
+        this.#value = value
       }
     } else {
       let values = value
       value = strings[0]
 
       for (let i = 0; i < strings.length - 1; i++) {
-        let v = resolveDirective(
-          this,
-          values[valueIndex + i],
-          directiveParent,
-          i
-        )
-        if (v === NO_CHANGE) {
-          v = this._$committedValue[i]
-        }
-        change || (change = !isPrimitive(v) || v !== this._$committedValue[i])
+        let v = values[valueIndex + i]
+
+        changed || (changed = !isPrimitive(v) || v !== this.#value[i])
         if (v === NOTHING) {
           value = NOTHING
         } else if (value !== NOTHING) {
           value += (v !== null && v !== void 0 ? v : '') + strings[i + 1]
         }
-        this._$committedValue[i] = v
+        this.#value[i] = v
       }
     }
-    if (change && !noCommit) {
+    // value属性做特殊处理, 解决输入框无法清空的问题
+    if (changed || this.name === 'value') {
       this.commitValue(value)
     }
   }
 
   commitValue(value) {
-    let isBoolAttr = boolMap[this.name]
+    let elem = this.element
+    let attr = this.name
+    let isBoolAttr = boolMap[attr]
     // ref属性不渲染到节点上
-    if (this.name === 'ref') {
-      this.options.host.$refs[value] = this.element
+    if (attr === 'ref') {
+      this.options.host.$refs[value] = elem
       return
     }
 
     if (isBoolAttr) {
-      this.element[isBoolAttr] = !(value === false || value === null)
+      elem[isBoolAttr] = !(value === false || value === null)
 
-      if (this.element[isBoolAttr]) {
-        this.element.setAttribute(this.name, '')
+      if (elem[isBoolAttr]) {
+        elem.setAttribute(attr, '')
       } else {
-        this.element.removeAttribute(this.name)
+        elem.removeAttribute(attr)
       }
     } else {
-      if (value === null || value === void 0) {
-        this.element.removeAttribute(this.name)
+      // value 绑定, 特殊处理
+      if (attr === 'value') {
+        elem.value = value
       } else {
-        this.element.setAttribute(this.name, value)
+        if (value === null || value === void 0) {
+          elem.removeAttribute(attr)
+        } else {
+          elem.setAttribute(attr, value)
+        }
       }
     }
   }
@@ -607,87 +602,150 @@ class PropertyPart extends AttributePart {
     this.element[this.name] = value
   }
 }
+// 动画属性
+class AnimPart extends AttributePart {
+  constructor(...args) {
+    super(...args)
+  }
+
+  commitValue({ type = 'fade', duration, custom, immediate = false } = {}) {
+    let elem = this.element
+    let fromto = MODES[type] || MODES.fade
+
+    if (custom) {
+      fromto = custom
+    }
+    elem.$animate = function (out = false) {
+      return animate.call(this, duration, fromto, out)
+    }
+    elem.$animate.immediate = immediate
+  }
+}
 
 // 事件属性
 class EventPart extends AttributePart {
+  type = EVENT_PART
+
+  #listener = null
+
+  #prevent = noop
+  #stop = noop
+  #checkSelf = noop
+
   constructor(...args) {
     super(...args)
-    this.type = EVENT_PART
   }
-  _$setValue(newListener, directiveParent = this) {
-    newListener =
-      resolveDirective(this, newListener, directiveParent, 0) || NOTHING
 
-    if (newListener === NO_CHANGE) {
+  $setValue(listener) {
+    let host = this.options.host
+    let elem = this.element
+    let name = this.name
+    let options = {}
+    let events = host.$events[name] || []
+
+    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 === elem
+            break
+          case 'capture':
+          case 'once':
+          case 'passive':
+            options[it] = true
+            break
+        }
+      }
+    }
+
+    let shouldRemove = listener !== this.#listener
+
+    if (this.#listener) {
+      for (let i = -1, it; (it = events[++i]); ) {
+        if (it.el === elem) {
+          shouldRemove =
+            shouldRemove ||
+            options.capture !== it.capture ||
+            options.once !== it.once ||
+            options.passive !== it.passive
+          if (shouldRemove) {
+            it.el.removeEventListener(name, it.listener, it.options)
+            events[i] = null
+          }
+          break
+        }
+      }
+    }
+
+    events = events.filter(it => it !== null)
+    host.$events[name] = events
+
+    if (listener && shouldRemove) {
+      elem.addEventListener(name, this, options)
+      this.#listener = listener
+
+      events.push({ el: elem, listener: this, options })
+    }
+  }
+
+  handleEvent(ev) {
+    this.#stop(ev)
+    this.#prevent(ev)
+    if (this.#checkSelf(ev) === false) {
       return
     }
-    let oldListener = this._$committedValue
-    let shouldRemoveListener =
-      (newListener === NOTHING && oldListener !== NOTHING) ||
-      newListener.capture !== oldListener.capture ||
-      newListener.once !== oldListener.once ||
-      newListener.passive !== oldListener.passive
-    let shouldAddListener =
-      newListener !== NOTHING &&
-      (oldListener === NOTHING || shouldRemoveListener)
-
-    if (shouldRemoveListener) {
-      this.element.removeEventListener(this.name, this, oldListener)
-    }
-    if (shouldAddListener) {
-      this.element.addEventListener(this.name, this, newListener)
-    }
-    this._$committedValue = newListener
-  }
-  handleEvent(event) {
-    if (typeof this._$committedValue === 'function') {
-      this._$committedValue.call(this.options?.host || this.element, event)
-    } else {
-      this._$committedValue.handleEvent(event)
-    }
+    this.#listener.call(this.options.host, ev)
   }
 }
 
 class ElementPart {
+  type = ELEMENT_PART
   constructor(element, parent, options) {
     this.element = element
-    this.type = ELEMENT_PART
-    this._$disconnectableChildren = void 0
-    this._$parent = parent
+    this.$parent = parent
     this.options = options
   }
-  get _$isConnected() {
-    return this._$parent._$isConnected
-  }
-  _$setValue(value) {
-    resolveDirective(this, value)
-  }
+
+  $setValue() {}
 }
 
 export function render(value, container, options = {}) {
   let part = container[WC_PART]
 
   if (part === void 0) {
-    container[WC_PART] = part = new ChildPart(
+    part = new ChildPart(
       container.insertBefore(createMarker(), null),
       null,
       void 0,
       options
     )
+    container[WC_PART] = part
   }
-  part._$setValue(value)
+  part.$setValue(value, true)
 
   return part
 }
 
-export const html = (strings, ...values) => {
+export function html(strings, ...values) {
   return {
     __dom_type__: HTML_RESULT,
     strings,
     values
   }
 }
-export const svg = (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,

src/index.js

@@ -1,5 +1,5 @@
 /**
- * {wcui的核心库, 基于lit-core二次开发}
+ * { wkit library }
  * @author yutent<yutent.io@gmail.com>
  * @date 2023/03/07 18:10:43
  */
@@ -7,25 +7,93 @@ import {
   fixedValue,
   parsePropsDeclaration,
   boolMap,
+  KEEP_ALIVE,
+  KEEP_ALIVE_C,
   __finalized__,
-  __render__,
-  __init__,
   __props__,
   __changed_props__,
   __mounted__,
-  __feedback__,
-  __pending__,
-  __prop2attr__,
-  __attr2prop__,
-  __clear_update__,
-  __children__,
-  __updated__
+  __pending__
 } from './constants.js'
 import { css, adoptStyles } from './css.js'
-import { render, html, svg } from './html.js'
-import { nextTick, fire, bind, unbind } from './utils.js'
-export { $, $$, offset, outsideClick, clearOutsideClick } from './utils.js'
-export { html, css, svg, bind, unbind, nextTick }
+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 {
+  $,
+  $$,
+  range,
+  offset,
+  outsideClick,
+  clearOutsideClick
+} from './utils.js'
+export { html, raw, css, svg, bind, unbind, nextTick, fire, hyphen, camelize }
+
+function safely(callback, ...args) {
+  try {
+    callback && callback.apply(this, args)
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+// 简单的类名解析
+export function classMap(data = {}) {
+  let output = ''
+  for (let k in data) {
+    if (data[k]) {
+      output += ' ' + k
+    }
+  }
+  return output.slice(1)
+}
+// 简单的样式解析
+export function styleMap(data = {}) {
+  let output = ''
+  for (let k in data) {
+    if (data[k] || data[k] === 0) {
+      output += hyphen(k) + ':' + data[k] + ';'
+    }
+  }
+  return output
+}
+
+// 三元运算符的函数封装(只为了省个参数)
+export function when(condition, trueCase = '', falseCase = '') {
+  return condition ? trueCase : falseCase
+}
+
+// swicth语句的封装
+export function which(target, list = [], defaultCase = '') {
+  for (let [name, content] of list) {
+    if (target === name) {
+      return content
+    }
+  }
+  return defaultCase
+}
+
+/**
+ * 双向绑定
+ * @param key<String> 绑定的字段
+ * @param el 当前对象, 无需传递, 由框架内部处理
+ *
+ */
+export function live(key, el) {
+  let callback = ev => {
+    Function('o', 'v', `o.${key} = v`)(this, ev.target.value)
+    this.$requestUpdate()
+  }
+
+  if (el && !el.__live__) {
+    bind(el, 'input', callback)
+    this.$events.input ??= []
+    this.$events.input.push({ el, listener: callback, options: false })
+    el.__live__ = true
+  }
+  return Function('o', `return o.${key}`)(this)
+}
 
 export class Component extends HTMLElement {
   /**
@@ -36,36 +104,36 @@ export class Component extends HTMLElement {
     let list = []
 
     this.finalize()
+    this.parseAnim()
 
     this[__props__].forEach((options, prop) => {
-      list.push(prop.toLowerCase())
+      list.push(options.attrName)
     })
-    return list
+    return list.concat(this.watches || [], KEEP_ALIVE)
   }
 
-  static createProperty(name, options) {
-    let key = Symbol(name)
-    let descriptor = {
-      get() {
-        return this[key]
-      },
-      set(value) {
-        let oldValue = this[key]
-        value = fixedValue(value, options)
-        if (oldValue === value) {
-          return
+  static parseAnim() {
+    if (this.hasOwnProperty('animation')) {
+      let {
+        type = 'fade',
+        duration,
+        custom,
+        immediate = false
+      } = this.animation
+      let fromto = MODES[type] || MODES.fade
+      if (custom) {
+        fromto = custom
       }
-        this[key] = value
-        this.#requestUpdate(name, oldValue)
-        if (options.observer) {
-          options.observer.call(this, value, oldValue)
+      Object.defineProperty(this.prototype, '$animate', {
+        value(out) {
+          if (this[__mounted__]) {
+            return animate.call(this, duration, fromto, out)
           }
-      },
-      enumerable: false
         }
-
-    this[__props__].set(name, options)
-    Object.defineProperty(this.prototype, name, descriptor)
+      })
+      this.prototype.$animate.immediate = immediate
+      delete this.animation
+    }
   }
 
   // 处理静态声明
@@ -79,44 +147,135 @@ export class Component extends HTMLElement {
 
     if (this.hasOwnProperty('props')) {
       for (let k in this.props) {
-        let options = parsePropsDeclaration(this.props[k])
-        if (boolMap[k] && k !== boolMap[k]) {
-          k = boolMap[k]
+        // 保留关键字, 直接跳过
+        if (k === KEEP_ALIVE || k === KEEP_ALIVE_C) {
+          continue
         }
-        this.createProperty(k, options)
+        let options = parsePropsDeclaration(this.props[k])
+        let attrName = k.toLowerCase()
+
+        options.attrName = attrName
+
+        if (boolMap[attrName]) {
+          k = boolMap[attrName]
+        } else {
+          options.attrName = hyphen(k)
+          k = camelize(k)
+        }
+        this[__props__].set(k, options)
       }
     }
 
     delete this.props
   }
 
+  static reg(name = '') {
+    name = 'wc-' + name
+    if (!customElements.get(name)) {
+      customElements.define(name, this)
+    }
+  }
+
+  keepAlive = false
+
+  removed = false
+
   constructor() {
     super()
     this[__pending__] = false
     this[__mounted__] = false
-    this[__init__]()
-    Object.defineProperty(this, '$refs', {
-      value: Object.create(null),
-      enumerable: false
-    })
-
-    this.created()
-  }
-
-  [__init__]() {
+    // 这里提前定义一次, 是为了在connectedCallback之前, 就已有赋值时报错的bug
+    this[__changed_props__] = new Map() // 记录一次渲染周期内变化的属性
+    this.host = this
     this.root = this.shadowRoot || this.attachShadow({ mode: 'open' })
+    this.root.ownHost = this
 
-    this[__changed_props__] = new Map() // 记录本次变化的属性
-    // 初始化 props
-    this.constructor[__props__].forEach((options, prop) => {
-      this[prop] = options.default
+    Object.defineProperty(this, '$refs', {
+      value: Object.create(null)
+    })
+    Object.defineProperty(this, '$events', {
+      value: Object.create(null)
     })
 
-    // 若无定义props时, 手动执行一次渲染
-    if (this[__pending__] === false) {
-      this[__pending__] = true
-      nextTick(_ => this[__updated__]())
+    for (let [prop, options] of this.constructor[__props__]) {
+      this.#createProperty(prop, options)
+      // 按W3C规范, 在构造函数内不可设置节点的属性
+      // 所以这里只记录需要初始化的属性, 在#init()回调中才去修改
+      this[__changed_props__].set(prop, this[prop])
     }
+
+    nextTick(_ => this.created())
+  }
+
+  #createProperty(name, options) {
+    let key = Symbol(name)
+    let descriptor
+
+    if (options.type === Array || options.type === Object) {
+      let proxyValue = this.#createProxy(null, options, name)
+      descriptor = {
+        get() {
+          return proxyValue
+        },
+        set(value) {
+          proxyValue = this.#createProxy(
+            fixedValue(value, options),
+            options,
+            name
+          )
+          this.$requestUpdate(name)
+        }
+      }
+    } else {
+      descriptor = {
+        get() {
+          return this[key]
+        },
+        set(value) {
+          let oldValue = this[key]
+          value = fixedValue(value, options)
+          if (oldValue === value) {
+            return
+          }
+          this[key] = value
+          this.$requestUpdate(name)
+          safely.call(this, options.observer, value, oldValue)
+        }
+      }
+      this[key] = options.default
+    }
+
+    Object.defineProperty(this, name, descriptor)
+  }
+
+  #createProxy(obj, options = {}, key) {
+    return new Proxy(obj || options.default, {
+      get: (target, prop, receiver) => {
+        let value = Reflect.get(target, prop, receiver)
+        // 当访问的值是对象时，需要对这个对象也进行代理
+        if (typeof value === 'object') {
+          return this.#createProxy(value, {}, key)
+        }
+        return value
+      },
+      set: (target, prop, value, receiver) => {
+        let oldValue = target[prop]
+        Reflect.set(target, prop, value, receiver)
+
+        this.$requestUpdate(key)
+        safely.call(this, options.observer, value, oldValue)
+        return true
+      }
+    })
+  }
+
+  #init() {
+    for (let [prop, value] of this[__changed_props__]) {
+      this.#prop2attr(prop, value)
+    }
+    // 这里要清除初始化产生的记录
+    this[__changed_props__].clear()
+    this.$requestUpdate()
   }
 
   #getPropOptions(name) {
@@ -124,21 +283,42 @@ export class Component extends HTMLElement {
   }
 
   connectedCallback() {
+    if (this.$animate) {
+      this.style.display = 'none'
+    }
+    this.removed = false
+    this.#init()
     adoptStyles(this.root, this.constructor.styles)
-
-    this[__children__]?.setConnected(true)
   }
 
   disconnectedCallback() {
-    this[__children__]?.setConnected(false)
-    this.unmounted()
+    if (this.keepAlive) {
+      nextTick(_ => this.deactivated())
+    } else {
+      if (!document.body?.contains(this)) {
+        let $events = this.$events
+        if ($events) {
+          for (let name in $events) {
+            for (let it of $events[name]) {
+              unbind(it.el, name, it.listener, it.options)
+            }
+          }
+        }
+        this.removed = true
+      }
+      nextTick(_ => this.unmounted())
+    }
   }
   // 监听属性变化
   attributeChangedCallback(name, old, val) {
     if (old === val) {
       return
     }
-    this[__attr2prop__](name, val, old)
+    if (name === KEEP_ALIVE) {
+      this.keepAlive = val !== null
+      return
+    }
+    this.#attr2prop(name, val, old)
   }
 
   /**
@@ -147,11 +327,12 @@ export class Component extends HTMLElement {
    * @param name<String>
    * @param value<String|Boolean|Number>
    */
-  [__prop2attr__](name, value) {
-    let options = this.#getPropOptions(name)
+  #prop2attr(name, value) {
+    let options = this.#getPropOptions(name) || {}
+    let attrName = options.attrName
 
-    if (options.attribute === false) {
-      this.removeAttribute(name)
+    if (options.attribute === false || options.type === null) {
+      this.removeAttribute(attrName)
       return
     }
 
@@ -159,17 +340,17 @@ export class Component extends HTMLElement {
       case Number:
       case String:
         if (value === null) {
-          this.removeAttribute(name)
+          this.removeAttribute(attrName)
         } else {
-          this.setAttribute(name, value)
+          this.setAttribute(attrName, value)
         }
         break
 
       case Boolean:
         if (value === null || value === false) {
-          this.removeAttribute(name)
+          this.removeAttribute(attrName)
         } else {
-          this.setAttribute(name, '')
+          this.setAttribute(attrName, '')
         }
         break
     }
@@ -180,66 +361,102 @@ export class Component extends HTMLElement {
    * @param name<String>
    * @param value<String|Boolean|Number>
    */
-  [__attr2prop__](name, value, old) {
-    let options = this.#getPropOptions(name)
-    this[name] = fixedValue(value, options)
+  #attr2prop(name, value, old) {
+    let _name = boolMap[name]
+    let options, propName
+
+    if (_name) {
+      name = _name
+    }
+    propName = camelize(name)
+
+    options = this.#getPropOptions(propName)
+
+    if (options) {
+      value = fixedValue(value, options)
+
+      if (options.attribute === false || options.type === null) {
+        if (value === null) {
+          return
+        }
+        if (value === this[propName]) {
+          this.removeAttribute(name)
+          return
+        }
+      }
+    }
+
+    this[propName] = value
   }
 
   // 请求更新
-  #requestUpdate(name, oldValue) {
+  $requestUpdate(name) {
+    if (name !== void 0) {
       this[__changed_props__].set(name, this[name])
-    this[__prop2attr__](name, this[name])
+      this.#prop2attr(name, this[name])
+    }
 
     if (this[__pending__] === false) {
       this[__pending__] = true
-      nextTick(_ => this[__updated__]())
+      nextTick(_ => this.#confirmUpdate())
     }
   }
 
   // 确认更新到视图
-  [__updated__]() {
-    if (this[__pending__]) {
-      try {
+  #confirmUpdate() {
     let props = this[__changed_props__]
-        this[__render__]()
-        this[__feedback__](props)
-      } catch (err) {
-        console.error(err)
-      }
-      this[__clear_update__]()
-    }
+    this.#render()
+    this.#feedback(props)
+    this.#clearUpdate()
   }
 
   // 更新回调反馈
-  [__feedback__](props) {
+  #feedback(props) {
     // 初始化时不触发updated回调
-    if (!this[__mounted__]) {
+    if (this[__mounted__] === false) {
       this[__mounted__] = true
+      if (this.$animate?.immediate) {
+        this.$animate()
+      }
+      nextTick(_ => {
+        if (this.keepAlive) {
+          this.activated()
+        }
         this.mounted()
+        this.$requestUpdate()
+      })
     } else {
-      this.updated(props)
+      nextTick(_ => this.updated(props))
     }
   }
 
-  [__clear_update__]() {
-    this[__changed_props__] = new Map()
+  #clearUpdate() {
+    this[__changed_props__].clear()
     this[__pending__] = false
   }
 
   // 渲染视图
-  [__render__]() {
-    let htmlText = this.render()
-
-    this[__children__] = render(htmlText, this.root, {
-      host: this,
-      isConnected: !this[__mounted__] && this.isConnected
+  #render() {
+    try {
+      let ast = this.render()
+      render(ast, this.root, {
+        host: this
       })
+    } catch (err) {
+      console.error(err)
     }
+  }
+
   // 几个生命周期回调
   created() {}
   mounted() {}
+  activated() {}
+  deactivated() {}
   unmounted() {}
   updated() {}
+  render() {
+    return html`<slot></slot>`
+  }
 
   $on(type, callback, options) {
     return bind(this, type, callback, options)
@@ -249,7 +466,7 @@ export class Component extends HTMLElement {
     unbind(this, type, callback, options)
   }
 
-  $emit(type, data = {}) {
-    return fire(this, type, data)
+  $emit(type, data = {}, stop = false) {
+    return fire(this, type, data, stop)
   }
 }

src/utils.js

@@ -4,18 +4,18 @@
  * @date 2023/03/07 22:11:30
  */
 
-export function $(selector, container) {
+export function noop() {}
+
+export function $(selector, container, multi) {
+  let fn = multi ? 'querySelectorAll' : 'querySelector'
   if (container) {
-    return container.querySelector(selector)
+    return container[fn](selector)
   }
-  return document.body.querySelector(selector)
+  return document.body[fn](selector)
 }
 
 export function $$(selector, container) {
-  if (container) {
-    return container.querySelectorAll(selector)
-  }
-  return document.body.querySelectorAll(selector)
+  return $(selector, container, true)
 }
 
 export const nextTick = (function () {
@@ -24,11 +24,14 @@ export const nextTick = (function () {
   let bool = false
 
   function callback() {
-    let n = queue.length
-    for (let i = 0; i < n; i++) {
-      queue[i]()
+    while (queue.length > 0) {
+      let fn = queue.shift()
+      try {
+        fn()
+      } catch (err) {
+        console.error(err)
+      }
     }
-    queue = queue.slice(n)
   }
 
   new MutationObserver(callback).observe(node, { characterData: true })
@@ -40,6 +43,46 @@ 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()
+}
+
+//连字符转换为驼峰风格
+export function camelize(target) {
+  //提前判断，提高效率
+  if (target.indexOf('-') < 0) {
+    return target
+  }
+  return target.replace(/\-([a-z])/g, (m, s) => s.toUpperCase())
+}
+
 //取得距离页面左上角的坐标
 export function offset(node) {
   try {
@@ -65,12 +108,20 @@ export function offset(node) {
 /**
  * 事件绑定
  */
-export function bind(dom, type, selector, fn, phase = true) {
+export function bind(dom, type = '', selector, fn, phase = false) {
   let events = type.split(',')
   let callback
+  let isWc = dom && dom.host === dom
+  let host = isWc ? dom : null
+
+  if (!dom || !type) {
+    return console.error(
+      "Argument Error: function bind's arg 1 must be a document obejct"
+    )
+  }
 
   if (typeof selector === 'function') {
-    phase = fn
+    phase = fn || false
     fn = selector
     selector = null
   } else {
@@ -80,13 +131,25 @@ export function bind(dom, type, selector, fn, phase = true) {
     fn = fn || noop
   }
 
+  if (isWc === false) {
+    let node = dom
+    while (node && node !== document.body && node !== document) {
+      if (node.ownHost) {
+        isWc = true
+        host = node.ownHost
+        break
+      }
+      node = node.parentNode
+    }
+  }
+
   if (selector) {
     callback = function (ev) {
-      let agents = $(selector, ev.currentTarget)
+      let agents = $(selector, dom)
       let elem = ev.target
       if (agents) {
         while (true) {
-          if (elem === ev.currentTarget) {
+          if (elem === dom) {
             break
           }
           if (agents.contains(elem)) {
@@ -103,7 +166,25 @@ export function bind(dom, type, selector, fn, phase = true) {
   }
 
   events.forEach(function (t) {
-    dom.addEventListener(t.trim(), callback, phase)
+    t = t.trim()
+    if (isWc) {
+      host.$events[t] ??= []
+
+      let _list = host.$events[t]
+      if (_list.length) {
+        let idx = _list.findIndex(
+          it =>
+            it.el === dom && it.listener === callback && it.options === phase
+        )
+        if (idx > -1) {
+          let item = _list[idx]
+          _list.splice(idx, 1)
+          dom.removeEventListener(t, item.listener, item.options)
+        }
+      }
+      _list.push({ el: dom, listener: callback, options: phase })
+    }
+    dom.addEventListener(t, callback, phase)
   })
   return callback
 }
@@ -111,7 +192,7 @@ export function bind(dom, type, selector, fn, phase = true) {
 /**
  * 解除事件绑定
  */
-export function unbind(dom, type, fn = noop, phase = false) {
+export function unbind(dom, type = '', fn = noop, phase = false) {
   let events = type.split(',')
   events.forEach(function (t) {
     dom.removeEventListener(t.trim(), fn, phase)
@@ -147,9 +228,14 @@ export function clearOutsideClick(fn = noop) {
   unbind(document, 'mousedown', fn)
 }
 
-export function fire(el, name = 'click', data = {}) {
-  let ev = document.createEvent('Events')
-  ev.initEvent(name, true, true)
+/**
+ * @param el <DOM> 节点
+ * @param name <String> 自定义的事件名
+ * @param data <Object> 要合并进event对象的参数
+ * @param stop <Boolean> 是否禁止事件冒泡
+ */
+export function fire(el, name = 'click', data = {}, stop) {
+  let ev = new Event(name, { bubbles: !stop, cancelable: true })
   Object.assign(ev, data)
   el.dispatchEvent(ev)
 }

test/index.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+  <title>wkit test page</title>
+  <style>
+    body {line-height: 1.5;font-size:14px;background:var(--page-color);color:var(--text-color);}
+    ::-webkit-scrollbar {
+      width: 6px;
+    }
+    ::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: var(--summary-bg-color);
+    }
+    ::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+      background: var(--border-color-dark);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--summary-color);
+    }
+    @media screen and (max-width: 480px) {
+      ::-webkit-scrollbar {
+        display: none;
+        width: 0;
+      }
+    }
+  </style>
+  <script type="importmap">
+    {
+      "imports":{
+        "es.shim":"//jscdn.ink/es.shim/latest/index.js",
+        "wkit":"//127.0.0.1:9999/src/index.js",
+        "wkitd":"//jscdn.ink/wkitd/1.3.10/index.js",
+        "fetch":"//jscdn.ink/@bytedo/fetch/latest/next.js",
+        "@bd/ui/":"//jscdn.ink/@bd/ui/0.1.16/"
+      }
+    }
+  </script>
+  <script type="module" src="./test.js"></script>
+</head>
+<body>
+  <wc-app></wc-app>
+</body>
+</html>

test/test.js

@@ -0,0 +1,31 @@
+import { html, Component, live } from 'wkit'
+
+class App extends Component {
+  foo = ''
+
+  bar = { a: 333 }
+
+  created() {
+    // live = live.bind(this)
+  }
+
+  reset() {
+    this.foo = ''
+    this.bar.a = '666'
+    this.$requestUpdate()
+  }
+
+  render() {
+    return html`
+      <p>${this.foo}</p>
+      <p>${this.bar.a}</p>
+      <input value=${live.bind(this, 'bar.a')} />
+      <input value=${this.foo} />
+      <input value=${live.bind(this, 'foo')} />
+
+      <button @click=${this.reset}>666</button>
+    `
+  }
+}
+
+App.reg('app')