jsx-xml icon indicating copy to clipboard operation
jsx-xml copied to clipboard

Support for async components, support for context

Open remorses opened this issue 10 months ago • 0 comments

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 avatar Feb 26 '25 23:02 remorses