ⱼ ₒ ₑ
ⱼ ₒ ₑ
PostsComments
SSolidJS
Created by ⱼ ₒ ₑ on 2/15/2025 in #support
Server function not being called (?)
No description
8 replies
SSolidJS
Created by ⱼ ₒ ₑ on 2/14/2025 in #support
useContext is undefined
Wrapped in a function with a throw, and it throws an error no matter what I've verified it's wrapped in a provider, and the context set-up is identical to the other providers 
const SaveButton: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
  const ctx = useSettingsContext();
// rest of code...
const SaveButton: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
  const ctx = useSettingsContext();
// rest of code...
It's not even being used, simply calling the function throws the error This is the context set-up: 
type SettingsContextType = {
  savedSettings: Settings;
  setSavedSettings: SetStoreFunction<Settings>;
  settings: Settings;
  setSettings: SetStoreFunction<Settings>;
};
const SettingsContext = createContext<SettingsContextType>();
export const useSettingsContext = () => {
  const context = useContext(SettingsContext);
  console.log(SettingsContext);
  if (!context)
    throw new Error("useSettings must be used within a SettingsProvider");
  return context;
};
type SettingsContextType = {
  savedSettings: Settings;
  setSavedSettings: SetStoreFunction<Settings>;
  settings: Settings;
  setSettings: SetStoreFunction<Settings>;
};
const SettingsContext = createContext<SettingsContextType>();
export const useSettingsContext = () => {
  const context = useContext(SettingsContext);
  console.log(SettingsContext);
  if (!context)
    throw new Error("useSettings must be used within a SettingsProvider");
  return context;
};
Every time I log at all stages nothing is null or not working, SettingsContext seems to be defined fine, but useContext breaks and returns undefined It's wrappped in a provider in the global app I'm not super experienced with context, is there something I'm missing? Is it the fact that the value is an object?
36 replies
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?
7 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