#svelte #cli #utilities #svelte-kit #command-line-tool #action

bin+lib sveltecli

Svelte is a simple CLI tool for prototyping and developing Svelte components

5 unstable releases

0.3.0 Feb 4, 2023
0.2.1 Feb 4, 2023
0.2.0 Feb 3, 2023
0.1.1 Feb 2, 2023
0.1.0 Feb 2, 2023

#1 in #svelte-kit

MIT license

21KB
486 lines

Svelte Cli

Svelte cli for fast Svelte/SvelteKit scaffolding using the newest routing. Written fully using Rust.

WIP

Install

cargo install sveltecli

Please make sure that ~/.cargo/bin is in your PATH.
In the future more distro related options will be added :)

Usage

sv add [pages] -p [path]

This command will add specified routing files with the basic template. Example:

sv add ps -p reports

This will add +page.server.ts to Your reports folder (it will create it if not existed) with the following template:

import { Actions, PageServerLoad } from "./$types";

export const load = (({ }) => {
  return {};
}) satisfies PageServerLoad;

export const actions = {
    formAction: async ({ request }) => {
        const form = await request.formData();
        const id = form.get('id');

        return { id };
    },
} satisfies Actions;

You can also add multiple files in one command:

sv add ps p e l

Pages

Command Page (ts) Page (js)
e +error.svelte +error.svelte
l +layout.svelte +layout.svelte
lc +layout.ts +layout.js
ls +layout.server.ts +layout.server.js
p +page.svelte +page.svelte
pc +page.ts +page.js
ps +page.server.ts +page.server.js
s +server.ts +server.js

Config

Language

sv config lang [js or ts]

This will set up the language. js lang will not use types, the files will have the .js extension and cli will search for .js files inside temp folder.

Tempaltes

sv config temp [path_to_your_templates_folder]

This will set Your default templates path. Inside this folder put the files with Your default templates. The name of the pages must much the default ones. You don't need to put all the pages, the cli will use the default one if some will be missing. Then add it:

Default templates

+error.svelte

<script lang="ts">
    import { page } from '$app/stores';
</script>

<h1>{$page.status}: {$page.error.message}</h1>

+layout.svelte

<script lang="ts">
    import { LayoutData } from "./$types";
    export let data: LayoutData;
</script>

<slot />

+layout.ts

import { LayoutLoad } from "./$types";

export const load = (({ }) => {
    return {};
}) satisfies LayoutLoad;

+layout.server.ts

import { LayoutServerLoad } from "./$types";

export const load = (({ }) => {
    return {};
}) satisfies LayoutServerLoad;

+page.svelte

<script lang="ts">
    import { PageData } from "./$types";
    export let data: PageData;
</script>

<h1>Page</h1>

+page.ts

import { PageLoad } from "./$types";

export const load = (({ }) => {
    return {};
}) satisfies PageLoad;

+page.server.ts

import { Actions, PageServerLoad } from "./$types";

export const load = (({ }) => {
    return {};
}) satisfies PageServerLoad;

export const actions = {
    formAction: async ({ request }) => {
        const form = await request.formData();
        const id = form.get('id');

        return { id };
    },
} satisfies Actions;

+server.ts

import type { RequestHandler } from "./$types";

export const GET = ( ({ url }) => {
    return new Response(String(url));
}) satisfies RequestHandler;

Dependencies

~1.6–2.7MB
~51K SLoC