Merge pull request #59 from ymmooot/fix_random_hid_issue

Fix random hid issue

.eslintignore

@@ -0,0 +1,6 @@
+node_modules
+yarn-error.log
+build
+lib/
+.eslintcache
+examples

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
   root: true,
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -37,7 +37,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['./test/**/*.spec.*'],
+      files: ['test/**/**.spec.*'],
       env: {
         jest: true,
       },

changelog.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  disableEmoji: true,
+};

package.json

@@ -21,13 +21,16 @@
     "build": "tsc -p .",
     "preversion": "npm run build",
     "release": "semantic-release",
-    "lint": "eslint --ext .ts,.js src",
-    "lint:fix": "eslint --ext .ts,.js --fix src"
+    "lint": "eslint --ext .ts,.js .",
+    "lint:fix": "eslint --ext .ts,.js --fix ."
   },
   "files": [
     "lib"
   ],
   "typings": "./lib/index.d.ts",
+  "dependencies": {
+    "xxhashjs": "^0.2.2"
+  },
   "devDependencies": {
     "@semantic-release/changelog": "^3.0.2",
     "@semantic-release/commit-analyzer": "^6.1.0",
@@ -38,7 +41,7 @@
     "@types/jest": "^24.0.13",
     "@typescript-eslint/eslint-plugin": "^1.9.0",
     "@typescript-eslint/parser": "^1.9.0",
-    "cz-conventional-changelog": "2.1.0",
+    "cz-conventional-changelog": "^2.1.0",
     "eslint": "^5.16.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-config-prettier": "^6.0.0",

src/createMixin.ts

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import XXH from 'xxhashjs';
 
 interface Options {
   space?: number | string;
@@ -25,8 +26,6 @@ export default (options: Options = {}): JsonldMixin => {
     ...options,
   };
 
-  let counter = 0;
-
   return {
     head(this: Vue) {
       if (!this.$options || typeof this.$options.jsonld !== 'function') {
@@ -40,8 +39,9 @@ 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-${counter}`;
-      counter += 1;
+      const hash = XXH.h32(innerHTML, 0).toString(16);
+      const hid = `nuxt-jsonld-${hash}`;
+
       return {
         script: [
           {

test/createMixin.spec.js

@@ -1,6 +1,40 @@
 import Vue from 'vue';
 import createJsonldMixin from '../src/createMixin';
 
+const mockInstanceFactory = mixinOptions =>
+  new Vue({
+    mixins: [createJsonldMixin(mixinOptions)],
+    data() {
+      return {
+        breadcrumbs: [
+          {
+            url: 'https://example.com/',
+            name: 'top page',
+          },
+          {
+            url: 'https://example.com/foo/',
+            name: 'foo',
+          },
+        ],
+      };
+    },
+    jsonld() {
+      const items = this.breadcrumbs.map((item, index) => ({
+        '@type': 'ListItem',
+        position: index + 1,
+        item: {
+          '@id': item.url,
+          name: item.text,
+        },
+      }));
+      return {
+        '@context': 'http://schema.org',
+        '@type': 'BreadcrumbList',
+        itemListElement: items,
+      };
+    },
+  });
+
 describe('without jsonld', () => {
   test('head method returns an empty object when jsonld is not defined', () => {
     const mock = new Vue({ mixins: [createJsonldMixin()] });
@@ -17,50 +51,16 @@ describe('without jsonld', () => {
 });
 
 describe('with jsonld', () => {
-  const mockInstanceFactory = mixinOptions =>
-    new Vue({
-      mixins: [createJsonldMixin(mixinOptions)],
-      data() {
-        return {
-          breadcrumbs: [
-            {
-              url: 'https://example.com/',
-              name: 'top page',
-            },
-            {
-              url: 'https://example.com/foo/',
-              name: 'foo',
-            },
-          ],
-        };
-      },
-      jsonld() {
-        const items = this.breadcrumbs.map((item, index) => ({
-          '@type': 'ListItem',
-          position: index + 1,
-          item: {
-            '@id': item.url,
-            name: item.text,
-          },
-        }));
-        return {
-          '@context': 'http://schema.org',
-          '@type': 'BreadcrumbList',
-          itemListElement: items,
-        };
-      },
-    });
-
   test('head method returns jsonld metaInfo', () => {
     const mock = mockInstanceFactory();
 
     expect(mock.$options.head.call(mock)).toEqual({
       __dangerouslyDisableSanitizersByTagID: {
-        'nuxt-jsonld-0': 'innerHTML',
+        'nuxt-jsonld-8251e634': 'innerHTML',
       },
       script: [
         {
-          hid: 'nuxt-jsonld-0',
+          hid: 'nuxt-jsonld-8251e634',
           innerHTML: `
 {
   "@context": "http://schema.org",
@@ -93,19 +93,19 @@ describe('with jsonld', () => {
     const mock = mockInstanceFactory();
     mock.$options.jsonld = () => null;
     expect(mock.$options.head.call(mock)).toEqual({});
-  })
+  });
 
   describe('customizing indentation', () => {
     test('using tab', () => {
       const mock = mockInstanceFactory({ space: '\t' });
 
       expect(mock.$options.head.call(mock)).toEqual({
         __dangerouslyDisableSanitizersByTagID: {
-          'nuxt-jsonld-0': 'innerHTML',
+          'nuxt-jsonld-a36cc3c0': 'innerHTML',
         },
         script: [
           {
-            hid: 'nuxt-jsonld-0',
+            hid: 'nuxt-jsonld-a36cc3c0',
             innerHTML: `
 {
 	"@context": "http://schema.org",
@@ -138,11 +138,11 @@ describe('with jsonld', () => {
 
       expect(mock.$options.head.call(mock)).toEqual({
         __dangerouslyDisableSanitizersByTagID: {
-          'nuxt-jsonld-0': 'innerHTML',
+          'nuxt-jsonld-5414b96e': 'innerHTML',
         },
         script: [
           {
-            hid: 'nuxt-jsonld-0',
+            hid: 'nuxt-jsonld-5414b96e',
             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',
           },
@@ -153,48 +153,74 @@ describe('with jsonld', () => {
 });
 
 describe('hid', () => {
-  test('increase hid number sufix', () => {
+  test('hid hash suffix is xxHash based innerHTML', () => {
     const mixin = createJsonldMixin({ space: 0 });
     const mock1 = new Vue({
       mixins: [mixin],
       jsonld() {
-        return {};
+        return {
+          '@context': 'http://schema.org',
+          '@type': 'BreadcrumbList',
+          itemListElement: [
+            {
+              '@type': 'ListItem',
+              position: 1,
+              item: {
+                '@id': 'https://example.jp/',
+                name: 'home',
+              },
+            },
+          ],
+        };
       },
     });
     const mock2 = new Vue({
       mixins: [mixin],
       jsonld() {
-        return {};
-      },
-    });
-    const mock3 = new Vue({
-      mixins: [mixin],
-      jsonld() {
-        return {};
+        return {
+          '@context': 'http://schema.org',
+          '@type': 'WebSite',
+          name: 'nuxt-jsonld',
+          url: 'https://github.com/ymmooot/nuxt-jsonld/',
+        };
       },
     });
 
-    const actual = [mock1, mock2, mock3].map(mock => mock.$options.head.call(mock));
+    const actual = [mock1, mock2].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',
+          'nuxt-jsonld-4e298139': 'innerHTML',
         },
-        script: [{ hid: 'nuxt-jsonld-1', innerHTML: '{}', type: 'application/ld+json' }],
+        script: [
+          {
+            hid: 'nuxt-jsonld-4e298139',
+            innerHTML: `{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://example.jp/","name":"home"}}]}`,
+            type: 'application/ld+json',
+          },
+        ],
       },
       {
         __dangerouslyDisableSanitizersByTagID: {
-          'nuxt-jsonld-2': 'innerHTML',
+          'nuxt-jsonld-90d62c9': 'innerHTML',
         },
-        script: [{ hid: 'nuxt-jsonld-2', innerHTML: '{}', type: 'application/ld+json' }],
+        script: [
+          {
+            hid: 'nuxt-jsonld-90d62c9',
+            innerHTML: `{"@context":"http://schema.org","@type":"WebSite","name":"nuxt-jsonld","url":"https://github.com/ymmooot/nuxt-jsonld/"}`,
+            type: 'application/ld+json',
+          },
+        ],
       },
     ]);
   });
+
+  test('hid hash suffix is same when innerHTML is same', () => {
+    const mock = mockInstanceFactory();
+    const mock2 = mockInstanceFactory();
+
+    expect(mock.$options.head.call(mock).script[0].hid).toBe('nuxt-jsonld-8251e634');
+    expect(mock2.$options.head.call(mock).script[0].hid).toBe('nuxt-jsonld-8251e634');
+  });
 });