new: notification packages upgrade for Solid 2.0

.changeset/notification-initial.md

@@ -0,0 +1,14 @@
+---
+"@solid-primitives/notification": minor
+---
+
+Add `@solid-primitives/notification` package (Stage 0)
+
+New primitives for the browser [Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API).
+
+- **`isNotificationSupported()`** — SSR-safe runtime check for Notifications API availability.
+- **`makeNotification(title, options?)`** — Non-reactive helper returning `[show, close]`. `show()` creates and returns a `Notification` instance (or `null` when permission is not `"granted"`); calling it again replaces the previous notification. No Solid lifecycle dependency.
+- **`createNotification(title, options?)`** — Reactive primitive returning `{ show, close, notification, supported }`. Accepts reactive accessors for `title` and `options` — their current values are read at `show()` time. The `notification` accessor tracks the live instance, updating to `null` when it is dismissed by the OS or closed programmatically. Cleans up automatically on owner disposal.
+- **`createNotificationPermission()`** — Reactive permission manager returning `{ permission, requestPermission }`. The `permission` accessor reflects `Notification.permission` and updates after each `requestPermission()` call. Degrades gracefully to `"denied"` on the server.
+
+Peer dependencies: `solid-js@^2.0.0-beta.10` and `@solidjs/web@^2.0.0-beta.10`.

.changeset/sweet-olives-talk.md

@@ -0,0 +1,5 @@
+---
+"@solid-primitives/permission": major
+---
+
+updated to Solid-2.0

packages/notification/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.

packages/notification/README.md

@@ -0,0 +1,186 @@
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=notification" alt="Solid Primitives notification">
+</p>
+
+# @solid-primitives/notification
+
+[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/notification?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/notification)
+[![version](https://img.shields.io/npm/v/@solid-primitives/notification?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/notification)
+[![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)
+
+Primitives for the browser [Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API) with reactive permission management.
+
+- **`isNotificationSupported`** — SSR-safe check for Notifications API availability.
+- **`makeNotification`** — Non-reactive helper returning `[show, close]`. No Solid lifecycle dependency.
+- **`createNotification`** — Reactive primitive that tracks the live `Notification` instance and cleans up on owner disposal.
+- **`createNotificationPermission`** — Reactive permission manager that exposes a live permission signal and a `requestPermission` function.
+
+## Installation
+
+```bash
+npm install @solid-primitives/notification
+# or
+yarn add @solid-primitives/notification
+# or
+pnpm add @solid-primitives/notification
+```
+
+## How to use it
+
+### `isNotificationSupported`
+
+Returns `true` when the Notifications API is available. Always `false` on the server.
+
+```ts
+import { isNotificationSupported } from "@solid-primitives/notification";
+
+if (isNotificationSupported()) {
+  console.log("notifications available");
+}
+```
+
+---
+
+### `makeNotification`
+
+Non-reactive helper with no Solid lifecycle dependency. Both returned functions are no-ops when the API is unavailable.
+
+`show()` returns `null` when `Notification.permission` is not `"granted"` — use `createNotificationPermission` to request permission first.
+
+Because `makeNotification` has no reactive owner, **cleanup is the caller's responsibility**. Inside a reactive scope, register `close` with `onCleanup`:
+
+```ts
+import { onCleanup } from "solid-js";
+import { makeNotification } from "@solid-primitives/notification";
+
+const [show, close] = makeNotification("New message", { body: "Hello!" });
+
+// Register cleanup with the current reactive owner
+onCleanup(close);
+
+button.addEventListener("click", () => show());
+
+// Or close programmatically at any time
+close();
+```
+
+Outside a reactive scope (e.g. in plain event handlers), call `close()` directly when done.
+
+---
+
+### `createNotification`
+
+Reactive primitive tied to the current reactive owner.
+
+- `title` and `options` can be plain values **or** reactive accessors — their current values are read each time `show()` is called.
+- `notification` is a reactive `Accessor<Notification | null>` that reflects the live instance, updating to `null` when the notification is dismissed (either programmatically or by the OS).
+- The notification is automatically closed when the reactive owner is disposed.
+- Pass an optional `handlers` object to respond to notification events.
+
+```ts
+import { createNotification } from "@solid-primitives/notification";
+
+const { show, close, notification, supported } = createNotification(
+  () => `You have ${unread()} messages`,
+  { icon: "/icon.png" },
+  {
+    onClick: n => { window.focus(); },
+    onClose: n => { console.log("dismissed"); },
+    onError: n => { console.error("notification failed"); },
+  },
+);
+
+// Show a notification (reads reactive title at call time)
+show();
+
+// React to visibility changes
+createEffect(() => {
+  if (notification()) console.log("notification visible");
+  else console.log("notification gone");
+});
+
+// Close programmatically
+close();
+```
+
+---
+
+### `createNotificationPermission`
+
+Reactive permission manager built on the browser [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API).
+
+The `permission` accessor reflects the **live** permission state and updates automatically whenever it changes — including after `requestPermission()` resolves or the user edits their browser settings directly.
+
+Permission values follow Permissions API vocabulary: `"granted"`, `"denied"`, `"prompt"` (not yet asked), or `"unknown"` while the initial async query is still resolving. Note that the Notifications API uses `"default"` for the same concept that the Permissions API calls `"prompt"`.
+
+On the server or when the API is unavailable, `permission` always returns `"unknown"` and `requestPermission` resolves immediately to `"denied"`.
+
+```ts
+import { createNotificationPermission } from "@solid-primitives/notification";
+
+const { permission, requestPermission } = createNotificationPermission();
+
+// Gate UI on permission state
+<Show when={permission() !== "granted"}>
+  <button onClick={requestPermission}>Enable notifications</button>
+</Show>
+
+// Await the result (returns the raw NotificationPermission value)
+const result = await requestPermission();
+// result: "granted" | "denied" | "default"
+```
+
+---
+
+### Full example
+
+```tsx
+import {
+  createNotification,
+  createNotificationPermission,
+  isNotificationSupported,
+} from "@solid-primitives/notification";
+
+const NotificationDemo: Component = () => {
+  const { permission, requestPermission } = createNotificationPermission();
+  const { show, close, notification } = createNotification(
+    "Solid Primitives",
+    { body: "Hello from SolidJS!" },
+    { onClick: () => window.focus() },
+  );
+
+  return (
+    <Show when={isNotificationSupported()} fallback={<p>Not supported</p>}>
+      <p>Permission: {permission()}</p>
+      <p>Active: {notification() ? "yes" : "no"}</p>
+      <Show when={permission() !== "granted"}>
+        <button onClick={requestPermission}>Request permission</button>
+      </Show>
+      <button onClick={() => show()}>Show</button>
+      <button onClick={close}>Close</button>
+    </Show>
+  );
+};
+```
+
+## Types
+
+```ts
+/** Event handler callbacks for `createNotification`. */
+type NotificationEventHandlers = {
+  /** Called when the user clicks the notification. */
+  onClick?: (notification: Notification) => void;
+  /** Called when the notification is dismissed, whether by the user, the OS, or `close()`. */
+  onClose?: (notification: Notification) => void;
+  /** Called when the notification fails to display. */
+  onError?: (notification: Notification) => void;
+};
+```
+
+## Browser Support
+
+The [Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API#browser_compatibility) is supported in all modern browsers. It is not available in iOS Safari (as of 2025) or on the server. All primitives degrade gracefully — `show()` returns `null`, `close()` is a no-op, and `permission()` returns `"unknown"`.
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md)

packages/notification/dev/index.tsx

@@ -0,0 +1,62 @@
+import { type Component, createSignal, Show } from "solid-js";
+import {
+  isNotificationSupported,
+  createNotification,
+  createNotificationPermission,
+} from "../src/index.js";
+
+const App: Component = () => {
+  const supported = isNotificationSupported();
+  const [body, setBody] = createSignal("Hello from Solid Primitives!");
+  const { permission, requestPermission } = createNotificationPermission();
+  const { show, close, notification } = createNotification(
+    () => "Solid Primitives Notification",
+    () => ({ body: body() }),
+  );
+
+  return (
+    <div class="box-border flex min-h-screen w-full flex-col items-center justify-center space-y-4 bg-gray-800 p-24 text-white">
+      <div class="wrapper-v">
+        <h4>Notification Primitive</h4>
+
+        <Show
+          when={supported}
+          fallback={<p class="caption">Notifications API is not supported in this browser.</p>}
+        >
+          <p class="caption">
+            Permission: <strong>{permission()}</strong>
+          </p>
+          <p class="caption">
+            Active notification: <strong>{notification() ? "visible" : "none"}</strong>
+          </p>
+
+          <label class="caption">
+            Body text:
+            <input
+              type="text"
+              value={body()}
+              onInput={e => setBody(e.currentTarget.value)}
+              class="ml-2 rounded bg-gray-700 px-2 py-1 text-white"
+            />
+          </label>
+
+          <div class="flex gap-2">
+            <Show when={permission() !== "granted"}>
+              <button class="btn" onClick={requestPermission}>
+                Request permission
+              </button>
+            </Show>
+            <button class="btn" onClick={() => show()}>
+              Show notification
+            </button>
+            <button class="btn" onClick={close}>
+              Close notification
+            </button>
+          </div>
+        </Show>
+      </div>
+    </div>
+  );
+};
+
+export default App;

packages/notification/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@solid-primitives/notification",
+  "version": "0.0.100",
+  "description": "Primitives for the browser Notifications API with reactive permission management",
+  "author": "David Di Biase <dave@solidjs.com>",
+  "contributors": [],
+  "license": "MIT",
+  "homepage": "https://primitives.solidjs.community/package/notification",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/solidjs-community/solid-primitives.git"
+  },
+  "bugs": {
+    "url": "https://github.com/solidjs-community/solid-primitives/issues"
+  },
+  "primitive": {
+    "name": "notification",
+    "stage": 0,
+    "list": [
+      "isNotificationSupported",
+      "makeNotification",
+      "createNotification",
+      "createNotificationPermission"
+    ],
+    "category": "Browser APIs"
+  },
+  "keywords": [
+    "solid",
+    "notification",
+    "browser",
+    "permission",
+    "primitives"
+  ],
+  "private": false,
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "browser": {},
+  "exports": {
+    "import": {
+      "@solid-primitives/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "typesVersions": {},
+  "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"
+  },
+  "peerDependencies": {
+    "@solidjs/web": "^2.0.0-beta.10",
+    "solid-js": "^2.0.0-beta.10"
+  },
+  "dependencies": {
+    "@solid-primitives/permission": "workspace:^",
+    "@solid-primitives/utils": "workspace:^"
+  },
+  "devDependencies": {
+    "@solidjs/web": "2.0.0-beta.10",
+    "solid-js": "2.0.0-beta.10"
+  }
+}