Migrate To Svelte

Blade Component Svelte Guidelines

Key Examples for references

• Study the props of the React component which you are trying to migrate to Svelte. Props should remain consistent throughout Svelte and React components.

Directory Structure

Components should be created in the following structure:

packages/
└── blade-svelte/
    └── src/
        └── components/
            ├── Button/
            │   ├── Button.svelte
            │   └── types.ts
            ├── Link/
            │   ├── BaseLink/
            │   │   ├── BaseLink.svelte
            |   │   └── types.ts
            │   └── Link.svelte
            └── ... (other components)

Naming Conventions

• Component directories: PascalCase (e.g., Button/, Link/)
• Component files: PascalCase.svelte (e.g., Button.svelte, BaseLink.svelte)
• CSS files: camelCase.css (e.g., button.css, baseLink.css)
• For nested/base components, create a subdirectory with the component name (e.g., Link/BaseLink/)

Styling Guidelines

• Only CSS classes should be used to supply styles to the component. Avoid inline styles of the html elements. Please confirm on any use case where inline styling need is coming up.
• All CSS classes should be written inside CSS module and should follow scss styling.
• All the CSS should be written inside packages/blade-core/src directory. Refer the directory structure below

packages/
└── blade-core/
    └── src/
        └── styles/
            ├── Button/
            │   ├── button.module.css
            │   └── button.ts
            ├── Link/
            │   ├── BaseLink/
            │   │   ├── baselink.module.css
            │   │   └── baselink.ts

• Use the props of the component to generate dynamic css classes using Class Variance Authority similar to this

// packages/blade-core/src/styles/button.ts
import cva from 'class-variance-authority';
import styles from './button.module.css';

export const buttonStyles = cva(
  styles.base,  {
    variants: {
      size: {
        small: styles.small,
        medium: styles.medium,
      },