rask-ui 0.1.1 → 0.2.0

package/dist/tests/error-no-boundary.test.js

@@ -0,0 +1,174 @@
+import { describe, it, expect } from "vitest";
+import { jsx } from "../vdom";
+import { renderComponent } from "../test-setup";
+describe("Error handling without ErrorBoundary", () => {
+    it("should not infinite loop when component throws during render without ErrorBoundary", async () => {
+        let renderCount = 0;
+        function ThrowingComponent() {
+            renderCount++;
+            if (renderCount > 20) {
+                throw new Error("Infinite loop detected - rendered more than 20 times!");
+            }
+            return () => {
+                throw new Error("Component throws in render function");
+            };
+        }
+        const { container, unmount } = renderComponent(jsx(ThrowingComponent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        // Should only attempt initialization once, not loop
+        expect(renderCount).toBe(1);
+        // Should render empty content gracefully
+        expect(container.textContent).toBe("");
+        unmount();
+    });
+    it("should not infinite loop when component returns JSX directly without ErrorBoundary", async () => {
+        let renderCount = 0;
+        function BadComponent() {
+            renderCount++;
+            if (renderCount > 20) {
+                throw new Error("Infinite loop detected - rendered more than 20 times!");
+            }
+            // Directly return JSX instead of a function
+            return jsx("div", { children: "Direct JSX" });
+        }
+        const { container, unmount } = renderComponent(jsx(BadComponent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        // Should only attempt initialization once, not loop
+        expect(renderCount).toBe(1);
+        // Should render empty content gracefully (because of error)
+        expect(container.textContent).toBe("");
+        unmount();
+    });
+    it("should handle state changes that cause errors without ErrorBoundary", async () => {
+        let initCount = 0;
+        let renderCount = 0;
+        function ComponentWithState() {
+            initCount++;
+            if (initCount > 20) {
+                throw new Error("Infinite loop detected - initialized more than 20 times!");
+            }
+            return () => {
+                renderCount++;
+                if (renderCount > 20) {
+                    throw new Error("Infinite loop detected - rendered more than 20 times!");
+                }
+                throw new Error("Render error");
+            };
+        }
+        const { container, unmount } = renderComponent(jsx(ComponentWithState, {}));
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        // Should only initialize once
+        expect(initCount).toBe(1);
+        // Should render empty without looping
+        expect(renderCount).toBeLessThan(20);
+        unmount();
+    });
+    it("should handle nested component returning JSX directly (child error, parent ok)", async () => {
+        let parentRenderCount = 0;
+        let childInitCount = 0;
+        function BadChild() {
+            childInitCount++;
+            if (childInitCount > 20) {
+                throw new Error("Infinite loop detected in child!");
+            }
+            // Directly return JSX instead of a function
+            return jsx("span", { children: "Direct JSX from child" });
+        }
+        function GoodParent() {
+            parentRenderCount++;
+            if (parentRenderCount > 20) {
+                throw new Error("Infinite loop detected in parent!");
+            }
+            return () => jsx("div", {
+                children: [
+                    jsx("h1", { children: "Parent" }),
+                    jsx(BadChild, {}),
+                ],
+            });
+        }
+        const { container, unmount } = renderComponent(jsx(GoodParent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        // Parent should initialize once
+        expect(parentRenderCount).toBe(1);
+        // Child should only attempt to initialize once
+        expect(childInitCount).toBe(1);
+        // Parent should render but child error shouldn't show
+        expect(container.textContent).toContain("Parent");
+        expect(container.textContent).not.toContain("Direct JSX");
+        unmount();
+    });
+    it("should handle nested component throwing during render (child error, parent ok)", async () => {
+        let parentRenderCount = 0;
+        let childInitCount = 0;
+        let childRenderAttempts = 0;
+        function BadChild() {
+            childInitCount++;
+            if (childInitCount > 20) {
+                throw new Error("Infinite loop detected in child!");
+            }
+            return () => {
+                childRenderAttempts++;
+                throw new Error("Child render error");
+            };
+        }
+        function GoodParent() {
+            parentRenderCount++;
+            if (parentRenderCount > 20) {
+                throw new Error("Infinite loop detected in parent!");
+            }
+            return () => jsx("div", {
+                children: [jsx("h1", { children: "Parent" }), jsx(BadChild, {})],
+            });
+        }
+        const { container, unmount } = renderComponent(jsx(GoodParent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        // Parent should initialize once
+        expect(parentRenderCount).toBe(1);
+        // Child should only initialize once
+        expect(childInitCount).toBe(1);
+        // Child render should be attempted but parent should still render
+        expect(childRenderAttempts).toBeGreaterThan(0);
+        expect(childRenderAttempts).toBeLessThan(20);
+        expect(container.textContent).toContain("Parent");
+        unmount();
+    });
+    it("should handle multiple nested bad children without looping", async () => {
+        let parentRenderCount = 0;
+        let child1InitCount = 0;
+        let child2InitCount = 0;
+        function BadChild1() {
+            child1InitCount++;
+            if (child1InitCount > 20)
+                throw new Error("Child1 loop!");
+            return jsx("div", { children: "Direct JSX 1" });
+        }
+        function BadChild2() {
+            child2InitCount++;
+            if (child2InitCount > 20)
+                throw new Error("Child2 loop!");
+            return jsx("span", { children: "Direct JSX 2" });
+        }
+        function GoodParent() {
+            parentRenderCount++;
+            if (parentRenderCount > 20)
+                throw new Error("Parent loop!");
+            return () => jsx("div", {
+                children: [
+                    jsx("h1", { children: "Parent" }),
+                    jsx(BadChild1, {}),
+                    jsx(BadChild2, {}),
+                ],
+            });
+        }
+        const { container, unmount } = renderComponent(jsx(GoodParent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        // Parent initializes once
+        expect(parentRenderCount).toBe(1);
+        // Each child initializes once
+        expect(child1InitCount).toBe(1);
+        expect(child2InitCount).toBe(1);
+        // Parent renders successfully despite child errors
+        expect(container.textContent).toContain("Parent");
+        unmount();
+    });
+});

package/dist/tests/error.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=error.test.d.ts.map

package/dist/tests/error.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error.test.d.ts","sourceRoot":"","sources":["../../src/tests/error.test.ts"],"names":[],"mappings":""}

package/dist/tests/error.test.js

@@ -0,0 +1,199 @@
+import { describe, it, expect } from "vitest";
+import { jsx } from "../vdom";
+import { ErrorBoundary } from "../error";
+import { renderComponent } from "../test-setup";
+describe("ErrorBoundary", () => {
+    it("should render children when no error occurs", async () => {
+        function SafeChild() {
+            return () => jsx("div", { children: "Safe content" });
+        }
+        function TestComponent() {
+            return () => jsx(ErrorBoundary, {
+                error: (error) => jsx("div", { children: `Error: ${String(error)}` }),
+                children: jsx(SafeChild, {}),
+            });
+        }
+        const { container, unmount } = renderComponent(jsx(TestComponent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(container.textContent).toContain("Safe content");
+        expect(container.textContent).not.toContain("Error:");
+        unmount();
+    });
+    it("should catch errors thrown in child components", async () => {
+        function ThrowingChild() {
+            return () => {
+                throw new Error("Child component error");
+            };
+        }
+        function TestComponent() {
+            return () => jsx(ErrorBoundary, {
+                error: (error) => jsx("div", { children: `Error: ${String(error)}` }),
+                children: jsx(ThrowingChild, {}),
+            });
+        }
+        const { container, unmount } = renderComponent(jsx(TestComponent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(container.textContent).toContain("Error:");
+        expect(container.textContent).toContain("Child component error");
+        unmount();
+    });
+    it("should render custom error UI", async () => {
+        function ThrowingChild() {
+            return () => {
+                throw new Error("Something went wrong");
+            };
+        }
+        function TestComponent() {
+            return () => jsx(ErrorBoundary, {
+                error: (error) => jsx("div", {
+                    class: "error-ui",
+                    children: [
+                        jsx("h1", { children: "Oops!" }),
+                        jsx("p", { children: String(error) }),
+                    ],
+                }),
+                children: jsx(ThrowingChild, {}),
+            });
+        }
+        const { container, unmount } = renderComponent(jsx(TestComponent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        const errorUI = document.querySelector(".error-ui");
+        expect(errorUI).not.toBeNull();
+        expect(errorUI?.querySelector("h1")?.textContent).toBe("Oops!");
+        expect(errorUI?.textContent).toContain("Something went wrong");
+        unmount();
+    });
+    it("should handle multiple children", async () => {
+        function SafeChild1() {
+            return () => jsx("div", { children: "Child 1" });
+        }
+        function SafeChild2() {
+            return () => jsx("div", { children: "Child 2" });
+        }
+        function TestComponent() {
+            return () => jsx(ErrorBoundary, {
+                error: (error) => jsx("div", { children: `Error: ${String(error)}` }),
+                children: [jsx(SafeChild1, {}), jsx(SafeChild2, {})],
+            });
+        }
+        const { container, unmount } = renderComponent(jsx(TestComponent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(container.textContent).toContain("Child 1");
+        expect(container.textContent).toContain("Child 2");
+        unmount();
+    });
+    it("should catch errors from nested children", async () => {
+        function DeepChild() {
+            return () => {
+                throw new Error("Deep error");
+            };
+        }
+        function MiddleChild() {
+            return () => jsx(DeepChild, {});
+        }
+        function TestComponent() {
+            return () => jsx(ErrorBoundary, {
+                error: (error) => jsx("div", { children: `Caught: ${String(error)}` }),
+                children: jsx(MiddleChild, {}),
+            });
+        }
+        const { container, unmount } = renderComponent(jsx(TestComponent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(container.textContent).toContain("Caught:");
+        expect(container.textContent).toContain("Deep error");
+        unmount();
+    });
+    it("should allow nested error boundaries", async () => {
+        function ThrowingChild() {
+            return () => {
+                throw new Error("Inner error");
+            };
+        }
+        function TestComponent() {
+            return () => jsx(ErrorBoundary, {
+                error: (error) => jsx("div", { children: `Outer: ${String(error)}` }),
+                children: jsx(ErrorBoundary, {
+                    error: (error) => jsx("div", { children: `Inner: ${String(error)}` }),
+                    children: jsx(ThrowingChild, {}),
+                }),
+            });
+        }
+        const { container, unmount } = renderComponent(jsx(TestComponent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        // Inner boundary should catch the error
+        expect(container.textContent).toContain("Inner:");
+        expect(container.textContent).not.toContain("Outer:");
+        unmount();
+    });
+    it("should handle string errors", async () => {
+        function ThrowingChild() {
+            return () => {
+                throw "String error";
+            };
+        }
+        function TestComponent() {
+            return () => jsx(ErrorBoundary, {
+                error: (error) => jsx("div", { children: `Error: ${String(error)}` }),
+                children: jsx(ThrowingChild, {}),
+            });
+        }
+        const { container, unmount } = renderComponent(jsx(TestComponent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(container.textContent).toContain("String error");
+        unmount();
+    });
+    it("should handle object errors", async () => {
+        function ThrowingChild() {
+            return () => {
+                throw { message: "Custom error object", code: 500 };
+            };
+        }
+        function TestComponent() {
+            return () => jsx(ErrorBoundary, {
+                error: (error) => jsx("div", {
+                    children: `Error: ${error.message} (Code: ${error.code})`,
+                }),
+                children: jsx(ThrowingChild, {}),
+            });
+        }
+        const { container, unmount } = renderComponent(jsx(TestComponent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(container.textContent).toContain("Custom error object");
+        expect(container.textContent).toContain("500");
+        unmount();
+    });
+    it("should switch back to children if error is cleared", async () => {
+        // Note: This test demonstrates the current behavior
+        // In practice, error clearing would require additional implementation
+        function SafeChild() {
+            return () => jsx("div", { children: "Safe content" });
+        }
+        function TestComponent() {
+            return () => jsx(ErrorBoundary, {
+                error: (error) => jsx("div", { children: `Error: ${String(error)}` }),
+                children: jsx(SafeChild, {}),
+            });
+        }
+        const { container, unmount } = renderComponent(jsx(TestComponent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(container.textContent).toContain("Safe content");
+        unmount();
+    });
+    it("should catch error when component returns JSX directly instead of function", async () => {
+        function BadComponent() {
+            // Wrong: returning JSX directly
+            return jsx("div", { children: "Direct JSX" });
+        }
+        function TestComponent() {
+            return () => jsx(ErrorBoundary, {
+                error: (error) => jsx("div", { children: `Error: ${String(error)}` }),
+                children: jsx(BadComponent, {}),
+            });
+        }
+        const { container, unmount } = renderComponent(jsx(TestComponent, {}));
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(container.textContent).toContain("Error:");
+        expect(container.textContent).toContain("Component must return a render function");
+        unmount();
+    });
+});

package/dist/tests/fragment.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=fragment.test.d.ts.map

package/dist/tests/fragment.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fragment.test.d.ts","sourceRoot":"","sources":["../../src/tests/fragment.test.ts"],"names":[],"mappings":""}