@solid-primitives/page-utilities 3.0.0-next.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Solid Primitives Working Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,115 @@
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Page%20Utilities" alt="Solid Primitives Page Utilities">
+</p>
+
+# @solid-primitives/page-utilities
+
+[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/page-utilities?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/page-utilities)
+[![size](https://img.shields.io/npm/v/@solid-primitives/page-utilities?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/page-utilities)
+[![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-3.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
+[![tested with vitest](https://img.shields.io/badge/tested_with-vitest-6E9F18?style=for-the-badge&logo=vitest)](https://vitest.dev)
+
+Primitives for tracking page visibility and intercepting navigation away from the page.
+
+- [`createPageVisibility`](#createpagevisibility) - Reactive signal tracking whether the page is currently visible
+- [`usePageVisibility`](#usepagevisibility) - Shared [singleton root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) version of `createPageVisibility`
+- [`makePageLeave`](#makepageleave) - Intercepts `beforeunload` to prevent navigation; returns a manual cleanup function
+- [`createPageLeaveBlocker`](#createpageleaveblocker) - Reactive version of `makePageLeave`; accepts a signal to toggle prevention
+
+## Installation
+
+```bash
+npm install @solid-primitives/page-utilities
+# or
+yarn add @solid-primitives/page-utilities
+# or
+pnpm add @solid-primitives/page-utilities
+```
+
+## `createPageVisibility`
+
+Returns a reactive boolean signal reflecting the [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) — `true` when the page is visible, `false` when hidden or in a prerender state. On the server it always returns `true`.
+
+```ts
+import { createPageVisibility } from "@solid-primitives/page-utilities";
+
+const visible = createPageVisibility();
+
+createEffect(() => {
+  console.log(visible()); // => boolean
+});
+```
+
+### Definition
+
+```ts
+function createPageVisibility(): Accessor<boolean>;
+```
+
+## `usePageVisibility`
+
+A [singleton root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) version of `createPageVisibility`. The underlying event listener and signal are shared across all callers, making it more efficient when used in multiple places simultaneously.
+
+```ts
+import { usePageVisibility } from "@solid-primitives/page-utilities";
+
+const visible = usePageVisibility();
+
+createEffect(() => {
+  console.log(visible()); // => boolean
+});
+```
+
+### Definition
+
+```ts
+const usePageVisibility: () => Accessor<boolean>;
+```
+
+## `makePageLeave`
+
+Intercepts the browser's [`beforeunload`](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event) event to show a confirmation dialog when the user attempts to close the tab, refresh, or navigate away. Returns a cleanup function to remove the listener.
+
+```ts
+import { makePageLeave } from "@solid-primitives/page-utilities";
+
+const cleanup = makePageLeave();
+
+// remove the listener when done
+cleanup();
+```
+
+### Definition
+
+```ts
+function makePageLeave(): VoidFunction;
+```
+
+## `createPageLeaveBlocker`
+
+Reactive version of `makePageLeave`. Accepts an optional `enabled` parameter — a static boolean or a reactive signal — to toggle prevention on and off. Defaults to `true`. Automatically removes the listener when the reactive owner is disposed. No-ops on the server.
+
+```ts
+import { createPageLeaveBlocker } from "@solid-primitives/page-utilities";
+
+// Always block navigation
+createPageLeaveBlocker();
+```
+
+A common pattern is gating on unsaved state:
+
+```ts
+const [isDirty, setIsDirty] = createSignal(false);
+
+createPageLeaveBlocker(isDirty);
+```
+
+### Definition
+
+```ts
+function createPageLeaveBlocker(enabled?: MaybeAccessor<boolean>): void;
+```
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md)

package/dist/index.d.ts

@@ -0,0 +1,63 @@
+import { type Accessor } from "solid-js";
+import { type MaybeAccessor } from "@solid-primitives/utils";
+/**
+ * Creates a signal with a boolean value identifying the page visibility state.
+ *
+ * @example
+ * ```ts
+ * const visible = createPageVisibility();
+ *
+ * createEffect(() => {
+ *    visible() // => boolean
+ * })
+ * ```
+ */
+export declare const createPageVisibility: () => Accessor<boolean>;
+/**
+ * Returns a signal with a boolean value identifying the page visibility state.
+ *
+ * This is a [singleton root primitive](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) except if during hydration.
+ *
+ * @example
+ * ```ts
+ * const visible = usePageVisibility();
+ *
+ * createEffect(() => {
+ *    visible() // => boolean
+ * })
+ * ```
+ */
+export declare const usePageVisibility: () => Accessor<boolean>;
+/**
+ * Intercepts the browser's `beforeunload` event to show a confirmation dialog
+ * when the user attempts to close the tab, navigate away, or refresh.
+ * Returns a cleanup function to remove the listener.
+ *
+ * @example
+ * ```ts
+ * const cleanup = makePageLeave();
+ * // later:
+ * cleanup();
+ * ```
+ */
+export declare function makePageLeave(): VoidFunction;
+/**
+ * Intercepts the browser's `beforeunload` event to show a confirmation dialog
+ * when the user attempts to close the tab, navigate away, or refresh.
+ *
+ * Pass a reactive signal as {@link enabled} to toggle prevention on and off.
+ * Automatically removes the listener when the reactive scope is disposed.
+ *
+ * @param enabled - whether to block navigation. Defaults to `true`. Accepts a boolean or a reactive accessor.
+ *
+ * @example
+ * ```ts
+ * // Always block navigation
+ * createPageLeaveBlocker();
+ *
+ * // Only block when there are unsaved changes
+ * const [isDirty, setIsDirty] = createSignal(false);
+ * createPageLeaveBlocker(isDirty);
+ * ```
+ */
+export declare function createPageLeaveBlocker(enabled?: MaybeAccessor<boolean>): void;

package/dist/index.js

@@ -0,0 +1,95 @@
+import { createEffect, onCleanup } from "solid-js";
+import { isServer } from "@solidjs/web";
+import { createHydratableSingletonRoot } from "@solid-primitives/rootless";
+import { createHydratableSignal, INTERNAL_OPTIONS, trueFn } from "@solid-primitives/utils";
+import { makeEventListener } from "@solid-primitives/event-listener";
+/**
+ * Creates a signal with a boolean value identifying the page visibility state.
+ *
+ * @example
+ * ```ts
+ * const visible = createPageVisibility();
+ *
+ * createEffect(() => {
+ *    visible() // => boolean
+ * })
+ * ```
+ */
+export const createPageVisibility = () => {
+    if (isServer) {
+        return trueFn;
+    }
+    const checkVisibility = () => document.visibilityState === "visible";
+    const [isVisible, setVisible] = createHydratableSignal(true, checkVisibility, INTERNAL_OPTIONS);
+    makeEventListener(document, "visibilitychange", () => setVisible(checkVisibility));
+    return isVisible;
+};
+/**
+ * Returns a signal with a boolean value identifying the page visibility state.
+ *
+ * This is a [singleton root primitive](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) except if during hydration.
+ *
+ * @example
+ * ```ts
+ * const visible = usePageVisibility();
+ *
+ * createEffect(() => {
+ *    visible() // => boolean
+ * })
+ * ```
+ */
+export const usePageVisibility = 
+/*#__PURE__*/ createHydratableSingletonRoot(createPageVisibility);
+/**
+ * Intercepts the browser's `beforeunload` event to show a confirmation dialog
+ * when the user attempts to close the tab, navigate away, or refresh.
+ * Returns a cleanup function to remove the listener.
+ *
+ * @example
+ * ```ts
+ * const cleanup = makePageLeave();
+ * // later:
+ * cleanup();
+ * ```
+ */
+export function makePageLeave() {
+    const handler = (e) => {
+        e.preventDefault();
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+}
+/**
+ * Intercepts the browser's `beforeunload` event to show a confirmation dialog
+ * when the user attempts to close the tab, navigate away, or refresh.
+ *
+ * Pass a reactive signal as {@link enabled} to toggle prevention on and off.
+ * Automatically removes the listener when the reactive scope is disposed.
+ *
+ * @param enabled - whether to block navigation. Defaults to `true`. Accepts a boolean or a reactive accessor.
+ *
+ * @example
+ * ```ts
+ * // Always block navigation
+ * createPageLeaveBlocker();
+ *
+ * // Only block when there are unsaved changes
+ * const [isDirty, setIsDirty] = createSignal(false);
+ * createPageLeaveBlocker(isDirty);
+ * ```
+ */
+export function createPageLeaveBlocker(enabled = true) {
+    if (isServer)
+        return;
+    if (typeof enabled !== "function") {
+        if (!enabled)
+            return;
+        onCleanup(makePageLeave());
+        return;
+    }
+    createEffect(enabled, isEnabled => {
+        if (!isEnabled)
+            return;
+        return makePageLeave();
+    });
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@solid-primitives/page-utilities",
+  "version": "3.0.0-next.0",
+  "description": "Primitives for page visibility and navigation blocking",
+  "author": "David Di Biase <dave@solidjs.com>",
+  "contributors": [
+    "Damian Tarnawski <gthetarnav@gmail.com>",
+    "Tom Pichaud <dev.tompichaud@icloud.com>"
+  ],
+  "license": "MIT",
+  "homepage": "https://primitives.solidjs.community/package/page-utilities",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/solidjs-community/solid-primitives.git"
+  },
+  "primitive": {
+    "name": "page-utilities",
+    "stage": 3,
+    "list": [
+      "createPageVisibility",
+      "usePageVisibility",
+      "makePageLeave",
+      "createPageLeaveBlocker"
+    ],
+    "category": "Display & Media",
+    "gzip": 747
+  },
+  "files": [
+    "dist"
+  ],
+  "private": false,
+  "sideEffects": false,
+  "type": "module",
+  "module": "./dist/index.js",
+  "browser": {},
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "import": {
+      "@solid-primitives/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "keywords": [
+    "page",
+    "visibility",
+    "navigation",
+    "solid",
+    "primitives"
+  ],
+  "dependencies": {
+    "@solid-primitives/event-listener": "^3.0.0-next.0",
+    "@solid-primitives/utils": "^7.0.0-next.0",
+    "@solid-primitives/rootless": "^2.0.0-next.0"
+  },
+  "peerDependencies": {
+    "@solidjs/web": "^2.0.0-beta.15",
+    "solid-js": "^2.0.0-beta.15"
+  },
+  "typesVersions": {},
+  "devDependencies": {
+    "@solidjs/web": "2.0.0-beta.15",
+    "solid-js": "2.0.0-beta.15"
+  },
+  "scripts": {
+    "dev": "node --import=@nothing-but/node-resolve-ts --experimental-transform-types ../../scripts/dev.ts",
+    "build": "node --import=@nothing-but/node-resolve-ts --experimental-transform-types ../../scripts/build.ts",
+    "vitest": "vitest -c ../../configs/vitest.config.ts",
+    "test": "pnpm run vitest",
+    "test:ssr": "pnpm run vitest --mode ssr",
+    "test:watch": "watchlist src test -- npm test"
+  }
+}