Merge pull request #1020 from ymmooot/nuxt3-stable

nuxt3 stable

cypress/e2e/test.cy.js

@@ -33,35 +33,53 @@ describe('nuxt-jsonld', () => {
       });
   });
 
-  it('dumps reactive jsonld', () => {
-    cy.visit('/products/foo');
-    const clock = cy.clock(Date.UTC(2022, 0, 1, 13, 10, 10));
-
-    // empty tag is shown
+  it('replaces jsonld on page transition', () => {
+    cy.visit('/static');
     cy.get('script[type="application/ld+json"]')
       .should('exist')
       .then((el) => {
-        expect(el.text()).eq('');
+        expect(JSON.parse(el[0].innerText)).to.have.property('name', 'Static json');
+        expect(JSON.parse(el[1].innerText)).to.have.property('name', 'test');
       });
+    cy.get('script[type="application/ld+json"]').should('have.length', 2);
 
-    // jsonld is set
-    cy.contains('Update Purchase Date').click();
+    cy.contains('Back to list').click();
+    cy.url().should('equal', fullpath('/'));
+    cy.wait(300);
     cy.get('script[type="application/ld+json"]')
       .should('exist')
       .then((el) => {
         const json = JSON.parse(el.text());
-        expect(json).to.have.property('@context', 'https://schema.org');
-        expect(json).to.have.property('@type', 'Product');
-        expect(json).to.have.property('name', 'foo');
-        expect(json).to.have.property('description', 'This is a sample foo product.');
-        expect(json).to.have.property('purchaseDate', '2022-01-01T13:10:10.000Z');
+        expect(json).to.not.have.property('name', 'static');
+        expect(json).to.have.property('@type', 'ItemList');
       });
+    cy.get('script[type="application/ld+json"]').should('have.length', 1);
+  });
+
+  it('dumps reactive jsonld', () => {
+    cy.visit('/products/foo');
+
+    // no jsonld yet
+    cy.get('script[type="application/ld+json"]').should('not.exist');
+    cy.wait(300);
 
-    // one second elapsed
-    clock.tick(1000);
+    // jsonld is set
+    cy.contains('Update Count').click();
+    cy.get('code').contains('1').should('exist');
+    cy.wait(300);
+    cy.get('script[type="application/ld+json"]').then((el) => {
+      const json = JSON.parse(el.text());
+      expect(json).to.have.property('@context', 'https://schema.org');
+      expect(json).to.have.property('@type', 'Product');
+      expect(json).to.have.property('name', 'foo');
+      expect(json).to.have.property('description', 'This is a sample foo product.');
+      expect(json).to.have.property('count', 1);
+    });
 
-    // purchase date is updated
-    cy.contains('Update Purchase Date').click();
+    // count is updated
+    cy.contains('Update Count').click();
+    cy.get('code').contains('2').should('exist');
+    cy.wait(300);
     cy.get('script[type="application/ld+json"]')
       .should('exist')
       .then((el) => {
@@ -70,29 +88,7 @@ describe('nuxt-jsonld', () => {
         expect(json).to.have.property('@type', 'Product');
         expect(json).to.have.property('name', 'foo');
         expect(json).to.have.property('description', 'This is a sample foo product.');
-        expect(json).to.have.property('purchaseDate', '2022-01-01T13:10:11.000Z');
-      });
-  });
-
-  it('replaces jsonld on page transition', () => {
-    cy.visit('/static');
-    cy.get('script[type="application/ld+json"]')
-      .should('exist')
-      .then((el) => {
-        expect(JSON.parse(el[0].innerText)).to.have.property('name', 'Static json');
-        expect(JSON.parse(el[1].innerText)).to.have.property('name', 'test');
+        expect(json).to.have.property('count', 2);
       });
-    cy.get('script[type="application/ld+json"]').should('have.length', 2);
-
-    cy.contains('Back to list').click();
-    cy.url().should('equal', fullpath('/'));
-    cy.get('script[type="application/ld+json"]')
-      .should('exist')
-      .then((el) => {
-        const json = JSON.parse(el.text());
-        expect(json).to.not.have.property('name', 'static');
-        expect(json).to.have.property('@type', 'ItemList');
-      });
-    cy.get('script[type="application/ld+json"]').should('have.length', 1);
   });
 });

example/nuxt.config.ts

@@ -1,5 +1,3 @@
-import { defineNuxtConfig } from 'nuxt';
-
 export default defineNuxtConfig({
   modules: ['nuxt-jsonld'],
   css: ['@/css/index.css'],

example/pages/index.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
     <h1>Product List</h1>
-    <code v-html="jsonld"></code>
-
     <ul>
       <li v-for="p in products" :key="p.id">
         name:
@@ -17,11 +15,9 @@
 </template>
 
 <script lang="ts">
-import { WithContext, ItemList, Graph } from 'schema-dts';
-import { getJsonldForDemo } from '@/mixins';
+import { WithContext, ItemList } from 'schema-dts';
 
 export default defineComponent({
-  mixins: [getJsonldForDemo],
   setup() {
     useHead({
       title: 'Product List',

example/pages/option.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <h1>Options API</h1>
-    <code v-html="jsonld"></code>
     <div>
       <p>{{ count }}</p>
       <button @click="count++">+</button>
@@ -11,10 +10,7 @@
 </template>
 
 <script>
-import { getJsonldForDemo } from '@/mixins';
-
 export default {
-  mixins: [getJsonldForDemo],
   data() {
     return {
       count: 0,

example/pages/products/[id].vue

@@ -1,39 +1,36 @@
 <template>
   <div>
     <h1>Product Detail with Reactivity</h1>
-    <code v-if="!product.purchaseDate">No JSON-LD will be shown. Click the button.</code>
-    <code v-else v-html="jsonld"></code>
-    <button @click="updatePurchaseDate">Update Purchase Date</button>
+    <code v-if="!product.count">No JSON-LD will be shown. Click the button.</code>
+    <code v-else>{{ product.count }}</code>
+    <button type="button" @click="updateCount">Update Count</button>
     <div>
       <nuxt-link to="/"> Back to list </nuxt-link>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { getJsonldForDemo } from '@/mixins';
-
 export default defineComponent({
-  mixins: [getJsonldForDemo],
   setup() {
     const { params } = useRoute();
-    const purchaseDate = ref<string>(null);
-    const updatePurchaseDate = () => {
-      purchaseDate.value = new Date().toISOString();
+    const count = ref<number>(0);
+    const updateCount = () => {
+      count.value++;
     };
     const product = reactive({
-      name: params.id as string,
+      name: params.id,
       description: `This is a sample ${params.id} product.`,
-      purchaseDate,
+      count,
     });
 
     useHead({
       title: `Product: ${product.name}`,
     });
 
     useJsonld(() => {
-      if (purchaseDate.value === null) {
-        return;
+      if (!product.count) {
+        return null;
       }
       return {
         '@context': 'https://schema.org',
@@ -43,7 +40,7 @@ export default defineComponent({
     });
 
     return {
-      updatePurchaseDate,
+      updateCount,
       product,
     };
   },

example/pages/static.vue

@@ -2,22 +2,14 @@
   <div>
     <h1>Static JSON-LD example</h1>
     <div>
-      <code v-html="jsonld"></code>
-      <p class="message">
-        When reloading on this page, a part of the jsonld is delayed, but the server-side rendering
-        is working correctly. Don't worry.
-      </p>
       <sample-comp />
       <nuxt-link to="/"> Back to list </nuxt-link>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { getJsonldForDemo } from '@/mixins';
-
 export default defineComponent({
-  mixins: [getJsonldForDemo],
   setup() {
     useJsonld({
       '@context': 'https://schema.org',

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   moduleFileExtensions: ['js', 'mjs', 'ts'],
-  collectCoverageFrom: ['src/runtime/**/*.{js,ts}', '!src/**/*.d.ts'],
+  collectCoverageFrom: ['src/runtime/**/*.{js,ts}', '!src/**/*.d.ts', '!src/runtime/plugin.ts'],
   moduleNameMapper: {
     '^@/(.*)': '<rootDir>/$1',
     '#app': '<rootDir>/node_modules/nuxt/dist/app/index.mjs',

package.json

@@ -49,7 +49,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "^29.0.1",
-    "nuxt": "3.0.0-rc.8",
+    "nuxt": "^3.0.0",
     "prettier": "^2.5.1",
     "shipjs": "0.24.4",
     "tsup": "^6.0.1",

src/module.ts

@@ -1,5 +1,5 @@
 import { resolve } from 'pathe';
-import { defineNuxtModule, addPlugin, addAutoImport } from '@nuxt/kit';
+import { defineNuxtModule, addPlugin, addImports } from '@nuxt/kit';
 import type { Nuxt } from '@nuxt/schema';
 import type { JsonLDFunc } from './types';
 
@@ -20,10 +20,7 @@ export default defineNuxtModule<ModuleOptions>({
     const composable = resolve(__dirname, './runtime/composable');
     nuxt.options.build.transpile.push(runtimeDir);
     nuxt.options.alias['#jsonld'] = composable;
-    addAutoImport({
-      name: 'useJsonld',
-      from: composable,
-    });
+    addImports([{ name: 'useJsonld', as: 'useJsonld', from: composable }]);
 
     if (!options.disableOptionsAPI) {
       addPlugin(resolve(runtimeDir, 'plugin'));

src/runtime/composable.ts

@@ -10,12 +10,17 @@ export const useJsonld = (json: JsonLD | JsonLDFunc) => {
   }
 
   const jsonComputed = computed(() => (isFunc(json) ? json() : json));
-  useHead(() => ({
-    script: [
-      {
-        type: 'application/ld+json',
-        children: jsonComputed.value ? JSON.stringify(jsonComputed.value, null, '') : undefined,
-      },
-    ],
-  }));
+  useHead(() => {
+    if (!jsonComputed.value) {
+      return {};
+    }
+    return {
+      script: [
+        {
+          type: 'application/ld+json',
+          children: JSON.stringify(jsonComputed.value, null, ''),
+        },
+      ],
+    };
+  });
 };

src/runtime/plugin-impl.ts

@@ -0,0 +1,27 @@
+import { computed } from 'vue';
+import { useHead } from '#head';
+
+export default (nuxtApp) => {
+  const mixin = {
+    created() {
+      if (typeof this.$options?.jsonld !== 'function') {
+        return;
+      }
+      const jsonComputed = computed(() => this.$options.jsonld.call(this));
+      useHead(() => ({
+        script: [
+          {
+            type: 'application/ld+json',
+            children: jsonComputed.value ? JSON.stringify(jsonComputed.value, null, '') : undefined,
+          },
+        ],
+      }));
+    },
+  };
+  const plugin = {
+    install(Vue) {
+      Vue.mixin(mixin);
+    },
+  };
+  nuxtApp.vueApp.use(plugin);
+};

src/runtime/plugin.ts

@@ -1,28 +1,4 @@
-import { computed } from 'vue';
 import { defineNuxtPlugin } from '#app';
-import { useHead } from '#head';
+import plugin from './plugin-impl';
 
-export default defineNuxtPlugin((nuxtApp) => {
-  const mixin = {
-    created() {
-      if (typeof this.$options?.jsonld !== 'function') {
-        return;
-      }
-      const jsonComputed = computed(() => this.$options.jsonld.call(this));
-      useHead(() => ({
-        script: [
-          {
-            type: 'application/ld+json',
-            children: jsonComputed.value ? JSON.stringify(jsonComputed.value, null, '') : undefined,
-          },
-        ],
-      }));
-    },
-  };
-  const plugin = {
-    install(Vue) {
-      Vue.mixin(mixin);
-    },
-  };
-  nuxtApp.vueApp.use(plugin);
-});
+export default defineNuxtPlugin(plugin);