Add operation components, orchestrator, and emitter rendering

Brings the component-based GraphQL emitter online by wiring the data
pipeline from the foundation skeleton into Alloy JSX rendering.

New components:
- components/operations/query-type.tsx, mutation-type.tsx, subscription-type.tsx:
  render the three GraphQL root operation types
- components/operations/index.ts: barrel export
- components/type-collections.tsx: orchestrator that dispatches each
  classified-type bucket (scalars, enums, unions, interfaces, objects, inputs)
  into the appropriate leaf-type component

Emitter wiring:
- Rename src/emitter.ts → src/emitter.tsx
- Phase 5 now renders via Alloy's renderSchema, converts to SDL with
  graphql-js printSchema, and writes the output via emitFile
- Adds output-file option handling with interpolatePath

Testing:
- test/e2e.test.ts: single happy-path smoke test proving the full
  TypeSpec → mutation → classification → rendering → SDL pipeline works
- Update the existing test/emitter.test.ts data-pipeline test to now
  assert that SDL output is produced (Phase 5 is wired up)

Broader integration coverage (nullability, input/output splitting,
unions, enums, arrays, circular refs, deprecation, doc comments) lands
in a follow-up PR focused on tests.

Author: FionaBronwen

packages/graphql/src/components/operations/index.ts

@@ -0,0 +1,3 @@
+export { QueryType, type QueryTypeProps } from "./query-type.js";
+export { MutationType, type MutationTypeProps } from "./mutation-type.js";
+export { SubscriptionType, type SubscriptionTypeProps } from "./subscription-type.js";

packages/graphql/src/components/operations/mutation-type.tsx

@@ -0,0 +1,27 @@
+import { type Operation } from "@typespec/compiler";
+import * as gql from "@alloy-js/graphql";
+import { OperationField } from "../fields/index.js";
+
+export interface MutationTypeProps {
+  /** Mutation operations to render as fields */
+  operations: Operation[];
+}
+
+/**
+ * Renders the GraphQL Mutation root type using Alloy's Mutation component
+ *
+ * Only renders if operations exist (Mutation is optional in GraphQL)
+ */
+export function MutationType(props: MutationTypeProps) {
+  if (props.operations.length === 0) {
+    return null;
+  }
+
+  return (
+    <gql.Mutation>
+      {props.operations.map((op) => (
+        <OperationField operation={op} />
+      ))}
+    </gql.Mutation>
+  );
+}

packages/graphql/src/components/operations/query-type.tsx

@@ -0,0 +1,27 @@
+import { type Operation } from "@typespec/compiler";
+import * as gql from "@alloy-js/graphql";
+import { OperationField } from "../fields/index.js";
+
+export interface QueryTypeProps {
+  /** Query operations to render as fields */
+  operations: Operation[];
+}
+
+/**
+ * Renders the GraphQL Query root type using Alloy's Query component.
+ * Returns null if no query operations exist (the emitter will emit an
+ * empty-schema diagnostic in that case).
+ */
+export function QueryType(props: QueryTypeProps) {
+  if (props.operations.length === 0) {
+    return null;
+  }
+
+  return (
+    <gql.Query>
+      {props.operations.map((op) => (
+        <OperationField operation={op} />
+      ))}
+    </gql.Query>
+  );
+}

packages/graphql/src/components/operations/subscription-type.tsx

@@ -0,0 +1,27 @@
+import { type Operation } from "@typespec/compiler";
+import * as gql from "@alloy-js/graphql";
+import { OperationField } from "../fields/index.js";
+
+export interface SubscriptionTypeProps {
+  /** Subscription operations to render as fields */
+  operations: Operation[];
+}
+
+/**
+ * Renders the GraphQL Subscription root type using Alloy's Subscription component
+ *
+ * Only renders if operations exist (Subscription is optional in GraphQL)
+ */
+export function SubscriptionType(props: SubscriptionTypeProps) {
+  if (props.operations.length === 0) {
+    return null;
+  }
+
+  return (
+    <gql.Subscription>
+      {props.operations.map((op) => (
+        <OperationField operation={op} />
+      ))}
+    </gql.Subscription>
+  );
+}

packages/graphql/src/components/type-collections.tsx

@@ -0,0 +1,105 @@
+import { For } from "@alloy-js/core";
+import * as gql from "@alloy-js/graphql";
+import { useGraphQLSchema } from "../context/index.js";
+import {
+  ScalarType,
+  EnumType,
+  UnionType,
+  InterfaceType,
+  ObjectType,
+  InputType,
+} from "./types/index.js";
+
+/**
+ * Renders scalar variant types for encoded scalars (e.g., bytes + base64 -> Bytes)
+ * AND custom user-defined scalars
+ */
+export function ScalarVariantTypes() {
+  const { classifiedTypes } = useGraphQLSchema();
+
+  // Get set of variant names to avoid duplicates
+  const variantNames = new Set(
+    classifiedTypes.scalarVariants.map((v) => v.graphqlName),
+  );
+
+  // Filter custom scalars to only include ones not already in variants
+  const customScalars = classifiedTypes.scalars.filter(
+    (s) => !variantNames.has(s.name),
+  );
+
+  return (
+    <>
+      <For each={classifiedTypes.scalarVariants}>
+        {(variant) => (
+          <gql.ScalarType
+            name={variant.graphqlName}
+            specifiedByUrl={variant.specificationUrl}
+          />
+        )}
+      </For>
+      <For each={customScalars}>
+        {(scalar) => <ScalarType type={scalar} />}
+      </For>
+    </>
+  );
+}
+
+/**
+ * Renders all enum types in the schema
+ */
+export function EnumTypes() {
+  const { classifiedTypes } = useGraphQLSchema();
+  return (
+    <For each={classifiedTypes.enums}>
+      {(enumType) => <EnumType type={enumType} />}
+    </For>
+  );
+}
+
+/**
+ * Renders all union types in the schema
+ */
+export function UnionTypes() {
+  const { classifiedTypes } = useGraphQLSchema();
+  return (
+    <For each={classifiedTypes.unions}>
+      {(union) => <UnionType type={union} />}
+    </For>
+  );
+}
+
+/**
+ * Renders all interface types in the schema
+ */
+export function InterfaceTypes() {
+  const { classifiedTypes } = useGraphQLSchema();
+  return (
+    <For each={classifiedTypes.interfaces}>
+      {(iface) => <InterfaceType type={iface} />}
+    </For>
+  );
+}
+
+/**
+ * Renders all object types in the schema
+ */
+export function ObjectTypes() {
+  const { classifiedTypes } = useGraphQLSchema();
+  return (
+    <For each={classifiedTypes.outputModels}>
+      {(model) => <ObjectType type={model} />}
+    </For>
+  );
+}
+
+/**
+ * Renders all input types in the schema
+ */
+export function InputTypes() {
+  const { classifiedTypes } = useGraphQLSchema();
+  return (
+    <For each={classifiedTypes.inputModels}>
+      {(model) => <InputType type={model} />}
+    </For>
+  );
+}

packages/graphql/src/emitter.ts packages/graphql/src/emitter.tsxpackages/graphql/src/emitter.ts renamed to packages/graphql/src/emitter.tsx

@@ -1,20 +1,35 @@
-import { type EmitContext, type Namespace } from "@typespec/compiler";
+import {
+  emitFile,
+  interpolatePath,
+  resolvePath,
+  type EmitContext,
+  type Namespace,
+} from "@typespec/compiler";
+import { renderSchema as renderAlloySchema, printSchema } from "@alloy-js/graphql";
 import { type GraphQLEmitterOptions, reportDiagnostic } from "./lib.js";
 import { listSchemas } from "./lib/schema.js";
 import {
   createGraphQLMutationEngine,
   type MutatedSchema,
 } from "./mutation-engine/index.js";
 import { resolveTypeUsage } from "./type-usage.js";
-import type { ModelVariants } from "./context/index.js";
+import { GraphQLSchema } from "./components/graphql-schema.js";
+import {
+  ScalarVariantTypes,
+  EnumTypes,
+  UnionTypes,
+  InterfaceTypes,
+  ObjectTypes,
+  InputTypes,
+} from "./components/type-collections.js";
+import { QueryType, MutationType, SubscriptionType } from "./components/operations/index.js";
+import type { ClassifiedTypes, ModelVariants } from "./context/index.js";
 
 /**
  * The bundle of schema-wide data the renderer needs to emit SDL.
  *
  * Produced by the data pipeline (type usage → mutation → variant lookups)
- * and consumed by `renderSchema`. Making this explicit keeps the pipeline
- * and the renderer as separable stages: the pipeline decides *what* goes
- * in the schema, the renderer decides *how* it's serialized.
+ * and consumed by `renderSchema`.
  */
 export interface SchemaPipelineResult {
   mutated: MutatedSchema;
@@ -25,8 +40,8 @@ export interface SchemaPipelineResult {
  * Main emitter entry point for GraphQL SDL generation.
  *
  * Runs the data pipeline (type usage → mutation → variant lookups) and
- * passes the result to `renderSchema`. Component-based rendering is a stub
- * in this PR and will be implemented in a follow-up.
+ * passes the result to `renderSchema`, which renders via Alloy components
+ * and writes the SDL file.
  */
 export async function $onEmit(context: EmitContext<GraphQLEmitterOptions>) {
   const schemas = listSchemas(context.program);
@@ -37,7 +52,7 @@ export async function $onEmit(context: EmitContext<GraphQLEmitterOptions>) {
   for (const schema of schemas) {
     const pipelineResult = await emitSchema(context, schema);
     if (pipelineResult) {
-      renderSchema(pipelineResult);
+      await renderSchema(context, schema, pipelineResult);
     }
   }
 }
@@ -65,8 +80,7 @@ async function emitSchema(
   const mutated = engine.mutateSchema(schema.type, typeUsage);
 
   // Report void-returning operations — GraphQL fields must return a type,
-  // so these are excluded from the schema. Mutation collected them; the
-  // emitter decides to warn.
+  // so these are excluded from the schema.
   for (const op of mutated.voidOperations) {
     reportDiagnostic(context.program, {
       code: "void-operation-return",
@@ -92,12 +106,77 @@ async function emitSchema(
 }
 
 /**
- * Phase 4: Render the pipeline result to GraphQL SDL.
- *
- * Stub in this PR — does nothing. The component-based Alloy renderer that
- * consumes `mutated` and `modelVariants` is implemented in a follow-up PR.
+ * Phase 4: Render the pipeline result to GraphQL SDL via Alloy components,
+ * then write the SDL to the emitter output directory.
  */
-function renderSchema(_result: SchemaPipelineResult): void {}
+async function renderSchema(
+  context: EmitContext<GraphQLEmitterOptions>,
+  schema: { type: Namespace; name?: string },
+  result: SchemaPipelineResult,
+): Promise<void> {
+  const { mutated, modelVariants } = result;
+
+  // Wrapper models from union mutations are always output — fold them into
+  // the output bucket for the renderer.
+  const classifiedTypes: ClassifiedTypes = {
+    interfaces: mutated.interfaces,
+    outputModels: [...mutated.outputModels, ...mutated.wrapperModels],
+    inputModels: mutated.inputModels,
+    enums: mutated.enums,
+    scalars: mutated.scalars,
+    scalarVariants: mutated.scalarVariants,
+    unions: mutated.unions,
+    queries: mutated.queries,
+    mutations: mutated.mutations,
+    subscriptions: mutated.subscriptions,
+  };
+
+  const contextValue = {
+    classifiedTypes,
+    modelVariants,
+    unionMembers: mutated.unionMembers,
+    scalarSpecifications: mutated.scalarSpecifications,
+  };
+
+  // Determine output file name
+  const outputFilePattern = context.options["output-file"] ?? "{schema-name}.graphql";
+  const schemaName = schema.name || "schema";
+  const outputFileName = interpolatePath(outputFilePattern, {
+    "schema-name": schemaName,
+  });
+
+  // Render the schema using Alloy's renderSchema to get a GraphQLSchema object.
+  // We disable name policy validation because TypeSpec has already validated names and applied mutations.
+  const graphqlSchema = renderAlloySchema(
+    <GraphQLSchema program={context.program} contextValue={contextValue}>
+      <ScalarVariantTypes />
+      <EnumTypes />
+      <UnionTypes />
+      <InterfaceTypes />
+      <ObjectTypes />
+      <InputTypes />
+      <QueryType operations={classifiedTypes.queries} />
+      <MutationType operations={classifiedTypes.mutations} />
+      <SubscriptionType operations={classifiedTypes.subscriptions} />
+    </GraphQLSchema>,
+    { namePolicy: null },
+  );
+
+  // Convert the GraphQLSchema to SDL string using graphql-js printSchema
+  const rawSdl = printSchema(graphqlSchema);
+
+  // Ensure file ends with blank line (two newlines)
+  const sdl = rawSdl.trimEnd() + "\n\n";
+
+  // Write to file
+  const outputPath = resolvePath(context.emitterOutputDir, outputFileName);
+
+  await emitFile(context.program, {
+    path: outputPath,
+    content: sdl,
+    newLine: context.options["new-line"] ?? "lf",
+  });
+}
 
 /**
  * Build model variant lookups (name → Model) for checking which variants exist.
@@ -116,6 +195,10 @@ function buildModelVariants(mutated: MutatedSchema): ModelVariants {
   for (const model of mutated.inputModels) {
     modelVariants.inputModels.set(model.name, model);
   }
+  // Wrapper models are always output variants — include them for name lookups too.
+  for (const model of mutated.wrapperModels) {
+    modelVariants.outputModels.set(model.name, model);
+  }
 
   return modelVariants;
 }

packages/graphql/test/e2e.test.ts

@@ -0,0 +1,31 @@
+import { strictEqual } from "node:assert";
+import { describe, it } from "vitest";
+import { emitSingleSchemaWithDiagnostics } from "./test-host.js";
+
+/**
+ * End-to-end smoke test: compile a minimal TypeSpec schema and verify that
+ * the full pipeline produces GraphQL SDL output. Broader coverage (nullability,
+ * input/output splitting, unions, etc.) lives in dedicated test files.
+ */
+describe("End-to-end", () => {
+  it("generates valid schema for basic types", async () => {
+    const code = `
+      @schema
+      namespace TestNamespace {
+        model Book {
+          id: string;
+          title: string;
+        }
+
+        @query
+        op getBook(id: string): Book;
+      }
+    `;
+
+    const result = await emitSingleSchemaWithDiagnostics(code, {});
+    const errors = result.diagnostics.filter((d) => d.severity === "error");
+    strictEqual(errors.length, 0, "Should have no errors for valid schema");
+    strictEqual(result.graphQLOutput?.includes("type Book {"), true, "Should contain Book type");
+    strictEqual(result.graphQLOutput?.includes("type Query {"), true, "Should contain Query type");
+  });
+});