@alloy-js/core 0.3.0 → 0.5.0

package/src/context/source-directory.ts

@@ -1,4 +1,4 @@
-import { ComponentContext, createContext } from "../context.js";
+import { ComponentContext, createNamedContext } from "../context.js";
 import { SourceFileContext } from "./source-file.js";
 
 export interface SourceDirectoryContext {
@@ -8,4 +8,4 @@ export interface SourceDirectoryContext {
 }
 
 export const SourceDirectoryContext: ComponentContext<SourceDirectoryContext> =
-  createContext();
+  createNamedContext("SourceDirectory");

package/src/context/source-file.ts

@@ -1,4 +1,4 @@
-import { ComponentContext, createContext } from "../context.js";
+import { ComponentContext, createNamedContext } from "../context.js";
 import { ComponentDefinition } from "../jsx-runtime.js";
 import { Refkey } from "../refkey.js";
 
@@ -9,4 +9,4 @@ export interface SourceFileContext {
 }
 
 export const SourceFileContext: ComponentContext<SourceFileContext> =
-  createContext();
+  createNamedContext("SourceFile");

package/src/context.ts

@@ -1,16 +1,17 @@
+import { shallowRef } from "@vue/reactivity";
 import {
   Children,
   ComponentDefinition,
   effect,
   getContext,
   untrack,
-} from "@alloy-js/core/jsx-runtime";
-import { shallowRef } from "@vue/reactivity";
+} from "./jsx-runtime.js";
 
 export interface ComponentContext<T> {
   id: symbol;
   default: T | undefined;
   Provider: ComponentDefinition<ContextProviderProps<T>>;
+  name?: string;
 }
 
 export interface ContextProviderProps<T = unknown> {
@@ -31,13 +32,17 @@ export function useContext<T>(context: ComponentContext<T>): T | undefined {
   return context.default;
 }
 
+export const contextsByKey = new Map<symbol, ComponentContext<any>>();
+
 export function createContext<T = unknown>(
   defaultValue?: T,
+  name?: string,
 ): ComponentContext<T> {
-  const id = Symbol("context");
-  return {
+  const id = Symbol(name ?? "context");
+  const ctx = {
     id,
     default: defaultValue,
+    name,
     Provider(props: ContextProviderProps<T>) {
       const context = getContext();
 
@@ -50,4 +55,10 @@ export function createContext<T = unknown>(
       return rendered.value;
     },
   };
+  contextsByKey.set(id, ctx);
+  return ctx;
+}
+
+export function createNamedContext<T>(name: string, defaultValue?: T) {
+  return createContext<T>(defaultValue, name);
 }

package/src/debug.ts

@@ -0,0 +1,209 @@
+import { isReactive } from "@vue/reactivity";
+import { Chalk } from "chalk";
+import Table from "cli-table3";
+import { contextsByKey } from "./context.js";
+import { Context, getContext } from "./jsx-runtime.js";
+
+interface DebugInterface {
+  component: {
+    stack(): void;
+    tree(): void;
+    watch(): void;
+    render(): void;
+    context(): void;
+  };
+}
+
+const debug: DebugInterface = {
+  component: {
+    stack: debugStack,
+    tree() {
+      console.log("tree");
+    },
+    watch() {
+      console.log("watch");
+    },
+    render() {
+      console.log("render");
+    },
+    context: debugContext,
+  },
+};
+
+function debugStack() {
+  let currentContext = getContext();
+  let foundContexts: Context[] = [];
+  while (currentContext !== null) {
+    if (
+      currentContext.context &&
+      Object.getOwnPropertySymbols(currentContext.context)[0]
+    ) {
+      foundContexts.push(currentContext);
+    }
+
+    if (
+      currentContext.componentOwner &&
+      currentContext.componentOwner.component.name !== "Provider"
+    ) {
+      process.stdout.write(
+        style.component.name(currentContext.componentOwner.component.name) +
+          "\n",
+      );
+      const table = kvTable();
+      const props = currentContext.componentOwner.props;
+
+      table.push([
+        { hAlign: "right", content: "props" },
+        props && Object.keys(props).length > 0 ?
+          dumpValue(props)
+        : chalk.gray("(none)"),
+      ]);
+
+      table.push([
+        { hAlign: "right", content: "contexts" },
+        foundContexts.length > 0 ?
+          foundContexts.map((c) => printContext(c, true)).join("\n")
+        : chalk.gray("(none)"),
+      ]);
+
+      process.stdout.write(table.toString() + "\n\n");
+      foundContexts = [];
+    }
+
+    currentContext = currentContext.owner;
+  }
+}
+
+function debugContext() {
+  let currentContext = getContext();
+  while (currentContext !== null) {
+    console.log(printContext(currentContext));
+    currentContext = currentContext.owner;
+  }
+}
+function printContext(context: Context, omitOwner: boolean = false) {
+  if (!context.context) return "";
+  const key = Object.getOwnPropertySymbols(context.context)[0];
+  if (!key) return "";
+  const contextDefinition = contextsByKey.get(key);
+  const contextName = contextDefinition?.name ?? "unknown context";
+  const value = context.context[key];
+
+  let output = style.context.name(contextName);
+  if (!omitOwner) {
+    const owner = findContextOwner(context);
+    output += " provided by " + style.component.name(owner);
+  }
+
+  output += "\n" + dumpValue(value) + "\n";
+
+  return output;
+}
+
+function findContextOwner(context: Context) {
+  let currentContext: Context | null = context;
+  while (
+    currentContext &&
+    (currentContext.componentOwner === undefined ||
+      currentContext.componentOwner.component.name === "Provider")
+  ) {
+    currentContext = currentContext.owner;
+  }
+
+  return currentContext?.componentOwner?.component.name ?? "unknown";
+}
+declare global {
+  // eslint-disable-next-line no-var
+  var debug: DebugInterface;
+}
+
+globalThis.debug = debug;
+
+const chalk = new Chalk();
+const style = {
+  value: {
+    primitive(value: string | number | boolean | null | undefined) {
+      switch (typeof value) {
+        case "string":
+          return chalk.blue(`"${value}"`);
+        case "object":
+        case "undefined":
+          return chalk.gray(String(value));
+        default:
+          return chalk.blue(String(value));
+      }
+    },
+    symbol(value: symbol) {
+      return chalk.gray(String(value));
+    },
+  },
+  context: {
+    name(name: string) {
+      return chalk.bgGray(` ${chalk.white(name)} `);
+    },
+  },
+  component: {
+    name(name: string) {
+      return chalk.bgBlue(` <${chalk.white(name)}> `);
+    },
+  },
+};
+
+function reactiveTag(value: unknown) {
+  if (isReactive(value)) {
+    return " " + chalk.greenBright(`reactive`) + " ";
+  }
+  return "";
+}
+
+function dumpValue(value: unknown, level = 0) {
+  switch (typeof value) {
+    case "boolean":
+    case "string":
+    case "number":
+      return style.value.primitive(value) + reactiveTag(value);
+    case "symbol":
+      return style.value.symbol(value) + reactiveTag(value);
+    case "object":
+      if (value === null) {
+        return style.value.primitive(null) + reactiveTag(value);
+      } else {
+        if (level > 0) return chalk.gray(`{ ... }` + reactiveTag(value));
+
+        const table = kvTable(" ");
+
+        for (const [key, propValue] of Object.entries(value)) {
+          table.push([{ content: key }, dumpValue(propValue, level + 1)]);
+        }
+
+        return table.toString();
+      }
+    case "function":
+      return chalk.gray("ƒ ()");
+    case "undefined":
+      return style.value.primitive(undefined);
+  }
+}
+
+function kvTable(sep = "  ") {
+  return new Table({
+    chars: {
+      top: "",
+      "top-mid": "",
+      "top-left": "",
+      "top-right": "",
+      bottom: "",
+      "bottom-mid": "",
+      "bottom-left": "",
+      "bottom-right": "",
+      left: "",
+      "left-mid": "",
+      mid: "",
+      "mid-mid": "",
+      right: "",
+      "right-mid": "",
+      middle: sep,
+    },
+    style: { "padding-left": 0, "padding-right": 0 },
+  });
+}

package/src/index.ts

@@ -1,4 +1,3 @@
-export * from "@alloy-js/core/jsx-runtime";
 export {
   computed,
   isProxy,
@@ -18,4 +17,7 @@ export * from "./jsx-runtime.js";
 export * from "./name-policy.js";
 export * from "./refkey.js";
 export * from "./render.js";
+export * from "./tap.js";
 export * from "./utils.js";
+export * from "./write-output.js";
+import "./debug.js";

package/src/jsx-runtime.ts

@@ -30,6 +30,12 @@ export interface Context {
 
   // store random info about the node
   meta?: Record<string, any>;
+
+  /**
+   * When this context was created by a component, this will
+   * be the component that created it.
+   */
+  componentOwner?: ComponentCreator<unknown>;
 }
 
 let globalContext: Context | null = null;
@@ -37,13 +43,16 @@ export function getContext() {
   return globalContext;
 }
 
-export function root<T>(fn: (d: Disposable) => T, src?: string): T {
+export function root<T>(
+  fn: (d: Disposable) => T,
+  componentOwner?: ComponentCreator<any>,
+): T {
   globalContext = {
-    src,
+    componentOwner,
     disposables: [],
     owner: globalContext,
     context: {},
-  } as any;
+  };
   let ret;
   try {
     ret = untrack(() =>
@@ -108,7 +117,7 @@ export function effect<T>(fn: (prev?: T) => T, current?: T) {
   cleanup(() => cleanupFn(true));
 }
 
-function cleanup(fn: Disposable) {
+export function cleanup(fn: Disposable) {
   if (globalContext != null) {
     globalContext.disposables.push(fn);
   }
@@ -120,13 +129,14 @@ export type Child =
   | number
   | undefined
   | null
-  | (() => Child | Children)
+  | void
+  | (() => Children)
   | Child[]
   | Ref
   | Refkey;
 
 export type Children = Child | Child[];
-export type Props = Record<string, unknown>;
+export type Props = Record<string, any>;
 
 export interface ComponentDefinition<TProps = Props> {
   (props: TProps): Child | Children;
@@ -148,20 +158,18 @@ const renderStack: {
   props: Props;
 }[] = [];
 
-export const shouldDebug = !!process.env.ALLOY_DEBUG;
-
 export function pushStack(component: Component<any>, props: Props) {
-  if (!shouldDebug) return;
+  if (!shouldDebug()) return;
   renderStack.push({ component, props });
 }
 
 export function popStack() {
-  if (!shouldDebug) return;
+  if (!shouldDebug()) return;
   renderStack.pop();
 }
 
 export function printRenderStack() {
-  if (!shouldDebug) return;
+  if (!shouldDebug()) return;
 
   // eslint-disable-next-line no-console
   console.error("Error rendering:");
@@ -205,6 +213,29 @@ export function isComponentCreator(item: unknown): item is ComponentCreator {
   return typeof item === "function" && (item as any).component;
 }
 
+/**
+ * This namespace is predominantly for interop with React tooling in VSCode
+ * and controls the type of JSX elements, components, and the like.
+ */
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace JSX {
+  export interface IntrinsicElements {}
+  export type ElementType = ComponentDefinition<any>;
+  export type Element = Children;
+  export interface ElementChildrenAttribute {
+    children: {};
+  }
+  export interface ElementAttributesProperty {
+    props: {};
+  }
+}
+
+export function jsx(type: Component<any>, props: Record<string, unknown>) {
+  return createComponent(type, props);
+}
+
+export const jsxs = jsx;
+
 export function createComponent<TProps extends Props = Props>(
   C: Component<TProps>,
   props: TProps,
@@ -264,3 +295,7 @@ export function mergeProps(...sources: any): any {
   }
   return target;
 }
+
+function shouldDebug() {
+  return typeof process !== "undefined" && !!process.env?.ALLOY_DEBUG;
+}

package/src/render.ts

@@ -1,3 +1,8 @@
+import { isRef } from "@vue/reactivity";
+import { Indent, IndentState } from "./components/Indent.js";
+import { useContext } from "./context.js";
+import { IndentContext } from "./context/indent.js";
+import { SourceFileContext } from "./context/source-file.js";
 import {
   Child,
   Children,
@@ -10,12 +15,7 @@ import {
   pushStack,
   root,
   untrack,
-} from "@alloy-js/core/jsx-runtime";
-import { isRef } from "@vue/reactivity";
-import { Indent, IndentState } from "./components/Indent.js";
-import { useContext } from "./context.js";
-import { IndentContext } from "./context/indent.js";
-import { SourceFileContext } from "./context/source-file.js";
+} from "./jsx-runtime.js";
 import { isRefkey } from "./refkey.js";
 
 /**
@@ -171,7 +171,7 @@ export type RenderStructure = {};
 
 export type RenderTextTree = (string | RenderTextTree)[];
 
-function traceRender(phase: string, message: string) {
+function traceRender(phase: string, message: () => string) {
   return false;
   // console.log(`[\x1b[34m${phase}\x1b[0m]: ${message}`);
 }
@@ -250,7 +250,7 @@ export function renderTree(children: Children) {
   try {
     root(() => {
       renderWorker(rootElem, children, state);
-    }, "render worker");
+    });
   } catch (e) {
     printRenderStack();
     throw e;
@@ -268,7 +268,7 @@ function renderWorker(
   children: Children,
   state: RenderState,
 ) {
-  traceRender("render", dumpChildren(children));
+  traceRender("render", () => dumpChildren(children));
 
   if (Array.isArray(node)) {
     nodesToContext.set(node, getContext()!);
@@ -290,7 +290,7 @@ function appendChild(
   indentState: IndentState,
   state: RenderState,
 ) {
-  traceRender("appendChild", printChild(rawChild));
+  traceRender("appendChild", () => printChild(rawChild));
   const child = normalizeChild(rawChild);
 
   if (typeof child === "string") {
@@ -300,11 +300,11 @@ function appendChild(
       state.newline = false;
     }
     const reindented = reindent(child, indentState.indentString);
-    traceRender("appendChild:string", JSON.stringify(reindented));
+    traceRender("appendChild:string", () => JSON.stringify(reindented));
     node.push(reindented);
   } else if (isComponentCreator(child)) {
     root(() => {
-      traceRender("appendChild:component", printChild(child));
+      traceRender("appendChild:component", () => printChild(child));
       if (child.component === Indent && state.newline) {
         node.push(indentState.indent);
       }
@@ -313,13 +313,13 @@ function appendChild(
       renderWorker(componentRoot, untrack(child), state);
       popStack();
       node.push(componentRoot);
-      traceRender("appendChild:component-done", printChild(child));
-    }, child.component.name);
+      traceRender("appendChild:component-done", () => printChild(child));
+    }, child);
   } else if (typeof child === "function") {
-    traceRender("appendChild:memo", child.toString());
+    traceRender("appendChild:memo", () => child.toString());
     const index = node.length;
     effect((prev: any) => {
-      traceRender("memoEffect:run", "");
+      traceRender("memoEffect:run", () => "");
       let res = child();
       while (typeof res === "function" && !isComponentCreator(res)) {
         res = res();
@@ -330,11 +330,11 @@ function appendChild(
       node[index] = newNodes;
       return newNodes;
     });
-    traceRender("appendChild:memo-done", "");
+    traceRender("appendChild:memo-done", () => "");
   } else {
-    traceRender("appendChild:array", dumpChildren(child));
+    traceRender("appendChild:array", () => dumpChildren(child));
     renderWorker(node, child, state);
-    traceRender("appendChild:array-done", dumpChildren(child));
+    traceRender("appendChild:array-done", () => dumpChildren(child));
   }
 }
 
@@ -383,6 +383,8 @@ function printChild(child: Child): string {
     return "<" + child.component.name + ">";
   } else if (typeof child === "function") {
     return "$memo";
+  } else if (isRef(child)) {
+    return "$ref";
   } else {
     return JSON.stringify(child);
   }

package/src/slot.ts

@@ -0,0 +1,90 @@
+import { ref, Ref } from "@vue/reactivity";
+import { OutputSymbol } from "./binder.js";
+import {
+  Children,
+  Component,
+  ComponentDefinition,
+  effect,
+  memo,
+} from "./jsx-runtime.js";
+
+export interface SlotInstance extends ComponentDefinition {}
+
+export interface SlotDefinition<TSlotProps> {
+  find: (...args: any[]) => () => Ref<unknown>;
+  create(
+    key: unknown,
+    props: TSlotProps,
+    defaultContent?: Children,
+  ): ComponentDefinition;
+}
+
+export type SlotKey = Ref<unknown>;
+
+const slotMappers = new Map<unknown, ComponentDefinition<any>>();
+
+export function defineSlot<
+  TSlotProps,
+  TFinder extends (...args: any[]) => Ref<unknown> | unknown = (
+    ...args: any[]
+  ) => Ref<unknown> | unknown,
+>(finder: TFinder): SlotDefinition<TSlotProps> {
+  return {
+    find: ((...args: any[]) =>
+      () =>
+        ref(finder(...args))) as any,
+    create(key, props, defaultContent) {
+      return function () {
+        return memo(() => {
+          if (key === undefined) {
+            return defaultContent;
+          }
+
+          const component = slotMappers.get(key);
+          if (!component) {
+            return defaultContent;
+          }
+
+          return component({ ...props, original: defaultContent });
+        });
+      };
+    },
+  };
+}
+
+export const extensionEffects: (() => void)[] = [];
+
+export function replace<T>(
+  slotKeyFn: () => SlotKey,
+  replacement: Component<T>,
+) {
+  extensionEffects.push(() => {
+    effect((prev: SlotKey | undefined) => {
+      if (prev) {
+        slotMappers.delete(prev.value);
+      }
+
+      const slotKey = slotKeyFn();
+      if (slotKey.value === undefined) {
+        return slotKey;
+      }
+
+      slotMappers.set(slotKey.value, replacement);
+
+      return slotKey;
+    });
+  });
+}
+
+export function rename(
+  slotKeyFn: () => Ref<OutputSymbol | undefined>,
+  newName: string,
+) {
+  extensionEffects.push(() => {
+    effect(() => {
+      const sym = slotKeyFn().value;
+      if (!sym) return;
+      sym.name = newName;
+    });
+  });
+}

package/src/tap.ts

@@ -0,0 +1,69 @@
+import { ShallowRef, shallowRef } from "@vue/reactivity";
+import { OutputScope, OutputSymbol } from "./binder.js";
+import { useContext } from "./context.js";
+import { DeclarationContext } from "./context/declaration.js";
+import { MemberDeclarationContext } from "./context/member-declaration.js";
+import { useScope } from "./context/scope.js";
+import { SourceFileContext } from "./context/source-file.js";
+import { ComponentDefinition } from "./jsx-runtime.js";
+
+export interface Tap<T> extends ComponentDefinition {
+  ref: ShallowRef<T | undefined>;
+}
+
+export interface Tapper<T> {
+  (): T | undefined;
+}
+
+export interface Handler<T> {
+  (value: T): void;
+}
+
+export function createTap<T = unknown>(
+  tapper: Tapper<T>,
+  handler?: Handler<T>,
+): Tap<T> {
+  const signal = shallowRef<T | undefined>(undefined);
+  const fn = () => {
+    signal.value = tapper();
+    if (handler && signal.value !== undefined) {
+      handler(signal.value);
+    }
+
+    return "";
+  };
+
+  fn.ref = signal;
+
+  return fn;
+}
+
+export function createDeclarationTap<
+  TSymbol extends OutputSymbol = OutputSymbol,
+>(handler?: Handler<TSymbol>) {
+  return createTap<TSymbol>(() => {
+    return useContext(DeclarationContext) as any;
+  }, handler);
+}
+
+export function createMemberTap<TSymbol extends OutputSymbol = OutputSymbol>(
+  handler?: Handler<TSymbol>,
+) {
+  return createTap<TSymbol>(() => {
+    return useContext(MemberDeclarationContext) as any;
+  }, handler);
+}
+
+export function createScopeTap<TScope extends OutputScope = OutputScope>(
+  handler?: Handler<TScope>,
+) {
+  return createTap<TScope>(() => {
+    return useScope() as any;
+  }, handler);
+}
+
+export function createSourceFileTap(handler?: Handler<SourceFileContext>) {
+  return createTap(() => {
+    return useContext(SourceFileContext);
+  }, handler);
+}