mod: 初始化element流程、实现组件代理对象、实现shapeFlags、实现注册事件、实现组件props、emit、slots、实…

…现fragment和text类型节点、实现getCurrentInstance
daoyking · Jun 9, 2022 · 0e7c24e · 0e7c24e
1 parent aa7a797
commit 0e7c24e
Show file tree

Hide file tree

Showing 31 changed files with 1,037 additions and 58 deletions.
diff --git a/example/ComponentEmit/App.js b/example/ComponentEmit/App.js
@@ -0,0 +1,17 @@
+import { h } from '../../lib/guide-mini-vue.esm.js'
+import { Foo } from './Foo.js'
+
+export const App = {
+  name: 'App',
+  setup(props) {},
+  render() {
+    return h('div', {}, [h('div', {}, 'App', ), h(Foo, {
+      onAdd(a, b) {
+        console.log('on add', a, b)
+      },
+      onAddFoo(a, b) {
+        console.log('onAddFoo', a, b)
+      }
+    })])
+  }
+}
diff --git a/example/ComponentEmit/Foo.js b/example/ComponentEmit/Foo.js
@@ -0,0 +1,22 @@
+import { h } from "../../lib/guide-mini-vue.esm.js"
+
+export const Foo = {
+  name: 'Foo',
+  setup(props, { emit }) {
+    const emitAdd = () => {
+      console.log('emitAdd')
+      emit('add', 1, 2)
+      emit('add-foo', 1, 2)
+    }
+    return {
+      emitAdd
+    }
+  },
+  render() {
+    const btn = h('button', {
+      onClick: this.emitAdd
+    }, 'emitAdd')
+    const foo = h('p', {}, 'foo')
+    return h('div', {}, [foo, btn])
+  }
+}
diff --git a/example/ComponentEmit/index.html b/example/ComponentEmit/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>emit</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="./main.js"></script>
+</body>
+
+</html>
diff --git a/example/ComponentEmit/main.js b/example/ComponentEmit/main.js
@@ -0,0 +1,6 @@
+
+import { createApp } from '../../lib/guide-mini-vue.esm.js'
+import { App } from './App.js'
+
+const rootContainer = document.querySelector('#app')
+createApp(App).mount(rootContainer)
diff --git a/example/ComponentSlots/App.js b/example/ComponentSlots/App.js
@@ -0,0 +1,16 @@
+import { h, createTextVNode } from '../../lib/guide-mini-vue.esm.js'
+import { Foo } from './Foo.js'
+
+export const App = {
+  name: 'App',
+  setup(props) {},
+  render() {
+    const app = h('div', {}, 'App')
+    const foo = h(Foo, {}, {
+      header: ({ age }) => [h('p', {}, 'header' + age), createTextVNode('哈哈哈')],
+      footer: () => h('p', {}, 'footer')
+    })
+    // const foo = h(Foo, {}, h('p', {}, '567'))
+    return h('div', {}, [app, foo])
+  }
+}
diff --git a/example/ComponentSlots/Foo.js b/example/ComponentSlots/Foo.js
@@ -0,0 +1,17 @@
+import { h, renderSlots } from "../../lib/guide-mini-vue.esm.js"
+
+export const Foo = {
+  name: 'Foo',
+  setup(){
+    return {}
+  },
+  render() {
+    const age = 18
+    const foo = h('p', {}, 'foo')
+    return h('div', {}, [
+      renderSlots(this.$slots, 'header', { age }),
+      foo,
+      renderSlots(this.$slots, 'footer')
+    ])
+  }
+}
diff --git a/example/ComponentSlots/index.html b/example/ComponentSlots/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>slots</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="./main.js"></script>
+</body>
+
+</html>
diff --git a/example/ComponentSlots/main.js b/example/ComponentSlots/main.js
@@ -0,0 +1,6 @@
+
+import { createApp } from '../../lib/guide-mini-vue.esm.js'
+import { App } from './App.js'
+
+const rootContainer = document.querySelector('#app')
+createApp(App).mount(rootContainer)
diff --git a/example/Currentinstance/App.js b/example/Currentinstance/App.js
@@ -0,0 +1,13 @@
+import { h, getCurrentInstance } from '../../lib/guide-mini-vue.esm.js'
+import { Foo } from './Foo.js'
+
+export const App = {
+  name: 'App',
+  setup() {
+    const instance = getCurrentInstance()
+    console.log('app', instance)
+  },
+  render() {
+    return h('div', {}, [h('div', {}, 'currentInstance demo', ), h(Foo)])
+  }
+}
diff --git a/example/Currentinstance/Foo.js b/example/Currentinstance/Foo.js
@@ -0,0 +1,13 @@
+import { h, getCurrentInstance } from "../../lib/guide-mini-vue.esm.js"
+
+export const Foo = {
+  name: 'Foo',
+  setup() {
+    const instance = getCurrentInstance()
+    console.log('foo', instance)
+    return {}
+  },
+  render() {
+    return h('div', {}, 'foo')
+  }
+}
diff --git a/example/Currentinstance/index.html b/example/Currentinstance/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>instance</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="./main.js"></script>
+</body>
+
+</html>
diff --git a/example/Currentinstance/main.js b/example/Currentinstance/main.js
@@ -0,0 +1,6 @@
+
+import { createApp } from '../../lib/guide-mini-vue.esm.js'
+import { App } from './App.js'
+
+const rootContainer = document.querySelector('#app')
+createApp(App).mount(rootContainer)
diff --git a/example/HelloWorld/App.js b/example/HelloWorld/App.js
@@ -1,12 +1,37 @@
 import { h } from '../../lib/guide-mini-vue.esm.js'
+import { Foo } from './Foo.js'
 
+window.self = null
 export const App = {
+  name: 'App',
   render() {
-    return h('div', 'hi, ' + this.msg)
+    window.self = this
+    return h(
+      'div',
+      {
+        id: 'root',
+        class: ['red', 'hard'],
+        onClick() {
+          console.log('点我干嘛！')
+        },
+        onMousedown() {
+          console.log('mousedown')
+        }
+      },
+      // string
+      // 'hi, mini-vue'
+      // 'hi, ' + this.msg
+      // array
+      // [
+      //   h('p', {class: 'red'}, 'hi'),
+      //   h('p', {class: 'blue'}, 'mini-vue'),
+      // ]
+      [h('div', {}, 'hi, mini-vue'), h(Foo, { count: 1 })]
+    )
   },
   setup() {
     return {
-      msg: 'mini-vue'
+      msg: 'mini-vue,king'
     }
   }
 }
diff --git a/example/HelloWorld/Foo.js b/example/HelloWorld/Foo.js
@@ -0,0 +1,11 @@
+import { h } from "../../lib/guide-mini-vue.esm.js"
+
+export const Foo = {
+  setup(props) {
+    console.log('foo', props)
+    props.count++
+  },
+  render() {
+    return h('div', {}, 'foo:' + this.count)
+  }
+}
diff --git a/example/HelloWorld/index.html b/example/HelloWorld/index.html
@@ -6,6 +6,15 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
+  <style>
+    .red {
+      color: red;
+    }
+
+    .blue {
+      color: blue
+    }
+  </style>
 </head>
 
 <body>