...",
diff --git a/src/__tests__/end-to-end.tsx b/src/__tests__/end-to-end.tsx
index c56dde7..6b3c44d 100644
--- a/src/__tests__/end-to-end.tsx
+++ b/src/__tests__/end-to-end.tsx
@@ -3,30 +3,28 @@ import { createResource, Show } from "supplejs";
import { screen, render, waitForElementToBeRemoved } from "..";
const fetchAMessage = () =>
- new Promise<{ returnedMessage: string }>((resolve) => {
- // we are using random timeout here to simulate a real-time example
- // of an async operation calling a callback at a non-deterministic time
- const randomTimeout = Math.floor(Math.random() * 100);
+ new Promise<{ returnedMessage: string }>((resolve) => {
+ // we are using random timeout here to simulate a real-time example
+ // of an async operation calling a callback at a non-deterministic time
+ const randomTimeout = Math.floor(Math.random() * 100);
- setTimeout(() => {
- resolve({ returnedMessage: "Hello World" });
- }, randomTimeout);
- });
+ setTimeout(() => {
+ resolve({ returnedMessage: "Hello World" });
+ }, randomTimeout);
+ });
function ComponentWithLoader() {
- const [data] = createResource("data", fetchAMessage);
- return () => (
-
data.state === "ready"} fallback={Loading...
}>
-
- Loaded this message: {() => data()!.returnedMessage}!
-
-
- );
+ const [data] = createResource("data", fetchAMessage);
+ return () => (
+
data.state === "ready"} fallback={Loading...
}>
+ Loaded this message: {() => data()!.returnedMessage}!
+
+ );
}
test("it waits for the data to be loaded", async () => {
- render(() =>
);
- const loading = () => screen.getByText("Loading...");
- await waitForElementToBeRemoved(loading);
- expect(screen.getByTestId("message")).toHaveTextContent(/Hello World/);
+ render(() =>
);
+ const loading = () => screen.getByText("Loading...");
+ await waitForElementToBeRemoved(loading);
+ expect(screen.getByTestId("message")).toHaveTextContent(/Hello World/);
});
diff --git a/src/__tests__/events.tsx b/src/__tests__/events.tsx
index 4adb26d..75d40fe 100644
--- a/src/__tests__/events.tsx
+++ b/src/__tests__/events.tsx
@@ -4,182 +4,182 @@ import userEvent from "@testing-library/user-event";
import type { Mock } from "vitest";
const eventTypes = [
- {
- type: "Clipboard",
- events: ["copy", "paste"],
- elementType: "input",
- },
- {
- type: "Composition",
- events: ["compositionEnd", "compositionStart", "compositionUpdate"],
- elementType: "input",
- },
- {
- type: "Keyboard",
- events: ["keyDown", "keyPress", "keyUp"],
- elementType: "input",
- init: { keyCode: 13 },
- },
- {
- type: "Focus",
- events: ["focus", "blur"],
- elementType: "input",
- },
- {
- type: "Form",
- events: ["focus", "blur"],
- elementType: "input",
- },
- {
- type: "Focus",
- events: ["input", "invalid"],
- elementType: "input",
- },
- {
- type: "Focus",
- events: ["submit"],
- elementType: "form",
- },
- {
- type: "Mouse",
- events: [
- "click",
- "contextMenu",
- "dblClick",
- "drag",
- "dragEnd",
- "dragEnter",
- "dragExit",
- "dragLeave",
- "dragOver",
- "dragStart",
- "drop",
- "mouseDown",
- "mouseEnter",
- "mouseLeave",
- "mouseMove",
- "mouseOut",
- "mouseOver",
- "mouseUp",
- ],
- elementType: "button",
- },
- {
- type: "Selection",
- events: ["select"],
- elementType: "input",
- },
- {
- type: "Touch",
- events: ["touchCancel", "touchEnd", "touchMove", "touchStart"],
- elementType: "button",
- },
- {
- type: "UI",
- events: ["scroll"],
- elementType: "div",
- },
- {
- type: "Wheel",
- events: ["wheel"],
- elementType: "div",
- },
- {
- type: "Media",
- events: [
- "abort",
- "canPlay",
- "canPlayThrough",
- "durationChange",
- "emptied",
- "encrypted",
- "ended",
- "error",
- "loadedData",
- "loadedMetadata",
- "loadStart",
- "pause",
- "play",
- "playing",
- "progress",
- "rateChange",
- "seeked",
- "seeking",
- "stalled",
- "suspend",
- "timeUpdate",
- "volumeChange",
- "waiting",
- ],
- elementType: "video",
- },
- {
- type: "Image",
- events: ["load", "error"],
- elementType: "img",
- },
- {
- type: "Animation",
- events: ["animationStart", "animationEnd", "animationIteration"],
- elementType: "div",
- },
- {
- type: "Transition",
- events: ["transitionEnd"],
- elementType: "div",
- },
+ {
+ type: "Clipboard",
+ events: ["copy", "paste"],
+ elementType: "input",
+ },
+ {
+ type: "Composition",
+ events: ["compositionEnd", "compositionStart", "compositionUpdate"],
+ elementType: "input",
+ },
+ {
+ type: "Keyboard",
+ events: ["keyDown", "keyPress", "keyUp"],
+ elementType: "input",
+ init: { keyCode: 13 },
+ },
+ {
+ type: "Focus",
+ events: ["focus", "blur"],
+ elementType: "input",
+ },
+ {
+ type: "Form",
+ events: ["focus", "blur"],
+ elementType: "input",
+ },
+ {
+ type: "Focus",
+ events: ["input", "invalid"],
+ elementType: "input",
+ },
+ {
+ type: "Focus",
+ events: ["submit"],
+ elementType: "form",
+ },
+ {
+ type: "Mouse",
+ events: [
+ "click",
+ "contextMenu",
+ "dblClick",
+ "drag",
+ "dragEnd",
+ "dragEnter",
+ "dragExit",
+ "dragLeave",
+ "dragOver",
+ "dragStart",
+ "drop",
+ "mouseDown",
+ "mouseEnter",
+ "mouseLeave",
+ "mouseMove",
+ "mouseOut",
+ "mouseOver",
+ "mouseUp",
+ ],
+ elementType: "button",
+ },
+ {
+ type: "Selection",
+ events: ["select"],
+ elementType: "input",
+ },
+ {
+ type: "Touch",
+ events: ["touchCancel", "touchEnd", "touchMove", "touchStart"],
+ elementType: "button",
+ },
+ {
+ type: "UI",
+ events: ["scroll"],
+ elementType: "div",
+ },
+ {
+ type: "Wheel",
+ events: ["wheel"],
+ elementType: "div",
+ },
+ {
+ type: "Media",
+ events: [
+ "abort",
+ "canPlay",
+ "canPlayThrough",
+ "durationChange",
+ "emptied",
+ "encrypted",
+ "ended",
+ "error",
+ "loadedData",
+ "loadedMetadata",
+ "loadStart",
+ "pause",
+ "play",
+ "playing",
+ "progress",
+ "rateChange",
+ "seeked",
+ "seeking",
+ "stalled",
+ "suspend",
+ "timeUpdate",
+ "volumeChange",
+ "waiting",
+ ],
+ elementType: "video",
+ },
+ {
+ type: "Image",
+ events: ["load", "error"],
+ elementType: "img",
+ },
+ {
+ type: "Animation",
+ events: ["animationStart", "animationEnd", "animationIteration"],
+ elementType: "div",
+ },
+ {
+ type: "Transition",
+ events: ["transitionEnd"],
+ elementType: "div",
+ },
];
function event(el: HTMLElement, name: string, spy: Mock) {
- el.addEventListener(name, spy);
+ el.addEventListener(name, spy);
}
eventTypes.forEach(({ type, events, elementType, init }) => {
- describe(`${type} Events`, () => {
- events.forEach((eventName) => {
- const eventProp = eventName.toLowerCase();
+ describe(`${type} Events`, () => {
+ events.forEach((eventName) => {
+ const eventProp = eventName.toLowerCase();
- it(`triggers ${eventProp}`, () => {
- let ref = createRef
();
- const spy = vi.fn();
+ it(`triggers ${eventProp}`, () => {
+ let ref = createRef();
+ const spy = vi.fn();
- render(() => Jekyll
, {
- baseElement: treeA
- });
+ const { getByText: getByTextInA } = render(() => Jekyll
, {
+ baseElement: treeA,
+ });
- const { getByText: getByTextInB } = render(() => Hyde
, {
- baseElement: treeB
- });
+ const { getByText: getByTextInB } = render(() => Hyde
, {
+ baseElement: treeB,
+ });
- expect(() => getByTextInA("Jekyll")).not.toThrow(
- "Unable to find an element with the text: Jekyll."
- );
+ expect(() => getByTextInA("Jekyll")).not.toThrow("Unable to find an element with the text: Jekyll.");
- expect(() => getByTextInB("Jekyll")).toThrow("Unable to find an element with the text: Jekyll.");
+ expect(() => getByTextInB("Jekyll")).toThrow("Unable to find an element with the text: Jekyll.");
- expect(() => getByTextInA("Hyde")).toThrow("Unable to find an element with the text: Hyde.");
+ expect(() => getByTextInA("Hyde")).toThrow("Unable to find an element with the text: Hyde.");
- expect(() => getByTextInB("Hyde")).not.toThrow("Unable to find an element with the text: Hyde.");
+ expect(() => getByTextInB("Hyde")).not.toThrow("Unable to find an element with the text: Hyde.");
});
diff --git a/src/__tests__/stopwatch.tsx b/src/__tests__/stopwatch.tsx
index 24fc786..dbe1a57 100644
--- a/src/__tests__/stopwatch.tsx
+++ b/src/__tests__/stopwatch.tsx
@@ -3,55 +3,54 @@ import { createSignal, onCleanup } from "supplejs";
import { screen, render } from "..";
function StopWatch() {
- const [lapse, setLapse] = createSignal(0);
- const [running, setRunning] = createSignal(false);
- let timer: ReturnType;
-
- const handleRunClick = () => {
- if (running()) {
- clearInterval(timer);
- } else {
- const startTime = Date.now() - lapse();
- timer = setInterval(() => setLapse(Date.now() - startTime));
- }
- return setRunning(!running());
- };
-
- const handleClearClick = () => {
- clearInterval(timer);
- setLapse(0);
- setRunning(false);
- };
-
- onCleanup(() => clearInterval(timer));
-
- return () => (
-
- {lapse()}ms
- {running() ? "Stop" : "Start"}
- Clear
-
- );
+ const [lapse, setLapse] = createSignal(0);
+ const [running, setRunning] = createSignal(false);
+ let timer: ReturnType;
+
+ const handleRunClick = () => {
+ if (running()) {
+ clearInterval(timer);
+ } else {
+ const startTime = Date.now() - lapse();
+ timer = setInterval(() => setLapse(Date.now() - startTime));
+ }
+ return setRunning(!running());
+ };
+
+ const handleClearClick = () => {
+ clearInterval(timer);
+ setLapse(0);
+ setRunning(false);
+ };
+
+ onCleanup(() => clearInterval(timer));
+
+ return (
+
+ {lapse}ms
+ {() => (running() ? "Stop" : "Start")}
+ Clear
+
+ );
}
-const wait = (time: number) =>
- new Promise((resolve) => setTimeout(resolve, time));
+const wait = (time: number) => new Promise((resolve) => setTimeout(resolve, time));
test("unmounts a component", async () => {
- vi.spyOn(console, "error").mockImplementation(() => {});
+ vi.spyOn(console, "error").mockImplementation(() => {});
- const { unmount, container } = render(() => [();
@@ -45,52 +39,49 @@ const mountedContainers = new Set][();
* - `result.unmount()` - unmounts the component, usually automatically called in cleanup
* - `result.`[queries] - testing library queries, see https://testing-library.com/docs/queries/about)
*/
-export function render(
- renderEffect: SuppleNodeEffect,
- options: Options = {}
-): Result {
- let { container, baseElement = container } = options;
- let transientContainer: HTMLElement | undefined = undefined;
-
- if (!baseElement) {
- // Default to document.body instead of documentElement to avoid output of potentially-large
- // head elements (such as JSS style blocks) in debug output.
- baseElement = document.body;
- }
-
- if (!container) {
- transientContainer = document.createElement("div");
- container = baseElement.appendChild(transientContainer);
- }
-
- const wrappedUi: SuppleNodeEffect =
- typeof options.wrapper === "function"
- ? () =>
- h(options.wrapper!, {
- children: [renderEffect],
- })
- : renderEffect;
-
- const dispose = core_render(wrappedUi, container);
-
- // We'll add it to the mounted components regardless of whether it's actually
- // added to document.body so the cleanup method works regardless of whether
- // they're passing us a custom container or not.
- mountedContainers.add({ container: transientContainer, dispose });
-
- const queryHelpers = getQueriesForElement(container, options.queries);
-
- return {
- asFragment: () => container?.innerHTML,
- container,
- baseElement,
- debug: (el = baseElement, maxLength?, options?) =>
- Array.isArray(el)
- ? el.forEach((e) => console.log(prettyDOM(e, maxLength, options)))
- : console.log(prettyDOM(el, maxLength, options)),
- unmount: dispose,
- ...queryHelpers,
- } as Result;
+export function render(renderEffect: SuppleNodeEffect, options: Options = {}): Result {
+ let { container, baseElement = container } = options;
+ let transientContainer: HTMLElement | undefined = undefined;
+
+ if (!baseElement) {
+ // Default to document.body instead of documentElement to avoid output of potentially-large
+ // head elements (such as JSS style blocks) in debug output.
+ baseElement = document.body;
+ }
+
+ if (!container) {
+ transientContainer = document.createElement("div");
+ container = baseElement.appendChild(transientContainer);
+ }
+
+ const wrappedUi: SuppleNodeEffect =
+ typeof options.wrapper === "function"
+ ? () =>
+ h(options.wrapper!, {
+ children: [renderEffect],
+ })
+ : renderEffect;
+
+ const dispose = core_render(wrappedUi, container);
+
+ // We'll add it to the mounted components regardless of whether it's actually
+ // added to document.body so the cleanup method works regardless of whether
+ // they're passing us a custom container or not.
+ mountedContainers.add({ container: transientContainer, dispose });
+
+ const queryHelpers = getQueriesForElement(container, options.queries);
+
+ return {
+ asFragment: () => container?.innerHTML,
+ container,
+ baseElement,
+ debug: (el = baseElement, maxLength?, options?) =>
+ Array.isArray(el)
+ ? el.forEach((e) => console.log(prettyDOM(e, maxLength, options)))
+ : console.log(prettyDOM(el, maxLength, options)),
+ unmount: dispose,
+ ...queryHelpers,
+ } as Result;
}
/**
@@ -113,92 +104,82 @@ export function render(
* - `result.cleanup()` - calls the cleanup function of the hook/primitive
*/
export function renderHook](
- hook: (...args: A) => R,
- options?: RenderHookOptions
+ hook: (...args: A) => R,
+ options?: RenderHookOptions ,
): RenderHookResult {
- const initialProps: A | [] = Array.isArray(options)
- ? options
- : options?.initialProps ?? [];
- const [dispose, owner, result] = createRoot((dispose) => {
- if (
- typeof options === "object" &&
- "wrapper" in options &&
- typeof options.wrapper === "function"
- ) {
- let result: ReturnType;
- createRenderEffect(
- options.wrapper({
- children: [
- () => {
- result = hook(...(initialProps as A));
- return null;
- },
- ],
- })
- );
- return [dispose, getOwner(), result!];
- }
- return [dispose, getOwner(), hook(...(initialProps as A))];
- });
-
- mountedContainers.add({ dispose });
-
- return { result, cleanup: dispose, owner };
+ const initialProps: A | [] = Array.isArray(options) ? options : (options?.initialProps ?? []);
+ const [dispose, owner, result] = createRoot((dispose) => {
+ if (typeof options === "object" && "wrapper" in options && typeof options.wrapper === "function") {
+ let result: ReturnType;
+ createRenderEffect(() =>
+ h(options.wrapper!, undefined, () => {
+ result = hook(...(initialProps as A));
+ return null;
+ }),
+ );
+ return [dispose, getOwner(), result!];
+ }
+ return [dispose, getOwner(), hook(...(initialProps as A))];
+ });
+
+ mountedContainers.add({ dispose });
+
+ return { result, cleanup: dispose, owner };
}
export function testEffect(
- fn: (done: (result: T) => void) => void,
- owner?: TrackingContext
+ fn: (done: (result: T) => void) => void,
+ owner?: TrackingContext,
): Promise {
- const context: {
- promise?: Promise;
- done?: (result: T) => void;
- fail?: (error: any) => void;
- } = {};
- context.promise = new Promise((resolve, reject) => {
- context.done = resolve;
- context.fail = reject;
- });
- createRoot((dispose) => {
- catchError(
- () => {
- const f = owner
- ? (done: (result: T) => void) => {
- const h = () => {
- fn(done);
- };
- runWithOwner(owner, h);
- }
- : fn;
-
- f((result) => {
- context.done?.(result);
- dispose();
- });
- },
- (err) => context.fail?.(err)
- );
- });
- return context.promise;
+ const context: {
+ promise?: Promise;
+ done?: (result: T) => void;
+ fail?: (error: any) => void;
+ } = {};
+ context.promise = new Promise((resolve, reject) => {
+ context.done = resolve;
+ context.fail = reject;
+ });
+ createRoot((dispose) => {
+ catchError(
+ () => {
+ const f = owner
+ ? (done: (result: T) => void) => {
+ const h = () => {
+ fn(done);
+ };
+ runWithOwner(owner, h);
+ }
+ : fn;
+
+ f((result) => {
+ context.done?.(result);
+ dispose();
+ });
+ },
+ (err) => context.fail?.(err),
+ );
+ });
+ return context.promise;
}
function cleanupAtContainer(ref: Ref) {
- const { container, dispose } = ref;
- try {
- dispose();
- } catch (e) {
- // consume & ignore error
- }
-
- if (container?.parentNode != null) {
- container.parentNode.removeChild(container);
- }
-
- mountedContainers.delete(ref);
+ const { container, dispose } = ref;
+ try {
+ dispose();
+ } catch (e) {
+ // consume & ignore error
+ }
+
+ if (container?.parentNode != null) {
+ container.parentNode.removeChild(container);
+ }
+
+ mountedContainers.delete(ref);
}
export function cleanup() {
- mountedContainers.forEach(cleanupAtContainer);
+ mountedContainers.forEach(cleanupAtContainer);
}
export * from "@testing-library/dom";
diff --git a/tsconfig.json b/tsconfig.json
index 0ae666d..65e62be 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,8 +11,7 @@
"jsx": "react-jsx",
"jsxImportSource": "supplejs",
"outDir": "./dist",
- "module": "ESNext",
- "types": ["@types/node"]
+ "module": "ESNext"
},
"include": ["src/index.ts", "src/types.ts"]
}
diff --git a/tsup.config.ts b/tsup.config.ts
index 0ce4269..a2d2f11 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -1,9 +1,9 @@
import { defineConfig } from "tsup";
export default defineConfig({
- entry: ["src/index.ts", "src/pure.ts"],
- format: ["esm", "cjs"],
- splitting: false,
- dts: true,
- clean: true,
+ entry: ["src/index.ts", "src/pure.ts"],
+ format: ["esm", "cjs"],
+ splitting: false,
+ dts: true,
+ clean: true,
});
diff --git a/vitest.config.ts b/vitest.config.ts
index dd601ad..ff40f6a 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,15 +1,15 @@
import { defineConfig } from "vitest/config";
export default defineConfig({
- test: {
- coverage: {
- provider: "v8",
- include: ["src/*.ts"],
+ test: {
+ coverage: {
+ provider: "v8",
+ include: ["src/*.ts"],
+ },
+ environment: "jsdom",
+ watch: false,
+ globals: true,
+ clearMocks: true,
+ include: ["src/__tests__/*.tsx"],
},
- environment: "jsdom",
- watch: false,
- globals: true,
- clearMocks: true,
- include: ["src/__tests__/*.tsx"],
- },
});