CLIAPI

sv-utils

Le paquet @sveltejs/sv-utils est actuellement expérimental. Son API peut encore évoluer.

Le paquet @sveltejs/sv-utils est un utilitaire d'add-on pour parser, transformer, et générer du code dans les add-ons.

npm install -D @sveltejs/sv-utils

transforms

transforms est une collection de fonction conscientes des parsers vous permettant de modifier les fichiers via un AST. Elle accepte un callback. La valeur de retour est conçue pour être passée directement à sv.file(). Le choix du parser est inclus dans le type de transformation — vous ne pouvez pas parser accidentellement une configuration Vite en tant que fichier Svelte, car vous n'appelez jamais un parser vous-même.

Chaque transformation injecte les utilitaires pertinents dans le callback, de sorte que vous n'avez besoin que d'un import :

import { const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms } from '@sveltejs/sv-utils';

const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms.function script(cb: (file: {
    ast: Program;
    comments: Comments;
    content: string;
    js: typeof index_d_exports$3;
}) => void | false, options?: TransformOptions): (content: string) => stringTransform a JavaScript/TypeScript file.
Return false from the callback to abort - the original content is returned unchanged.
script(/* ... */);
const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms.function svelte(cb: (file: {
    ast: AST.Root;
    content: string;
    svelte: typeof index_d_exports$4;
    js: typeof index_d_exports$3;
}) => void | false, options?: TransformOptions): (content: string) => stringTransform a Svelte component file.
Return false from the callback to abort - the original content is returned unchanged.
svelte(/* ... */);
// ...

transforms.script

Transforme un fichier JavaScript/TypeScript. Le callback reçoit { ast, comments, content, js }.

import { const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms } from '@sveltejs/sv-utils';

sv.file(
	file.viteConfig,
	const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms.function script(cb: (file: {
    ast: Program;
    comments: Comments;
    content: string;
    js: typeof index_d_exports$3;
}) => void | false, options?: TransformOptions): (content: string) => stringTransform a JavaScript/TypeScript file.
Return false from the callback to abort - the original content is returned unchanged.
script(({ ast: Programast, js: typeof index_d_exports$3js }) => {
		js: typeof index_d_exports$3js.namespace index_d_exports$3.imports
export index_d_exports$3.importsimports.imports_d_exports.addDefault(node: Program, options: {
    from: string;
    as: string;
}): void
export imports_d_exports.addDefaultaddDefault(ast: Programast, { as: stringas: 'foo', from: stringfrom: 'foo' });
		js: typeof index_d_exports$3js.namespace index_d_exports$3.vite
export index_d_exports$3.vitevite.vite_d_exports.addPlugin(ast: Program, options: {
    code: string;
    mode?: "append" | "prepend";
}): void
export vite_d_exports.addPluginaddPlugin(ast: Programast, { code: stringcode: 'foo()' });
	})
);

transforms.svelte

Transforme un composant Svelte. Le callback reçoit { ast, content, svelte, js }.

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

sv.file(
	layoutPath,
	import transformstransforms.svelte(({ ast: anyast, svelte: anysvelte }) => {
		svelte: anysvelte.addFragment(ast: anyast, '<Foo />');
	})
);

transforms.svelteScript

Transforme un composant Svelte avec un bloc <script> garanti. Passez { language } en tant que premier argument. Le callback reçoit { ast, content, svelte, js } où ast.instance est toujours non nul.

import { const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms } from '@sveltejs/sv-utils';

sv.file(
	layoutPath,
	const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms.function svelteScript(scriptOptions: {
    language: "ts" | "js";
}, cb: (file: {
    ast: RootWithInstance;
    content: string;
    svelte: typeof index_d_exports$4;
    js: typeof index_d_exports$3;
}) => void | false, options?: TransformOptions): TransformFnTransform a Svelte component file with a script block guaranteed.
Calls ensureScript before invoking your callback, so ast.instance is always non-null.
Pass { language } as the first argument to set the script language.
Return false from the callback to abort - the original content is returned unchanged.
svelteScript({ language: "ts" | "js"language: 'ts' }, ({ ast: RootWithInstanceast, svelte: typeof index_d_exports$4svelte, js: typeof index_d_exports$3js }) => {
		js: typeof index_d_exports$3js.namespace index_d_exports$3.imports
export index_d_exports$3.importsimports.imports_d_exports.addDefault(node: Program, options: {
    from: string;
    as: string;
}): void
export imports_d_exports.addDefaultaddDefault(ast: RootWithInstanceast.instance: AST.ScriptThe parsed <script> element, if exists
instance.AST.Script.content: Programcontent, { as: stringas: 'Foo', from: stringfrom: './Foo.svelte' });
		svelte: typeof index_d_exports$4svelte.index_d_exports$4.addFragment(ast: AST.Root, content: string, options?: {
    mode?: "append" | "prepend";
}): void
export index_d_exports$4.addFragmentaddFragment(ast: RootWithInstanceast, '<Foo />');
	})
);

transforms.css

Transforme une fichier CSS. Le callback reçoit { ast, content, css }.

import { const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms } from '@sveltejs/sv-utils';

sv.file(
	file.stylesheet,
	const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms.function css(cb: (file: {
    ast: Omit<_CSS.StyleSheetBase, "attributes" | "content">;
    content: string;
    css: typeof index_d_exports$1;
}) => void | false, options?: TransformOptions): TransformFnTransform a CSS file.
Return false from the callback to abort - the original content is returned unchanged.
css(({ ast: Omit<_CSS.StyleSheetBase, "attributes" | "content">ast, css: typeof index_d_exports$1css }) => {
		css: typeof index_d_exports$1css.index_d_exports$1.addAtRule(node: _CSS.StyleSheetBase, options: {
    name: string;
    params: string;
    append: boolean;
}): _CSS.Atrule
export index_d_exports$1.addAtRuleaddAtRule(ast: Omit<_CSS.StyleSheetBase, "attributes" | "content">ast, { name: stringname: 'import', params: stringparams: "'tailwindcss'" });
	})
);

transforms.json

Transforme un fichier JSON. Mute l'objet data directement. Le callback reçoit { data, content, json }.

import { const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms } from '@sveltejs/sv-utils';

sv.file(
	file.typeConfig,
	const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms.json<any>(cb: (file: {
    data: any;
    content: string;
    json: typeof json_d_exports;
}) => void | false, options?: TransformOptions): TransformFnTransform a JSON file.
Return false from the callback to abort - the original content is returned unchanged.
json(({ data: anydata }) => {
		data: anydata.compilerOptions ??= {};
		data: anydata.compilerOptions.strict = true;
	})
);

transforms.yaml / transforms.toml

Similaire à transforms.json, pour les fichiers YAML et TOML, respectivement. Le callback reçoit { data, content }.

transforms.text

Transforme un fichier texte brut (.env, .gitignore, etc.). Aucun parser — une string en entrée, une string en sortie. Le callback reçoit { content, text }.

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

sv.file(
	'.env',
	import transformstransforms.text(({ content: anycontent }) => {
		return content: anycontent + '\nDATABASE_URL="file:local.db"';
	})
);

Annuler une transformation

Renvoyez false depuis n'importe quel callback pour annuler la transformation — le contenu original est renvoyé inchangé.

import { const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms } from '@sveltejs/sv-utils';

sv.file(
	file.eslintConfig,
	const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms.function script(cb: (file: {
    ast: Program;
    comments: Comments;
    content: string;
    js: typeof index_d_exports$3;
}) => void | false, options?: TransformOptions): (content: string) => stringTransform a JavaScript/TypeScript file.
Return false from the callback to abort - the original content is returned unchanged.
script(({ ast: Programast, js: typeof index_d_exports$3js }) => {
		const { value: anyvalue: const existing: anyexisting } = js: typeof index_d_exports$3js.namespace index_d_exports$3.exports
export index_d_exports$3.exportsexports.exports_d_exports.createDefault<any>(node: Program, options: {
    fallback: any;
}): ExportDefaultResult<any>
export exports_d_exports.createDefaultcreateDefault(ast: Programast, { fallback: anyfallback: myConfig });
		if (const existing: anyexisting !== myConfig) {
			// la configuration existe déjà, on n'y touche pas
			return false;
		}
		// ... on continue de modifier l'ast
	})
);

Usage standalone & tests

Les transformations sont des fonctions curry — appelez-les avec un callback, puis appliquez-les sur votre contenu :

import { const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms } from '@sveltejs/sv-utils';

const const transform: (content: string) => stringtransform = const transforms: {
    script(cb: (file: {
        ast: Program;
        comments: Comments;
        content: string;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    svelte(cb: (file: {
        ast: AST.Root;
        content: string;
        svelte: typeof index_d_exports$4;
        js: typeof index_d_exports$3;
    }) => void | false, options?: TransformOptions): (content: string) => string;
    ... 6 more ...;
    text(cb: (file: {
        content: string;
        text: typeof text_d_exports;
    }) => string | false): TransformFn;
}File transform primitives that know their format.
sv-utils = what to do to content, sv = where and when to do it.
Each transform wraps: parse -> callback({ast/data, utils}) -> generateCode().
The parser choice is baked into the transform type - you can't accidentally
parse a vite config as svelte because you never call a parser yourself.
Transforms are curried: call with the callback to get a (content: string) => string
function that plugs directly into sv.file().
@example
import { transforms } from '@sveltejs/sv-utils';

// use with sv.file() - curried form plugs in directly
sv.file(files.viteConfig, transforms.script(({ ast, js }) => {
  js.vite.addPlugin(ast, { code: 'kitRoutes()' });
}));

// standalone usage / testing
const result = transforms.script(({ ast, js }) => {
  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });
})(fileContent);transforms.function script(cb: (file: {
    ast: Program;
    comments: Comments;
    content: string;
    js: typeof index_d_exports$3;
}) => void | false, options?: TransformOptions): (content: string) => stringTransform a JavaScript/TypeScript file.
Return false from the callback to abort - the original content is returned unchanged.
script(({ ast: Programast, js: typeof index_d_exports$3js }) => {
	js: typeof index_d_exports$3js.namespace index_d_exports$3.imports
export index_d_exports$3.importsimports.imports_d_exports.addDefault(node: Program, options: {
    from: string;
    as: string;
}): void
export imports_d_exports.addDefaultaddDefault(ast: Programast, { as: stringas: 'foo', from: stringfrom: 'foo' });
});
const const result: stringresult = const transform: (content: string) => stringtransform('export default {}');

Composabilité

Pour les cas nécessitant d'utiliser à la fois des transformations et des éditions brutes, utilisez sv.file avec un callback de contenu, puis invoquer la transformation curryfiée manuellement :

sv.file(path, (content: anycontent) => {
	// curryfication
	const const transform: anytransform = transforms.script(({ ast: anyast, js: anyjs }) => {
		js: anyjs.imports.addDefault(ast: anyast, { as: stringas: 'foo', from: stringfrom: 'bar' });
	});

	// manipulation du parser
	content: anycontent = const transform: anytransform(content: anycontent);

	// manipulation brute de string
	content: anycontent = content: anycontent.replace('foo', 'baz');

	return content: anycontent;
});

Les add-ons peuvent également exporter des fonctions de transformations réutilisables :

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

// ré-utilisable — exportez-la depuis votre paquet
export const const addFooImport: anyaddFooImport = import transformstransforms.svelte(({ ast: anyast, svelte: anysvelte, js: anyjs }) => {
	svelte: anysvelte.ensureScript(ast: anyast, { language: anylanguage });
	js: anyjs.imports.addDefault(ast: anyast.instance.content, { as: stringas: 'Foo', from: stringfrom: './Foo.svelte' });
});

sv.file('+page.svelte', addFooImport);
sv.file('index.svelte', addFooImport);

Parsers (bas-niveau)

transforms devrait convenir à la plupart des besoins (par ex. parsing conditionnel, gestion d'erreur autour du parser). Si ce n'est pas le cas pour vous, parse est une API bas-niveau à laquelle vous pouvez accéder :

import { const parse: {
    css: (source: string) => {
        ast: Omit<_CSS.StyleSheetBase, "attributes" | "content">;
    } & ParseBase;
    html: (source: string) => {
        ast: AST.Fragment;
    } & ParseBase;
    json: (source: string) => {
        data: any;
    } & ParseBase;
    script: (source: string) => {
        ast: Program;
        comments: Comments;
    } & ParseBase;
    svelte: (source: string) => {
        ast: AST.Root;
    } & ParseBase;
    toml: (source: string) => {
        data: TomlTable;
    } & ParseBase;
    yaml: (source: string) => {
        data: ReturnType<(content: string) => ReturnType<any>>;
    } & ParseBase;
}Will help you parse code into an ast from all supported languages.
Then manipulate the ast as you want,
and finally generateCode() to write it back to the file.
import { parse } from '@sveltejs/sv-utils';

const { ast, generateCode } = parse.css('body { color: red; }');
const { ast, generateCode } = parse.html('<div>Hello, world!</div>');
const { ast, generateCode } = parse.json('{ "name": "John", "age": 30 }');
const { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');
const { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');
const { ast, generateCode } = parse.toml('name = "John"');
const { ast, generateCode } = parse.yaml('name: John');parse } from '@sveltejs/sv-utils';

const { const ast: Programast, const generateCode: () => stringGenerate the code after manipulating the ast.
import { svelte } from 'sv/core';
const { ast, generateCode } = parse.svelte(content);

svelte.addFragment(ast, '<p>Hello World</p>');

const code = generateCode();generateCode } = const parse: {
    css: (source: string) => {
        ast: Omit<_CSS.StyleSheetBase, "attributes" | "content">;
    } & ParseBase;
    html: (source: string) => {
        ast: AST.Fragment;
    } & ParseBase;
    json: (source: string) => {
        data: any;
    } & ParseBase;
    script: (source: string) => {
        ast: Program;
        comments: Comments;
    } & ParseBase;
    svelte: (source: string) => {
        ast: AST.Root;
    } & ParseBase;
    toml: (source: string) => {
        data: TomlTable;
    } & ParseBase;
    yaml: (source: string) => {
        data: ReturnType<(content: string) => ReturnType<any>>;
    } & ParseBase;
}Will help you parse code into an ast from all supported languages.
Then manipulate the ast as you want,
and finally generateCode() to write it back to the file.
import { parse } from '@sveltejs/sv-utils';

const { ast, generateCode } = parse.css('body { color: red; }');
const { ast, generateCode } = parse.html('<div>Hello, world!</div>');
const { ast, generateCode } = parse.json('{ "name": "John", "age": 30 }');
const { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');
const { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');
const { ast, generateCode } = parse.toml('name = "John"');
const { ast, generateCode } = parse.yaml('name: John');parse.script: (source: string) => {
    ast: Program;
    comments: Comments;
} & ParseBasescript(content);
const { const ast: AST.Rootast, const generateCode: () => stringGenerate the code after manipulating the ast.
import { svelte } from 'sv/core';
const { ast, generateCode } = parse.svelte(content);

svelte.addFragment(ast, '<p>Hello World</p>');

const code = generateCode();generateCode } = const parse: {
    css: (source: string) => {
        ast: Omit<_CSS.StyleSheetBase, "attributes" | "content">;
    } & ParseBase;
    html: (source: string) => {
        ast: AST.Fragment;
    } & ParseBase;
    json: (source: string) => {
        data: any;
    } & ParseBase;
    script: (source: string) => {
        ast: Program;
        comments: Comments;
    } & ParseBase;
    svelte: (source: string) => {
        ast: AST.Root;
    } & ParseBase;
    toml: (source: string) => {
        data: TomlTable;
    } & ParseBase;
    yaml: (source: string) => {
        data: ReturnType<(content: string) => ReturnType<any>>;
    } & ParseBase;
}Will help you parse code into an ast from all supported languages.
Then manipulate the ast as you want,
and finally generateCode() to write it back to the file.
import { parse } from '@sveltejs/sv-utils';

const { ast, generateCode } = parse.css('body { color: red; }');
const { ast, generateCode } = parse.html('<div>Hello, world!</div>');
const { ast, generateCode } = parse.json('{ "name": "John", "age": 30 }');
const { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');
const { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');
const { ast, generateCode } = parse.toml('name = "John"');
const { ast, generateCode } = parse.yaml('name: John');parse.svelte: (source: string) => {
    ast: AST.Root;
} & ParseBasesvelte(content);
const { const ast: Omit<_CSS.StyleSheetBase, "attributes" | "content">ast, const generateCode: () => stringGenerate the code after manipulating the ast.
import { svelte } from 'sv/core';
const { ast, generateCode } = parse.svelte(content);

svelte.addFragment(ast, '<p>Hello World</p>');

const code = generateCode();generateCode } = const parse: {
    css: (source: string) => {
        ast: Omit<_CSS.StyleSheetBase, "attributes" | "content">;
    } & ParseBase;
    html: (source: string) => {
        ast: AST.Fragment;
    } & ParseBase;
    json: (source: string) => {
        data: any;
    } & ParseBase;
    script: (source: string) => {
        ast: Program;
        comments: Comments;
    } & ParseBase;
    svelte: (source: string) => {
        ast: AST.Root;
    } & ParseBase;
    toml: (source: string) => {
        data: TomlTable;
    } & ParseBase;
    yaml: (source: string) => {
        data: ReturnType<(content: string) => ReturnType<any>>;
    } & ParseBase;
}Will help you parse code into an ast from all supported languages.
Then manipulate the ast as you want,
and finally generateCode() to write it back to the file.
import { parse } from '@sveltejs/sv-utils';

const { ast, generateCode } = parse.css('body { color: red; }');
const { ast, generateCode } = parse.html('<div>Hello, world!</div>');
const { ast, generateCode } = parse.json('{ "name": "John", "age": 30 }');
const { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');
const { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');
const { ast, generateCode } = parse.toml('name = "John"');
const { ast, generateCode } = parse.yaml('name: John');parse.css: (source: string) => {
    ast: Omit<_CSS.StyleSheetBase, "attributes" | "content">;
} & ParseBasecss(content);
const { const data: anydata, const generateCode: () => stringGenerate the code after manipulating the ast.
import { svelte } from 'sv/core';
const { ast, generateCode } = parse.svelte(content);

svelte.addFragment(ast, '<p>Hello World</p>');

const code = generateCode();generateCode } = const parse: {
    css: (source: string) => {
        ast: Omit<_CSS.StyleSheetBase, "attributes" | "content">;
    } & ParseBase;
    html: (source: string) => {
        ast: AST.Fragment;
    } & ParseBase;
    json: (source: string) => {
        data: any;
    } & ParseBase;
    script: (source: string) => {
        ast: Program;
        comments: Comments;
    } & ParseBase;
    svelte: (source: string) => {
        ast: AST.Root;
    } & ParseBase;
    toml: (source: string) => {
        data: TomlTable;
    } & ParseBase;
    yaml: (source: string) => {
        data: ReturnType<(content: string) => ReturnType<any>>;
    } & ParseBase;
}Will help you parse code into an ast from all supported languages.
Then manipulate the ast as you want,
and finally generateCode() to write it back to the file.
import { parse } from '@sveltejs/sv-utils';

const { ast, generateCode } = parse.css('body { color: red; }');
const { ast, generateCode } = parse.html('<div>Hello, world!</div>');
const { ast, generateCode } = parse.json('{ "name": "John", "age": 30 }');
const { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');
const { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');
const { ast, generateCode } = parse.toml('name = "John"');
const { ast, generateCode } = parse.yaml('name: John');parse.json: (source: string) => {
    data: any;
} & ParseBasejson(content);
const { const data: anydata, const generateCode: () => stringGenerate the code after manipulating the ast.
import { svelte } from 'sv/core';
const { ast, generateCode } = parse.svelte(content);

svelte.addFragment(ast, '<p>Hello World</p>');

const code = generateCode();generateCode } = const parse: {
    css: (source: string) => {
        ast: Omit<_CSS.StyleSheetBase, "attributes" | "content">;
    } & ParseBase;
    html: (source: string) => {
        ast: AST.Fragment;
    } & ParseBase;
    json: (source: string) => {
        data: any;
    } & ParseBase;
    script: (source: string) => {
        ast: Program;
        comments: Comments;
    } & ParseBase;
    svelte: (source: string) => {
        ast: AST.Root;
    } & ParseBase;
    toml: (source: string) => {
        data: TomlTable;
    } & ParseBase;
    yaml: (source: string) => {
        data: ReturnType<(content: string) => ReturnType<any>>;
    } & ParseBase;
}Will help you parse code into an ast from all supported languages.
Then manipulate the ast as you want,
and finally generateCode() to write it back to the file.
import { parse } from '@sveltejs/sv-utils';

const { ast, generateCode } = parse.css('body { color: red; }');
const { ast, generateCode } = parse.html('<div>Hello, world!</div>');
const { ast, generateCode } = parse.json('{ "name": "John", "age": 30 }');
const { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');
const { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');
const { ast, generateCode } = parse.toml('name = "John"');
const { ast, generateCode } = parse.yaml('name: John');parse.yaml: (source: string) => {
    data: ReturnType<(content: string) => ReturnType<any>>;
} & ParseBaseyaml(content);
const { const data: TomlTabledata, const generateCode: () => stringGenerate the code after manipulating the ast.
import { svelte } from 'sv/core';
const { ast, generateCode } = parse.svelte(content);

svelte.addFragment(ast, '<p>Hello World</p>');

const code = generateCode();generateCode } = const parse: {
    css: (source: string) => {
        ast: Omit<_CSS.StyleSheetBase, "attributes" | "content">;
    } & ParseBase;
    html: (source: string) => {
        ast: AST.Fragment;
    } & ParseBase;
    json: (source: string) => {
        data: any;
    } & ParseBase;
    script: (source: string) => {
        ast: Program;
        comments: Comments;
    } & ParseBase;
    svelte: (source: string) => {
        ast: AST.Root;
    } & ParseBase;
    toml: (source: string) => {
        data: TomlTable;
    } & ParseBase;
    yaml: (source: string) => {
        data: ReturnType<(content: string) => ReturnType<any>>;
    } & ParseBase;
}Will help you parse code into an ast from all supported languages.
Then manipulate the ast as you want,
and finally generateCode() to write it back to the file.
import { parse } from '@sveltejs/sv-utils';

const { ast, generateCode } = parse.css('body { color: red; }');
const { ast, generateCode } = parse.html('<div>Hello, world!</div>');
const { ast, generateCode } = parse.json('{ "name": "John", "age": 30 }');
const { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');
const { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');
const { ast, generateCode } = parse.toml('name = "John"');
const { ast, generateCode } = parse.yaml('name: John');parse.toml: (source: string) => {
    data: TomlTable;
} & ParseBasetoml(content);
const { const ast: AST.Fragmentast, const generateCode: () => stringGenerate the code after manipulating the ast.
import { svelte } from 'sv/core';
const { ast, generateCode } = parse.svelte(content);

svelte.addFragment(ast, '<p>Hello World</p>');

const code = generateCode();generateCode } = const parse: {
    css: (source: string) => {
        ast: Omit<_CSS.StyleSheetBase, "attributes" | "content">;
    } & ParseBase;
    html: (source: string) => {
        ast: AST.Fragment;
    } & ParseBase;
    json: (source: string) => {
        data: any;
    } & ParseBase;
    script: (source: string) => {
        ast: Program;
        comments: Comments;
    } & ParseBase;
    svelte: (source: string) => {
        ast: AST.Root;
    } & ParseBase;
    toml: (source: string) => {
        data: TomlTable;
    } & ParseBase;
    yaml: (source: string) => {
        data: ReturnType<(content: string) => ReturnType<any>>;
    } & ParseBase;
}Will help you parse code into an ast from all supported languages.
Then manipulate the ast as you want,
and finally generateCode() to write it back to the file.
import { parse } from '@sveltejs/sv-utils';

const { ast, generateCode } = parse.css('body { color: red; }');
const { ast, generateCode } = parse.html('<div>Hello, world!</div>');
const { ast, generateCode } = parse.json('{ "name": "John", "age": 30 }');
const { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');
const { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');
const { ast, generateCode } = parse.toml('name = "John"');
const { ast, generateCode } = parse.yaml('name: John');parse.html: (source: string) => {
    ast: AST.Fragment;
} & ParseBasehtml(content);

Outillage de langage

Les utilitaires de namespace pour la manipulation d'AST :

js.* - imports, exports, objets, tableaux, variables, fonctions, utilitaires de configuration Vite, utilitaires SvelteKit
css.* - règles, déclarations, at-rules, imports
svelte.* - ensureScript, addSlot, addFragment
json.* - arrayUpsert, packageScriptsUpsert
html.* - manipulation d'attributs
text.* - insertion de lignes dans les fichiers bruts (.env, .gitignore)

Modifier cette page sur Github llms.txt

précédent suivant