diff --git a/examples/typescript/package.json b/examples/typescript/package.json index e9f2da92..16b91a11 100644 --- 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 index 239c1260..5f3ca07f 100644 --- 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 deleted file mode 100644 index a6f2527c..00000000 --- a/src/declaration.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -import Vue, { ComponentOptions } from 'vue'; - -declare module 'vue/types/options' { - interface ComponentOptions { - jsonld?: () => object; - } -} - -declare module 'vue/types/vue' { - interface Vue { - _uid: number; - } -} diff --git a/src/index.ts b/src/index.ts index a864ac2f..d7ed5218 100644 --- 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 { + jsonld?: () => object; + } +} + const getValue = (val, context) => { if (typeof val === 'object') { return val; diff --git a/test/createMixin.spec.js b/test/createMixin.spec.js index 4f0e8ea6..32295919 100644 --- 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' }], + }, + ]); + }); +});