solid-router icon indicating copy to clipboard operation
solid-router copied to clipboard

💥 !Define `searchParamIntegration`! 💥

Open devinrhode2 opened this issue 2 years ago • 1 comments

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 avatar Aug 23 '23 15:08 devinrhode2

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

devinrhode2 avatar Aug 30 '23 14:08 devinrhode2