@alloy-js/core 0.5.0 → 0.6.0

package/test/stc.test.tsx

@@ -1,5 +1,6 @@
-import { code, Indent, stc } from "@alloy-js/core";
-import { expect, it } from "vitest";
+import { stc } from "@alloy-js/core";
+import { hbr, indent, Indent } from "@alloy-js/core/stc";
+import { describe, expect, it } from "vitest";
 import "../testing/extend-expect.js";
 
 it("is applied by output", () => {
@@ -7,15 +8,35 @@ it("is applied by output", () => {
     return "Foo component";
   }
   const FooStc = stc(Foo);
-  const IndentStc = stc(Indent);
 
-  expect(code`
-    ${FooStc({ x: "hi" })}
-    ${IndentStc().code`
+  expect([
+    FooStc(),
+    Indent().code`
       child!
-    `} 
-  `).toRenderTo(`
+      child2!
+    `,
+  ]).toRenderTo(`
     Foo component
       child!
+      child2!
   `);
 });
+
+describe("works with formatting", () => {
+  it("handles lines", () => {
+    expect(["foo", hbr(), "bar", hbr(), "baz"]).toRenderTo(`
+      foo
+      bar
+      baz
+    `);
+  });
+
+  it("handles indents", () => {
+    expect(["foo", indent().children([hbr(), "bar", hbr(), "baz"])])
+      .toRenderTo(`
+      foo
+        bar
+        baz
+    `);
+  });
+});

package/test/symbols.test.ts

@@ -562,3 +562,76 @@ describe("refkey resolution", () => {
     expect(resolvedSym.value?.targetDeclaration).toBe(sym);
   });
 });
+
+describe("Deleting symbols", () => {
+  it("updates resolutions", () => {
+    const key = refkey();
+    const binder = createOutputBinder();
+
+    const resolvedSym = binder.resolveDeclarationByKey(
+      undefined,
+      undefined,
+      key,
+    );
+
+    const sym = binder.createSymbol({
+      name: "foo",
+      scope: binder.globalScope,
+    });
+
+    expect(resolvedSym.value).toBe(undefined);
+
+    sym.refkey = key;
+    expect(resolvedSym.value?.targetDeclaration).toBe(sym);
+
+    binder.deleteSymbol(sym);
+
+    expect(resolvedSym.value).toBe(undefined);
+  });
+
+  it("removes from parent scopes", () => {
+    const binder = createOutputBinder();
+    const result = binder.resolveFQN("root.root#instance");
+    expect(result.value).toBeUndefined();
+
+    const {
+      symbols: { instance, root, staticc },
+      scopes: { rootScope },
+    } = createScopeTree(binder, {
+      rootScope: {
+        symbols: {
+          root: {
+            flags:
+              OutputSymbolFlags.InstanceMemberContainer |
+              OutputSymbolFlags.StaticMemberContainer,
+            instanceMembers: {
+              instance: {
+                flags: OutputSymbolFlags.InstanceMember,
+              },
+            },
+            staticMembers: {
+              staticc: {
+                flags: OutputSymbolFlags.StaticMember,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    const staticScope = root.staticMemberScope!;
+    const instanceScope = root.instanceMemberScope!;
+
+    expect(staticScope.symbols.size).toBe(1);
+    binder.deleteSymbol(staticc);
+    expect(staticScope.symbols.size).toBe(0);
+
+    expect(instanceScope.symbols.size).toBe(1);
+    binder.deleteSymbol(instance);
+    expect(instanceScope.symbols.size).toBe(0);
+
+    expect(rootScope.symbols.size).toBe(1);
+    binder.deleteSymbol(root);
+    expect(rootScope.symbols.size).toBe(0);
+  });
+});

package/test/utils.test.tsx

@@ -1,5 +1,8 @@
+import { Children } from "@alloy-js/core/jsx-runtime";
+import { computed, ref, triggerRef } from "@vue/reactivity";
 import { describe, expect, it } from "vitest";
-import { join, mapJoin } from "../src/utils.js";
+import { renderTree } from "../src/render.js";
+import { children, join, mapJoin } from "../src/utils.js";
 import "../testing/extend-expect.js";
 
 describe("mapJoin", () => {
@@ -10,15 +13,19 @@ describe("mapJoin", () => {
     ]);
 
     function Foo(props: { key: string; value: number }) {
-      return <>Key: {props.key}, Value: {props.value}</>;
+      return (
+        <>
+          Key: {props.key}, Value: {props.value}
+        </>
+      );
     }
 
-    const joined = mapJoin(map, (
-      key,
-      value,
-    ) => <Foo key={key} value={value} />);
+    const joined = mapJoin(
+      () => map,
+      (key, value) => <Foo key={key} value={value} />,
+    );
 
-    expect(joined).toRenderTo(`
+    expect(joined()).toRenderTo(`
       Key: a, Value: 1
       Key: b, Value: 2
     `);
@@ -31,14 +38,63 @@ describe("mapJoin", () => {
       return <>Value: {props.value}</>;
     }
 
-    const joined = mapJoin(arr, (value) => <Foo value={value} />);
+    const joined = mapJoin(
+      () => arr,
+      (value) => <Foo value={value} />,
+    );
 
-    expect(joined).toRenderTo(`
+    expect(joined()).toRenderTo(`
       Value: 1
       Value: 2
     `);
   });
 
+  it("can map an array reactively (without render)", () => {
+    const arr = ref([1, 2]);
+
+    function Foo(props: { value: number }) {
+      return <>Value: {props.value}</>;
+    }
+
+    const joined = mapJoin(
+      () => arr.value,
+      (value) => {
+        return <Foo value={value} />;
+      },
+    );
+
+    const len = computed(() => {
+      return joined().length;
+    });
+    expect(len.value).toBe(4);
+    arr.value.push(3);
+    triggerRef(arr);
+    expect(len.value).toBe(6);
+  });
+
+  it("can map an array reactively (with render)", () => {
+    let callCount = 0;
+    const arr = ref([1, 2]);
+
+    function Foo(props: { value: number }) {
+      callCount++;
+      return <>Value: {props.value}</>;
+    }
+
+    const joined = mapJoin(
+      () => arr.value,
+      (value) => {
+        return <Foo value={value} />;
+      },
+    );
+
+    renderTree(joined);
+
+    expect(callCount).toBe(2);
+    arr.value.push(3);
+    triggerRef(arr);
+    expect(callCount).toBe(3);
+  });
   it("can map a joiner", () => {
     const arr = [1, 2];
 
@@ -46,9 +102,13 @@ describe("mapJoin", () => {
       return <>Value: {props.value}</>;
     }
 
-    const joined = mapJoin(arr, (value) => <Foo value={value} />, {
-      joiner: "-",
-    });
+    const joined = mapJoin(
+      () => arr,
+      (value) => <Foo value={value} />,
+      {
+        joiner: "-",
+      },
+    );
 
     expect(joined).toRenderTo(`
       Value: 1-Value: 2
@@ -62,10 +122,14 @@ describe("mapJoin", () => {
       return <>Value: {props.value}</>;
     }
 
-    const joined = mapJoin(arr, (value) => <Foo value={value} />, {
-      joiner: "-",
-      ender: ";",
-    });
+    const joined = mapJoin(
+      () => arr,
+      (value) => <Foo value={value} />,
+      {
+        joiner: "-",
+        ender: ";",
+      },
+    );
 
     expect(joined).toRenderTo(`
       Value: 1-Value: 2;
@@ -79,10 +143,14 @@ describe("mapJoin", () => {
       return <>Value: {props.value}</>;
     }
 
-    const joined = mapJoin(arr, (value) => <Foo value={value} />, {
-      joiner: "-",
-      ender: ";",
-    });
+    const joined = mapJoin(
+      () => arr,
+      (value) => <Foo value={value} />,
+      {
+        joiner: "-",
+        ender: ";",
+      },
+    );
 
     expect(joined).toRenderTo(`
       Value: 1-Value: 2;
@@ -148,3 +216,44 @@ describe("join", () => {
     `);
   });
 });
+
+describe("children", () => {
+  let resolvedChildren: Children;
+  function ResolveChildren(props: any) {
+    resolvedChildren = children(() => props.children, {
+      preserveFragments: props.preserveFragments,
+    })();
+  }
+
+  it("resolves a single child", () => {
+    renderTree(<ResolveChildren>1</ResolveChildren>);
+    expect(resolvedChildren).toEqual("1");
+  });
+
+  it("resolves multiple children", () => {
+    renderTree(<ResolveChildren>1{"2"}3</ResolveChildren>);
+    expect(resolvedChildren).toEqual(["1", "2", "3"]);
+  });
+
+  it("resolves fragments by default", () => {
+    renderTree(
+      <ResolveChildren>
+        <>1</>
+        <>2</>
+        <>3</>
+      </ResolveChildren>,
+    );
+    expect(resolvedChildren).toEqual(["1", "2", "3"]);
+  });
+
+  it("preserves fragments if asked", () => {
+    renderTree(
+      <ResolveChildren preserveFragments>
+        <>1</>
+        <>2</>
+        <>3</>
+      </ResolveChildren>,
+    );
+    expect(resolvedChildren).toEqual([["1"], ["2"], ["3"]]);
+  });
+});

package/testing/extend-expect.ts

@@ -1,12 +1,22 @@
-import { Children, renderTree } from "@alloy-js/core";
+import { Children, printTree, renderTree } from "@alloy-js/core";
 import { expect } from "vitest";
-import { dedent, printTree } from "./render.js";
+import { dedent } from "./render.js";
+
+interface ToRenderToOptions {
+  printWidth?: number;
+  tabWidth?: number;
+  useTabs?: boolean;
+}
 
 expect.extend({
-  toRenderTo(received: Children, expectedRaw: string) {
+  toRenderTo(
+    received: Children,
+    expectedRaw: string,
+    renderOptions?: ToRenderToOptions,
+  ) {
     const { isNot } = this;
     const tree = renderTree(received);
-    const actual = printTree(tree);
+    const actual = printTree(tree, renderOptions);
     const expected = dedent(expectedRaw);
     return {
       pass: actual === expected,

package/testing/render.ts

@@ -1,9 +1,7 @@
-import { RenderTextTree, renderTree } from "@alloy-js/core";
+import { printTree, renderTree } from "@alloy-js/core";
 import { Children } from "../src/jsx-runtime.js";
 
-export function printTree(tree: RenderTextTree) {
-  return (tree as any).flat(Infinity).join("");
-}
+export { printTree } from "@alloy-js/core";
 
 export function renderToString(element: Children) {
   return printTree(renderTree(element));

package/testing/vitest.d.ts

@@ -1,7 +1,12 @@
 import "vitest";
 
+interface ToRenderToRenderOptions {
+  printWidth?: number;
+  tabWidth?: number;
+  useTabs?: boolean;
+}
 interface CustomMatchers<R = unknown> {
-  toRenderTo: (str: string) => R;
+  toRenderTo: (str: string, options?: ToRenderToRenderOptions) => R;
 }
 
 declare module "vitest" {

package/vitest.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
       sourceMaps: "both",
       babelHelpers: "bundled",
       extensions: [".ts", ".tsx"],
-      presets: ["@babel/preset-typescript", ["@alloy-js/babel-preset", {}]],
+      presets: ["@babel/preset-typescript", ["@alloy-js/babel-preset"]],
     }),
   ],
 });

package/dist/src/context/indent.d.ts

@@ -1,5 +0,0 @@
-import { IndentState } from "../components/Indent.jsx";
-import { ComponentContext } from "../context.js";
-export declare const IndentContext: ComponentContext<IndentState>;
-export declare const TestContext: ComponentContext<string>;
-//# sourceMappingURL=indent.d.ts.map

package/dist/src/context/indent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"indent.d.ts","sourceRoot":"","sources":["../../../src/context/indent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EACL,gBAAgB,EAGjB,MAAM,eAAe,CAAC;AAEvB,eAAO,MAAM,aAAa,EAAE,gBAAgB,CAAC,WAAW,CAOvD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,gBAAgB,CAAC,MAAM,CAAyB,CAAC"}

package/dist/src/context/indent.js

@@ -1,8 +0,0 @@
-import { createContext, createNamedContext } from "../context.js";
-export const IndentContext = createNamedContext("Indent", {
-  level: 0,
-  indent: "  ",
-  indentString: ""
-});
-export const TestContext = createContext("test");
-//# sourceMappingURL=indent.js.map

package/dist/src/context/indent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"indent.js","names":["createContext","createNamedContext","IndentContext","level","indent","indentString","TestContext"],"sources":["../../../src/context/indent.ts"],"sourcesContent":[null],"mappings":"AACA,SAEEA,aAAa,EACbC,kBAAkB,QACb,eAAe;AAEtB,OAAO,MAAMC,aAA4C,GAAGD,kBAAkB,CAC5E,QAAQ,EACR;EACEE,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE,IAAI;EACZC,YAAY,EAAE;AAChB,CACF,CAAC;AAED,OAAO,MAAMC,WAAqC,GAAGN,aAAa,CAAC,MAAM,CAAC","ignoreList":[]}

package/dist/test/rendering/linebreaks.test.d.ts

@@ -1,2 +0,0 @@
-import "../../testing/extend-expect.js";
-//# sourceMappingURL=linebreaks.test.d.ts.map

package/dist/test/rendering/linebreaks.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"linebreaks.test.d.ts","sourceRoot":"","sources":["../../../test/rendering/linebreaks.test.tsx"],"names":[],"mappings":"AACA,OAAO,gCAAgC,CAAC"}

package/src/context/indent.ts

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

package/test/rendering/linebreaks.test.tsx

@@ -1,72 +0,0 @@
-import { describe, expect, it } from "vitest";
-import "../../testing/extend-expect.js";
-
-describe("empty lines are preserved", () => {
-  it("fragment", () => {
-    const frag = <>
-      hi
-
-    </>;
-
-    expect(<>
-      { frag }
-      hi
-    </>).toRenderTo(`
-      hi
-
-      hi
-    `);
-  });
-
-  it("memo for fragment", () => {
-    const frag = <>
-      hi
-
-    </>;
-    function getTrue() {
-      return true;
-    }
-
-    expect(<>
-      { getTrue() ? frag : undefined }
-      hi
-    </>).toRenderTo(`
-      hi
-
-      hi
-    `);
-  });
-
-  it("after components", () => {
-    function Foo() {
-      return "hi";
-    }
-
-    expect(<>
-      <Foo />
-
-      hi
-    </>).toRenderTo(`
-      hi
-
-      hi
-    `);
-  });
-});
-
-// this would be a nice feature to have
-describe.skip("empty lines are removed when the only thing on the line is a falsy value", () => {
-  it("false", () => {
-    expect(<>
-      {false}
-      hi
-    </>).toRenderTo("hi");
-  });
-
-  it("undefined", () => {
-    expect(<>
-      {undefined}
-      hi
-    </>).toRenderTo("hi");
-  });
-});