实现provide-inject及实现自定义渲染器customRenderer

daoyking · Jun 9, 2022 · 11b3f99 · 11b3f99
1 parent 0e7c24e
commit 11b3f99
Show file tree

Hide file tree

Showing 16 changed files with 709 additions and 329 deletions.
diff --git a/example/ApiProvide/App.js b/example/ApiProvide/App.js
@@ -0,0 +1,50 @@
+import { h, provide, inject } from "../../lib/guide-mini-vue.esm.js"
+
+const Provider = {
+  name: 'Provider',
+  setup() {
+    provide('foo', 'fooVal')
+    provide('bar', 'barVal')
+  },
+  render() {
+    return h('div', {}, [h('p', {}, 'Provider'), h(Pro)])
+  }
+}
+
+const Pro = {
+  name: 'Pro',
+  setup() {
+    provide('foo', 'ProVal')
+    const foo = inject('foo')
+    return {
+      foo
+    }
+  },
+  render() {
+    return h('div', {}, [h('p', {}, 'Pro---' + this.foo), h(Consumer)])
+  }
+}
+
+const Consumer = {
+  name: 'Consumer',
+  setup() {
+    const foo = inject('foo')
+    const bar = inject('bar')
+    // const baz = inject('baz', 'defaultVal')
+    const baz = inject('baz', () => 'defaultVal')
+    return {
+      foo,bar, baz
+    }
+  },
+  render() {
+    return h('div', {}, `Consumer - ${this.foo} - ${this.bar} - ${this.baz}`)
+  }
+}
+
+export const App =  {
+  name: 'App',
+  setup() {},
+  render() {
+    return h('div', {}, [h('p', {}, 'ApiProvide'), h(Provider)])
+  }
+}
diff --git a/example/ApiProvide/index.html b/example/ApiProvide/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>provide-inject</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script src="./main.js" type="module"></script>
+</body>
+
+</html>
diff --git a/example/ApiProvide/main.js b/example/ApiProvide/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/CustomRenderer/App.js b/example/CustomRenderer/App.js
@@ -0,0 +1,13 @@
+import { h } from '../../lib/guide-mini-vue.esm.js'
+export const App = {
+  name: 'App',
+  setup() {
+    return {
+      x: 100,
+      y: 100
+    }
+  },
+  render() {
+    return h('rect', {x: this.x, y: this.y})
+  },
+}
diff --git a/example/CustomRenderer/index.html b/example/CustomRenderer/index.html
@@ -0,0 +1,26 @@
+<!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>Document</title>
+  <style>
+    .red {
+      color: red;
+    }
+
+    .blue {
+      color: blue
+    }
+  </style>
+  <script src="https://pixijs.download/release/pixi.js"></script>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script src="./main.js" type="module"></script>
+</body>
+
+</html>
diff --git a/example/CustomRenderer/main.js b/example/CustomRenderer/main.js
@@ -0,0 +1,35 @@
+
+import { createRenderer } from '../../lib/guide-mini-vue.esm.js'
+import { App } from './App.js'
+
+// const rootContainer = document.querySelector('#app')
+// createApp(App).mount(rootContainer)
+
+console.log('pixi:', PIXI)
+
+const geme = new PIXI.Application({
+  width: 500,
+  height: 500
+})
+
+document.body.append(geme.view)
+
+const renderer = createRenderer({
+  createElement(type){
+    if(type === 'rect') {
+      const rect = new PIXI.Graphics()
+      rect.beginFill(0xff0000)
+      rect.drawRect(0,0,100,100)
+      rect.endFill()
+      return rect
+    }
+  },
+  patchProp(el, key, val){
+    el[key] = val
+  },
+  insert(el, parent){
+    parent.addChild(el)
+  }
+})
+
+renderer.createApp(App).mount(geme.stage)