@alloy-js/core 0.4.0 → 0.6.0

package/src/components/Output.tsx

@@ -5,14 +5,16 @@ import {
 } from "../binder.js";
 import { BinderContext } from "../context/binder.js";
 import { NamePolicyContext } from "../context/name-policy.js";
-import { Children } from "../jsx-runtime.js";
+import { Children, getContext } from "../jsx-runtime.js";
 import { NamePolicy } from "../name-policy.js";
+import { PrintTreeOptions } from "../render.js";
+import { extensionEffects } from "../slot.js";
 import { SourceDirectory } from "./SourceDirectory.js";
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { extensionEffects } from "../slot.js";
 import { SourceFile } from "./SourceFile.js";
 
-export interface OutputProps {
+export interface OutputProps extends PrintTreeOptions {
   children?: Children;
   /**
    * External libraries whose symbols should be available for reference.
@@ -47,10 +49,18 @@ export function Output(props: OutputProps) {
   const binder = createOutputBinder({
     nameConflictResolver: props.nameConflictResolver,
   });
-  const dir =
-    <SourceDirectory path={basePath}>
-    {props.children}
-  </SourceDirectory>;
+
+  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>
+  );
 
   if (props.externals) {
     for (const global of props.externals) {
@@ -58,13 +68,16 @@ export function Output(props: OutputProps) {
     }
   }
 
-  return <BinderContext.Provider value={binder}>
-    {() => { extensionEffects.forEach(e => e())}}{
-      props.namePolicy ?
+  return (
+    <BinderContext.Provider value={binder}>
+      {() => {
+        extensionEffects.forEach((e) => e());
+      }}
+      {props.namePolicy ?
         <NamePolicyContext.Provider value={props.namePolicy}>
           {dir}
-        </NamePolicyContext.Provider> :
-        dir
-    }
-  </BinderContext.Provider>;
+        </NamePolicyContext.Provider>
+      : dir}
+    </BinderContext.Provider>
+  );
 }

package/src/components/Scope.tsx

@@ -21,7 +21,9 @@ export function Scope(props: ScopeProps) {
     scope = binder.createScope({ kind, name: props.name! });
   }
 
-  return <ScopeContext.Provider value={scope}>
+  return (
+    <ScopeContext.Provider value={scope}>
       {props.children}
-    </ScopeContext.Provider>;
+    </ScopeContext.Provider>
+  );
 }

package/src/components/Show.tsx

@@ -0,0 +1,11 @@
+import { Children } from "@alloy-js/core/jsx-runtime";
+
+export interface ShowProps {
+  children: Children;
+  fallback?: Children;
+  when: boolean | undefined | null;
+}
+
+export function Show(props: ShowProps) {
+  return () => (props.when ? props.children : props.fallback);
+}

package/src/components/SourceDirectory.tsx

@@ -6,7 +6,7 @@ import { Children, getContext } from "../jsx-runtime.js";
 
 export interface SourceDirectoryProps {
   path: string;
-  children?: Children[];
+  children?: Children;
 }
 
 export function SourceDirectory(props: SourceDirectoryProps) {
@@ -20,7 +20,11 @@ export function SourceDirectory(props: SourceDirectoryProps) {
   nodeContext.meta.directory = {
     path: sdPath,
   };
-  return <SourceDirectoryContext.Provider value={context}>{props.children}</SourceDirectoryContext.Provider>;
+  return (
+    <SourceDirectoryContext.Provider value={context}>
+      {props.children}
+    </SourceDirectoryContext.Provider>
+  );
 }
 
 function createSourceDirectoryContext(

package/src/components/SourceFile.tsx

@@ -1,12 +1,12 @@
 import { join } from "pathe";
 import { useContext } from "../context.js";
-import { IndentContext } from "../context/indent.js";
 import { SourceDirectoryContext } from "../context/source-directory.js";
 import { SourceFileContext } from "../context/source-file.js";
 import { Children, ComponentDefinition, getContext } from "../jsx-runtime.js";
 import { Refkey } from "../refkey.js";
+import { PrintTreeOptions } from "../render.js";
 
-export interface SourceFileProps {
+export interface SourceFileProps extends PrintTreeOptions {
   /**
    * The path of this file relative to its parent directory
    */
@@ -17,19 +17,13 @@ export interface SourceFileProps {
    */
   filetype: string;
 
-  children?: Children[];
+  children?: Children;
 
   /**
    * The component to use to render refkeys references within the file's
    * contents.
    */
   reference?: ComponentDefinition<{ refkey: Refkey }>;
-
-  /**
-   * A string representing one indent level, used when reindenting contents of
-   * this file.
-   */
-  indent?: string;
 }
 
 export function SourceFile(props: SourceFileProps) {
@@ -43,13 +37,15 @@ export function SourceFile(props: SourceFileProps) {
   const nodeContext = getContext()!;
   nodeContext.meta ??= {};
   nodeContext.meta.sourceFile = context;
+  nodeContext.meta.printOptions = {
+    printWidth: props.printWidth,
+    tabWidth: props.tabWidth,
+    useTabs: props.useTabs,
+  };
 
-  return <SourceFileContext.Provider value={context}>
-    { props.indent
-      ? <IndentContext.Provider value={{ level: 0, indent: props.indent, indentString: "" }}>
-          {props.children}
-        </IndentContext.Provider>
-      : props.children
-    }
-  </SourceFileContext.Provider>;
+  return (
+    <SourceFileContext.Provider value={context}>
+      {props.children}
+    </SourceFileContext.Provider>
+  );
 }

package/src/components/StatementList.tsx

@@ -0,0 +1,16 @@
+import { Children, List } from "@alloy-js/core";
+
+export interface StatementListProps {
+  children: Children;
+}
+
+/**
+ * Join child elements with semicolons and hardlines.
+ */
+export function StatementList(props: StatementListProps) {
+  return (
+    <List semicolon hardline enderPunctuation>
+      {props.children}
+    </List>
+  );
+}

package/src/components/Switch.tsx

@@ -0,0 +1,62 @@
+import { Children, memo, taggedComponent } from "@alloy-js/core/jsx-runtime";
+import { childrenArray, findKeyedChildren } from "../utils.js";
+
+export interface SwitchProps {
+  children: Children;
+}
+
+/**
+ * Conditionally render blocks of content based on the `when` prop of nested
+ * {@link Match} components.
+ *
+ * @example
+ *
+ * ```tsx
+ * <Switch>
+ *   <Match when={someCondition}>
+ *     <div>Condition met!</div>
+ *   </Match>
+ *   <Match else>
+ *     <div>Condition not met!</div>
+ *   </Match>
+ * </Switch>
+ * ```
+ */
+export function Switch(props: SwitchProps) {
+  const children = childrenArray(() => props.children);
+  const matches = findKeyedChildren(children, matchTag);
+
+  return memo(() => {
+    for (const match of matches) {
+      if (match.props.when || match.props.else) {
+        return match.props.children;
+      }
+    }
+
+    return undefined;
+  });
+}
+
+export interface MatchProps {
+  /**
+   * Condition under which the children of this element will be rendered.
+   */
+  when?: boolean;
+
+  /**
+   * If no `when` is matched, the children of this element will be rendered.
+   * The `else` match must be placed last.
+   */
+  else?: boolean;
+  children: Children;
+}
+
+export const matchTag = Symbol();
+
+/**
+ * The Match component is used inside of a {@link Switch} component to
+ * define conditionally rendered blocks of content.
+ */
+export const Match = taggedComponent(matchTag, (props: MatchProps) => {
+  return () => (props.when ? props.children : undefined);
+});

package/src/components/Wrap.tsx

@@ -0,0 +1,29 @@
+import { Children, ComponentDefinition } from "@alloy-js/core/jsx-runtime";
+
+export interface WrapProps<TProps> {
+  /**
+   * When true, the children will be wrapped with the provided component.
+   * Otherwise, the children will be rendered as is.
+   */
+  when: boolean;
+
+  /** Children to be wrapped. */
+  children: Children;
+
+  /** Component to be used for wrapping. */
+  with: ComponentDefinition<TProps>;
+
+  /** Props to pass to the wrapper component. */
+  props?: Omit<TProps, "children">;
+}
+
+/**
+ * Conditionally wrap the children of this component with the component given to
+ * `with` and passing `props` to it.
+ */
+export function Wrap<TProps>(props: WrapProps<TProps>) {
+  const Wrapper = props.with as any;
+  return props.when ?
+      <Wrapper {...(props.props ?? {})}>{props.children}</Wrapper>
+    : props.children;
+}

package/src/components/index.tsx

@@ -1,10 +1,17 @@
+export * from "./Block.js";
 export * from "./Declaration.js";
-export * from "./Indent.js";
+export * from "./For.js";
+export * from "./Indent.jsx";
+export * from "./List.jsx";
 export * from "./MemberDeclaration.jsx";
 export * from "./MemberName.jsx";
 export * from "./MemberScope.jsx";
 export * from "./Name.jsx";
 export * from "./Output.js";
 export * from "./Scope.js";
+export * from "./Show.jsx";
 export * from "./SourceDirectory.js";
 export * from "./SourceFile.js";
+export * from "./StatementList.jsx";
+export * from "./Switch.jsx";
+export * from "./Wrap.jsx";

package/src/components/stc/index.ts

@@ -1,9 +1,26 @@
-import { stc } from "../../utils.js";
+import { stc, sti } from "../../stc.js";
 import * as base from "../index.js";
 
+export const Block = stc(base.Block);
 export const Declaration = stc(base.Declaration);
+export const For = stc(base.For);
 export const Indent = stc(base.Indent);
+export const List = stc(base.List);
+export const MemberDeclaration = stc(base.MemberDeclaration);
+export const MemberName = stc(base.MemberName);
+export const MemberScope = stc(base.MemberScope);
+export const Name = stc(base.Name);
 export const Output = stc(base.Output);
 export const Scope = stc(base.Scope);
+export const Show = stc(base.Show);
+export const StatementList = stc(base.StatementList);
 export const SourceDirectory = stc(base.SourceDirectory);
 export const SourceFile = stc(base.SourceFile);
+export const Switch = stc(base.Switch);
+export const Wrap = stc(base.Wrap);
+
+export const indent = sti("indent");
+export const hbr = sti("hbr");
+export const sbr = sti("sbr");
+export const lbr = sti("lbr");
+export const br = sti("br");

package/src/context/index.ts

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

package/src/context/member-declaration.ts

@@ -1,5 +1,9 @@
 import { OutputSymbol } from "../binder.js";
-import { ComponentContext, createNamedContext } from "../context.js";
+import {
+  ComponentContext,
+  createNamedContext,
+  useContext,
+} from "../context.js";
 
 /**
  * Provides the symbol for the member currently being declared.
@@ -8,3 +12,7 @@ import { ComponentContext, createNamedContext } from "../context.js";
  */
 export const MemberDeclarationContext: ComponentContext<OutputSymbol> =
   createNamedContext("MemberDeclaration");
+
+export function useMemberDeclaration() {
+  return useContext(MemberDeclarationContext);
+}

package/src/context.ts

@@ -4,7 +4,6 @@ import {
   ComponentDefinition,
   effect,
   getContext,
-  untrack,
 } from "./jsx-runtime.js";
 
 export interface ComponentContext<T> {
@@ -49,8 +48,8 @@ export function createContext<T = unknown>(
       const rendered = shallowRef();
       effect(() => {
         context!.context![id] = props.value;
-        rendered.value = untrack(() => props.children);
-      });
+        rendered.value = () => props.children;
+      }, undefined);
 
       return rendered.value;
     },

package/src/index.browser.ts

@@ -0,0 +1,2 @@
+export * from "./index.js"; // Re-export everything
+export { writeOutput } from "./write-output.browser.js"; // Override writeOutput for browsers

package/src/index.ts

@@ -17,6 +17,8 @@ export * from "./jsx-runtime.js";
 export * from "./name-policy.js";
 export * from "./refkey.js";
 export * from "./render.js";
+export * from "./stc.js";
+export * from "./tap.js";
 export * from "./utils.js";
 export * from "./write-output.js";
 import "./debug.js";