Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New components <Head> and <Config> #105

Closed
brillout opened this issue Aug 7, 2024 · 13 comments
Closed

New components <Head> and <Config> #105

brillout opened this issue Aug 7, 2024 · 13 comments
Labels
contribution-welcome 💕 enhancement ✨ New feature or request

Comments

@brillout
Copy link
Member

brillout commented Aug 7, 2024 •
edited
Loading

vike-solid now has a useConfig() component hook (see PR #102).

The only thing missing to align with vike-react is to implement the <Config> and <Head> components.

My failed attempt to implement it: #104.

Contribution welcome.
@phonzammi
Copy link
Member

Does the <Head> component need to be hydrated?

@brillout
Copy link
Member Author

brillout commented Aug 7, 2024 via email

@phonzammi
Copy link
Member

We can wrap it with solidjs's <NoHydration> component

@brillout
Copy link
Member Author

brillout commented Aug 7, 2024

Neat, although it's the user who would nead to do the wrapping right?

@phonzammi
Copy link
Member

AFAIK, yes, and it’s a bit of a bummer

@phonzammi
Copy link
Member

Another workaround is using solidjs's <Show> component like this:

<Show when={isServer}>
  <Head>
    <script
      type="application/ld+json"
      innerHTML={JSON.stringify({
        "@context": "https://schema.org/",
        contentUrl: { src },
        creator: {
          "@type": "Person",
          name: author,
        },
      })}
    ></script>
  </Head>
</Show>

@brillout
Copy link
Member Author

brillout commented Aug 7, 2024

it’s a bit of a bummer

Indeed, but better than no solution at all though.

@brillout
Copy link
Member Author

brillout commented Aug 8, 2024

I wonder if <Show when={import.meta.env.SSR}> would enable code elimination.

@phonzammi
Copy link
Member

<Show when={import.meta.env.SSR}> also works

@brillout
Copy link
Member Author

brillout commented Aug 8, 2024

<Show when={import.meta.env.SSR}> also works

Indeed.

Although it doesn't seem to remove <Head> on the client-side:

image

@brillout
Copy link
Member Author

brillout commented Aug 8, 2024

Let's see what Ryan says 👀 solidjs/solid#2248 (comment)

@brillout
Copy link
Member Author

brillout commented Aug 9, 2024

Done: #105.

@phonzammi FYI this did the trick.

@brillout brillout closed this as completed Aug 9, 2024
@phonzammi
Copy link
Member

Neat trick 💯

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
contribution-welcome 💕 enhancement ✨ New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@brillout @phonzammi