Repository navigation
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| import { captureHtmlImage } from '@paper-design/shaders'; | ||
|
|
||
| export function hasChildren(children: React.ReactNode): boolean { | ||
| return Children.toArray(children).length > 0; |
There was a problem hiding this comment.
nit: we can just use Children.count(children) here (and then inline it because the intermediate function isnt needed)
| export const HtmlCanvas: React.ForwardRefExoticComponent<HtmlCanvasProps & React.RefAttributes<HTMLDivElement>> = | ||
| forwardRef<HTMLDivElement, HtmlCanvasProps>(function HtmlCanvasImpl({ children }, ref) { | ||
| return ( | ||
| <canvas {...{ layoutsubtree: '' }}> |
There was a problem hiding this comment.
fyi this is changing to content="drawable" WICG/html-in-canvas#179 so would need to support both that + layoutsubtree
anywhere we can be backwards + forwards compatible the better
also make a types file html-in-canvas.d.ts and get your agent to define the types so it doesnt have to work around types not existing by spreading an object
|
|
||
| /** A `<canvas layoutsubtree>` that lays out its children so they can be captured into shader textures */ | ||
| export const HtmlCanvas: React.ForwardRefExoticComponent<HtmlCanvasProps & React.RefAttributes<HTMLDivElement>> = | ||
| forwardRef<HTMLDivElement, HtmlCanvasProps>(function HtmlCanvasImpl({ children }, ref) { |
There was a problem hiding this comment.
forward ref isn't needed anymore, just pass ref as prop
| } | ||
|
|
||
| /** A `<canvas layoutsubtree>` that lays out its children so they can be captured into shader textures */ | ||
| export const HtmlCanvas: React.ForwardRefExoticComponent<HtmlCanvasProps & React.RefAttributes<HTMLDivElement>> = |
There was a problem hiding this comment.
nit: im a fan of calling things like HTMLCanvas rather than Html. since it's about capturing could also do HTMLCanvasCapture
| children?: React.ReactNode; | ||
| } | ||
|
|
||
| /** A `<canvas layoutsubtree>` that lays out its children so they can be captured into shader textures */ |
There was a problem hiding this comment.
do we need to do anything to make sure hit testing works? e.g. if people want to put live elements into one of our shaders
| isEnabled: boolean, | ||
| processImage: (url: string) => Promise<Blob> | ||
| ): string | undefined { | ||
| const [processedUrl, setProcessedUrl] = useState<string>(); |
There was a problem hiding this comment.
what would this look like if we didn't need to set state to pass on new image data? or is this mainly the preprocessing for logo shaders?
e.g. either every frame the shader is running, or when the html children change on the paint event, we pull or push the image data?
| } | ||
|
|
||
| /** A `<canvas layoutsubtree>` that lays out its children so they can be captured into shader textures */ | ||
| export const HtmlCanvas: React.ForwardRefExoticComponent<HtmlCanvasProps & React.RefAttributes<HTMLDivElement>> = |
There was a problem hiding this comment.
would also recommend us testing out using browser() from the new react 19.3 api https://react.dev/blog/2026/09/09/react-19-3#browser
lets us ensure components only run on the browser. on the server they suspend.
…port removed + updated demos
…ich can replace u_imagePremultiplied)
This branch was successfully deployed
2 participants
No description provided.