Maciek50322 Comments - Answer Overflow

I avoided doing this Protected template, because I use vite-plugin-pages and because there is no unnamed route group, this would look like /protected/home. Tho I think this can be configured there with dirs setting, but still, having routes represented in folder / file names with exceptions written out in different settings file would make it more confusing. So I think I'll switch to component routes and use this.

20 replies

SSolidJS

•Created by Maciek50322 on 3/28/2025 in #support

Solid router, suspense and navigate

Okay, now it's clear, after removing suspense from <App> and putting it deeper - in each page - it works as expected

20 replies

SSolidJS

•Created by Maciek50322 on 3/28/2025 in #support

Solid router, suspense and navigate

The /about page is loading for 10s not because of asyncs or resources, but because it's size is big and network takes this time to fetch the js file and might have only static content

20 replies

SSolidJS

•Created by Maciek50322 on 3/28/2025 in #support

Solid router, suspense and navigate

Yeah so Show doesn't actually change anything... unless I do so

export default function App(props: { children: JSX.Element }) {
  const navigate = useNavigate();
  const location = useLocation();
  createRenderEffect(() => {
    if (location.pathname !== "/login") navigate("/login")
  });

  const [show, setShow] = createSignal(false);
  onMount(() => {
    setTimeout(() => {
      setShow(true);
    });
  });

  return (
    <Show when={show()}>
      <Suspense>{props.children}</Suspense>
    </Show>
  );
}

export default function App(props: { children: JSX.Element }) {
  const navigate = useNavigate();
  const location = useLocation();
  createRenderEffect(() => {
    if (location.pathname !== "/login") navigate("/login")
  });

  const [show, setShow] = createSignal(false);
  onMount(() => {
    setTimeout(() => {
      setShow(true);
    });
  });

  return (
    <Show when={show()}>
      <Suspense>{props.children}</Suspense>
    </Show>
  );
}

This code above achieves what I want. It doesn't even fetches /home, so just shows /login when it loads. I like this, I can prefetch /home on my own. Without setTimeout it doesn't work. I don't like that I have to do this with setTimeout, because I'm not sure if this behavior will be consistent. Your solution with createAsync probably will work too, because getting account can take some time. But going back: authorization is not point of this question. What I mean is to force suspense to resolve when latest route is loaded, not all previously requested. To visualize: We have suspense on props.children, which is current route component.

<Suspense>{props.children}</Suspense>

<Suspense>{props.children}</Suspense>

User first clicks button to go to /about, this page is big, it takes 10s before it loads. So in first second of waiting, user gets bored by waiting and clicks button that navigates to /home, which is very small, it takes 1s before it's loaded OR maybe it's even prefetched, so it takes no time to load it.

<>
  <Button onClick={() => navigate("/about")}>
    About
  </Button>
  <Button onClick={() => navigate("/home")}>
    Home
  </Button>
</>

<>
  <Button onClick={() => navigate("/about")}>
    About
  </Button>
  <Button onClick={() => navigate("/home")}>
    Home
  </Button>
</>

What actually happens is user is waiting for 9 more seconds, until he is redirected to /home, even though it's been loaded this whole time. User changed his mind and doesn't want to go to /about, he wants to go to /home, but has to wait until/about is loaded.

20 replies

SSolidJS

•Created by Maciek50322 on 3/28/2025 in #support

Solid router, suspense and navigate

I think the Show can do someting but I'll try it when I get back

20 replies

SSolidJS

•Created by Maciek50322 on 3/28/2025 in #support

Solid router, suspense and navigate

I'll check it out later, but point of this question wasn't authentication, but rather about suspense behaviour when loading bigger files with instant redirection

20 replies

SSolidJS

•Created by Maciek50322 on 3/28/2025 in #support

Solid router, suspense and navigate

How to do that? How can I get loading state of route? And what do you mean about conditionally rendering components?

20 replies

SSolidJS

•Created by KiaClouth on 10/14/2024 in #support

How to reduce undefined judgments

I mean in every context that executes after onMount (in which you set the engine) you are guarenteed to have not null engine(), so you can write engine()!.dispose() Also if you don't like the ! you can do

const e = engine();
if (e) {
  e.scene = {}
}

const e = engine();
if (e) {
  e.scene = {}
}

19 replies

SSolidJS

•Created by KiaClouth on 10/14/2024 in #support

How to reduce undefined judgments

Well when you want to use the engine inside jsx, then Show can do it the way I used it above. Inside onMount and createEffect it's guaranteed that refs will not be nulls (if they are actually used / mounted).

19 replies

SSolidJS

•Created by KiaClouth on 10/14/2024 in #support

How to reduce undefined judgments

You can do something like that with <Show> https://playground.solidjs.com/anonymous/759ff1d4-b587-4a1c-b14f-375556f39642 when you pass the function to <Show>'s children, you get the argument of accessor to truthy when value

19 replies

SSolidJS

•Created by jrainearwills on 10/13/2024 in #support

`createContext`, What's the point?

You can pass the component state to children, without knowing which ones will need / use this state, I used it like here:

function DraggableNodesArea(props) {
  const [zoom, setZoom] = createSignal(1);
  return (
    <NodesAreaContext.Provider
      value={{
        zoom,
      }}
    >
      {props.children}
    </NodesAreaContext.Provider>
  );
}

function DraggableNode(props) {
  const areaInfo = useContext(NodesAreaContext);
  return (
    ...
  );
}

function App() {
  return (
    <DraggableNodesArea>
      <DraggableNode x={...} y={...}/>
      <DraggableNode x={...} y={...}/>
      <DraggableNode x={...} y={...}/>
    </DraggableNodesArea>
  );
}

function DraggableNodesArea(props) {
  const [zoom, setZoom] = createSignal(1);
  return (
    <NodesAreaContext.Provider
      value={{
        zoom,
      }}
    >
      {props.children}
    </NodesAreaContext.Provider>
  );
}

function DraggableNode(props) {
  const areaInfo = useContext(NodesAreaContext);
  return (
    ...
  );
}

function App() {
  return (
    <DraggableNodesArea>
      <DraggableNode x={...} y={...}/>
      <DraggableNode x={...} y={...}/>
      <DraggableNode x={...} y={...}/>
    </DraggableNodesArea>
  );
}

Global state for this DraggableNodesArea doesn't really make sense here. I use the zoom to properly change nodes' x and y. If I were to retrieve the zoom (which is controlled by DraggableNodesArea) outside to App just to pass them as props to DraggableNode is just more mess, and the DraggableNodesArea is reusable - you can have multiple "tree" states instead of one global

5 replies

SSolidJS

•Created by Guillaume on 9/21/2024 in #support

Proxy error

If you want to pass control to the function caller, you can do something like that:

const changeConfig: SetStoreFunction<Config> = (...configNextSetterArgs: any[]) => {
  batch(() => {
    (setState as any)("config", ...configNextSetterArgs);
    setState(produce(state => {
      state.victories = 0;
      state.losses = 0;
      state.isRunning = false;
      const graph = getGraph(state);
      state.machine = graphToMachine(graph, state.config.ballsPerColor);
    }))
  })
}

const changeConfig: SetStoreFunction<Config> = (...configNextSetterArgs: any[]) => {
  batch(() => {
    (setState as any)("config", ...configNextSetterArgs);
    setState(produce(state => {
      state.victories = 0;
      state.losses = 0;
      state.isRunning = false;
      const graph = getGraph(state);
      state.machine = graphToMachine(graph, state.config.ballsPerColor);
    }))
  })
}

I added ...configNextSetterArgs: any[], (setState as any), because typescript can't match the types for SetStoreFunction, probably because it's quite complex

5 replies

SSolidJS

•Created by Guillaume on 9/21/2024 in #support

Proxy error

I see that you use changeConfig different ways

changeConfig(c => setGraphType(c, e.currentTarget.value))
...
changeConfig(produce(conf => {
  (conf.graphType as KingType).width = Number(e.currentTarget.value);
}))

changeConfig(c => setGraphType(c, e.currentTarget.value))
...
changeConfig(produce(conf => {
  (conf.graphType as KingType).width = Number(e.currentTarget.value);
}))