Skip to content

Conversation

@remorses
Copy link

@remorses remorses commented Feb 26, 2025

Resolves #21

  • Added a function renderAsync which supports rendering async components, sequentially
  • Added support for useContext as a way to pass down props easily, it works with async components too
  • To support concurrency in jsx getCurrentElement I have had to create a closure for the builtin components, which now can be instantiated with their own getCurrentElement which can accept a scoped stack
  • I also had to update the @types/react package to have support for async components in jsx, also notice that since react 19 you have to declare jsx components under the React namespace:
declare global {
  namespace React {
    namespace JSX {
      interface IntrinsicElements {
      // ....

Example:

const context = createContext('default')


const AsyncComponent = async (props: { x: number }) => {
  const value = useContext(context)
  // Simulate async operation
  await new Promise((resolve) => setTimeout(resolve, 0));
  return (
    <item x={props.x}>
      <test />
     {value}
    </item>
  );
};


let xml = (
  await renderAsync(
    <root>
      <context.Provider value={'value'}>
        <AsyncComponent x={5} />
      </context.Provider>
    </root>,
  )
).end({ headless: true });

@remorses remorses marked this pull request as draft February 27, 2025 00:54
@remorses remorses changed the title Support for sync components Support for async components Feb 27, 2025
@remorses remorses changed the title Support for async components Support for async components, support for context Feb 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Async components support

1 participant