andi Comments - Answer Overflow

Topics

andi

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

•Created by Madaxen86 on 10/31/2023 in #support

Capture events from child of Portal

by manually i mean doing portalEl.addEventListener("pointerdown"... in the onMount

7 replies

•Created by Madaxen86 on 10/31/2023 in #support

Capture events from child of Portal

a bit hacky but you could add the event listener manually on the portal element

7 replies

•Created by Madaxen86 on 10/31/2023 in #support

Capture events from child of Portal

i think what's happening is that using this form of listener oncapture:pointerdown is hooking directly into the html listener, and since the button is not a child of that element the event doesn't bubble up if you were to use onPointerDown it'd work because solid is doing extra work to bubble up the event to parent components too not just DOM parents but i guess you need the captured pointer down event for a reason why not add the listener on the button directly?

7 replies

•Created by kalempster on 10/21/2023 in #support

Global store in Solid Start app

so in a server context, there is only one instance of the solid library managing things, just like there's only one instance running for a client on a webpage if you think of solid like a container, all requests from different clients go in the same container that means that any global state you have will be shared between all clients, which you generally don't want to do because each user should only have access and modify to their own data

export const [globalState, setGlobalState] = createStore({});

// any user requesting the page with this component will receive the same number, since they're all sharing the global state
<div>{globalState.cartItems.length}</div>

export const [globalState, setGlobalState] = createStore({});

// any user requesting the page with this component will receive the same number, since they're all sharing the global state
<div>{globalState.cartItems.length}</div>

the solution to that is to put your global state in a place where it gets created separately for each different request the recommended way to do it in solid-start would be to create a new store somewhere inside the root.tsx component, and passing it to children with a context provider if you do it like that, you can't import the state directly anymore, you have to use a useContext hook

2 replies

•Created by dion on 10/31/2023 in #support

Unable to find modules

seems to me like the import alias @ is not set up to point to the root of your project if you're not getting any errors in your editor then typescript is probably set up properly you can either use this to sync your vite paths to the typescript.json file: https://www.npmjs.com/package/vite-tsconfig-paths or do it yourself with adding something like this to your vite.config.ts:

resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
}

resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
}

3 replies

•Created by Jakob on 10/27/2023 in #support

Resetting state in child component

fyi there's also a component in solid-primitives that does this if you want a "cleaner-looking" solution

import { Rerun } from '@solid-primitives/keyed';

<Rerun on={signal}>
  <ChildComponent/>
</Rerun>

import { Rerun } from '@solid-primitives/keyed';

<Rerun on={signal}>
  <ChildComponent/>
</Rerun>

5 replies

•Created by crowned on 10/30/2023 in #support

How to allow updating of elements instead of destroying and rendering the elements?

for a different idea from what has been mentioned: you could use a virtual scrolling/ list component the gist of it is that it only renders the elements that are in the viewport https://github.com/minht11/solid-virtual-container

61 replies