.gitignore

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

.npmignore

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

Readme.md

@@ -1,5 +1,5 @@
 ## Wkit
-> 一个简单易用、功能完善的用于开发`web components`的轻量级开发库。模板解析基于`lit-html`二次开发
+> A library for building fast, lightweight web components.
 
 ![downloads](https://img.shields.io/npm/dt/wkit.svg)
 ![version](https://img.shields.io/npm/v/wkit.svg)
@@ -15,7 +15,6 @@
 - `:xxx=yyy`, 属性绑定, 类似`vue`,在属性前加上`:`, 该属性不再使用`setAttribute()`, 而是直接赋值, 可满足你需要传递复杂数据结构的需求。
 - `#animation={type}`, 开箱即用的动画配置, 内置6种动画`fade(默认), scale, bounce, micro-bounce, rotate, slide`
 - `ref=xxx`, 类似`vue`的节点标识, 可方便的在`mounted()`之后通过 `this.$refs.xxx` 来访问该节点
-- 内置特色的双向绑定方法`live()`
 - 用内置的`bind()`方法来给当前组件绑定事件时, 组件移除时事件也会自动销毁,无需手动销毁。
 - 灵活的`props`定义
 
@@ -85,7 +84,3 @@ Hello.reg('hello')
 
 
 
-### 开源协议
-
-- BSD 3-Clause License (Lit框架的html模板解析的源码)
-- MIT (除Lit代码之外的所有代码)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wkit",
-  "version": "1.12.0",
+  "version": "1.11.3",
   "type": "module",
   "description": "A library for building fast, lightweight web components.",
   "main": "dist/index.js",
@@ -14,7 +14,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://git.wkit.fun/bytedo/wkit.git"
+    "url": "git+https://git.wkit.fun/bytedo/wkit.git"
   },
   "keywords": [
     "wkit",

src/constants.js

@@ -83,14 +83,16 @@ function getType(v) {
       let type = String
       let attribute = true
       if (v.includes('!')) {
-        if (v.startsWith('str!')) {
-          v = v.slice(4)
-        } else if (v.startsWith('num!')) {
+        v = v.split('!')
+        let _t = v.shift()
+        if (_t === 'str') {
+          v = v.join('!')
+        } else if (_t === 'num') {
           type = Number
-          v = +v.slice(4) || 0
-        } else if (v.startsWith('bool!')) {
+          v = +v.shift() || 0
+        } else if (_t === 'bool') {
           type = Boolean
-          v = v.slice(5)
+          v = v.shift()
           v = v !== 'false' && v !== ''
         }
         attribute = false

src/html.js

@@ -13,13 +13,11 @@ 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 =>
   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"'>=/]`
@@ -529,10 +527,6 @@ class AttributePart {
     let strings = this.strings
     let changed = false
 
-    if (typeof value === 'function') {
-      value = value(this.element)
-    }
-
     if (strings === void 0) {
       changed = !isPrimitive(value) || value !== this.#value
       if (changed) {
@@ -554,8 +548,7 @@ class AttributePart {
         this.#value[i] = v
       }
     }
-    // value属性做特殊处理, 解决输入框无法清空的问题
-    if (changed || this.name === 'value') {
+    if (changed) {
       this.commitValue(value)
     }
   }
@@ -578,10 +571,6 @@ class AttributePart {
       } else {
         elem.removeAttribute(attr)
       }
-    } else {
-      // value 绑定, 特殊处理
-      if (attr === 'value') {
-        elem.value = value
     } else {
       if (value === null || value === void 0) {
         elem.removeAttribute(attr)
@@ -590,7 +579,6 @@ class AttributePart {
       }
     }
   }
-  }
 }
 // 赋值属性
 class PropertyPart extends AttributePart {

src/index.js

@@ -59,42 +59,6 @@ export function styleMap(data = {}) {
   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 {
   /**
    * 声明可监听变化的属性列表
@@ -423,7 +387,6 @@ export class Component extends HTMLElement {
           this.activated()
         }
         this.mounted()
-        this.$requestUpdate()
       })
     } else {
       nextTick(_ => this.updated(props))

src/utils.js

@@ -108,7 +108,7 @@ export function offset(node) {
 /**
  * 事件绑定
  */
-export function bind(dom, type = '', selector, fn, phase = false) {
+export function bind(dom, type = '', selector, fn, phase = true) {
   let events = type.split(',')
   let callback
   let isWc = dom && dom.host === dom
@@ -121,7 +121,7 @@ export function bind(dom, type = '', selector, fn, phase = false) {
   }
 
   if (typeof selector === 'function') {
-    phase = fn || false
+    phase = fn
     fn = selector
     selector = null
   } else {
@@ -168,22 +168,12 @@ export function bind(dom, type = '', selector, fn, phase = false) {
   events.forEach(function (t) {
     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)
+      if (host.$events[t]) {
+        host.$events[t].push({ el: dom, listener: callback, options: phase })
+      } else {
+        host.$events[t] = [{ el: dom, listener: callback, options: phase }]
       }
     }
-      _list.push({ el: dom, listener: callback, options: phase })
-    }
     dom.addEventListener(t, callback, phase)
   })
   return callback

test/index.html

@@ -1,47 +0,0 @@
-<!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

@@ -1,31 +0,0 @@
-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')