@alloy-js/core 0.22.0-dev.1 → 0.22.0-dev.3

package/src/components/Block.tsx

@@ -1,6 +1,6 @@
 import { computed } from "@vue/reactivity";
+import { createContentSlot } from "../content-slot.jsx";
 import type { Children } from "../runtime/component.js";
-import { childrenArray } from "../utils.jsx";
 import { Indent } from "./Indent.jsx";
 
 export interface BlockProps {
@@ -33,17 +33,29 @@ export interface BlockProps {
  * added after the block, which defaults to `"}"`.
  */
 export function Block(props: BlockProps) {
-  const childCount = computed(() => childrenArray(() => props.children).length);
+  const ContentSlot = createContentSlot();
+  const leadingNewline = computed(() => {
+    if (!props.newline) return false;
+
+    // When inline, we want a newline only when content breaks, otherwise a nothing..
+    if (props.inline) return <sbr />;
+
+    // When not inline, we want a hardline when the slot has contents otherwise a space.
+    if (ContentSlot.hasContent) return <hbr />;
+
+    return " ";
+  });
   return (
     <group>
-      {props.newline && (props.inline ? <softline /> : <br />)}
+      {leadingNewline}
       {props.opener ?? "{"}
       <Indent
-        line={props.inline && childCount.value > 0}
-        softline={childCount.value === 0}
+        hardline={!props.inline && ContentSlot.hasContent}
+        line={props.inline && ContentSlot.hasContent}
+        softline={!props.inline || ContentSlot.isEmpty}
         trailingBreak
       >
-        {props.children}
+        <ContentSlot>{props.children}</ContentSlot>
       </Indent>
       {props.closer ?? "}"}
     </group>

package/src/components/Indent.tsx

@@ -1,3 +1,4 @@
+import { computed } from "@vue/reactivity";
 import type { Children } from "../runtime/component.js";
 
 export interface IndentProps {
@@ -40,12 +41,13 @@ export interface IndentProps {
  * break suitable for typical blocks of statements but can be configured.
  */
 export function Indent(props: IndentProps) {
-  const breakElem =
+  const breakElem = computed(() =>
     props.nobreak ? ""
     : props.hardline ? <hbr />
     : props.softline ? <sbr />
     : props.line ? <br />
-    : <hbr />;
+    : <hbr />,
+  );
 
   return (
     <>

package/src/components/Prose.tsx

@@ -1,5 +1,6 @@
-import { childrenArray, computed } from "@alloy-js/core";
+import { computed } from "@vue/reactivity";
 import type { Children } from "../runtime/component.js";
+import { childrenArray } from "../utils.jsx";
 
 export interface Prose {
   children: Children;

package/src/content-slot.test.tsx

@@ -0,0 +1,65 @@
+import { ref } from "@vue/reactivity";
+import { expect, it } from "vitest";
+import "../testing/extend-expect.js";
+import { Show } from "./components/Show.jsx";
+import { createContentSlot } from "./content-slot.jsx";
+import { printTree, renderTree } from "./render.js";
+
+it("knows when its empty", () => {
+  const ContentSlot = createContentSlot();
+
+  expect(
+    <>
+      {ContentSlot.hasContent && "{"}
+      <ContentSlot>hi</ContentSlot>
+      {ContentSlot.hasContent && "}"}
+    </>,
+  ).toRenderTo(`
+    {hi}
+  `);
+
+  expect(
+    <>
+      {ContentSlot.hasContent && "{"}
+      <ContentSlot>{false}</ContentSlot>
+      {ContentSlot.hasContent && "}"}
+    </>,
+  ).toRenderTo(``);
+});
+
+it("is reactive", () => {
+  const ContentSlot = createContentSlot();
+  const showContent = ref(false);
+
+  const tree = renderTree(
+    <>
+      {ContentSlot.isEmpty && "It's empty!"}
+      <ContentSlot>
+        <Show when={showContent.value}>Content!</Show>
+      </ContentSlot>
+    </>,
+  );
+
+  expect(printTree(tree)).toBe(`It's empty!`);
+  showContent.value = true;
+  expect(printTree(tree)).toBe(`Content!`);
+});
+
+it("works with WhenEmpty and WhenHasContent", () => {
+  const ContentSlot = createContentSlot();
+  const showContent = ref(false);
+
+  const tree = renderTree(
+    <>
+      <ContentSlot.WhenEmpty>It's empty!</ContentSlot.WhenEmpty>
+      <ContentSlot.WhenHasContent>Has content!</ContentSlot.WhenHasContent>
+      <ContentSlot>
+        <Show when={showContent.value}>Content!</Show>
+      </ContentSlot>
+    </>,
+  );
+
+  expect(printTree(tree)).toBe(`It's empty!`);
+  showContent.value = true;
+  expect(printTree(tree)).toBe(`Has content!Content!`);
+});

package/src/content-slot.tsx

@@ -0,0 +1,91 @@
+import { effect, Ref, shallowRef } from "@vue/reactivity";
+import { Show } from "./components/Show.jsx";
+import { getContext } from "./reactivity.js";
+import { Children, Component } from "./runtime/component.js";
+
+export interface ContentSlot {
+  (props: { children: Children }): Children;
+  /**
+   * A ref indicating whether the slot is currently empty.
+   */
+  ref: Ref<boolean>;
+
+  /**
+   * Whether the slot is currently empty.
+   */
+  isEmpty: boolean;
+
+  /**
+   * Whether the slot has any content.
+   */
+  hasContent: boolean;
+
+  /**
+   * A component that will render its contents when the content slot is empty.
+   */
+  WhenEmpty: Component<{}>;
+
+  /**
+   * A component that will render its contents when the content slot has content.
+   */
+  WhenHasContent: Component<{}>;
+}
+
+/**
+ * Create a component which tracks whether any content is placed inside of it.
+ * The component exposes a ref `isEmpty` which indicates whether the slot is
+ * empty, as well as convenience accessors `isEmpty` and `hasContent`.
+ * Additionally, it provides two sub-components, `WhenEmpty` and
+ * `WhenHasContent`, which render their contents conditionally based on whether
+ * the slot is empty.
+ *
+ * @example
+ *
+ * ```tsx
+ * const ContentSlot = createContentSlot();
+ *
+ * <>
+ *   <ContentSlot.WhenEmpty>The slot is empty!</ContentSlot.WhenEmpty>
+ *   <ContentSlot.WhenHasContent>The slot has content!</ContentSlot.WhenHasContent>
+ *   <ContentSlot>
+ *     {someCondition && "Here is some content!"}
+ *   </ContentSlot>
+ * </>
+ * ```
+ */
+export function createContentSlot(): ContentSlot {
+  const isEmpty = shallowRef<boolean>(false);
+
+  function ContentSlot(props: { children: Children }) {
+    const context = getContext()!;
+    effect(() => {
+      isEmpty.value = context.isEmpty!.value;
+    });
+
+    return props.children;
+  }
+  ContentSlot.ref = isEmpty;
+  ContentSlot.WhenEmpty = function WhenEmpty(props: { children: Children }) {
+    return <Show when={isEmpty.value}>{props.children}</Show>;
+  };
+
+  ContentSlot.WhenHasContent = function WhenHasContent(props: {
+    children: Children;
+  }) {
+    return <Show when={!isEmpty.value}>{props.children}</Show>;
+  };
+
+  Object.defineProperty(ContentSlot, "isEmpty", {
+    get() {
+      return isEmpty.value;
+    },
+  });
+
+  Object.defineProperty(ContentSlot, "hasContent", {
+    get() {
+      return !isEmpty.value;
+    },
+  });
+
+  return ContentSlot as any;
+}

package/src/index.ts

@@ -25,6 +25,7 @@ export {
 export * from "./binder.js";
 export * from "./code.js";
 export * from "./components/index.js";
+export * from "./content-slot.js";
 export * from "./context.js";
 export * from "./context/index.js";
 export * from "./library-symbol-reference.js";

package/src/reactivity.ts

@@ -1,6 +1,9 @@
 import {
+  isRef,
   pauseTracking,
   ReactiveEffectRunner,
+  ref,
+  Ref,
   resetTracking,
   ShallowReactive,
   shallowRef,
@@ -66,6 +69,22 @@ export interface Context {
    * The symbol that this component has taken.
    */
   takenSymbols?: ShallowReactive<Set<OutputSymbol>>;
+
+  /**
+   * The number of child nodes that have content. When zero, this component is
+   * semantically empty.
+   */
+  childrenWithContent: number;
+
+  /**
+   * A ref that indicates whether the component is empty.
+   */
+  isEmpty?: Ref<boolean>;
+
+  /**
+   * Whether this context is a root context
+   */
+  isRoot: boolean;
 }
 
 let globalContext: Context | null = null;
@@ -86,6 +105,9 @@ export function root<T>(fn: (d: Disposable) => T, options?: RootOptions): T {
     elementCache: new Map(),
     takesSymbols: false,
     takenSymbols: undefined,
+    childrenWithContent: 0,
+    isEmpty: ref(true),
+    isRoot: true,
   };
 
   globalContext = context;
@@ -131,6 +153,8 @@ export function effect<T>(fn: (prev?: T) => T, current?: T) {
     elementCache: new Map(),
     takesSymbols: false,
     takenSymbols: undefined,
+    childrenWithContent: 0,
+    isRoot: false,
   };
 
   const cleanupFn = (final: boolean) => {
@@ -162,19 +186,16 @@ export function effect<T>(fn: (prev?: T) => T, current?: T) {
       scheduler: scheduler(),
       onTrack(event) {
         trace(TracePhase.effect.track, () => {
-          return `tracking ${event.target}, ${String(event.key)}`;
+          return `tracking ${isRef(event.target) ? `Ref:${refId(event.target)}` : event.target}, ${String(event.key)}`;
         });
       },
       onTrigger(event) {
         trace(TracePhase.effect.trigger, () => {
-          return `triggering ${event.target}, ${String(event.key)}`;
+          return `triggering ${isRef(event.target) ? `Ref:${refId(event.target)}` : event.target}, ${String(event.key)}`;
         });
       },
     },
   );
-
-  // allow recursive effects (recursive option does nothing, possible bug)
-  (runner as any).effect.flags |= 1 << 5;
 }
 
 /**
@@ -231,3 +252,15 @@ export function isCustomContext(child: Children): child is CustomContext {
     Object.hasOwn(child, CUSTOM_CONTEXT_SYM)
   );
 }
+
+const seenRefs = new WeakMap<Ref<unknown>, number>();
+let refIdCounter = 1;
+
+export function refId(ref: Ref<unknown>): number {
+  let id = seenRefs.get(ref);
+  if (id === undefined) {
+    id = refIdCounter++;
+    seenRefs.set(ref, id);
+  }
+  return id;
+}

package/src/render.ts

@@ -1,4 +1,4 @@
-import { isRef } from "@vue/reactivity";
+import { isRef, ref } from "@vue/reactivity";
 import { Doc, doc } from "prettier";
 import prettier from "prettier/doc.js";
 import { useContext } from "./context.js";
@@ -332,11 +332,74 @@ function renderWorker(node: RenderedTextTree, children: Children) {
   }
 }
 
+function contentAdded() {
+  const context: Context = getContext()!;
+  context.childrenWithContent++;
+}
+
+export function notifyContentState() {
+  untrack(() => {
+    const startContext = getContext()!;
+
+    if (startContext.childrenWithContent === 0) {
+      if (startContext.isEmpty!.value === true) {
+        // it was already empty, no work to do.
+        return;
+      }
+
+      if (startContext.isEmpty) {
+        startContext.isEmpty.value = true;
+      }
+
+      // otherwise we need to decrement the content counts up the tree.
+      let current = startContext.owner;
+      while (current) {
+        if (current.childrenWithContent === 0) {
+          break;
+        }
+        current.childrenWithContent--;
+        if (current.isEmpty) {
+          current.isEmpty.value = true;
+        }
+        current = current.owner;
+      }
+    } else {
+      if (startContext.isEmpty!.value === false) {
+        // it was already non-empty, no work to do.
+        return;
+      }
+
+      if (startContext.isEmpty && startContext.isEmpty.value) {
+        startContext.isEmpty.value = false;
+      }
+
+      // otherwise we need to increment the content counts up the tree.
+      let current = startContext.owner;
+      while (current) {
+        current.childrenWithContent++;
+        if (current.childrenWithContent > 1) {
+          // This isn't the first content so we have no work to do
+          break;
+        }
+
+        if (current.isEmpty && current.isEmpty.value) {
+          current.isEmpty.value = false;
+        }
+
+        current = current.owner;
+      }
+    }
+  });
+}
+
 function appendChild(node: RenderedTextTree, rawChild: Child) {
   trace(TracePhase.render.appendChild, () => debugPrintChild(rawChild));
   const child = normalizeChild(rawChild);
 
   if (typeof child === "string") {
+    if (child !== "") {
+      contentAdded();
+    }
     node.push(child);
   } else {
     const cache = getElementCache();
@@ -358,6 +421,7 @@ function appendChild(node: RenderedTextTree, rawChild: Child) {
         renderWorker(newNode, children);
         node.push(newNode);
         cache.set(child, newNode);
+        notifyContentState();
       });
     } else if (isIntrinsicElement(child)) {
       trace(
@@ -488,6 +552,9 @@ function appendChild(node: RenderedTextTree, rawChild: Child) {
           () => "Component: " + debugPrintChild(child),
         );
         const context = getContext();
+        context!.childrenWithContent = 0;
+        context!.isEmpty ??= ref(true);
+
         if (context) context.componentOwner = child;
         const componentRoot: RenderedTextTree = [];
         pushStack(child.component, child.props);
@@ -495,10 +562,14 @@ function appendChild(node: RenderedTextTree, rawChild: Child) {
         popStack();
         node.push(componentRoot);
         cache.set(child, componentRoot);
-
+        notifyContentState();
         trace(
           TracePhase.render.appendChild,
-          () => "Component done: " + debugPrintChild(child),
+          () =>
+            "Component done: " +
+            debugPrintChild(child) +
+            ", empty: " +
+            context!.isEmpty!.value,
         );
       });
     } else if (typeof child === "function") {
@@ -510,10 +581,16 @@ function appendChild(node: RenderedTextTree, rawChild: Child) {
         while (typeof res === "function" && !isComponentCreator(res)) {
           res = res();
         }
+        const context = getContext();
+        context!.childrenWithContent = 0;
+        context!.isEmpty ??= ref(true);
+
         const newNodes: RenderedTextTree = [];
         renderWorker(newNodes, res);
         node[index] = newNodes;
         cache.set(child, newNodes);
+
+        notifyContentState();
         return newNodes;
       });
     } else {

package/src/symbols/decl.ts

@@ -0,0 +1,25 @@
+import { toRef } from "@vue/reactivity";
+import { useScope } from "../context/scope.js";
+import { Namekey } from "../refkey.js";
+import { createComponent } from "../runtime/component.js";
+import { BasicScope } from "./basic-scope.js";
+import { BasicSymbol } from "./basic-symbol.js";
+
+/**
+ * Create a declaration in the current scope with the given namekey. Only works
+ * with basic scopes. Import `decl` from a specific language library for
+ * declaring language-specific symbols.
+ */
+export function decl(namekey: Namekey) {
+  return createComponent(() => {
+    const currentScope = useScope();
+    if (!(currentScope instanceof BasicScope)) {
+      throw new Error(
+        `Cannot declare symbol in non-basic scope: ${currentScope.constructor.name}. Use a language-specific 'decl' function instead.`,
+      );
+    }
+    const symbol = new BasicSymbol(namekey, currentScope.symbols);
+
+    return toRef(symbol, "name");
+  }, {});
+}

package/src/symbols/index.ts

@@ -1,5 +1,6 @@
 export * from "./basic-scope.js";
 export * from "./basic-symbol.js";
+export * from "./decl.js";
 export * from "./output-scope.js";
 export * from "./output-space.js";
 export * from "./output-symbol.js";