An introduction to SER | Barekey

Barekey

svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0 t-sidebar-child h-5 px-3 font-heading text-sm font-semibold text-foreground" data-slot="sidebar-group-label" data-sidebar="group-label" style="--sidebar-child-enter-delay: 4ms; --sidebar-child-exit-delay: 148ms">svelte-effect-runtime<br>Introduction<br>Installation<br>Tooling<br>Changelog<br>Your first...<br>Client component<br>Server function<br>Client<br>Dispatcher<br>Remote Functions<br>Query<br>Command<br>Form<br>Prerender<br>RequestEvent<br>Handler<br>Runtimes<br>What are runtimes?<br>Client Runtime<br>Server Runtime<br>Errors Remote failures<br>FormError<br>RemoteValidationError<br>RemoteHttpError<br>RemoteTransportError<br>Compiler and markup<br>RuntimeError<br>PreprocessError<br>AwaitInEffectWorkError<br>AsyncEffectInSyncRuneError<br>AsyncEffectInEventCallbackError<br>YieldStarInEventCallbackError<br>UnsupportedMarkupEffectPositionError<br>Remote handlers<br>RequestEventUnavailableError<br>UncheckedQueryHandlerMissingError<br>BatchQueryHandlerMissingError<br>UncheckedLiveQueryHandlerMissingError<br>UncheckedCommandHandlerMissingError<br>UncheckedFormHandlerMissingError<br>UncheckedPrerenderHandlerMissingError<br>InvalidLiveQueryReturnError<br>EmptyStreamYieldError<br>Runtime lifecycle<br>DispatcherDisposedError<br>RuntimeAlreadyInitializedError<br>Factory calls<br>InvalidQueryFactoryError<br>InvalidLiveQueryFactoryError<br>InvalidCommandFactoryError<br>Form transport<br>RemoteFormEndpointMissingError<br>InvalidRemoteFormResponseError<br>UnsupportedRemoteFormResponseError<br>RemoteErrorDecodeError<br>Integration<br>ServerOnlyImportError<br>SvelteKitServerExportUnavailableError<br>RemoteHelperContextError<br>RemoteHelperError

Toggle Sidebar

Toggle Sidebar<br>On this page

Introduction<br>SER introduces native-like effect code execution in Svelte for SvelteKit.

✋ Are you AI?

You would be better off requesting this URL with Accept: text/markdown, or appending .md to the URL to fetch the source file. Good luck!

svelte-effect-runtime is a Vite plugin for SvelteKit that enables native Effect.ts execution on both the client and the server.<br>+page.svelte Copied to clipboard.

script lang="ts" effect><br>import * as StockCard from "./ticker-card.ts";<br>import { GetAllStocks, GetLivePrice } from "./tickers.remote.ts";<br>import { GetUser } from "user.ts";<br>script>

ScrollArea><br>{const currency = $derived((yield* GetUser()).preferredCurrency)}

{#each yield* GetAllStocks() as stock}<br>{const liveQuery = yield* GetLivePrice(stock.ticker)}<br>{const price = $derived(liveQuery.current ?? stock.initialPrice)}

StockCard.Root><br>StockCard.Header>{stock.name}StockCard.Header><br>StockCard.Price>{price} {currency.displayName}StockCard.Price><br>StockCard.Root><br>{/each}<br>ScrollArea>

If this interests you, or you already use Effect.ts on the backend and want to bring it to the frontend, svelte-effect-runtime is a perfect fit.<br>SER abbreviation

Going deeper, documentation for svelte-effect-runtime will refer to the project as SER.

Licensing Copied link.

SER is released under the BSD 3-Clause License, an open-source license approved by the Open Source Initiative and recognized as free software by the Free Software Foundation.<br>Contributors Copied link.

Thanks to all the contributors!<br>Loading contributors...