feat(nuxt): experimental config to remove runtime scripts when SSR

Author: harlan-zw

packages/nuxt/package.json

@@ -42,7 +42,9 @@
   },
   "dependencies": {
     "@nuxt/kit": "3.0.0-rc.6",
-    "@vueuse/schema-org": "workspace:*"
+    "@vueuse/schema-org": "workspace:*",
+    "magic-string": "^0.26.2",
+    "unplugin": "^0.7.2"
   },
   "devDependencies": {
     "@nuxt/module-builder": "latest",

packages/nuxt/src/module.ts

@@ -9,8 +9,16 @@ import type { SchemaOrgOptions } from '@vueuse/schema-org'
 import { schemaOrgAutoImports, schemaOrgComponents } from '@vueuse/schema-org'
 import type { NuxtModule } from '@nuxt/schema'
 import { dirname } from 'pathe'
+import { createUnplugin } from 'unplugin'
+import MagicString from 'magic-string'
 
 export interface ModuleOptions extends SchemaOrgOptions {
+  /**
+   * Should schema.org only be rendered by the server.
+   *
+   * Useful for optimising performance as it may not be needed by search engines. Changes runtime package size to 0kb.
+   */
+  disableRuntimeScriptsWhenSSR: boolean
   /**
    * Whether composables will be automatically imported for you.
    * @default true
@@ -27,6 +35,8 @@ export interface ModuleHooks {
 
 }
 
+const SchemaOrgPkg = '@vueuse/schema-org'
+
 export default defineNuxtModule<ModuleOptions>({
   meta: {
     configKey: 'schemaOrg',
@@ -35,6 +45,7 @@ export default defineNuxtModule<ModuleOptions>({
     },
   },
   defaults: {
+    disableRuntimeScriptsWhenSSR: false,
     autoImportComposables: true,
     autoImportComponents: true,
   },
@@ -44,22 +55,24 @@ export default defineNuxtModule<ModuleOptions>({
     const runtimeDir = resolve('./runtime')
     nuxt.options.build.transpile.push(runtimeDir)
 
-    // server & client logic are seperated
-    addPlugin(resolve(runtimeDir, 'plugin.client'))
+    const registerClientScripts = !config.disableRuntimeScriptsWhenSSR || nuxt.options.dev
+
+    // allow users to opt-out of client side scripts, if it's not dev
+    if (registerClientScripts)
+      addPlugin(resolve(runtimeDir, 'plugin.client'))
     addPlugin(resolve(runtimeDir, 'plugin.server'))
 
     // avoid unwanted behavior with different package managers
-    const schemaOrgPath = dirname(await resolvePath('@vueuse/schema-org'))
-    nuxt.options.alias['@vueuse/schema-org'] = schemaOrgPath
+    const schemaOrgPath = dirname(await resolvePath(SchemaOrgPkg))
+    nuxt.options.alias[SchemaOrgPkg] = schemaOrgPath
+    nuxt.options.build.transpile.push(...[schemaOrgPath, SchemaOrgPkg])
 
-    nuxt.hook('vite:extend', ({ config }: any) => {
+    nuxt.hook('vite:extendConfig', (config) => {
       config.optimizeDeps = config.optimizeDeps || {}
       config.optimizeDeps.exclude = config.optimizeDeps.exclude || []
-      config.optimizeDeps.exclude.push(...[schemaOrgPath, '@vueuse/schema-org'])
+      config.optimizeDeps.exclude.push(...[schemaOrgPath, SchemaOrgPkg])
     })
 
-    nuxt.options.build.transpile.push(...[schemaOrgPath, '@vueuse/schema-org'])
-
     addTemplate({
       filename: 'schemaOrg.config.mjs',
       getContents: () => `export default ${JSON.stringify({ config })}`,
@@ -69,7 +82,7 @@ export default defineNuxtModule<ModuleOptions>({
       nuxt.hooks.hookOnce('autoImports:sources', (autoImports) => {
         autoImports.unshift({
           from: resolve('./runtime/composables'),
-          imports: schemaOrgAutoImports['@vueuse/schema-org'],
+          imports: schemaOrgAutoImports[SchemaOrgPkg],
         })
       })
     }
@@ -83,5 +96,56 @@ export default defineNuxtModule<ModuleOptions>({
         })
       })
     }
+
+    if (!registerClientScripts) {
+      const mockTemplate = addTemplate({
+        filename: 'schema-org-mock.mjs',
+        getContents() {
+          return schemaOrgAutoImports[SchemaOrgPkg]
+            .map(s => `export function ${s}() {}`)
+            .join('\n')
+        },
+      })
+      addComponent({
+        name: 'SchemaOrgMock',
+        // use mock components if we don't need real ones
+        export: 'SchemaOrgMock',
+        filePath: schemaOrgPath,
+      })
+      nuxt.options.alias['#schema-org/mock'] = mockTemplate.dst!
+
+      const mockerPlugin = createUnplugin(() => {
+        return {
+          name: 'nuxt-schema-org:mocker',
+          enforce: 'post',
+          transformInclude(id) {
+            // only include users custom vue files
+            return id.endsWith('.vue') && id.includes(nuxt.options.srcDir)
+          },
+          transform(code, id) {
+            const s = new MagicString(code)
+
+            // swap our composables with mock composables
+            s.replace(resolve(runtimeDir, 'composables'), '#schema-org/mock')
+            // replace components with mock components
+            s.replace(/_resolveComponent\("SchemaOrg(.*?)"\)/gm, '_resolveComponent("SchemaOrgMock")')
+
+            if (s.hasChanged()) {
+              return {
+                code: s.toString(),
+                map: s.generateMap({ includeContent: true, source: id }),
+              }
+            }
+          },
+        }
+      })
+
+      nuxt.hook('vite:extendConfig', (config, { isClient }) => {
+        if (isClient) {
+          config.plugins = config.plugins || []
+          config.plugins.push(mockerPlugin.vite())
+        }
+      })
+    }
   },
 }) as NuxtModule<ModuleOptions>

packages/schema-org/components/SchemaOrgInspector/index.ts

@@ -2,6 +2,13 @@ import { defineComponent, h, ref, watch } from 'vue-demi'
 import { injectSchemaOrg } from '../../useSchemaOrg'
 import type { SchemaOrgClient } from '../../types'
 
+export const SchemaOrgInspectorMock = defineComponent({
+  name: 'SchemaOrgInspector',
+  setup() {
+    return () => new Promise(() => {})
+  },
+})
+
 export const SchemaOrgInspector = defineComponent({
   name: 'SchemaOrgInspector',
   props: {

packages/schema-org/components/index.ts

@@ -1 +1,4 @@
+import { defineSchemaOrgComponent } from './defineSchemaOrgComponent'
+
 export * from './SchemaOrgInspector'
+export const SchemaOrgMock = defineSchemaOrgComponent('SchemaOrgMock')