upgrade: fullscreen package upgrade for Solid 2.0

.changeset/fullscreen-solid-2-migration.md

@@ -0,0 +1,28 @@
+---
+"@solid-primitives/fullscreen": major
+---
+
+Migrate `@solid-primitives/fullscreen` to Solid.js 2.0 (beta.7).
+
+**Breaking changes:**
+
+- Peer dependency updated from `solid-js ^1.6.12` to `solid-js ^2.0.0-beta.7` and `@solidjs/web ^2.0.0-beta.7`.
+- The `use:createFullscreen` JSX directive (Solid 1.x `use:` namespace) is removed. Use the new `fullscreen()` ref directive factory instead:
+
+  ```tsx
+  // Before (Solid 1.x)
+  <div use:createFullscreen={fs} />
+
+  // After (Solid 2.0)
+  <div ref={fullscreen(fs)} />
+  ```
+
+**New exports:**
+
+- `fullscreen(active?, options?)` — ref directive factory that wraps `createFullscreen` for direct use on JSX elements via the `ref` prop.
+
+**Internal changes:**
+
+- `isServer` now imported from `@solidjs/web` (was `solid-js/web`).
+- `createEffect` updated to Solid 2.0 split compute/effect signature.
+- Test mock fixed: `document.fullscreenElement` is now a dynamic getter reflecting current fullscreen state; `document.exitFullscreen` now dispatches `fullscreenchange` matching browser behaviour.

packages/fullscreen/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @solid-primitives/fullscreen
 
+## 2.0.0-beta.0
+
+### Breaking Changes
+
+- Migrate `@solid-primitives/fullscreen` to Solid.js 2.0 (beta.14).
+- Peer dependency updated from `solid-js ^1.6.12` to `solid-js ^2.0.0-beta.14` and `@solidjs/web ^2.0.0-beta.14`.
+- The `use:createFullscreen` JSX directive (Solid 1.x `use:` namespace) is removed. Use the new `fullscreen()` ref directive factory instead:
+
+  ```tsx
+  // Before (Solid 1.x)
+  <div use:createFullscreen={fs} />
+
+  // After (Solid 2.0)
+  <div ref={fullscreen()} />
+  ```
+
+- `isServer` is now imported from `@solidjs/web` instead of `solid-js/web`.
+- `createResource` removed upstream — `createFullscreen` now uses an async `createMemo` pattern internally.
+
 ## 1.3.4
 
 ### Patch Changes

packages/fullscreen/README.md

@@ -8,59 +8,104 @@
 [![size](https://img.shields.io/npm/v/@solid-primitives/fullscreen?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/fullscreen)
 [![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)
 
-Creates a primitive wrapper around the Fullscreen API that can either be used as a directive or a primitive.
+Reactive wrapper around the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API).
+
+- [**Docs (Storybook)**](https://primitives.solidjs.community/storybook/?path=/docs/browser-apis-fullscreen--docs)
+- [`makeFullscreen`](#makefullscreen) — Non-reactive base, no Solid lifecycle.
+- [`createFullscreen`](#createfullscreen) — Reactive primitive with `isActive` state tracking.
+- [`fullscreen`](#fullscreen-ref-directive-factory) — Ref factory for click-to-toggle.
 
 ## Installation
 
-```
+```bash
 npm install @solid-primitives/fullscreen
 # or
-yarn add @solid-primitives/fullscreen
+pnpm add @solid-primitives/fullscreen
 ```
 
-## How to use it
+## Primitives
+
+### `makeFullscreen`
+
+Non-reactive base primitive. No Solid lifecycle dependency — safe to use outside components.
+
+```ts
+const [enter, exit] = makeFullscreen(element, options?: FullscreenOptions);
+```
 
-### createFullScreen
+`enter(options?)` calls `element.requestFullscreen()`. Call-time options override creation-time options. `exit()` calls `document.exitFullscreen()`.
 
 ```ts
-const MyComponent2: Component = () => {
-  const [fs, setFs] = createSignal(false);
-  let [ref, setRef] = createSignal<HTMLDivElement>();
-  const active: Accessor<boolean> = createFullscreen(ref, fs);
-  return (
-    <div ref={setRef} onClick={() => setFs(fs => !fs)}>
-      {!active() ? "click to fullscreen" : "click to exit fullscreen"}
-    </div>
-  );
-};
+const [enter, exit] = makeFullscreen(videoEl, { navigationUI: "hide" });
+button.addEventListener("click", enter);
 ```
 
-This variant requires the ref to be a signal, otherwise the not-yet-filled ref will be captured in the closure of the primitive.
+---
 
-You can either put the options into the second argument accessor output (useful for the directive use case) or as a third argument.
+### `createFullscreen`
 
-### Directive
+Reactive primitive that binds `enter`/`exit` to an element and tracks fullscreen state via the `fullscreenchange` event.
 
 ```ts
-const isActive: Accessor<boolean> = createFullscreen(
-  ref: HTMLElement | undefined,
-  active?: Accessor<FullscreenOptions | boolean>,
-  options?: FullscreenOptions
+const { enter, exit, isActive } = createFullscreen(
+  ref: HTMLElement | Accessor<HTMLElement | undefined>,
+  options?: FullscreenPrimitiveOptions,
 );
+```
+
+`enter()` and `exit()` must be called from a direct user gesture — the browser requires it. `isActive` is an `Accessor<boolean>` that reflects the live fullscreen state.
 
-// can be used as a directive
+```tsx
+const { enter, exit, isActive } = createFullscreen(ref);
 
-const MyComponent: Component = () => {
-  const [fs, setFs] = createSignal(false);
-  return (<div use:createFullScreen={fs} onClick={() => setFs(fs => !fs)}>
-    {!fs() ? 'click to fullscreen' : 'click to exit fullscreen'}
-  </div>);
-}
+<button onClick={enter}>Go fullscreen</button>
+<Show when={isActive()}>
+  <button onClick={exit}>Exit</button>
+</Show>
 ```
 
-## Demo
+`ref` can be a reactive accessor — `createFullscreen` rebinds when the element changes:
+
+```tsx
+const [ref, setRef] = createSignal<HTMLDivElement>();
+const { enter, isActive } = createFullscreen(ref);
+
+<div ref={setRef}>...</div>
+```
+
+#### `FullscreenPrimitiveOptions`
+
+Extends the standard [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen#options) with:
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `exitOnCleanup` | `boolean` | `true` | Exit fullscreen when the reactive scope is disposed. |
+| `navigationUI` | `string` | — | Passed to `requestFullscreen`. |
+
+```ts
+const { enter } = createFullscreen(ref, { exitOnCleanup: false, navigationUI: "hide" });
+```
+
+---
+
+### `fullscreen` (ref directive factory)
+
+A ref factory that wires click-to-toggle fullscreen onto any element. Clicking enters fullscreen; clicking again exits. Must be called inside a reactive owner (component body or `createRoot`).
+
+```ts
+const attach = fullscreen(options?: FullscreenOptions);
+// attach is a ref callback: (el: HTMLElement) => void
+```
+
+```tsx
+// Simple toggle
+<div ref={fullscreen()}>Click to go fullscreen</div>
+
+// With options
+<div ref={fullscreen({ navigationUI: "hide" })}>Click to go fullscreen</div>
+```
 
-TODO
+The click listener is removed automatically when the component unmounts.
 
 ## Changelog
 

packages/fullscreen/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solid-primitives/fullscreen",
-  "version": "1.3.4",
+  "version": "2.0.0-beta.0",
   "description": "Primitive that wraps the fullscreen API.",
   "author": "Alex Lohr <alex.lohr@logmein.com>",
   "license": "MIT",
@@ -13,7 +13,9 @@
     "name": "fullscreen",
     "stage": 3,
     "list": [
-      "createFullscreen"
+      "makeFullscreen",
+      "createFullscreen",
+      "fullscreen"
     ],
     "category": "Browser APIs"
   },
@@ -47,13 +49,16 @@
     "primitives"
   ],
   "dependencies": {
+    "@solid-primitives/event-listener": "workspace:^",
     "@solid-primitives/utils": "workspace:^"
   },
   "peerDependencies": {
-    "solid-js": "^1.6.12"
+    "@solidjs/web": "^2.0.0-beta.14",
+    "solid-js": "^2.0.0-beta.14"
   },
   "typesVersions": {},
   "devDependencies": {
-    "solid-js": "^1.9.7"
+    "@solidjs/web": "2.0.0-beta.14",
+    "solid-js": "2.0.0-beta.14"
   }
 }