From 8cebdd19941992591264f62324cc07b62740b064 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Fri, 17 Mar 2023 10:18:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=8A=82=E7=82=B9ref?=
 =?UTF-8?q?=E6=A0=87=E8=AF=86=E7=9A=84=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json |  2 +-
 src/html.js  | 19 ++++++++++++++++---
 src/index.js |  7 ++++---
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 175fd8d..8ba5344 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bd/core",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "type": "module",
   "description": "百搭UI组件库的核心",
   "main": "dist/index.js",
diff --git a/src/html.js b/src/html.js
index 4a010c0..dece7ce 100644
--- a/src/html.js
+++ b/src/html.js
@@ -134,7 +134,7 @@ function getTemplateHtml(strings, type) {
   return [htmlResult, attrNames]
 }
 class Template {
-  constructor({ strings, ['__dom_type__']: type }, options) {
+  constructor({ strings, values, ['__dom_type__']: type }, options) {
     this.parts = []
     let node
     let nodeIndex = 0
@@ -150,11 +150,19 @@ class Template {
       svgElement.remove()
       content.append(...svgElement.childNodes)
     }
+
     while ((node = walker.nextNode()) !== null && parts.length < partCount) {
       if (node.nodeType === 1) {
         if (node.hasAttributes()) {
           let attrsToRemove = []
+
           for (let name of node.getAttributeNames()) {
+            if (name === 'ref') {
+              options.host.$refs[node.getAttribute('ref')] = node
+              node.removeAttribute('ref')
+              continue
+            }
+
             if (
               name.endsWith(boundAttributeSuffix) ||
               name.startsWith(marker)
@@ -423,7 +431,7 @@ class ChildPart {
     let { values, ['__dom_type__']: type } = result
     let template =
       typeof type === 'number'
-        ? this._$getTemplate(result)
+        ? this.#getTemplate(result)
         : (type.el === void 0 && (type.el = Template.createElement(type.h)),
           type)
 
@@ -439,7 +447,7 @@ class ChildPart {
       this._$committedValue = instance
     }
   }
-  _$getTemplate(result) {
+  #getTemplate(result) {
     let template = templateCache.get(result.strings)
     if (template === void 0) {
       template = new Template(result, this.options)
@@ -558,6 +566,11 @@ class AttributePart {
 
   #commitValue(value) {
     let isBoolAttr = boolMap[this.name]
+    // ref属性不渲染到节点上
+    if (this.name === 'ref') {
+      this.options.host.$refs[value] = this.element
+      return
+    }
 
     if (isBoolAttr) {
       this.element[isBoolAttr] = !(value === false || value === null)
diff --git a/src/index.js b/src/index.js
index 1a13700..5fcd408 100644
--- a/src/index.js
+++ b/src/index.js
@@ -95,6 +95,10 @@ export class Component extends HTMLElement {
     this[__pending__] = false
     this[__mounted__] = false
     this[__init__]()
+    Object.defineProperty(this, '$refs', {
+      value: Object.create(null),
+      enumerable: false
+    })
     this.created()
   }
 
@@ -149,9 +153,6 @@ export class Component extends HTMLElement {
       return
     }
 
-    // name === 'icon' &&
-    //   console.log(name, '>>>', options.default, ':::', this[name])
-
     switch (options.type) {
       case Number:
       case String: