fix: fix bug of type

ymmooot · May 31, 2019 · 9e7c807 · 9e7c807
1 parent 692ca43
commit 9e7c807
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 27 deletions.
diff --git a/examples/typescript/package.json b/examples/typescript/package.json
@@ -13,9 +13,9 @@
   "dependencies": {
     "cross-env": "^5.2.0",
     "nuxt": "^2.0.0",
+    "nuxt-jsonld": "file:../../lib/",
     "ts-node": "^8.2.0",
-    "vue-property-decorator": "^8.1.1",
-    "nuxt-jsonld": "file:../../lib"
+    "vue-property-decorator": "^8.1.1"
   },
   "devDependencies": {
     "@nuxt/typescript": "^2.7.1",

diff --git a/src/createMixin.ts b/src/createMixin.ts
@@ -25,6 +25,8 @@ export default (options: Options = {}): JsonldMixin => {
     ...options,
   };
 
+  let counter = 0;
+
   return {
     head(this: Vue) {
       if (!this.$options || typeof this.$options.jsonld !== 'function') {
@@ -34,7 +36,8 @@ export default (options: Options = {}): JsonldMixin => {
       const stringifiedJson = JSON.stringify(this.$options.jsonld.call(this), null, mergedOptions.space);
       const innerHTML = mergedOptions.space === 0 ? stringifiedJson : `\n${stringifiedJson}\n`;
 
-      const hid = `nuxt-jsonld-${this._uid}`;
+      const hid = `nuxt-jsonld-${counter}`;
+      counter += 1;
       return {
         script: [
           {

diff --git a/src/declaration.d.ts b/src/declaration.d.ts
diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,13 @@
-import './declaration.d';
+import Vue, { ComponentOptions } from 'vue';
 import createJsonldMixin from './createMixin';
 import decorator from './decorator';
 
+declare module 'vue/types/options' {
+  interface ComponentOptions<V extends Vue> {
+    jsonld?: () => object;
+  }
+}
+
 const getValue = (val, context) => {
   if (typeof val === 'object') {
     return val;

diff --git a/test/createMixin.spec.js b/test/createMixin.spec.js
@@ -54,15 +54,13 @@ describe('with jsonld', () => {
   test('head method returns jsonld metaInfo', () => {
     const mock = mockInstanceFactory();
 
-    const mockHid = `nuxt-jsonld-${mock._uid}`;
-
     expect(mock.$options.head.call(mock)).toEqual({
       __dangerouslyDisableSanitizersByTagID: {
-        [mockHid]: 'innerHTML',
+        'nuxt-jsonld-0': 'innerHTML',
       },
       script: [
         {
-          hid: mockHid,
+          hid: 'nuxt-jsonld-0',
           innerHTML: `
 {
   "@context": "http://schema.org",
@@ -94,15 +92,14 @@ describe('with jsonld', () => {
   describe('customizing indentation', () => {
     test('using tab', () => {
       const mock = mockInstanceFactory({ space: '\t' });
-      const mockHid = `nuxt-jsonld-${mock._uid}`;
 
       expect(mock.$options.head.call(mock)).toEqual({
         __dangerouslyDisableSanitizersByTagID: {
-          [mockHid]: 'innerHTML',
+          'nuxt-jsonld-0': 'innerHTML',
         },
         script: [
           {
-            hid: mockHid,
+            hid: 'nuxt-jsonld-0',
             innerHTML: `
 {
 	"@context": "http://schema.org",
@@ -132,15 +129,14 @@ describe('with jsonld', () => {
     });
     test('no space', () => {
       const mock = mockInstanceFactory({ space: 0 });
-      const mockHid = `nuxt-jsonld-${mock._uid}`;
 
       expect(mock.$options.head.call(mock)).toEqual({
         __dangerouslyDisableSanitizersByTagID: {
-          [mockHid]: 'innerHTML',
+          'nuxt-jsonld-0': 'innerHTML',
         },
         script: [
           {
-            hid: mockHid,
+            hid: 'nuxt-jsonld-0',
             innerHTML: `{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://example.com/"}},{"@type":"ListItem","position":2,"item":{"@id":"https://example.com/foo/"}}]}`,
             type: 'application/ld+json',
           },
@@ -149,3 +145,50 @@ describe('with jsonld', () => {
     });
   });
 });
+
+describe('hid', () => {
+  test('increase hid number sufix', () => {
+    const mixin = createJsonldMixin({ space: 0 });
+    const mock1 = new Vue({
+      mixins: [mixin],
+      jsonld() {
+        return {};
+      },
+    });
+    const mock2 = new Vue({
+      mixins: [mixin],
+      jsonld() {
+        return {};
+      },
+    });
+    const mock3 = new Vue({
+      mixins: [mixin],
+      jsonld() {
+        return {};
+      },
+    });
+
+    const actual = [mock1, mock2, mock3].map(mock => mock.$options.head.call(mock));
+
+    expect(actual).toEqual([
+      {
+        __dangerouslyDisableSanitizersByTagID: {
+          'nuxt-jsonld-0': 'innerHTML',
+        },
+        script: [{ hid: 'nuxt-jsonld-0', innerHTML: '{}', type: 'application/ld+json' }],
+      },
+      {
+        __dangerouslyDisableSanitizersByTagID: {
+          'nuxt-jsonld-1': 'innerHTML',
+        },
+        script: [{ hid: 'nuxt-jsonld-1', innerHTML: '{}', type: 'application/ld+json' }],
+      },
+      {
+        __dangerouslyDisableSanitizersByTagID: {
+          'nuxt-jsonld-2': 'innerHTML',
+        },
+        script: [{ hid: 'nuxt-jsonld-2', innerHTML: '{}', type: 'application/ld+json' }],
+      },
+    ]);
+  });
+});