SolidJS•5mo ago

Use solid as middleware

Goal: parse existing html from third party server, read all data-component attributes from HTML, load dynamic component based on data-component attribute and then return newly rendered HTML w/ interactivity. Hi I would like to create a Solid-Middleware so to speak. I want to parse a given HTML and look for tells to load components dynamically and then return it all to the browser. How would you start doing this? The following markup would be for example fetched dynamically based on given slug

<html>
  <body>
    <h1>this is a headline</h1>
    <p>some para text</p>
    <div data-component="features"></div>
    <p>some more text</p>
  </body>
</html>

<html>
  <body>
    <h1>this is a headline</h1>
    <p>some para text</p>
    <div data-component="features"></div>
    <p>some more text</p>
  </body>
</html>

The goal is to parse, load features.tsx, render it on the server and also make it so that it can be used with interacitivty on the client Any advice is welcome.

6 Replies

thetarnav•5mo ago

looks like you already know what to do some html parser and a bunch of <Dynamic> components to put it together again

Helge•5mo ago

But can I leverage Solid Start for that @thetarnav ? and how would you gobble the given html together ? I was initially thinking about a replace w/ jsdom transform, back to html and then pass it to the html``-tagged template but you cannot pass down a string like that from a var i think,.. atleast I didnt figure out how to

thetarnav•5mo ago

tagged templates don’t support ssr anyway you could to have the server and client setup for ssr but it won’t help with parsing html part

Helge•5mo ago

the naive solution would be to do some jsdom transform and then children.forEach(child => <Dynamic as={child.tagName} />) with some branching of switch(node.dataset.component){} but that feels wrong to me, there must be a cleaner way ? template() is nice but only works on client as well so Ideally I would have a ssrTempalte(html-string) as root that would then handle all

thetarnav•5mo ago

I’m not sure if it’s naive that’s what site builders like builder.io do with solid but since you only have few places with a component, and the rest is static html there should be a different way too on the server you can use renderToString for the dynamic components and concatenate to have the html response on the client those components need to be hydrated to be interactive the astro adapter might be worth looking at

Helge•5mo ago

oh is that so?

Gaming

Programming

Use solid as middleware