@svebcomponents/auto-options

@svebcomponents/auto-options is a rollup plugin that automatically generates type converter & attribute settings for your props when building web components using svelte. It does this, by leveraging your component's (typescript) AST to infer the names (& types) of your props and then injects the correct configuration into <svelte:options/>.

Example

<script lang="ts">
  let { myNumber }: { myNumber: number } = $props();
</script>

<h1>Awesome number: {myNumber}</h1>

will be automatically transformed to:

<svelte:options customElement={{
  props: {
    myNumber: {
      type: "number",
      reflect: true,
      default: 0,
    },
  }
}} />
<script lang="ts">
  let { myNumber }: { myNumber: number } = $props();
</script>

<h1>Awesome number: {myNumber}</h1>

So now you can just use your component like this:

<favorite-number my-number="42"></favorite-number>

Usage

Via @svebcomponents/build

If you are using @svebcomponents/build you don't need to do anything, since the rollup config generated by it already includes the plugin.

Manual Usage

If you are not using @svebcomponents/build you can still use the plugin in your own rollup config. You need to manually install it:

npm install -D @svebcomponents/auto-options

Then add the plugin to your rollup config:

import autoOptions from "@svebcomponents/auto-options";

export default {
  plugins: [
    autoOptions(),
    // make sure to call the svelte plugin **after** the @svebcomponents/auto-options plugin
    svelte({
      compilerOptions: {
        customElement: true,
      },
    }),
  ],
};