feat: simplify runtime aliasing and mocking

packages/nuxt/src/module.ts

@@ -3,14 +3,15 @@ import {
   addPlugin,
   addTemplate,
   createResolver,
-  defineNuxtModule, extendWebpackConfig,
+  defineNuxtModule,
+  extendWebpackConfig,
+  importModule,
 } from '@nuxt/kit'
-import { AliasProvider, AliasRuntime, resolveUserConfig, schemaOrgAutoImports, schemaOrgComponents } from '@vueuse/schema-org'
-import type { NuxtModule } from '@nuxt/schema'
-import { dirname } from 'pathe'
 import type { UserConfig } from '@vueuse/schema-org'
-import { AliasRuntimePluginVite, AliasRuntimePluginWebpack } from '@vueuse/schema-org-vite'
+import { AliasRuntime, resolveUserConfig, schemaOrgAutoImports, schemaOrgComponents } from '@vueuse/schema-org'
+import type { NuxtModule } from '@nuxt/schema'
 import type { MetaInput } from 'schema-org-graph-js'
+import { dirname } from 'pathe'
 
 export interface ModuleOptions extends UserConfig {}
 
@@ -45,24 +46,16 @@ export default defineNuxtModule<ModuleOptions>({
       return
     }
 
-    // avoid unwanted behavior with different package managers
-    const schemaOrgPath = dirname(await resolvePath(Pkg))
-
     // if ssr is disabled we need to inject the client
     if (!nuxt.options.ssr)
       moduleOptions.client = true
     // enable client in dev mode
     if (typeof moduleOptions.client === 'undefined')
       moduleOptions.client = !!nuxt.options.dev
 
-    const providerPath = await resolvePath(`${schemaOrgPath}/providers/${moduleOptions.full ? 'full' : 'simple'}`)
-    const runtimePath = await resolvePath(`${schemaOrgPath}/runtime`)
-    const runtimeMockPath = await resolvePath(`${schemaOrgPath}/runtime-mock`)
-    // // set the alias for the types
-    nuxt.options.alias[AliasProvider] = providerPath
-    nuxt.options.alias[AliasRuntime] = runtimePath
-    // NOTE: ALIASING PKG IN VITE BREAKS IT, not sure why this works
-    nuxt.options.alias[Pkg] = schemaOrgPath
+    // set the runtime alias so nuxt knows where our types are
+    const pkgPath = dirname(await resolvePath(Pkg))
+    nuxt.options.alias[AliasRuntime] = `${pkgPath}/runtime-${moduleOptions.full ? 'schema-dts' : 'simple'}`
 
     const moduleRuntimeDir = resolve('./runtime')
     nuxt.options.build.transpile.push(...[moduleRuntimeDir, AliasRuntime])
@@ -90,60 +83,31 @@ export default defineNuxtModule<ModuleOptions>({
       })
     }
 
-    // allow SchemaOrgDebug to work in build modes
-    await addComponent({
-      name: 'SchemaOrgDebug',
-      export: 'SchemaOrgDebug',
-      filePath: `${schemaOrgPath}/runtime/components/SchemaOrgDebug`,
-    })
-
     nuxt.hooks.hook('autoImports:sources', (autoImports) => {
       autoImports.unshift(...schemaOrgAutoImports)
     })
 
-    const realPaths = {
-      runtime: runtimePath,
-      provider: providerPath,
-      pkg: schemaOrgPath,
-    }
-    const mockPaths = {
-      runtime: runtimeMockPath,
-      provider: runtimeMockPath,
-      pkg: schemaOrgPath,
-    }
-
     // Support Vite
-    nuxt.hooks.hook('vite:extendConfig', (config, { isClient }) => {
+    nuxt.hooks.hook('vite:extendConfig', async (config, { isClient }) => {
       config.plugins = config.plugins || []
-      config.plugins.push(AliasRuntimePluginVite({
-        paths: (!moduleOptions.client && isClient)
-          ? mockPaths
-          : realPaths,
+      const SchemaOrgVite = await importModule(`${pkgPath}/vite`, { interopDefault: true })
+      config.plugins.push(SchemaOrgVite({
+        dts: false,
+        mock: !moduleOptions.client && isClient,
+        full: moduleOptions.full,
       }))
     })
 
     // Support webpack
-    extendWebpackConfig((config) => {
+    extendWebpackConfig(async (config) => {
       config.plugins = config.plugins || []
-      config.plugins.push(AliasRuntimePluginWebpack({
-        paths: realPaths,
-      }))
-    }, {
-      client: false,
-      modern: false,
-      server: true,
-    })
-    extendWebpackConfig((config) => {
-      config.plugins = config.plugins || []
-      config.plugins.push(AliasRuntimePluginWebpack({
-        paths: !moduleOptions.client
-          ? mockPaths
-          : realPaths,
-      }))
-    }, {
-      client: true,
-      modern: true,
-      server: false,
+      const SchemaOrgWebpack = await importModule(`${pkgPath}/webpack`, { interopDefault: true })
+      const plugins = SchemaOrgWebpack({
+        dts: false,
+        mock: !moduleOptions.client && config.name === 'client',
+        full: moduleOptions.full,
+      })
+      config.plugins.push(...plugins)
     })
   },
 }) as NuxtModule<ModuleOptions>

packages/schema-org/build.config.ts

@@ -1,5 +1,5 @@
 import { defineBuildConfig } from 'unbuild'
-import { copy, readFile, rename, writeFile } from 'fs-extra'
+import { copy, readFile, writeFile } from 'fs-extra'
 
 export default defineBuildConfig({
   clean: true,
@@ -9,23 +9,29 @@ export default defineBuildConfig({
   },
   entries: [
     { input: 'src/index' },
-    { input: 'providers/', outDir: 'dist/providers', builder: 'mkdist' },
-    { input: 'runtime/', outDir: 'dist/runtime', builder: 'mkdist' },
+    { input: 'src/plugins/vite' },
+    { input: 'src/plugins/webpack' },
+    { input: 'runtime-simple/', outDir: 'dist/runtime-simple', builder: 'mkdist' },
     { input: 'runtime-mock/', outDir: 'dist/runtime-mock', builder: 'mkdist' },
   ],
   hooks: {
     'mkdist:done': async function (ctx) {
-      const simpleDtsFile = `${ctx.options.outDir}/providers/simple.d.ts`
+      const runtimeSimpleDir = `${ctx.options.outDir}/runtime-simple`
+      const runtimeFullDir = `${ctx.options.outDir}/runtime-schema-dts`
+      await copy(runtimeSimpleDir, runtimeFullDir)
+
+      const simpleDtsFile = `${runtimeSimpleDir}/provider.d.ts`
       const simpleDts = await readFile(simpleDtsFile, { encoding: 'utf-8' })
       const fullDts = simpleDts
         .replace('from \'schema-org-graph-js\';', 'from \'schema-dts\';')
-      await writeFile(`${ctx.options.outDir}/providers/full.d.ts`, fullDts, { encoding: 'utf-8' })
-      await rename(simpleDtsFile, `${ctx.options.outDir}/providers/simple.d.ts`)
-      await copy(`${ctx.options.outDir}/providers/simple.mjs`, `${ctx.options.outDir}/providers/full.mjs`)
+      await writeFile(`${runtimeFullDir}/provider.d.ts`, fullDts, { encoding: 'utf-8' })
     },
   },
   externals: [
-    '#vueuse/schema-org',
+    'vite',
+    'unplugin-ast',
+    'unplugin',
+    'unplugin-vue-components',
     'vue',
   ],
 })

packages/schema-org/package.json

@@ -30,35 +30,33 @@
       "require": "./dist/index.cjs",
       "import": "./dist/index.mjs"
     },
-    "./composables": {
-      "types": "./dist/runtime/composables/index.d.ts",
-      "import": "./dist/runtime/composables/index.mjs"
-    },
-    "./components": {
-      "types": "./dist/runtime/components/index.d.ts",
-      "import": "./dist/runtime/components/index.mjs"
-    },
-    "./simple": {
-      "types": "./dist/providers/simple.d.ts",
-      "import": "./dist/providers/simple.mjs"
+    "./runtime": {
+      "types": "./dist/runtime-simple/index.d.ts",
+      "import": "./dist/runtime-simple/index.mjs"
     },
-    "./full": {
-      "types": "./dist/providers/full.d.ts",
-      "import": "./dist/providers/full.mjs"
+    "./runtime-simple": {
+      "types": "./dist/runtime-simple/index.d.ts",
+      "import": "./dist/runtime-simple/index.mjs"
     },
-    "./runtime": {
-      "types": "./dist/runtime/index.d.ts",
-      "import": "./dist/runtime/index.mjs"
+    "./runtime-schema-dts": {
+      "types": "./dist/runtime-schema-dts/index.d.ts",
+      "import": "./dist/runtime-schema-dts/index.mjs"
     },
-    "./runtime/mock": {
+    "./runtime-mock": {
       "types": "./dist/runtime-mock/index.d.ts",
       "import": "./dist/runtime-mock/index.mjs"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "require": "./dist/vite.cjs",
+      "import": "./dist/vite.mjs"
+    },
+    "./webpack": {
+      "types": "./dist/webpack.d.ts",
+      "require": "./dist/webpack.cjs",
+      "import": "./dist/webpack.mjs"
     }
   },
-  "imports": {
-    "#vueuse/schema-org/provider": "./dist/providers/simple.mjs",
-    "#vueuse/schema-org/runtime": "./dist/runtime/index.mjs"
-  },
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -73,11 +71,20 @@
     "vue": ">=3.2.0"
   },
   "dependencies": {
-    "schema-org-graph-js": "0.5.0"
+    "@rollup/pluginutils": "^4.2.1",
+    "magic-string": "^0.26.2",
+    "mlly": "^0.5.14",
+    "pathe": "^0.3.5",
+    "pkg-types": "^0.3.4",
+    "schema-dts": "^1.1.0",
+    "schema-org-graph-js": "0.5.0",
+    "unplugin": "^0.9.4",
+    "unplugin-ast": "^0.5.4"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
     "fs-extra": "^10.1.0",
+    "unplugin-vue-components": "^0.22.4",
     "vue": "^3.2.37"
   }
 }

packages/schema-org/runtime-mock/components.ts

@@ -36,3 +36,4 @@ export const SchemaOrgRecipe = /* @__PURE__ */ defineSchemaOrgComponent('SchemaO
 export const SchemaOrgVideo = /* @__PURE__ */ defineSchemaOrgComponent('SchemaOrgVideo')
 export const SchemaOrgWebPage = /* @__PURE__ */ defineSchemaOrgComponent('SchemaOrgWebPage')
 export const SchemaOrgWebSite = /* @__PURE__ */ defineSchemaOrgComponent('SchemaOrgWebSite')
+export const SchemaOrgDebug = /* @__PURE__ */ defineSchemaOrgComponent('SchemaOrgDebug')

packages/schema-org/runtime-mock/composables.ts

@@ -1,21 +1,20 @@
-const mockFn = (input: any) => input
+const noop = (input: any) => input
 
-export const useSchemaOrg = /* @__PURE__ */ mockFn
-export const injectSchemaOrg = /* @__PURE__ */ mockFn
-export const defineArticle = /* @__PURE__ */ mockFn
-export const defineBreadcrumb = /* @__PURE__ */ mockFn
-export const defineComment = /* @__PURE__ */ mockFn
-export const defineEvent = /* @__PURE__ */ mockFn
-export const defineHowTo = /* @__PURE__ */ mockFn
-export const defineOrganization = /* @__PURE__ */ mockFn
-export const definePerson = /* @__PURE__ */ mockFn
-export const defineImage = /* @__PURE__ */ mockFn
-export const defineLocalBusiness = /* @__PURE__ */ mockFn
-export const defineProduct = /* @__PURE__ */ mockFn
-export const defineQuestion = /* @__PURE__ */ mockFn
-export const defineReview = /* @__PURE__ */ mockFn
-export const defineRecipe = /* @__PURE__ */ mockFn
-export const defineVideo = /* @__PURE__ */ mockFn
-export const defineWebPage = /* @__PURE__ */ mockFn
-export const defineWebSite = /* @__PURE__ */ mockFn
+export const useSchemaOrg = /* @__PURE__ */ noop
+export const defineArticle = /* @__PURE__ */ noop
+export const defineBreadcrumb = /* @__PURE__ */ noop
+export const defineComment = /* @__PURE__ */ noop
+export const defineEvent = /* @__PURE__ */ noop
+export const defineHowTo = /* @__PURE__ */ noop
+export const defineOrganization = /* @__PURE__ */ noop
+export const definePerson = /* @__PURE__ */ noop
+export const defineImage = /* @__PURE__ */ noop
+export const defineLocalBusiness = /* @__PURE__ */ noop
+export const defineProduct = /* @__PURE__ */ noop
+export const defineQuestion = /* @__PURE__ */ noop
+export const defineReview = /* @__PURE__ */ noop
+export const defineRecipe = /* @__PURE__ */ noop
+export const defineVideo = /* @__PURE__ */ noop
+export const defineWebPage = /* @__PURE__ */ noop
+export const defineWebSite = /* @__PURE__ */ noop
 

packages/schema-org/runtime-simple/components/index.ts

@@ -0,0 +1,2 @@
+export * from './nodes'
+export * from './SchemaOrgDebug'

packages/schema-org/runtime/components/nodes.ts → packages/schema-org/runtime-simple/components/nodes.ts

@@ -1,23 +1,23 @@
 import { computed, defineComponent, h, ref, unref } from 'vue'
+import { useSchemaOrg } from '../composables'
 import {
-  defineArticle, defineBook,
-  defineBreadcrumb,
-  defineComment, defineCourse,
-  defineEvent,
+  defineArticle,
+  defineBook, defineBreadcrumb,
+  defineComment,
+  defineCourse, defineEvent,
   defineHowTo,
-  defineImage, defineItemList,
-  defineLocalBusiness, defineMovie,
-  defineOrganization,
+  defineImage,
+  defineItemList, defineLocalBusiness,
+  defineMovie, defineOrganization,
   definePerson,
   defineProduct,
   defineQuestion,
   defineRecipe,
-  defineReview, defineSoftwareApp,
-  defineVideo,
+  defineReview,
+  defineSoftwareApp, defineVideo,
   defineWebPage,
   defineWebSite,
-} from '#vueuse/schema-org/provider'
-import { useSchemaOrg } from '#vueuse/schema-org/runtime'
+} from '../provider'
 
 const shallowVNodesToText = (nodes: any) => {
   let text = ''

packages/schema-org/runtime-simple/composables/index.ts

@@ -0,0 +1 @@
+export * from './useSchemaOrg'

packages/schema-org/runtime/composables/useSchemaOrg.ts → packages/schema-org/runtime-simple/composables/useSchemaOrg.ts

@@ -1,12 +1,16 @@
 import { getCurrentInstance, nextTick, onBeforeUnmount, onMounted, watch } from 'vue'
 import type { SchemaOrgVuePlugin } from '@vueuse/schema-org'
-import { injectSchemaOrg } from '#vueuse/schema-org/runtime'
+// @ts-expect-error runtime
+import { injectSchemaOrg } from '../../..'
 
 type Arrayable<T> = T | Array<T>
 
 let vmGlobalUid = -1
 
-export function useSchemaOrg(input: Arrayable<any>) {
+export function useSchemaOrg(input?: Arrayable<any>) {
+  // malformed
+  if (!input)
+    return
   // make sure we can get client
   const client = injectSchemaOrg() as SchemaOrgVuePlugin
   if (!client)

packages/schema-org/runtime/index.ts → packages/schema-org/runtime-simple/index.ts

@@ -1,2 +1,4 @@
+export * from './provider'
 export * from './composables'
 export * from './components'
+

packages/schema-org/src/composables/index.ts

@@ -1 +1,2 @@
 export * from './createSchemaOrg'
+export * from './injectSchemaOrg'

packages/schema-org/src/composables/injectSchemaOrg.ts

@@ -0,0 +1,16 @@
+import { inject } from 'vue'
+import { PROVIDE_KEY } from './createSchemaOrg'
+import type { SchemaOrgVuePlugin } from './createSchemaOrg'
+
+export function injectSchemaOrg() {
+  let client: SchemaOrgVuePlugin | undefined
+  try {
+    client = inject<SchemaOrgVuePlugin>(PROVIDE_KEY)
+  }
+  catch (e) {}
+
+  if (!client)
+    console.warn('[@vueuse/schema-org] Failed to find plugin, you may have forgotten to apply app.use(schemaOrg)')
+
+  return client
+}