Hussein Posts - Answer Overflow

Hussein

Explore posts from servers

CDCloudflare Developers SSolidJS DTDrizzle Team

•Created by Hussein on 3/31/2025 in #support

preload fonts in start

how to preload fonts like sveltekit?

import type { Handle } from "@sveltejs/kit";

export const handle: Handle = async ({ event, resolve }) => {
  const response = await resolve(event, {
    preload: () => true,
  });

  return response;
};

import type { Handle } from "@sveltejs/kit";

export const handle: Handle = async ({ event, resolve }) => {
  const response = await resolve(event, {
    preload: () => true,
  });

  return response;
};

40 replies

CDCloudflare Developers

•Created by Hussein on 3/20/2025 in #general-help

jimp

import { img } from "./img";
import { createJimp } from "@jimp/core";
import { defaultFormats, defaultPlugins } from "jimp";
import webp from "@jimp/wasm-webp";

// A custom jimp that supports webp
const Jimp = createJimp({
    formats: [...defaultFormats, webp],
    plugins: defaultPlugins,
});

const jpg = await (await Jimp.read(
    img,
)).resize({ h: 120, w: 120 }).getBuffer("image/webp");

import { img } from "./img";
import { createJimp } from "@jimp/core";
import { defaultFormats, defaultPlugins } from "jimp";
import webp from "@jimp/wasm-webp";

// A custom jimp that supports webp
const Jimp = createJimp({
    formats: [...defaultFormats, webp],
    plugins: defaultPlugins,
});

const jpg = await (await Jimp.read(
    img,
)).resize({ h: 120, w: 120 }).getBuffer("image/webp");

is it possible to use jimp wasm?

1 replies

SSolidJS

•Created by Hussein on 3/15/2025 in #support

how to trigger <Suspense> on revalidate?

in tanstack query, you can use resetQueries to do that, what is the solid router equivalent of that?

41 replies

SSolidJS

•Created by Hussein on 2/28/2025 in #support

cloudflare sending 200 status for *404

pnpm create solid choose solidstart set cloudflare-pages preset wrangler pages deploy dist (don't do wrangler pages dev, it works fine on local) go to any page that doesn't exist on your production url, you'll see 200 status

3 replies

SSolidJS

•Created by Hussein on 2/24/2025 in #support

<Suspense> not fallbacking correctly

import { createAsync, query } from "@solidjs/router";
import { Suspense } from "solid-js";

const getData = query(async () => {
  "use server";

  await new Promise((r) => setTimeout(r, 5000));

  return { hello: { other: "hello" } };
}, "data");

export default function Home() {
  const data = createAsync(() => getData());

  return <Suspense fallback={<p>Loading...</p>}>{data().hello}</Suspense>;
}

import { createAsync, query } from "@solidjs/router";
import { Suspense } from "solid-js";

const getData = query(async () => {
  "use server";

  await new Promise((r) => setTimeout(r, 5000));

  return { hello: { other: "hello" } };
}, "data");

export default function Home() {
  const data = createAsync(() => getData());

  return <Suspense fallback={<p>Loading...</p>}>{data().hello}</Suspense>;
}

5 replies

SSolidJS

•Created by Hussein on 2/14/2025 in #support

ERR_HTTP_HEADERS_SENT

import { APIEvent } from "@solidjs/start/server";

export async function POST(event: APIEvent) {
  const data = new FormData();
  data.set("message", "test");

  event.nativeEvent.respondWith(
    Response.json({ message: "Optimistically sent a message!" })
  );

  await fetch(`https://discord.com/api/v10/channels/CHANNEL/messages`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bot TOKEN`,
    },
    body: JSON.stringify({ content: String(data.get("message")) }),
  });
}

import { APIEvent } from "@solidjs/start/server";

export async function POST(event: APIEvent) {
  const data = new FormData();
  data.set("message", "test");

  event.nativeEvent.respondWith(
    Response.json({ message: "Optimistically sent a message!" })
  );

  await fetch(`https://discord.com/api/v10/channels/CHANNEL/messages`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bot TOKEN`,
    },
    body: JSON.stringify({ content: String(data.get("message")) }),
  });
}

9 replies

SSolidJS

•Created by Hussein on 10/17/2024 in #support

is there a way to start data fetching before component rendering?

react router runs the loader before the component. thus making things like redirects easier. is there a way to do this with @solidjs/router?

export const routes = createRoutesFromElements(
  <>
    <Route
      loader={() => Response.redirect("/other")}
      path="/"
      element={<Home />}
    />
    <Route path="/other" element={<Other />} />
  </>
);

export const routes = createRoutesFromElements(
  <>
    <Route
      loader={() => Response.redirect("/other")}
      path="/"
      element={<Home />}
    />
    <Route path="/other" element={<Other />} />
  </>
);

24 replies

SSolidJS

•Created by Hussein on 9/27/2024 in #support

submission error doesn't show when js is disabled

export default function Home() {
  const form = useSubmission(login);

  return (
    <Show when={form.error}>
      {(error: Accessor<Error>) => <p>{error().message}</p>}
    </Show>
  );
}

export default function Home() {
  const form = useSubmission(login);

  return (
    <Show when={form.error}>
      {(error: Accessor<Error>) => <p>{error().message}</p>}
    </Show>
  );
}

why this doesn't work with js disabled? this is a "use server" action. form.result shows when js disabled but not form.error.

9 replies

SSolidJS

•Created by Hussein on 8/28/2024 in #support

why solidstart production build contains many references to source code?

5 replies

SSolidJS

•Created by Hussein on 8/22/2024 in #support

how to redirect in a "use server" function?

is there a way to redirect outside of cache, action and without useNavigate?

async function redirect() {
  "use server";
  // how??
  redirect("/other");
}

async function redirect() {
  "use server";
  // how??
  redirect("/other");
}

2 replies

SSolidJS

•Created by Hussein on 8/22/2024 in #support

isDev is false in dev

import { isDev } from "solid-js/web";
console.log({ isDev });

import { isDev } from "solid-js/web";
console.log({ isDev });

this logs false in dev. why? i'm using solidstart

5 replies

SSolidJS

•Created by Hussein on 8/22/2024 in #support

Race condition

i have a login page with a login action like this:

const login = action(async (formData: FormData) => {
  ("use server");
  const username = formData.get("username");
  const password = formData.get("password");
  if (typeof username === "string" && typeof password === "string") {
    const foundUser = await db.query.user.findFirst({
      where: eq(user.username, username),
    });

    if (!foundUser || !(await verify(foundUser.password, password)))
      return new Error("Wrong username or password");

    const session = await lucia.createSession(foundUser.id, {});
    const sessionCookie = lucia.createSessionCookie(session.id);

    setCookie(
      sessionCookie.name,
      sessionCookie.value,
      sessionCookie.attributes
    );
    // this is happening before the cookie gets set
    throw redirect("/");
  }
}, "login");

const login = action(async (formData: FormData) => {
  ("use server");
  const username = formData.get("username");
  const password = formData.get("password");
  if (typeof username === "string" && typeof password === "string") {
    const foundUser = await db.query.user.findFirst({
      where: eq(user.username, username),
    });

    if (!foundUser || !(await verify(foundUser.password, password)))
      return new Error("Wrong username or password");

    const session = await lucia.createSession(foundUser.id, {});
    const sessionCookie = lucia.createSessionCookie(session.id);

    setCookie(
      sessionCookie.name,
      sessionCookie.value,
      sessionCookie.attributes
    );
    // this is happening before the cookie gets set
    throw redirect("/");
  }
}, "login");

and an index page that checks the user:

const getUser = cache(async () => {
  "use server";

  const sessionId = getCookie(lucia.sessionCookieName);

  if (!sessionId) throw redirect("/login");
  const { user } = await lucia.validateSession(sessionId);

  if (!user) throw redirect("/login");

  return user;
}, "user");

export const route = {
  load: () => getUser(),
};

const getUser = cache(async () => {
  "use server";

  const sessionId = getCookie(lucia.sessionCookieName);

  if (!sessionId) throw redirect("/login");
  const { user } = await lucia.validateSession(sessionId);

  if (!user) throw redirect("/login");

  return user;
}, "user");

export const route = {
  load: () => getUser(),
};

when /login redirects to / after submitting the action, somehow / doesn't have the new cookie.

9 replies

SSolidJS

•Created by Hussein on 7/6/2024 in #support

is this a good pattern?

export default function Home() {
  const user = createAsync(() => getUser());
  const shouldRedirect = createMemo(() => !user());

  return <Suspense>{shouldRedirect() && <Navigate href="/login" />}</Suspense>;
}

export default function Home() {
  const user = createAsync(() => getUser());
  const shouldRedirect = createMemo(() => !user());

  return <Suspense>{shouldRedirect() && <Navigate href="/login" />}</Suspense>;
}

32 replies

SSolidJS

•Created by Hussein on 7/5/2024 in #support

how do i dedupe requests without `cache`?

i tried everything. it always calls the function either twice or even thrice on client, after the server fetching the data too.

45 replies

SSolidJS

•Created by Hussein on 7/3/2024 in #support

is there a way to disable default lazy loading for routes in solidstart?

it seems routes are download when a link to them is clicked and then cached. is there a way to just download all routes on any route like solid spa?

21 replies

SSolidJS

•Created by Hussein on 6/30/2024 in #support

how to create brotli files when building?

vinxi build is only creating gz files

6 replies

SSolidJS

•Created by Hussein on 6/25/2024 in #support

Error: Cannot find cache context

SSR:

import { cache, createAsync, Route, Router } from "@solidjs/router";
import { Suspense } from "solid-js";

export function App({ url }: { url?: string }) {
  return (
    <Router url={url}>
      <Route
        path="/"
        component={() => (
          <>
            Hello World
            <a style={{ display: "block", "margin-top": "1em" }} href="/other">
              Other
            </a>
          </>
        )}
      />
      <Route
        path="/other"
        component={() => {
          const get = cache(async () => {
            const res = await fetch(
              "https://jsonplaceholder.typicode.com/todos/1"
            );
            return res.json();
          }, "data");

          const data = createAsync(() => get());

          return (
            <>
              Other
              <Suspense fallback={<p>Loading...</p>}>
                <pre>{JSON.stringify(data())}</pre>
              </Suspense>
              <a style={{ display: "block", "margin-top": "1em" }} href="/">
                Home
              </a>
            </>
          );
        }}
      />
    </Router>
  );
}

import { cache, createAsync, Route, Router } from "@solidjs/router";
import { Suspense } from "solid-js";

export function App({ url }: { url?: string }) {
  return (
    <Router url={url}>
      <Route
        path="/"
        component={() => (
          <>
            Hello World
            <a style={{ display: "block", "margin-top": "1em" }} href="/other">
              Other
            </a>
          </>
        )}
      />
      <Route
        path="/other"
        component={() => {
          const get = cache(async () => {
            const res = await fetch(
              "https://jsonplaceholder.typicode.com/todos/1"
            );
            return res.json();
          }, "data");

          const data = createAsync(() => get());

          return (
            <>
              Other
              <Suspense fallback={<p>Loading...</p>}>
                <pre>{JSON.stringify(data())}</pre>
              </Suspense>
              <a style={{ display: "block", "margin-top": "1em" }} href="/">
                Home
              </a>
            </>
          );
        }}
      />
    </Router>
  );
}

92 replies

SSolidJS

•Created by Hussein on 5/27/2024 in #support

is hmr broken? or is this intentional?

create new solid start project run dev command change text in index.tsx route it does a full refresh 🤔

8 replies

SSolidJS

•Created by Hussein on 5/26/2024 in #support

how to return a 404 error in `cache`?

how to do something like https://kit.svelte.dev/docs/errors#expected-errors ?

4 replies

SSolidJS

•Created by Hussein on 5/23/2024 in #support

declare types for locals?

i need to declare some locals for RequestEvent

import { User } from "lucia";

declare module "@solidjs/start" {
  export interface RequestEventLocals {
    user?: User;
  }
}

import { User } from "lucia";

declare module "@solidjs/start" {
  export interface RequestEventLocals {
    user?: User;
  }
}

that didn't work

8 replies

Gaming

Programming