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

package/temp/api.json

@@ -3261,6 +3261,227 @@
             }
           ]
         },
+        {
+          "kind": "Interface",
+          "canonicalReference": "@alloy-js/core!ContentSlot:interface",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export interface ContentSlot "
+            }
+          ],
+          "fileUrlPath": "src/content-slot.tsx",
+          "releaseTag": "Public",
+          "name": "ContentSlot",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "CallSignature",
+              "canonicalReference": "@alloy-js/core!ContentSlot:call(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "(props: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "{\n        children: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Children",
+                  "canonicalReference": "@alloy-js/core!Children:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";\n    }"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Children",
+                  "canonicalReference": "@alloy-js/core!Children:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "returnTypeTokenRange": {
+                "startIndex": 5,
+                "endIndex": 6
+              },
+              "releaseTag": "Public",
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "props",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 4
+                  },
+                  "isOptional": false
+                }
+              ]
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@alloy-js/core!ContentSlot#hasContent:member",
+              "docComment": "/**\n * Whether the slot has any content.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "hasContent: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "hasContent",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@alloy-js/core!ContentSlot#isEmpty:member",
+              "docComment": "/**\n * Whether the slot is currently empty.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "isEmpty: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "isEmpty",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@alloy-js/core!ContentSlot#ref:member",
+              "docComment": "/**\n * A ref indicating whether the slot is currently empty.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "ref: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Ref",
+                  "canonicalReference": "@vue/reactivity!Ref:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "<boolean>"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "ref",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 3
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@alloy-js/core!ContentSlot#WhenEmpty:member",
+              "docComment": "/**\n * A component that will render its contents when the content slot is empty.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "WhenEmpty: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Component",
+                  "canonicalReference": "@alloy-js/core!Component:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "<{}>"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "WhenEmpty",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 3
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@alloy-js/core!ContentSlot#WhenHasContent:member",
+              "docComment": "/**\n * A component that will render its contents when the content slot has content.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "WhenHasContent: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Component",
+                  "canonicalReference": "@alloy-js/core!Component:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "<{}>"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "WhenHasContent",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 3
+              }
+            }
+          ],
+          "extendsTokenRanges": []
+        },
         {
           "kind": "Interface",
           "canonicalReference": "@alloy-js/core!Context:interface",
@@ -3276,6 +3497,33 @@
           "name": "Context",
           "preserveMemberOrder": false,
           "members": [
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@alloy-js/core!Context#childrenWithContent:member",
+              "docComment": "/**\n * The number of child nodes that have content. When zero, this component is\n * semantically empty.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "childrenWithContent: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "number"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "childrenWithContent",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
             {
               "kind": "PropertySignature",
               "canonicalReference": "@alloy-js/core!Context#componentOwner:member",
@@ -3400,6 +3648,65 @@
                 "endIndex": 2
               }
             },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@alloy-js/core!Context#isEmpty:member",
+              "docComment": "/**\n * A ref that indicates whether the component is empty.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "isEmpty?: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Ref",
+                  "canonicalReference": "@vue/reactivity!Ref:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "<boolean>"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "isEmpty",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 3
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@alloy-js/core!Context#isRoot:member",
+              "docComment": "/**\n * Whether this context is a root context\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "isRoot: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "isRoot",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
             {
               "kind": "PropertySignature",
               "canonicalReference": "@alloy-js/core!Context#meta:member",
@@ -4073,6 +4380,35 @@
           ],
           "name": "createComponent"
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@alloy-js/core!createContentSlot:function(1)",
+          "docComment": "/**\n * Create a component which tracks whether any content is placed inside of it.\n * The component exposes a ref `isEmpty` which indicates whether the slot is\n * empty, as well as convenience accessors `isEmpty` and `hasContent`.\n * Additionally, it provides two sub-components, `WhenEmpty` and\n * `WhenHasContent`, which render their contents conditionally based on whether\n * the slot is empty.\n *\n * @example\n *\n *\n *\n * ```tsx\n * const ContentSlot = createContentSlot();\n *\n * <>\n *   <ContentSlot.WhenEmpty>The slot is empty!</ContentSlot.WhenEmpty>\n *   <ContentSlot.WhenHasContent>The slot has content!</ContentSlot.WhenHasContent>\n *   <ContentSlot>\n *     {someCondition && \"Here is some content!\"}\n *   </ContentSlot>\n * </>\n * ```\n *\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function createContentSlot(): "
+            },
+            {
+              "kind": "Reference",
+              "text": "ContentSlot",
+              "canonicalReference": "@alloy-js/core!ContentSlot:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/content-slot.tsx",
+          "returnTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [],
+          "name": "createContentSlot"
+        },
         {
           "kind": "Function",
           "canonicalReference": "@alloy-js/core!createContext:function(1)",
@@ -5504,6 +5840,61 @@
             "endIndex": 4
           }
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@alloy-js/core!decl:function(1)",
+          "docComment": "/**\n * Create a declaration in the current scope with the given namekey. Only works\n * with basic scopes. Import `decl` from a specific language library for\n * declaring language-specific symbols.\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function decl(namekey: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Namekey",
+              "canonicalReference": "@alloy-js/core!Namekey:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Content",
+              "text": "import(\"../runtime/component.js\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "ComponentCreator",
+              "canonicalReference": "@alloy-js/core!ComponentCreator:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<{}>"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/symbols/decl.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 3,
+            "endIndex": 6
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "namekey",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "decl"
+        },
         {
           "kind": "Function",
           "canonicalReference": "@alloy-js/core!Declaration:function(1)",
@@ -13107,6 +13498,34 @@
           ],
           "extendsTokenRanges": []
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@alloy-js/core!notifyContentState:function(1)",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function notifyContentState(): "
+            },
+            {
+              "kind": "Content",
+              "text": "void"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/render.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [],
+          "name": "notifyContentState"
+        },
         {
           "kind": "Function",
           "canonicalReference": "@alloy-js/core!onCleanup:function(1)",
@@ -18467,6 +18886,56 @@
           ],
           "extendsTokenRanges": []
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@alloy-js/core!refId:function(1)",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function refId(ref: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Ref",
+              "canonicalReference": "@vue/reactivity!Ref:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<unknown>"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Content",
+              "text": "number"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/reactivity.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 4,
+            "endIndex": 5
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "ref",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 3
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "refId"
+        },
         {
           "kind": "Function",
           "canonicalReference": "@alloy-js/core!refkey:function(1)",

package/test/components/block.test.tsx

@@ -1,5 +1,7 @@
+import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { Block } from "../../src/components/Block.jsx";
+import { printTree, renderTree } from "../../src/render.js";
 import "../../testing/extend-expect.js";
 it("renders properly with no children", () => {
   const template = (
@@ -33,7 +35,7 @@ it("renders properly with newline and no children", () => {
   `);
 });
 
-it("renders properly with newline and no children", () => {
+it("renders properly with newline and children", () => {
   const template = (
     <>
       class<Block newline>contents!!</Block>
@@ -46,3 +48,21 @@ it("renders properly with newline and no children", () => {
     }
   `);
 });
+
+it("renders properly when content is added reactively", () => {
+  const contents = ref("");
+  const tree = renderTree(
+    <>
+      class Foo <Block>{contents}</Block>
+    </>,
+  );
+  expect(printTree(tree)).toRenderTo(`
+    class Foo {}
+  `);
+  contents.value = "x = 12;";
+  expect(printTree(tree)).toRenderTo(`
+    class Foo {
+      x = 12;
+    }
+  `);
+});

package/test/components/list.test.tsx

@@ -1,5 +1,12 @@
 import { expect, it } from "vitest";
-import { List, printTree, ref, renderTree } from "../../src/index.js";
+import {
+  createContentSlot,
+  List,
+  printTree,
+  ref,
+  renderTree,
+  Show,
+} from "../../src/index.js";
 import "../../testing/extend-expect.js";
 import { d } from "../../testing/render.js";
 
@@ -88,3 +95,71 @@ it("is useful for statements", () => {
 
   `);
 });
+
+it("doesn't add joiners when items are empty", () => {
+  expect(
+    <group>
+      <List comma line>
+        <></>
+        <></>
+        <></>
+      </List>
+    </group>,
+  ).toRenderTo(``);
+});
+
+it("It add joiners when items are become non-empty", () => {
+  const item1 = ref("");
+  const item2 = ref("");
+  const item3 = ref("");
+
+  const tree = renderTree(
+    <group>
+      <List comma line ender=";">
+        <>{item1}</>
+        <>{item2}</>
+        <>{item3}</>
+      </List>
+    </group>,
+  );
+
+  expect(printTree(tree)).toBe(``);
+  item1.value = "hi";
+  expect(printTree(tree)).toBe(`hi;`);
+  item2.value = "there";
+  expect(printTree(tree)).toBe(`hi, there;`);
+  item3.value = "friend";
+  expect(printTree(tree)).toBe(`hi, there, friend;`);
+
+  item1.value = "";
+  expect(printTree(tree)).toBe(`there, friend;`);
+  item3.value = "";
+  expect(printTree(tree)).toBe(`there;`);
+  item2.value = "";
+  expect(printTree(tree)).toBe(``);
+});
+
+it("works with show", () => {
+  const ContentSlot = createContentSlot();
+  const showFirst = ref(false);
+  const showSecond = ref(false);
+  const tree = renderTree(
+    <>
+      <ContentSlot.WhenEmpty>Empty list!</ContentSlot.WhenEmpty>
+      <ContentSlot>
+        <List comma space>
+          <Show when={showFirst.value}>One</Show>
+          <Show when={showSecond.value}>Two</Show>
+        </List>
+      </ContentSlot>
+    </>,
+  );
+  expect(printTree(tree)).toBe(`Empty list!`);
+  showFirst.value = true;
+  expect(printTree(tree)).toBe(`One`);
+  showSecond.value = true;
+  expect(printTree(tree)).toBe(`One, Two`);
+  showFirst.value = false;
+  showSecond.value = false;
+  expect(printTree(tree)).toBe(`Empty list!`);
+});