Svelte Preprocess Kebab Props

ssssota

svelte-preprocess-kebab-props (WIP)

This is a preprocessor for svelte preprocess. It converts camelCase props to kebab-case props.

Usage

Then add it to your svelte preprocess options:

// svelte.config.js
import { kebabProps } from 'svelte-preprocess-kebab-props';
/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [kebabProps()],
};
export default config;

Example

source

<script lang="ts">
  type Props = {
    fooProp: string;
    barProp: number;
  };
  let {fooProp, barProp, ...restProps}: Props = $props();
</script>

<p>{fooProp} {barProp}</p>

transformed (Types are not transformed)

<script lang="ts">
  type Props = {
    fooProp: string;
    barProp: number;
  };
  let {"foo-prop":fooProp,"bar-prop":barProp,...restProps}: Props = $props();
</script>

<p>{fooProp} {barProp}</p>

License

MIT

Top categories