WIP: getting namespace as props not working yet

Author: jpalvarezl

packages/typespec/src/components/index.ts

@@ -1,3 +1,2 @@
 export * from "./source-file/source-file.jsx";
-export * from "./namespace/block.jsx";
-export * from "./namespace/file-level.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

@@ -1,8 +1,9 @@
 import { expect, it } from "vitest";
 import { Output } from "@alloy-js/core";
 import { SourceFile } from "#components/source-file/source-file.jsx";
-import { Namespace } from "./block.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(
@@ -43,9 +44,10 @@ it("renders nested block namespaces", () => {
 });
 
 it("renders namespaces when a file level namespace is present", () => {
+  const parentNamespace = createNamespaceSymbol("File.Level");
     expect(
       <Output>
-          <SourceFile path="main.tsp" namespace="File.Level">
+          <SourceFile path="main.tsp" namespace={parentNamespace}>
             <Namespace name="My.Namespace">
                 Contents!
             </Namespace>

packages/typespec/src/components/namespace/block.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/file-level.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/namespace/namespace-name.tsx

@@ -2,6 +2,7 @@ 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(
@@ -22,7 +23,9 @@ it("defines multiple directories with unique source files", () => {
 it("declares a file level namespace when one is provided", () => {
     expect(
         <Output>
-            <SourceFile namespace="My.Namespace" path="main.tsp" />
+            <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/namespace/namespace.tsx

@@ -1,18 +1,21 @@
 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 { Block, computed, SourceFile as CoreSourceFile, Scope, useBinder } 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";
+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?: string;
+    namespace?: NamespaceSymbol;
 
     children?: Children;
 
@@ -30,8 +33,15 @@ export interface SourceFileProps {
 };
 
 export function SourceFile(props: SourceFileProps) {
-    const parent = useDirectoryScope();
-    const sourceFileScope = new SourceFileScope(props.path, parent);
+    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();
 
@@ -43,9 +53,24 @@ export function SourceFile(props: SourceFileProps) {
             {...options}
         >
              <Scope value={sourceFileScope}>
-                <FileLevelNamespace name={props.namespace} isGlobal={props.namespace === undefined}>
-                    {props.children}
-                </FileLevelNamespace>
+                {nsSymbol === parentNs ?
+                    content
+                : <>
+                        namespace <NamespaceName symbol={nsSymbol} />
+                        {sourceFileScope.hasBlockNamespace ?
+                        <>
+                            {" "}
+                            <Block>{content}</Block>
+                        </>
+                        :<>
+                            ;<hbr />
+                            <hbr />
+                            {content}
+                        </>    
+                    
+                    }
+                    </>
+                }
              </Scope>
         </CoreSourceFile>
     );

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

@@ -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);
+}