TypeSpec SourceFile and Namespace components

.gitignore

@@ -142,4 +142,5 @@ packages/*/tsdoc-metadata.json
 packages/docs/src/content/docs/reference
 packages/docs/dist-build
 
-alloy-output/
+alloy-output/
+.pnpm-store/

packages/typespec/api-extractor.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "extends": "../../api-extractor.base.json"
+}

packages/typespec/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@alloy-js/typespec",
+  "version": "0.1.0",
+  "description": "",
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "import": "./dist/src/index.js"
+    },
+    "./stc": {
+      "development": "./src/components/stc/index.ts",
+      "import": "./dist/src/components/stc/index.js"
+    },
+    "./testing": {
+      "development": "./testing/index.ts",
+      "import": "./dist/testing/index.js"
+    }
+  },
+  "imports": {
+    "#components/*": {
+      "development": "./src/components/*",
+      "default": "./dist/src/components/*"
+    }
+  },
+  "scripts": {
+    "generate-docs": "api-extractor run",
+    "build": "alloy build && pnpm run generate-docs",
+    "clean": "rimraf dist/ .temp/",
+    "test:watch": "vitest -w",
+    "watch": "alloy build --watch",
+    "test": "vitest run",
+    "prepack": "node ../../scripts/strip-dev-exports.js"
+  },
+  "keywords": [],
+  "license": "MIT",
+  "dependencies": {
+    "@alloy-js/core": "workspace:~",
+    "change-case": "catalog:",
+    "pathe": "catalog:"
+  },
+  "devDependencies": {
+    "@alloy-js/cli": "workspace:~",
+    "@alloy-js/rollup-plugin": "workspace:~",
+    "@microsoft/api-extractor": "catalog:",
+    "@rollup/plugin-typescript": "catalog:",
+    "concurrently": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  },
+  "type": "module"
+}

packages/typespec/src/components/Reference.tsx

@@ -0,0 +1,15 @@
+import * as core from "@alloy-js/core";
+import { ref } from "../symbols/reference.js";
+
+export interface ReferenceProps {
+  refkey: core.Refkey;
+}
+
+// used to resolve refkey references within source files
+export function Reference({ refkey }: ReferenceProps) {
+  const reference = ref(refkey);
+  const symbolRef = core.computed(() => reference()[1]);
+
+  core.emitSymbol(symbolRef);
+  return <>{reference()[0]}</>;
+}

packages/typespec/src/components/alias.tsx

@@ -0,0 +1,5 @@
+export interface AliasProps {}; 
+
+export function Alias(props: AliasProps) {
+    return <></>;
+}

packages/typespec/src/components/decorator.tsx

@@ -0,0 +1,5 @@
+export interface DecoratorProps {}; 
+
+export function Decorator(props: DecoratorProps) {
+    return <></>;
+}

packages/typespec/src/components/directory/directory.test.tsx

@@ -0,0 +1,19 @@
+import { expect, it } from "vitest";
+import { Directory } from "./directory.jsx";
+import { Output, SourceFile } from "@alloy-js/core";
+
+it("defines multiple directories with unique source files", () => {
+    expect(
+      <Output>
+        <Directory path="dir1">
+          <SourceFile path="file.tsp" filetype="tsp">Content of File1</SourceFile>
+        </Directory>
+        <Directory path="dir2">
+          <SourceFile path="file.tsp" filetype="tsp">Content of File2</SourceFile>
+        </Directory>
+      </Output>,
+    ).toRenderTo({
+      "dir1/file.tsp": `Content of File1`,
+      "dir2/file.tsp": `Content of File2`,
+    });
+});

packages/typespec/src/components/directory/directory.tsx

@@ -0,0 +1,18 @@
+import { Children, Scope, SourceDirectory } from "@alloy-js/core";
+import { createDirectoryScope } from "../../symbols/factories.js";
+
+export interface DirectoryProps {
+    path: string;
+    children?: Children;
+};
+
+export function Directory(props: DirectoryProps) {
+    const scope = createDirectoryScope(props.path);
+    return (
+        <SourceDirectory path={props.path}>
+            <Scope value={scope}>
+                {props.children}
+            </Scope>
+        </SourceDirectory>
+    );
+}

packages/typespec/src/components/enum.tsx

@@ -0,0 +1,5 @@
+export interface EnumProps {}; 
+
+export function Enum(props: EnumProps) {
+    return <></>;
+}

packages/typespec/src/components/import.tsx

@@ -0,0 +1,5 @@
+export interface ImportProps {}; 
+
+export function Import(props: ImportProps) {
+    return <></>;
+}

packages/typespec/src/components/index.ts

@@ -0,0 +1,14 @@
+export * from "./alias.jsx";
+export * from "./decorator.jsx";
+export * from "./enum.jsx";
+export * from "./import.jsx";
+export * from "./interface.jsx";
+export * from "./model-property.jsx";
+export * from "./model.jsx";
+export * from "./namespace.jsx";
+export * from "./operation.jsx"
+export * from "./scalar.jsx";
+export * from "./directory/directory.jsx"
+export * from "./source-file/source-file.jsx";
+export * from "./union.jsx";
+export * from "./value.jsx";

packages/typespec/src/components/interface.tsx

@@ -0,0 +1,5 @@
+export interface InterfaceProps {}; 
+
+export function Interface(props: InterfaceProps) {
+    return <></>;
+}

packages/typespec/src/components/model-property.tsx

@@ -0,0 +1,18 @@
+import { Children, createNamedContext, Declaration, Name } from "@alloy-js/core";
+import { createPropertySymbol } from "../symbols/factories.js";
+
+export interface ModelPropertyProps {
+    name: string;
+    doc?: Children;
+};
+
+export function ModelProperty(props: ModelPropertyProps) {
+  //   const symbol = createPropertySymbol(props.name);
+
+  // return (
+  //   <Declaration symbol={symbol}>
+  //     <Name />
+  //   </Declaration>
+  // );
+  return <></>;
+}

packages/typespec/src/components/model.tsx

@@ -0,0 +1,5 @@
+export interface ModelProps {}; 
+
+export function Model(props: ModelProps) {
+    return <></>;
+}

packages/typespec/src/components/namespace-scopes.tsx

@@ -0,0 +1,48 @@
+import { Children } from "@alloy-js/core/jsx-runtime";
+import { NamespaceSymbol } from "../symbols/namespace.js";
+import { createTypeSpecNamespaceScope } from "../scopes/namespace.js";
+import { NamespaceContext } from "../contexts/namespace.js";
+import { Scope } from "@alloy-js/core";
+
+export interface NamespaceScopeProps {
+    symbol: NamespaceSymbol;
+    children: Children;
+}
+
+export function NamespaceScope(props: NamespaceScopeProps) {
+    const scope = createTypeSpecNamespaceScope(props.symbol);
+    return (
+        <NamespaceContext.Provider value={{ symbol: props.symbol }}>
+            <Scope value={scope}>
+                {props.children}
+            </Scope>
+        </NamespaceContext.Provider>
+    );
+}
+
+export interface NamespaceScopesProps {
+    symbol: NamespaceSymbol;
+    children: Children;
+}
+
+export function NamespaceScopes(props: NamespaceScopesProps) {
+    function wrapWithScope(symbol: NamespaceSymbol, children: Children) {
+        const scopeChildren = (
+            <NamespaceScope symbol={symbol}>
+                {children}
+            </NamespaceScope>
+        );
+
+        if (symbol.enclosingNamespace) {
+            return wrapWithScope(symbol.enclosingNamespace, scopeChildren);
+        }
+
+        return scopeChildren;
+    }
+
+    return (
+        <NamespaceContext.Provider value={{ symbol: props.symbol }}>
+            {wrapWithScope(props.symbol, props.children)}
+        </NamespaceContext.Provider>
+    );
+}

packages/typespec/src/components/namespace.tsx

@@ -0,0 +1,69 @@
+import { Block, Children, Namekey, Refkey } from "@alloy-js/core";
+import { NamespaceContext, useNamespaceContext } from "../contexts/namespace.js";
+import { NamespaceSymbol } from "../symbols/namespace.js";
+import { useSourceFileScope } from "../scopes/source-file.js";
+import { createNamespaceSymbol } from "../symbols/factories.js";
+import { NamespaceScope } from "./namespace-scopes.jsx";
+
+export interface NamespaceProps {
+    name: string | Namekey | (string | Namekey)[];
+    refkey?: Refkey | Refkey[];
+    children?: Children;
+};
+
+export function Namespace(props: NamespaceProps) {
+    const namespaceSymbol = createNamespaceSymbol(props.name, {
+        refkeys: props.refkey,
+    });
+    const sourceFileScope = useSourceFileScope();
+
+    if(!sourceFileScope) {
+        return (
+            <NamespaceContext.Provider value = {{ symbol: namespaceSymbol }}>
+                {props.children}
+            </NamespaceContext.Provider>
+        );
+    } else {
+        // sourceFileScope.hasBlockNamespace = true;
+
+        return (
+            <>
+                namespace <NamespaceName symbol={namespaceSymbol} relative />{" "}
+                <Block>
+                    <NamespaceContext.Provider value = {{ symbol: namespaceSymbol }}>
+                        <NamespaceScope symbol={namespaceSymbol}>
+                            {props.children}
+                        </NamespaceScope>
+                    </NamespaceContext.Provider>
+                </Block>
+            </>
+        );
+    }
+}
+
+export interface NamespaceNameProps {
+    symbol: NamespaceSymbol;
+
+    /** If it should print relative to the parent context */
+    relative? : boolean;
+}
+
+export function NamespaceName(props: NamespaceNameProps) {
+    const names = [props.symbol.name];
+    const parent = props.relative ? useNamespaceContext()?.symbol : undefined;
+
+    let current = props.symbol.ownerSymbol;
+    while (current) {
+        if (
+            current === parent ||
+            !(current instanceof NamespaceSymbol) ||
+            current.isGlobal
+        ) {
+            break;
+        }
+        names.unshift(current.name);
+        current = current.ownerSymbol;
+    }
+
+    return <>{names.join(".")}</>;
+}

packages/typespec/src/components/operation.tsx

@@ -0,0 +1,5 @@
+export interface OperationProps {}; 
+
+export function Operation(props: OperationProps) {
+    return <></>;
+}

packages/typespec/src/components/scalar.tsx

@@ -0,0 +1,5 @@
+export interface ScalarProps {}; 
+
+export function Scalar(props: ScalarProps) {
+    return <></>;
+}

packages/typespec/src/components/source-file/source-file.test.tsx

@@ -0,0 +1,20 @@
+import { expect, it } from "vitest";
+import { Output } from "@alloy-js/core";
+import { SourceFile } from "./source-file.jsx";
+import { Directory } from "#components/directory/directory.jsx";
+
+it("defines multiple directories with unique source files", () => {
+    expect(
+      <Output>
+        <Directory path="dir1">
+          <SourceFile path="file.tsp">Content of File1</SourceFile>
+        </Directory>
+        <Directory path="dir2">
+          <SourceFile path="file.tsp">Content of File2</SourceFile>
+        </Directory>
+      </Output>,
+    ).toRenderTo({
+      "dir1/file.tsp": `Content of File1`,
+      "dir2/file.tsp": `Content of File2`,
+    });
+});