From 1ed1370865b499c45fd1908b0a0fb2d58d66a876 Mon Sep 17 00:00:00 2001 From: Miro Yovchev <2827783+myovchev@users.noreply.github.com> Date: Tue, 19 Nov 2024 18:06:58 +0200 Subject: [PATCH] Fix sneaky bugs --- CHANGELOG.md | 1 + README.md | 53 ++++++++++++++++++++++++++++ lib/internals.js | 21 +++++------ lib/vite-plugin-apostrophe-alias.mjs | 7 +++- 4 files changed, 71 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 95ee639..9e21ec2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ * Adds support for `Modules/...` alias for the public builds (Webpack BC). * Our Vite alias plugin now throws with an useful error message when `Modules/` alias resolver fails. * Adds sass resolver for `Modules/` alias. It works for both public and private builds in exactly the same way as the JS resolver. +* Adds alias `@/` for all builds, that points to the project build source root. This works for both JS and SCSS. ### Fixes diff --git a/README.md b/README.md index b28d959..3cf8ecc 100644 --- a/README.md +++ b/README.md @@ -162,6 +162,59 @@ bundler: 'webpack' // Only visible when using webpack You can combine these options to precisely control when your component appears. For example, to show a component only when using Vite with HMR active, you would use both `when: 'hmr'` and `bundler: 'vite'`. +## Provided Vite Configuration + +While the `apos` build (the code living in every module `ui/apos` directory) is fully preconfigured and doesn't allow for customization, the `public` build (the code imported within `ui/src/` ) is fully customizable and contains a minimal configuration to get you started: +- A PostCSS plugin to handle core features as "Breakpoint Preview" (when enabled) +- `Modules/` alias to simplify module within the same build +- `@/` alias to allow easy access to cross-module and cross-build source code + +### Pre-configured Aliases + +`Modules/` alias is available for both public and admin UI builds and allows you to import modules in your project without worrying about the relative path, but restricts you to only sources inside of `ui/src` directories. + +```javascript +// Current file: modules/another-module/ui/src/index.js +// Actual import path: modules/my-module/ui/src/lib/utils.js +import utils from 'Modules/my-module/lib/utils.js'; +``` + +`@/` alias is available for both public and admin UI builds and allows you to import files from the entire project source code. + +```javascript +// Current file: any file in any module inside of the `ui/` folder +// Actual path: modules/my-module/ui/src/lib/utils.js +import utils from '@/modules/my-module/src/lib/utils.js'; + +// Actual path: modules/my-module/ui/apos/mixins/SomeMixin.js +import SomeMixin from '@/modules/my-module/apos/mixins/SomeMixin.js'; +``` + +## Configuring Your Code Editor + +Every editor, that understands the `jsconfig.json` or `tsconfig.json` file, can be configured to understand the `@/` alias provided by this module. Here is an example of a `jsconfig.json` file that you can place in your project root: + +```json +{ + "compilerOptions": { + "baseUrl": "./apos-build/@apostrophecms/vite/default", + "paths": { + "@/*": ["./src/*"] + }, + "module": "ESNext", + "moduleResolution": "bundler" + }, + "exclude": [ + "apos-build/@apostrophecms/vite/default/dist", + "node_modules", + "public", + "data" + ] +} +``` + +> Note: If you change your project asset namespace you have to adjust the `baseUrl` and `exclude` path accordingly. For example, if your project namespace is `my-namespace`, the `baseUrl` should be `./apos-build/@apostrophecms/vite/my-namespace`. + ## Extending the Vite Configuration You can customize the Vite configuration for your ApostropheCMS project in two ways: diff --git a/lib/internals.js b/lib/internals.js index 24d3af3..51fadaa 100644 --- a/lib/internals.js +++ b/lib/internals.js @@ -82,11 +82,10 @@ module.exports = (self) => { self.printLabels('apos', true); const { build, config } = await self.getViteBuild('apos', options); + self.printDebug('build-apos', { viteConfig: config }); await build(config); self.printLabels('apos', false); - self.printDebug('build-apos', { viteConfig: config }); - return Date.now(); }, @@ -104,10 +103,9 @@ module.exports = (self) => { } self.printLabels('public', true); const { build, config } = await self.getViteBuild('public', options); + self.printDebug('build-public', { viteConfig: config }); await build(config); self.printLabels('public', false); - - self.printDebug('build-public', { viteConfig: config }); }, // Create an entrypoint configuration for the vite client. @@ -968,12 +966,15 @@ module.exports = (self) => { // The `apos.vite.config.js` at the project root can be used to extend // the public config. - const userConfig = (await vite.loadConfigFromFile( - configEnv, - self.userConfigFile, - self.apos.rootDir, - 'silent' - ))?.config || {}; + const userConfig = self.userConfigFile + ? (await vite.loadConfigFromFile( + configEnv, + self.userConfigFile, + self.apos.rootDir, + 'silent' + ))?.config || {} + : {}; + merged = vite.mergeConfig(merged, userConfig); return merged; diff --git a/lib/vite-plugin-apostrophe-alias.mjs b/lib/vite-plugin-apostrophe-alias.mjs index e433b9c..63cc4ef 100644 --- a/lib/vite-plugin-apostrophe-alias.mjs +++ b/lib/vite-plugin-apostrophe-alias.mjs @@ -26,7 +26,7 @@ export default function VitePluginApos({ sourceRoot, id } = {}) { return { name: 'vite-plugin-apostrophe-alias', - + enforce: 'pre', config() { return { css: { @@ -35,6 +35,11 @@ export default function VitePluginApos({ sourceRoot, id } = {}) { importers: [ { findFileUrl } ] } } + }, + resolve: { + alias: { + '@': `${sourceRoot}/` + } } }; },