POC: feat: enable to write jsx to streaming api #1913
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sor4chi
changed the title
sor4chi
force-pushed
the
feat/stream-can-send-jsx
branch
2 times, most recently
from
ddba75d to
d5a8136
Compare
sor4chi
force-pushed
the
feat/stream-can-send-jsx
branch
from
d5a8136 to
3ef835b
Compare
|
@sor4chi @yusukebe import { jsx } from '../jsx'
import { renderToReadableStream } from '../jsx/streaming'
import { StreamingApi } from './stream'
describe('StreamingApi', () => {
it('pipe(no promised hono/jsx)', async () => {
const Component1 = () => <span>foo</span>
const Component2 = () => <span>bar</span>
const { readable, writable } = new TransformStream()
const api = new StreamingApi(writable, readable)
const reader = api.responseReadable.getReader()
await api.pipe(renderToReadableStream(<Component1 />))
expect((await reader.read()).value).toEqual(new TextEncoder().encode('<span>foo</span>'))
await api.pipe(renderToReadableStream(<Component2 />))
expect((await reader.read()).value).toEqual(new TextEncoder().encode('<span>bar</span>'))
})
it('pipe(promised hono/jsx)', async () => {
const Component1 = async () => {
await new Promise((resolve) => setTimeout(resolve, 100))
return <span>foo</span>
}
const Component2 = async () => {
await new Promise((resolve) => setTimeout(resolve, 100))
return <span>bar</span>
}
const { readable, writable } = new TransformStream()
const api = new StreamingApi(writable, readable)
const reader = api.responseReadable.getReader()
await api.pipe(renderToReadableStream(<Component1 />))
expect((await reader.read()).value).toEqual(new TextEncoder().encode('<span>foo</span>'))
await api.pipe(renderToReadableStream(<Component2 />))
expect((await reader.read()).value).toEqual(new TextEncoder().encode('<span>bar</span>'))
})
}) |
|
Like this? const app = new Hono()
const HTML = () => (
<html lang='en'>
<body>
<template shadowrootmode='open'>
<slot name='component1'>
<p>Loading...</p>
</slot>
</template>
</body>
</html>
)
const Component = () => (
<div slot='component1'>
<h1>Hello Hono!</h1>
</div>
)
app.get('/', (c) => {
return stream(c, async (stream) => {
await stream.pipe(renderToReadableStream(<HTML />))
await stream.sleep(1000)
await stream.pipe(renderToReadableStream(<Component />))
})
}) |
|
@yusukebe |
|
How about writing this thing as a "snippet" on our website? |
3 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Author should do the followings, if applicable
yarn denoifyto generate files for DenoIf JSX can be delivered via streamingAPI, as in the tweet below, it would be a nice match with the shadowrootmode of web components and allow components to be changed dynamically from the server without client JS.
https://x.com/shou_study/status/1743996737696764069?s=20
Demo:
Code
2024-01-08.3.22.52.mov