From b288ae5829ca843bc49de5db8b4143a826a107f1 Mon Sep 17 00:00:00 2001 From: snnsnn Date: Mon, 15 May 2023 16:18:22 +0300 Subject: [PATCH 1/2] Adds vite/client types to root tsconfig --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 7fea26045..51ec84dbd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,7 @@ "skipLibCheck": true, "jsx": "preserve", "jsxImportSource": "solid-js", - "types": ["node"] + "types": ["node", "vite/client"] }, "exclude": ["node_modules", "dist"] } From ca9b4b34d48c1c3623f5ccc1bda82f4cd1a0c195 Mon Sep 17 00:00:00 2001 From: snnsnn Date: Mon, 15 May 2023 16:19:12 +0300 Subject: [PATCH 2/2] Refactors presence package to FSM based implementation --- packages/presence/CHANGELOG.md | 0 packages/presence/README.md | 268 ++++++++++-------- packages/presence/dev/index.tsx | 134 ++++----- packages/presence/dev/style.module.css | 34 +++ packages/presence/package.json | 7 +- packages/presence/src/index.ts | 216 +++----------- packages/presence/test/createPresence.test.ts | 191 ------------- packages/presence/test/server.test.ts | 43 --- 8 files changed, 287 insertions(+), 606 deletions(-) create mode 100644 packages/presence/CHANGELOG.md create mode 100644 packages/presence/dev/style.module.css delete mode 100644 packages/presence/test/createPresence.test.ts delete mode 100644 packages/presence/test/server.test.ts diff --git a/packages/presence/CHANGELOG.md b/packages/presence/CHANGELOG.md new file mode 100644 index 000000000..e69de29bb diff --git a/packages/presence/README.md b/packages/presence/README.md index d29e9cd20..f029554fb 100644 --- a/packages/presence/README.md +++ b/packages/presence/README.md @@ -9,19 +9,6 @@ [![version](https://img.shields.io/npm/v/@solid-primitives/presence?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/presence) [![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-primitives#contribution-process) -A small SolidJS utility to animate the presence of an element. Inspired by & directly forked from [`use-presence`](https://www.npmjs.com/package/use-presence). - -### The problem - -There are two problems that you have to solve when animating the presence of an element: - -1. During enter animations, you have to render an initial state where the element is hidden and only after the latest state has propagated to the DOM, you can can animate the final state that the element should animate towards. -2. Exit animations are a bit tricky in SolidJS, since this typically means that a component unmounts. However when the component has already unmounted, you can't animate it anymore. A workaround is often to keep the element mounted, but that keeps unnecessary elements around and can hurt accessibility, as hidden interactive elements might still be focusable. - -### This solution - -This utility provides a lightweight solution where the animating element is only mounted the minimum of time, while making sure the animation is fully visible to the user. The rendering is left to the user to support all kinds of styling solutions. - ## Installation ```bash @@ -32,92 +19,43 @@ yarn add @solid-primitives/presence pnpm add @solid-primitives/presence ``` -## How to use it +A small, reactive utility to exert stronger control over an element's presence in the DOM in order to apply enter and exit transitions/animations. -### `createPresence` boolean example +## How to use it? -```tsx -const FirstExample = () => { - const [showStuff, setShowStuff] = createSignal(true); - const { isVisible, isMounted } = createPresence(showStuff, { - transitionDuration: 500, - }); +```typescript +const App = () => { + const [show, setShow] = createSignal(true); + const state = createPresence(show, { duration: 300, initialRun: true }); + const isMounted = createMemo(() => state() !== "exited"); return ( -
- +
+
+ +
- I am the stuff! -
- -
- ); -}; -``` - -### `createPresence` switching example + transition: "all .3s linear", -The first argument of `createPresence` is a signal accessor of arbitrary type. This allows you to use it with any kind of data, not just booleans. This is useful if you want to animate between different items. If you utilize the returned `mountedItem` property, you can get the data which should be currently mounted regardless of the animation state - -```tsx -const SecondExample = () => { - const items = ["foo", "bar", "baz", "qux"]; - const [activeItem, setActiveItem] = createSignal(items[0]); - const presence = createPresence(activeItem, { - transitionDuration: 500, - }); - - return ( -
- - {item => ( - - )} - - -
- {presence.mountedItem()} + Hello World!
@@ -125,50 +63,140 @@ const SecondExample = () => { }; ``` -### `createPresence` options API +Here is how to run css animations: + +```css +.hidden { + opacity: 0; +} + +.fadein { + animation: 0.5s linear fadein; +} + +.fadeout { + animation: 0.5s linear fadeout; +} + +@keyframes fadein { + 0% { + opacity: 0; + color: red; + } + 100% { + opacity: 1; + color: green; + } +} + +@keyframes fadeout { + 0% { + opacity: 1; + color: green; + } + 100% { + opacity: 0; + color: blue; + } +} +``` + +```typescript + +
+ Hello World! +
+ +``` + + + +## How it works? + +When an elements visibilty tied to a signal, the elements gets mounted and unmounted abruptly, not permitting to apply any css transitions. ```ts -function createPresence( - item: Accessor, - options: Options, -): PresenceResult; - -type Options = { - /** Duration in milliseconds used both for enter and exit transitions. */ - transitionDuration: MaybeAccessor; - /** Duration in milliseconds used for enter transitions (overrides `transitionDuration` if provided). */ - enterDuration: MaybeAccessor; - /** Duration in milliseconds used for exit transitions (overrides `transitionDuration` if provided). */ - exitDuration: MaybeAccessor; - /** Opt-in to animating the entering of an element if `isVisible` is `true` during the initial mount. */ - initialEnter?: boolean; -}; + +
Hello World!
+ +``` -type PresenceResult = { - /** Should the component be returned from render? */ - isMounted: Accessor; - /** The item that is currently mounted. */ - mountedItem: Accessor; - /** Should the component have its visible styles applied? */ - isVisible: Accessor; - /** Is the component either entering or exiting currently? */ - isAnimating: Accessor; - /** Is the component entering currently? */ - isEntering: Accessor; - /** Is the component exiting currently? */ - isExiting: Accessor; -}; +`createPresence` creates a derived signal, through which we transition from `false` to `true` in two steps, `entering` and `entered`, and again from `true` to `false` in two steps `exiting` and `exited`. + +```ts +const [show, setShow] = createSignal(true); + +const state = createPresence(show, { + duration: 500, + initialTransition: true, +}); +``` + +This allows us to apply enter and exit transitions on an element but first we need to hand over the control of the element's visibilty to the `state`: + +```ts +const isMounted = () => state() !== 'exited'; + +
Hello World!
+ ``` -## Demo +`createPresence` returns a derived signal with five states, three of them being resting states, `initial`, `entered`, `exited` and two of them being transitioning states, `entering` and `exiting`. -Demo can be seen [here](https://stackblitz.com/edit/presence-demo). +```ts +type State = "initial" | "entering" | "entered" | "exiting" | "exited"; +``` -## Changelog +Element is mounted at `initial` state. This state is short-lived since `entering` is flushed immediately via event loop however it can be used to set css properties. + +When `show` is set to `true`, component gets mounted at `initial` state which changes to `entering` almost immediately and remain there for the duration of `500ms`, then moves to `entered` state and remain there indefinitely. + +This allow us to transition from a property loaded with `entering` state to the one loaded with `entered` state: -See [CHANGELOG.md](./CHANGELOG.md) +```ts +
+ Hello World! +
+``` -## Related +Now, when `show` is set to `false`, the `div` elemement does not disappear immediately but waits for the duration of `exiting` state. In other words, we extended element's presence in the DOM for `500ms` which allows us to apply exit transitions: + +```ts +
+ Hello World! +
+``` + +## Changelog -- [`use-presence`](https://www.npmjs.com/package/use-presence) -- [`@solid-primitives/transition-group`](https://www.npmjs.com/package/@solid-primitives/transition-group) +See [CHANGELOG.md](./CHANGELOG.md) \ No newline at end of file diff --git a/packages/presence/dev/index.tsx b/packages/presence/dev/index.tsx index 352f5a626..47b66932c 100644 --- a/packages/presence/dev/index.tsx +++ b/packages/presence/dev/index.tsx @@ -1,100 +1,88 @@ -import { Component, For, Show, createSignal } from "solid-js"; +import { Component, Show, createMemo, createSignal, onCleanup, onMount } from "solid-js"; import { createPresence } from "../src"; -const App: Component = () => { - return ( - <> - - - - ); -}; +import style from './style.module.css'; -const FirstExample = () => { - const [showStuff, setShowStuff] = createSignal(true); - const { isVisible, isMounted } = createPresence(showStuff, { - transitionDuration: 500, - }); +const DemoOne = () => { + const [show, setShow] = createSignal(false); + const state = createPresence(show, { duration: 300, initialRun: true }); + const isMounted = createMemo(() => state() !== "exited"); return ( -
- +
+

Demo With Styles

- I am the stuff! + Hello World!
+
+ + {` `} + State: {state()} +
); }; -const SecondExample = () => { - const items = ["foo", "bar", "baz", "qux"]; - const [item, setItem] = createSignal<(typeof items)[number] | undefined>(items[0]); - const { isMounted, mountedItem, isEntering, isVisible, isExiting } = createPresence(item, { - transitionDuration: 500, - }); +const DemoTwo = () => { + const [show, setShow] = createSignal(false); + const state = createPresence(show, { duration: 500, initialRun: true }); + const isMounted = createMemo(() => state() !== "exited"); return ( -
- - {currItem => ( - - )} - +
+

Demo With Classes

- {mountedItem()} + Hello World!
+
+ +
+
{state()}
+
+ ); +}; + +const App: Component<{}> = props => { + return ( +
+ +
); }; diff --git a/packages/presence/dev/style.module.css b/packages/presence/dev/style.module.css new file mode 100644 index 000000000..6475a0d21 --- /dev/null +++ b/packages/presence/dev/style.module.css @@ -0,0 +1,34 @@ +.hidden { + color: red; + opacity: 0; +} + +.fadein { + animation: 0.5s linear fadein; +} + +.fadeout { + animation: 0.5s linear fadeout; +} + +@keyframes fadein { + 0% { + opacity: 0; + color: red; + } + 100% { + opacity: 1; + color: green; + } +} + +@keyframes fadeout { + 0% { + opacity: 1; + color: green; + } + 100% { + opacity: 0; + color: blue; + } +} diff --git a/packages/presence/package.json b/packages/presence/package.json index 6cd860b39..0afb00007 100644 --- a/packages/presence/package.json +++ b/packages/presence/package.json @@ -1,8 +1,8 @@ { "name": "@solid-primitives/presence", - "version": "0.0.1", - "description": "Utility to animate the presence of an element based on the existence of data or lack thereof.", - "author": "Ethan Standel ", + "version": "0.0.2", + "description": "A small utility to exert stronger control over an element's presence in the DOM in order to apply enter and exit transitions/animations.", + "author": "snnsnn (https://github.com/snnsnn)", "license": "MIT", "homepage": "https://github.com/solidjs-community/solid-primitives/tree/main/packages/presence#readme", "repository": { @@ -35,6 +35,7 @@ "require": "./dist/index.cjs" }, "keywords": [ + "css", "animation", "animate", "presence", diff --git a/packages/presence/src/index.ts b/packages/presence/src/index.ts index e720e1c4b..e4f365dfc 100644 --- a/packages/presence/src/index.ts +++ b/packages/presence/src/index.ts @@ -1,181 +1,45 @@ -/* - -MIT License (MIT) -Inspired by & directly forked from use-presence by Jan Amann @amannn -See https://github.com/amannn/react-hooks/tree/main/packages/use-presence - -*/ - -import { - createSignal, - createEffect, - onCleanup, - type Accessor, - createMemo, - untrack, -} from "solid-js"; -import { MaybeAccessor, asAccessor } from "@solid-primitives/utils"; - -export type SharedTransitionConfig = { - /** Duration in milliseconds used both for enter and exit transitions. */ - transitionDuration: MaybeAccessor; -}; - -export type SeparateTransitionConfig = { - /** Duration in milliseconds used for enter transitions (overrides `transitionDuration` if provided). */ - enterDuration: MaybeAccessor; - /** Duration in milliseconds used for exit transitions (overrides `transitionDuration` if provided). */ - exitDuration: MaybeAccessor; -}; - -export type Options = ( - | SharedTransitionConfig - | SeparateTransitionConfig - | (SharedTransitionConfig & SeparateTransitionConfig) -) & { - /** Opt-in to animating the entering of an element if `isVisible` is `true` during the initial mount. */ - initialEnter?: boolean; -}; - -/** - * Animates the appearance of its children. - * - * @internal - to be combined with `createPresence` in the future - */ -function createPresenceBase( - /** Indicates whether the component that the resulting values will be used upon should be visible to the user. */ - source: Accessor, - options: Options, -) { - const exitDuration = asAccessor( - "exitDuration" in options ? options.exitDuration : options.transitionDuration, - ); - const enterDuration = asAccessor( - "enterDuration" in options ? options.enterDuration : options.transitionDuration, - ); - - const initialSource = untrack(source); - const initialState = options.initialEnter ? false : initialSource; - const [isVisible, setIsVisible] = createSignal(initialState); - const [isMounted, setIsMounted] = createSignal(initialSource); - const [hasEntered, setHasEntered] = createSignal(initialState); - - const isExiting = createMemo(() => isMounted() && !source()); - const isEntering = createMemo(() => source() && !hasEntered()); - const isAnimating = createMemo(() => isEntering() || isExiting()); - - createEffect(() => { - if (source()) { - // `animateVisible` needs to be set to `true` in a second step, as - // when both flags would be flipped at the same time, there would - // be no transition. See the second effect below. - setIsMounted(true); - } else { - setHasEntered(false); - setIsVisible(false); - - const timeoutId = setTimeout(() => { - setIsMounted(false); - }, exitDuration()); - - onCleanup(() => clearTimeout(timeoutId)); - } - }); - - createEffect(() => { - if (source() && isMounted() && !isVisible()) { - document.body.offsetHeight; // force reflow - - const animationFrameId = requestAnimationFrame(() => { - setIsVisible(true); - }); - - onCleanup(() => cancelAnimationFrame(animationFrameId)); - } - }); - - createEffect(() => { - if (isVisible() && !hasEntered()) { - const timeoutId = setTimeout(() => { - setHasEntered(true); - }, enterDuration()); - - onCleanup(() => clearTimeout(timeoutId)); - } - }); - - return { - isMounted, - isVisible, - isAnimating, - isEntering, - isExiting, +import { Accessor, createComputed, createSignal, on, onCleanup, untrack } from "solid-js"; + +type State = "initial" | "entering" | "entered" | "exiting" | "exited"; + +export function createPresence( + show: Accessor, + options: { + initialRun?: boolean; + duration: number | { enter: number; exit: number }; + }, +): Accessor { + const { initialRun = true, duration } = options; + const enter = typeof duration === "number" ? duration : duration.enter; + const exit = typeof duration === "number" ? duration : duration.exit; + const initialVal = untrack(show) ? "entered" : "exited"; + const [state, setState] = createSignal(initialVal); + + let timeoutId: NodeJS.Timeout; + const handleTransition = () => { + clearTimeout(timeoutId); + const visible = show(); + // If component is visible, start with `initial`, + // then flush next state immediately to kick start transitions. + setState(visible ? "initial" : "exiting"); + setTimeout(() => state() === "initial" && setState("entering"), 0); + timeoutId = setTimeout( + () => setState(state() === "entering" ? "entered" : "exited"), + visible ? enter : exit, + ); }; -} -const itemShouldBeMounted = (item: TItem) => item !== false && item != null; + // Replay state transitions if the component + // is visible and initialRun is set to true. + if (initialRun && initialVal === "entered") { + handleTransition(); + } -/** - * The result of {@link createPresence}. - */ -export type PresenceResult = { - /** Should the component be returned from render? */ - isMounted: Accessor; - /** The item that is currently mounted. */ - mountedItem: Accessor; - /** Should the component have its visible styles applied? */ - isVisible: Accessor; - /** Is the component either entering or exiting currently? */ - isAnimating: Accessor; - /** Is the component entering currently? */ - isEntering: Accessor; - /** Is the component exiting currently? */ - isExiting: Accessor; -}; + // Trigger state transition when `show` signal updates. + createComputed(on(show, handleTransition, { defer: true })); -/** - * Utility to animate the presence of an element based on the existence of data or lack thereof. - * - * @param item a reactive value driving the transition - * @param options options to configure the transition, see {@link Options} - * @returns an object with reactive accessors representing the state of the transition. See {@link PresenceResult}. - * - * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/presence#createPresence - * - * @example - * ```ts - * const items = ["foo", "bar", "baz", "qux"]; - * const [activeItem, setActiveItem] = createSignal(items[0]); - * const presence = createPresence(activeItem); - * ``` - */ -export function createPresence( - item: Accessor, - options: Options, -): PresenceResult { - const initial = untrack(item); - const [mountedItem, setMountedItem] = createSignal(initial); - const [shouldBeMounted, setShouldBeMounted] = createSignal(itemShouldBeMounted(initial)); - const { isMounted, ...rest } = createPresenceBase(shouldBeMounted, options); + // Clear any pending transition. + onCleanup(() => clearTimeout(timeoutId)); - createEffect(() => { - if (mountedItem() !== item()) { - if (isMounted()) { - setShouldBeMounted(false); - } else if (itemShouldBeMounted(item())) { - setMountedItem(() => item()); - setShouldBeMounted(true); - } - } else if (!itemShouldBeMounted(item())) { - setShouldBeMounted(false); - } else if (itemShouldBeMounted(item())) { - setShouldBeMounted(true); - } - }); - - return { - ...rest, - isMounted: () => isMounted() && mountedItem() !== undefined, - mountedItem, - }; -} + return state; +} \ No newline at end of file diff --git a/packages/presence/test/createPresence.test.ts b/packages/presence/test/createPresence.test.ts deleted file mode 100644 index 5dd1dbe1a..000000000 --- a/packages/presence/test/createPresence.test.ts +++ /dev/null @@ -1,191 +0,0 @@ -import { describe, it, expect } from "vitest"; -import { createRoot, createSignal } from "solid-js"; -import { createPresence } from "../src"; - -const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); -// The state transitions often take an extra ~20ms to changeover -// because the transition currently has an awaited animation frame -// which Vitest seems to just assume is (1 / 60Hz) seconds -// So 50 is added onto wait times for safety -const transitionTimeOffset = 50; - -describe("createPresence", () => { - it("initially marks the element's mounted & visibility status based on the initial state", () => - createRoot(dispose => { - const [shouldRender] = createSignal(true); - const first = createPresence(shouldRender, { - transitionDuration: 50, - }); - expect(first.isMounted()).toBe(true); - expect(first.isVisible()).toBe(true); - - const [shouldNotRender] = createSignal(false); - const second = createPresence(shouldNotRender, { - transitionDuration: 50, - }); - expect(second.isMounted()).toBe(false); - expect(second.isVisible()).toBe(false); - dispose(); - })); - - it("initially is never animating by default", () => - createRoot(dispose => { - const [shouldRender] = createSignal(true); - const first = createPresence(shouldRender, { - transitionDuration: 50, - }); - expect(first.isAnimating()).toBe(false); - - const [shouldNotRender] = createSignal(false); - const second = createPresence(shouldNotRender, { - transitionDuration: 50, - }); - expect(second.isAnimating()).toBe(false); - dispose(); - })); - - it("is animating if the initial render state is true and the initialEnter option is provided as true", () => - createRoot(dispose => { - const [shouldRender] = createSignal(true); - const first = createPresence(shouldRender, { - transitionDuration: 50, - initialEnter: true, - }); - expect(first.isAnimating()).toBe(true); - - const [shouldNotRender] = createSignal(false); - const second = createPresence(shouldNotRender, { - transitionDuration: 50, - initialEnter: true, - }); - // not animating because it doesn't exist initially - expect(second.isAnimating()).toBe(false); - dispose(); - })); - - it("is in a mounted & animating state for the transitionDuration and then it is only in a mounted state", () => - createRoot(async dispose => { - const [shouldRender, setShouldRender] = createSignal(false); - const transitionDuration = 50; - const { isMounted, isAnimating } = createPresence(shouldRender, { - transitionDuration, - }); - expect(isMounted()).toBe(false); - expect(isAnimating()).toBe(false); - setShouldRender(true); - await sleep(0); - expect(isMounted()).toBe(true); - expect(isAnimating()).toBe(true); - await sleep(transitionDuration + transitionTimeOffset); - expect(isMounted()).toBe(true); - expect(isAnimating()).toBe(false); - setShouldRender(false); - await sleep(0); - expect(isMounted()).toBe(true); - expect(isAnimating()).toBe(true); - await sleep(transitionDuration + transitionTimeOffset); - expect(isMounted()).toBe(false); - expect(isAnimating()).toBe(false); - dispose(); - })); - - it("swaps between a mounted & unmounted state based on unique enter & exit transition states", () => - createRoot(async dispose => { - const [shouldRender, setShouldRender] = createSignal(false); - // using longer durations to ensure that the transitionTimeOffset - // is doesn't play into the test timings - const enterDuration = 300; - const exitDuration = 150; - const { isMounted, isAnimating } = createPresence(shouldRender, { - enterDuration, - exitDuration, - }); - expect(isMounted()).toBe(false); - expect(isAnimating()).toBe(false); - setShouldRender(true); - await sleep(0); - expect(isMounted()).toBe(true); - expect(isAnimating()).toBe(true); - // ensure that we're not done animating after the shorter time - await sleep(exitDuration + transitionTimeOffset); - expect(isAnimating()).toBe(true); - await sleep(exitDuration + transitionTimeOffset); - expect(isMounted()).toBe(true); - expect(isAnimating()).toBe(false); - setShouldRender(false); - await sleep(0); - expect(isMounted()).toBe(true); - expect(isAnimating()).toBe(true); - await sleep(exitDuration + transitionTimeOffset); - expect(isMounted()).toBe(false); - expect(isAnimating()).toBe(false); - dispose(); - })); - - // data switching tests - - type Data = "foo" | "bar" | "baz" | undefined; - - it("initially identifies as not mounted if the initial data is undefined", () => - createRoot(dispose => { - const [data] = createSignal(); - const { mountedItem, isMounted } = createPresence(data, { - transitionDuration: 50, - }); - expect(mountedItem()).toBe(undefined); - expect(isMounted()).toBe(false); - dispose(); - })); - - it("initially identifies as mounted if the initial data is defined", () => - createRoot(dispose => { - const [data] = createSignal("foo"); - const { mountedItem, isMounted } = createPresence(data, { - transitionDuration: 50, - }); - expect(mountedItem()).toBe("foo"); - expect(isMounted()).toBe(true); - dispose(); - })); - - it("initially animates if the initial data is defined", () => - createRoot(async dispose => { - const [data] = createSignal("foo"); - const transitionDuration = 50; - const { mountedItem, isAnimating } = createPresence(data, { - transitionDuration, - initialEnter: true, - }); - expect(mountedItem()).toBe("foo"); - expect(isAnimating()).toBe(true); - await sleep(transitionDuration + transitionTimeOffset); - expect(isAnimating()).toBe(false); - dispose(); - })); - - it("initially exchanges the data over the transition time", () => - createRoot(async dispose => { - const [data, setData] = createSignal("foo"); - const transitionDuration = 150; - const { mountedItem, isAnimating, isEntering, isExiting } = createPresence(data, { - transitionDuration, - }); - expect(isAnimating()).toBe(false); - setData("bar"); - await sleep(0); - expect(isAnimating()).toBe(true); - expect(mountedItem()).toBe("foo"); - expect(isExiting()).toBe(true); - expect(isEntering()).toBe(false); - await sleep(transitionDuration + transitionTimeOffset); - expect(isAnimating()).toBe(true); - expect(mountedItem()).toBe("bar"); - expect(isEntering()).toBe(true); - expect(isExiting()).toBe(false); - await sleep(transitionDuration + transitionTimeOffset); - expect(isAnimating()).toBe(false); - expect(isEntering()).toBe(false); - expect(isExiting()).toBe(false); - dispose(); - })); -}); diff --git a/packages/presence/test/server.test.ts b/packages/presence/test/server.test.ts deleted file mode 100644 index 53458ebfe..000000000 --- a/packages/presence/test/server.test.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { describe, test, expect } from "vitest"; -import { createPresence } from "../src"; -import { createSignal } from "solid-js"; - -describe("on server", () => { - test("createPresence initializes requested state as expected", () => { - const [shouldRender] = createSignal(true); - const first = createPresence(shouldRender, { transitionDuration: 50, initialEnter: true }); - expect(first.isAnimating()).toBe(true); - expect(first.isEntering()).toBe(true); - expect(first.isExiting()).toBe(false); - expect(first.isMounted()).toBe(true); - expect(first.isVisible()).toBe(false); - - const [shouldNotRender] = createSignal(false); - const second = createPresence(shouldNotRender, { transitionDuration: 50 }); - expect(second.isAnimating()).toBe(false); - expect(second.isEntering()).toBe(false); - expect(second.isExiting()).toBe(false); - expect(second.isMounted()).toBe(false); - expect(second.isVisible()).toBe(false); - }); - - test("createPresence initializes requested switching state as expected", () => { - const [data] = createSignal("foo"); - const first = createPresence(data, { transitionDuration: 50, initialEnter: true }); - expect(first.mountedItem()).toBe("foo"); - expect(first.isAnimating()).toBe(true); - expect(first.isEntering()).toBe(true); - expect(first.isExiting()).toBe(false); - expect(first.isMounted()).toBe(true); - expect(first.isVisible()).toBe(false); - - const [noData] = createSignal(); - const second = createPresence(noData, { transitionDuration: 50 }); - expect(second.mountedItem()).toBe(undefined); - expect(second.isAnimating()).toBe(false); - expect(second.isEntering()).toBe(false); - expect(second.isExiting()).toBe(false); - expect(second.isMounted()).toBe(false); - expect(second.isVisible()).toBe(false); - }); -});