Svelte CLI

When adding Storybook via sv add storybook, you receive a pre-configured setup that includes:

• Framework-specific configuration: Default settings for either SvelteKit or Svelte & Vite.
• Module Mocking: Easy mocking of many SvelteKit modules.
• Link Handling: Automatic handling of links within your stories.

When you run npx sv add playwright, the CLI performs the following automated setup tasks:

• Scripts: Adds relevant testing scripts to your package.json.
• Configuration: Generates a Playwright configuration file.
• Git Integration: Updates your .gitignore to ensure Playwright artifacts are ignored.
• Demo: Provides a sample demo test to help you get started immediately.

When you run npx sv add prettier, the following changes are applied to your project:

• package.json: New scripts are added to facilitate running Prettier.
• Configuration files: .prettierignore and .prettierrc files are created in your project root.
• ESLint integration: If you are already using ESLint, your ESLint configuration will be updated to work alongside Prettier.

The transforms object provides parser-aware functions that allow you to modify files using their Abstract Syntax Tree (AST). These transforms are designed to be passed directly into sv.file(). The parser is automatically selected based on the transform type used, preventing accidental mis-parsing.

Each transform provides a callback with injected utilities (like js, css, or svelte) to simplify AST manipulation.

import { transforms } from '@sveltejs/sv-utils';

// Example: Using a transform within sv.file
sv.file(
	path,
	transforms.script(({ ast, js }) => {
		js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
	})
);

By default, sv check traverses upwards from your project directory to find a tsconfig.json or jsconfig.json.

• Use --tsconfig <path> to specify a specific configuration file. This enables type-checking for .js and .ts files based on the files/include/exclude patterns in that config.
• Use --no-tsconfig to check only Svelte files in the current directory and below, ignoring .js/.ts files (they will not be type-checked).

npx sv check --tsconfig ./tsconfig.app.json

The library exports a walk function (via the zimmerframe module) for traversing AST nodes using a visitor pattern.

walk(node, state, visitors):

• node: The starting node to traverse.
• state: A user-defined state object passed through the traversal.
• visitors: An object where keys are node type strings and values are Visitor functions.

Each Visitor receives a context which provides:

• next(): Move to the next node.
• path: The current stack of nodes.
• state: The current traversal state.
• stop(): Terminate traversal.
• visit(node): Manually visit a specific node.

Transforms are curried functions. You can use them in two ways:

1. Standalone: Call the transform with a callback to get a function, then pass the file content to that function.
2. Composition: Use sv.file with a content callback to mix curried transforms with raw string manipulations.

// Standalone usage
import { transforms } from '@sveltejs/sv-utils';

const transform = transforms.script(({ ast, js }) => {
	js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
});
const result = transform('export default {}');

// Composition
import { sv } from '@sveltejs/sv-utils';

sv.file(path, (content) => {
	const transform = transforms.script(({ ast, js }) => {
		js.imports.addDefault(ast, { as: 'foo', from: 'bar' });
	});

	content = transform(content); // Apply curried transform
	content = content.replace('foo', 'baz'); // Raw string manipulation

	return content;
});

When you run npx sv add eslint, the CLI performs the following actions:

• Package Installation: Installs relevant ESLint packages, including eslint-plugin-svelte.
• Configuration: Creates an eslint.config.js file in your project.
• Editor Integration: Updates .vscode/extensions.json to suggest relevant extensions.
• Compatibility: If your project already uses TypeScript or prettier, the ESLint configuration is automatically adjusted to work with them.

To prevent a transform from applying changes, return false from the transform callback. The original file content will be returned unchanged.

import { transforms } from '@sveltejs/sv-utils';

sv.file(
	'eslint.config.js',
	transforms.script(({ ast, js }) => {
		const { value: existing } = js.exports.createDefault(ast, { fallback: myConfig });
		if (existing !== myConfig) {
			// config already exists, don't touch it
			return false;
		}
		// ... continue modifying ast
	})
);