feat: enable onload callbacks (#414)

* refactor(examples): run ssr example from server * chore: switch to babel for build buble complains too much * feat: enable loaded callbacks feat: add skip option * examples: add async-callback browser example * examples: fix server * examples(ssr): add reactive script with callback * fix: also skip on ssr * chore: remove unused var * feat: only add mutationobserver if DOM is still loading feat: disconnect mutation observer once DOM has loaded * examples: pass vmid to loadCallback instead of el * feat: also support load callbacks for link/style tags * test: add unit tests for load * test: add load e2e test * chore: fix lint * chore: remove unused files * test: fix e2e load callback test * test: fix attempt * examples: ie9 compatiblity destructuring doesnt work in ie9 * fix: add onload attribute on ssr dont rely on mutationobserver * chore: lint ci conf * refactor: remove loadCallbackAttribute config option test: fix coverage for load * test: improve coverage * fix: only use console when it exists (for ie9) * chore: fix coverage
2026-06-15 11:02:24 +03:00 · 2019-07-24 10:18:40 +02:00
parent 05163a77a8
commit fc71e1f1c4
49 changed files with 963 additions and 632 deletions
@@ -0,0 +1,88 @@
+import Vue from 'vue'
+import VueMeta from 'vue-meta'
+
+Vue.use(VueMeta)
+
+window.users = []
+
+new Vue({
+  metaInfo () {
+    return {
+      title: 'Async Callback',
+      titleTemplate: '%s | Vue Meta Examples',
+      script: [
+        {
+          skip: this.count < 2,
+          vmid: 'potatoes',
+          src: '/user-3.js',
+          async: true,
+          callback: this.updateCounter
+        },
+        {
+          skip: this.count < 1,
+          vmid: 'vegetables',
+          src: '/user-2.js',
+          async: true,
+          callback: this.updateCounter
+        },
+        {
+          vmid: 'meat',
+          src: '/user-1.js',
+          async: true,
+          callback: el => this.loadCallback(el.getAttribute('data-vmid'))
+        },
+        ...this.scripts
+      ]
+    }
+  },
+  data () {
+    return {
+      count: 0,
+      scripts: [],
+      users: window.users
+    }
+  },
+  watch: {
+    count (val) {
+      if (val === 3) {
+        this.addScript()
+      }
+    }
+  },
+  methods: {
+    updateCounter () {
+      this.count++
+    },
+    addScript () {
+      this.scripts.push({
+        src: '/user-4.js',
+        callback: () => {
+          this.updateCounter()
+        }
+      })
+    },
+    loadCallback (vmid) {
+      if (vmid === 'meat') {
+        this.updateCounter()
+      }
+    }
+  },
+  template: `
+    <div id="app">
+      <h1>Async Callback</h1>
+      <p>{{ count }} scripts loaded</p>
+
+      <div>
+        <h2>Users</h2>
+        <ul>
+          <li
+            v-for="user in users"
+            :key="user.id"
+          >
+          <strong>{{ user.id }}</strong>: {{ user.name }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  `
+}).$mount('#app')
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Async Callback Title</title>
+  <link rel="stylesheet" href="/global.css">
+</head>
+<body>
+  <a href="/">&larr; Examples index</a>
+  <div id="app"></div>
+
+  <script src="/__build__/async-callback.js"></script>
+</body>
+</html>