ⱼ ₒ ₑ
ⱼ ₒ ₑ
PostsComments
SSolidJS
Created by ⱼ ₒ ₑ on 1/17/2025 in #support
Solid Start Vinxi complaining about public and can't resolve public fonts
When I define my font faces and reference the actual font files like so: 
url("/fonts/open-sauce/OpenSauceOne-Black.woff")
url("/fonts/open-sauce/OpenSauceOne-Black.woff")
It does not complain but when building it will state it can't resolve it. If I do: 
url("/public/fonts/open-sauce/OpenSauceOne-Black.woff")
url("/public/fonts/open-sauce/OpenSauceOne-Black.woff")
It will resolve but complain endlessly when doing a dev server I used Astro with the root and had no issues What am I doing wrong?
8 replies
SSolidJS
Created by ⱼ ₒ ₑ on 1/17/2025 in #support
Solid Start HMR not rebuilding styles on class change
Use tailwind 4.0, change class of JSX component while dev server is running, HMR reloads component but tailwind is not rebuilt to actually style the class How could I fix this? In vite config?
6 replies
SSolidJS
Created by ⱼ ₒ ₑ on 1/17/2025 in #support
How to use server function & suspense
I will be frank, I have some experience with React but this is my first dive into Solid coming from Astro I'm trying to have a fallback loading component, that is replaced by data fetched from the server when available I figured the best way to do this was an asynchronous server function, I am not claiming there is a bug I think I just did something wrong Here is my high-level code since I can't really share more: 
async function getUserInfo() {
  "use server";
  // Mimics server speed, network latency, etc.
  await new Promise((resolve) => setTimeout(resolve, 300));

  // TO-DO: real data / connections here
  return {
    avatar: "~/assets/img/placeholders/generic-avatar.jpg",
    name: "User Name",
  };
}

//... component defined
  const [fetchedInfo] = createResource(getUserInfo);

  return (
    <Suspense fallback={<UserInfoFallback />}>
          <img
            class="aspect-square size-full"
            src={fetchedInfo()?.avatar}
            decoding="sync"
            loading="eager"
            alt="User Avatar"
            draggable="false"
          />
        <span class="text-neutral-content flex w-full flex-col gap-0.5 truncate text-left">
          <p class="block truncate text-sm font-semibold">
            {fetchedInfo()?.name}
          </p>
          <p class="block truncate text-[0.7rem] font-light">
            {fetchedInfo()?.email}
          </p>
        </span>
    </Suspense> )
async function getUserInfo() {
  "use server";
  // Mimics server speed, network latency, etc.
  await new Promise((resolve) => setTimeout(resolve, 300));

  // TO-DO: real data / connections here
  return {
    avatar: "~/assets/img/placeholders/generic-avatar.jpg",
    name: "User Name",
  };
}

//... component defined
  const [fetchedInfo] = createResource(getUserInfo);

  return (
    <Suspense fallback={<UserInfoFallback />}>
          <img
            class="aspect-square size-full"
            src={fetchedInfo()?.avatar}
            decoding="sync"
            loading="eager"
            alt="User Avatar"
            draggable="false"
          />
        <span class="text-neutral-content flex w-full flex-col gap-0.5 truncate text-left">
          <p class="block truncate text-sm font-semibold">
            {fetchedInfo()?.name}
          </p>
          <p class="block truncate text-[0.7rem] font-light">
            {fetchedInfo()?.email}
          </p>
        </span>
    </Suspense> )
9 replies