Chanzhaoyu/svelte-5-snippets

<script lang="ts"></script>

<div></div>

<style></style>

<script lang="ts">
  import type { Snippet } from "svelte";

  let { children }: { children: Snippet } = $props();
</script>

<div>{@render children()}</div>

<style></style>

<script lang="ts"></script>

<style></style>

<style global></style>

<style lang=""></style>

{#if }

{/if}

{#if }

{:else}

{/if}

{#if }

{:else if }

{:else}

{/if}

{#each items as item}

{/each}

{#each items as item}

{:else}

{/each}

{#each items as item, i}

{/each}

{#each items as item, i (item.id)}

{/each}

{#key }

{/key}

{#await promise}

{:then value}

{:catch error}

{/await}

{@debug }

{@html }

{#snippet name(value)}

{/snippet}

{@const name = value}

<slot></slot>

<slot name=""></slot>

{@render }

{#if children}
	{@render children()}
{:else}
	<span>default</span>
{/if}

bind:value={}

bind:this={}

transition:fade="{{delay: 250, duration: 300}}"

transition:blur="{{amount: 10}}"

transition:fly="{{delay: 250, duration: 300, x: 100, y: 500, opacity: 0.5, easing: quintOut}}"

transition:slide="{{delay: 250, duration: 300, easing: quintOut }}"

transition:scale="{{duration: 500, delay: 500, opacity: 0.5, start: 0.5, easing: quintOut}}"

transition:draw="{{duration: 5000, delay: 500, easing: quintOut}}"

animate:flip="{{delay: 250, duration: 250}}"

<svelte:self></svelte:self>

<svelte:options />

<svelte:window  />

<svelte:head>

</svelte:head>

<svelte:body  />

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

const { data }: PageProps = $props();

import type { PageData, ActionData } from './$types';

const { data, form }: { data: PageData, form: ActionData } = $props();

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

export const load: PageLoad = async (event) => {
  return {};
};

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

  const { id } = $derived(page.params);
</script>

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

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

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

export const load: PageServerLoad = async (event) => {
  return {};
};

<script lang="ts">
import type { LayoutProps } from './$types';

const { data, children }: LayoutProps = $props();
</script>

{@render children()}

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

export const load: LayoutLoad = async (event) => {
  return {};
};

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

export const load: LayoutServerLoad = async (event) => {
  return {};
};

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

export const actions: Actions = {
  async default() {},
};

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

export const handle: Handle = async ({ event, resolve }) => {
  return resolve(event);
};

json({ data: "" }, { status: 200 });

error(404, { message: "Not found" });

import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";

export const GET: RequestHandler = (async ({ request }: RequestEvent) => {
  return json({ message: "GET" });
});

import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";

export const POST: RequestHandler = (async ({ request }: RequestEvent) => {
  return json({ message: "POST" });
});

import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";

export const PUT: RequestHandler = (async ({ request }: RequestEvent) => {
  return json({ message: "PUT" });
});

import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";

export const DELETE: RequestHandler = (async ({ request }: RequestEvent) => {
  return json({ message: "DELETE" });
});

import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";

export const PATCH: RequestHandler = (async ({ request }: RequestEvent) => {
  return json({ message: "PATCH" });
});

import { browser } from "$app/environment";

if (browser) {
}

import { env } from "$env/dynamic/private";

import { env } from "$env/static/public";

import {  } from '$app/server';

export const getItems = query(schema, async (payload) => {
  
});

export const formName = form(schema, async (payload) => {
  
});

export const commandName = command(schema, async (payload) => {
  
});

let state = $state();

let state = $state.frozen();

$state.snapshot();

$state.is(state1, state2);

const value = $derived();

const value = $derived.by(() => {});

$effect(() => {});

$effect.pre(() => {});

$effect(() => {
  console.log("in effect:", $effect.tracking());
});

const cleanup = $effect.root(() => {
  $effect(() => {});

  return () => {};
});

let value = $state("");

let valueComputed = {
  get value() {
    return value;
  },
  set value(newValue) {
    value = newValue;
  },
};

interface Props {}

let {} = $props();

$host().dispatchEvent();

flushSync(() => {});

export function useCounter() {
  let count = $state(0);

  function increment() {
    count += 1;
  }

  return {
    get count() {
      return count;
    },
    set count(newValue) {
      count = newValue;
    },
    increment,
  };
}

import { writable } from "svelte/store";

export function createCounter() {
  const { subscribe, update } = writable(0);

  function increment() {
    update((count) => count + 1);
  }

  return {
    subscribe,
    increment,
  };
}

setContext("key", "value");

const context = getContext("key");

if (hasContext("key")) {
}

:global() {
}