initial work on v3

2026-06-17 10:50:34 +03:00 · 2020-04-25 12:32:57 +02:00
parent 6d25ff2f37
commit 41c7561bf9
5 changed files with 129 additions and 20 deletions
@@ -1,4 +1,63 @@
+import { markRaw, reactive, computed, onMounted } from 'vue'

-export default {
+const apps = {}

+export function createMeta () {
+  const id = Symbol()
+
+  const Meta = {
+    id,
+
+    install(app) {
+      let watchersAdded = false
+
+      app.mixin({
+        created() {
+          if (this === this.$root) {
+            
+            watchersAdded = true
+          }
+
+          if (!this.metaData) {
+            return
+          }
+
+          let depth = 0
+          let parent = this
+          while (parent) {
+            parent = parent.$parent
+            depth++
+
+            if (parent === this.$root) {
+              break
+            }
+          }
+
+          const __meta = markRaw({
+            depth
+          })
+          console.log('CREATED', this, this.metaData, depth)
+        }
+      })
+
+      app.config.globalProperties.$meta = this
+    }
+  }
+
+  apps[id] = Meta
+
+  return Meta
+}
+
+export function useMeta () {
+  onMounted(vmMounted)
+
+  const metaData = reactive([])
+  console.log(this)
+
+  return metaData
+}
+
+function vmMounted() {
+  console.log('MOUNTED', this, arguments)
 }
@@ -23,7 +23,7 @@
    "@babel/core": "^7.9.0",
    "@babel/node": "^7.8.7",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
    "@vue/compiler-sfc": "^3.0.0-alpha.10",
    "@vue/server-renderer": "^3.0.0-alpha.10",
    "babel-loader": "^8.1.0",
@@ -22,7 +22,7 @@ export default {

    onMounted(() => console.log(route))

-    return { metaUpdated, page: route.value.name }
+    return { metaUpdated, page: route.name }
  }
 }
 </script>
@@ -1,21 +1,30 @@
-import { createApp, defineComponent, reactive, toRefs, h } from 'vue'
+import { createApp, defineComponent, reactive, toRefs, h, onMounted } from 'vue'
 import VueMeta from 'vue-meta'
 import { createRouter, createWebHistory } from 'vue-router'
 import About from './about.vue'
+import { createMeta, useMeta } from '../next'

 /*Vue.use(VueMeta, {
  refreshOnceOnNavigation: true
 })*/

+const meta = createMeta({
+
+})
+
 let metaUpdated = 'no'
 const ChildComponent = defineComponent({
  name: 'child-component',
  props: {
    page: String
  },
-  template: `<div>
-<h3>You're looking at the <strong>{{ page }}</strong> page</h3>
-<p>Has metaInfo been updated due to navigation? {{ metaUpdated }}</p>
+  template: `
+<metainfo>
+  <title>Another Title</title>
+</metainfo>
+<div>
+  <h3>You're looking at the <strong>{{ page }}</strong> page</h3>
+  <p>Has metaInfo been updated due to navigation? {{ metaUpdated }}</p>
 </div>`,
  metaInfo () {
    return {
@@ -28,13 +37,26 @@ const ChildComponent = defineComponent({
      }
    }
  },
+  created () {
+    console.log(this)
+  },
  setup () {
+    const metaData = useMeta({
+    })
+
    const state = reactive({
      date: null,
      metaUpdated
    })

+
+    onMounted(function vmMounted() {
+      console.log('MOUNTED', this, arguments)
+    })
+
+
    return {
+      metaData,
      ...toRefs(state)
    }
  },
@@ -68,8 +90,29 @@ const router = createRouter({
  ]
 })

+const Metadata = {
+  template: `
+    <teleport to="head">
+      <slot />
+    </teleport>
+
+    <teleport to="body">
+      <slot name="body" />
+    </teleport>
+  `
+}
+
 const App = {
  template: `
+    <metainfo>
+      <title>My Title</title>
+      <meta name="charset" content="utf8" />
+
+      <template v-slot:body>
+        <script>var a = 1</script>
+      </template>
+    </metainfo>
+
    <div id="app">
      <h1>vue-router</h1>
      <router-link to="/">Home</router-link>
@@ -83,8 +126,9 @@ const App = {
 }

 const app = createApp(App)
+app.component('metainfo', Metadata)
 app.use(router)
-
+app.use(meta)
 /*
 const { set, remove } = app.$meta().addApp('custom')

@@ -1,13 +1,19 @@
 <!DOCTYPE html>
-<link rel="stylesheet" href="/global.css">
-<a href="/">&larr; Examples index</a>
-<div id="app"></div>
-<script src="/__build__/vue-router.js"></script>
-<style>
-.page-enter-active, .page-leave-active {
-  transition: opacity .5s
-}
-.page-enter, .page-leave-to {
-  opacity: 0
-}
-</style>
+<html>
+<head>
+  <link rel="stylesheet" href="/global.css">
+  <style>
+  .page-enter-active, .page-leave-active {
+    transition: opacity .5s
+  }
+  .page-enter, .page-leave-to {
+    opacity: 0
+  }
+  </style>
+</head>
+<body>
+  <a href="/">&larr; Examples index</a>
+  <div id="app"></div>
+  <script src="/__build__/vue-router.js"></script>
+</body>
+</html>