@solid-primitives/media - npm Package Compare versions

Comparing version 1.3.0 to 2.0.0

dist/index.d.ts

 import { Accessor } from 'solid-js';
 
+declare type Breakpoints = Record<string, string>;
+declare type Matches<T extends Breakpoints> = {
+    readonly [K in keyof T]: boolean;
+};
+interface BreakpointOptions<T extends Breakpoints> {
+    /** If true watches changes and reports state reactively */
+    watchChange?: boolean;
+    /** Default value of `match` when `window.matchMedia` is not available like during SSR & legacy browsers */
+    fallbackState?: Matches<T>;
+    /** Use `min-width` media query for mobile first or `max-width` for desktop first. Defaults to `min-width`  */
+    mediaFeature?: string;
+}
+
 /**
+ * attaches a MediaQuery listener to window, listeneing to changes to provided query
+ * @param query Media query to listen for
+ * @param callback function called every time the media match changes
+ * @returns function removing the listener
+ * @example
+ * const clear = makeMediaQueryListener("(max-width: 767px)", e => {
+ *    console.log(e.matches)
+ * });
+ * // remove listeners (will happen also on cleanup)
+ * clear()
+ */
+declare function makeMediaQueryListener(query: string | MediaQueryList, callback: (e: MediaQueryListEvent) => void): VoidFunction;
+/**
  * Creates a very simple and straightforward media query monitor.
  *
  * @param query Media query to listen for
- * @param fallbackState Sets the initial state to begin with
+ * @param fallbackState Server fallback state *(Defaults to `false`)*
  * @param watchChange If true watches changes and reports state reactively
@@ -18,15 +44,2 @@ * @returns Boolean value if media query is met or not
 declare const createMediaQuery: (query: string, fallbackState?: boolean, watchChange?: boolean) => Accessor<boolean>;
-
-declare type Breakpoints = Record<string, string>;
-declare type Matches<T extends Breakpoints> = Readonly<Record<keyof T, boolean>>;
-interface BreakpointOptions<T extends Breakpoints> {
-    /** If true watches changes and reports state reactively */
-    watchChange?: boolean;
-    /** Default value of `match` when `window.matchMedia` is not available like during SSR & legacy browsers */
-    fallbackMatch?: Matches<T>;
-    /** Use `min-width` media query for mobile first or `max-width` for desktop first  */
-    responsiveMode?: "mobile-first" | "desktop-first";
-}
-declare type MqlInstances<T extends Breakpoints> = Record<keyof T, MediaQueryList>;
-
 /**
@@ -51,3 +64,18 @@ * Creates a multi-breakpoint monitor to make responsive components easily.
 declare function createBreakpoints<T extends Breakpoints>(breakpoints: T, options?: BreakpointOptions<T>): Matches<T>;
+/**
+ * Provides a signal indicating if the user has requested dark color theme. The setting is being watched with a [Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
+ *
+ * This is a [shared root primitive](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot).
+ *
+ * @param serverFallback value that should be returned on the server — defaults to `false`
+ *
+ * @returns a boolean signal
+ * @example
+ * const prefersDark = usePrefersDark();
+ * createEffect(() => {
+ *    prefersDark() // => boolean
+ * });
+ */
+declare const usePrefersDark: (serverFallback?: boolean) => Accessor<boolean>;
 
-export { BreakpointOptions, Breakpoints, Matches, MqlInstances, createBreakpoints, createMediaQuery, createMediaQuery as default };
+export { BreakpointOptions, Breakpoints, Matches, createBreakpoints, createMediaQuery, makeMediaQueryListener, usePrefersDark };

dist/index.js

 import {
-  checkMqSupported,
-  entries,
   getEmptyMatchesFromBreakpoints
-} from "./chunk-ZWNY7H5D.js";
+} from "./chunk-G2VER6AY.js";
 
-// src/createMediaQuery.ts
-import { getOwner, onCleanup, createSignal } from "solid-js";
-import { isServer } from "solid-js/web";
-var createMediaQuery = (query, fallbackState = false, watchChange = true) => {
-  let initialState = fallbackState;
-  if (!isServer) {
-    const mql = window.matchMedia(query);
-    initialState = mql.matches;
-    if (watchChange) {
-      const onChange = () => setState(mql.matches);
-      mql.addEventListener("change", onChange);
-      if (getOwner()) {
-        onCleanup(() => mql.removeEventListener("change", onChange));
-      }
-    }
-  }
-  const [state, setState] = createSignal(initialState);
+// src/index.ts
+import { createSignal } from "solid-js";
+import { makeEventListener } from "@solid-primitives/event-listener";
+import { createStaticStore, forEachEntry } from "@solid-primitives/utils";
+import { createSharedRoot } from "@solid-primitives/rootless";
+function makeMediaQueryListener(query, callback) {
+  const mql = typeof query === "string" ? window.matchMedia(query) : query;
+  return makeEventListener(mql, "change", callback);
+}
+var createMediaQuery = (query, fallbackState, watchChange = true) => {
+  const mql = window.matchMedia(query);
+  if (!watchChange)
+    return () => mql.matches;
+  const [state, setState] = createSignal(mql.matches);
+  makeEventListener(mql, "change", () => setState(mql.matches));
   return state;
 };
-
-// src/createBreakpoints.ts
-import { createEffect, createMemo, onCleanup as onCleanup2 } from "solid-js";
-import { createStore } from "solid-js/store";
 function createBreakpoints(breakpoints, options = {}) {
-  const isMqSupported = checkMqSupported();
-  const mqlInstances = createMemo(() => {
-    const mqlInstances2 = {};
-    if (isMqSupported) {
-      entries(breakpoints).forEach(([token, width]) => {
-        const responsiveProperty = options.responsiveMode === "desktop-first" ? "max" : "min";
-        const mediaquery = `(${responsiveProperty}-width: ${width})`;
-        const instance = window.matchMedia(mediaquery);
-        mqlInstances2[token] = instance;
-      });
-    }
-    return mqlInstances2;
-  });
-  function getInitialMatches() {
-    if (!isMqSupported) {
-      return options.fallbackMatch || getEmptyMatchesFromBreakpoints(breakpoints);
-    }
+  if (!window.matchMedia)
+    return options.fallbackState ?? getEmptyMatchesFromBreakpoints(breakpoints);
+  const { mediaFeature = "min-width", watchChange = true } = options;
+  const [matches, setMatches] = createStaticStore((() => {
     const matches2 = {};
-    entries(mqlInstances()).forEach(([token, mql]) => {
+    forEachEntry(breakpoints, (token, width) => {
+      const mql = window.matchMedia(`(${mediaFeature}: ${width})`);
       matches2[token] = mql.matches;
+      if (watchChange)
+        makeEventListener(mql, "change", (e) => setMatches(token, e.matches));
     });
     return matches2;
-  }
-  const [matches, setMatches] = createStore(getInitialMatches());
-  createEffect(() => {
-    var _a;
-    const shouldWatch = (_a = options.watchChange) != null ? _a : true;
-    if (!shouldWatch || !isMqSupported) {
-      return;
-    }
-    entries(mqlInstances()).forEach(([token, mql]) => {
-      const listener = (event) => {
-        setMatches(token, event.matches);
-      };
-      mql.addEventListener("change", listener);
-      onCleanup2(() => {
-        mql.removeEventListener("change", listener);
-      });
-    });
-  });
+  })());
   return matches;
 }
+var usePrefersDark = /* @__PURE__ */ createSharedRoot(createMediaQuery.bind(null, "(prefers-color-scheme: dark)", false, true));
 export {
   createBreakpoints,
   createMediaQuery,
-  createMediaQuery as default
+  makeMediaQueryListener,
+  usePrefersDark
 };

dist/server.js

 import {
   getEmptyMatchesFromBreakpoints
-} from "./chunk-ZWNY7H5D.js";
+} from "./chunk-G2VER6AY.js";
 
 // src/server.ts
-var createMediaQuery = (_query, _initialState = false, _watchChange = true) => () => false;
-var createBreakpoints = (breakpoints, options = {}) => options.fallbackMatch || getEmptyMatchesFromBreakpoints(breakpoints);
-var server_default = createMediaQuery;
+import { noop } from "@solid-primitives/utils";
+var makeMediaQueryListener = () => noop;
+var createMediaQuery = (_, fallback = false) => () => fallback;
+var createBreakpoints = (breakpoints, options) => (options == null ? void 0 : options.fallbackState) || getEmptyMatchesFromBreakpoints(breakpoints);
+var usePrefersDark = (fallback = false) => () => fallback;
 export {
   createBreakpoints,
-  server_default as default
+  createMediaQuery,
+  makeMediaQueryListener,
+  usePrefersDark
 };

package.json

 {
-	"name": "@solid-primitives/media",
-	"version": "1.3.0",
-	"description": "Primitives for media query and device features",
-	"author": "David Di Biase <[e-mail]>",
-	"contributors": [
-		{
-			"name": "Aditya Agarwal",
-			"email": "[e-mail]",
-			"url": "https://devadi.netlify.app"
-		}
-	],
-	"license": "MIT",
-	"homepage": "https://github.com/solidjs-community/solid-primitives/tree/main/packages/media",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/solidjs-community/solid-primitives.git"
-	},
-	"primitive": {
-		"name": "media",
-		"stage": 3,
-		"list": [
-			"createMediaQuery",
-			"createBreakpoints"
-		],
-		"category": "Display & Media"
-	},
-	"files": [
-		"dist"
-	],
-	"private": false,
-	"sideEffects": false,
-	"type": "module",
-	"main": "./dist/server.cjs",
-	"module": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		"node": {
-			"import": "./dist/server.js",
-			"require": "./dist/server.cjs"
-		},
-		"import": "./dist/index.js",
-		"require": "./dist/index.cjs"
-	},
-	"scripts": {
-		"start": "vite serve dev --host",
-		"dev": "yarn start",
-		"build": "tsup",
-		"test": "vitest run test",
-		"test:watch": "vitest watch test"
-	},
-	"keywords": [
-		"media",
-		"mediaquery",
-		"query",
-		"breakpoints",
-		"responsive",
-		"solid",
-		"primitives"
-	],
-	"devDependencies": {
-		"c8": "^7.11.0",
-		"jsdom": "^19.0.0",
-		"prettier": "^2.0.5",
-		"solid-testing-library": "^0.2.0",
-		"tslib": "^2.0.1",
-		"tsup": "^5.10.3",
-		"typescript": "^4.0.2",
-		"vite-plugin-solid": "^2.2.6",
-		"vitest": "^0.7.4"
-	},
-	"peerDependencies": {
-		"solid-js": "^1.3.1"
-	}
+  "name": "@solid-primitives/media",
+  "version": "2.0.0",
+  "description": "Primitives for media query and device features",
+  "author": "David Di Biase <[e-mail]>",
+  "contributors": [
+    {
+      "name": "Aditya Agarwal",
+      "email": "[e-mail]",
+      "url": "https://devadi.netlify.app"
+    },
+    "Damian Tarnawski <[e-mail]>"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/solidjs-community/solid-primitives/tree/main/packages/media",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/solidjs-community/solid-primitives.git"
+  },
+  "primitive": {
+    "name": "media",
+    "stage": 3,
+    "list": [
+      "makeMediaQueryListener",
+      "createMediaQuery",
+      "createBreakpoints",
+      "usePrefersDark"
+    ],
+    "category": "Display & Media"
+  },
+  "files": [
+    "dist"
+  ],
+  "private": false,
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/server.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "node": {
+      "import": "./dist/server.js",
+      "require": "./dist/server.cjs"
+    },
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
+  "scripts": {
+    "start": "vite serve dev --host",
+    "dev": "npm run start",
+    "build": "tsup",
+    "test": "vitest run test",
+    "test:watch": "vitest watch test"
+  },
+  "keywords": [
+    "media",
+    "mediaquery",
+    "query",
+    "breakpoints",
+    "responsive",
+    "solid",
+    "primitives"
+  ],
+  "dependencies": {
+    "@solid-primitives/utils": "^2.1.1",
+    "@solid-primitives/event-listener": "^2.2.0",
+    "@solid-primitives/rootless": "^1.1.0"
+  },
+  "devDependencies": {
+    "jsdom": "^19.0.0",
+    "prettier": "^2.7.1",
+    "solid-testing-library": "^0.2.0",
+    "tslib": "^2.0.1",
+    "tsup": "^6.1.2",
+    "typescript": "^4.7.4",
+    "vitest": "^0.7.4",
+    "unocss": "^0.39.1",
+    "vite": "^2.9.12",
+    "vite-plugin-solid": "2.2.6",
+    "solid-js": "^1.4.4"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.4.0"
+  }
 }

README.md

@@ -14,4 +14,6 @@ <p>
 
+- [`makeMediaQueryListener`](#makeMediaQueryListener) - Listen for changes to provided Media Query.
 - [`createMediaQuery`](#createMediaQuery) - Creates a very simple and straightforward media query monitor.
 - [`createBreakpoints`](#createBreakpoints) - Creates a multi-breakpoint monitor to make responsive components easily.
+- [`usePrefersDark`](#usePrefersDark) - Provides a signal indicating if the user has requested dark color theme.
 
@@ -26,6 +28,18 @@ ## Installation
 
-## Reactive Primitives:
+## `makeMediaQueryListener`
 
-### `createMediaQuery`
+Attaches a MediaQuery listener to window, listeneing to changes to provided query
 
+```ts
+import { makeMediaQueryListener } from "@solid-primitives/media";
+
+const clear = makeMediaQueryListener("(max-width: 767px)", e => {
+  console.log(e.matches);
+});
+// remove listeners (will happen also on cleanup)
+clear();
+```
+
+## `createMediaQuery`
+
 Creates a very simple and straightforward media query monitor.
@@ -42,3 +56,3 @@
 
-### `createBreakpoints`
+## `createBreakpoints`
 
@@ -90,2 +104,27 @@ Creates a multi-breakpoint monitor to make responsive components easily.
 
+## `usePrefersDark`
+
+Provides a signal indicating if the user has requested dark color theme. The setting is being watched with a [Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
+
+### How to use it
+
+```ts
+import { usePrefersDark } from "@solid-primitives/media";
+
+const prefersDark = usePrefersDark();
+createEffect(() => {
+  prefersDark(); // => boolean
+});
+```
+
+### Server fallback
+
+`usePrefersDark` accepts a `serverFallback` argument — value that should be returned on the server — defaults to `false`.
+
+```ts
+const prefersDark = usePrefersDark(true);
+// will return true on the server
+prefersDark();
+```
+
 ## Changelog
@@ -120,2 +159,12 @@
 
+1.3.0
+
+Added `makeMediaQueryListener`, implementation improvements
+
+2.0.0
+
+Add `usePrefersDark`.
+
+Remove the default export. (`createMediaQuery` will only be available as named export)
+
 </details>
@@ -122,0 +171,0 @@

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18938

increased by12.07%

Number of lines in readme file

170

increased by40.5%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

4

increased by300%

Dev dependency count

11

increased by22.22%

Lines of code

264

decreased by-14.29%

Dependency changes

• + Added@solid-primitives/event-listener@^2.2.0

• + Added@solid-primitives/rootless@^1.1.0

• + Added@solid-primitives/utils@^2.1.1

• + Added@solid-primitives/event-listener@2.4.0(transitive)

• + Added@solid-primitives/rootless@1.5.0(transitive)

• + Added@solid-primitives/utils@2.2.16.3.0(transitive)