vite-asset-collector icon indicating copy to clipboard operation
vite-asset-collector copied to clipboard

Documentation missing about how to reference assets just for certain content-elements

Open Moongazer opened this issue 1 year ago • 6 comments

I just started refactoring my setup using this extension which is going quite well so far. All common/global scrips and packages I referenced in the app.js, so far so good. But how does it work for assets which are needed only for certain content-elements?

For example, lets say we built a CardSlider content-element using the NPM package @splidejs/splide. In my old setup I used Grunt which compiled the related JS file from Public/JavaScript/Components/my-cardslider.js to Public/JavaScript/Components/my-cardslider.min.js. The Splide library itself was copied by Grunt to Public/Libs/splidejs/ including all resources like theme CSS files.

Than in the template I could just reference the assets and they was loaded only if such a content-element was placed on a page.

Private/Templates/ContentElements/CardSlider.html:

<f:asset.css identifier="splidejs-css" href="EXT:my_site/Resources/Public/Libs/splidejs/css/themes/splide-skyblue.min.css" />
<f:asset.script identifier="splidejs-js" type="module" src="EXT:my_site/Resources/Public/JavaScript/Components/my-cardslider.min.js" />

Using the vite-asset-collector, I tried the following:

assets/JavaScript/Components/my-cardslider.js:

import Splide from '@splidejs/splide'
import '@splidejs/splide/css/skyblue'

// ... init all card-slider elements ...
// const cardSliders = document.querySelectorAll('.mz-cardslider')
// ...

Now, referencing it in the content-element template does not work, at least not for production, because the manifest.json is missing the my-cardslider-asset.

<!-- this works only in development context, because the file is loaded directly from original source -->
<vac:asset.vite manifest="EXT:mz_website/Resources/Public/manifest.json" entry="assets/JavaScript/Components/my-cardslider.js" />

A workaround is to import the my-cardslider.js inside the app.js, but than it is loaded always and everywhere, even if it's not needed. How is it possible to solve this issue?

Moongazer avatar Oct 10 '23 00:10 Moongazer