open-index/open-npm huggingface dataset:
npm package: @solid-primitives/analytics
Description: Primitive that makes managing analytics a lot easier.
Author: David Di Biase
Latest version: 0.2.1

---
Name: analytics
Stage: 0
Package: "@solid-primitives/analytics"
Primitives: createAnalytics
Category: Utilities
---

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Analytics" alt="Solid Primitives Analytics">
</p>

# @solid-primitives/analytics

[![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)

Creates a primitive for analytics management.

## How to use it

```ts
const [running, start, stop] = createAnalytics(() => console.log('hi')));
start();
```

## Demo

You may view a working example here: https://codesandbox.io/s/solid-create-analytics?file=/src/index.tsx

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/autofocus
Description: Primitives for autofocusing HTML elements
Author: jer3m01
Latest version: 0.1.4

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=autofocus" alt="Solid Primitives Autofocus">
</p>

# @solid-primitives/autofocus

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/autofocus?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/autofocus)
[![version](https://img.shields.io/npm/v/@solid-primitives/autofocus?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/autofocus)
[![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-1.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)

Primitives for autofocusing HTML elements.

The native autofocus attribute only works on page load, which makes it incompatible with SolidJS. These primitives run on render, allowing autofocus on initial render as well as dynamically added components.

- [`autofocus`](#autofocus) - Directive to autofocus an element on render.
- [`createAutofocus`](#createautofocus) - Reactive primitive to autofocus an element on render.

## Installation

```bash
npm install @solid-primitives/autofocus
# or
yarn add @solid-primitives/autofocus
# or
pnpm add @solid-primitives/autofocus
```

## `autofocus`

### How to use it

The `autofocus` directive uses the native `autofocus` attribute to determine it should focus the element or not.
Using this directive without `autofocus={true}` (or the shorthand `autofocus`) will not perform anything.

As a directive:

```tsx
import { autofocus } from "@solid-primitives/autofocus";
// prevents from being tree-shaken by TS
autofocus

<button use:autofocus autofocus>
  Autofocused
</button>;

// Autofocus directive can be disabled if `false` is passed as option
<button use:autofocus={false} autofocus>
  Not Autofocused
</button>;
```

Or with `ref`

```tsx
import { autofocus } from "@solid-primitives/autofocus";

<button ref={autofocus} autofocus>
  Autofocused
</button>;
```

### `createAutofocus`

`createAutofocus` reactively autofocuses an element passid in as a signal.

```tsx
import { createAutofocus } from "@solid-primitives/autofocus";

// Using ref
let ref!: HTMLButtonElement;
createAutofocus(() => ref);

<button ref={ref}>Autofocused</button>;

// Using ref signal
const [ref, setRef] = createSignal<HTMLButtonElement>();
createAutofocus(ref);

<button ref={setRef}>Autofocused</button>;
```

## Demo

You may see the working example here: https://primitives.solidjs.community/playground/autofocus/

Source code: https://github.com/solidjs-community/solid-primitives/blob/main/packages/autofocus/dev/index.tsx

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/connectivity
Description: A navigator.onLine signal.
Author: Klemen Slavič
Latest version: 0.4.5

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Connectivity" alt="Solid Primitives Connectivity">
</p>

# @solid-primitives/connectivity

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/connectivity?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/template-primitive)
[![version](https://img.shields.io/npm/v/@solid-primitives/connectivity?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/template-primitive)
[![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-2.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)

A [`navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/Online_and_offline_events) signal that tells you when the browser _thinks_ you're online. Connectivity is determined by your browser, which is a best-effort process.

- [`makeConnectivityListener`](#makeconnectivitylistener) - Attaches event listeners and fires callback whenever `window.onLine` changes.
- [`createConnectivitySignal`](#createconnectivitysignal) - A signal representing the browser's interpretation of whether it is on- or offline.

## Installation

```bash
npm install @solid-primitives/connectivity
# or
yarn add @solid-primitives/connectivity
```

## `makeConnectivityListener`

Attaches event listeners and fires callback whenever `window.onLine` changes.

```ts
import { makeConnectivityListener } from "@solid-primitives/connectivity";

const clear = makeConnectivityListener(isOnline => {
  console.log(isOnline); // T: booelan
});
// remove event listeners (happens also on cleanup)
clear();
```

### Definition

```ts
function makeConnectivityListener(callback: (isOnline: boolean) => void): VoidFunction;
```

## `createConnectivitySignal`

A signal representing the browser's interpretation of whether it is on- or offline.

```ts
import { createConnectivitySignal } from "@solid-primitives/connectivity";

const isOnline = createConnectivitySignal();
isOnline(); // T: boolean
```

### `useConnectivitySignal`

This primitive provides a [singleton root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) variant that will reuse event listeners and signals across dependents.

It's behavior is the same as [`createConnectivitySignal`](#createconnectivitysignal).

```ts
import { useConnectivitySignal } from "@solid-primitives/connectivity";

const isOnline = useConnectivitySignal();
isOnline(); // T: boolean
```

### Definition

```ts
function createConnectivitySignal(): Accessor<boolean>;
```

## Demo

https://codesandbox.io/s/solid-primitives-connectivity-demo-2m76q?file=/index.tsx

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/cookies-store
Description: Primitive that manages browser cookies
Author: David Di Biase
Latest version: 1.1.11

# @solid-primitives/cookies

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

## WARNING!: This primitive is deprecated in favour of the new/incoming Storage primitive. This package will be available but unmaintained.

A cookies storage facility.

`createCookieStore` - Handles creating and managing a single cookie action.

## How to use it

```ts
const [value, setValue] = createCookieStore("my-cookie", "derp");
setValue("my-new-value");
console.log(value());
```

## Demo

You may find a working example on CSB here: https://codesandbox.io/s/solid-create-cookie-store-uh192?file=/src/index.tsx

## Changelog

<details>
<summary><b>Expand Changelog</b></summary>

0.0.100

Initial release.

1.1.3

Official release.

1.1.4

Patched incorrect use of serialize for the deserialize method.

1.1.5

Patched issue with deleting and added strinfication ability.

1.1.6

Fixed an issue with `=` in values

</details>
npm package: @solid-primitives/countdown
Description: Primitive to create a countdown timer
Author: David Di Biase
Latest version: 1.0.9

# @solid-primitives/countdown

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg?style=for-the-badge)](https://lerna.js.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/countdown?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/countdown)
[![size](https://img.shields.io/npm/v/@solid-primitives/countdown?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/countdown)

Creates a countdown primitive based on supplied dates and interval.

## Installation

```
npm install @solid-primitives/countdown
# or
yarn add @solid-primitives/countdown
```

## How to use it

Create a countdown based on a Javascript Date. Provides broken down time remaining.

```ts
const { days, hours, minutes, seconds, milliseconds } = createCountdown(
  new Date("January 1, 2025 00:00:00")
);
```

## Demo

You may view a working example here: https://codesandbox.io/s/create-countdown-s5f6n?file=/src/index.tsx

## Changelog

<details>
<summary><b>Expand Changelog</b></summary>

0.0.100

First commit of the countdown primitive.

1.0.9

Updated to Stage 3 and published CJS.

</details>
npm package: @solid-primitives/cursor
Description: Two simple primitives for setting cursor css property reactively.
Author: Damian Tarnawski
Latest version: 0.1.3

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=cursor" alt="Solid Primitives cursor">
</p>

# @solid-primitives/cursor

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/cursor?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/cursor)
[![version](https://img.shields.io/npm/v/@solid-primitives/cursor?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/cursor)
[![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)

Two simple primitives for setting cursor css property reactively.

- [`createElementCursor`](#createelementcursor) - Set provided cursor to given HTML Element styles reactively.
- [`createBodyCursor`](#createbodycursor) - Set selected cursor to body element styles reactively.

## Installation

```bash
npm install @solid-primitives/cursor
# or
yarn add @solid-primitives/cursor
# or
pnpm add @solid-primitives/cursor
```

## `createElementCursor`

Set provided cursor to given HTML Element styles reactively.

It takes two arguments:

- `element` - HTMLElement or a reactive signal returning one. Returning falsy value will unset the cursor.
- `cursor` - Cursor css property. E.g. "pointer", "grab", "zoom-in", "wait", etc.

```ts
import { createElementCursor } from "@solid-primitives/cursor";

const target = document.querySelector("#element");
const [cursor, setCursor] = createSignal("pointer");
const [enabled, setEnabled] = createSignal(true);

createElementCursor(() => enabled() && target, cursor);

setCursor("help");
```

## `createBodyCursor`

Set selected cursor to body element styles reactively.

It takes only one argument:

- `cursor` - Signal returing a cursor css property. E.g. "pointer", "grab", "zoom-in", "wait", etc. Returning falsy value will unset the cursor.

```ts
import { createBodyCursor } from "@solid-primitives/cursor";

const [cursor, setCursor] = createSignal("pointer");
const [enabled, setEnabled] = createSignal(true);

createBodyCursor(() => enabled() && cursor());

setCursor("help");
```

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/debounce
Description: Primitive that creates a debounce function
Author: David Di Biase
Latest version: 1.3.0
Deprecated: debounce primitive moved to @solid-primitives/scheduled

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Debounce" alt="Solid Primitives Debounce">
</p>

# @solid-primitives/debounce

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg?style=for-the-badge)](https://lerna.js.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/debounce?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/debounce)
[![size](https://img.shields.io/npm/v/@solid-primitives/debounce?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/debounce)
[![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 helpful debounce function.

## Installation

```
npm install @solid-primitives/debounce
# or
yarn add @solid-primitives/debounce
```

## How to use it

```ts
const fn = createDebounce((message: string) => console.log(message), 250));
fn('Hello!');
fn.clear() // clears a timeout in progress
```

### Definition

```ts
function createDebounce<Args extends any[]>(
  func: (...args: Args) => void,
  wait?: number
): DebouncedFunction<Args>;

interface DebouncedFunction<Args extends any[]> {
  (...args: Args): void;
  clear: () => void;
}
```

## Demo

You may view a working example here: https://codesandbox.io/s/solid-primitives-debounce-ng9bs?file=/src/index.tsx

## Changelog

<details>
<summary><b>Expand Changelog</b></summary>

1.0.0

Initial commit and publish of debounce primitive.

1.0.1

Improved types, minor clean-up and added tests.

1.0.2

Changed any to unknown type and applied patch from high1.

1.0.5

Adding CJS support to package.

1.0.8

Cleaned up documentation

1.1.0

Updated to Solid 1.3

1.1.2

Added missing automated clean-up.

1.2.0

Improved types, changed output format from `[fn, clear]` to `fn & { clear }`

</details>
npm package: @solid-primitives/devices
Description: Primitive that enumerates media devices
Author: Alex Lohr
Latest version: 1.3.1

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Devices" alt="Solid Primitives Devices">
</p>

# @solid-primitives/devices

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/devices?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/devices)
[![size](https://img.shields.io/npm/v/@solid-primitives/devices?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/devices)
[![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 to get a list of media devices (microphones, speakers, cameras). There are filtered primitives for convenience reasons.

## Installation

```
npm install @solid-primitives/devices
# or
yarn add @solid-primitives/devices
```

## How to use it

### Media Devices

```ts
const devices = createDevices();

const microphones = createMicrophones();
const speakers = createSpeakers();
const cameras = createCameras();
```

The filtered primitives are build so that they only triggered if the devices of their own kind changed.

### Device Motion

```ts
const accelerometer = createAccelerometer();
const gyroscope = createGyroscope();
```

## Demo

You may view a working example here:
https://primitives.solidjs.community/playground/devices/

## Reference

`createAccelerometer` : [devicemotion event](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicemotion_event)
`createGyroscope` : [deviceorientation event](https://developer.mozilla.org/en-US/docs/Web/API/Window/deviceorientation_event)

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/event-props
Description: Primitive to manage events in a reactive way.
Author: Alex Lohr
Latest version: 0.3.1

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Event%20Props" alt="Solid Primitives Event Props">
</p>

# @solid-primitives/event-props

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/event-props?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/event-props)
[![size](https://img.shields.io/npm/v/@solid-primitives/event-props?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/event-props)

A helpful primitive that creates the event props and a reactive store with the latest events

## Installation

```bash
npm install @solid-primitives/event-props
# or
yarn add @solid-primitives/event-props
```

## How to use it

### createEventProps

Receive the event props and a props with the latest events:

```ts
const [events, eventProps] = createEventProps('mousedown', 'mousemove', 'mouseup');

const isMouseDown = createMemo(() => (events.mousedown?.ts ?? 0) > (events.mouseup?.ts ?? 1));

createEffect(() => {
  if (isMouseDown()) {
    console.log(events.mousemove?.clientX, events.mousemove?.clientY);
  }
})

<div {...eventProps}>Click and drag on me</div>
```

## Demo

TODO

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/fullscreen
Description: Primitive that wraps the fullscreen API.
Author: Alex Lohr
Latest version: 1.3.4

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Fullscreen" alt="Solid Primitives Fullscreen">
</p>

# @solid-primitives/fullscreen

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/fullscreen?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/fullscreen)
[![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.

## Installation

```
npm install @solid-primitives/fullscreen
# or
yarn add @solid-primitives/fullscreen
```

## How to use it

### createFullScreen

```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>
  );
};
```

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.

### Directive

```ts
const isActive: Accessor<boolean> = createFullscreen(
  ref: HTMLElement | undefined,
  active?: Accessor<FullscreenOptions | boolean>,
  options?: FullscreenOptions
);

// can be used as a directive

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>);
}
```

## Demo

TODO

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/gestures
Description: Directives to react to gestures
Author: Moshe Uminer
Latest version: 1.2.0

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Gestures" alt="Solid Primitives Gestures">
</p>

# @solid-primitives/gestures

[![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)

Helpful directives to react to user gestures.

`pan` -
`pinch` -
`rotate` -
`swipe` -
`tap` -

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)

## Contributors

Ported from the amazing work by at https://github.com/Rezi/svelte-gestures.
npm package: @solid-primitives/list
Description: A List component, an alternative to For and Index.
Author: Maciek50322
Latest version: 0.1.2

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=list" alt="Solid Primitives list">
</p>

# @solid-primitives/list

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/list?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/list)
[![version](https://img.shields.io/npm/v/@solid-primitives/list?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/list)
[![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)

Package providing additional way to manage arrays. Alternative to `<For>` and `<Index>` that has reactive item value and reactive index. Focuses on avoiding recreation of mapped elements.

[`List`](#list) - Component that provides reactive item value and reactive index.
[`listArray`](#listarray) - Underlying helper for `<List>` unkeyed control flow, similar to `mapArray` and `indexArray`.

## Installation

```bash
npm install @solid-primitives/list
# or
yarn add @solid-primitives/list
# or
pnpm add @solid-primitives/list
```

## List

Example:

```tsx
function Component() {
  const [signal, setSignal] = createSignal([1, 2, 3]);

  return (
    <List each={signal()}>
      {(value, index) => {
        return (
          <div>
            {index()}: {value()}
          </div>
        );
      }}
    </List>
  );
}
```

Component similar to `<For>` and `<Index>`, but provides reactive item value and reactive index.

Every element is keyed by item reference and index, but item reference is prioritized. That means whenever element changes it's position in array, it's `index` signal will be updated and if element value is changed, it's `value` signal will be updated.

## listArray

Underlying helper for `<List>` unkeyed control flow. Returns array with elements mapped using provided mapping function.

Mapping function may use provided reactive value and reactive index. Mapping function is ran only when original array has more elements than before. Elements are disposed only if original array has less elements than before.

## Demo

You can see the list in action in the following sandbox: https://primitives.solidjs.community/playground/list/

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/local-store
Description: Primitive to access localStorage, sessionStorage etc.
Author: David Di Biase
Latest version: 1.1.4

# @solid-primitives/local-store

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

Creates a general local storage handler for LocalStorage, SessionStorage or your own engine.

`createLocalStore` - A single primitive can handle localStorage and localSession.

## How to use it

```ts
const [value, setValue] = createStorage("app");
setValue("foo", "bar");
console.log(value.foo);
```

## Demo

You may view a working example here: https://codesandbox.io/s/solid-primitives-local-store-6wc4c?file=/src/index.tsx

## Changelog

<details>
<summary><b>Expand Changelog</b></summary>

0.0.100

First developed commit.

1.1.4

Added ability to stringify storage.

</details>
npm package: @solid-primitives/map
Description: The Map & WeakMap data structures as a reactive signals.
Author: Damian Tarnawski @thetarnav
Latest version: 0.7.3

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Map" alt="Solid Primitives Map">
</p>

# @solid-primitives/map

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/map?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/map)
[![version](https://img.shields.io/npm/v/@solid-primitives/map?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/map)
[![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-2.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)

The reactive versions of `Map` & `WeakMap` built-in data structures.

- **[`ReactiveMap`](#reactivemap-and-reactiveweakmap)** - A reactive `Map`.
- **[`ReactiveWeakMap`](#reactivemap-and-reactiveweakmap)** - A reactive `WeakMap`.

## Installation

```bash
npm install @solid-primitives/map
# or
yarn add @solid-primitives/map
# or
pnpm add @solid-primitives/map
```

## `ReactiveMap` and `ReactiveWeakMap`

A reactive version of `Map`/`WeakMap` data structure. All the reads _(e.g. `get` or `has`)_ are signals, and all the writes _(e.g. `delete` or `set`)_ will cause updates to appropriate signals.

### How to use it

#### Import

```ts
import { ReactiveMap } from "@solid-primitives/map";
// or
import { ReactiveWeakMap } from "@solid-primitives/map";
```

#### Basic usage

The usage is almost the same as the original Javascript structures.

```ts
const userPoints = new ReactiveMap<User, number>();
// reads can be listened to reactively
createEffect(() => {
  userPoints.get(user1); // => T: number | undefined (reactive)
  userPoints.has(user1); // => T: boolean (reactive)
  // ReactiveWeakMap won't have .size or any methods that loop over the values
  userPoints.size; // => T: number (reactive)
});
// apply changes
userPoints.set(user1, 100);
userPoints.delete(user2);
userPoints.set(user1, { foo: "bar" });
```

#### Constructor arguments

`ReactiveMap`'s and `ReactiveWeakMap`'s constructor one optional argument that is the initial entries of the map.

```ts
const map = new ReactiveMap([
  ["foo", [1, 2, 3]],
  ["bar", [3, 4, 5]],
]);
```

#### Values are shallowly wrapped

Treat the values of `ReactiveMap` and `ReactiveMap` as individual signals, to cause updates, they have to be set through the `.set()` method, no mutations.

```ts
const map = new ReactiveMap<string, { age: number }>();
map.set("John", { age: 34 });

// this won't cause any updates:
map.get("John").age = 35;

// this will:
map.set("John", { age: 35 });
```

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/page-visibility
Description: Primitive to track page visibility
Author: David Di Biase
Latest version: 2.1.5

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Page%20Visibility" alt="Solid Primitives Page Visibility">
</p>

# @solid-primitives/page-visibility

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/page-visibility?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/page-visibility)
[![size](https://img.shields.io/npm/v/@solid-primitives/page-visibility?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/page-visibility)
[![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)

- [`createPageVisibility`](#createpagevisibility) - Creates a signal with a boolean value identifying the page visibility state
- [`usePageVisibility`](#usepagevisibility) - A [singleton root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) alternative.

## Installation

```
npm install @solid-primitives/page-visibility
# or
yarn add @solid-primitives/page-visibility
```

## `createPageVisibility`

Creates a signal with a boolean value identifying the page visibility state.

### How to use it

```ts
import { createPageVisibility } from "@solid-primitives/page-visibility";

const visible = createPageVisibility();

createEffect(() => {
  visible(); // => boolean
});
```

## `usePageVisibility`

`usePageVisibility` is a [singleton root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) primitive. It is providing the same signal as `createPageVisibility`, but the event-listener and the signal are shared between dependents, making it more optimized to use in multiple places at once.

### How to use it

```ts
import { usePageVisibility } from "@solid-primitives/page-visibility";

const visible = usePageVisibility();

createEffect(() => {
  visible(); // => boolean
});
```

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/permission
Description: Primitive that wraps permission queries
Author: Alex Lohr
Latest version: 1.3.2

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Permission" alt="Solid Primitives Permission">
</p>

# @solid-primitives/permission

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/permission?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/permission)
[![size](https://img.shields.io/npm/v/@solid-primitives/permission?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/permission)
[![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 to query user permissions.

## Installation

```
npm install @solid-primitives/permission
# or
yarn add @solid-primitives/permission
```

## How to use it

```ts
const state: "unknown" | PermissionState = createPermission(descriptor: PermissionDescription | PermissionName);
```

## Demo

TODO

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/platform
Description: A set of const boolean variables identifying device and browser type.
Author: Damian Tarnawski
Latest version: 0.2.1

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=platform" alt="Solid Primitives platform">
</p>

# @solid-primitives/platform

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/platform?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/platform)
[![version](https://img.shields.io/npm/v/@solid-primitives/platform?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/platform)
[![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 set of const boolean variables identifying device and browser type.

## Installation

```bash
npm install @solid-primitives/platform
# or
pnpm add @solid-primitives/platform
# or
yarn add @solid-primitives/platform
```

## How to use it

```ts
import { isWebKit, isFirefox } from "@solid-primitives/platform";

if (!isFirefox) {
  // won't run on the Mozilla Firefox Browser
}

if (isWebKit) {
  // run WebKit Engine specific code
}
```

> **Note:** This package is tree-shakable, all unused variables will be removed from the bundle.

> **Note:** On the server, all variables will be `false`.

## List of variables

### Device

- `isAndroid` — Is Android Device

- `isWindows` — Is Windows Device

- `isMac` — Is Mac Device

- `isIPhone` — Is IPhone Device

- `isIPad` — Is IPad Device

- `isIPod` — Is IPod Device

- `isIOS` — Is IOS Device

- `isAppleDevice` — Is Apple Device

- `isMobile` — is a Mobile Browser

### Browser

- `isFirefox` — Browser is Mozilla Firefox

- `isOpera` — Browser is Opera

- `isSafari` — Browser is Safari

- `isIE` — Browser is Internet Explorer

- `isChromium` — is Chromium-based browser

- `isEdge` — Browser is Edge

- `isChrome` — Browser is Chrome

- `isBrave` — Browser is Brave

### Rendering Engine

- `isGecko` — Browser using Gecko Rendering Engine

- `isBlink` — Browser using Blink Rendering Engine

- `isWebKit` — Browser using WebKit Rendering Engine

- `isPresto` — Browser using Presto Rendering Engine

- `isTrident` — Browser using Trident Rendering Engine

- `isEdgeHTML` — Browser using EdgeHTML Rendering Engine

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/reducer
Description: Provides a createReducer primitive for updating state in a predictable way.
Author: Tiago Cavalcante
Latest version: 0.0.101

# @solid-primitives/reducer

[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/reducer?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/reducer)
[![version](https://img.shields.io/npm/v/@solid-primitives/reducer?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/reducer)
[![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-1.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)

Provides a createReducer primitive for updating state in a predictable way.
SolidJS equivalent of React's [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer).

## Installation

```bash
npm install @solid-primitives/reducer
# or
yarn add @solid-primitives/reducer
```

## When to use it

`createReducer` is useful for:

1. DRY the code of the `set`s of a signal
2. Ensure the signal is always in a valid state
3. Make it easier to understand for what a signal is used

## How to use it

```ts
const [accessor, dispatch] = createReducer<State>(
  dispatcher: (state: State, ...args) => State,
  initialState: State
);
```

`dispatcher` is the reducer, it's 1st parameter always is the current state of the reducer and it returns the new state of the reducer.

`accessor` can be used as you use a normal signal: `accessor()`. It contains the state of the reducer.

`dispatch` is the action of the reducer, it is a sort of `setSignal` that does NOT receive the new state, but instructions to create it from the current state.

For example:

```tsx
function Counter() {
  const [count, double] = createReducer(c => c * 2, 1);

  return <button onClick={double}>{count()}</button>;
}
```

The reducer also can receive other arguments:

```tsx
const dispatcher = (c: number, type: "double" | "increment") => {
  if (type == "double") {
    return c * 2;
  } else {
    return c + 1;
  }
};

function Counter() {
  const [count, handleClick] = createReducer(dispatcher, 1);

  return (
    <div>
      <span>{count()}</span>

      <button onClick={() => handleClick("double")}>Double</button>
      <button onClick={() => handleClick("increment")}>Increment</button>
    </div>
  );
}
```

React allows a 3rd argument:

```ts
const fib = (n: number) => (n < 2 ? n : fib(n - 1) + fib(n - 2));
const nextFib = (n: number) => Math.round((n * (1 + sqrt(5))) / 2);

const [fibonacci, nextFibonacci] = useReducer(nextFib, 1, fib);
```

You need to convert that to the following format:

```ts
const [fibonacci, nextFibonacci] = createReducer(nextFib, fib(1));
```

## Demo

https://codesandbox.io/s/solid-primitives-reducer-demo-7nrfs2?file=/index.tsx

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/script-loader
Description: Primitive to load scripts dynamically
Author: Alex Lohr
Latest version: 2.3.2

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Script%20Loader" alt="Solid Primitives Script Loader">
</p>

# @solid-primitives/script-loader

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/script-loader?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/script-loader)
[![size](https://img.shields.io/npm/v/@solid-primitives/script-loader?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/script-loader)
[![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 to load scripts dynamically, either for external services or jsonp requests

## Installation

```
npm install @solid-primitives/script-loader
# or
yarn add @solid-primitives/script-loader
# or
pnpm add @solid-primitives/script-loader
```

## How to use it

createScriptLoader expects a props object with a `src` property. All the other props will be spread to the script element.

The `src` prop is required and will be used to set the `src` or `textContent` attribute. It can be a string or an accessor.

```ts
import { createScriptLoader } from "@solid-primitives/script-loader";

// For example, to use recaptcha:
createScriptLoader({
  src: "https://www.google.com/recaptcha/enterprise.js?render=my_token",
  async onLoad() {
    await grecaptcha.enterprise.ready();
    const token = await grecaptcha.enterprise.execute("my_token", { action: "login" });
    // do your stuff...
  },
});

// or pinterest embeds:
createScriptLoader({
  src: '!function(a,b,c){var d,e,f;d="PIN_"+~~((new Date).getTime()/864e5),...',
  onLoad() {
    window?.PinUtils?.build();
  },
});
```

## Definition

```ts
function createScriptLoader(props: ScriptProps): HTMLScriptElement | undefined; // script element with be undefined only on the server

type ScriptProps = Omit<ComponentProps<"script">, "src" | "textContent"> & {
  /** URL or source of the script to load. */
  src: string | Accessor<string>;
};
```

## Demo

TODO

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/set
Description: The Set & WeakSet data structures as a reactive signals.
Author: Damian Tarnawski @thetarnav
Latest version: 0.7.3

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Set" alt="Solid Primitives Set">
</p>

# @solid-primitives/set

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/set?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/set)
[![version](https://img.shields.io/npm/v/@solid-primitives/set?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/set)
[![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-2.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)

The Javascript built-in `Set` & `WeakSet` data structures as a reactive signals.

- **[`ReactiveSet`](#reactiveset)** - A reactive version of a Javascript built-in `Set` class.
- **[`ReactiveWeakSet`](#reactiveweakset)** - A reactive version of a Javascript built-in `WeakSet` class.

## Installation

```bash
npm install @solid-primitives/set
# or
yarn add @solid-primitives/set
# or
pnpm add @solid-primitives/set
```

## `ReactiveSet`

A reactive version of a Javascript built-in `Set` class.

### How to use it

#### Import

```ts
import { ReactiveSet } from "@solid-primitives/set";
```

#### Basic usage

```ts
const set = new ReactiveSet([1, 1, 2, 3]);

// listen for changes reactively
createEffect(() => {
  [...set]; // => [1,2,3] (reactive on any change)
  set.has(2); // => true (reactive on change to the result)
});

// apply like with normal Set
set.add(4);
set.delete(2);
set.clear();
```

## `ReactiveWeakSet`

A reactive version of a Javascript built-in `WeakSet` class.

### How to use it

#### Import

```ts
import { ReactiveWeakSet } from "@solid-primitives/set";
```

#### Basic usage

```ts
const set = new ReactiveWeakSet([1, 1, 2, 3]);

// listen for changes reactively
createEffect(() => {
  set.has(2); // => true (reactive on change to the result)
});

// apply changes like with normal Set
set.add(4);
set.delete(2);
```

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/spring
Description: Primitive that creates spring physics functions.
Author: Carlo Taleon
Latest version: 0.1.2

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=spring" alt="Solid Primitives spring">
</p>

# @solid-primitives/spring

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/spring?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/spring)
[![version](https://img.shields.io/npm/v/@solid-primitives/spring?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/spring)
[![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 hook to interpolate signal changes with spring physics. Inspired by & directly forked from [`svelte-motion/spring`](https://svelte.dev/docs/svelte-motion#spring) as such, has a very familiar API design.

With this primitive, you can easily animate values that can be interpolated like `number`, `date`, and collections (arrays or nested objects) of those datatypes.

- `createSpring` - Provides a getter and setter for the spring primitive.
- `createDerivedSpring` - Provides only a getter for the spring primitive deriving from an accessor parameter. Similar to the [@solid-primitives/tween](https://github.com/solidjs-community/solid-primitives/tree/main/packages/tween) API.

The following physics options are available:

- `stiffness` (number, default `0.15`) — a value between 0 and 1 where higher means a 'tighter' spring
- `damping` (number, default `0.8`) — a value between 0 and 1 where lower means a 'springier' spring
- `precision` (number, default `0.01`) — determines the threshold at which the spring is considered to have 'settled', where lower means more precise

## Installation

```bash
npm install @solid-primitives/spring
# or
yarn add @solid-primitives/spring
# or
pnpm add @solid-primitives/spring
```

## How to use it

```ts
// Basic Example
const [progress, setProgress] = createSpring(0);

// Example with options (less sudden movement)
const [radialProgress, setRadialProgress] = createSpring(0, { stiffness: 0.05 });

// Example with collections (e.g. Object or Array).
const [xy, setXY] = createSpring(
  { x: 50, y: 50 },
  { stiffness: 0.08, damping: 0.2, precision: 0.01 },
);

// Example deriving from an existing signal.
const [myNumber, myNumber] = createSignal(20);
const springedValue = createDerivedSpring(myNumber, { stiffness: 0.03 });
```

## Demo

- **[Playground](https://primitives.solidjs.community/playground/spring)** - [source code](https://github.com/solidjs-community/solid-primitives/blob/main/packages/spring/dev/index.tsx)

- **[CodeSandbox - Basic Example](https://codesandbox.io/p/devbox/ecstatic-borg-k2wqfr)**

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/stream
Description: Primitive that gets a user media stream from microphone, camera or screen
Author: Alex Lohr
Latest version: 0.7.3

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Stream" alt="Solid Primitives Stream">
</p>

# @solid-primitives/stream

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/stream?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/stream)
[![size](https://img.shields.io/npm/v/@solid-primitives/stream?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/stream)
[![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 primitives to work with media streams from microphones, cameras or the screen.

## Installation

```
npm install @solid-primitives/stream
# or
yarn add @solid-primitives/stream
```

## How to use it

```ts
const [stream, { mutate, refetch, stop } = createStream(constraints: MediaDeviceInfo | MediaStreamConstraints);

stream: Accessor<MediaStream | undefined> & { loading: boolean, error: any }
mutate: (stream: MediaStream | undefined) => void // overwrite the stream
refetch: () => void // refetch the stream without changing the constraints
stop: () => void // stop the current stream

const [amplitude, { mutate, refetch, stop } = createAmplitudeStream(device: MediaDeviceInfo);

amplitude: Accessor<number> & { loading: boolean, error: any }
// otherwise like createStream

createMediaPermissionRequest(target?: 'audio' | 'video' | MediaStreamConstraints);
// use the createPermission primitive to watch the permissions.
```

## Demo

https://primitives.solidjs.community/playground/stream

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-primitives/styles
Description: Collection of reactive primitives focused on styles.
Author: Damian Tarnawski
Latest version: 0.1.3

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=styles" alt="Solid Primitives styles">
</p>

# @solid-primitives/styles

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/styles?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/styles)
[![version](https://img.shields.io/npm/v/@solid-primitives/styles?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/styles)
[![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)

Collection of reactive primitives focused on styles.

- [`createRemSize`](#createremsize) - Create a reactive signal of css `rem` size in pixels.

## Installation

```bash
npm install @solid-primitives/styles
# or
yarn add @solid-primitives/styles
# or
pnpm add @solid-primitives/styles
```

## `createRemSize`

Creates a reactive signal with value of the current rem size in pixels, and tracks it's changes.

### How to use it

It takes no arguments and returns a number signal.

```ts
import { createRemSize } from "@solid-primitives/styles";

const remSize = createRemSize();
console.log(remSize()); // 16

createEffect(() => {
  console.log(remSize()); // remSize value will be logged on every change to the root font size
});
```

### `useRemSize`

This primitive provides a [singleton root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) variant that will reuse signals, HTML elements and the ResizeObserver instance across all dependents that use it.

It's behavior is the same as [`createRemSize`](#createremsize).

```ts
import { useRemSize } from "@solid-primitives/styles";

const remSize = useRemSize();
console.log(remSize()); // 16
```

### Server fallback

When using this primitive on the server, it will return a signal with a value of `16` by default. You can override this value by calling the `setServerRemSize` helper with a new value, before calling `createRemSize` or `useRemSize`.

```ts
import { setServerRemSize, createRemSize } from "@solid-primitives/styles";

setServerRemSize(10);

const remSize = createRemSize();
console.log(remSize()); // 10 instead of 16 (only on the server!)
```

## Demo

TODO

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)