Add Alloy infrastructure, context system, and field components

packages/graphql/package.json

@@ -30,15 +30,16 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "@alloy-js/core": "^0.11.0",
-    "@alloy-js/typescript": "^0.11.0",
+    "@alloy-js/core": "^0.22.0",
+    "@alloy-js/graphql": "link:../../alloy/packages/graphql",
+    "@alloy-js/typescript": "^0.22.0",
     "change-case": "^5.4.4",
     "graphql": "^16.9.0"
   },
   "scripts": {
     "clean": "rimraf ./dist ./temp",
-    "build": "tsc -p .",
-    "watch": "tsc --watch",
+    "build": "alloy build",
+    "watch": "alloy build --watch",
     "test": "vitest run",
     "test:watch": "vitest -w",
     "lint": "eslint . --max-warnings=0",
@@ -56,6 +57,8 @@
     "@typespec/mutator-framework": "workspace:~"
   },
   "devDependencies": {
+    "@alloy-js/cli": "^0.22.0",
+    "@alloy-js/rollup-plugin": "^0.1.0",
     "@types/node": "~22.13.13",
     "@typespec/compiler": "workspace:~",
     "@typespec/emitter-framework": "workspace:~",

packages/graphql/src/components/fields/field.tsx

@@ -0,0 +1,72 @@
+import { type ModelProperty, getDeprecationDetails, isArrayModelType } from "@typespec/compiler";
+import * as gql from "@alloy-js/graphql";
+import { useTsp } from "@typespec/emitter-framework";
+import { resolveGraphQLTypeName } from "../../lib/graphql-type-name.js";
+import { hasNullableElements, isNullable } from "../../lib/nullable.js";
+
+export interface FieldProps {
+  property: ModelProperty;
+  isInput: boolean;
+}
+
+export function Field(props: FieldProps) {
+  const { $, program } = useTsp();
+
+  const doc = $.type.getDoc(props.property);
+  const deprecation = getDeprecationDetails(program, props.property);
+  const nullable = isNullable(props.property) || props.property.optional;
+  const type = props.property.type;
+
+  if (type.kind === "Model" && isArrayModelType(type)) {
+    const elemNullable = hasNullableElements(props.property);
+    const typeName = resolveGraphQLTypeName(type.indexer.value);
+
+    if (props.isInput) {
+      return (
+        <gql.InputField
+          name={props.property.name}
+          type={typeName}
+          nonNull={!elemNullable}
+          description={doc}
+          deprecated={deprecation?.message}
+        >
+          <gql.InputField.List nonNull={!nullable} />
+        </gql.InputField>
+      );
+    }
+
+    return (
+      <gql.Field
+        name={props.property.name}
+        type={typeName}
+        nonNull={!elemNullable}
+        description={doc}
+        deprecated={deprecation?.message}
+      >
+        <gql.Field.List nonNull={!nullable} />
+      </gql.Field>
+    );
+  }
+
+  if (props.isInput) {
+    return (
+      <gql.InputField
+        name={props.property.name}
+        type={resolveGraphQLTypeName(type)}
+        nonNull={!nullable}
+        description={doc}
+        deprecated={deprecation?.message}
+      />
+    );
+  }
+
+  return (
+    <gql.Field
+      name={props.property.name}
+      type={resolveGraphQLTypeName(type)}
+      nonNull={!nullable}
+      description={doc}
+      deprecated={deprecation?.message}
+    />
+  );
+}

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

@@ -0,0 +1,2 @@
+export { Field, type FieldProps } from "./field.js";
+export { OperationField, type OperationFieldProps } from "./operation-field.js";

packages/graphql/src/components/fields/operation-field.tsx

@@ -0,0 +1,58 @@
+import { type Operation, getDeprecationDetails, isArrayModelType } from "@typespec/compiler";
+import * as gql from "@alloy-js/graphql";
+import { useTsp } from "@typespec/emitter-framework";
+import { resolveGraphQLTypeName } from "../../lib/graphql-type-name.js";
+import { hasNullableElements, isNullable } from "../../lib/nullable.js";
+
+export interface OperationFieldProps {
+  operation: Operation;
+}
+
+export function OperationField(props: OperationFieldProps) {
+  const { $, program } = useTsp();
+
+  const doc = $.type.getDoc(props.operation);
+  const deprecation = getDeprecationDetails(program, props.operation);
+  const returnType = props.operation.returnType;
+  const nullable = isNullable(props.operation);
+  const params = Array.from(props.operation.parameters.properties.values());
+
+  const isList = returnType.kind === "Model" && isArrayModelType(returnType);
+  const typeName = isList
+    ? resolveGraphQLTypeName(returnType.indexer.value)
+    : resolveGraphQLTypeName(returnType);
+  const elemNullable = isList && hasNullableElements(props.operation);
+
+  return (
+    <gql.Field
+      name={props.operation.name}
+      type={typeName}
+      nonNull={isList ? !elemNullable : !nullable}
+      description={doc}
+      deprecated={deprecation?.message}
+    >
+      {isList ? <gql.Field.List nonNull={!nullable} /> : undefined}
+      {params.map((param) => {
+        const paramNullable = isNullable(param) || param.optional;
+        const paramType = param.type;
+        const paramIsList = paramType.kind === "Model" && isArrayModelType(paramType);
+        const paramElemNullable = paramIsList && hasNullableElements(param);
+        const paramTypeName = paramIsList
+          ? resolveGraphQLTypeName(paramType.indexer.value)
+          : resolveGraphQLTypeName(paramType);
+
+        return (
+          <gql.InputValue
+            name={param.name}
+            type={paramTypeName}
+            nonNull={paramIsList ? !paramElemNullable : !paramNullable}
+            description={$.type.getDoc(param)}
+            deprecated={getDeprecationDetails(program, param)?.message}
+          >
+            {paramIsList ? <gql.InputValue.List nonNull={!paramNullable} /> : undefined}
+          </gql.InputValue>
+        );
+      })}
+    </gql.Field>
+  );
+}

packages/graphql/src/context/graphql-schema-context.tsx

@@ -0,0 +1,21 @@
+import { type ComponentContext, createNamedContext, useContext } from "@alloy-js/core";
+import type { TypeGraph } from "../mutation-engine/type-graph.js";
+
+export interface GraphQLSchemaContextValue {
+  typeGraph: TypeGraph;
+}
+
+export const GraphQLSchemaContext: ComponentContext<GraphQLSchemaContextValue> =
+  createNamedContext<GraphQLSchemaContextValue>("GraphQLSchema");
+
+export function useGraphQLSchema(): GraphQLSchemaContextValue {
+  const context = useContext(GraphQLSchemaContext);
+
+  if (!context) {
+    throw new Error(
+      "useGraphQLSchema must be used within GraphQLSchemaContext.Provider.",
+    );
+  }
+
+  return context;
+}

packages/graphql/src/context/index.ts

@@ -0,0 +1,5 @@
+export {
+  GraphQLSchemaContext,
+  useGraphQLSchema,
+  type GraphQLSchemaContextValue,
+} from "./graphql-schema-context.js";

packages/graphql/tsconfig.json

@@ -1,10 +1,18 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "useDefineForClassFields": true,
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "target": "es2022",
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "jsx": "preserve",
+    "jsxImportSource": "@alloy-js/core",
+    "emitDeclarationOnly": true,
     "rootDir": ".",
-    "outDir": "dist",
-    "verbatimModuleSyntax": true
+    "outDir": "dist"
   },
-  "include": ["src", "test"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "test/**/*.ts", "test/**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
 }

packages/graphql/vitest.config.ts

@@ -1,4 +1,14 @@
+import alloyPlugin from "@alloy-js/rollup-plugin";
 import { defineConfig, mergeConfig } from "vitest/config";
 import { defaultTypeSpecVitestConfig } from "../../vitest.config.js";
 
-export default mergeConfig(defaultTypeSpecVitestConfig, defineConfig({}));
+export default mergeConfig(
+  defaultTypeSpecVitestConfig,
+  defineConfig({
+    esbuild: {
+      jsx: "preserve",
+      sourcemap: "both",
+    },
+    plugins: [alloyPlugin()],
+  }),
+);