@solid-primitives/media - npm Package Compare versions

Comparing version 2.0.6 to 2.1.0

dist/index.d.ts

 import { Accessor } from 'solid-js';
 
-type Breakpoints = Record<string, string>;
-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;
-}
-
 /**
@@ -34,3 +21,2 @@ * attaches a MediaQuery listener to window, listeneing to changes to provided query
  * @param fallbackState Server fallback state *(Defaults to `false`)*
- * @param watchChange If true watches changes and reports state reactively
  * @returns Boolean value if media query is met or not
@@ -44,4 +30,42 @@ *
  */
-declare const createMediaQuery: (query: string, fallbackState?: boolean, watchChange?: boolean) => Accessor<boolean>;
+declare function createMediaQuery(query: string, serverFallback?: boolean): () => boolean;
 /**
+ * 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
+ * });
+ */
+declare function createPrefersDark(serverFallback?: boolean): () => boolean;
+/**
+ * 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).
+ *
+ * @returns a boolean signal
+ * @example
+ * const prefersDark = usePrefersDark();
+ * createEffect(() => {
+ *    prefersDark() // => boolean
+ * });
+ */
+declare const usePrefersDark: () => Accessor<boolean>;
+type Breakpoints = Record<string, string>;
+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;
+}
+/**
  * Creates a multi-breakpoint monitor to make responsive components easily.
@@ -65,18 +89,3 @@ *
 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, createBreakpoints, createMediaQuery, makeMediaQueryListener, usePrefersDark };
+export { BreakpointOptions, Breakpoints, Matches, createBreakpoints, createMediaQuery, createPrefersDark, makeMediaQueryListener, usePrefersDark };

dist/index.js

@@ -1,2 +0,2 @@
-import { createSignal } from 'solid-js';
+import { sharedConfig, createSignal, createEffect } from 'solid-js';
 import { makeEventListener } from '@solid-primitives/event-listener';
@@ -7,7 +7,2 @@ import { createStaticStore, entries } from '@solid-primitives/utils';
 // src/index.ts
-var getEmptyMatchesFromBreakpoints = (breakpoints) => {
-  const matches = {};
-  entries(breakpoints).forEach(([key]) => matches[key] = false);
-  return matches;
-};
 function makeMediaQueryListener(query, callback) {
@@ -17,9 +12,28 @@ const mql = typeof query === "string" ? window.matchMedia(query) : query;
 }
-var createMediaQuery = (query, fallbackState = false, watchChange = true) => {
+function createMediaQuery(query, serverFallback = false) {
   const mql = window.matchMedia(query);
-  if (!watchChange)
-    return () => mql.matches;
-  const [state, setState] = createSignal(mql.matches);
-  makeEventListener(mql, "change", () => setState(mql.matches));
+  let init = !!sharedConfig.context;
+  const [state, setState] = createSignal(init ? serverFallback : mql.matches, {
+    equals(a, b) {
+      if (init)
+        return init = false;
+      return a === b;
+    }
+  });
+  const update = () => setState(mql.matches);
+  init && createEffect(update);
+  makeEventListener(mql, "change", update);
   return state;
+}
+function createPrefersDark(serverFallback) {
+  return createMediaQuery("(prefers-color-scheme: dark)", serverFallback);
+}
+var sharedPrefersDark = /* @__PURE__ */ createSharedRoot(
+  createPrefersDark.bind(void 0, false)
+);
+var usePrefersDark = () => sharedConfig.context ? createPrefersDark() : sharedPrefersDark();
+var getEmptyMatchesFromBreakpoints = (breakpoints) => {
+  const matches = {};
+  entries(breakpoints).forEach(([key]) => matches[key] = false);
+  return matches;
 };
@@ -44,6 +58,3 @@ function createBreakpoints(breakpoints, options = {}) {
 }
-var usePrefersDark = /* @__PURE__ */ createSharedRoot(
-  createMediaQuery.bind(null, "(prefers-color-scheme: dark)", false, true)
-);
 
-export { createBreakpoints, createMediaQuery, makeMediaQueryListener, usePrefersDark };
+export { createBreakpoints, createMediaQuery, createPrefersDark, makeMediaQueryListener, usePrefersDark };

dist/server.js

 import 'solid-js';
 import '@solid-primitives/event-listener';
 import { noop, entries } from '@solid-primitives/utils';
-import '@solid-primitives/rootless';
+import { createSharedRoot } from '@solid-primitives/rootless';
 
 // src/index.ts
-var getEmptyMatchesFromBreakpoints = (breakpoints) => {
-  const matches = {};
-  entries(breakpoints).forEach(([key]) => matches[key] = false);
-  return matches;
-};
 function makeMediaQueryListener(query, callback) {
@@ -17,6 +12,18 @@ {
 }
-var createMediaQuery = (query, fallbackState = false, watchChange = true) => {
+function createMediaQuery(query, serverFallback = false) {
   {
-    return () => fallbackState;
+    return () => serverFallback;
   }
+}
+function createPrefersDark(serverFallback) {
+  return createMediaQuery("(prefers-color-scheme: dark)", serverFallback);
+}
+/* @__PURE__ */ createSharedRoot(
+  createPrefersDark.bind(void 0, false)
+);
+var usePrefersDark = () => () => false ;
+var getEmptyMatchesFromBreakpoints = (breakpoints) => {
+  const matches = {};
+  entries(breakpoints).forEach(([key]) => matches[key] = false);
+  return matches;
 };
@@ -26,4 +33,3 @@ function createBreakpoints(breakpoints, options = {}) {
 }
-var usePrefersDark = (fallback = false) => () => fallback ;
 
-export { createBreakpoints, createMediaQuery, makeMediaQueryListener, usePrefersDark };
+export { createBreakpoints, createMediaQuery, createPrefersDark, makeMediaQueryListener, usePrefersDark };

package.json

 {
   "name": "@solid-primitives/media",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "description": "Primitives for media query and device features",
@@ -5,0 +5,0 @@ "author": "David Di Biase <[e-mail]>",

README.md

@@ -17,3 +17,3 @@ <p>
 - [`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.
+- [`createPrefersDark`](#createPrefersDark) - Provides a signal indicating if the user has requested dark color theme.
 
@@ -53,2 +53,13 @@ ## Installation
 
+### Server fallback
+
+`createMediaQuery` accepts a `serverFallback` argument — value that should be returned on the server — defaults to `false`.
+
+```ts
+const isSmall = createMediaQuery("(max-width: 767px)", true);
+
+// will return true on the server and during hydration on the client
+console.log(isSmall());
+```
+
 [Working Demo](https://codesandbox.io/s/solid-media-query-5bf16?file=/src/index.tsx)
@@ -103,3 +114,3 @@
 
-## `usePrefersDark`
+## `createPrefersDark`
 
@@ -111,5 +122,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).
 ```ts
-import { usePrefersDark } from "@solid-primitives/media";
+import { createPrefersDark } from "@solid-primitives/media";
 
-const prefersDark = usePrefersDark();
+const prefersDark = createPrefersDark();
 createEffect(() => {
@@ -122,10 +133,25 @@ prefersDark(); // => boolean
 
-`usePrefersDark` accepts a `serverFallback` argument — value that should be returned on the server — defaults to `false`.
+`createPrefersDark` 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
+const prefersDark = createPrefersDark(true);
+// will return true on the server and during hydration on the client
 prefersDark();
 ```
 
+### `usePrefersDark`
+
+This primitive provides a [shared root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot) variant that will reuse the same signal and media query across the whole application.
+
+```ts
+import { usePrefersDark } from "@solid-primitives/media";
+
+const prefersDark = usePrefersDark();
+createEffect(() => {
+  prefersDark(); // => boolean
+});
+```
+
+> Note: `usePrefersDark` will deopt to `createPrefersDark` if used during hydration. (see issue [#310](https://github.com/solidjs-community/solid-primitives/issues/310))
+
 ## Changelog
@@ -132,0 +158,0 @@

No alert changes

Improved metrics

Total package byte prevSize

18961

increased by15.71%

Lines of code

266

increased by22.02%

Number of lines in readme file

159

increased by19.55%

No dependency changes