fix: test html succeed

src/index.js

@@ -1,31 +1,27 @@
-import { reactive, ref, computed } from './reactivity'
-import { effect } from './reactivity/effect'
+import { reactive, ref, computed, effect } from './reactivity'
 import { h, Text, Fragment } from './runtime/vnode'
-import { render } from './runtime/render'
+import { createApp } from './runtime/createApp'
 
 const root = document.createElement('div')
-const value = ref(true)
-let parentVnode
-let childVnode1
-let childVnode2
 
-const Parent = {
-  render: () => {
-    return (parentVnode = h(Child))
+const Comp = {
+  setup() {
+    const counter = ref(0)
+    const add = () => {
+      counter.value++
+    }
+    return {
+      counter,
+      add
+    }
+  },
+  render(ctx) {
+    return [
+      h('div', null, ctx.counter.value),
+      h('button', { onClick: ctx.add }, 'add')
+    ]
   }
 }
 
-const Child = {
-  render: () => {
-    return value.value ? (childVnode1 = h('div')) : (childVnode2 = h('span'))
-  }
-}
-
-render(h(Parent), root)
-// expect(root.innerHTML).toBe('<div></div>')
-// expect(parentVnode.el).toBe(childVnode1.el)
-debugger
-value.value = false
-console.log(value.value)
-// expect(root.innerHTML).toBe(`<span></span>`)
-// expect(parentVnode.el).toBe(childVnode2.el)
+createApp(Comp).mount(root)
+document.body.appendChild(root)

src/runtime/component.js

@@ -87,6 +87,7 @@ export function mountComponent(vnode, container, anchor, patch) {
         }
 
         const prev = instance.subTree
+        // 即使返回的是数组,我们可以自己进行normalize
         const subTree = (instance.subTree = normalizeVNode(
           originalComp.render(instance.ctx)
         ))

webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
   mode: 'development',
@@ -10,10 +11,14 @@ module.exports = {
     path: path.resolve(__dirname, 'dist'),
     clean: true
   },
-
+  plugins: [
+    // 自动生成html文件，并且引用bundle的文件
+    new HtmlWebpackPlugin({
+      title: 'mini-vue3'
+    })
+  ],
   devServer: {
     // 设置内容的根路径,使用该目录中真实存在的静态资源,而不是虚拟资源
-    contentBase: './src/examples',
     contentBase: './dist',
     watchContentBase: true
   }