@alloy-js/core 0.3.0 → 0.4.0

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,
@@ -19,3 +18,5 @@ export * from "./name-policy.js";
 export * from "./refkey.js";
 export * from "./render.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(() =>
@@ -148,20 +157,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:");
@@ -264,3 +271,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";
 
 /**
@@ -250,7 +250,7 @@ export function renderTree(children: Children) {
   try {
     root(() => {
       renderWorker(rootElem, children, state);
-    }, "render worker");
+    });
   } catch (e) {
     printRenderStack();
     throw e;
@@ -314,7 +314,7 @@ function appendChild(
       popStack();
       node.push(componentRoot);
       traceRender("appendChild:component-done", printChild(child));
-    }, child.component.name);
+    }, child);
   } else if (typeof child === "function") {
     traceRender("appendChild:memo", child.toString());
     const index = node.length;

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/utils.ts

@@ -1,3 +1,4 @@
+import { code } from "./code.js";
 import {
   Child,
   Children,
@@ -5,10 +6,7 @@ import {
   ComponentDefinition,
   isComponentCreator,
   memo,
-} from "@alloy-js/core/jsx-runtime";
-import { mkdirSync, statSync, writeFileSync } from "node:fs";
-import { relative, resolve } from "pathe";
-import { code } from "./code.js";
+} from "./jsx-runtime.js";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { OutputDirectory, OutputFile, render } from "./render.js";
 
@@ -256,33 +254,3 @@ export function traverseOutput(
     }
   }
 }
-
-/**
- * Write the output from {@link render} to the file system.
- *
- */
-export function writeOutput(output: OutputDirectory, basePath: string = "") {
-  traverseOutput(output, {
-    visitDirectory(directory) {
-      const path = resolve(basePath, directory.path);
-      if (statSync(path)) {
-        return;
-      }
-      // eslint-disable-next-line no-console
-      console.log("create", relative(process.cwd(), path));
-      mkdirSync(path, { recursive: true });
-    },
-    visitFile(file) {
-      const path = resolve(basePath, file.path);
-      if (statSync(path)) {
-        // eslint-disable-next-line no-console
-        console.log("overwrite", relative(process.cwd(), path));
-      } else {
-        // eslint-disable-next-line no-console
-        console.log("create", relative(process.cwd(), path));
-      }
-
-      writeFileSync(path, file.contents);
-    },
-  });
-}

package/src/write-output.browser.ts

@@ -0,0 +1,3 @@
+export function writeOutput(output: any, basePath: string = "") {
+  console.warn("writeOutput is not supported in a browser environment.");
+}

package/src/write-output.ts

@@ -0,0 +1,33 @@
+import { mkdirSync, statSync, writeFileSync } from "node:fs";
+import { relative, resolve } from "pathe";
+import { OutputDirectory } from "./render.js";
+import { traverseOutput } from "./utils.js";
+/**
+ * Write the output from {@link render} to the file system.
+ *
+ */
+export function writeOutput(output: OutputDirectory, basePath: string = "") {
+  traverseOutput(output, {
+    visitDirectory(directory) {
+      const path = resolve(basePath, directory.path);
+      if (statSync(path)) {
+        return;
+      }
+      // eslint-disable-next-line no-console
+      console.log("create", relative(process.cwd(), path));
+      mkdirSync(path, { recursive: true });
+    },
+    visitFile(file) {
+      const path = resolve(basePath, file.path);
+      if (statSync(path)) {
+        // eslint-disable-next-line no-console
+        console.log("overwrite", relative(process.cwd(), path));
+      } else {
+        // eslint-disable-next-line no-console
+        console.log("create", relative(process.cwd(), path));
+      }
+
+      writeFileSync(path, file.contents);
+    },
+  });
+}