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/index.ts

@@ -0,0 +1,2 @@
+export * from "./source-file/source-file.jsx";
+export * from "./namespace/namespace.jsx";

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

@@ -0,0 +1,44 @@
+import { Scope } from "@alloy-js/core";
+import { Children } from "@alloy-js/core/jsx-runtime";
+import { NamespaceContext } from "../contexts/namespace.js";
+import { createTypeSpecNamespaceScope } from "../scopes/namespace.js";
+import { NamespaceSymbol } from "../symbols/namespace.js";
+
+export interface NamespaceScopProps {
+  symbol: NamespaceSymbol;
+  children: Children;
+}
+
+export function NamespaceScope(props: NamespaceScopProps) {
+  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/block.test.tsx

@@ -0,0 +1,64 @@
+import { expect, it } from "vitest";
+import { Output } from "@alloy-js/core";
+import { SourceFile } from "#components/source-file/source-file.jsx";
+import { Namespace } from "./namespace.jsx";
+import { d } from "@alloy-js/core/testing";
+import { createNamespaceSymbol } from "../../symbols/factories.js";
+
+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", () => {
+  const parentNamespace = createNamespaceSymbol("File.Level");
+    expect(
+      <Output>
+          <SourceFile path="main.tsp" namespace={parentNamespace}>
+            <Namespace name="My.Namespace">
+                Contents!
+            </Namespace>
+          </SourceFile>
+      </Output>,
+    ).toRenderTo({
+      "main.tsp": d`
+        namespace File.Level;
+
+        namespace My.Namespace {
+          Contents!
+        }`,
+    });
+});

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

@@ -0,0 +1,29 @@
+import { useNamespaceContext } from "../../contexts/namespace.js";
+import { NamespaceSymbol } from "../../symbols/namespace.js";
+
+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/namespace/namespace.tsx

@@ -0,0 +1,41 @@
+import { Block, Namekey, Refkey } from "@alloy-js/core";
+import { Children } from "@alloy-js/core/jsx-runtime";
+import { useSourceFileScope } from "../../scopes/source-file.js";
+import { createNamespaceSymbol } from "../../symbols/factories.js";
+import { NamespaceContext } from "../../contexts/namespace.js";
+import { NamespaceName } from "./namespace-name.jsx";
+import { NamespaceScope } from "#components/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 sfScope = useSourceFileScope();
+
+    if (!sfScope) {
+        return (<NamespaceContext.Provider value={{ symbol: namespaceSymbol }}>
+            {props.children}
+        </NamespaceContext.Provider>);
+    } else {
+        sfScope.hasBlockNamespace = true;
+        return (
+            <>
+                namespace <NamespaceName symbol={namespaceSymbol} relative />{" "}
+                <Block>
+                    <NamespaceContext.Provider value={{ symbol: namespaceSymbol }}>
+                        <NamespaceScope symbol={namespaceSymbol}>
+                            {props.children}
+                        </NamespaceScope>
+                    </NamespaceContext.Provider>
+                </Block>
+            </>
+        );
+    }
+}

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 { SourceDirectory } from "@alloy-js/core";
+import { Namespace } from "#components/namespace/namespace.jsx";
+
+it("defines multiple directories with unique source files", () => {
+    expect(
+      <Output>
+        <SourceDirectory path="dir1">
+          <SourceFile path="file.tsp">Content of File1</SourceFile>
+        </SourceDirectory>
+        <SourceDirectory path="dir2">
+          <SourceFile path="file.tsp">Content of File2</SourceFile>
+        </SourceDirectory>
+      </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>
+            <Namespace name="My.Namespace">
+              <SourceFile path="main.tsp" />
+            </Namespace>
+        </Output>
+    ).toRenderTo({
+        "main.tsp": `namespace My.Namespace;\n\n\n`, // why do we need to do this for this assertion to pass?
+    });
+});

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

@@ -0,0 +1,77 @@
+import { Children } from "@alloy-js/core/jsx-runtime";
+import { SourceFileScope } from "../../scopes/source-file.js";
+import { Block, computed, SourceFile as CoreSourceFile, Scope, useBinder } from "@alloy-js/core";
+import {
+    useTypeSpecFormatOptions
+} from "../../contexts/format-options.js";
+import { Reference } from "../Reference.jsx";
+import { useNamespaceContext } from "../../contexts/namespace.js";
+import { getGlobalNamespace } from "../../contexts/global-namespace.js";
+import { NamespaceScopes } from "#components/namespace-scopes.jsx";
+import { NamespaceName } from "#components/namespace/namespace-name.jsx";
+import { NamespaceSymbol } from "../../symbols/namespace.js";
+
+export interface SourceFileProps {
+    path: string;
+
+    /** If present, it defines a file-level namespace (if not present, it uses the global namespace) */
+    namespace?: NamespaceSymbol;
+
+    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 sourceFileScope = new SourceFileScope(props.path);
+
+    const nsContext = useNamespaceContext();
+    const parentNs = props.namespace ?? getGlobalNamespace(useBinder());
+    const nsSymbol = nsContext ? nsContext.symbol : parentNs;
+
+    const content = computed(() => (
+        <NamespaceScopes symbol={nsSymbol}>{props.children}</NamespaceScopes>
+    ));
+
+    const options = useTypeSpecFormatOptions();
+
+    return (
+        <CoreSourceFile
+            path={props.path}
+            filetype=".tsp"
+            reference={Reference}
+            {...options}
+        >
+             <Scope value={sourceFileScope}>
+                {nsSymbol === parentNs ?
+                    content
+                : <>
+                        namespace <NamespaceName symbol={nsSymbol} />
+                        {sourceFileScope.hasBlockNamespace ?
+                        <>
+                            {" "}
+                            <Block>{content}</Block>
+                        </>
+                        :<>
+                            ;<hbr />
+                            <hbr />
+                            {content}
+                        </>    
+
+                    }
+                    </>
+                }
+             </Scope>
+        </CoreSourceFile>
+    );
+}

packages/typespec/src/contexts/format-options.ts

@@ -0,0 +1,14 @@
+import {
+  CommonFormatOptions,
+  createFormatOptionsContextFor,
+} from "@alloy-js/core";
+
+export interface TypeSpecFormatOptions extends CommonFormatOptions {}
+
+export const {
+  Provider: TypeSpecFormatOptions,
+  useFormatOptions: useTypeSpecFormatOptions,
+} = createFormatOptionsContextFor<TypeSpecFormatOptions>("typespec", {
+  // tabWidth: 4,
+  // printWidth: 120,
+});

packages/typespec/src/contexts/global-namespace.ts

@@ -0,0 +1,36 @@
+import { Binder, useBinder } from "@alloy-js/core";
+import { NamespaceSymbol } from "../symbols/namespace.js";
+
+export function useGlobalNamespace() {
+  const binder = useBinder();
+  return getGlobalNamespace(binder);
+}
+
+const globalNamespaces = new WeakMap<Binder, NamespaceSymbol>();
+let defaultGlobalNamespace = new NamespaceSymbol("global", undefined, {
+  isGlobal: true,
+});
+
+export function resetGlobalNamespace() {
+  defaultGlobalNamespace = new NamespaceSymbol("global", undefined, {
+    isGlobal: true,
+  });
+}
+
+export function getGlobalNamespace(binder: Binder | undefined) {
+  if (!binder) {
+    return defaultGlobalNamespace;
+  }
+
+  let namespace = globalNamespaces.get(binder);
+
+  if (!namespace) {
+    namespace = new NamespaceSymbol("global", undefined, {
+      binder,
+      isGlobal: true,
+    });
+    globalNamespaces.set(binder, namespace);
+  }
+
+  return namespace;
+}

packages/typespec/src/contexts/namespace.ts

@@ -0,0 +1,13 @@
+import { ComponentContext, createContext, useContext } from "@alloy-js/core";
+import { NamespaceSymbol } from "../symbols/namespace.js";
+
+export interface NamespaceContext {
+  symbol: NamespaceSymbol;
+}
+
+export const NamespaceContext: ComponentContext<NamespaceContext> =
+  createContext();
+
+export function useNamespaceContext() {
+  return useContext(NamespaceContext);
+}

packages/typespec/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./components/index.js";
+export * from "./name-policy.js";
+export * from "./symbols/index.js";