Repository navigation
Support router integrations of solid-app-router #96
Description
example usage: src/entry-client.tsx
import { render } from "solid-js/web";
import { hashIntegration } from "solid-app-router";
import { StartClient } from "solid-start/entry-client";
render(() => <StartClient routerIntergration={hashIntegration} />, document.body);example change: packages/start/entry-client/StartClient.tsx
import { MetaProvider } from "solid-meta";
import { Router } from "solid-app-router";
import { StartProvider } from "../entry-server/StartContext";
import Root from "~/root";
const rootData = Object.values(import.meta.globEager("/src/root.data.(js|ts)"))[0];
const dataFn = rootData ? rootData.default : undefined;
// typeof routerIntergration = RouterIntegration | undefined
// TODO: validate routerIntergration
export default ({ routerIntergration }) => {
return (
<StartProvider>
<MetaProvider>
<Router source={routerIntergration && routerIntergration()} data={dataFn}>
<Root />
</Router>
</MetaProvider>
</StartProvider>
);
};I hardcoded hashIntegration from the above solution, the outcome looks good to me
Activity
[-]feat required for [solid-app-router]: support router integrations[/-][+]Support router integrations of `solid-app-router`[/+][-]Support router integrations of `solid-app-router`[/-][+]Support router integrations of solid-app-router[/+]ryansolid commentedon Mar 24, 2022
I've been thinking about exposing this more. The challenge in Solid is that component depth affects hydration so I sort of didn't want to expose the context tree. I'm thinking though this might be better to just do. But yeah now that we support client only mode I think having the ability to do hash routing makes sense.
nksaraf commentedon Jun 28, 2022
@rturnq Could you review this once and see if its okay to do, and if there is anything we should consider specially? Otherwise I'll implement it as suggested
zackpi commentedon Mar 1, 2023
Is this still under consideration? Or is there another way to use "hashIntegration" with solid-start
devinrhode2 commentedon Aug 6, 2023
I also have a need to do hash routing. My SolidStart app be loaded into another app as a "widget", hence, I don't want to modify the main url path.
dug through the code and concluded the easiest change is to add a prop to
<StartClientdevinrhode2 commentedon Aug 6, 2023
devinrhode2 commentedon Aug 6, 2023
Even if there was a
<Router>in my generated root.tsx, I probably would still have searched Google for "solid.js/SolidStart hash routing" to find out what the prop is, at least.I don't know what the performance cost is, but the cost in dx is very tiny imo. Adding a prop to
<StartClientseems best.devinrhode2 commentedon Aug 7, 2023
Although hash routing would work for my use case, I'd definitely prefer a kind of query string/searchParams based routing mechanism. I think it only really makes sense when embedding solid into larger apps.
devinrhode2 commentedon Aug 9, 2023
devinrhode2 commentedon Aug 9, 2023
I think a prop passed to
<StartClientand<StartServershould be pretty easy, but would we then have some duplication across client/server? Maybe for hash/memory/sessionStorage routing, would we only need to pass something into<StartClientand not<StartServer?And ryan said this will have an effect on hydration... I don't even know if hard-coding in a different router source will even work...
devinrhode2 commentedon Aug 24, 2023
@nksaraf @ryansolid @zackpi @timbasel @arksun-bc @rturnq - I have opened a PR here: #1026