feat: Proper Static Asset Handling

[James-Wilkinson-git]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

These linked issues describe the problem, and Stencil closed it as documentation issue, however, the underlying issue still remains. There is no way to render and asset in stencil when your package is distributed, the key idea here being a design system.

getAssetPath() works inside the stencil runtime, but errors out, their solution every single app needs to use setAssetPath() to say where the node_models asset lives, however, this is not scalable.

There needs to be a way to server static assets from within the confines of the module, suchs as how react cant import {icons} from icon.svg and it works, the bundler takes care of serving and importing.

#1868 (comment)

Does anyone have a solution for this?

Describe the Use Case

Design System Distrobution

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[christian-bromann]

These linked issues describe the problem

Are you referring to #1868?

Does anyone have a solution for this?

I think this is possible e.g. for SVGs but less for images because Stencil is not the end compiler most people use. The Stencil compiler is only used as intermediate step and depending on the application, endusers mostly use Vite or Angular to compile the components within the realm of an actual application.

Can you describe a little bit more your use case and types of assets you want to see bundled. I think it would be possible for us to embed text based assets like SVGs but everything more than that would require a more careful exploration of the use case.

[James-Wilkinson-git]

Stencil compiles and is packaged by npm to be ingested in applications through including the compiled js

The compiled js doesn’t know what getAssetPath is seemingly without having every ingest application define setAssetPath to the node modules folder for the assets.

This doesn’t make stencil a viable option to deliver something like a design system that contains icons and logos.

[christian-bromann]

Given that Stencil doesn't know in which environment the components are used in and how that environment resolves assets it makes it difficult to do proper static asset handling. Using getAssetPath was one approach to address this but it surely may not be the ideal solution. Do you have any concrete suggestion in mind?

[James-Wilkinson-git]

What does bootstrap and Mui do to server their assets?

What about a build process that converts assets to base 64? Went with if someone needs to ship a video though

Or some kind of adjustment to the loader that can references the packages assets I don’t know this using my field if expertise