jsx-parser: Add basic tests

packages/jsx-parser/dev/index.tsx

@@ -8,9 +8,10 @@ type Props = {
   children?: JSX.Element | JSX.Element[];
 };
 
-type CustomToken = TokenValue | TokenAdd | TokenSubtract;
-
-const { createToken, childrenTokens } = createJSXParser<CustomToken>({ name: "calculator" });
+const { createToken, childrenTokens } = createJSXParser<{
+  id: "Value" | "Add" | "Subtract";
+  props: Props;
+}>({ name: "calculator" });
 
 const Calculator: ParentComponent = props => {
   const tokens = childrenTokens(() => props.children);
@@ -38,11 +39,6 @@ const Calculator: ParentComponent = props => {
   );
 };
 
-type TokenValue = {
-  id: "Value";
-  props: Props;
-};
-
 const Value = createToken(
   (props: Props) => ({
     props,
@@ -51,26 +47,16 @@ const Value = createToken(
   props => <>{props.value}</>
 );
 
-type TokenAdd = {
-  id: "Add";
-  props: Props;
-};
-
-const Add = createToken<Props, TokenAdd>(
-  props => ({
+const Add = createToken(
+  (props: Props) => ({
     props,
     id: "Add"
   }),
   props => <> + {props.value}</>
 );
 
-type TokenSubtract = {
-  id: "Subtract";
-  props: Props;
-};
-
-const Subtract = createToken<Props, TokenSubtract>(
-  props => ({
+const Subtract = createToken(
+  (props: Props) => ({
     props,
     id: "Subtract"
   }),

packages/jsx-parser/test/index.test.tsx

@@ -0,0 +1,72 @@
+import { children, createRoot, createSignal, Show } from "solid-js";
+import { describe, expect, it } from "vitest";
+import { createJSXParser } from "../src";
+
+describe("jsx-parser", () => {
+  const parser1 = createJSXParser<{
+    type: "my-token";
+    props: { text: string };
+  }>();
+
+  const MyToken1 = parser1.createToken((props: { text: string }) => ({
+    type: "my-token",
+    props
+  }));
+
+  it("should work", () => {
+    createRoot(() => {
+      const tokens = parser1.childrenTokens(() => (
+        <>
+          <MyToken1 text="foo" />
+          <MyToken1 text="bar" />
+        </>
+      ));
+
+      expect(tokens()).toHaveLength(2);
+      tokens().forEach(token => expect(token.type).toBe("my-token"));
+      expect(tokens()[0].props.text).toBe("foo");
+      expect(tokens()[1].props.text).toBe("bar");
+
+      // shouldn't throw
+      <>{tokens()}</>;
+    });
+  });
+
+  it("handled reactive children", () => {
+    createRoot(() => {
+      const [show, setShow] = createSignal(true);
+
+      const tokens = parser1.childrenTokens(() => (
+        <>
+          <Show when={show()}>
+            <MyToken1 text="foo" />
+          </Show>
+          <MyToken1 text="bar" />
+        </>
+      ));
+
+      expect(tokens()).toHaveLength(2);
+
+      setShow(false);
+
+      expect(tokens()).toHaveLength(1);
+    });
+  });
+
+  it("should render tokens", () => {
+    createRoot(() => {
+      const parser2 = createJSXParser();
+
+      const MyToken2 = parser2.createToken(
+        () => ({}),
+        (props: { text: string }) => <div>{props.text}</div>
+      );
+
+      const rendered1 = children(() => <MyToken2 text="foo" />);
+      const rendered2 = children(() => <MyToken2 text="bar" />);
+
+      expect((rendered1() as HTMLElement).outerHTML).toBe("<div>foo</div>");
+      expect((rendered2() as HTMLElement).outerHTML).toBe("<div>bar</div>");
+    });
+  });
+});

packages/jsx-parser/test/server.test.tsx

@@ -0,0 +1,47 @@
+import { renderToString } from "solid-js/web";
+import { describe, expect, it } from "vitest";
+import { createJSXParser } from "../src";
+
+describe("jsx-parser", () => {
+  const parser1 = createJSXParser<{
+    type: "my-token";
+    props: { text: string };
+  }>();
+
+  const MyToken1 = parser1.createToken((props: { text: string }) => ({
+    type: "my-token",
+    props
+  }));
+
+  it("should work", () => {
+    const tokens = parser1.childrenTokens(() => (
+      <>
+        <MyToken1 text="foo" />
+        <MyToken1 text="bar" />
+      </>
+    ));
+
+    expect(tokens()).toHaveLength(2);
+    tokens().forEach(token => expect(token.type).toBe("my-token"));
+    expect(tokens()[0].props.text).toBe("foo");
+    expect(tokens()[1].props.text).toBe("bar");
+
+    // shouldn't throw
+    <>{tokens()}</>;
+  });
+
+  it("should render tokens", () => {
+    const parser2 = createJSXParser();
+
+    const MyToken2 = parser2.createToken(
+      () => ({}),
+      (props: { text: string }) => <div>{props.text}</div>
+    );
+
+    const rendered1 = renderToString(() => <MyToken2 text="foo" />);
+    const rendered2 = renderToString(() => <MyToken2 text="bar" />);
+
+    expect(rendered1).toBe("<div>foo</div>");
+    expect(rendered2).toBe("<div>bar</div>");
+  });
+});