Dynamic imports transformer and CSS path rewriter for Vite when using Adobe Experience Manager
A Vite/Rollup transformer that ensures dynamic import statements use the correct public path which by default is relative instead of absolute.
Please refer to aemvite.dev for some background and usage instructions.
Apache-2.0
Vite 5 deprecates CJS support and as such support has been dropped here
Node v18/20 and Vite v5+ are required moving forward.
Node v16 and Vite v3.0.0 are required moving forward.
aem-vite
keyFormat handlingACS Commons ships with two different ClientLib path formats. This change introduces support for both. Use acs-modern for instances where your ClientLibs contain ACSHASH and acs-classic when only the MD5 hash exists. For AEMaaCS please ensure you use cloud.
As Node v12 is no longer supported we are bringing our minimum supported version of node to v14. Please ensure your project is up to date.
The previous implementation was kind of clunky and didn't behave correct in most situations. A new resourcesPath configuration exists in the bundles rewriter which enforces a strict contract between the handler and your configuration, removing all assumptions.
Please refer to the below for how you should optimally setup your Vite configuration.
{
base: command === 'build' ? '/etc.clientlibs/<project>/clientlibs/<clientlib>/' : '/',
build: {
rollupOptions: {
output: {
chunkFileNames: '<clientlib>/resources/js/chunks/[name].js',
entryFileNames: '<clientlib>/resources/js/[name].js',
},
},
},
plugins: [
bundlesImportRewriter({
publicPath: '/etc.clientlibs/<project>/clientlibs/<clientlib>',
resourcesPath: 'resources/js',
}),
],
}To keep up with internal fixes and feature additions Vite 2.6.x or greater is required to support server.origin which removes the need for the CSS Rewriter.
aemViteCSSImportRewriter export has been renamed to cssImportRewriterTo better align with community standards, the default export has been changed to a named export called bundlesImportRewriter.
Please ensure that the base path in your Vite configuration matches your ClientLib proxy path as Vite will automatically prefix imports using it.
command option (e5085f8)command option in favour of plugin enforcementTo reduce any future complexity, you can define when the ES import rewriter will be executed. This can be done as shown in the below example by setting the apply option to either build or serve.
Ensure that enforce is always set to pre as it will prevent Vite from transforming things first.
plugins: [
{
...aemViteImportRewriter({ /* ... */ }),
apply: 'build',
enforce: 'pre',
},
]All instances of the main entry point that need to refer back to the AEM ClientLib are automatically rewritten