Comments (10)
Sorry for the delayed reply.
HonoX generates a wrapper
<honox-island>
tag that interferes with the CSS parent/child relationship and the CSS rule isn't applied.
Yeah, this causes some problems, including the CSS issue. We'll try to fix it.
from honox.
Astro has the same issue. One user wrote a blog post about how to apply CSS to islands in the Astro application:
https://zellwk.com/blog/overcoming-astro-styling-frustrations/
Astro and Hono are using the same strategy for islands that apply additional tags like hono-island
or astro-island
. It causes the problem. This means to avoid this, we have to give up using the strategy. So I'm wondering if we can use a "comment" strategy: #158
However, if using the "comment" strategy is difficult or impossible, we have to keep using hono-island
and make this CSS matter a "known issue".
from honox.
Hi @usualoma
I need your help! What do you think about this issue? I've been struggling to resolve it for a long time, but I can't. This means using hono-island
tags will break HTML structures, so it causes unexpected behavior for applying CSS. Another way to implement the "comment" strategy is very difficult.
from honox.
This is a difficult issue.
I understand that the current hono-island
affects evaluating CSS.
To avoid the impact on evaluating CSS, I think a comment node would be appropriate, as you say, but we can't directly put it out in React.
If we were to do this, we could use the script element
It's like #158 (comment) or rewrite it with a regex in renderer.
https://github.com/honojs/middleware/blob/main/packages/react-renderer/src/react-renderer.ts#L57
If you ask whether it's possible or impossible, I think it's possible, but it's not so clean.
If this is only "to solve the CSS problem", then I feel that the current hono-island
approach would be better.
#155 (which doesn't happen with hono/jsx/dom, but with React's hydrateRoot, I think) is worth considering if this solves the problem. (I haven't checked to see if this solves it)
Well, Maaaybe,
Although this is not clean, I think the performance is not so bad if we implement it with a bit of ingenuity. I think I'll give it a try.
from honox.
Ah, using React, would we be able to insert a component later in the middle of a DOM node such as
<div>
Before.
<ClientComponent />
After
</div>
Current honox is fine as <honox-island>
is the target to hydrate, but if we use comments to search for targets, we lose a single hydrate destination I don't think this is possible with React's API. (Not even the current hono/jsx/dom can do this, but I think we can add the functionality)
Do you know if such hydration is possible in React?
from honox.
@usualoma Thank you for your response!
If this is only "to solve the CSS problem", then I feel that the current
hono-island
approach would be better.
I'm also thinking so. Since, as you said, using the comment strategy is "not clean," it will be better to use hono-island
.
Do you know if such hydration is possible in React?
Hmm. Indeed, I think it is impossible...
By the way, Fresh is following the comment strategy:
https://fresh.deno.dev/docs/concepts/islands#passing-other-props-to-islands
<!--frsh-myisland_default:default:0-->
<div>
Counter is at 0.
<button>+</button>
<!--frsh-slot-myisland_default:children-->
<p>This text is rendered on the server</p>
<!--/frsh-slot-myisland_default:children-->
</div>
<!--/frsh-myisland_default:default:0-->
But in the Fresh case, it uses only Preact, so it can add comments in the rendering phase. What we want to do is support any JSX UI library, at least hono/JSX, and React, so we have to do it in the Vite/JSX translation phase. Both are different.
Then, my current answer is to keep using hono-island
though we have to resolve #155.
from honox.
I have an idea to solve #155 but I think we need to use useContext
on the server side.
Set up as follows,
export default defineConfig({
plugins: [honox({
useContextModule: 'react',.
// this setting is used in server side
// default is 'hono/jsx'
})],
})
The following line is automatically inserted.
import { useContext } from 'react'
I don't want to add the server configuration item if possible, but I don't think there is any other way.
Do you think this is the way to do it?
from honox.
I don't want to add the server configuration item if possible, but I don't think there is any other way.
Hmm. I also don't want to do it.
One of my interesting ideas. How about using this method, which it can mark if it is a client component or not by adding $client
attribute:
app.get('/', (c) => {
return c.render(
<>
<Counter $client initial={3} />
</>
)
})
I've tried a super rough implementation as PoC:
https://github.com/yusukebe/hydrate-dollar-client
This demo can avoid a hydration error, and it is rendered as we expected. One of the good things is we can use named exported components, not just exported as a default
. BUT, the interaction in the children component is not working. Anyway, can you see the repo?
from honox.
I think it's an awesome idea! And you're right, the "Nemed exported component" problem is solved too!
hydrate-dollar-client
I think the implementation is also largely fine, but I think the biggest issue is here.
https://github.com/yusukebe/hydrate-dollar-client/blob/main/src/client.ts#L34
If I build the production version as is, I think all the code for the server will be included in the distribution files.
However, I think we need to think about solving the "nested islands" problem separately. I don't think the "hydrate-dollar-client" will solve this.
Also, if we want to use the "Nemed exported component", then the current '/app/islands/**/[a-zA-Z0-9[-]+. (tsx|ts)' as it is, we could wrap "functions exported with names beginning with a capital letter" in the same way as the default export. There should be no confusion, as utility functions are generally not exported with names beginning with a capital letter, and names beginning with a capital letter can be regarded as function components.
from honox.
I don't want to add the server configuration item if possible, but I don't think there is any other way.
Hmm. I also don't want to do it.
Oh, I have a feeling that if I use tsconfig's, config.compilerOptions.jsxImportSource
, I can run it in most environments without any additional configuration.
I'll try to write some code.
from honox.
Related Issues (20)
- Use mutationObserver to monitor for new components on the screen
- Using the React library in HonoX with hono/jsx/dom HOT 1
- Nested islands hydrate error HOT 1
- Build break by missing file or directory react/jsx-runtime?inside-island HOT 1
- When island components are nested, the child island is broken HOT 6
- Nested islands hydrate error 2 HOT 2
- Support named export not only `default` in Islands HOT 1
- support CSP nonce for `<Script>` component HOT 1
- Use comments instead of `honox-island` for marking islands HOT 3
- It would be nice to place islands anywhere, not just in routes and islands directories. HOT 4
- Is it possible to use React component frameworks? HOT 1
- Partials HOT 1
- `Script` and `HasIsland` to be available even if react is used for runtime HOT 2
- `nonce` attribute should be added only in production? HOT 4
- React Server Components (RSC) HOT 1
- routing for .well-known is 404 HOT 1
- _middleware.ts in param router doesn't trigger HOT 4
- Global (or cascading) error page HOT 1
- Support `.md` / custom extension omission HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from honox.