upgrade: page-utilities packages migration and adaptation upgrade for Solid 2.0

.changeset/page-utilities-solid2-migration.md

@@ -0,0 +1,11 @@
+---
+"@solid-primitives/page-utilities": major
+---
+
+Migrate to Solid.js v2.0 (beta.13)
+
+## Breaking Changes
+
+**Peer dependencies**: `solid-js@^2.0.0-beta.13` and `@solidjs/web@^2.0.0-beta.13` are now required.
+
+- `isServer` is now imported from `@solidjs/web` (was `solid-js/web`)

.changeset/pre.json

@@ -50,7 +50,7 @@
     "@solid-primitives/mouse": "2.1.6",
     "@solid-primitives/mutable": "1.1.1",
     "@solid-primitives/mutation-observer": "1.2.3",
-    "@solid-primitives/page-visibility": "2.1.5",
+    "@solid-primitives/page-utilities": "2.1.5",
     "@solid-primitives/pagination": "0.5.1",
     "@solid-primitives/permission": "1.3.2",
     "@solid-primitives/platform": "0.2.1",

packages/page-visibility/CHANGELOG.md → packages/page-utilities/CHANGELOG.md

@@ -1,4 +1,4 @@
-# @solid-primitives/page-visibility
+# @solid-primitives/page-utilities
 
 ## 2.1.5
 

packages/page-utilities/README.md

@@ -0,0 +1,114 @@
+<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)
+
+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)

packages/page-visibility/package.json → packages/page-utilities/package.json

@@ -1,23 +1,26 @@
 {
-  "name": "@solid-primitives/page-visibility",
+  "name": "@solid-primitives/page-utilities",
   "version": "2.1.5",
-  "description": "Primitive to track page visibility",
+  "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-visibility",
+  "homepage": "https://primitives.solidjs.community/package/page-utilities",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/solidjs-community/solid-primitives.git"
   },
   "primitive": {
-    "name": "page-visibility",
+    "name": "page-utilities",
     "stage": 3,
     "list": [
-      "createPageVisibility"
+      "createPageVisibility",
+      "usePageVisibility",
+      "makePageLeave",
+      "createPageLeaveBlocker"
     ],
     "category": "Display & Media"
   },
@@ -48,6 +51,7 @@
   "keywords": [
     "page",
     "visibility",
+    "navigation",
     "solid",
     "primitives"
   ],
@@ -57,10 +61,12 @@
     "@solid-primitives/utils": "workspace:^"
   },
   "peerDependencies": {
-    "solid-js": "^1.6.12"
+    "@solidjs/web": "^2.0.0-beta.13",
+    "solid-js": "^2.0.0-beta.13"
   },
   "typesVersions": {},
   "devDependencies": {
-    "solid-js": "^1.9.7"
+    "@solidjs/web": "2.0.0-beta.13",
+    "solid-js": "2.0.0-beta.13"
   }
 }

packages/page-utilities/src/index.ts

@@ -0,0 +1,98 @@
+import { type Accessor, createEffect, onCleanup } from "solid-js";
+import { isServer } from "@solidjs/web";
+import { createHydratableSingletonRoot } from "@solid-primitives/rootless";
+import { createHydratableSignal, INTERNAL_OPTIONS, trueFn, type MaybeAccessor } 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 = (): Accessor<boolean> => {
+  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: () => Accessor<boolean> =
+  /*#__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(): VoidFunction {
+  const handler = (e: BeforeUnloadEvent) => {
+    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: MaybeAccessor<boolean> = true): void {
+  if (isServer) return;
+
+  if (typeof enabled !== "function") {
+    if (!enabled) return;
+    onCleanup(makePageLeave());
+    return;
+  }
+
+  createEffect(enabled, isEnabled => {
+    if (!isEnabled) return;
+    return makePageLeave();
+  });
+}