DEV Community: Jonathan Gamble

SvelteKit Remote Functions Workaround Helpers

Jonathan Gamble — Sun, 07 Dec 2025 23:48:43 +0000

If you're like me, you've been waiting for Remote Functions in SvelteKit for a long... long time... and they are awesome!

It will be extremely hard to ever go back. Even though they are still experimental, the time they save is priceless.

However, not every feature is ready. So, I am posting a list of them, and their workarounds, and their status.

1. Submit Type

This is the least important, but needed. You may want to declare your enhance function outside the component template.

In form actions, you use types like this:

import type { SubmitFunction } from '@sveltejs/kit';

const onSubmit: SubmitFunction<MyFormType> = async ({ formElement }) => {
...

<form method="POST" action="/" use:enhance={onSubmit}>

There isn't a direct import for SubmitFunction, so you can derive it.

type SubmitRemoteFunction = Parameters<typeof myForm.enhance>[0];

const onSubmit: SubmitRemoteFunction = async ({ submit }) => {
    try {
        await submit();
    } catch (error) {
        console.error(error);
    }
};

<form {...myForm.preflight(myFormSchema).enhance(onSubmit)}>

Issue Tracker

2. Form Data

Again, super small, but there is no formData passed. However, you can easily derive it.

const onSubmit: SubmitRemoteFunction = async ({ submit, form }) => {
    const formData = new FormData(form);
    // optional
    const data = Object.fromEntries(formData);
    // You shouldn't need this since everything is available
    // in the form rune itself, but you never know...

Issue Tracker

3. Set Initial Data

Currently, the docs say to set the initial data by using fields.set. However, this is not dynamic, and will cause a state_referenced_locally error.

It also won't automatically set the values on updates. Here is a fix.

import type { RemoteForm, RemoteFormInput } from "@sveltejs/kit";

export function initForm<T extends RemoteFormInput, R = unknown>(
  form: RemoteForm<T, R>,
  getter: () => Parameters<typeof form.fields.set>[0]
) {

  let hydrated = false;

  form.fields.set(getter());

  $effect(() => {

    const values = getter();

    if (!hydrated) {
      hydrated = true;
      return;
    }

    form.fields.set(values);
  });
};

This will properly hydrate the form, while keeping it reactive. It will NOT run extraneously on hydration, but will be reactive.

Usage

initForm(updateChapterForm, () => ({
    courseId: initialData.course_id,
    chapterId: initialData.id,
    title: initialData.title
}));

Issue Tracker for this to be fixed.

Update - 12/27/25

I also created a reusable function for updating a value. This also helps when crossing boundaries.

export const useSync = <T>(
    getter: () => T,
    setter: (value: T) => void
) => {

    let hydrated = false;

    setter(getter());

    $effect(() => {

        const values = getter();

        if (!hydrated) {
            hydrated = true;
            return;
        }

        setter(values);
    });
};

And you can use it in this case like so:

useSync(
    () => initialData,
    (value) => myForm.fields.set(value)
);

4. Form Debug

This is not an issue, but a helper. We need a component to print the active form data for development similar to SuperForms (but actually uses runes instead of stores):

<script lang="ts" generics="T extends RemoteFormInput">
    import type { RemoteFormFields, RemoteFormInput } from '@sveltejs/kit';
    import type { RemoteForm } from '@sveltejs/kit';

    const { form }: { form: RemoteForm<T, unknown> } = $props();

    const fields = $derived(form.fields as RemoteFormFields<RemoteFormInput>);
</script>

<pre
    class="mt-4 max-h-96 overflow-auto rounded-lg bg-gray-900 p-4 text-sm wrap-break-word whitespace-pre-wrap text-green-300">
{JSON.stringify(
        {
            values: fields.value(),
            issues: fields.allIssues()
        },
        null,
        2
    )}
</pre>

You can use it like so:

<FormDebug form={updateChapterForm} />

No Issue Tracker, as it is just a tool.

4. Touched

While there is no touched or pristine yet, I made a hook. However, this only works on the entire form, not individual fields. If anyone wants to build a hook, let me know, but hopefully this gets implemented sooner than later internally.

import type { RemoteForm, RemoteFormInput } from "@sveltejs/kit";

export const useTouched = <T extends void | RemoteFormInput, R = unknown>
(form: RemoteForm<T, R>) => {
    const initialValue = JSON.stringify(form.fields.value());
    return {
        get touched() {
            return JSON.stringify(form.fields.value()) !== initialValue;
        }
    }
};

Usage:

const touchForm = useTouched(myForm);
const isSubmitting = $derived(!!myForm.pending);
const isValid = $derived(!myForm.fields.allIssues() && touchForm.touched);

// touchForm.touched

Note: For just validating, you can also use:

oninput={() => profileForm.validate({
  includeUntouched: true
})}

This will validate all fields.

Issue Tracker

5. Client Only Forms

You can validate first with preflight, but you MUST have a remote function to use forms in SvelteKit. This would be a great addition to Svelte alone, as we need to be able to call external APIs that may use external fetch etc. Firebase JS SDK is a great example of this.

// profile.remote.ts

import { form } from "$app/server";
import { profileSchema } from "./profile-schema";

export const profileForm = form(profileSchema, () => {});

Usage:

<script lang="ts">
    import { profileSchema } from '$lib/profile-schema';
    import { profileForm } from '$lib/profile.remote';

    type SubmitRemoteFunction = Parameters<typeof profileForm.enhance>[0];

    const onSubmit: SubmitRemoteFunction = async ({ data }) => {
        alert('Profile updated successfully with: ' + JSON.stringify(data));
    };
</script>

<form {...profileForm.preflight(profileSchema).enhance(onSubmit)}>
<input 
  {...profileForm.fields.name.as('text')}
  oninput={() => profileForm.validate({
    preflightOnly: true
  })}
/>
</form>

Just use it as expected, but don't actually do anything on the server.

The preflightOnly option prevents a server call.
This currently requires an empty Remote Function.

I made a repo for a better example.

Repo: GitHub

Issue Tracker

6. Caching Problems

There seems to be a problem in some cicrumstances where the form caches values, even on page navigation changes. This may not be what you want. In that case, you can create individual form components using for.

const id = $props.id();
const myFormInstance = myForm.for(id);

Issue #1
Issue #2
Issue #3
Issue #4

7. Streaming Support

Currently, Remote Functions do NOT support streaming. The ONLY work around is to just use a page loader function.

Issue Tracker

And that is all I have for now, just wanted to put all these in one place.

Let me know your work arounds for now!

Links

SvelteKit SurrealDB Login with GitHub

Jonathan Gamble — Sun, 30 Nov 2025 18:32:34 +0000

I wanted to make a working proof of concept that you can login with an oAuth provider directly in the database.

To be clear:

Surreal Database should have this built in, and I am hoping they will in the future just like Gel, Firebase and Supabase!

Thanks to Zorimyll for pseudocode in Discord.

TL;DR

I make a fully working SurrealDB SvelteKit login with GitHub button that automatically merges with existing users and their email! See Repo.

Pre-Config

We must first get rid of the username concept from this first post, and use email. This means refactoring all username references to email. This includes using valibot v.email() and type="email" in the inputs. For sake of time, I'm not going to do that here, but you can view the source code below to see the changes.

If you want to add the username capability, it should be optional in this scenario.
Forgot Password is a feature this needs, but we would need to setup an email provider for that (maybe in a later post).
I also didn't add the emailConfirmed field, which may be useful.

Schema

-- =====================================
-- USERS TABLE
-- =====================================

DEFINE TABLE users SCHEMAFULL
    PERMISSIONS
        FOR select WHERE $auth.id = id OR $auth.role = 'admin'
        FOR create, update, delete WHERE $auth.role = 'admin' OR $auth.scope = 'auth';

DEFINE FIELD email
    ON TABLE users
    TYPE string
    ASSERT $value != '' AND string::is::email($value)
    PERMISSIONS
        FOR select, create, update, delete FULL;

DEFINE FIELD password
    ON TABLE users
    TYPE string
    ASSERT $value != ''
    PERMISSIONS
        FOR select, create, update, delete FULL;

DEFINE FIELD name
    ON TABLE users
    TYPE option<string>
    PERMISSIONS
        FOR select, create, update, delete FULL;

DEFINE FIELD avatar_url
    ON TABLE users
    TYPE option<string>
    PERMISSIONS
        FOR select, create, update, delete FULL;

DEFINE FIELD OVERWRITE created_at
  ON TABLE users
  TYPE datetime
  DEFAULT time::now()
    PERMISSIONS
        FOR select, create, update, delete FULL;

DEFINE FIELD OVERWRITE updated_at
    ON TABLE users
    TYPE datetime
    VALUE time::now()
    PERMISSIONS
        FOR select, create, update, delete FULL;

DEFINE INDEX users_email_unique
    ON TABLE users
    COLUMNS email
    UNIQUE;

DEFINE ACCESS OVERWRITE user
    ON DATABASE
    TYPE RECORD
    SIGNUP (
        CREATE users CONTENT {
            email:    string::lowercase($email),
            password: crypto::argon2::generate($password)
        } RETURN AFTER
    )
    SIGNIN (
        SELECT * FROM users
        WHERE email = string::lowercase($email)
          AND crypto::argon2::compare(password, $password)
        LIMIT 1
    )
    DURATION
        FOR TOKEN 1h,
        FOR SESSION NONE;

-- =====================================
-- AUTH_ACCOUNTS TABLE
-- (per provider login -> user)
-- =====================================

DEFINE TABLE auth_accounts SCHEMAFULL
    PERMISSIONS
        FOR select WHERE $auth.role = 'admin' OR $auth.scope = 'auth'
        FOR create, update, delete WHERE $auth.role = 'admin' OR $auth.scope = 'auth';

DEFINE FIELD user
    ON TABLE auth_accounts
    TYPE record<users>
    ASSERT $value != NONE
    PERMISSIONS
        FOR select, create, update, delete FULL;

DEFINE FIELD provider
    ON TABLE auth_accounts
    TYPE string
    ASSERT $value != ''
    PERMISSIONS
        FOR select, create, update, delete FULL;

DEFINE FIELD provider_id
    ON TABLE auth_accounts
    TYPE string
    ASSERT $value != ''
    PERMISSIONS
        FOR select, create, update, delete FULL;

DEFINE FIELD created_at
    ON TABLE auth_accounts
    TYPE datetime
    DEFAULT time::now()
    PERMISSIONS
        FOR select, create, update, delete FULL;

DEFINE INDEX auth_accounts_provider_unique
    ON TABLE auth_accounts
    COLUMNS provider, provider_id
    UNIQUE;

DEFINE INDEX auth_accounts_user_idx
    ON TABLE auth_accounts
    COLUMNS user;

-- =====================================
-- AUTH_PROVIDERS TABLE
-- (stores client/secret for GitHub etc.)
-- =====================================

DEFINE TABLE auth_providers SCHEMAFULL
    PERMISSIONS
        FOR select WHERE $auth.role = 'admin' OR $auth.scope = 'auth'
        FOR create, update, delete WHERE $auth.role = 'admin';

DEFINE FIELD provider
    ON TABLE auth_providers
    TYPE string
    ASSERT $value != ''
    PERMISSIONS
        FOR select, create, update, delete FULL;

DEFINE FIELD client_id
    ON TABLE auth_providers
    TYPE string
    ASSERT $value != ''
    PERMISSIONS
        FOR select, create, update, delete FULL;

DEFINE FIELD client_secret
    ON TABLE auth_providers
    TYPE string
    ASSERT $value != ''
    PERMISSIONS
        FOR select, create, update, delete FULL;

DEFINE INDEX auth_providers_provider_unique
    ON TABLE auth_providers
    COLUMNS provider
    UNIQUE;

DEFINE FUNCTION OVERWRITE fn::github_login(
    $code: string
) {
    ------------------------------------------------------------
    -- 0) Load GitHub OAuth config from auth_providers
    ------------------------------------------------------------
    LET $provider = (
        SELECT client_id, client_secret
        FROM auth_providers
        WHERE provider = "github"
        LIMIT 1
    )[0];

    IF $provider = NONE {
        THROW {
            stage:   "missing_github_config",
            message: "No auth_providers row found for provider 'github'"
        };
    };

    IF $provider.client_id = NONE OR $provider.client_secret = NONE {
        THROW {
            stage:   "invalid_github_config",
            message: "auth_providers.github is missing client_id or client_secret",
            provider: $provider
        };
    };

    LET $github_client_id  = $provider.client_id;
    LET $github_secret_id  = $provider.client_secret;

    ------------------------------------------------------------
    -- 1) Exchange code for access token
    ------------------------------------------------------------
    LET $token_res = http::post(
        "https://github.com/login/oauth/access_token",
        {
            "client_id":     $github_client_id,
            "client_secret": $github_secret_id,
            "code":          $code
        },
        {
            "Accept": "application/vnd.github+json"
        }
    );

    IF $token_res = NONE {
        THROW {
            stage:   "token_request_failed",
            message: "GitHub /access_token returned NONE",
            token_res: $token_res
        };
    };

    LET $access_token = $token_res.access_token;

    IF $access_token = NONE {
        THROW {
            stage:   "missing_access_token",
            message: "GitHub did not return access_token",
            token_res: $token_res
        };
    };

    ------------------------------------------------------------
    -- 2) Fetch GitHub user profile
    ------------------------------------------------------------
    LET $headers = {
        "Accept":       "application/vnd.github+json",
        "Authorization": string::concat("Bearer ", $access_token)
    };

    LET $u = http::get("https://api.github.com/user", $headers);

    IF $u = NONE {
        THROW {
            stage:   "user_fetch_failed",
            message: "GitHub /user returned NONE",
            token_res: $token_res
        };
    };

    IF $u.id = NONE {
        THROW {
            stage:   "missing_github_id",
            message: "GitHub user has no id",
            user: $u
        };
    };

    ------------------------------------------------------------
    -- 3) Require email
    ------------------------------------------------------------
    IF $u.email = NONE {
        THROW {
            stage:   "missing_email",
            message: "GitHub account has no public email associated",
            user: $u
        };
    };

    LET $email     = string::lowercase($u.email);
    LET $github_id = type::string($u.id);

    ------------------------------------------------------------
    -- 4) If GitHub account already linked → load & return user
    ------------------------------------------------------------
    LET $existing_account = (
        SELECT *
        FROM auth_accounts
        WHERE provider    = "github"
          AND provider_id = $github_id
        LIMIT 1
    )[0];

    IF $existing_account != NONE {
        IF $existing_account.user = NONE {
            THROW {
                stage:   "linked_account_missing_user_ref",
                message: "auth_account exists but has no user field",
                account: $existing_account
            };
        };

        LET $user_from_account = (
            SELECT *
            FROM $existing_account.user
            LIMIT 1
        )[0];

        IF $user_from_account = NONE {
            THROW {
                stage:   "linked_account_missing_user",
                message: "auth_account exists but user record not found",
                account: $existing_account
            };
        };

        RETURN $user_from_account;
    };

    ------------------------------------------------------------
    -- 5) No auth_account yet → try to find user by email
    ------------------------------------------------------------
    LET $existing_user = (
        SELECT *
        FROM users
        WHERE email = $email
        LIMIT 1
    )[0];

    IF $existing_user != NONE {
        LET $linked_auth_account = (
            CREATE auth_accounts CONTENT {
                user:        $existing_user.id,
                provider:    "github",
                provider_id: $github_id
            } RETURN AFTER
        )[0];

        IF $linked_auth_account = NONE OR $linked_auth_account.id = NONE {
            THROW {
                stage:   "auth_account_link_existing_failed",
                message: "Failed to create auth_accounts row for existing user",
                user:    $existing_user
            };
        };

        RETURN $existing_user;
    };

    ------------------------------------------------------------
    -- 6) Still no user → create new user, link, return
    ------------------------------------------------------------
    LET $new_user = (
        CREATE users CONTENT {
            email:      $email,
            name:       $u.name,
            avatar_url: $u.avatar_url,
            password:   rand::string(32)
        } RETURN AFTER
    )[0];

    IF $new_user = NONE {
        THROW {
            stage:       "user_creation_failed",
            message:     "Failed to create user record from GitHub data",
            github_user: $u
        };
    };

    IF $new_user.id = NONE {
        THROW {
            stage:   "user_creation_missing_id",
            message: "Created users row has no id",
            user:    $new_user
        };
    };

    LET $new_auth_account = (
        CREATE auth_accounts CONTENT {
            user:        $new_user.id,
            provider:    "github",
            provider_id: $github_id
        } RETURN AFTER
    )[0];

    IF $new_auth_account = NONE OR $new_auth_account.id = NONE {
        THROW {
            stage:   "auth_account_creation_failed",
            message: "Failed to create auth_accounts row for new user",
            user:    $new_user
        };
    };

    RETURN $new_user;
};

DEFINE ACCESS OVERWRITE github ON DATABASE TYPE RECORD
    SIGNUP (
        fn::github_login($code)
    )
    SIGNIN (
        fn::github_login($code)
    )
    DURATION
        FOR TOKEN 1h,
        FOR SESSION NONE;
;

We have three main tables: users, auth_accounts, and auth_providers.

users is self-explanator
auth_accounts allows us to have multiple providers
auth_providers saves our client_id and client_secret. Surreal Cloud DOES NOT allow you to have environment variables, plus this could be helpful if you have an admin panel where you could update this.

GitHub Secret and Client ID

We must first create a GitHub oAuth App under GitHub Developer Settings. Save the client_secret and client_id. You can't get the secret later. You will also need two different apps for production and development.

For this purpose, make sure the callback URL is set to http://localhost:5173/auth/callback or whatever is relevant to your framework.

Insert Data

There are no environment variables in Surreal, but we can save our data in a safe table we just created. This allows it to be available safely to any client.

CREATE auth_providers SET
    provider = "github",
    client_id = "<YOUR_GITHUB_CLIENT_ID>",
    client_secret = "<YOUR_GITHUB_CLIENT_SECRET>";

GitHub Login

The key to the entire schema is the gitHub_login method.

It takes a code and gets an access token
It takes the access token and gets an email (must have email scope)
It gets the github ID and email and saves it to the database
I tried to throw every possible error for debugging purposes
It should be safe client side so that you can login from anywhere

Allow GitHub in the Network

Make sure to add allowed network calls in your Surreal Instance setup

api.github.com
github.com

SvelteKit Changes

We added a callbackURL and some oauth credential management to our surrealServer setup.

export function surrealServer({
    cookies: { cookieName, setCookie, getCookie },
    credentials: { url, namespace, database },
    oauth: {
        github: {
            client_id: github_client_id
        }
    },
    callbackURL
}: {
    cookies: {
        cookieName?: string;
        setCookie: SetCoookieFn;
        getCookie: GetCookieFn;
    };
    oauth: {
        github: {
            client_id: string;
        }
    };
    credentials: {
        url: string;
        namespace: string;
        database: string;
    };
    callbackURL: string
}) {

Which can be called like this in our hooks.

export const handle: Handle = async ({ event, resolve }) => {
    event.locals.surreal = surrealServer({
        cookies: {
            setCookie: (name, value, options) => event.cookies.set(name, value, options),
            getCookie: (name) => event.cookies.get(name)
        },
        credentials: {
            url: config.url,
            namespace: config.namespace,
            database: config.database
        },
        oauth: {
            github: {
                client_id: PUBLIC_GITHUB_CLIENT_ID
            }
        },
        callbackURL: event.url.origin + '/auth/callback'
    });

    return resolve(event);
};

We only need the client_id to generate the login with GitHub URL.

Connection

We create a sign in function.

export async function surrealGHLogin({
    db,
    namespace,
    database,
    code
}: {
    db: Surreal;
    namespace: string;
    database: string;
    code: string;
}) {
    try {
        const signinData = await db.signin({
            namespace,
            database,
            variables: {
                code
            },
            access: 'github'
        });

        return {
            data: signinData,
            error: null
        };
    } catch (e) {
        if (e instanceof SurrealDbError) {
            console.log(e.message);
            return {
                data: null,
                error: e
            };
        }

        if (e instanceof Error) {
            return {
                data: null,
                error: e
            };
        }

        return {
            data: null,
            error: new Error('Unknown error during login')
        };
    }
}

And we call it inside our Surreal Server instance just like our other login methods.

async function loginWithCallback(url: URL) {

    logout();

    const code = url.searchParams.get('code');
    const state = url.searchParams.get('state');

    if (!code) {
        return {
            data: null,
            error: new Error('Missing authorization code')
        };
    }

    let next = '/';

    try {
        const parsed = state && JSON.parse(state);
        next = parsed?.next ?? '/';
    } catch { /* empty */ }

    const { data: db, error: dbError } = await connect();

    if (dbError) {
        return {
            data: null,
            error: dbError
        };
    }

    const { data: token, error: loginError } = await surrealGHLogin({
        db,
        namespace,
        database,
        code
    });

    if (loginError) {
        return {
            data: null,
            error: loginError
        };
    }

    setCookie(tokenName, token, TOKEN_COOKIE_OPTIONS);

    return {
        data: next,
        error: null
    };
}

And call it in the /auth/callback route.

import type { PageServerLoad } from './$types';
import { redirect, error } from '@sveltejs/kit';


export const load = (async ({ url, locals: { surreal } }) => {

    const {
        data: next,
        error: loginError
    } = await surreal.loginWithCallback(url);

    if (loginError) {
        error(400, loginError.message);
    }

    redirect(303, next);

}) satisfies PageServerLoad;

We get the code and next path from the URL. Then we login and save the session.

Create the Redirect

Working backwards, we have to create the redirect in order to login.

export function createGitHubOAuthLoginUrl(
    redirect_uri: string,
    path: string,
    client_id: string,
    customParameters?: Record<string, string>,
    addScopes?: string[]
) {
    // Build scope string with default scopes and additional ones
    const baseScopes = ['read:user', 'user:email'];
    const scopes = addScopes ? [...baseScopes, ...addScopes] : baseScopes;

    const params: Record<string, string> = {
        client_id,
        redirect_uri,
        scope: scopes.join(' '),
        state: JSON.stringify({
            next: path,
            provider: 'github'
        })
    };

    // Add custom parameters if provided (e.g., 'login', 'allow_signup')
    if (customParameters) {
        Object.assign(params, customParameters);
    }

    return new URL(
        'https://github.com/login/oauth/authorize?' + new URLSearchParams(params).toString()
    ).toString();
}

It is customizable, must require an email, and saves our next path to the state.

It can then be accessed in our server:

function getGitHubURL(next: string) {
    return createGitHubOAuthLoginUrl(
        callbackURL,
        next,
        github_client_id
    );
}

And called from the form action:

github: async ({ request, locals: { surreal } }) => {

    const formData = await request.formData();

    const next = formData.get('next') || '/';

    if (typeof next !== 'string') {
        error(500, 'Invalid form data');
    }

    const githubURL = surreal.getGitHubURL(next);

    redirect(303, githubURL);
}

And that's it! A working login with GitHub.

We could equally add any provider in the same way, and it will automatically link the providers by email!

Until next time...

Repo: GitHub

Using OG Image Outside of Node

Jonathan Gamble — Sat, 29 Nov 2025 23:38:43 +0000

The future of JavaScript on the server is NOT just NodeJS. We have Bun, Deno, and Cloudflare.

I've been trying to get Vercel's og/image package to deploy outside of NextJS and Vercel for a long time; particularly I wanted it to work on SvelteKit and Cloudflare.

But... finally... I mean, finally... we have it.

TL;DR

I provide demo and source code for getting og/image to work in NextJS, SvelteKit, Nuxt, and AnalogJS in different edge environments.

Let's see what every option for deployment and framework looks like:

Serverless Functions

If you're deploying to regular Serverless functions that use NodeJS, you shouldn't have any problems with packages.

NextJS - next/og or vercel/og
AnalogJS - @analogjs/content/og
SvelteKit - @ethercorps/sveltekit-og - Can pass Svelte Component
QwikJS - og-img
SolidStart - og-img
Astro - og-img - see also images
Nuxt - nuxt-og-image - predefined image, no customization
Cloudflare - workers-og - No Framework

NextJS and Vercel Edge

@vercel/og was built for NextJS, so it works out of the box. Use vercel/og for pages directory, or next/og for the new app directory API endpoint.

import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET() {

    try {
        return new ImageResponse(
            (
                <div
                    style={{
                        height: '100%',
                        width: '100%',
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'center',
                        backgroundColor: 'white',
                        padding: '40px',
                    }}
                >
                    <div
                        style={
                            {
                                fontSize: 60,
                                fontWeight: 'bold',
                                color: 'black',
                                textAlign: 'center',
                            }
                        }
                    >
                        Welcome to My Site
                    </div>
                    < div
                        style={{
                            fontSize: 30,
                            color: '#666',
                            marginTop: '20px',
                        }
                        }
                    >
                        Generated with Next.js ImageResponse
                    </div>
                </div>
            ),
            {
                width: 1200,
                height: 630,
            }
        )
    } catch (e) {
        console.log(`${(e as Error).message}`)
        return new Response(`Failed to generate the image`, {
            status: 500,
        })
    }
}

Repo: GitHub
Demo: Vercel Edge

As you can imagine, it works out of the box!

NextJS and Cloudflare

In order to use NextJS on Cloudflare, you must install OpenNext. og/next also works here out of the box!

With the core original ImageResponse plugin, you can use tailwind instead of styles with the tw attribute.

import { ImageResponse } from "next/og";


export async function GET() {

  return new ImageResponse(
    <div tw="flex h-full w-full flex-col items-center justify-center
 bg-white p-10">
      <div tw="text-center text-[60px] font-bold text-black">
        Welcome to My Site
      </div>
      <div tw="mt-5 text-[30px] text-gray-600">
        Generated with NextJS ImageResponse and deployed to Cloudflare
      </div>
    </div>
  );
}

Repo: GitHub
Demo: Cloudflare

SvelteKit and Vercel Edge

Recently, the creator of @cf-wasm/og was kind enough to get it working for SvelteKit!

I copied the ideas from @ethercorps/sveltekit-og and made it so you can pass in a Svelte component directly!

image-card.svelte

You can call the component whatever you want. This package also uses satori-html, which automatically converts class with tailwind, to tw and react JSX under the hood. You can create variables, and pass them as well if you like!

<script lang="ts">
  const { title, website }: { title?: string; website?: string } = $props();
</script>

<div
  class="bg-slate-50 text-slate-700 w-full h-full flex items-center 
justify-center p-6"
>
  <div
    class="m-1.5 p-6 w-full h-full rounded-3xl text-[72px] flex flex-col
 border-2 border-slate-700 text-slate-700"
  >
    {title?.slice(0, 80) || "Default Title"}
    <hr class="border border-slate-700 w-full" />
    <p class="text-[52px] font-bold flex justify-center text-slate-700">
      {website || "Default Website"}
    </p>
  </div>
</div>

image-response.ts

import type { Component } from 'svelte';
import { render } from 'svelte/server';
import { ImageResponse as OGImageResponse } from '@cf-wasm/og';
import { html } from 'satori-html';

export const prerender = false;

export const ImageResponse = async <T extends Record<string, unknown>>(
    component: Component<T>,
    options?: ConstructorParameters<typeof OGImageResponse>['1'],
    props?: T
) => {
    const result = render(component as Component, { props });
    return await OGImageResponse.async(html(result.body), options);
};

/og/+server.ts

import { type RequestHandler } from "@sveltejs/kit";
import { ImageResponse } from "$lib/image-response";
import ImageCard from "$lib/image-card.svelte";


export const prerender = false;


export const GET = (async ({ url }) => {

  const { width, height } = Object.fromEntries(url.searchParams);

  return await ImageResponse(
    ImageCard,
    {
      width: Number(width) || 1600,
      height: Number(height) || 900
    },
    {
      title: 'Custom OG Image',
      website: 'Generated with Svelte, Vercel, and Cloudflare WASM!'
    }
  );

}) satisfies RequestHandler;

@ethercorps/sveltekit-og also now works on the Edge, but I wouldn't recommend it until the bundle is smaller problem is fixed.

Demo: Vercel Edge
Repo: GitHub

As a SvelteKit developer, I'm supper happy about this one!

SvelteKit and Cloudflare

You can also get it to work on Cloudflare with a few caveats.

Import from workered

import { ImageResponse as OGImageResponse } from '@cf-wasm/og/workerd';

Use Custom Vite Plugin

import tailwindcss from '@tailwindcss/vite';
import devtoolsJson from 'vite-plugin-devtools-json';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
import cloudflareModules from '@cf-wasm/plugins/vite-additional-modules';

export default defineConfig({
    ssr: {
        noExternal: [/@cf-wasm\/.*/]
    },
    plugins: [
        tailwindcss(),
        sveltekit(),
        devtoolsJson(),
        cloudflareModules({ target: "edge-light" })
    ]
});

Repo: GitHub
Demo: Cloudflare

Nuxt and Vercel Edge

The Nuxt-SEO plugin works out of the box, however, there is a current bug where it won't deploy on Cloudflare or Vercel Edge correctly. You can downgrade to v5.1.9 to get this to work. However, it is a premade image that does not allow you to customize the style.

Thankfully, you can use the same @cf-wasm/og plugin to work in Nuxt!

OG Component

Like the SvelteKit version, you can write you code directly in a Vue Component!

<script setup lang="ts">
defineProps<{ title: string }>()
</script>


<template>
  <div
    class="flex h-full w-full flex-col items-center justify-center
 bg-white p-10"
  >
    <div class="text-center text-[60px] font-bold text-black">
      {{ title }}
    </div>
    <div class="mt-5 text-[30px] text-gray-600">
      Generated with Nuxt ImageResponse and deployed to Vercel Edge
    </div>
  </div>
</template>

og.get.ts

You must import the component and render it in the server endpoint.

import { ImageResponse } from '@cf-wasm/og';
import { html } from 'satori-html';
import { createSSRApp, h } from 'vue';
import { renderToString } from 'vue/server-renderer';
import Og from '~/components/og.vue';


export default defineEventHandler(async () => {

    const app = createSSRApp({
        render: () => h(Og, { title : 'Welcome to My Image' })
    })

    const data = await renderToString(app)

    return ImageResponse.async(html(data), {
        width: 1200,
        height: 630
    })
})

Nuxt Config

Make sure to install, and add the @vitejs/plugin-vue and use the @cf-wasm/plugin.

// https://nuxt.com/docs/api/configuration/nuxt-config
import additionalModules from "@cf-wasm/plugins/nitro-additional-modules"
import vue from "@vitejs/plugin-vue"

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  nitro: {
    preset: 'vercel-edge',
    modules: [additionalModules({ target: "edge-light" })],
    rollupConfig: {
      plugins: [vue()]
    }
  }
})

Repo: GitHub
Demo: Vercel Edge

Nuxt and Cloudflare

You can deploy to Cloudflare with a small change:

import { ImageResponse } from '@cf-wasm/og';

and

// https://nuxt.com/docs/api/configuration/nuxt-config
import additionalModules from "@cf-wasm/plugins/nitro-additional-modules"
import vue from "@vitejs/plugin-vue"

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  nitro: {
    preset: 'cloudflare-module',
    modules: [additionalModules({ target: "edge-light" })],
    rollupConfig: {
      plugins: [vue()]
    }
  }
})

Repo: GitHub
Demo: Cloudflare

AnalogJS and Cloudflare

Analog works similarly thanks to @cf-wasm/og again!

Vite Config

/// <reference types="vitest" />

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';
import tailwindcss from '@tailwindcss/vite';
import additionalModules from "@cf-wasm/plugins/nitro-additional-modules"

// https://vitejs.dev/config/


export default defineConfig(() => ({
  build: {
    target: ['es2020'],
  },
  resolve: {
    mainFields: ['module'],
  },
  plugins: [
    analog({
      ssr: true,
      static: false,
      nitro: {
        preset: 'cloudflare-module',
        cloudflare: {
          deployConfig: true,
          nodeCompat: true
        },
        modules: [additionalModules({ target: "edge-light" })],
        compatibilityDate: "2025-07-15"
      }
    }),
    tailwindcss()
  ]
}));

and import from:

import { ImageResponse } from '@cf-wasm/og';

Repo: GitHub
Demo: Cloudflare

AnalogJS and Vercel Edge

/// <reference types="vitest" />

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';
import tailwindcss from '@tailwindcss/vite';
import additionalModules from "@cf-wasm/plugins/nitro-additional-modules"

// https://vitejs.dev/config/


export default defineConfig(() => ({
  build: {
    target: ['es2020'],
  },
  resolve: {
    mainFields: ['module'],
  },
  plugins: [
    analog({
      ssr: false,
      static: false,
      nitro: {
        preset: 'vercel-edge',
        modules: [additionalModules({ target: "edge-light" })],
        compatibilityDate: "2025-07-15"
      }
    }),
    tailwindcss()
  ]
}));

Repo: GitHub
Demo: Vercel Edge

Bonus - SvelteKit with Vercel Bun

Vercel bun works as expected with @vercel/og! No workarounds. However, there is currently a satori-html Bun bug if you're NOT using JSX. I assume it will be fixed in the coming weeks. Either way, Vercel Bun is currently still experimental.

I used AI to create a small satori parser, but don't count on it to work for anything complicated.

Image Response

import type { Component } from 'svelte';
import { render } from 'svelte/server';
import { ImageResponse as OGImageResponse } from '@vercel/og';
import { htmlToOgStrict as html } from './parse-html';
//import { html } from 'satori-html';

// https://github.com/oven-sh/bun/pull/15047

export const prerender = false;


export const ImageResponse = <T extends Record<string, unknown>>(
    component: Component<T>,
    options?: ConstructorParameters<typeof OGImageResponse>['1'],
    props?: T
) => {
    const result = render(component as Component, { props });
    return new OGImageResponse(html(result.body), options);
};

Repo: GitHub
Demo: Vercel Bun

Deno Deployments

Netlify and Supabase Edge Functions currently use Deno under the hood.

Deno has an ImageResponse that works in Supabase and should equally work for Netlify deployments.

I didn't create a demo, but you shouldn't have any issues.

Other Frameworks

I have not tested anything on SolidStart, TanStack Start, or React Router. I am personally not a React fan, but it is probably easier to get them to work than other frameworks. SolidStart uses Nitro, so it should be similar. Qwik 2 will probably use Nitro when it is released as well.

Please let me know if you test other frameworks in non-Node environments, and I will post it here.

Vercel Edge Sunsetting?

It has recently come to my attention that Vercel Edge is going away, sort of. SvelteKit and Nitro have marked the Edge option as soon to be depreciated.

What is interesting to me, is there is nothing in NextJS about depreciation, BUT there is a recommendation to migrate away from the Edge Runtime.

According to a Vercel team member, it will probably never go away, but will just stick in maintenance mode... which maybe the same thing.

Summary

You can now deploy everywhere the og/image, there just may be a few configurations.

Thank you Deo for your hard work on this and helping me debug!

SvelteKit Surreal Database Authentication

Jonathan Gamble — Sat, 22 Nov 2025 00:58:05 +0000

TL;DR

I created a login for Surreal Database and SvelteKit. The core server function can be reused in ANY TS SSR Framework!

Setup

Create a new SvelteKit project with TS.

npx sv create surreal-auth

Install latest version of Surreal JS. I am not using alpha for this demo.

npm i -D surrealdb

Surreal JS SDK

Unfortunately, you must manually handle errors with try and catch. I am hoping to get this fixed with destructuring. Here I created some helper functions to remedy this and put all the database functions in one place.

Connect

export async function surrealConnect({
    namespace,
    database,
    url
}: {
    namespace: string,
    database: string,
    url: string
}) {

    const db = new Surreal();

    try {

        await db.connect(url, {
            namespace,
            database
        });

    } catch (e) {

        if (e instanceof SurrealDbError) {
            return {
                data: null,
                error: e
            };
        }

        if (e instanceof Error) {
            return {
                data: null,
                error: e
            };
        }

        return {
            data: null,
            error: new Error('Unknown error during SurrealDB connection')
        };
    }
    return {
        data: db,
        error: null
    };
}

Login

export async function surrealLogin({
    db,
    namespace,
    database,
    username,
    password
}: {
    db: Surreal,
    namespace: string,
    database: string,
    username: string,
    password: string
}) {

    try {

        const signinData = await db.signin({
            namespace,
            database,
            variables: {
                username,
                password
            },
            access: 'user'
        });

        return {
            data: signinData,
            error: null
        };

    } catch (e) {

        if (e instanceof SurrealDbError) {
            return {
                data: null,
                error: e
            };
        }

        if (e instanceof Error) {
            return {
                data: null,
                error: e
            };
        }

        return {
            data: null,
            error: new Error('Unknown error during login')
        };
    }
};

Register

export async function surrealRegister({
    db,
    namespace,
    database,
    username,
    password
}: {
    db: Surreal,
    namespace: string,
    database: string,
    username: string,
    password: string
}) {

    try {

        const signupData = await db.signup({
            namespace,
            database,
            variables: {
                username,
                password
            },
            access: 'user'
        });

        return {
            data: signupData,
            error: null
        };

    } catch (e) {

        if (e instanceof SurrealDbError) {
            return {
                data: null,
                error: e
            };
        }

        if (e instanceof Error) {
            return {
                data: null,
                error: e
            };
        }

        return {
            data: null,
            error: new Error('Unknown error during registration')
        };
    }
};

Change Password

export async function surrealChangePassword({
    db,
    currentPassword,
    newPassword,
    userId
}: {
    db: Surreal,
    currentPassword: string,
    newPassword: string,
    userId: string
}) {

    try {

        const query = `
            UPDATE $id
            SET password = crypto::argon2::generate($new)
            WHERE crypto::argon2::compare(password, $old)
        `;

        const [result] = await db.query<[{
            id: string,
            password: string,
            username: string
        }][]>(query, {
            id: new StringRecordId(userId),
            old: currentPassword,
            new: newPassword
        });

        if (!result) {
            return {
                data: null,
                error: new Error("Password change failed")
            };
        }

        return {
            data: result[0],
            error: null
        };

    } catch (error) {

        if (error instanceof SurrealDbError) {
            return {
                data: null,
                error
            };
        }

        if (error instanceof Error) {
            return {
                error,
                data: null
            };
        }
        return {
            error: new Error('Unknown query error'),
            data: null
        };
    }
}

📝 You need to use the correct namespace, database, and access user when performing surreal functions.

Surreal Server

I wanted this function to be reusable in any framework, with inspiration from supabase-ssr. We can setup our server function to handle cookies and our credentials.

export function surrealServer({
    cookies: {
        cookieName,
        setCookie,
        getCookie
    },
    credentials: {
        url,
        namespace,
        database
    }
}: {
    cookies: {
        cookieName?: string,
        setCookie: SetCoookieFn,
        getCookie: GetCookieFn
    },
    credentials: {
        url: string,
        namespace: string,
        database: string
    }
}) {

    const tokenName = cookieName || 'surreal_token';

    const surrealToken = getCookie(tokenName);
...

Connect Wrapper

async function connect() {

    const { data: db, error: connectError } = await surrealConnect({
        namespace,
        database,
        url
    });

    if (connectError) {
        return {
            data: null,
            error: connectError
        };
    }

    if (surrealToken) {

        await db.authenticate(surrealToken);

        return {
            data: db,
            error: null
        };
    }

    // No token, ensure logged out

    logout();

    return {
        data: db,
        error: null
    };
}

📝 Check for token, and authenticate if there is one.

Login and Register

async function login(username: string, password: string) {

    logout();

    const { data: db, error: dbError } = await connect();

    if (dbError) {
        return {
            db: null,
            error: dbError
        };
    }

    const {
        data: token,
        error: loginError
    } = await surrealLogin({
        db,
        namespace,
        database,
        username,
        password
    });

    if (loginError) {
        return {
            db: null,
            error: loginError
        };
    }

    setCookie(
        tokenName,
        token,
        TOKEN_COOKIE_OPTIONS
    );

    return {
        db,
        error: null
    };
};

async function register(username: string, password: string) {

    logout();

    const { data: db, error: dbError } = await connect();

    if (dbError) {
        return {
            db: null,
            error: dbError
        };
    }

    const {
        data: token,
        error: registerError
    } = await surrealRegister({
        db,
        namespace,
        database,
        username,
        password
    });

    if (registerError) {
        return {
            db: null,
            error: registerError
        };
    }

    setCookie(
        tokenName,
        token,
        TOKEN_COOKIE_OPTIONS
    );

    return {
        db,
        error: null
    };
};

📝 Register or Login then save the token. This is a cookie wrapper function that you can set to work in any framework.

Change Password

async function changePassword(oldPassword: string, newPassword: string) {

    const userId = getUser();

    if (!userId) {
        return {
            data: null,
            error: new Error('Not authenticated')
        };
    }

    const { data: db, error: dbError } = await connect();

    if (dbError) {
        return {
            data: null,
            error: dbError
        };
    }

    const { data, error: changeError } = await surrealChangePassword({
        db,
        currentPassword: oldPassword,
        newPassword,
        userId
    });


    if (changeError) {
        return {
            data: null,
            error: changeError
        };
    }

    return {
        data,
        error: null
    };
}

Logout

function logout() {

    const token = getCookie(tokenName);

    if (token) {
        // delete cookie equivalent
        setCookie(tokenName, '', {
            ...TOKEN_COOKIE_OPTIONS,
            maxAge: 0            
        });
    }
};

📝 We can delete a cookie by setting it to expire. No need for an extraneous deleteCookie function.

Get User

function getUser() {

    const token = getCookie(tokenName);

    if (!token) {
        return null;
    }

    return decodeJwt(token).ID as string;
}

async function getUserInfo() {

    const { data: db, error: dbError } = await connect();

    if (dbError) {
        return null;
    }

    const info = await db.info();

    if (!info?.id) {
        return null;
    }

    return info.id.toString();
}

📝 We DO NOT want to make an extraneous call to the database for every server call, but on secure queries, like change password, we do. To avoid extra fetching, we can decode the JWT and use getUser, otherwise, we can get the user data directly from the database with getUserInfo.

export function decodeJwt(token: string) {
    try {
        const [, payloadB64] = token.split('.');
        return JSON.parse(
            Buffer.from(payloadB64, 'base64url').toString()
        ) as JwtPayload;
    } catch {
        return {};
    }
}

📝 We need try and catch to prevent a problem with JSON.parse() or Buffer in case of data corruption.

Server Hook

For SvelteKit, we can use the hooks.server.ts file to allow our surreal server to be available everywhere.

import type { Handle } from '@sveltejs/kit';
import {
    PRIVATE_SURREALDB_URL,
    PRIVATE_SURREALDB_NAMESPACE,
    PRIVATE_SURREALDB_DATABASE
} from '$env/static/private';
import { surrealServer } from './lib/surreal/surreal-server';

const config = {
    url: PRIVATE_SURREALDB_URL,
    namespace: PRIVATE_SURREALDB_NAMESPACE,
    database: PRIVATE_SURREALDB_DATABASE
};

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

    event.locals.surreal = surrealServer({
        cookies: {
            setCookie: (name, value, options) => 
                event.cookies.set(name, value, options),
            getCookie: (name) => event.cookies.get(name)
        },
        credentials: {
            url: config.url,
            namespace: config.namespace,
            database: config.database
        }
    });

    return resolve(event);
};

We use the event in hooks with native cookie functions. This can work in ANY framework.

Remember to update the types.

import type { surrealServer } from '$lib/surreal/surreal-server';

declare global {
    namespace App {
        // interface Error {}
        interface Locals {
            surreal: ReturnType<typeof surrealServer>;
        }
        // interface PageData {}
        // interface PageState {}
        // interface Platform {}
    }
}

export {};

Auth Guards

Hide page from unauthorized users:

import { redirect } from "@sveltejs/kit";
import type { PageServerLoad } from "./$types";

export const load: PageServerLoad = async ({ locals: { surreal } }) => {

    const userId = surreal.getUser();

    if (!userId) {
        redirect(303, '/login');
    }
};

Hide Login page from session users:

export const load: PageServerLoad = async ({ locals: { surreal } }) => {

    const userId = surreal.getUser();

    if (userId) {
        redirect(303, '/');
    }
};

Server Actions

    login: async ({ request, locals: { surreal } }) => {

        const formData = await request.formData();

        const { username, password } = Object.fromEntries(formData);

        if (typeof username !== 'string' || typeof password !== 'string') {
            error(500, 'Invalid form data');
        }

        const {
            error: loginError
        } = await surreal.login(username, password);

        if (loginError) {
            return {
                error: loginError.message
            };
        }

        redirect(303, '/');
    },

    logout: async ({ locals: { surreal } }) => {
        surreal.logout();
        redirect(303, '/');
    }

If we're just logging in, we don't need to verify username and password strings. If we did, we could use valibot.

const registerSchema = v.object({
    username: v.pipe(
        v.string(),
        v.minLength(3, 'Username must be at least 3 characters long')
    ),
    password: v.pipe(
        v.string(),
        v.minLength(3, 'Password must be at least 3 characters long')
    )
});

...

export const actions: Actions = {

    register: async ({ request, locals: { surreal } }) => {

        const formData = await request.formData();

        const data = Object.fromEntries(formData);

        const result = v.safeParse(registerSchema, data);

        if (!result.success) {
            error(400, result.issues[0].message);
        }

        const { username, password } = result.output;

        const {
            error: registerError
        } = await surreal.register(username, password);

        if (registerError) {
            error(500, registerError.message);
        }

        redirect(303, '/');
    }
};

Or, we could manually check for something simple.

export const actions: Actions = {

    changePassword: async ({ request, locals: { surreal } }) => {

        const formData = await request.formData();

        const { oldPassword, newPassword } = Object.fromEntries(formData);

        if (typeof oldPassword !== 'string'
            || typeof newPassword !== 'string'
            || newPassword.length < 3) {

            error(500, 'Invalid password data');
        }

        const {
            data: passwordChangeData,
            error: passwordChangeError
        } = await surreal.changePassword(oldPassword, newPassword);

        if (passwordChangeError) {
            return {
                error: passwordChangeError.message
            };
        }

        if (passwordChangeData?.password) {
            return {
                success: true
            };
        }

        return {
            success: true
        };
    }
};

Surreal Alpha is going to start handling REFRESH tokens, but this is the latest stable version for now.

And that's all folks!

Repo: GitHub
Example Schema: GitHub

Perfect Local SvelteKit Supabase Setup in 2025

Jonathan Gamble — Sun, 25 May 2025 21:33:14 +0000

The main documentation for Supabase and SvelteKit is flawed.

Here is how you should do it!

Pre-setup

1. Setup Docker

Here is a supabase docker link, but this is really not about docker.

Setup

1. Create SvelteKit App

npx sv create my-app

2. Install Supabase Dependencies

npm i -D supabase@latest @supabase/ssr@latest @supabase/supabase-js@latest

3. Initialize Supabase

npx supabase init

Note: You don't need npx if you have it installed locally on your machine, I just find it easier to keep my package updated.

You may also want to update your supabase URLS in config.toml:

[studio]
api_url = "http://localhost:54321"
...
[auth]
site_url = "http://localhost:5173"

Note: This should match with http://127.0.0.1 if you chose to not use localhost.

4. Setup `.env` with keys

npx supabase start

Run supabase to get keys.

PUBLIC_SUPABASE_URL=http://localhost:54321
PUBLIC_SUPABASE_ANON_KEY=YOUR_KEY_HERE

Copy API URL and anon key to your .env file.

5. Setup type generatation

Add package.json shortcuts under scripts.

"types": "npx supabase gen types typescript --local > ./src/lib/database.types.ts",
"reset": "npx supabase db reset & npm run types",

Generate types file.

npm run types

Note: You can also reset your database and generate types with:

npm run reset

6. Setup TypeScript

Edit your /src/app.d.ts file.

import type { Database } from '$lib/database.types';
import type { Session, User } from '@supabase/supabase-js';
import { SupabaseClient } from '@supabase/supabase-js';

declare global {
    namespace App {
        interface Locals {
            supabase: SupabaseClient<Database>;
            safeGetSession(): Promise<{
                session: Session | null;
                user: User | null;
            }>;
        }
        interface PageData {
            session?: Session | null;
            user?: User | null;
        }
        // interface Error {}
        // interface Platform {}
    }
}

Note: This is different and includes changes from official docs to import database types, and to allow session and user to be optional.

7. Setup Hooks

Add a /src/hooks.server.ts file.

import {
    PUBLIC_SUPABASE_ANON_KEY,
    PUBLIC_SUPABASE_URL,
} from "$env/static/public";
import { createServerClient } from "@supabase/ssr";
import type { Handle } from "@sveltejs/kit";

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

    event.locals.supabase = createServerClient(
        PUBLIC_SUPABASE_URL,
        PUBLIC_SUPABASE_ANON_KEY,
        {
            cookies: {
                getAll: () => event.cookies.getAll(),
                setAll: (cookiesToSet) => {
                    cookiesToSet.forEach(({ name, value, options }) => {
                        event.cookies.set(name, value, {
                            ...options,
                            path: "/"
                        });
                    });
                }
            }
        }
    );

    event.locals.safeGetSession = async () => {

        /** @ts-expect-error: suppressGetSessionWarning is not officially supported */
        event.locals.supabase.auth.suppressGetSessionWarning = true;

        const {
            data: { session },
        } = await event.locals.supabase.auth.getSession();
        if (!session) {
            return { session: null, user: null };
        }

        const {
            data: { user },
            error,
        } = await event.locals.supabase.auth.getUser();
        if (error) {
            return { session: null, user: null };
        }

        return {
            session,
            user
        };
    };

    return resolve(event, {
        filterSerializedResponseHeaders(name) {
            return name === "content-range" ||
                name === "x-supabase-api-version";
        }
    });
};

Note: Like it or not, the Supabase team has refused to fix the warning issue. There have been numerous closed issues and no improvements. A warning is only good when it shows up when it is supposed to, not when it shows up uncalled for. This is supposed to be fixed in the next version of gotrue, but from everything I have read, we are 2 years away from a production version.

8. Setup Root Layout

Create /src/routes/+layout.server.ts file.

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

export const load = (async ({ locals: { safeGetSession } }) => {

    const { user, session } = await safeGetSession();

    return {
        user,
        session
    };

}) satisfies LayoutServerLoad;

9. Reusable Function (Optional)

I also have a reusable function to stop checking for a user.

export const requireUser = async () => {

    const { url, locals: { safeGetSession } } = getRequestEvent();

    const { user } = await safeGetSession();

    const path = url.pathname || '/home';

    if (!user) {
        redirect(303, '/login?next=' + path);
    }

    return { user };
};

You can run it in any server load function with:

await requireUser();

It is safe since redirect throws an error under the hood. You can also return the user if you need it. It just saves boilerplate.

10. Callback

Create your /auth/callback/+page.server.ts file.

import { error, redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
import { dev } from '$app/environment';

export const load = (async ({ url, locals: { supabase } }) => {

    const errorDescription = url.searchParams.get('error_description');
    if (errorDescription) {
        if (dev) {
            console.error(errorDescription);
        }
        const description = errorDescription;
        error(400, description);
    }

    const code = url.searchParams.get('code');
    const next = url.searchParams.get('next') || '/home';

    if (code) {
        const { error: codeError } = await supabase
            .auth
            .exchangeCodeForSession(code);
        if (!codeError) {
            redirect(303, next);
        }
        if (dev) {
            console.error(codeError);
        }
        error(400, codeError.message);
    }

}) satisfies PageServerLoad;

Notice this is NOT a +server.ts file. This way, if there are errors, you can use an +error.html page to gracefully handle them. The errors are not handled correctly in the source code, so I had to use a hack to catch them.

NOTE: When a user login in from another page, it is automatically handled with next?=. However, you will have to manually handle this in your login page and /login/+page.server.ts.

/* +page.svelte */

const next = page.url.searchParams.get('next');

...

// you must pass it to your form action...

...

/* /login/+page.server.ts */

// pass `next` in to your formData in your form action

const { locals: { supabase }, url } = getRequestEvent();

const { error, data } = await supabase.auth.signInWithOAuth({
    provider,
    options: {
        redirectTo: url.origin + `/auth/callback?next=${next}`
    }
});

I'm not providing the exact login implementation because you might use shadcn, or some other form library, you might use superforms, or you might want to avoid that due to it still using stores. I can create another post on this if there is interest.

Hope this helps!

Copying Nuxt's useState in Qwik and Svelte

Jonathan Gamble — Tue, 01 Apr 2025 03:12:02 +0000

Nuxt has an amazing tool that allows you to easily share a signal called useState.

Shared State

Nuxt provides a perfect example:

// composables/states.ts

export const useColor = () => useState<string>('color', () => 'pink')

And you can can call the useColor hook from any component.

<script setup lang="ts">
// ---cut-start---
const useColor = () => useState<string>('color', () => 'pink')
// ---cut-end---
const color = useColor() // Same as useState('color')
</script>

<template>
  <p>Current color: {{ color }}</p>
</template>

Let's duplicate this in other frameworks!

SvelteKit

Super easy, similar to my previous posts on the subject.

import { getContext, hasContext, setContext } from "svelte";

export const useState = <T>(
    key: string,
    init?: () => T
) => {

    if (hasContext(key)) {
        return getContext<{ value: T }>(key);
    }

    if (!init) {
        throw new Error('You must initialize in the parent component!');
    }

    const initialValue = init();

    const state = $state<{ value: T }>({
        value: initialValue
    });

    setContext(key, state);
    return state;
};

We can call it just the same:

import { useState } from "./use-state.svelte";

export const useCounter = () => useState('counter', () => 1);

Beautifantastic!

Qwik

A few more steps...

import {
    createContextId,
    type Signal,
    useContext,
    useContextProvider,
    useSignal
} from "@builder.io/qwik";

const useSharedContext = <T>(name: string) =>
    createContextId<T>('io.builder.qwik.' + name);

const useGetShared = <T extends object>(name: string) =>
    useContext<T, null>(useSharedContext(name), null);

const useCreateShared = <T extends object>(name: string, content: T) =>
    useContextProvider<T>(useSharedContext(name), content);


export const useState = <T>(
    key: string,
    init?: () => T,
) => {

    const shared = useGetShared<Signal<T>>(key);
    if (shared) {
        return shared;
    }

    if (!init) {
        throw new Error('You must initialize in the parent component!');
    }

    const initialValue = init();
    const state = useSignal(initialValue);
    useCreateShared(key, state);
    return state;
};

And you call it the same way!

import { useState } from "./use-state";

export const useCounter = () => useState('counter', () => 1);

That's it!

Now we can use the best part of Nuxt in SvelteKit and Qwik!

Demo SvelteKit: Vercel Serverless
Repo SvelteKit: GitHub
Demo Qwik: Vercel Serverless
Repo Qwik: GitHub

I'm a nerd.

Note: I didn't create this for Solid nor React because you can't conditionally run hooks. However, see my Universal Providers article for something similar.

Sharing Custom Rune Classes with SvelteKit

Jonathan Gamble — Wed, 26 Feb 2025 01:14:54 +0000

Following my last article on Svelte 5 Runes, there are cases when you need to add custom functionality to a Rune, and share it. This method is pretty simple if you have been following this thread.

Implementation

You can share classes in Svelte, but safely sharing them in SvelteKit, requires a bit more code...

Create Your Class

class MyCounter {

    current = $state(0);

    constructor(value: number) {
        this.current = value;
    }

    increment() {
        this.current += 1;
    }

    decrement() {
        this.current -= 1;
    }
}

This could be any class you want to share. This class happens to have a reactive $state() value, and shows an example of adding custom functionality like increment(). This method works best when you have complicated classes you want to share.

Create Your Custom Sharable Class

// add SSR protection with Context
import { getContext, hasContext, setContext } from "svelte";

export class _Counter {

    readonly #key: symbol;

    constructor(name: string) {
        this.#key = Symbol(name);
    }

    exists(): boolean {
        return hasContext(this.#key);
    }

    get(): MyCounter {
        return getContext(this.#key);
    }

    init(initialNumber: number): MyCounter {
        // initialize any class
        const _value = new MyCounter(initialNumber);
        return setContext(this.#key, _value);
    }
}

Export the Class

export const useCustomCounter = new _Counter('counter');

Usage

The usage would be the same as the Rune class from before.

// initialize value
const customCounter = useCustomCounter.init(1);
...
<h1>Hello from Parent Custom: {customCounter.current}</h1>

And use it in children with your custom methods:

const customCounter = useCustomCounter.get();

<button type="button" onclick={() => customCounter.increment()}>
Increment Custom From Child
</button>

Advanced Shared Class

If you know you're always going to be sharing a class, then you can make a generic SharedClass class to simplify things even more.

import { getContext, hasContext, setContext } from "svelte";

type Constructor<T, Args extends unknown[]> = new (...args: Args) => T;


export class SharedClass<T, Args extends unknown[]> {

    readonly #key: symbol;
    #class: Constructor<T, Args>;

    constructor(name: string, className: Constructor<T, Args>) {
        this.#key = Symbol(name);
        this.#class = className;
    }

    exists(): boolean {
        return hasContext(this.#key);
    }

    get(): T {
        return getContext(this.#key);
    }

    init(...args: Args): T {
        const _value = new this.#class(...args);
        return setContext(this.#key, _value);
    }
}

And use it like so:

import { SharedClass } from "./shared-class.svelte";


class MyCounter {

    current = $state(0);

    constructor(value: number) {
        this.current = value;
    }

    increment() {
        this.current += 1;
    }

    decrement() {
        this.current -= 1;
    }
}

export const useCustomCounter = new SharedClass('counter', MyCounter);

That's it!

Updated Code

Repo
Demo

[Boost]

Jonathan Gamble — Sun, 23 Feb 2025 18:57:19 +0000

Clean Code in JavaScript: A Comprehensive Guide 🚀

Alaa Samy ・ Feb 22

#webdev #programming #javascript #cleancode

Svelte 5 and SortableJS

Jonathan Gamble — Sun, 02 Feb 2025 20:20:45 +0000

I've been scratching my head trying to find a way to drag and drop sort in Svelte. I build some things form scratch, but they were really not maintainable. I do not want to maintain a repository at this point, although that could change.

SortableJS

SortableJS works in every other framework, why not Svelte 5? Instead of building a custom component, I figured I would build a custom hook.

Enter useSortable

First, install the necessary packages.

npm i -D sortablejs @types/sortablejs

🟥 It is always a red flag when we have to install separate types. With the exception of JSDoc and Svelte core coding, I don't trust the work on non-Typescript developers. That being said, maybe this package is so old that it has been modified since before TS? Either way, it is maintained, so I trust it better than building something.

Create Our Hook

import Sortable from 'sortablejs';

export const useSortable = (
    getter: () => HTMLElement | null,
    options?: Sortable.Options
) => {
    $effect(() => {
        const sortableEl = getter();
        const sortable = sortableEl ?
            Sortable.create(sortableEl, options)
            : null;
        return () => sortable?.destroy();
    });
}

That's it! Well, sort of...

If we want to save our sort order, we will need a function to return our new items.

export function reorder<T>(
    array: T[],
    evt: Sortable.SortableEvent
): $state.Snapshot<T>[] {

    // should have no effect on stores or regular array
    const workArray = $state.snapshot(array);

    // get changes
    const { oldIndex, newIndex } = evt;

    if (oldIndex === undefined || newIndex === undefined) {
        return workArray;
    }
    if (newIndex === oldIndex) {
        return workArray;
    }

    // move elements
    const target = workArray[oldIndex];
    const increment = newIndex < oldIndex ? -1 : 1;

    for (let k = oldIndex; k !== newIndex; k += increment) {
        workArray[k] = workArray[k + increment];
    }
    workArray[newIndex] = target;
    return workArray;
}

Usage

We must pass in our parent HTML Element. The children get sorted.

<script lang="ts">
import { reorder, useSortable } from '$lib/use-sortable.svelte';
...
let sortable = $state<HTMLElement | null>(null);

useSortable(() => sortable);
...
</script>
...
<ul bind:this={sortable}>
  <li>Child 1</li>
  <li>Child 2</li>
  ...

We can also pass all the options for SortableJS as the second parameter. See SortableJS Docs.

useSortable(() => sortable, {
    animation: 200,
    handle: '.my-handle',
    ghostClass: 'opacity-0'
});

Saving the New State

Now, we need to save the state of our new sortable array.

let items = $state([
    {
        id: 1,
        text: 'Item 1'
    },
    {
        id: 2,
        text: 'Item 2'
    },
    {
        id: 3,
        text: 'Item 3'
    }
]);

let sortable = $state<HTMLElement | null>(null);

useSortable(() => sortable, {
    animation: 200,
    handle: '.my-handle',
    ghostClass: 'opacity-0',
    onEnd(evt) {
        items = reorder(items, evt);
    }
});

The onEnd event handler returns an event object containing the new and old positions for our array after the items have been dropped. We can reorder our original array by importing our reorder function, and passing this event to it.

Each Loop

Make sure to have our array use the entire value as the key, this is the item in ().

{#each items as item (item)}
...
{/each}

Final Code

<script lang="ts">
    import Handle from '$lib/handle.svelte';
    import { reorder, useSortable } from '$lib/use-sortable.svelte';

    let items = $state([
        {
            id: 1,
            text: 'Item 1'
        },
        {
            id: 2,
            text: 'Item 2'
        },
        {
            id: 3,
            text: 'Item 3'
        }
    ]);

    let sortable = $state<HTMLElement | null>(null);

    useSortable(() => sortable, {
        animation: 200,
        handle: '.my-handle',
        ghostClass: 'opacity-0',
        onEnd(evt) {
            items = reorder(items, evt);
        }
    });
</script>

<div class="hidden opacity-0"></div>
<ul class="flex w-full list-none flex-col items-center" bind:this={sortable}>
    {#each items as item (item)}
        <li class="m-2 flex w-32 items-center justify-center gap-5 border p-3">
            <span>{item.text}</span>
            <button type="button" class="my-handle outline-none">
                <Handle />
            </button>
        </li>
    {/each}
</ul>
<div class="flex justify-center">
    <pre class="mt-5 w-fit border p-5">{JSON.stringify(items, null, 2)}</pre>
</div>

Ghost Class

I don't want to add a style tag, so for my ghost class I am using:

<div class="hidden opacity-0"></div>

This ensures opacity-0 gets compiled from Tailwind.

Final Hook

// use-sortable.svelte.ts

import Sortable from 'sortablejs';

export const useSortable = (
    getter: () => HTMLElement | null,
    options?: Sortable.Options
) => {
    $effect(() => {
        const sortableEl = getter();
        const sortable = sortableEl ?
            Sortable.create(sortableEl, options)
            : null;
        return () => sortable?.destroy();
    });
}

export function reorder<T>(
    array: T[],
    evt: Sortable.SortableEvent
): $state.Snapshot<T>[] {

    // should have no effect on stores or regular array
    const workArray = $state.snapshot(array);

    // get changes
    const { oldIndex, newIndex } = evt;

    if (oldIndex === undefined || newIndex === undefined) {
        return workArray;
    }
    if (newIndex === oldIndex) {
        return workArray;
    }

    // move elements
    const target = workArray[oldIndex];
    const increment = newIndex < oldIndex ? -1 : 1;

    for (let k = oldIndex; k !== newIndex; k += increment) {
        workArray[k] = workArray[k + increment];
    }
    workArray[newIndex] = target;
    return workArray;
}

We use $state.snapshot to get rid of the proxy and create a clone array. Then we set the data back in our onEnd statement.

Stores

This works with stores as well. I hate supporting something that will get depreciated, but unfortunately, we have too many packages that may never update to runes, like Superforms. Keep in mind certain components in shadcn-svelte depend on Superforms, so we can be stuck with slower performance for many packages. I, personally, hope stores get depreciated sooner than later so we can have a better Svelte.

Demo: Vercel
Repo: GitHub

Hope this helps someone,

Sharing Runes in Svelte 5 with the Rune Class

Jonathan Gamble — Thu, 16 Jan 2025 02:40:30 +0000

I generally don't use classes in any TypeScript I write. I believe functions make things simpler, and you no longer get Tree Shaking with methods in a class.

However, using classes with Runes can actually be faster, because they don't have to compile $state variables with get and set or with value... they just work. This is what Rich Harris recommends in many cases.

Sharable Rune

We need a sharable Rune class, and of course we must use Context.

// rune.svelte.ts
import { getContext, hasContext, setContext } from "svelte";


type RCurrent<TValue> = { current: TValue };

export class Rune<TRune> {

    readonly #key: symbol;

    constructor(name: string) {
        this.#key = Symbol(name);
    }

    exists(): boolean {
        return hasContext(this.#key);
    }

    get(): RCurrent<TRune> {
        return getContext(this.#key);
    }

    init(value: TRune): RCurrent<TRune> {
        const _value = $state({ current: value });
        return setContext(this.#key, _value);
    }

    // NOT NEEDED!
    update(getter: () => TRune): void {
        const context = this.get();
        $effect(() => {
            context.current = getter();
        });
    }
}

And we can export custom runes where we want.

// counter.svelte.ts
import { Rune } from "./rune.svelte";

export const counter = new Rune<number>('counter');

This is how most people share $state variables anyway, however, this is safe for the server (see my previous posts in this thread). We must name it like any other context.

Initialize

We must initialize our $state just like anywhere else, only once, in the parent component.

<script lang="ts">
    import { counter } from '$lib/counter.svelte';

    const count = counter.init(0);

    // `count.current` is available here
</script>

Read Anywhere

We can use it safely in a child component and read the current method.

<script lang="ts">
    import { counter } from '$lib/counter.svelte';

    const count = counter.get();
</script>

<h1>Hello from Child: {count.current}</h1>

<button type="button" onclick={() => count.current++}>
  Increment From Child
</button>

Update Anywhere

You can update the rune using the current method as normal.

<script lang="ts">
    import { counter } from '$lib/counter.svelte';

    const count = counter.get();

    count.current = 9;
</script>

Derived Update

Sometimes, you may need to update a value based on another reactive value. 99% of use cases, you should just use the .current value, but here is an example just in case this applies to you.

<script lang="ts">
    import { counter } from '$lib/counter.svelte';

    let value = $state(8);

    counter.update(() => value);
</script>

<h1>Hello from Child2: {value}</h1>

<button type="button" onclick={() => value++}> 
    Update From Another State
</button>

Repo
Demo

I hope you find value,

Async Fetching in Svelte 5

Jonathan Gamble — Fri, 15 Nov 2024 19:38:42 +0000

When you want to fetch something in Svelte, the recommended method is to put it in the load function.

I wrote an article about async fetching and why this could be important to work outside the load function.

Generally speaking, when SSR is not involved, you have better control of race conditions, error handling, and implementation outside the load function. While I agree in MOST situations you should use the load functions (with SvelteKit), this is not true for ALL situations.

Here is a simple resource function to handle this:

// resource.svelte.ts

export let resource = <T>(
    fn: () => Promise<T>,
    initialValue?: T
) => {

    const _rune = $state<{ value: T | undefined }>({
        value: initialValue
    });

    $effect(() => {
        fn().then((data) => {
            _rune.value = data;
        });
    });

    return _rune;
};

And you would use it like so in your component:

import { resource } from '$lib/resource.svelte';
...
const todo = resource<Todo>(() =>
  fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
    .then((response) => response.json())
);

And show the value with:

{todo.value}

Similar Concepts in Other Frameworks

Now you can easily create a signal from an async resource! I hope something like this can get implemented in Svelte like $resource one day.

Demo: Vercel
Repo: GitHub

Update 2/2/25

It is good practice to handle the abort controller, so I added a version for that as well.

export let resource = <T>(
    getter: () => RequestInfo | URL,
    initialValue?: T
) => {

    const _rune = $state<{ value: T | undefined }>({
        value: initialValue
    });

    const controller = new AbortController();
    const { signal } = controller;

    $effect(() => {
        const url = getter();
        fetch(url, { signal })
            .then((response) =>
                response.json()
            )
            .then((data) => {
                _rune.value = data;
            });
        return () => controller.abort();
    });

    return _rune;
};

This assumes you would call it:

const todo = resource<Todo>(() => 
    `https://jsonplaceholder.typicode.com/todos/${id}`
);

There are many things you could do with this, maybe we will see something like this officially in Svelte.

Are Angular Resolvers on Life Support ?

Jonathan Gamble — Fri, 15 Nov 2024 03:33:19 +0000

I was scrolling through Tech Twitter a few months back, when I saw this tweet by the infamous Brandon:

// Detect dark theme var iframe = document.getElementById('tweet-1836847595806732317-750'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1836847595806732317&theme=dark" }

If you don't know, Brandon created AnalogJS, the NextJS-like meta framework for Angular. I'm a huge fan of what he does for the Angular community, so I had to respond. He will be the first to tell you I want to solve everything with resolvers.

And...

Not one... single... like or response.

I don't post a lot on Twitter, nor do I have a following, so I didn't think anything of it.

However, I came across this post again randomly and read the comments, and I realized no one agrees with me! I honestly wonder if they even understand what I'm talking about.

Two Ways to Load Data

There are actually two popular paradigms in JavaScript to load data.

1. Inside the Component

This was the first way I ever learned in Angular. When I first took Fireship's Original Angular Course, I never even learned about resolvers. Resolvers are not popular, and I think extremely misunderstood.

Brandon's example above shows the data being loaded AFTER the component has rendered. This is the same pattern for other frameworks:

React Query - Tanstack Query uses useEffect under the hood. Perhaps the first fetch pattern was created in React.
Vue recommends watch
SolidJS - uses createResource which returns a signal
Qwik - has useResource$, which returns a signal
Svelte - no recommended usage on GH for pure Svelte, although you would need to use $effect with .then() instead of async. Svelte 4 uses stores, which would follow the same unrecommended pattern inside the store. See Svelte 5 with Firebase
Angular - Angular has always recommended the Observable / Behavioral Subject pattern, and now you can just use effect(). However, ngxtension has a derivedAsync to do this for you, and Angular 19 will have resource() built in. In reality, RxJS is still too very intertwined with Angular, interceptors, and old school http client.

2. Inside a Load Function

NextJS - what used to be getServerSideProps is now just an async function inside a Server Component. You're server only, or an outside package like React Query.
Nuxt - Nuxt has built in fetch functions $fetch which handle fetching once on the client and hydrating to the browser. You can also fetch inside a Server Component like in NextJS.
SvelteKit - the only recommended way in Svelte or SvelteKit, is inside a load function. This runs BEFORE the component is mounted, and can run on the server or client. They are NOT just for the server.
QwikCity - QwikCity has routeLoader$ and server$ for preloading data. Qwik "resumes," which doesn't require hydration and only runes once.
SolidStart - uses a query function and with preload that runs on every route.
Angular - Angular has resolvers, which are perfect for this use case. However, no one seems to use them anymore.

What's your point?

Did you notice a pattern here? Server Side frameworks prefer load functions (resolver), while client frameworks fetch data in a signal reactively. But...

Angular is NOT a Server Side Framework!

The problem isn't that Angular is not an SSR frameworks, the problem is that it pretends to be.

Adding @angular/ssr does not actually add any server features outside of hydration and automatic transfer state (except in the resolver of course). Nevertheless, technically React has Server Components, while NextJS takes advantage of them. Missing features include but not limited to .env support, endpoints, server components, form actions, server caching, pre-loading data from server only, bun, deno, cloudflare, non-nodejs support, and of course file based routing. Read any of my previous posts for work arounds on these things.
Notice Firebase App Hosting only supports Angular and NextJS, but NOT Analog, which is the actual Angular Server Side framework!

Now I don't expect the Angular Team to add all of my feature requests. However, it would be nice to have basic .env support in the main builder, and the ability to make endpoints with the Angular Router. Brandon can handle the rest.

It is also still crazy to me that I can't deploy a basic Angular SSR application to Vercel.

Why Not Fetch Reactively?

I read an article about resolvers from 2019 that says the use case for resolvers is "very rare." Basically, you should only use them when you're fetching data that can load quickly. Ok, agreed. In reality, you would only load slow data in rare use cases. You want your site or application to be quick.

🤷 What the heck man...

What would Josh Morony say?

You should not use RxJS in Angular unless you need to handle asynchronous events with race conditions or coordinate complex data flow.

He was referring to Signals VS Observables there, so I have no idea. Nevertheless, I like to think you should just fetch in the resolver by default UNTIL you have these advanced use cases.

You really don't have a choice...

If you're building a professional SSR application, you will need SEO generated from a database. You MUST use a resolver, or manually pause the component from loading with PendingTask, which is extremly funky.

In Analog, I suspect people are fetching only inside the file based endpoints, or they are generating static pages where it doesn't matter.

Svelte VS Angular

The programming patterns for my two favorite frameworks are polar opposites.

Huntabyte is going to show you the recommended way --- there is no other way --- of loading data using page load functions.
Meanwhile the Angular and Analog community dismisses resolvers and shows their arguably more complicated reactive way.

HTTP Streaming

One popular answer to slow loading in the resolver, is HTTP Streaming. NextJS and SvelteKit support this, but it was turned down for Angular.

😔

Reflecting on this... TL;DR

Angular is not a complete SSR framework
The community rarely uses resolvers for loading async data
Angular Team members often point to Analog as a reason NOT to change things
This is not necessarily a bad thing, just polar opposite of the Svelte community
Handling race conditions, abort controllers, observable actions, or any complex fetching is always better in the component
Pre-loading data for SEO is always better in a resolver
Svelte can use a little bit of RxJS sometimes
Resolvers should have the ability to use signals like input()
Is the Angular SSR community small?
Do most people just build enterprise applications while fetching in another language?
Does SEO not matter to MOST Angular SSR users, or is it just an after thought?
HTTP Streaming would be cool in Angular, along with Resumability when Wiz is combined.

State

Currently, anything in the resolver will get fetched twice (server + client). This needs to be handled in the future as well. 🤔 Resolvers should pass the state automatically... use my useAsyncTrasferState function in a resolver for that.

Comparing the Two Approaches

I used ngxtension for the demo for brevity, but the result is the same.

Effect Version

  id = injectParams('id');

  idNumber = computed(() => Number(this.id()));

  todo = derivedAsync<Todo>(() =>
    fetch(`https://jsonplaceholder.typicode.com/todos/${this.id()}`).then(
      (response) => response.json()
    )
  );

  prevId = computed(() => Math.max(this.idNumber() - 1, 1));
  nextId = computed(() => this.idNumber() + 1);

Resolver Version

  todo = injectRouteData<Todo>('data');

  idNumber = computed(() => this.todo()!.id);

  prevId = computed(() => Math.max(this.idNumber() - 1, 1));
  nextId = computed(() => this.idNumber() + 1);

This is loaded from the resolver.

import { ResolveFn } from '@angular/router';

export const routeResolverResolver: ResolveFn<boolean> = async (route) => {

  const todoId = route.paramMap.get('id');

  if (!todoId) {
    throw new Error('Todo ID is missing in the route!');
  }

  // Fetch the todo from the API
  const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`);

  if (!response.ok) {
    throw new Error('Failed to fetch the todo');
  }

  return await response.json();
};

Which is better?

In this particular demo, there is a "flicker" in the effect version, while there is no flicker in the resolver version. I believe the resolver is better in this use case.

What do you think?

📝 Because Vercel doesn't support SSR Deployment, the demo is loading the resolver on the client only. This means routing only works from the home page.

Demo: Vercel (SSR doesn't work with Vercel)
Repo: GitHub

Answer

I would say that it is on life support for asynchronous fetches. In reality, Angular SSR users should consider resolvers more for this use case and SvelteKit users should consider loading in $effect() for more use cases. But maybe that is the point? The userbase is different.

I'm still learning, but these questions fascinate me. Hopefully we see more shake ups in both ecosystems.

DEV Community: Jonathan Gamble

SvelteKit Remote Functions Workaround Helpers

1. Submit Type

2. Form Data

3. Set Initial Data

Usage

Update - 12/27/25

4. Form Debug

4. Touched

Usage:

5. Client Only Forms

Usage:

6. Caching Problems

7. Streaming Support

SvelteKit SurrealDB Login with GitHub

TL;DR

Pre-Config

Schema

GitHub Secret and Client ID

Insert Data

GitHub Login

Allow GitHub in the Network

SvelteKit Changes

Connection

Create the Redirect

Using OG Image Outside of Node

TL;DR

Serverless Functions

NextJS and Vercel Edge

NextJS and Cloudflare

SvelteKit and Vercel Edge

image-card.svelte

image-response.ts

/og/+server.ts

SvelteKit and Cloudflare

Import from workered

Use Custom Vite Plugin

Nuxt and Vercel Edge

OG Component

og.get.ts

Nuxt Config

Nuxt and Cloudflare

AnalogJS and Cloudflare

Vite Config

AnalogJS and Vercel Edge

Bonus - SvelteKit with Vercel Bun

Image Response

Deno Deployments

Other Frameworks

Vercel Edge Sunsetting?

Summary

SvelteKit Surreal Database Authentication

TL;DR

Setup

Surreal JS SDK

Connect

Login

Register

Change Password

Surreal Server

Connect Wrapper

Login and Register

Change Password

Logout

Get User

Server Hook

Auth Guards

Server Actions

Perfect Local SvelteKit Supabase Setup in 2025

Pre-setup

1. Setup Docker

Setup

1. Create SvelteKit App

2. Install Supabase Dependencies

3. Initialize Supabase

4. Setup .env with keys

5. Setup type generatation

6. Setup TypeScript

7. Setup Hooks

8. Setup Root Layout

4. Setup `.env` with keys