Svelte Cli

使用最新路由快速构建 Svelte/SvelteKit 模板的 Svelte cli。完全使用 Rust 编写。

工作进展中

安装

cargo install sveltecli

请确保 ~/.cargo/bin 在您的 PATH 中。
未来将添加更多与发行版相关的选项 :)

用法

sv add [pages] -p [path]

此命令将添加指定的路由文件和基本模板。示例

sv add ps -p reports

这将向您的 reports 文件夹添加 +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;

您也可以在一个命令中添加多个文件

sv add ps p e l

页面

配置

语言

sv config lang [js or ts]

这将设置语言。 js 语言将不会使用类型，文件将具有 .js 扩展名，cli 将在临时文件夹中搜索 .js 文件。

模板

sv config temp [path_to_your_templates_folder]

这将设置您的默认模板路径。在此文件夹中放置您的默认模板文件。页面的名称必须与默认模板相匹配。您不需要放置所有页面，如果某些页面缺失，cli 将使用默认模板。然后添加它

默认模板

+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;