I spent some time today coming up with a design that is closer to Helmet. It's a naive implementation, but it works well and can provide more flexibility than solid-meta's current design.
The <Title> component looks for a <title> elements inside <head> and then overwrites their textContent with the value of the text prop. It also allows the developer to provide a formatter function that is passed the desired text--say, a specific page's title--and, in my example, append the website name to the end of it. The code sets the <title> element's textContent property to My Page - My Site. I'm wondering if it would be better to change document.title directly, but I'm not sure of the pros and cons.
The <Meta> component is similar in that it looks for matching elements inside <head> and, if they exist, overwrites their content properties. If they don't exist, a new <meta> element is created.
The design of each head tag component could be improved to allow for all props similar to your existing code. I didn't do that for the sake of brevity.
I don't have any performance-related code in my example (e.g., no refs). I'm also not sure if my reactivity code is correct (I tried to write code similar to your current implementation). I am still very new to SolidJS.
I spent some time today coming up with a design that is closer to Helmet. It's a naive implementation, but it works well and can provide more flexibility than
solid-meta
's current design.HeadProvider.tsx
:Example usage:
The
<Title>
component looks for a<title>
elements inside<head>
and then overwrites theirtextContent
with the value of thetext
prop. It also allows the developer to provide a formatter function that is passed the desired text--say, a specific page's title--and, in my example, append the website name to the end of it. The code sets the<title>
element'stextContent
property toMy Page - My Site
. I'm wondering if it would be better to changedocument.title
directly, but I'm not sure of the pros and cons.The
<Meta>
component is similar in that it looks for matching elements inside<head>
and, if they exist, overwrites theircontent
properties. If they don't exist, a new<meta>
element is created.The design of each head tag component could be improved to allow for all props similar to your existing code. I didn't do that for the sake of brevity.
I don't have any performance-related code in my example (e.g., no refs). I'm also not sure if my reactivity code is correct (I tried to write code similar to your current implementation). I am still very new to SolidJS.