Vite Plugin Svelte Kebab Props

1.0.3 verified Mon Apr 27 auth: no javascript

Vite 2.x plugin that enables using kebab-case (hyphenated) attribute names for Svelte component props, automatically mapping them to camelCase component variables. Version 1.0.3 is current, with no active development observed. Works as a Vite plugin for SvelteKit or Svelte projects using Vite. Differentiates by eliminating the need to manually write camelCase props in templates, allowing HTML-conventional kebab-case while leveraging Svelte's reactivity.

Common errors

error Error: Cannot find module 'vite-plugin-svelte-kebab-props' ↓

cause Package not installed.

fix

Run npm install --save-dev vite-plugin-svelte-kebab-props or equivalent.

error TypeError: svelteKebabProps is not a function ↓

cause Using named import instead of default import.

fix

Use import svelteKebabProps from 'vite-plugin-svelte-kebab-props'.

error Vite build error: Plugin 'vite-plugin-svelte-kebab-props' not supported in Vite 3+ ↓

cause Plugin is only for Vite 2.x.

fix

Downgrade to Vite 2.x or find an alternative plugin.

Warnings

breaking Plugin only supports Vite 2.x; it may not work with Vite 3+ or SvelteKit 1.0+ without modifications. ↓

fix Check compatibility with your Vite version; consider an alternative if using Vite 3+.

gotcha Only transforms props that are declared with `export let` in Svelte components; does not handle spread props or dynamic attribute binding. ↓

fix Ensure all kebab-case props are explicitly exported as `let` variables.

gotcha May conflict with other preprocessors that also transform templates, like svelte-preprocess. ↓

fix Order plugins carefully; put svelteKebabProps before other template transformers.

deprecated Package hasn't been updated since initial release; consider it unmaintained. ↓

fix Evaluate if needed; replicate functionality with a custom preprocessor if issues arise.

Install

npm install vite-plugin-svelte-kebab-props

yarn add vite-plugin-svelte-kebab-props

pnpm add vite-plugin-svelte-kebab-props

Imports

default

wrong

import { svelteKebabProps } from 'vite-plugin-svelte-kebab-props'

correct

import svelteKebabProps from 'vite-plugin-svelte-kebab-props'

Package exports a default function, not a named export.

svelteKebabProps

wrong

const { svelteKebabProps } = require('vite-plugin-svelte-kebab-props')

correct

const svelteKebabProps = require('vite-plugin-svelte-kebab-props')

CommonJS require returns the default export, not a named object.

VitePluginSvelteKebabProps

wrong

import VitePluginSvelteKebabProps from 'vite-plugin-svelte-kebab-props'

correct

import svelteKebabProps from 'vite-plugin-svelte-kebab-props'

No TypeScript types are provided; the default export is a function, so you can name it anything.

Quickstart

Shows how to add the plugin to a Vite configuration file, enabling kebab-case props in Svelte components.

// vite.config.js or svelte.config.cjs
import svelteKebabProps from 'vite-plugin-svelte-kebab-props';

export default {
  plugins: [svelteKebabProps()]
};