@solid-primitives/media - npm Package Compare versions

Comparing version 2.2.10 to 2.3.0

dist/index.d.ts

@@ -1,3 +0,2 @@
-import { Accessor } from 'solid-js';
-
+import { Accessor } from "solid-js";
 /**
@@ -15,3 +14,3 @@ * attaches a MediaQuery listener to window, listeneing to changes to provided query
  */
-declare function makeMediaQueryListener(query: string | MediaQueryList, callback: (e: MediaQueryListEvent) => void): VoidFunction;
+export declare function makeMediaQueryListener(query: string | MediaQueryList, callback: (e: MediaQueryListEvent) => void): VoidFunction;
 /**
@@ -30,3 +29,3 @@ * Creates a very simple and straightforward media query monitor.
  */
-declare function createMediaQuery(query: string, serverFallback?: boolean): () => boolean;
+export declare function createMediaQuery(query: string, serverFallback?: boolean): () => boolean;
 /**
@@ -44,3 +43,3 @@ * 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).
  */
-declare function createPrefersDark(serverFallback?: boolean): () => boolean;
+export declare function createPrefersDark(serverFallback?: boolean): () => boolean;
 /**
@@ -58,5 +57,5 @@ * 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).
  */
-declare const usePrefersDark: () => Accessor<boolean>;
-type Breakpoints = Record<string, string>;
-type Matches<T extends Breakpoints> = {
+export declare const usePrefersDark: () => Accessor<boolean>;
+export type Breakpoints = Record<string, string>;
+export type Matches<T extends Breakpoints> = {
     readonly [K in keyof T]: K extends "key" ? never : boolean;
@@ -66,3 +65,3 @@ } & {
 };
-interface BreakpointOptions<T extends Breakpoints> {
+export interface BreakpointOptions<T extends Breakpoints> {
     /** If true watches changes and reports state reactively */
@@ -93,3 +92,3 @@ watchChange?: boolean;
  */
-declare function createBreakpoints<T extends Breakpoints>(breakpoints: T, options?: BreakpointOptions<T>): Matches<T>;
+export declare function createBreakpoints<T extends Breakpoints>(breakpoints: T, options?: BreakpointOptions<T>): Matches<T>;
 /**
@@ -102,4 +101,2 @@ * Creates a sorted copy of the Breakpoints Object
  */
-declare function sortBreakpoints(breakpoints: Breakpoints): Breakpoints;
-
-export { type BreakpointOptions, type Breakpoints, type Matches, createBreakpoints, createMediaQuery, createPrefersDark, makeMediaQueryListener, sortBreakpoints, usePrefersDark };
+export declare function sortBreakpoints(breakpoints: Breakpoints): Breakpoints;

dist/index.js

@@ -1,74 +0,133 @@
-import { isServer } from 'solid-js/web';
-import { makeEventListener } from '@solid-primitives/event-listener';
-import { noop, createHydratableSignal, entries } from '@solid-primitives/utils';
-import { createHydratableStaticStore } from '@solid-primitives/static-store';
-import { createHydratableSingletonRoot } from '@solid-primitives/rootless';
-
-// src/index.ts
-function makeMediaQueryListener(query, callback) {
-  if (isServer) {
-    return noop;
-  }
-  const mql = typeof query === "string" ? window.matchMedia(query) : query;
-  return makeEventListener(mql, "change", callback);
+import { isServer } from "solid-js/web";
+import { makeEventListener } from "@solid-primitives/event-listener";
+import { entries, noop, createHydratableSignal } from "@solid-primitives/utils";
+import { createHydratableStaticStore } from "@solid-primitives/static-store";
+import { createHydratableSingletonRoot } from "@solid-primitives/rootless";
+/**
+ * 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()
+ */
+export function makeMediaQueryListener(query, callback) {
+    if (isServer) {
+        return noop;
+    }
+    const mql = typeof query === "string" ? window.matchMedia(query) : query;
+    return makeEventListener(mql, "change", callback);
 }
-function createMediaQuery(query, serverFallback = false) {
-  if (isServer) {
-    return () => serverFallback;
-  }
-  const mql = window.matchMedia(query);
-  const [state, setState] = createHydratableSignal(serverFallback, () => mql.matches);
-  const update = () => setState(mql.matches);
-  makeEventListener(mql, "change", update);
-  return state;
+/**
+ * Creates a very simple and straightforward media query monitor.
+ *
+ * @param query Media query to listen for
+ * @param fallbackState Server fallback state *(Defaults to `false`)*
+ * @returns Boolean value if media query is met or not
+ *
+ * @example
+ * ```ts
+ * const isSmall = createMediaQuery("(max-width: 767px)");
+ * console.log(isSmall());
+ * ```
+ */
+export function createMediaQuery(query, serverFallback = false) {
+    if (isServer) {
+        return () => serverFallback;
+    }
+    const mql = window.matchMedia(query);
+    const [state, setState] = createHydratableSignal(serverFallback, () => mql.matches);
+    const update = () => setState(mql.matches);
+    makeEventListener(mql, "change", update);
+    return state;
 }
-function createPrefersDark(serverFallback) {
-  return createMediaQuery("(prefers-color-scheme: dark)", serverFallback);
+/**
+ * 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).
+ *
+ * @param serverFallback value that should be returned on the server — defaults to `false`
+ *
+ * @returns a boolean signal
+ * @example
+ * const prefersDark = usePrefersDark();
+ * createEffect(() => {
+ *    prefersDark() // => boolean
+ * });
+ */
+export function createPrefersDark(serverFallback) {
+    return createMediaQuery("(prefers-color-scheme: dark)", serverFallback);
 }
-var usePrefersDark = /* @__PURE__ */ createHydratableSingletonRoot(
-  createPrefersDark.bind(void 0, false)
-);
-var getEmptyMatchesFromBreakpoints = (breakpoints) => entries(breakpoints).reduce(
-  (matches, [key]) => {
+/**
+ * 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 [singleton root primitive](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) except if during hydration.
+ *
+ * @returns a boolean signal
+ * @example
+ * const prefersDark = usePrefersDark();
+ * createEffect(() => {
+ *    prefersDark() // => boolean
+ * });
+ */
+export const usePrefersDark = /*#__PURE__*/ createHydratableSingletonRoot(createPrefersDark.bind(void 0, false));
+const getEmptyMatchesFromBreakpoints = (breakpoints) => entries(breakpoints).reduce((matches, [key]) => {
     matches[key] = false;
     return matches;
-  },
-  {}
-);
-function createBreakpoints(breakpoints, options = {}) {
-  const fallback = Object.defineProperty(
-    options.fallbackState ?? getEmptyMatchesFromBreakpoints(breakpoints),
-    "key",
-    { enumerable: false, get: () => Object.keys(breakpoints).pop() }
-  );
-  if (isServer || !window.matchMedia) return fallback;
-  const { mediaFeature = "min-width", watchChange = true } = options;
-  const [matches, setMatches] = createHydratableStaticStore(fallback, () => {
-    const matches2 = {};
-    entries(breakpoints).forEach(([token, width]) => {
-      const mql = window.matchMedia(`(${mediaFeature}: ${width})`);
-      matches2[token] = mql.matches;
-      if (watchChange)
-        makeEventListener(
-          mql,
-          "change",
-          (e) => setMatches(token, e.matches)
-        );
+}, {});
+/**
+ * Creates a multi-breakpoint monitor to make responsive components easily.
+ *
+ * @param breakpoints Map of breakpoint names and their widths
+ * @param options Options to customize watch, fallback, responsive mode.
+ * @returns map of currently matching breakpoints.
+ *
+ * @example
+ * ```ts
+ * const breakpoints = {
+    sm: "640px",
+    lg: "1024px",
+    xl: "1280px",
+  };
+ * const matches = createBreakpoints(breakpoints);
+ * console.log(matches.lg);
+ * ```
+ */
+export function createBreakpoints(breakpoints, options = {}) {
+    const fallback = Object.defineProperty(options.fallbackState ?? getEmptyMatchesFromBreakpoints(breakpoints), "key", { enumerable: false, get: () => Object.keys(breakpoints).pop() });
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (isServer || !window.matchMedia)
+        return fallback;
+    const { mediaFeature = "min-width", watchChange = true } = options;
+    const [matches, setMatches] = createHydratableStaticStore(fallback, () => {
+        const matches = {};
+        entries(breakpoints).forEach(([token, width]) => {
+            const mql = window.matchMedia(`(${mediaFeature}: ${width})`);
+            matches[token] = mql.matches;
+            if (watchChange)
+                makeEventListener(mql, "change", (e) => setMatches(token, e.matches));
+        });
+        return matches;
     });
-    return matches2;
-  });
-  return Object.defineProperty(matches, "key", {
-    enumerable: false,
-    get: () => Object.keys(matches).findLast((token) => matches[token])
-  });
+    return Object.defineProperty(matches, "key", {
+        enumerable: false,
+        get: () => Object.keys(matches).findLast(token => matches[token]),
+    });
 }
-function sortBreakpoints(breakpoints) {
-  const sorted = entries(breakpoints);
-  sorted.sort((x, y) => parseInt(x[1], 10) - parseInt(y[1], 10));
-  return sorted.reduce((obj, [key, value]) => {
-    obj[key] = value;
-    return obj;
-  }, {});
+/**
+ * Creates a sorted copy of the Breakpoints Object
+ * If you want to use the result of `createBreakpoints()` with string coercion:
+ * ```ts
+ * createBreakpoints(sortBreakpoints({ tablet: "980px", mobile: "640px" }))
+ * ```
+ */
+export function sortBreakpoints(breakpoints) {
+    const sorted = entries(breakpoints);
+    sorted.sort((x, y) => parseInt(x[1], 10) - parseInt(y[1], 10));
+    return sorted.reduce((obj, [key, value]) => {
+        obj[key] = value;
+        return obj;
+    }, {});
 }
-
-export { createBreakpoints, createMediaQuery, createPrefersDark, makeMediaQueryListener, sortBreakpoints, usePrefersDark };

package.json

 {
   "name": "@solid-primitives/media",
-  "version": "2.2.10",
+  "version": "2.3.0",
   "description": "Primitives for media query and device features",
@@ -47,3 +47,2 @@ "author": "David Di Biase <[e-mail]>",
   "type": "module",
-  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -57,13 +56,9 @@ "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
-    },
-    "require": {
-      "types": "./dist/index.d.cts",
-      "default": "./dist/index.cjs"
     }
   },
   "dependencies": {
-    "@solid-primitives/event-listener": "^2.3.3",
-    "@solid-primitives/rootless": "^1.4.5",
-    "@solid-primitives/static-store": "^0.0.9",
-    "@solid-primitives/utils": "^6.2.3"
+    "@solid-primitives/rootless": "^1.5.0",
+    "@solid-primitives/static-store": "^0.1.0",
+    "@solid-primitives/event-listener": "^2.4.0",
+    "@solid-primitives/utils": "^6.3.0"
   },
@@ -70,0 +65,0 @@ "peerDependencies": {

README.md

@@ -7,3 +7,2 @@ <p>
 
-[![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/media?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/media)
@@ -10,0 +9,0 @@ [![size](https://img.shields.io/npm/v/@solid-primitives/media?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/media)

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

19053

-19.31%

Number of package files

5

-28.57%

Lines of code

228

-6.94%

Number of lines in readme file

226

-0.44%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  @solid-primitives/static-store@0.1.0
  (transitive)

• - Removed

  @solid-primitives/static-store@0.0.9
  (transitive)

• Updated

  @solid-primitives/event-listener@^2.4.0

• Updated

  @solid-primitives/rootless@^1.5.0

• Updated

  @solid-primitives/static-store@^0.1.0

• Updated

  @solid-primitives/utils@^6.3.0