-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Description
Describe the problem
When I create a component that only renders HTML and maybe a dash of classnames, and renders children it will also add some JS. Based on the REPL the amount of JS is more than the code I would optimally anticipate.
While negligible for few components, if shipping an entire UI library it could accumulate.
A portion of the motivation is for shipping a component library as an API while "hiding away" the details of the CSS. Allow users to use CustomComponent
which can have typescript intellisense, instead of having to know your classnames.
I performed a search and browsed for similar topics, but please excuse and redirect me if this is already discussed / under discussion / resolved
Example
imagine a Title.svelte
in which the component could only consist of... (omitting script tag contents):
<div class="card-title">{@render children()}</div>
Check out this repl showing a setup like this
If you check the output—ignoring the optimizations of gzipping and such—there is 14 lines of JS for the module itself, as well as some amount of JS generated to call the component.
Describe the proposed solution
It would be useful to have a svelte:options flag to indicate that a component should be "compiled-away" or "inlined" during the build process.
-
This compiler option could put strict constraints on the component, like no runes or snippets and likely not allowing rendering sub-components.
-
As a naive user: this compiler option could inline the svelte component into the parent component's template, but I'm unaware of the true effect of what I'm suggesting.
-
Its SSR friendly, but I'm not sure what difficulties it poses for sveltekit's comment-tokens.
-
Can bar other snippets, but I think the
children
snippet should be supported, maybe as a parameter-less snippet -
I'm not sure if optimizations by Svelte, Vite, or Rollup make this unnecessary or inconsequential
The primary benefit is the developer experience. It would allow a developer to create a component with a typescript-backed API that is then optimized away during the build.
Importance
nice to have