@alloy-js/core 0.20.0-dev.7 → 0.20.0-dev.8

package/src/components/Output.tsx

@@ -4,9 +4,9 @@ import {
   SymbolCreator,
 } from "../binder.js";
 import { BinderContext } from "../context/binder.js";
+import { FormatOptions } from "../context/format-options.js";
 import { NamePolicyContext } from "../context/name-policy.js";
 import { NamePolicy } from "../name-policy.js";
-import { getContext } from "../reactivity.js";
 import { PrintTreeOptions } from "../render.js";
 import type { Children } from "../runtime/component.js";
 import { SourceDirectory } from "./SourceDirectory.js";
@@ -50,14 +50,6 @@ export function Output(props: OutputProps) {
     nameConflictResolver: props.nameConflictResolver,
   });
 
-  const nodeContext = getContext()!;
-  nodeContext.meta ??= {};
-  nodeContext.meta.printOptions = {
-    printWidth: props.printWidth,
-    tabWidth: props.tabWidth,
-    useTabs: props.useTabs,
-  };
-
   const dir = (
     <SourceDirectory path={basePath}>{props.children}</SourceDirectory>
   );
@@ -70,11 +62,19 @@ export function Output(props: OutputProps) {
 
   return (
     <BinderContext.Provider value={binder}>
-      {props.namePolicy ?
-        <NamePolicyContext.Provider value={props.namePolicy}>
-          {dir}
-        </NamePolicyContext.Provider>
-      : dir}
+      <FormatOptions
+        value={{
+          printWidth: props.printWidth,
+          tabWidth: props.tabWidth,
+          useTabs: props.useTabs,
+        }}
+      >
+        {props.namePolicy ?
+          <NamePolicyContext.Provider value={props.namePolicy}>
+            {dir}
+          </NamePolicyContext.Provider>
+        : dir}
+      </FormatOptions>
     </BinderContext.Provider>
   );
 }

package/src/components/SourceFile.tsx

@@ -1,5 +1,6 @@
 import { join } from "pathe";
 import { useContext } from "../context.js";
+import { useFormatOptions } from "../context/format-options.js";
 import { SourceDirectoryContext } from "../context/source-directory.js";
 import { SourceFileContext } from "../context/source-file.js";
 import { getContext } from "../reactivity.js";
@@ -44,11 +45,11 @@ export function SourceFile(props: SourceFileProps) {
   const nodeContext = getContext()!;
   nodeContext.meta ??= {};
   nodeContext.meta.sourceFile = context;
-  nodeContext.meta.printOptions = {
+  nodeContext.meta.printOptions = useFormatOptions({
     printWidth: props.printWidth,
     tabWidth: props.tabWidth,
     useTabs: props.useTabs,
-  };
+  });
 
   return (
     <SourceFileContext.Provider value={context}>

package/src/context/format-options.ts

@@ -0,0 +1,45 @@
+import { createNamedContext, useContext } from "../context.js";
+
+export interface CommonFormatOptions {
+  /**
+   * The number of characters the printer will wrap on.
+   */
+  printWidth?: number;
+
+  /**
+   * Whether to use tabs instead of spaces for indentation.
+   */
+  useTabs?: boolean;
+
+  /**
+   * The number of spaces to use for indentation.
+   */
+  tabWidth?: number;
+}
+
+export const { Provider: FormatOptions, useFormatOptions } =
+  createFormatOptionsContextFor<CommonFormatOptions>("*");
+
+/** Create a format options context for a specific file type */
+export function createFormatOptionsContextFor<T>(
+  filetype: string,
+  defaults?: T,
+) {
+  const context = createNamedContext<T>(`FormatOptions.${filetype}`);
+  return {
+    Provider: context.Provider,
+    useFormatOptions: (overrides?: Partial<T>): T => {
+      const base = { ...defaults, ...useContext(context) };
+      if (overrides === undefined) {
+        return base as any;
+      }
+      const result: any = { ...base };
+      for (const [key, value] of Object.entries(overrides)) {
+        if (value !== undefined) {
+          result[key] = value;
+        }
+      }
+      return result;
+    },
+  };
+}

package/src/context/index.ts

@@ -1,6 +1,7 @@
 export * from "./assignment.js";
 export * from "./binder.js";
 export * from "./declaration.js";
+export * from "./format-options.js";
 export * from "./member-declaration.js";
 export * from "./member-scope.js";
 export * from "./name-policy.js";

package/src/render.ts

@@ -208,13 +208,6 @@ export function sourceFilesForTree(
 ): OutputDirectory {
   let rootDirectory: OutputDirectory | undefined = undefined;
 
-  // when passing Output, the first render tree child is the Output component.
-  const rootRenderOptions =
-    Array.isArray(tree) ?
-      (getContextForRenderNode(tree[0] as RenderedTextTree)?.meta
-        ?.printOptions ?? {})
-    : {};
-
   collectSourceFiles(undefined, tree);
 
   if (!rootDirectory) {
@@ -265,17 +258,9 @@ export function sourceFilesForTree(
         filetype: context.meta?.sourceFile.filetype,
         contents: printTree(root, {
           printWidth:
-            options?.printWidth ??
-            context.meta?.printOptions?.printWidth ??
-            rootRenderOptions.printWidth,
-          tabWidth:
-            options?.tabWidth ??
-            context.meta?.printOptions?.tabWidth ??
-            rootRenderOptions.tabWidth,
-          useTabs:
-            options?.useTabs ??
-            context.meta?.printOptions?.useTabs ??
-            rootRenderOptions.useTabs,
+            options?.printWidth ?? context.meta?.printOptions?.printWidth,
+          tabWidth: options?.tabWidth ?? context.meta?.printOptions?.tabWidth,
+          useTabs: options?.useTabs ?? context.meta?.printOptions?.useTabs,
         }),
       };
 

package/temp/api.json

@@ -2584,6 +2584,105 @@
           ],
           "name": "code"
         },
+        {
+          "kind": "Interface",
+          "canonicalReference": "@alloy-js/core!CommonFormatOptions:interface",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export interface CommonFormatOptions "
+            }
+          ],
+          "fileUrlPath": "src/context/format-options.ts",
+          "releaseTag": "Public",
+          "name": "CommonFormatOptions",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@alloy-js/core!CommonFormatOptions#printWidth:member",
+              "docComment": "/**\n * The number of characters the printer will wrap on.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "printWidth?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "number"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "printWidth",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@alloy-js/core!CommonFormatOptions#tabWidth:member",
+              "docComment": "/**\n * The number of spaces to use for indentation.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "tabWidth?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "number"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "tabWidth",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@alloy-js/core!CommonFormatOptions#useTabs:member",
+              "docComment": "/**\n * Whether to use tabs instead of spaces for indentation.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "useTabs?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "useTabs",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            }
+          ],
+          "extendsTokenRanges": []
+        },
         {
           "kind": "Interface",
           "canonicalReference": "@alloy-js/core!Component:interface",
@@ -4302,6 +4401,107 @@
           ],
           "name": "createFileResource"
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@alloy-js/core!createFormatOptionsContextFor:function(1)",
+          "docComment": "/**\n * Create a format options context for a specific file type\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function createFormatOptionsContextFor<T>(filetype: "
+            },
+            {
+              "kind": "Content",
+              "text": "string"
+            },
+            {
+              "kind": "Content",
+              "text": ", defaults?: "
+            },
+            {
+              "kind": "Content",
+              "text": "T"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    Provider: import(\"../index.js\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "ComponentDefinition",
+              "canonicalReference": "@alloy-js/core!ComponentDefinition:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"../context.js\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "ContextProviderProps",
+              "canonicalReference": "@alloy-js/core!ContextProviderProps:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<T>>;\n    useFormatOptions: (overrides?: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Partial",
+              "canonicalReference": "!Partial:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<T>) => T;\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/context/format-options.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 5,
+            "endIndex": 12
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "filetype",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isOptional": false
+            },
+            {
+              "parameterName": "defaults",
+              "parameterTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "isOptional": true
+            }
+          ],
+          "typeParameters": [
+            {
+              "typeParameterName": "T",
+              "constraintTokenRange": {
+                "startIndex": 0,
+                "endIndex": 0
+              },
+              "defaultTypeTokenRange": {
+                "startIndex": 0,
+                "endIndex": 0
+              }
+            }
+          ],
+          "name": "createFormatOptionsContextFor"
+        },
         {
           "kind": "Function",
           "canonicalReference": "@alloy-js/core!createIntrinsic:function(1)",
@@ -6581,6 +6781,56 @@
             "endIndex": 14
           }
         },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@alloy-js/core!FormatOptions:var",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "FormatOptions: "
+            },
+            {
+              "kind": "Content",
+              "text": "import(\"../index.js\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "ComponentDefinition",
+              "canonicalReference": "@alloy-js/core!ComponentDefinition:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"../context.js\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "ContextProviderProps",
+              "canonicalReference": "@alloy-js/core!ContextProviderProps:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "CommonFormatOptions",
+              "canonicalReference": "@alloy-js/core!CommonFormatOptions:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ">>"
+            }
+          ],
+          "fileUrlPath": "src/context/format-options.ts",
+          "isReadonly": true,
+          "releaseTag": "Public",
+          "name": "FormatOptions",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 8
+          }
+        },
         {
           "kind": "Interface",
           "canonicalReference": "@alloy-js/core!ForProps:interface",
@@ -23291,6 +23541,62 @@
           ],
           "name": "useContext"
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@alloy-js/core!useFormatOptions:function(1)",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "useFormatOptions: (overrides?: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Partial",
+              "canonicalReference": "!Partial:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "CommonFormatOptions",
+              "canonicalReference": "@alloy-js/core!CommonFormatOptions:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "> | undefined"
+            },
+            {
+              "kind": "Content",
+              "text": ") => "
+            },
+            {
+              "kind": "Reference",
+              "text": "CommonFormatOptions",
+              "canonicalReference": "@alloy-js/core!CommonFormatOptions:interface"
+            }
+          ],
+          "fileUrlPath": "src/context/format-options.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 6,
+            "endIndex": 7
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "overrides",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 5
+              },
+              "isOptional": true
+            }
+          ],
+          "name": "useFormatOptions"
+        },
         {
           "kind": "Function",
           "canonicalReference": "@alloy-js/core!useMemberContext:function(1)",

package/test/components/source-file.test.tsx

@@ -1,13 +1,18 @@
 import {
+  Children,
+  CommonFormatOptions,
   computed,
   ContentOutputFile,
+  FormatOptions,
+  Indent,
   Output,
+  Prose,
   render,
   renderTree,
   SourceFile,
   useContext,
 } from "@alloy-js/core";
-import { expect, it } from "vitest";
+import { describe, expect, it } from "vitest";
 import { SourceDirectoryContext } from "../../src/context/source-directory.js";
 import "../../testing/extend-expect.js";
 import { d } from "../../testing/render.js";
@@ -71,3 +76,67 @@ it("Includes header", () => {
     hello!
     `);
 });
+
+describe("format options", () => {
+  function FileWithFormatOptions(props: {
+    options: CommonFormatOptions;
+    children: Children;
+  }) {
+    return (
+      <FormatOptions value={props.options}>
+        <SourceFile path="hi.txt" filetype="text">
+          {props.children}
+        </SourceFile>
+      </FormatOptions>
+    );
+  }
+
+  it("respect tabWidth", () => {
+    expect(
+      <FileWithFormatOptions options={{ tabWidth: 5 }}>
+        hello
+        <Indent>indented 5 spaces</Indent>
+      </FileWithFormatOptions>,
+    ).toRenderTo(`
+      hello
+           indented 5 spaces
+    `);
+  });
+
+  it("respect useTabs", () => {
+    expect(
+      <FileWithFormatOptions options={{ useTabs: true }}>
+        hello
+        <Indent>indented with tabs</Indent>
+      </FileWithFormatOptions>,
+    ).toRenderTo(`
+      hello
+      \tindented with tabs
+    `);
+  });
+
+  it("respect printWidth", () => {
+    expect(
+      <FileWithFormatOptions options={{ printWidth: 10 }}>
+        <Prose>this is too long</Prose>
+      </FileWithFormatOptions>,
+    ).toRenderTo(`
+      this is
+      too long
+    `);
+  });
+
+  it("source file overrides take precedence", () => {
+    expect(
+      <FormatOptions value={{ tabWidth: 5 }}>
+        <SourceFile path="hi.txt" filetype="text" tabWidth={3}>
+          hello
+          <Indent>indented 3 spaces</Indent>
+        </SourceFile>
+      </FormatOptions>,
+    ).toRenderTo(`
+      hello
+         indented 3 spaces
+    `);
+  });
+});

package/testing/extend-expect.ts

@@ -98,12 +98,6 @@ function validateRender(
 
 function getFilesFromTree(tree: RenderedTextTree, options?: ToRenderToOptions) {
   const files: Record<string, string> = {};
-  // when passing Output, the first render tree child is the Output component.
-  const rootRenderOptions =
-    Array.isArray(tree) ?
-      (getContextForRenderNode(tree[0] as RenderedTextTree)?.meta
-        ?.printOptions ?? {})
-    : {};
 
   collectSourceFiles(tree);
   // If we found no source files, we return the tree as a string.
@@ -121,17 +115,9 @@ function getFilesFromTree(tree: RenderedTextTree, options?: ToRenderToOptions) {
     if (context?.meta?.sourceFile) {
       files[context.meta.sourceFile.path] = printTree(root, {
         printWidth:
-          options?.printWidth ??
-          context.meta?.printOptions?.printWidth ??
-          rootRenderOptions.printWidth,
-        tabWidth:
-          options?.tabWidth ??
-          context.meta?.printOptions?.tabWidth ??
-          rootRenderOptions.tabWidth,
-        useTabs:
-          options?.useTabs ??
-          context.meta?.printOptions?.useTabs ??
-          rootRenderOptions.useTabs,
+          options?.printWidth ?? context.meta?.printOptions?.printWidth,
+        tabWidth: options?.tabWidth ?? context.meta?.printOptions?.tabWidth,
+        useTabs: options?.useTabs ?? context.meta?.printOptions?.useTabs,
       });
     } else {
       visitChildren();