调整代码结构

.gitignore

@@ -1,5 +1,4 @@
 *.min.js
-*.min.css
 .httpserver
 index.html
 test.js

src/constants.js

@@ -5,14 +5,3 @@
  */
 
 export const finalize = Symbol('finalize')
-export const RESET_CSS_STYLE = css`
-  * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-  ::before,
-  ::after {
-    box-sizing: border-box;
-  }
-`

src/css.js

@@ -0,0 +1,40 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/03/06 16:27:49
+ */
+
+export const RESET_CSS_STYLE = css`
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  ::before,
+  ::after {
+    box-sizing: border-box;
+  }
+`
+
+export function css(strs, ...args) {
+  let output = `
+  
+  `
+  let tmp = Array.from(strs)
+  while (tmp.length) {
+    output += tmp.shift() + (args.shift() || '')
+  }
+  return output
+}
+
+export function adoptStyles(root, styles = '') {
+  let sheet = new CSSStyleSheet()
+  if (typeof styles === 'string') {
+    styles = [styles]
+  } else {
+    styles = styles.flat(Infinity)
+  }
+  styles = (RESET_CSS_STYLE + styles.join(' ')).trim()
+  sheet.replaceSync(styles)
+  root.adoptedStyleSheets.push(sheet)
+}

src/html.js

@@ -0,0 +1,32 @@
+export function html(strs, ...args) {
+  let output = ''
+  let tmp = Array.from(strs)
+  // console.log(tmp, args)
+
+  while (tmp.length) {
+    let _ = args.shift()
+    switch (typeof _) {
+      case 'function':
+        console.log([_], _.name)
+        _ = _.name
+        break
+      case 'object':
+        if (Array.isArray(_)) {
+          _ = _.join('')
+        }
+        break
+    }
+    output += tmp.shift() + (_ === void 0 ? '' : _)
+  }
+  return output
+}
+
+function getTemplate(html) {
+  let template = document.createElement('template')
+  template.innerHTML = html
+  return template.content.cloneNode(true)
+}
+
+export function renderRoot(root, html) {
+  root.appendChild(getTemplate(html))
+}

src/index.js

@@ -4,65 +4,14 @@
  * @date 2023/03/03 11:21:44
  */
 
-import { finalize, RESET_CSS_STYLE } from './constants.js'
+import { finalize } from './constants.js'
+import { css, adoptStyles } from './css.js'
+import { html, renderRoot } from './html.js'
 
-export function css(strs, ...args) {
+export { css, html }
-  let output = `
-  
-  `
-  let tmp = Array.from(strs)
-  while (tmp.length) {
-    output += tmp.shift() + (args.shift() || '')
-  }
-  return output
-}
-
-export function html(strs, ...args) {
-  let output = ''
-  let tmp = Array.from(strs)
-  // console.log(tmp, args)
-
-  while (tmp.length) {
-    let _ = args.shift()
-    switch (typeof _) {
-      case 'function':
-        console.log([_], _.name)
-        _ = _.name
-        break
-      case 'object':
-        if (Array.isArray(_)) {
-          _ = _.join('')
-        }
-        break
-    }
-    output += tmp.shift() + (_ === void 0 ? '' : _)
-  }
-  return output
-}
-
-function getTemplate(html) {
-  let template = document.createElement('template')
-  template.innerHTML = html
-  return template.content.cloneNode(true)
-}
-
-function adoptStyles(root, styles = '') {
-  let sheet = new CSSStyleSheet()
-  if (typeof styles === 'string') {
-    styles = [styles]
-  } else {
-    styles = styles.flat(Infinity)
-  }
-  styles = (RESET_CSS_STYLE + styles.join(' ')).trim()
-  sheet.replaceSync(styles)
-  root.adoptedStyleSheets.push(sheet)
-}
-
-function render(root, html) {
-  root.appendChild(getTemplate(html))
-}
 
 export class Component extends HTMLElement {
+  // 声明要监听的属性
   static get observedAttributes() {
     this[finalize]()
 
@@ -78,6 +27,9 @@ export class Component extends HTMLElement {
     this.created && this.created()
   }
 
+  /**
+   * 预处理rpops, styles等
+   */
   static [finalize]() {
     if (this.finalized) {
       return
@@ -87,6 +39,11 @@ export class Component extends HTMLElement {
 
     this.elemProps = new Map()
 
+    const t = Object.getPrototypeOf(this)
+
+    console.log('>>>', t)
+    console.log('>>>', this)
+
     for (let k in this.props) {
       let prop = Symbol(k)
       let options = this.props[k]
@@ -107,6 +64,7 @@ export class Component extends HTMLElement {
     return ''
   }
 
+  // 组件节点被插入文档时触发的回调
   connectedCallback() {
     Object.defineProperty(this, 'root', {
       value: this.shadowRoot || this.attachShadow({ mode: 'open' }),
@@ -115,7 +73,7 @@ export class Component extends HTMLElement {
 
     adoptStyles(this.root, this.constructor.styles)
 
-    render(this.root, this.render())
+    renderRoot(this.root, this.render())
 
     this.mounted && this.mounted()
   }