@solid-primitives/media - npm Package Compare versions

Comparing version 2.3.5 to 4.0.0-next.0

dist/index.js

 import {} from "solid-js";
-import { isServer } from "solid-js/web";
+import { isServer } from "@solidjs/web";
 import { makeEventListener } from "@solid-primitives/event-listener";
@@ -4,0 +4,0 @@ import { entries, noop, createHydratableSignal } from "@solid-primitives/utils";

package.json

 {
   "name": "@solid-primitives/media",
-  "version": "2.3.5",
+  "version": "4.0.0-next.0",
   "description": "Primitives for media query and device features",
@@ -30,3 +30,4 @@ "author": "David Di Biase <[e-mail]>",
     ],
-    "category": "Display & Media"
+    "category": "Display & Media",
+    "gzip": 1285
   },
@@ -59,13 +60,15 @@ "keywords": [
   "dependencies": {
-    "@solid-primitives/event-listener": "^2.4.5",
-    "@solid-primitives/rootless": "^1.5.3",
-    "@solid-primitives/static-store": "^0.1.3",
-    "@solid-primitives/utils": "^6.4.0"
+    "@solid-primitives/event-listener": "^3.0.0-next.0",
+    "@solid-primitives/rootless": "^2.0.0-next.0",
+    "@solid-primitives/static-store": "^1.0.0-next.0",
+    "@solid-primitives/utils": "^7.0.0-next.0"
   },
   "peerDependencies": {
-    "solid-js": "^1.6.12"
+    "@solidjs/web": "^2.0.0-beta.15",
+    "solid-js": "^2.0.0-beta.15"
   },
   "typesVersions": {},
   "devDependencies": {
-    "solid-js": "^1.9.7"
+    "@solidjs/web": "2.0.0-beta.15",
+    "solid-js": "2.0.0-beta.15"
   },
@@ -72,0 +75,0 @@ "scripts": {

README.md

@@ -7,5 +7,6 @@ <p>
 
-[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/media?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/media)
+[![size](https://img.shields.io/badge/size-1.28_kB-blue?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/media)
 [![size](https://img.shields.io/npm/v/@solid-primitives/media?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/media)
 [![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)
+[![tested with vitest](https://img.shields.io/badge/tested_with-vitest-6E9F18?style=for-the-badge&logo=vitest)](https://vitest.dev)
 
@@ -25,4 +26,8 @@ Collection of reactive primitives to deal with media queries.
 yarn add @solid-primitives/media
+# or
+pnpm add @solid-primitives/media
 ```
 
+> **Requires Solid.js v2.0 (beta.7+)**
+
 ## `makeMediaQueryListener`
@@ -82,16 +87,19 @@
 
-  createEffect(() => {
-    console.log(matches.sm); // true when screen width >= 640px
-    console.log(matches.lg); // true when screen width >= 1024px
-    console.log(matches.xl); // true when screen width >= 1280px
-  });
+  createEffect(
+    () => [matches.sm, matches.lg, matches.xl],
+    ([sm, lg, xl]) => {
+      console.log(sm); // true when screen width >= 640px
+      console.log(lg); // true when screen width >= 1024px
+      console.log(xl); // true when screen width >= 1280px
+    },
+  );
 
   return (
     <div
-      classList={{
-        "text-tiny flex flex-column": true, // tiny text with flex column layout
-        "text-small": matches.sm, // small text with flex column layout
-        "text-base flex-row": matches.lg, // base text with flex row layout
-        "text-huge": matches.xl, // huge text with flex row layout
-      }}
+      class={[
+        "text-tiny flex-column flex", // tiny text with flex column layout
+        matches.sm && "text-small", // small text with flex column layout
+        matches.lg && "flex-row text-base", // base text with flex row layout
+        matches.xl && "text-huge", // huge text with flex row layout
+      ]}
     >
@@ -175,5 +183,3 @@ <Switch fallback={<div>Smallest</div>}>
 const prefersDark = createPrefersDark();
-createEffect(() => {
-  prefersDark(); // => boolean
-});
+createEffect(prefersDark, dark => console.log("prefers dark:", dark));
 ```
@@ -199,5 +205,3 @@
 const prefersDark = usePrefersDark();
-createEffect(() => {
-  prefersDark(); // => boolean
-});
+createEffect(prefersDark, dark => console.log("prefers dark:", dark));
 ```
@@ -204,0 +208,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Improved metrics

Total package byte prevSize

19632

2.14%

Number of lines in readme file

230

1.77%

Worsened metrics

Dependency count

6

20%

Dev dependency count

2

100%

Number of low quality alerts

1

Infinity%

Dependency changes

• + Added

  @solid-primitives/event-listener@3.0.0-next.3
  (transitive)

• + Added

  @solid-primitives/rootless@2.0.0-next.2
  (transitive)

• + Added

  @solid-primitives/static-store@1.0.0-next.2
  (transitive)

• + Added

  @solid-primitives/utils@7.0.0-next.4
  (transitive)

• + Added

  @solidjs/signals@2.0.0-rc.0
  (transitive)

• + Added

  @solidjs/web@2.0.0-rc.0
  (transitive)

• + Added

  solid-js@2.0.0-rc.0
  (transitive)

• - Removed

  @solid-primitives/event-listener@2.4.6
  (transitive)

• - Removed

  @solid-primitives/rootless@1.5.4
  (transitive)

• - Removed

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

• - Removed

  @solid-primitives/utils@6.4.1
  (transitive)

• - Removed

  solid-js@1.9.15
  (transitive)

• Updated

  @solid-primitives/event-listener@^3.0.0-next.0

• Updated

  @solid-primitives/rootless@^2.0.0-next.0

• Updated

  @solid-primitives/static-store@^1.0.0-next.0

• Updated

  @solid-primitives/utils@^7.0.0-next.0