search

solidjs / solid-router

A universal router for Solid inspired by Ember and React Router
MIT License
1.14k stars 147 forks source link

💥 !Define `searchParamIntegration`! 💥 #291

Open devinrhode2 opened 1 year ago

devinrhode2 commented 1 year ago

Context: I am building a SolidStart app which will be embedded into other non-Solid-based apps by simply injecting the html+scripts of the SolidStart app at runtime. Once an initial URL is constructed for the SolidStart app, a component similar to this is used to inject the scripts + html. The html+scripts come from my SSR'd SolidStart app.

Context2: To make this SolidStart "widget" or "micro-frontend" truly isomorphic, it needs to add some state into the url. (Cookies could be another option). This of course allows the server to SSR the right page.

This PR creates a new way for Solid apps to handle routing, where the pathname and search params for a solid app are encoded into a single search param. This allows Solid apps to be embedded into larger apps without adversely affecting their url.

Host url: /hPath1/hPath2?hParam1=hParam1Value#hHash Solid app's url: const solidUrl = '/sPath1/sPath2?sParam1=sParam1Value#sHash'

Host app's url, with Solid app embedded inside it:

  1. Set query param: searchParamIntegration('CARNIATOMON')
  2. Encode it: /hPath1/hPath2?hParam1=hParam1Value&CARNIATOMON=${encodeURIComponent(solidUrl)}#hHash
  3. Fully encoded: /hPath1/hPath2?hParam1=hParam1Value&CARNIATOMON=%2FsPath1%2FsPath2%3FsParam1%3DsParam1Value%23sHash#hHash
devinrhode2 commented 1 year ago

I guess I'm pioneering... "isomorphic micro-frontends"... 🤣