Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Document passing a custom app wrapper

See original GitHub issue

I think fresh should allow passing a custom document wrapper in the same manner next does. See https://github.com/denoland/fresh/blob/8d118a2d3055a7b5e734a9f2af838fdc14fe5c32/src/server/render.tsx#L270. This would for example allow to set twind classes on the html element to support light/dark color schemes at a system level via media preferences, and also manually (see https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually=)

It would probably need abstracting of this template function some more since it contains parts that you might want to hide from the user (i see some dangerouslySetInnerHTML etc)

To give a bit more of an idea about the context the first thing I tried after generating a project with twind is changing the darkMode to media and setting a dark mode background class property on the page, however to handle changing the background of the html element i would need to set the class on there or on the body at least. Currently the only way this would be possible is to make a container that has the same size as body which I find a bit “hacky” and not really intended practice from what I gather from tailwind docs.

It would probably allow for more flexibility outside of this specific use case also.

See https://nextjs.org/docs/advanced-features/custom-document for inspiration maybe.

EDIT: this appears to actually be possible already although not documented (as far as I could tell) https://github.com/denoland/fresh/commit/04a32f34987fbd59ce646967f216b2cca072a58f

Issue Analytics

State:
Created a year ago
Reactions:16
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

EccentricVampcommented, Oct 31, 2022

Relevant comment from a separate issue: https://github.com/denoland/fresh/issues/491#issuecomment-1181769820

TL;DR: _app.tsx is undocumented because it might be replaced

0reactions

jukefrcommented, Jul 12, 2022

There does in fact appear to be an undocumented app wrapper feature available since https://github.com/denoland/fresh/commit/04a32f34987fbd59ce646967f216b2cca072a58f (did not pick this up at first quick glance at the source oops) I guess it would be more adequate to switch this issue to adding documentation about it.

Top Results From Across the Web

Advanced Features: Custom `App` - Next.js

Custom App · Persist layouts between page changes · Keeping state when navigating pages · Custom error handling using componentDidCatch · Inject additional...

How To Create Wrapper Components in React with Props

Finally, you'll pass components as props to create flexible wrappers that can embed custom JSX in multiple locations in a component.

Customize and build your mobile app - Power Apps

Both single tenant and multitenant customers can use wrap to create native mobile apps based on their Power Apps canvas apps. Whether you...

Preparing your app for distribution - Apple Developer

Prepare your Xcode project for distribution before you upload a build to App Store Connect or export a build to distribute it outside...

Creating a custom property wrapper using DynamicProperty

First, the easy part: we're going to create a new property wrapper struct called Document that will store its value as a string,...