Make dev overlay lazy

[brenelz]

PR Checklist

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• infrastructure changes
• Other... Please describe:

What is the current behavior?

The current behavior is that the syntax highligher always loads with the pages even when there is no error

What is the new behavior?

The new behavior makes the dev overlay lazy so it only loads the syntax highlighting when their is an actual error.

I may be misunderstanding something, and this won't work but seems like it would.

[changeset-bot]

⚠️ No Changeset found

Latest commit: da9ed21

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[pkg-pr-new]

Open in Stackblitz

More templates

• example-bare
• example-basic
• example-experiments
• example-hackernews
• example-notes
• example-todomvc
• example-with-auth
• example-with-authjs
• example-with-drizzle
• example-with-mdx
• example-with-prisma
• example-with-solid-styled
• example-with-tailwindcss
• example-with-trpc
• example-with-unocss
• example-with-vitest

pnpm add https://pkg.pr.new/@solidjs/start@1641

commit: da9ed21

[lxsmnsyc]

clientOnly is already lazy. The reason we need clientOnly is because part of the component loads libraries that are meant to be on the client-side.

[brenelz]

Yeah maybe I don't understand clientOnly vs lazy. I just noticed it loads the shiki library even when the overlay isn't present in dev mode. I'd think it would only load that javascript if the <DevOverlay /> is shown?

[ryansolid]

It isn't actually lazy.. we preload clientOnly even if it isn't rendered yet. So the desire here is legit. I think we need to both. Maybe a prop. Let me think of something.

[lxsmnsyc]

@ryansolid yeah I just realized. We could probably rework clientOnly to be lazy by default, there isn't exactly a pro and con for it not being lazy right?

[ryansolid]

I did preload intentionally so that it would load slightly faster even if not rendered right away. I was coming from the perspective that you wanted the code to only run in the client not to be lazy. It is easy to add it as an options argument. I think I will just do that.

[ryansolid]

I fixed it a different way by adding lazy option to clientOnly.