@alloy-js/core 0.1.0

package/src/context/binder.ts

@@ -0,0 +1,14 @@
+import { Binder } from "../binder.js";
+import { ComponentContext, createContext, useContext } from "../context.js";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { Output } from "../components/Output.js";
+
+/**
+ * The binder context provides the binder instance to all components. This
+ * context is provided by the {@link Output | output component}.
+ */
+export const BinderContext: ComponentContext<Binder> = createContext();
+
+export function useBinder() {
+  return useContext(BinderContext)!;
+}

package/src/context/declaration.ts

@@ -0,0 +1,5 @@
+import { OutputSymbol } from "../binder.js";
+import { ComponentContext, createContext } from "../context.js";
+
+export const DeclarationContext: ComponentContext<OutputSymbol> =
+  createContext();

package/src/context/indent.ts

@@ -0,0 +1,10 @@
+import { IndentState } from "../components/Indent.jsx";
+import { ComponentContext, createContext } from "../context.js";
+
+export const IndentContext: ComponentContext<IndentState> = createContext({
+  level: 0,
+  indent: "  ",
+  indentString: "",
+});
+
+export const TestContext: ComponentContext<string> = createContext("test");

package/src/context/index.ts

@@ -0,0 +1,10 @@
+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";
+export * from "./scope.js";
+export * from "./source-directory.js";
+export * from "./source-file.js";

package/src/context/member-declaration.ts

@@ -0,0 +1,10 @@
+import { OutputSymbol } from "../binder.js";
+import { ComponentContext, createContext } from "../context.js";
+
+/**
+ * Provides the symbol for the member currently being declared.
+ *
+ * @see {@link DeclarationContext} for getting the symbol for the current non-member declaration.
+ */
+export const MemberDeclarationContext: ComponentContext<OutputSymbol> =
+  createContext();

package/src/context/member-scope.ts

@@ -0,0 +1,17 @@
+import { OutputScope } from "../binder.js";
+import { ComponentContext, createContext, useContext } from "../context.js";
+
+/**
+ * The member scope context provides the instance and static member scopes that
+ * are used for member declarations and instance member resolution.
+ */
+export interface MemberScopeContext {
+  staticMembers?: OutputScope;
+  instanceMembers?: OutputScope;
+}
+export const MemberScopeContext: ComponentContext<MemberScopeContext> =
+  createContext();
+
+export function useMemberScope() {
+  return useContext(MemberScopeContext)!;
+}

package/src/context/name-policy.ts

@@ -0,0 +1,13 @@
+import { ComponentContext, createContext, useContext } from "../context.js";
+import { NamePolicy } from "../name-policy.js";
+
+export const NamePolicyContext: ComponentContext<NamePolicy<string>> =
+  createContext<NamePolicy<string>>({
+    getName(name) {
+      return name;
+    },
+  });
+
+export function useNamePolicy() {
+  return useContext(NamePolicyContext)!;
+}

package/src/context/scope.ts

@@ -0,0 +1,8 @@
+import { OutputScope } from "../binder.js";
+import { ComponentContext, createContext, useContext } from "../context.js";
+
+export const ScopeContext: ComponentContext<OutputScope> = createContext();
+
+export function useScope() {
+  return useContext(ScopeContext)!;
+}

package/src/context/source-directory.ts

@@ -0,0 +1,11 @@
+import { ComponentContext, createContext } from "../context.js";
+import { SourceFileContext } from "./source-file.js";
+
+export interface SourceDirectoryContext {
+  contents: (SourceDirectoryContext | SourceFileContext)[];
+  addContent(content: SourceDirectoryContext | SourceFileContext): void;
+  path: string;
+}
+
+export const SourceDirectoryContext: ComponentContext<SourceDirectoryContext> =
+  createContext();

package/src/context/source-file.ts

@@ -0,0 +1,12 @@
+import { ComponentContext, createContext } from "../context.js";
+import { ComponentDefinition } from "../jsx-runtime.js";
+import { Refkey } from "../refkey.js";
+
+export interface SourceFileContext {
+  path: string;
+  filetype: string;
+  reference?: ComponentDefinition<{ refkey: Refkey }>;
+}
+
+export const SourceFileContext: ComponentContext<SourceFileContext> =
+  createContext();

package/src/context.ts

@@ -0,0 +1,53 @@
+import {
+  Children,
+  ComponentDefinition,
+  effect,
+  getContext,
+  untrack,
+} from "@alloy-js/core/jsx-runtime";
+import { shallowRef } from "@vue/reactivity";
+
+export interface ComponentContext<T> {
+  id: symbol;
+  default: T | undefined;
+  Provider: ComponentDefinition<ContextProviderProps<T>>;
+}
+
+export interface ContextProviderProps<T = unknown> {
+  value?: T;
+  children?: Children;
+}
+
+export function useContext<T>(context: ComponentContext<T>): T | undefined {
+  // context must come from a parent
+  let current = getContext();
+  while (current) {
+    if (Object.hasOwn(current.context!, context.id)) {
+      return current.context![context.id] as T | undefined;
+    }
+    current = current.owner;
+  }
+
+  return context.default;
+}
+
+export function createContext<T = unknown>(
+  defaultValue?: T,
+): ComponentContext<T> {
+  const id = Symbol("context");
+  return {
+    id,
+    default: defaultValue,
+    Provider(props: ContextProviderProps<T>) {
+      const context = getContext();
+
+      const rendered = shallowRef();
+      effect(() => {
+        context!.context![id] = props.value;
+        rendered.value = untrack(() => props.children);
+      });
+
+      return rendered.value;
+    },
+  };
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+export * from "@alloy-js/core/jsx-runtime";
+export {
+  computed,
+  isProxy,
+  reactive,
+  ref,
+  shallowReactive,
+  shallowRef,
+  toRaw,
+  type Ref,
+} from "@vue/reactivity";
+export * from "./binder.js";
+export * from "./code.js";
+export * from "./components/index.js";
+export * from "./context.js";
+export * from "./context/index.js";
+export * from "./jsx-runtime.js";
+export * from "./name-policy.js";
+export * from "./refkey.js";
+export * from "./render.js";
+export * from "./utils.js";

package/src/jsx-runtime.ts

@@ -0,0 +1,266 @@
+// Much of the implementations in this file are inspired by vuerx-js
+// See: https://github.com/ryansolid/vuerx-jsx.
+import {
+  pauseTracking,
+  Ref,
+  resetTracking,
+  shallowRef,
+  stop,
+  effect as vueEffect,
+} from "@vue/reactivity";
+import { Refkey } from "./refkey.js";
+
+if ((globalThis as any).ALLOY) {
+  throw new Error(
+    "Multiple versions of the JSX Runtime have been loaded. This will likely cause undesirable behavior.",
+  );
+}
+(globalThis as any).ALLOY = true;
+
+export interface Disposable {
+  (): void;
+}
+
+export interface Context {
+  disposables: Disposable[];
+  owner: Context | null;
+
+  // context providers
+  context?: Record<symbol, unknown>;
+
+  // store random info about the node
+  meta?: Record<string, any>;
+}
+
+let globalContext: Context | null = null;
+export function getContext() {
+  return globalContext;
+}
+
+export function root<T>(fn: (d: Disposable) => T, src?: string): T {
+  globalContext = {
+    src,
+    disposables: [],
+    owner: globalContext,
+    context: {},
+  } as any;
+  let ret;
+  try {
+    ret = untrack(() =>
+      fn(() => {
+        for (const d of globalContext!.disposables) {
+          d();
+        }
+      }),
+    );
+  } finally {
+    globalContext = globalContext!.owner;
+  }
+
+  return ret;
+}
+
+export function untrack<T>(fn: () => T): T {
+  pauseTracking();
+  const v = fn();
+  resetTracking();
+  return v;
+}
+
+export function memo<T>(fn: () => T, equal?: boolean): () => T {
+  const o = shallowRef();
+  effect((prev) => {
+    const res = fn();
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    (!equal || prev !== res) && (o.value = res);
+    return res;
+  });
+  return () => o.value;
+}
+
+export function effect<T>(fn: (prev?: T) => T, current?: T) {
+  const context = {
+    src: "effect",
+    context: {},
+    disposables: [] as (() => void)[],
+    owner: globalContext,
+  } as any;
+
+  const cleanupFn = (final: boolean) => {
+    const d = context.disposables;
+    context.disposables = [];
+    for (let k = 0, len = d.length; k < len; k++) d[k]();
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    final && stop(c);
+  };
+
+  const c = vueEffect(() => {
+    cleanupFn(false);
+    const oldContext = globalContext;
+    globalContext = context;
+    try {
+      current = fn(current);
+    } finally {
+      globalContext = oldContext;
+    }
+  });
+
+  cleanup(() => cleanupFn(true));
+}
+
+function cleanup(fn: Disposable) {
+  if (globalContext != null) {
+    globalContext.disposables.push(fn);
+  }
+}
+
+export type Child =
+  | string
+  | boolean
+  | number
+  | undefined
+  | null
+  | (() => Child | Children)
+  | Child[]
+  | Ref
+  | Refkey;
+
+export type Children = Child | Child[];
+export type Props = Record<string, unknown>;
+
+export interface ComponentDefinition<TProps = Props> {
+  (props: TProps): Child | Children;
+}
+export interface Component<TProps = Props> {
+  (props: TProps): Child | Children;
+  tag?: symbol;
+}
+export interface ComponentCreator<TProps = Props> {
+  component: Component<TProps>;
+  (): Child | Children;
+  props: Props;
+  tag?: symbol;
+}
+
+// debugging utilities
+const renderStack: {
+  component: Component<any>;
+  props: Props;
+}[] = [];
+
+export const shouldDebug = !!process.env.ALLOY_DEBUG;
+
+export function pushStack(component: Component<any>, props: Props) {
+  if (!shouldDebug) return;
+  renderStack.push({ component, props });
+}
+
+export function popStack() {
+  if (!shouldDebug) return;
+  renderStack.pop();
+}
+
+export function printRenderStack() {
+  if (!shouldDebug) return;
+
+  // eslint-disable-next-line no-console
+  console.error("Error rendering:");
+  for (let i = renderStack.length - 1; i >= 0; i--) {
+    const { component, props } = renderStack[i];
+    // eslint-disable-next-line no-console
+    console.error(`    at ${component.name}(${inspectProps(props)})`);
+  }
+}
+
+function inspectProps(props: Props) {
+  return JSON.stringify(
+    Object.fromEntries(
+      Object.entries(props).map(([key, value]) => {
+        let safeValue;
+        switch (typeof value) {
+          case "string":
+          case "number":
+          case "boolean":
+            safeValue = value;
+            break;
+          case "undefined":
+            safeValue = "undefined";
+            break;
+          case "object":
+            safeValue = value ? "{...}" : null;
+            break;
+          case "function":
+            safeValue = "function";
+            break;
+        }
+        return [key, safeValue];
+      }),
+    ),
+  );
+}
+
+// These can be removed with a smarter transform that encodes the information we
+// need in the compiled JSX output.
+export function isComponentCreator(item: unknown): item is ComponentCreator {
+  return typeof item === "function" && (item as any).component;
+}
+
+export function createComponent<TProps extends Props = Props>(
+  C: Component<TProps>,
+  props: TProps,
+): ComponentCreator<TProps> {
+  const creator: ComponentCreator<TProps> = () => /* */ C(props);
+  creator.props = props;
+  creator.component = C;
+  if (C.tag) {
+    creator.tag = C.tag;
+  }
+
+  return creator;
+}
+
+export function taggedComponent<TProps = Props>(
+  tag: symbol,
+  component: Component<TProps>,
+): Component<TProps> {
+  component.tag = tag;
+  return component;
+}
+
+export function mergeProps<T, U>(source: T, source1: U): T & U;
+export function mergeProps<T, U, V>(
+  source: T,
+  source1: U,
+  source2: V,
+): T & U & V;
+export function mergeProps<T, U, V, W>(
+  source: T,
+  source1: U,
+  source2: V,
+  source3: W,
+): T & U & V & W;
+export function mergeProps(...sources: any): any {
+  const target = {};
+  for (let i = 0; i < sources.length; i++) {
+    let source = sources[i];
+    if (typeof source === "function") source = source();
+    if (source) {
+      const descriptors = Object.getOwnPropertyDescriptors(source);
+      for (const key in descriptors) {
+        if (key in target) continue;
+        Object.defineProperty(target, key, {
+          enumerable: true,
+          get() {
+            for (let i = sources.length - 1; i >= 0; i--) {
+              let s = sources[i];
+              if (typeof s === "function") s = s();
+              const v = (s || {})[key];
+              if (v !== undefined) return v;
+            }
+          },
+        });
+      }
+    }
+  }
+  return target;
+}

package/src/name-policy.ts

@@ -0,0 +1,13 @@
+export interface NamePolicy<TElements extends string> {
+  getName(originalName: string, element: TElements): string;
+}
+
+export function createNamePolicy<T extends string>(
+  namer: (name: string, elements: T) => string,
+): NamePolicy<T> {
+  return {
+    getName(name, element) {
+      return namer(name, element);
+    },
+  };
+}

package/src/refkey.ts

@@ -0,0 +1,62 @@
+import { markRaw } from "@vue/reactivity";
+
+const objectIds = new WeakMap<WeakKey, Refkey>();
+let objId = 0;
+
+function getObjectKey(value: WeakKey) {
+  if (objectIds.has(value)) {
+    return objectIds.get(value)!;
+  }
+
+  const key = createRefkey(`o${objId++}`);
+  objectIds.set(value, key);
+
+  return key;
+}
+
+const RefkeySym: unique symbol = Symbol();
+
+export type Refkey = { key: string; [RefkeySym]: true };
+
+function createRefkey(key: string): Refkey {
+  const refkey: Refkey = {
+    key,
+    [RefkeySym]: true,
+  };
+
+  markRaw(refkey);
+
+  return refkey;
+}
+
+export function isRefkey(value: unknown): value is Refkey {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    Object.hasOwn(value, RefkeySym)
+  );
+}
+
+function getKey(value: unknown): Refkey {
+  if (isRefkey(value)) {
+    return value;
+  } else if (typeof value === "object" && value !== null) {
+    return getObjectKey(value);
+  } else {
+    return createRefkey(`s${String(value)}`);
+  }
+}
+
+const knownRefkeys = new Map<string, Refkey>();
+export function refkey(...args: unknown[]): Refkey {
+  const keys = args.length === 0 ? [getKey({})] : args.map((v) => getKey(v));
+
+  const compositeKey = keys.map((v) => v.key).join("\u2063");
+  if (knownRefkeys.has(compositeKey)) {
+    return knownRefkeys.get(compositeKey)!;
+  }
+
+  const key = createRefkey(compositeKey);
+  knownRefkeys.set(compositeKey, key);
+  return key;
+}