Skip to content

Component flag to "compile away" a component #16710

@RoryDuncan

Description

@RoryDuncan

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions