andi
andi
PostsComments
SSolidJS
Created by andi on 12/20/2024 in #support
TypeError: Cannot read properties of undefined (reading 'when')
haha yeah, i think it's a better use of time if I try to reproduce it with a minimal example which I'll try to do for my own sanity as well when i have time
18 replies
SSolidJS
Created by andi on 12/20/2024 in #support
TypeError: Cannot read properties of undefined (reading 'when')
no, it's a pretty big app and the example I posted just now was actually happening across many files and components if I have time i'll try to dig deeper into the built code, but as I was debugging from the stack trace in the compiled output, I didn't see anything weird going on
18 replies
SSolidJS
Created by andi on 12/20/2024 in #support
TypeError: Cannot read properties of undefined (reading 'when')
i thought it might also be related to the fact that suspense still mounts its children even though the fallback is being rendered, but not sure
18 replies
SSolidJS
Created by andi on 12/20/2024 in #support
TypeError: Cannot read properties of undefined (reading 'when')
it does but I haven't been able to make a minimally reproducible example yet
18 replies
SSolidJS
Created by andi on 12/20/2024 in #support
TypeError: Cannot read properties of undefined (reading 'when')
Fixed by doing 
<Suspense>
  <Suspense>
    <TopBar>{someResourceBeingUsed()}</TopBar>
  </Suspense>

  <Switch>
    <Match>...</Match>
    <Match>...</Match>
    <Match>...</Match>
  </Switch>
</Suspense>
<Suspense>
  <Suspense>
    <TopBar>{someResourceBeingUsed()}</TopBar>
  </Suspense>

  <Switch>
    <Match>...</Match>
    <Match>...</Match>
    <Match>...</Match>
  </Switch>
</Suspense>
18 replies
SSolidJS
Created by andi on 12/20/2024 in #support
TypeError: Cannot read properties of undefined (reading 'when')
the global suspense would make the switch component fail with that error i'm thinking it's a race condition of sorts because it didn't happen 100% of the time, maybe like 70/80%
18 replies
SSolidJS
Created by andi on 12/20/2024 in #support
TypeError: Cannot read properties of undefined (reading 'when')
Not exactly This is what the structure of the component tree looked like from a high-level view 
<Suspense>
  <TopBar>{someResourceBeingUsed()}</TopBar>

  <Switch>
    <Match>...</Match>
    <Match>...</Match>
    <Match>...</Match>
  </Switch>
</Suspense>
<Suspense>
  <TopBar>{someResourceBeingUsed()}</TopBar>

  <Switch>
    <Match>...</Match>
    <Match>...</Match>
    <Match>...</Match>
  </Switch>
</Suspense>
18 replies
SSolidJS
Created by andi on 12/20/2024 in #support
TypeError: Cannot read properties of undefined (reading 'when')
if anyone else runs into something like this, it was caused by a resource somewhere else on the page that was triggering a suspense boundary that would hide the component containing the Switch it's still not clear why it was happening, almost seemed like a race condition in the rendering causing the bug, but putting a suspense boundary around the resource component stopped the Switch from being hidden and that prevented the bug
18 replies
SSolidJS
Created by beganovich on 11/13/2023 in #support
Good pattern for refetching the data
So for resources, you can optionally pass 2 arguments instead of one, the second one is the fetching function you have, and the first one can be a function returning a value usually it's an accessor function that would trigger refetches in the resource if that first function returns a falsy value, then the resource won't trigger a fetch so basically if you had something like this: 
const [enabled, setEnabled] = createSignal(false);
const [data] = createResource(enabled, fetchSomething);
const [enabled, setEnabled] = createSignal(false);
const [data] = createResource(enabled, fetchSomething);
then the resource wouldn't fetch initially because the enabled signal is false if you later do setEnabled(true) it'll trigger an initial fetch So to answer your original question, you can still extract the resource higher in the component tree, and then only set enabled to true when you want it to fetch initially, for example from the onMount call of one of the children
3 replies
SSolidJS
Created by Mathieu on 11/8/2023 in #support
Use of `<Outlet />` vs `props.children` leads to duplicated code?
you could do something like this 
const EnsureAuthenticated = (props) => {
  return (
    <Switch>
      <Match when={/* ... */}>
        <Loader />
      </Match>
      <Match when={/* ... */}>
        /* ... */
      </Match>
      <Match when={/* ... */}>
        {props.children}
      </Match>
    </Switch>
  );
};
const EnsureAuthenticatedRouting = () => (
  <EnsureAuthenticated>
    <Outlet />
  </EnsureAuthenticated>
)
const EnsureAuthenticated = (props) => {
  return (
    <Switch>
      <Match when={/* ... */}>
        <Loader />
      </Match>
      <Match when={/* ... */}>
        /* ... */
      </Match>
      <Match when={/* ... */}>
        {props.children}
      </Match>
    </Switch>
  );
};
const EnsureAuthenticatedRouting = () => (
  <EnsureAuthenticated>
    <Outlet />
  </EnsureAuthenticated>
)
and use one or the other depending on context, but the logic is only in one place
3 replies
SSolidJS
Created by eudrino on 11/9/2023 in #support
Cache dom elements with router
i think there's other strategies you might want to explore before going down the route of caching the element like only rendering the part of the component that is in view at first via virtualisation but maybe someone else with more experience with the router can chime in later
7 replies
SSolidJS
Created by eudrino on 11/9/2023 in #support
Cache dom elements with router
not sure about caching elements while still using the router like this, but why do you want to cache them? i think you might need to implement your own router for something like this
7 replies
SSolidJS
Created by Driver on 11/2/2023 in #support
Controls
any reason for using effect and not createEffect? replacing it should fix things, not even sure what effect does
14 replies
SSolidJS
Created by andi on 11/2/2023 in #support
Setter type errors
and the error formatted nicely 
type One = <U extends StateSongs | undefined>
  | (value: ((prev: StateSongs | undefined) => U)
  | Exclude<U, Function>
  | ((prev: StateSongs | undefined) => U)) => U;

// not assignable to
type Two = Setter<StateSongs | undefined>

//Target signature provides too few arguments. Expected 1 or more, but got 0.
type One = <U extends StateSongs | undefined>
  | (value: ((prev: StateSongs | undefined) => U)
  | Exclude<U, Function>
  | ((prev: StateSongs | undefined) => U)) => U;

// not assignable to
type Two = Setter<StateSongs | undefined>

//Target signature provides too few arguments. Expected 1 or more, but got 0.
7 replies
SSolidJS
Created by andi on 11/2/2023 in #support
Setter type errors
i'm pretty sure the type error is on the setter itself, not on the signal return the resource storage option is not throwing any errors I should've included a text version of the issue though 
type StateSongs = { name: string; rating: number }[];

export const storeBackedSongs: InitializedResourceOptions<
  StateSongs,
  true
>["storage"] = () => {
  const [state, setState] = useGlobal();

  const getter: Accessor<StateSongs> = () => state.songs;

  const setter: Setter<StateSongs | undefined> = (value) => {
    const songs = unwrap(state.songs);
    if (typeof value === "function") {
      const newSongs = value(songs);
      if (newSongs) setState("songs", newSongs);
      return newSongs;
    }
    if (value) setState("songs", value);
    return value;
  };

  return [getter, setter];
};
type StateSongs = { name: string; rating: number }[];

export const storeBackedSongs: InitializedResourceOptions<
  StateSongs,
  true
>["storage"] = () => {
  const [state, setState] = useGlobal();

  const getter: Accessor<StateSongs> = () => state.songs;

  const setter: Setter<StateSongs | undefined> = (value) => {
    const songs = unwrap(state.songs);
    if (typeof value === "function") {
      const newSongs = value(songs);
      if (newSongs) setState("songs", newSongs);
      return newSongs;
    }
    if (value) setState("songs", value);
    return value;
  };

  return [getter, setter];
};
7 replies
SSolidJS
Created by lemonad on 10/31/2023 in #support
Loading screen for app
you could explore other options too like reducing the whole bundle size, maybe review your dependencies and reimplement the ones that are too big with code that works just for your app usually generic libraries have a lot of extra code to handle things that you might not ever run into in your app
14 replies
SSolidJS
Created by OldViking013 on 11/1/2023 in #support
Show PDF on my page
i don't think there's a solid specific library that would help your best bet might be to search for a pdf viewer library yourself and then integrate it into your solid app
6 replies
SSolidJS
Created by lemonad on 10/31/2023 in #support
Loading screen for app
it might also just not worked, i've never tried this before but logically it seems like it would
14 replies
SSolidJS
Created by lemonad on 10/31/2023 in #support
Loading screen for app
so if you split them into two packages, anything that you use from the second chunk would come from an import, something like import {something} from "second-package" this is the part that's hard, but if you structure your app in such a way that any functionality coming from the second package you import like this: 
const { something } = await import("second-package");
const { something } = await import("second-package");
and you only trigger those imports when you actually want the second chunk to be fetched, i think it might work you could probaly set up an experiment manually, with some js files you create yourself by hand with some simple functions and see if you can make the second one only be fethched when you click a button or run a function from the browser console
14 replies
SSolidJS
Created by lemonad on 10/31/2023 in #support
Loading screen for app
this depends a lot on how your app is structured but for an idea that might point you into the right direction split your codebase into 2 packages, and use the manualChunks rollup option in vite to create 2 chunks for your app based on the 2 packages (https://vitejs.dev/guide/build.html#chunking-strategy) make sure that the second chunk is dynamically imported only when it's needed you might run into many issues though depending on what you need to set up in the second chunk, global stuff like routes and such will probably have to stay in the initial chunk
14 replies