TypeSpec SourceFile and Namespace components

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/block.test.tsx

@@ -0,0 +1,63 @@
+import { expect, it } from "vitest";
+import { Output } from "@alloy-js/core";
+import { Directory } from "#components/directory/directory.jsx";
+import { SourceFile } from "#components/source-file/source-file.jsx";
+import { Namespace } from "./block.jsx";
+import { d } from "@alloy-js/core/testing";
+
+it("renders a namespace with contents", () => {
+    expect(
+      <Output>
+          <SourceFile path="main.tsp">
+            <Namespace name="My.Namespace">
+                Contents!
+            </Namespace>
+          </SourceFile>
+      </Output>,
+    ).toRenderTo({
+      "main.tsp": d`
+        namespace My.Namespace {
+          Contents!
+        }`,
+    });
+});
+
+it("renders nested block namespaces", () => {
+    expect(
+      <Output>
+          <SourceFile path="main.tsp">
+            <Namespace name="My.Namespace">
+                <Namespace name="Inner.Namespace">
+                    Inner Contents!
+                </Namespace>
+            </Namespace>
+          </SourceFile>
+      </Output>,
+    ).toRenderTo({
+      "main.tsp": d`
+        namespace My.Namespace {
+          namespace Inner.Namespace {
+            Inner Contents!
+          }
+        }`,
+    });
+});
+
+it("renders namespaces when a file level namespace is present", () => {
+    expect(
+      <Output>
+          <SourceFile path="main.tsp" namespace="File.Level">
+            <Namespace name="My.Namespace">
+                Contents!
+            </Namespace>
+          </SourceFile>
+      </Output>,
+    ).toRenderTo({
+      "main.tsp": d`
+        namespace File.Level;
+
+        namespace My.Namespace {
+          Contents!
+        }`,
+    });
+});

packages/typespec/src/components/namespace/block.tsx

@@ -0,0 +1,35 @@
+import { Block, Children, Namekey, Refkey, Scope, useScope } from "@alloy-js/core";
+import { NamespaceScope, useNamespace } from "../../scopes/namespace.js";
+import { createNamespaceSymbol } from "../../symbols/factories.js";
+import { Declaration } from "../../../../core/src/index.browser.js";
+
+export interface NamespaceProps {
+    name: string | Namekey | (string | Namekey)[];
+    refkey?: Refkey | Refkey[];
+    children?: Children;
+}
+
+export function Namespace(props: NamespaceProps) {
+    const parent = useNamespace();
+
+    if (parent === undefined) {
+        throw new Error("Block namespace must be declared within another namespace.");
+    }
+
+    const symbol = createNamespaceSymbol(props.name, {
+        refkeys: props.refkey,
+    });
+
+    const scope = new NamespaceScope(symbol, parent);
+    const name = symbol.getScopedName(parent.ownerSymbol);
+
+    return (
+        <Scope value={scope}>
+            <Declaration symbol={symbol}>
+                namespace {name} <Block>
+                    {props.children}
+                </Block>
+            </Declaration>
+        </Scope>
+    );
+}

packages/typespec/src/components/namespace/file-level.tsx

@@ -0,0 +1,52 @@
+import { Children, Declaration, Name, Namekey, Refkey, Scope, Show, useBinder } from "@alloy-js/core";
+import { useSourceFileScope } from "../../scopes/source-file.js";
+import { getGlobalNamespace } from "../../contexts/global-namespace.js";
+import { NamespaceSymbol } from "../../symbols/namespace.js";
+import { createNamespaceSymbol } from "../../symbols/factories.js";
+import { NamespaceScope } from "../../scopes/namespace.js";
+
+export interface FileLevelNamespaceProps {
+    name?: string | Namekey | (string | Namekey)[];
+    refkey?: Refkey | Refkey[];
+    children?: Children;
+    isGlobal?: boolean;
+}
+
+export function FileLevelNamespace(props: FileLevelNamespaceProps) {
+    if (props.name === undefined && !props.isGlobal) {
+        throw new Error("File level namespace requires a name or global flag");
+    }
+    if (props.name !== undefined && props.isGlobal) {
+        throw new Error("File level namespace cannot have both a name and global flag");
+    }
+
+    const parent = useSourceFileScope();
+    if (parent === undefined) {
+        throw new Error("File level namespace must be used within a source file scope");
+    }
+
+    let symbol: NamespaceSymbol;
+    if (props.name === undefined) {
+        symbol = getGlobalNamespace(useBinder());
+    } else {
+        symbol = createNamespaceSymbol(props.name, {
+            refkeys: props.refkey,
+        });
+    }
+
+    const namespaceScope = new NamespaceScope(symbol, parent);
+
+    return (
+        <Scope value={namespaceScope} >
+            <Declaration symbol={symbol}>
+                <Show when={!props.isGlobal}>
+                    namespace {symbol.getFullyQualifiedName()};
+                    <hbr />
+                    <hbr />
+                </Show>
+                {props.children}
+            </Declaration>
+        </Scope>
+    )
+
+}

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,33 @@
+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`,
+    });
+});
+
+it("declares a file level namespace when one is provided", () => {
+    expect(
+        <Output>
+            <SourceFile namespace="My.Namespace" path="main.tsp">
+            </SourceFile>
+        </Output>
+    ).toRenderTo({
+        "main.tsp": `
+            namespace My.Namespace;
+        `,
+    });
+});

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

@@ -0,0 +1,52 @@
+import { Children } from "@alloy-js/core/jsx-runtime";
+import { SourceFileScope } from "../../scopes/source-file.js";
+import { SourceFile as CoreSourceFile, Scope } from "@alloy-js/core";
+import {
+    useTypeSpecFormatOptions
+} from "../../contexts/format-options.js";
+import { Reference } from "../Reference.jsx";
+import { useDirectoryScope } from "../../scopes/contexts.js";
+import { FileLevelNamespace } from "#components/namespace/file-level.jsx";
+
+export interface SourceFileProps {
+    path: string;
+
+    /** If present, it defines a file-level namespace (if not present, it uses the global namespace) */
+    namespace?: string;
+
+    children?: Children;
+
+    /**
+     * A list of using directives to explicitly include. Note that providing
+     * explicit usings is not necessary when referencing symbols via refkeys.
+     */
+    using?: string[];
+
+    /**
+     * A list of import directives to explicitly include. Note that providing
+     * explicit imports is not necessary when referencing symbols via refkeys.
+     */
+    import?: string[];
+};
+
+export function SourceFile(props: SourceFileProps) {
+    const parent = useDirectoryScope();
+    const sourceFileScope = new SourceFileScope(props.path, parent);
+
+    const options = useTypeSpecFormatOptions();
+
+    return (
+        <CoreSourceFile
+            path={props.path}
+            filetype=".tsp"
+            reference={Reference}
+            {...options}
+        >
+             <Scope value={sourceFileScope}>
+                <FileLevelNamespace name={props.namespace} isGlobal={props.namespace === undefined}>
+                    {props.children}
+                </FileLevelNamespace>
+             </Scope>
+        </CoreSourceFile>
+    );
+}

packages/typespec/src/components/union.tsx

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