[DO NOT MERGE] Emitter Framework

.prettierignore

@@ -63,5 +63,9 @@ grammars/
 # auto generated code model files
 packages/http-client-csharp/generator/TestProjects/**/tspCodeModel.json
 
+# Alloy components
+packages/emitter-framework/**/*.tsx
+packages/emitter-sample/**/*.tsx
+packages/efnext-cli-sketch/**/*.tsx
 # auto generated api view properties files
 packages/http-client-java/generator/http-client-generator-test/src/main/**/*.json

.prettierrc.json

@@ -8,14 +8,27 @@
   "tabWidth": 2,
   "plugins": [
     "./packages/prettier-plugin-typespec/dist/index.js",
-    "./node_modules/prettier-plugin-organize-imports/index.js"
+    "./node_modules/prettier-plugin-organize-imports/index.js",
+    "@alloy-js/prettier-plugin-alloy"
   ],
   "overrides": [
     {
       "files": "*.tsp",
       "options": {
         "parser": "typespec"
       }
+    },
+    {
+      "files": ["packages/http-client-javascript/**/*.tsx"],
+      "options": {
+        "parser": "alloy-ts"
+      }
+    },
+    {
+      "files": ["packages/http-client-javascript/**/*.js"],
+      "options": {
+        "parser": "alloy-js"
+      }
     }
   ]
 }

package.json

@@ -61,6 +61,7 @@
     "picocolors": "~1.1.0",
     "prettier": "~3.3.3",
     "prettier-plugin-organize-imports": "~4.0.0",
+    "@alloy-js/prettier-plugin-alloy": "0.1.0",
     "rimraf": "~6.0.1",
     "syncpack": "^13.0.0",
     "tsx": "^4.19.1",
@@ -81,7 +82,8 @@
   },
   "pnpm": {
     "overrides": {
-      "@fluentui/react-theme": "9.1.17"
+      "@fluentui/react-theme": "9.1.17",
+      "esbuild": "0.23"
     }
   }
 }

packages/compiler/package.json

@@ -41,6 +41,10 @@
       "types": "./dist/src/emitter-framework/index.d.ts",
       "default": "./dist/src/emitter-framework/index.js"
     },
+    "./typekit": {
+      "types": "./dist/src/typekit/index.d.ts",
+      "default": "./dist/src/typekit/index.js"
+    },
     "./experimental": {
       "types": "./dist/src/experimental/index.d.ts",
       "default": "./dist/src/experimental/index.js"
@@ -86,6 +90,7 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
+    "@alloy-js/core": "0.2.0",
     "@babel/code-frame": "~7.24.7",
     "ajv": "~8.17.1",
     "change-case": "~5.4.4",

packages/compiler/src/core/emitter-utils.ts

@@ -16,7 +16,9 @@ export interface EmitFileOptions {
 export async function emitFile(program: Program, options: EmitFileOptions): Promise<void> {
   // ensure path exists
   const outputFolder = getDirectoryPath(options.path);
-  await program.host.mkdirp(outputFolder);
+  if (outputFolder) {
+    await program.host.mkdirp(outputFolder);
+  }
   const content =
     options.newLine && options.newLine === "crlf"
       ? options.content.replace(/(\r\n|\n|\r)/gm, "\r\n")

packages/compiler/src/core/program.ts

@@ -1,3 +1,4 @@
+import { OutputDirectory, render } from "@alloy-js/core";
 import { EmitterOptions } from "../config/types.js";
 import { createAssetEmitter } from "../emitter-framework/asset-emitter.js";
 import { setCurrentProgram } from "../experimental/typekit/define-kit.js";
@@ -8,6 +9,7 @@ import { createBinder } from "./binder.js";
 import { Checker, createChecker } from "./checker.js";
 import { createSuppressCodeFix } from "./compiler-code-fixes/suppress.codefix.js";
 import { compilerAssert } from "./diagnostics.js";
+import { emitFile } from "./emitter-utils.js";
 import { resolveTypeSpecEntrypoint } from "./entrypoint-resolution.js";
 import { ExternalError } from "./external-error.js";
 import { getLibraryUrlsLoaded } from "./library.js";
@@ -569,12 +571,29 @@ export async function compile(
       },
     };
     try {
-      await emitter.emitFunction(context);
+      const result = (await emitter.emitFunction(context)) as any;
+      if (typeof result === "function") {
+        // assume this is an alloy component
+        const tree = render(result);
+        await writeOutputDirectory(tree, context.emitterOutputDir);
+      }
     } catch (error: unknown) {
       throw new ExternalError({ kind: "emitter", metadata: emitter.metadata, error });
     }
   }
 
+  async function writeOutputDirectory(dir: OutputDirectory, emitterOutputDir: string) {
+    for (const sub of dir.contents) {
+      if (Array.isArray(sub.contents)) {
+        await writeOutputDirectory(sub as OutputDirectory, emitterOutputDir);
+      } else {
+        await emitFile(program, {
+          content: sub.contents as string,
+          path: joinPaths(emitterOutputDir, sub.path),
+        });
+      }
+    }
+  }
   async function runValidators() {
     runCompilerValidators();
     for (const validator of validateCbs) {

packages/compiler/src/experimental/typekit/define-kit.ts

@@ -73,7 +73,11 @@ export function defineKit<T extends Record<string, any>>(
   source: StripGuards<T> & ThisType<TypekitPrototype>,
 ): void {
   for (const [name, fnOrNs] of Object.entries(source)) {
-    TypekitPrototype[name] = fnOrNs;
+    let kits = fnOrNs;
+    if (TypekitPrototype[name] !== undefined) {
+      kits = { ...TypekitPrototype[name], ...fnOrNs };
+    }
+    TypekitPrototype[name] = kits;
   }
 }
 

packages/compiler/src/experimental/typekit/kits/array.ts

@@ -0,0 +1,32 @@
+import { isArrayModelType, Model, Type } from "../../../index.js";
+import { defineKit } from "../define-kit.js";
+
+export interface ArrayKit {
+  array: {
+    /**
+     * Check if the given `type` is an Array.
+     *
+     * @param type The type to check.
+     */
+    is(type: Type): type is Model;
+    getElementType(type: Model): Type;
+  };
+}
+
+declare module "../define-kit.js" {
+  interface TypekitPrototype extends ArrayKit {}
+}
+
+defineKit<ArrayKit>({
+  array: {
+    is(type) {
+      return type.kind === "Model" && isArrayModelType(this.program, type);
+    },
+    getElementType(type) {
+      if (!this.array.is(type)) {
+        throw new Error("Type is not an array.");
+      }
+      return type.indexer!.value;
+    },
+  },
+});

packages/compiler/src/experimental/typekit/kits/enum-member.ts

@@ -0,0 +1,70 @@
+import type { Enum, EnumMember, Type } from "../../../core/types.js";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+import { defineKit } from "../define-kit.js";
+import { decoratorApplication, DecoratorArgs } from "../utils.js";
+
+interface EnumMemberDescriptor {
+  /**
+   * The name of the enum member.
+   */
+  name: string;
+  /**
+   * Decorators to apply to the enum member.
+   */
+  decorators?: DecoratorArgs[];
+
+  /**
+   * The value of the enum member. If not supplied, the value will be the same
+   * as the name.
+   */
+  value?: string | number;
+
+  /**
+   * The enum that the member belongs to. If not provided here, it is assumed
+   * that it will be set in `enum.build`.
+   */
+  enum?: Enum;
+}
+
+interface EnumMemberKit {
+  enumMember: {
+    /**
+     * Create an enum type. The enum type will be finished (i.e. decorators are
+     * run).
+     */
+    create(desc: EnumMemberDescriptor): EnumMember;
+
+    /**
+     * Check if `type` is an enum member type.
+     *
+     * @param type the type to check.
+     */
+    is(type: Type): type is EnumMember;
+  };
+}
+
+declare module "../define-kit.js" {
+  interface TypekitPrototype extends EnumMemberKit {}
+}
+
+defineKit<EnumMemberKit>({
+  enumMember: {
+    create(desc) {
+      const member: EnumMember = this.program.checker.createType({
+        kind: "EnumMember",
+        name: desc.name,
+        value: desc.value,
+        decorators: decoratorApplication(desc.decorators),
+        node: undefined as any,
+        enum: desc.enum as any, // initialized in enum.build if not provided here
+      });
+      this.program.checker.finishType(member);
+      return member;
+    },
+
+    is(type) {
+      return type.kind === "EnumMember";
+    },
+  },
+});

packages/compiler/src/experimental/typekit/kits/enum.ts

@@ -0,0 +1,127 @@
+import type { Enum, EnumMember, Type, Union } from "../../../core/types.js";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { type UnionKit } from "./union.js";
+
+import { createRekeyableMap } from "../../../utils/misc.js";
+import { defineKit } from "../define-kit.js";
+import { decoratorApplication, DecoratorArgs } from "../utils.js";
+
+interface EnumDescriptor {
+  /**
+   * The name of the enum declaration.
+   */
+  name: string;
+
+  /**
+   * Decorators to apply to the enum.
+   */
+  decorators?: DecoratorArgs[];
+
+  /**
+   * The members of the enum. If a member is an object, each property will be
+   * converted to an EnumMember with the same name and value.
+   */
+  members?: Record<string, string | number> | EnumMember[];
+}
+
+interface EnumMemberDescriptor {
+  /**
+   * The name of the enum member.
+   */
+  name: string;
+  /**
+   * Decorators to apply to the enum member.
+   */
+  decorators?: DecoratorArgs[];
+
+  /**
+   * The value of the enum member. If not supplied, the value will be the same
+   * as the name.
+   */
+  value?: string | number;
+
+  /**
+   * The enum that the member belongs to. If not provided here, it is assumed
+   * that it will be set in `enum.build`.
+   */
+  enum?: Enum;
+}
+
+interface EnumKit {
+  enum: {
+    /**
+     * Build an enum type. The enum type will be finished (i.e. decorators are
+     * run).
+     */
+    create(desc: EnumDescriptor): Enum;
+
+    /**
+     * Build an equivalent enum from the given union. Union variants which are
+     * not valid enum members are skipped. You can check if a union is a valid
+     * enum with {@link UnionKit.union}'s `isEnumValue`.
+     */
+    createFromUnion(type: Union): Enum;
+
+    /**
+     * Check if `type` is an enum type.
+     *
+     * @param type the type to check.
+     */
+    is(type: Type): type is Enum;
+  };
+}
+
+declare module "../define-kit.js" {
+  interface TypekitPrototype extends EnumKit {}
+}
+
+defineKit<EnumKit>({
+  enum: {
+    create(desc) {
+      const en: Enum = this.program.checker.createType({
+        kind: "Enum",
+        name: desc.name,
+        decorators: decoratorApplication(desc.decorators),
+        members: createRekeyableMap(),
+        node: undefined as any,
+      });
+
+      if (Array.isArray(desc.members)) {
+        for (const member of desc.members) {
+          member.enum = en;
+          en.members.set(member.name, member);
+        }
+      } else {
+        for (const [name, member] of Object.entries(desc.members ?? {})) {
+          en.members.set(name, this.enumMember.create({ name, value: member, enum: en }));
+        }
+      }
+
+      this.program.checker.finishType(en);
+      return en;
+    },
+
+    is(type) {
+      return type.kind === "Enum";
+    },
+
+    createFromUnion(type) {
+      if (!type.name) {
+        throw new Error("Cannot create an enum from an anonymous union.");
+      }
+
+      const enumMembers: EnumMember[] = [];
+      for (const variant of type.variants.values()) {
+        if (
+          (variant.name && typeof variant.name === "symbol") ||
+          (!this.literal.isString(variant.type) && !this.literal.isNumeric(variant.type))
+        ) {
+          continue;
+        }
+        enumMembers.push(this.enumMember.create({ name: variant.name, value: variant.type.value }));
+      }
+
+      return this.enum.create({ name: type.name, members: enumMembers });
+    },
+  },
+});

packages/compiler/src/experimental/typekit/kits/index.ts

@@ -1,7 +1,11 @@
+export * from "./array.js";
+export * from "./enum-member.js";
+export * from "./enum.js";
 export * from "./literal.js";
 export * from "./model-property.js";
 export * from "./model.js";
 export * from "./realm.js";
+export * from "./record.js";
 export * from "./scalar.js";
 export * from "./type.js";
 export * from "./union-variant.js";