romhml · romhml · Nov 1, 2025 · Aug 29, 2025 · Sep 14, 2025 · Sep 14, 2025
diff --git a/package.json b/package.json
@@ -36,7 +36,8 @@
     "@compodium/examples": "workspace:^",
     "@compodium/meta": "workspace:^",
     "@compodium/nuxt": "workspace:^",
-    "@compodium/vue": "workspace:^"
+    "@compodium/vue": "workspace:^",
+    "@compodium/testing": "workspace:^"
   },
   "pnpm": {
     "onlyBuiltDependencies": [

diff --git a/packages/core/build.config.ts b/packages/core/build.config.ts
@@ -8,7 +8,6 @@ export default defineBuildConfig({
     { builder: 'copy', input: './src/runtime', outDir: './dist/runtime' }
   ],
   replace: {
-    'process.env.COMPODIUM_TEST': 'false',
     'process.env.COMPODIUM_DEVTOOLS_URL': undefined
   }
 })
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -33,11 +33,13 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
+    "@compodium/testing": "workspace:^",
     "vite": ">=6",
+    "vitest": ">=3.2.4",
     "vue": ">=3"
   },
   "peerDependenciesMeta": {
-    "vite": {
+    "@compodium/testing": {
       "optional": true
     }
   },

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,3 +1,4 @@
+import type { Plugin } from 'vite'
 import { collectionsPlugin } from './plugins/collections'
 import { extendMetaPlugin, metaPlugin } from './plugins/meta'
 import { examplePlugin } from './plugins/examples'
@@ -8,8 +9,8 @@ import type { PluginOptions } from './types'
 
 export * from './types'
 
-export const compodium = /* #__PURE__ */ (options: PluginOptions) => {
-  return [
+export const compodium = /* #__PURE__ */ async (options: PluginOptions) => {
+  const plugins: Plugin[] = [
     collectionsPlugin(options),
     metaPlugin(options),
     extendMetaPlugin(options),
@@ -18,4 +19,17 @@ export const compodium = /* #__PURE__ */ (options: PluginOptions) => {
     iconifyPlugin(options),
     colorsPlugin(options)
   ]
+
+  if (options.testing?.enabled) {
+    try {
+      const { compodiumTesting } = await import('@compodium/testing')
+      compodiumTesting(options).forEach(p => plugins.push(p))
+    } catch {
+      throw new Error(
+        'The `@compodium/testing` package is required when tests are enabled.'
+      )
+    }
+  }
+
+  return plugins
 }
diff --git a/packages/core/src/plugins/collections.ts b/packages/core/src/plugins/collections.ts
@@ -7,6 +7,9 @@ import { resolve } from 'pathe'
 import { joinURL } from 'ufo'
 import type { ResolvedConfig } from 'vite'
 
+const VIRTUAL_MODULE_ID = 'virtual:compodium/collections'
+const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID
+
 export function resolveCollections(options: PluginOptions, viteConfig: ResolvedConfig): Collection[] {
   const rootDir = options.rootDir ?? viteConfig.root
 
@@ -54,52 +57,76 @@ export function resolveCollections(options: PluginOptions, viteConfig: ResolvedC
   ]
 }
 
+async function generateCollectionsData(collections: Collection[]) {
+  const result = await Promise.all(collections.map(async (col) => {
+    const components = await scanComponents(col.dirs)
+    const examples = await scanComponents([col.exampleDir])
+
+    const collectionComponents = components.flatMap((c) => {
+      const componentExamples = examples?.filter(e => e.pascalName.startsWith(`${c.pascalName}Example`)).map(e => ({
+        ...e,
+        isExample: true,
+        componentPath: c.filePath,
+        componentName: c.pascalName,
+        collectionName: col.name
+      }))
+
+      const mainExample = componentExamples.find(e => e.pascalName === `${c.pascalName}Example`)
+      const component = mainExample ?? c
+
+      if (col.name !== 'Components' && !mainExample) return []
+
+      return [{
+        ...component,
+        wrapperComponent: col.wrapperComponent,
+        docUrl: col.getDocUrl?.(c.pascalName),
+        examples: componentExamples.filter(e => e.pascalName !== mainExample?.pascalName),
+        collectionName: col.name
+      }]
+    })
+
+    return {
+      ...col,
+      components: collectionComponents
+    }
+  }))
+
+  return result
+}
+
 export function collectionsPlugin(options: PluginOptions): VitePlugin {
   let collections: Collection[]
+  let server: any
 
   return {
     name: 'compodium:collections',
     apply: 'serve',
-    enforce: 'post',
+    enforce: 'pre',
 
     configResolved(viteConfig) {
       collections = resolveCollections(options, viteConfig)
     },
 
-    configureServer(server) {
-      server.middlewares.use('/__compodium__/api/collections', async (_, res) => {
-        try {
-          const result = await Promise.all(collections.map(async (col) => {
-            const components = await scanComponents(col.dirs)
-            const examples = await scanComponents([col.exampleDir])
-
-            const collectionComponents = components.flatMap((c) => {
-              const componentExamples = examples?.filter(e => e.pascalName.startsWith(`${c.pascalName}Example`)).map(e => ({
-                ...e,
-                isExample: true,
-                componentPath: c.filePath
-              }))
-
-              const mainExample = componentExamples.find(e => e.pascalName === `${c.pascalName}Example`)
-              const component = mainExample ?? c
-
-              // Hides third party library components if no example can be found.
-              if (col.name !== 'Components' && !mainExample) return []
-
-              return [{
-                ...component,
-                wrapperComponent: col.wrapperComponent,
-                docUrl: col.getDocUrl?.(c.pascalName),
-                examples: componentExamples.filter(e => e.pascalName !== mainExample?.pascalName)
-              }]
-            })
-
-            return {
-              ...col,
-              components: collectionComponents
-            }
-          }))
+    resolveId(id) {
+      if (id === VIRTUAL_MODULE_ID) {
+        return RESOLVED_VIRTUAL_MODULE_ID
+      }
+    },
 
+    async load(id) {
+      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
+        const data = await generateCollectionsData(collections)
+        return `export default ${JSON.stringify(data, null, 2)}`
+      }
+    },
+
+    configureServer(_server) {
+      server = _server
+
+      // Existing middleware endpoint
+      server.middlewares.use('/__compodium__/api/collections', async (_: any, res: any) => {
+        try {
+          const result = await generateCollectionsData(collections)
           res.setHeader('Content-Type', 'application/json')
           res.write(JSON.stringify(result))
           res.end()
@@ -116,7 +143,6 @@ export function collectionsPlugin(options: PluginOptions): VitePlugin {
         componentCollection.exampleDir
       ].map(d => d.path)
 
-      // Watch for changes in example directory
       const watcher = watch(watchedPaths, {
         persistent: true,
         awaitWriteFinish: {
@@ -125,34 +151,33 @@ export function collectionsPlugin(options: PluginOptions): VitePlugin {
         }
       })
 
-      watcher.on('add', async (filePath: string) => {
+      const handleFileChange = async (filePath: string, event: string) => {
         if (watchedPaths.find(p => filePath.startsWith(p))) {
+          // Existing WebSocket HMR
           server.ws.send({
             type: 'custom',
             event: 'compodium:hmr',
-            data: { path: filePath, event: 'component:added' }
+            data: { path: filePath, event }
           })
+
+          // Virtual module invalidation
+          const module = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID)
+          if (module) {
+            server.reloadModule(module)
+          }
         }
+      }
+
+      watcher.on('add', async (filePath: string) => {
+        await handleFileChange(filePath, 'component:added')
       })
 
       watcher.on('addDir', async (filePath: string) => {
-        if (watchedPaths.find(p => filePath.startsWith(p))) {
-          server.ws.send({
-            type: 'custom',
-            event: 'compodium:hmr',
-            data: { path: filePath, event: 'component:added' }
-          })
-        }
+        await handleFileChange(filePath, 'component:added')
       })
 
       watcher.on('unlink', async (filePath: string) => {
-        if (watchedPaths.find(p => filePath.startsWith(p))) {
-          server.ws.send({
-            type: 'custom',
-            event: 'compodium:hmr',
-            data: { path: filePath, event: 'component:removed' }
-          })
-        }
+        await handleFileChange(filePath, 'component:removed')
       })
     }
   }

diff --git a/packages/core/src/plugins/colors.ts b/packages/core/src/plugins/colors.ts
@@ -9,6 +9,7 @@ export function colorsPlugin(options: PluginOptions): VitePlugin {
   return {
     name: 'compodium:colors',
     apply: 'serve',
+    enforce: 'pre',
     configureServer(server) {
       server.middlewares.use('/__compodium__/api/colors', async (req, res) => {
         try {

diff --git a/packages/core/src/plugins/devtools.ts b/packages/core/src/plugins/devtools.ts
@@ -12,6 +12,7 @@ export function devtoolsPlugin(options: PluginOptions): VitePlugin {
 
   return {
     name: 'compodium:devtools',
+    enforce: 'pre',
     apply: 'serve',
 
     configResolved(viteConfig) {
@@ -32,7 +33,7 @@ export function devtoolsPlugin(options: PluginOptions): VitePlugin {
     },
 
     configureServer(server) {
-      if (process.env.COMPODIUM_DEVTOOLS_URL || process.env.COMPODIUM_TEST) return
+      if (process.env.COMPODIUM_DEVTOOLS_URL || process.env.VITEST) return
       server.middlewares.use('/__compodium__/devtools',
         sirv(resolve(dirname(fileURLToPath(import.meta.url)), './client/devtools'),
           { single: true, setHeaders: res => res.setHeader('Cache-Control', 'public, max-age=3600, stale-while-revalidate=86400') }

diff --git a/packages/core/src/plugins/examples.ts b/packages/core/src/plugins/examples.ts
@@ -8,6 +8,7 @@ export function examplePlugin(options: PluginOptions): VitePlugin {
 
   return {
     name: 'compodium:examples',
+    enforce: 'pre',
     apply: 'serve',
 
     configResolved(viteConfig) {

diff --git a/packages/core/src/plugins/iconify.ts b/packages/core/src/plugins/iconify.ts
@@ -5,7 +5,9 @@ import { joinURL } from 'ufo'
 export function iconifyPlugin(_options: PluginOptions): VitePlugin {
   return {
     name: 'compodium:iconify',
+    enforce: 'pre',
     apply: 'serve',
+
     configureServer(server) {
       server.middlewares.use('/__compodium__/api/iconify', async (req, res) => {
         try {