feat: Add support for object returns and nested JSX elements

playground/hackerNewsAnalyzer.tsx

@@ -172,21 +172,6 @@ ${story.comments
   },
 );
 
-interface HNPostAnalyzerProps {
-  story: HNStory;
-}
-
-type HNPostAnalyzerOutput = [string, string]; // [summary, commentAnalysis]
-
-const HNPostAnalyzer = gsx.Component<HNPostAnalyzerProps, HNPostAnalyzerOutput>(
-  async ({ story }) => (
-    <>
-      <PostSummarizer story={story} />
-      <CommentsAnalyzer postId={story.id} comments={story.comments} />
-    </>
-  ),
-);
-
 interface HNCollectorProps {
   limit: number;
 }
@@ -214,7 +199,10 @@ const HNCollector = gsx.Component<HNCollectorProps, HNCollectorOutput>(
 );
 
 interface TrendAnalyzerProps {
-  analyses: Array<[string, string]>; // Array of [summary, commentAnalysis]
+  analyses: Array<{
+    summary: string;
+    commentAnalysis: string;
+  }>;
 }
 
 type TrendReport = string;
@@ -246,13 +234,13 @@ Shoot for 1000 words.
     `.trim();
 
     const context = analyses
-      .map(([summary, analysis]) =>
+      .map(({ summary, commentAnalysis }) =>
         `
 ### Post Summary
 ${summary}
 
 ### Comment Analysis
-${analysis}
+${commentAnalysis}
     `.trim(),
       )
       .join("\n\n");
@@ -268,28 +256,24 @@ interface AnalyzeHNPostsProps {
   stories: HNStory[];
 }
 
-type AnalyzeHNPostsOutput = HNPostAnalyzerOutput[];
+interface AnalyzeHNPostsOutput {
+  analyses: Array<{
+    summary: string;
+    commentAnalysis: string;
+  }>;
+}
 
 const AnalyzeHNPosts = gsx.Component<AnalyzeHNPostsProps, AnalyzeHNPostsOutput>(
-  async ({ stories }) => (
-    <>
-      {stories.map(story => (
-        <HNPostAnalyzer story={story} />
-      ))}
-    </>
-  ),
+  async ({ stories }) => ({
+    analyses: stories.map(story => ({
+      summary: <PostSummarizer story={story} />,
+      commentAnalysis: (
+        <CommentsAnalyzer postId={story.id} comments={story.comments} />
+      ),
+    })),
+  }),
 );
 
-interface CombineOutputProps {
-  report: string;
-  tweet: string;
-}
-
-const CombineOutput = gsx.Component<
-  CombineOutputProps,
-  HNAnalyzerWorkflowOutput
->(async ({ report, tweet }) => ({ report, tweet }));
-
 interface HNAnalyzerWorkflowProps {
   postCount: number;
 }
@@ -306,18 +290,16 @@ export const HNAnalyzerWorkflow = gsx.Component<
   <HNCollector limit={postCount}>
     {stories => (
       <AnalyzeHNPosts stories={stories}>
-        {postAnalyses => (
-          <TrendAnalyzer analyses={postAnalyses}>
+        {({ analyses }) => (
+          <TrendAnalyzer analyses={analyses}>
             {report => (
               <PGEditor content={report}>
                 {editedReport => (
                   <PGTweetWriter
                     context={editedReport}
                     prompt="Summarize the HN trends in a tweet"
                   >
-                    {tweet => (
-                      <CombineOutput report={editedReport} tweet={tweet} />
-                    )}
+                    {tweet => ({ report: editedReport, tweet })}
                   </PGTweetWriter>
                 )}
               </PGEditor>

playground/hn.ts

@@ -128,7 +128,7 @@ export async function getTopStoryDetails(
 
     // Small delay between batches
     if (i + batchSize < storyIds.length) {
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      await new Promise(resolve => setTimeout(resolve, 250));
     }
   }
 

src/component.ts

@@ -1,21 +1,22 @@
-import { JSX, MaybePromise } from "./jsx-runtime";
+import { JSX } from "./jsx-runtime";
+import { ComponentProps, MaybePromise, WorkflowComponent } from "./types";
 
-export function Component<TInput, TOutput>(
-  fn: (input: TInput) => MaybePromise<TOutput> | JSX.Element,
-) {
-  function WorkflowFunction(
-    props: TInput & {
-      children?: (
-        output: TOutput,
-      ) => MaybePromise<TOutput | JSX.Element | JSX.Element[]>;
-    },
-  ): Promise<TOutput> {
-    return Promise.resolve(fn(props)) as Promise<TOutput>;
+export function Component<P, O>(
+  fn: (props: P) => MaybePromise<O | JSX.Element | JSX.Element[]>,
+): WorkflowComponent<P, O> {
+  function WorkflowFunction(props: ComponentProps<P, O>): MaybePromise<O> {
+    return Promise.resolve(fn(props)) as Promise<O>;
   }
+
   if (fn.name) {
     Object.defineProperty(WorkflowFunction, "name", {
       value: `WorkflowFunction[${fn.name}]`,
     });
   }
-  return WorkflowFunction;
+
+  // Mark as workflow component and JSX element type
+  const component = WorkflowFunction as WorkflowComponent<P, O>;
+  component.isWorkflowComponent = true;
+
+  return component;
 }

src/index.ts

@@ -13,6 +13,67 @@
  */
 
 import { Component } from "./component";
-import { execute } from "./gensx";
+import { execute } from "./resolve";
+import { Element, ExecutableValue } from "./types";
 
+// Collect component props
+export interface CollectProps {
+  children: Element[];
+}
+
+// Export everything through gsx namespace
+export const gsx = {
+  Component,
+  execute,
+  Collect,
+};
+
+// Export Component and execute directly for use in type definitions
 export { Component, execute };
+
+// Also export types
+export type { Element };
+
+// Collect component for parallel execution with named outputs
+export async function Collect<T extends Record<string, unknown>>(
+  props: CollectProps,
+): Promise<T> {
+  const children = Array.isArray(props.children)
+    ? props.children
+    : [props.children];
+
+  // Execute all children in parallel
+  const results = await Promise.all(
+    children.map(child => {
+      /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+      /* eslint-disable @typescript-eslint/no-unsafe-argument */
+      const outputName = (child as any)?.props?.output;
+      return executeWithName(child, outputName);
+      /* eslint-enable @typescript-eslint/no-unsafe-assignment */
+      /* eslint-enable @typescript-eslint/no-explicit-any */
+      /* eslint-enable @typescript-eslint/no-unsafe-member-access */
+      /* eslint-enable @typescript-eslint/no-unsafe-argument */
+    }),
+  );
+
+  // Combine results into an object
+  const output = {} as Record<string, unknown> as T;
+  for (const [name, value] of results) {
+    if (name) {
+      (output as Record<string, unknown>)[name] = value;
+    }
+  }
+
+  return output;
+}
+
+// Execute with output name tracking
+async function executeWithName<T>(
+  element: Element,
+  outputName?: string,
+): Promise<[string | undefined, T]> {
+  const result = await execute<T>(element as ExecutableValue);
+  return [outputName, result];
+}

src/jsx-runtime.ts

@@ -1,4 +1,6 @@
 /* eslint-disable @typescript-eslint/no-namespace */
+import { resolveDeep } from "./resolve";
+
 export namespace JSX {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   export type ElementType = (props: any) => Promise<unknown>;
@@ -18,7 +20,6 @@ export const Fragment = (props: {
   if (Array.isArray(props.children)) {
     return props.children;
   }
-
   return [props.children];
 };
 
@@ -31,30 +32,39 @@ export const jsx = <
   component: (props: TProps) => MaybePromise<TOutput>,
   props: TProps | null,
   children?: (output: TOutput) => MaybePromise<JSX.Element | JSX.Element[]>,
-): Promise<TOutput | TOutput[]> => {
+): Promise<Awaited<TOutput> | Awaited<TOutput>[]> => {
   if (!children && props?.children) {
     children = props.children;
   }
-  return Promise.resolve(component(props ?? ({} as TProps))).then(result => {
-    if (children) {
-      // If its an array of elements, this is an edge case for a Fragment.
-      if (Array.isArray(children)) {
-        return Promise.all(children);
-      }
-      if (typeof children === "function") {
-        // If the components child function returns an array of elements, we need to resolve them all
-        const childrenResult = children(result);
-        if (Array.isArray(childrenResult)) {
-          return Promise.all(childrenResult);
-        }
-        return Promise.resolve(childrenResult);
-      }
 
-      // If its a single element, this is an edge case for a Fragment.
-      return Promise.resolve(children);
+  // Return a promise that will be handled by execute()
+  return (async (): Promise<Awaited<TOutput> | Awaited<TOutput>[]> => {
+    // Execute component and deeply resolve its result
+    const rawResult = await component(props ?? ({} as TProps));
+    const result = (await resolveDeep(rawResult)) as TOutput;
+
+    // If there are no children, return the resolved result
+    if (!children) {
+      return result as Awaited<TOutput>;
     }
-    return result;
-  }) as Promise<TOutput | TOutput[]>;
+
+    // Handle array of children (Fragment edge case)
+    if (Array.isArray(children)) {
+      const resolvedChildren = await Promise.all(
+        children.map(child => resolveDeep(child)),
+      );
+      return resolvedChildren as Awaited<TOutput>[];
+    }
+
+    // Handle child function
+    if (typeof children === "function") {
+      const childrenResult = await children(result);
+      return resolveDeep(childrenResult) as Awaited<TOutput>;
+    }
+
+    // Handle single child (Fragment edge case)
+    return resolveDeep(children) as Awaited<TOutput>;
+  })();
 };
 
 export const jsxs = <

src/resolve.ts

@@ -0,0 +1,94 @@
+import { JSX } from "./jsx-runtime";
+import { ComponentProps, ExecutableValue, WorkflowComponent } from "./types";
+
+// Helper to check if something is a JSX element
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+function isJSXElement<P, O>(
+  element: unknown,
+): element is JSX.Element & {
+  type: WorkflowComponent<P, O>;
+  props: ComponentProps<P, O>;
+} {
+  return (
+    typeof element === "object" &&
+    element !== null &&
+    "type" in element &&
+    "props" in element &&
+    typeof (element as any).type === "function" &&
+    (element as any).type.isWorkflowComponent
+  );
+}
+/* eslint-enable @typescript-eslint/no-unsafe-return */
+/* eslint-enable @typescript-eslint/no-explicit-any */
+/* eslint-enable @typescript-eslint/no-unsafe-member-access */
+
+/**
+ * Deeply resolves any value, handling promises, arrays, objects, and JSX elements.
+ * This is the core resolution logic used by both execute() and the JSX runtime.
+ */
+export async function resolveDeep<T>(value: unknown): Promise<T> {
+  // Handle promises first
+  if (value instanceof Promise) {
+    /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+    const resolved = await value;
+    return resolveDeep(resolved);
+    /* eslint-enable @typescript-eslint/no-unsafe-assignment */
+  }
+
+  // Handle arrays
+  if (Array.isArray(value)) {
+    const resolvedArray = await Promise.all(
+      value.map(item => resolveDeep(item)),
+    );
+    return resolvedArray as T;
+  }
+
+  // Handle JSX elements
+  if (isJSXElement(value)) {
+    const componentResult = await value.type(value.props);
+    return resolveDeep(componentResult);
+  }
+
+  // Handle objects (but not null)
+  if (typeof value === "object" && value !== null) {
+    const entries = Object.entries(value);
+    const resolvedEntries = await Promise.all(
+      entries.map(async ([key, val]) => [key, await resolveDeep(val)]),
+    );
+    return Object.fromEntries(resolvedEntries) as T;
+  }
+
+  // Base case: primitive value
+  return value as T;
+}
+
+/**
+ * Executes a JSX element or any other value, ensuring all promises and nested values are resolved.
+ * This is the main entry point for executing workflow components.
+ */
+export async function execute<T>(element: ExecutableValue): Promise<T> {
+  /* eslint-disable @typescript-eslint/no-unnecessary-condition */
+  if (element === null || element === undefined) {
+    throw new Error("Cannot execute null or undefined element");
+  }
+  /* eslint-enable @typescript-eslint/no-unnecessary-condition */
+
+  // Handle JSX elements specially to support children functions
+  if (isJSXElement(element)) {
+    const componentResult = await element.type(element.props);
+    const resolvedResult = await resolveDeep(componentResult);
+
+    // Handle children after fully resolving the component's result
+    if (element.props.children) {
+      const childrenResult = await element.props.children(resolvedResult);
+      return execute(childrenResult as ExecutableValue);
+    }
+
+    return resolvedResult as T;
+  }
+
+  // For all other cases, use the shared resolver
+  return resolveDeep(element);
+}