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-22 11:30:33 +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,90 @@
+import Vue from 'vue'
+import VueMeta from '../../'
+
+Vue.use(VueMeta, {
+  tagIDKeyName: 'hid'
+})
+
+export default function createApp () {
+  return new Vue({
+    components: {
+      Hello: {
+        template: '<p>Hello World</p>',
+        metaInfo: {
+          title: 'Hello World',
+          meta: [
+            {
+              hid: 'description',
+              name: 'description',
+              content: 'The description'
+            }
+          ]
+        }
+      }
+    },
+    metaInfo () {
+      return {
+        title: 'Boring Title',
+        htmlAttrs: { amp: true },
+        meta: [
+          {
+            hid: 'description',
+            name: 'description',
+            content: 'Say something'
+          }
+        ],
+        script: [
+          {
+            hid: 'ldjson-schema',
+            type: 'application/ld+json',
+            innerHTML: '{ "@context": "http://www.schema.org", "@type": "Organization" }'
+          }, {
+            type: 'application/ld+json',
+            innerHTML: '{ "body": "yes" }',
+            body: true
+          }, {
+            hid: 'my-async-script-with-load-callback',
+            src: '/user-1.js',
+            body: true,
+            defer: true,
+            callback: this.loadCallback
+          }, {
+            skip: this.count < 1,
+            src: '/user-2.js',
+            body: true,
+            callback: this.loadCallback
+          }
+        ],
+        __dangerouslyDisableSanitizersByTagID: {
+          'ldjson-schema': ['innerHTML']
+        }
+      }
+    },
+    data () {
+      return {
+        count: 0,
+        users: process.server ? [] : window.users
+      }
+    },
+    methods: {
+      loadCallback () {
+        this.count++
+      }
+    },
+    template: `
+    <div id="app">
+      <hello/>
+
+      <p>{{ count }} users loaded</p>
+
+      <ul>
+        <li
+          v-for="user in users"
+          :key="user.id"
+        >
+        {{ user.id }}: {{ user.name }}
+        </li>
+      </ul>
+    </div>`
+  })
+}