romhml · romhml · Mar 17, 2025 · Mar 7, 2025 · Mar 8, 2025 · Mar 8, 2025
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -40,4 +40,4 @@ jobs:
         run: pnpm test
 
       - name: Publish
-        run: pnpx pkg-pr-new publish --no-template --pnpm './packages/nuxt' './packages/meta'
+        run: pnpx pkg-pr-new publish --no-template --pnpm './packages/*'
diff --git a/.npmrc b/.npmrc
@@ -1,2 +1,3 @@
+filter=@compodium/*
 shamefully-hoist=true
 strict-peer-dependencies=false
diff --git a/build.config.ts b/build.config.ts
@@ -0,0 +1,13 @@
+import type { BuildConfig } from 'unbuild'
+
+export default {
+  clean: true,
+  rollup: {
+    esbuild: {
+      target: 'esnext'
+    },
+    emitCJS: true,
+    cjsBridge: true
+  },
+  declaration: true
+} satisfies BuildConfig
diff --git a/package.json b/package.json
@@ -6,23 +6,32 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "dev:prepare": "pnpm -r dev:prepare",
-    "dev": "COMPODIUM_LOCAL=true nuxi dev playground",
+    "dev:prepare": "pnpm -r --color dev:prepare",
+    "dev": "COMPODIUM_DEVTOOLS_URL=http://localhost:4242 pnpm --color --parallel -r dev",
+    "dev:nuxt": "COMPODIUM_DEVTOOLS_URL=http://localhost:4242 pnpm --color --parallel --filter '!@compodium/playground-vue' dev",
+    "dev:vue": "COMPODIUM_DEVTOOLS_URL=http://localhost:4242 pnpm --color --parallel --filter '!@compodium/playground-nuxt' dev",
     "lint": "eslint .",
-    "typecheck": "pnpm -r typecheck",
-    "test": "pnpm -r test",
+    "typecheck": "pnpm -r --color typecheck",
+    "test": "pnpm -r --color test",
     "bump": "jiti ./scripts/bump.ts"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^1.2.0",
+    "@nuxt/test-utils": "^3.17.2",
+    "@types/node": "^22.13.1",
     "changelogen": "^0.6.1",
     "eslint": "^9.22.0",
     "typescript": "5.6.3",
+    "unbuild": "^3.5.0",
+    "vite": "^6.1.0",
     "vitest": "^3.0.8"
   },
   "resolutions": {
+    "rollup": "4.35.0",
     "typescript": "5.6.3",
-    "vue-tsc": "2.2.0"
+    "vue-tsc": "2.2.0",
+    "nuxt": "3.15.4",
+    "@nuxt/ui": "3.0.0-beta.3"
   },
   "packageManager": "[email protected]"
 }
diff --git a/packages/core/.gitignore b/packages/core/.gitignore
@@ -0,0 +1,81 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE
+.idea
diff --git a/packages/core/.vscode/settings.json b/packages/core/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "eslint.experimental.useFlatConfig": true
+}
diff --git a/packages/core/build.config.ts b/packages/core/build.config.ts
@@ -0,0 +1,11 @@
+import { defineBuildConfig } from 'unbuild'
+import config from '../../build.config'
+
+export default defineBuildConfig({
+  ...config,
+  entries: [
+    'src/index',
+    { builder: 'copy', input: './src/runtime', outDir: './dist/runtime' },
+    { builder: 'copy', input: '../../', pattern: 'LICENSE.md|README.md' }
+  ]
+})
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "@compodium/core",
+  "type": "module",
+  "version": "0.1.0-beta.5",
+  "description": "A plug and play component playground for Vue and Nuxt.",
+  "license": "MIT",
+  "repository": {
+    "url": "romhml/compodium",
+    "directory": "packages/core"
+  },
+  "keywords": [
+    "nuxt",
+    "components",
+    "documentation"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./*": "./dist/*"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev:prepare": "unbuild",
+    "dev": "unbuild --watch",
+    "prepack": "unbuild && pnpm --filter devtools generate",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@nuxt/schema": ">=3",
+    "vite": ">=3",
+    "vue": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@compodium/examples": "workspace:^",
+    "@compodium/meta": "workspace:^",
+    "@vueuse/core": "^12.8.2",
+    "chokidar": "^4.0.3",
+    "hookable": "^5.5.3",
+    "pathe": "^2.0.3",
+    "scule": "^1.3.0",
+    "sirv": "^3.0.1",
+    "tinyglobby": "^0.2.12",
+    "ufo": "^1.5.4",
+    "unplugin": "^2.2.0",
+    "unplugin-ast": "^0.14.3",
+    "zod": "^3.24.2"
+  }
+}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -0,0 +1,79 @@
+import { joinURL } from 'ufo'
+import AST from 'unplugin-ast/vite'
+import { RemoveWrapperFunction } from 'unplugin-ast/transformers'
+
+import { libraryCollections as libraryCollectionsConfig } from '@compodium/examples'
+import { collectionsPlugin } from './plugins/collections'
+import { metaPlugin } from './plugins/meta'
+import { examplePlugin } from './plugins/examples'
+import { devtoolsPlugin } from './plugins/devtools'
+import { colorsPlugin } from './plugins/colors'
+import { iconifyPlugin } from './plugins/iconify'
+
+import type { Collection, PluginConfig, PluginOptions } from './types'
+
+export * from './types'
+
+export const compodium = /* #__PURE__ */ (options: PluginOptions) => {
+  const exampleDir = {
+    path: joinURL(options.rootDir, options.dir, 'examples'),
+    pattern: '**/*.{vue,tsx}'
+  }
+
+  const componentDirs = options?.componentDirs.map((dir) => {
+    const componentDir = typeof dir === 'string' ? { path: dir } : dir
+    return {
+      pattern: '**/*.{vue,tsx}',
+      ...componentDir,
+      ignore: (componentDir.ignore ?? []).concat(options.ignore ?? [])
+    }
+  }).filter(collection => !collection.path?.includes('node_modules/'))
+
+  const componentCollection: Collection = {
+    name: 'Components',
+    exampleDir,
+    dirs: componentDirs
+  }
+
+  const libraryCollections = options.includeLibraryCollections
+    ? options.componentDirs.map((dir) => {
+        const path = typeof dir === 'string' ? dir : dir.path
+        const collection = libraryCollectionsConfig.find((c: any) => path.includes(`node_modules/${c.package}`))
+        if (collection) {
+          return {
+            ...collection,
+            exampleDir: {
+              ...typeof dir === 'string' ? {} : dir,
+              path: collection.exampleDir,
+              pattern: '**/*.{vue,tsx}'
+            },
+            dirs: [{
+              ...typeof dir === 'string' ? {} : dir,
+              path,
+              pattern: '**/*.{vue,tsx}',
+              ignore: collection.ignore
+            }]
+          }
+        }
+      }).filter(c => !!c)
+    : []
+
+  const config: PluginConfig = {
+    ...options,
+    libraryCollections,
+    componentCollection
+  }
+
+  return [
+    collectionsPlugin(config),
+    metaPlugin(config),
+    devtoolsPlugin(config),
+    examplePlugin(config),
+    iconifyPlugin(config),
+    colorsPlugin(config),
+    AST({
+      include: [/\.[jt]sx?$/, /\.vue$/],
+      transformer: [RemoveWrapperFunction(['extendCompodiumMeta'])]
+    })
+  ]
+}
diff --git a/packages/core/src/plugins/collections.ts b/packages/core/src/plugins/collections.ts
@@ -0,0 +1,94 @@
+import type { PluginConfig } from '../types'
+import { scanComponents } from './utils'
+import { watch } from 'chokidar'
+import type { VitePlugin } from 'unplugin'
+import { resolve } from 'pathe'
+
+export function collectionsPlugin(config: PluginConfig): VitePlugin {
+  return {
+    name: 'compodium:collections',
+    configureServer(server) {
+      server.middlewares.use('/__compodium__/api/collections', async (_, res) => {
+        try {
+          const collections = await Promise.all([config.componentCollection, ...config.libraryCollections].map(async (col) => {
+            const components = await scanComponents(col.dirs, config.rootDir)
+            const examples = await scanComponents([col.exampleDir], config.rootDir)
+
+            const collectionComponents = components.map((c) => {
+              const componentExamples = examples?.filter(e => e.pascalName.startsWith(`${c.pascalName}Example`)).map(e => ({
+                ...e,
+                isExample: true,
+                componentPath: resolve(config.rootDir, c.filePath)
+              }))
+
+              const mainExample = componentExamples.find(e => e.pascalName === `${c.pascalName}Example`)
+              const component = mainExample ?? c
+
+              return {
+                ...component,
+                docUrl: col.getDocUrl?.(c.pascalName),
+                examples: componentExamples.filter(e => e.pascalName !== mainExample?.pascalName)
+              }
+            })
+
+            return {
+              ...col,
+              components: collectionComponents
+            }
+          }))
+
+          res.setHeader('Content-Type', 'application/json')
+          res.write(JSON.stringify(collections))
+          res.end()
+        } catch {
+          res.statusCode = 500
+          res.end(JSON.stringify({ error: 'Failed to fetch collections' }))
+        }
+      })
+
+      const watchedPaths = [
+        ...config.componentCollection.dirs,
+        config.componentCollection.exampleDir
+      ].map(d => resolve(config.rootDir, d.path))
+
+      // Watch for changes in example directory
+      const watcher = watch(watchedPaths, {
+        persistent: true,
+        awaitWriteFinish: {
+          stabilityThreshold: 200,
+          pollInterval: 100
+        }
+      })
+
+      watcher.on('add', async (filePath: string) => {
+        if (watchedPaths.find(p => filePath.startsWith(p))) {
+          server.ws.send({
+            type: 'custom',
+            event: 'compodium:hmr',
+            data: { path: filePath, event: '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' }
+          })
+        }
+      })
+
+      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' }
+          })
+        }
+      })
+    }
+  }
+}