From aec744269c80e56f4db9fb2b5edab2e4744b5ed1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Sun, 12 Jul 2026 00:56:47 -0600 Subject: [PATCH] feat: Use newest vite-css plug-in to remove the need of the base option --- package-lock.json | 26 +++++++++++++------------- package.json | 3 ++- src/index.ts | 21 ++++++++++++++++----- src/shared/options.ts | 1 - src/types.ts | 6 ------ vitest.config.ts | 2 +- 6 files changed, 32 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index b7f7b6d..ff08a5f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -75,9 +75,9 @@ } }, "node_modules/@collagejs/vite-aim": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@collagejs/vite-aim/-/vite-aim-0.4.0.tgz", - "integrity": "sha512-3GLE6bcj4N8GQ8emPod+gFARgBlvexBrN0j4/vk7YQ8WNkBqdN+0jKLaQ9JIQ9B6PHLmASIq3UEFYlJkct/zbg==", + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@collagejs/vite-aim/-/vite-aim-0.5.0.tgz", + "integrity": "sha512-XLEhuKfex5Xg2R9cdyKpHHPw44jTaHJD6SW3LQQqkzS++orT4C8PQ38GzHVJ8jRczLGS1/7ClmytmYjzrkQgxQ==", "license": "MIT", "dependencies": { "@collagejs/importmap": "^0.2.0", @@ -89,13 +89,13 @@ } }, "node_modules/@collagejs/vite-css": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/@collagejs/vite-css/-/vite-css-0.6.1.tgz", - "integrity": "sha512-6plXHIMV5GDICUfeXNCe8TehZ3uCqh7KwOruWvOHP/PbogGPUSQxSUSorK5r5q/au9ycpAtgE7woHAC0RF108g==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@collagejs/vite-css/-/vite-css-0.7.0.tgz", + "integrity": "sha512-p1Yx8u588qB3iSndGOpWh3nMOsM7dzMuK2f+t/XQlnUIcw2ScPurZhMff2+Ftv8+n3WoDJQNF3imabkD2B2y8w==", "license": "MIT", "dependencies": { "@collagejs/core": "0.x || 1.x", - "@collagejs/vite-aim": "0.4.0", + "@collagejs/vite-aim": "0.5.0", "wj-config": "^4.0.0-beta.0" }, "peerDependencies": { @@ -906,9 +906,9 @@ "license": "MIT" }, "node_modules/es-module-lexer": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.0.tgz", - "integrity": "sha512-KLdwQm2NvGLDkQDCGvmiQrhkd0JbMzXthwQAUgWjQuQdBLFa3eiBP5arXZyA+f8x+x7OXgud6bq2rxjGtHV2tw==", + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.1.tgz", + "integrity": "sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==", "dev": true, "license": "MIT" }, @@ -1426,9 +1426,9 @@ } }, "node_modules/postcss": { - "version": "8.5.16", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz", - "integrity": "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==", + "version": "8.5.17", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.17.tgz", + "integrity": "sha512-J7EF+8X+CzRPaJPOv9Ck2wNWJvGnnl3PcNPAdGg6GTLjyVpyQ0yATMSXRFRV01BviT/9Gwuc3rjEyJbDJG9a4w==", "funding": [ { "type": "opencollective", diff --git a/package.json b/package.json index 7f2952f..0743ff9 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,8 @@ "build": "vite build && pwsh post-build.ps1 && publint", "preview": "vite preview", "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json --noEmit", - "test": "vitest", + "test": "vitest run", + "test:watch": "vitest", "test:ci": "npx playwright install chromium && vitest" }, "devDependencies": { diff --git a/src/index.ts b/src/index.ts index 084217c..bfa217e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,20 +1,31 @@ import { buildPiece } from "@collagejs/svelte"; import Imo from "./lib/Imo.svelte"; -import { cssMountFactory } from "@collagejs/vite-css/ex"; +import { CssFactory } from "@collagejs/vite-css/ex"; import type { ImoUiFactoryOptions } from "./types.js"; import { getInitialImoUiFactoryOptions } from "./shared/options.js"; import { initImoUiOptions } from "./lib/state/imoUiOptions"; import type { CorePiece } from "@collagejs/core"; -const cssMount = cssMountFactory('index'); +// Edge case where import.meta.url ends up in a chunk because some module imports from this file, and for +// import.meta.url to work without changes, it needs to stay in the chunk named after the entry file. +// TODO: Take some time to figure out a module graph that allows the use of CssFactory in a module that is not +// imported by any other module. That should make this edge case disappear. +const url = import.meta.url; +let base = url.substring(0, url.lastIndexOf("/") + 1); +if (base.endsWith("/assets/")) { + base = base.substring(0, base.length - "assets/".length); +} +const css = new CssFactory(base + 'index.js'); export async function imoUiFactory(options?: ImoUiFactoryOptions): Promise> { const initialOptions = await getInitialImoUiFactoryOptions(options); - const mountFn = initialOptions?.base ? cssMount.bind({ base: initialOptions.base }) : cssMount; + const { mount, relocate } = css.instantiate(); initImoUiOptions(initialOptions.ui); const corePiece = buildPiece(Imo); return { - mount: [mountFn, corePiece.mount], - update: corePiece.update, + ...corePiece, + mount: [mount, corePiece.mount], + // TODO: Once buildPiece()'s type is fixed, the ! operator should not be needed here. + relocate: [relocate, corePiece.relocate!], }; } diff --git a/src/shared/options.ts b/src/shared/options.ts index 91e5073..cdacf3e 100644 --- a/src/shared/options.ts +++ b/src/shared/options.ts @@ -31,7 +31,6 @@ const defaultImPostingOptions: Required = { * Default IMO UI factory options. */ export const defaultImoUiFactoryOptions: RequiredImoUiFactoryOptions = { - base: '', shadow: true, ui: { theme: 'system', diff --git a/src/types.ts b/src/types.ts index 9daefad..cdf6a50 100644 --- a/src/types.ts +++ b/src/types.ts @@ -68,12 +68,6 @@ export type ImoUiOptions = { * Options that can be specified when creating the `@collagejs/imo` UI *CollageJS* piece. */ export type ImoUiFactoryOptions = { - /** - * Base URL for CSS assets. This value overrides Vite's base if specified. - * - * **TIP**: Use it when serving the *CollageJS* piece from a different origin than the main page. - */ - base?: string; /** * Whether to mount the *CollageJS* piece inside a shadow DOM root. */ diff --git a/vitest.config.ts b/vitest.config.ts index b0f2f03..4af5f70 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -7,7 +7,7 @@ export default defineConfig({ enabled: true, provider: playwright(), instances: [ - { browser: 'chromium' }, // can also be 'firefox' or 'webkit' + { browser: 'chromium', headless: true }, // can also be 'firefox' or 'webkit' ], }, },