diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index b1ab6136..713efa20 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -12,7 +12,7 @@ import type { Collection, PluginConfig, PluginOptions } from './types' export * from './types' -export const compodium = /* #__PURE__ */ (options: PluginOptions) => { +export function resolveConfig(options: PluginOptions): PluginConfig { const exampleDir = { path: joinURL(options.rootDir, options.dir, 'examples'), pattern: '**/*.{vue,tsx}' @@ -50,11 +50,16 @@ export const compodium = /* #__PURE__ */ (options: PluginOptions) => { })) : [] - const config: PluginConfig = { + return { ...options, libraryCollections, - componentCollection + componentCollection, + baseUrl: '/' } +} + +export const compodium = /* #__PURE__ */ (options: PluginOptions) => { + const config = resolveConfig(options) return [ collectionsPlugin(config), diff --git a/packages/core/src/runtime/root.vue b/packages/core/src/runtime/root.vue index 51ef8d28..0efb363e 100644 --- a/packages/core/src/runtime/root.vue +++ b/packages/core/src/runtime/root.vue @@ -29,8 +29,9 @@ async function importComponent(path: string) { if ((window as any)?.__buildAssetsURL) { return await import(/* @vite-ignore */ (window as any)?.__buildAssetsURL(path)).then(c => c.default) } - return await import(/* @vite-ignore */ joinURL('/@fs/' + path)).then(c => c.default) + return await import(/* @vite-ignore */ joinURL(import.meta.env.BASE_URL, '/@fs/', path)).then(c => c.default) } + async function onUpdateComponent(payload: Parameters[0]) { combo.value = [] component.value = null diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 19ff1628..5b703484 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -56,6 +56,7 @@ export type PluginOptions = { export type PluginConfig = PluginOptions & { libraryCollections: Collection[] componentCollection: Collection + baseUrl: string } export type IconifyIcon = string & {} diff --git a/packages/examples/src/assets/ui/index.css b/packages/examples/src/assets/ui/index.css index efb7c702..be4a2972 100644 --- a/packages/examples/src/assets/ui/index.css +++ b/packages/examples/src/assets/ui/index.css @@ -1,4 +1,4 @@ -/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */ @layer properties; :root, :host { --spacing: 0.25rem; diff --git a/packages/nuxt/src/runtime/nuxt-root.vue b/packages/nuxt/src/runtime/nuxt-root.vue index f8a36941..dd84d8b2 100644 --- a/packages/nuxt/src/runtime/nuxt-root.vue +++ b/packages/nuxt/src/runtime/nuxt-root.vue @@ -4,19 +4,22 @@ import NuxtRoot from '#build/compodium/root.mjs' import CompodiumRoot from '@compodium/core/runtime/root.vue' import { useNuxtApp } from '#imports' +import { joinURL } from 'ufo' const nuxtApp = useNuxtApp() const url = import.meta.server ? nuxtApp.ssrContext?.url : window.location.pathname +const app = useNuxtApp() -if (url?.startsWith('/__compodium__/renderer')) { +const rendererUrl = joinURL(app.$config.app.baseURL, '/__compodium__/renderer') + +if (url?.startsWith(rendererUrl)) { // Silence Nuxt warnings on unused pages / layouts - const app = useNuxtApp() app._isNuxtPageUsed = true app._isNuxtLayoutUsed = true } diff --git a/packages/vue/package.json b/packages/vue/package.json index 579be6f9..b63f770f 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -41,6 +41,7 @@ "defu": "^6.1.4", "mlly": "^1.7.4", "pathe": "^2.0.3", + "ufo": "^1.6.1", "unplugin": "^2.3.5" } } diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index aefbef58..d71686e2 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -1,11 +1,12 @@ import type { CompodiumMeta, PluginOptions } from '@compodium/core' -import { compodium as core } from '@compodium/core' +import { compodium as core, resolveConfig } from '@compodium/core' import { rendererPlugin } from './plugins/renderer' import { vueDevtoolsPlugin } from './plugins/vueDevtools' import { defu } from 'defu' import { libraryCollections } from '@compodium/examples' import { existsSync } from 'node:fs' import { resolve } from 'pathe' +import type { VitePlugin } from 'unplugin' export const compodium = /* #__PURE__ */ (opts?: Partial>) => { const options = defu(opts, { @@ -24,10 +25,18 @@ export const compodium = /* #__PURE__ */ (opts?: Partial { try { // TODO: Should read the user's index.html and replace the body. - const indexPath = resolve(options.rootDir, 'index.html') + const indexPath = resolve(config.rootDir, 'index.html') let index = readFileSync(indexPath, 'utf-8') index = index.replace( /]*>[\s\S]*<\/body>/i, `
- + ` ) res.setHeader('Content-Type', 'text/html') @@ -37,10 +38,10 @@ export function rendererPlugin(options: PluginOptions): VitePlugin { load(id) { if (id === '\0renderer.ts') { // Read the user's main entrypoint file - const mainPath = resolve(options.rootDir, options.mainPath ?? 'src/main.ts') + const mainPath = resolve(config.rootDir, config.mainPath ?? 'src/main.ts') if (!existsSync(mainPath)) { - throw new Error(`[Compodium] failed to resolve main file ${options.mainPath}.`) + throw new Error(`[Compodium] failed to resolve main file ${config.mainPath}.`) } const mainDir = dirname(mainPath) diff --git a/packages/vue/src/plugins/vueDevtools.ts b/packages/vue/src/plugins/vueDevtools.ts index 7d77da65..b9980652 100644 --- a/packages/vue/src/plugins/vueDevtools.ts +++ b/packages/vue/src/plugins/vueDevtools.ts @@ -1,12 +1,12 @@ import type { VitePlugin } from 'unplugin' -import type { PluginOptions } from '@compodium/core' +import type { PluginConfig } from '@compodium/core' import { colors } from 'consola/utils' import { version } from '../../package.json' +import { joinURL } from 'ufo' -export function vueDevtoolsPlugin(_options: PluginOptions): VitePlugin { +export function vueDevtoolsPlugin(config: PluginConfig): VitePlugin { return { name: 'compodium:devtools:vue', - configureServer(server) { const _printUrls = server.printUrls @@ -15,6 +15,7 @@ export function vueDevtoolsPlugin(_options: PluginOptions): VitePlugin { _printUrls() for (const url of urls.local) { const compodiumUrl = url.endsWith('/') ? `${url}__compodium__/devtools/` : `${url}/__compodium__/devtools/` + console.log([ colors.magenta(` ➜ `), colors.bold(colors.white(`Compodium:`)), @@ -58,7 +59,7 @@ export function vueDevtoolsPlugin(_options: PluginOptions): VitePlugin { injectTo: 'head-prepend' as const, attrs: { type: 'module', - src: `@id/virtual:compodium:devtools` + src: joinURL(config.baseUrl, `/@id/virtual:compodium:devtools`) } } ] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 05902334..f0a018e5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -311,6 +311,9 @@ importers: pathe: specifier: ^2.0.3 version: 2.0.3 + ufo: + specifier: ^1.6.1 + version: 1.6.1 unplugin: specifier: ^2.3.5 version: 2.3.5 diff --git a/vitest.config.ts b/vitest.config.ts index a3a14fe1..49584cba 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -2,7 +2,7 @@ import { defineConfig } from 'vitest/config' export default defineConfig({ test: { - workspace: [ + projects: [ 'packages/*' ], env: {