@opensea/react-media - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

dist/index.d.ts

@@ -26,23 +26,23 @@ import * as React from 'react';
         Media: (props: ({
-            children: React.ReactNode | ((className: string) => React.ReactNode);
+            children: React.ReactNode | ((className: string, renderChildren: boolean) => React.ReactNode);
         } & {
             at: keyof TBreakpoints;
         }) | ({
-            children: React.ReactNode | ((className: string) => React.ReactNode);
+            children: React.ReactNode | ((className: string, renderChildren: boolean) => React.ReactNode);
         } & {
             lessThan: keyof TBreakpoints;
         }) | ({
-            children: React.ReactNode | ((className: string) => React.ReactNode);
+            children: React.ReactNode | ((className: string, renderChildren: boolean) => React.ReactNode);
         } & {
             lessThanOrEqual: keyof TBreakpoints;
         }) | ({
-            children: React.ReactNode | ((className: string) => React.ReactNode);
+            children: React.ReactNode | ((className: string, renderChildren: boolean) => React.ReactNode);
         } & {
             greaterThan: keyof TBreakpoints;
         }) | ({
-            children: React.ReactNode | ((className: string) => React.ReactNode);
+            children: React.ReactNode | ((className: string, renderChildren: boolean) => React.ReactNode);
         } & {
             greaterThanOrEqual: keyof TBreakpoints;
         }) | ({
-            children: React.ReactNode | ((className: string) => React.ReactNode);
+            children: React.ReactNode | ((className: string, renderChildren: boolean) => React.ReactNode);
         } & {
@@ -49,0 +49,0 @@ between: [keyof TBreakpoints, keyof TBreakpoints];

dist/index.js

@@ -1,3 +0,3 @@
-"use strict";var b=Object.create;var l=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var F=(e,r)=>{for(var i in r)l(e,i,{get:r[i],enumerable:!0})},P=(e,r,i,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of G(r))!D.call(e,o)&&o!==i&&l(e,o,{get:()=>r[o],enumerable:!(a=H(r,o))||a.enumerable});return e};var y=(e,r,i)=>(i=e!=null?b(j(e)):{},P(r||!e||!e.__esModule?l(i,"default",{value:e,enumerable:!0}):i,e)),X=e=>P(l({},"__esModule",{value:!0}),e);var J={};F(J,{createMedia:()=>V,useIsHydrated:()=>S,useWindowSize:()=>z});module.exports=X(J);var v=require("use-context-selector");var m=y(require("react")),k=require("use-context-selector");var c=require("react"),x=!1,S=()=>{let[e,r]=(0,c.useState)(x);return(0,c.useEffect)(()=>{x=!0,e||r(!0)},[]),e};var s="media",p=({media:e,className:r})=>`@media ${e}{.${r}{display:none!important;}}`,g=e=>Object.keys(e);var C=(e,r,{betweenVariant:i="start-inclusive"}={})=>{let a=(t,n)=>t===void 0?!1:t<=e[n],o=(t,n)=>t===void 0?!1:t<e[n],f=(t,n)=>t===void 0?!1:t>e[n],M=(t,n)=>t===void 0?!1:t>=e[n],T=(t,n)=>{if(t===void 0)return!1;let[d,u]=n;return i==="end-inclusive"?t>e[d]&&t<=e[u]:t>=e[d]&&t<e[u]},N=t=>{let[n,d]=t;return i==="end-inclusive"?`${s}-greaterThan-${n.toString()} ${s}-at-${d.toString()}`:`${s}-greaterThanOrEqual-${n.toString()} ${s}-lessThan-${d.toString()}`},R=t=>"at"in t?[t.at,a]:"lessThan"in t?[t.lessThan,o]:"lessThanOrEqual"in t?[t.lessThanOrEqual,a]:"greaterThan"in t?[t.greaterThan,f]:"greaterThanOrEqual"in t?[t.greaterThanOrEqual,M]:[t.between,T],q=t=>"at"in t||"lessThanOrEqual"in t?"at":"lessThan"in t?"lessThan":"greaterThan"in t?"greaterThan":"greaterThanOrEqual",A=(t,n)=>`${s}-${q(n)}-${t.toString()}`;return t=>{let{children:n}=t,[d,u]=R(t),W=S(),_=(0,k.useContextSelector)(r,L=>u(L.width,d));if(typeof window!="undefined"&&W&&!_)return null;let B=Array.isArray(d)?N(d):A(d,t);return typeof n=="function"?m.default.createElement(m.default.Fragment,null,n(B)):m.default.createElement("div",{className:B},n)}};var E=y(require("react")),$=require("use-context-selector");var w=y(require("lodash.throttle")),h=require("react"),z=(e={width:void 0,height:void 0})=>{let[r,i]=(0,h.useState)(e);return(0,h.useEffect)(()=>{let a=()=>{i({width:window.innerWidth,height:window.innerHeight})},o=(0,w.default)(a,100);return window.addEventListener("resize",o),a(),()=>window.removeEventListener("resize",o)},[]),r};var O=({initialWindowSize:e})=>{let r=(0,$.createContext)(e);return{SizeProvider:({children:a})=>{let o=z(e);return E.default.createElement(r.Provider,{value:o},a)},SizeContext:r}};function K(e,{initialWindowSize:r={},betweenVariant:i}={}){let{SizeProvider:a,SizeContext:o}=O({initialWindowSize:r});function f(T){return(0,v.useContextSelector)(o,T)}return{Media:C(e,o,{betweenVariant:i}),SizeProvider:a,useSizeContextSelector:f}}var I=e=>{let r=[];for(let i of g(e)){let a=e[i];r.push(p({media:`(min-width:${a+1}px)`,className:`${s}-at-${i.toString()}`})),r.push(p({media:`(min-width:${a}px)`,className:`${s}-lessThan-${i.toString()}`})),r.push(p({media:`(max-width:${a-1}px)`,className:`${s}-greaterThanOrEqual-${i.toString()}`})),r.push(p({media:`(max-width:${a}px)`,className:`${s}-greaterThan-${i.toString()}`}))}return r.join(`
-`)};function V(e,r={}){function i(){return I(e)}return{createMediaStyle:i,breakpoints:e,prepareComponents:()=>K(e,r)}}0&&(module.exports={createMedia,useIsHydrated,useWindowSize});
+"use strict";var V=Object.create;var c=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(e,r)=>{for(var i in r)c(e,i,{get:r[i],enumerable:!0})},k=(e,r,i,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of Q(r))!Y.call(e,o)&&o!==i&&c(e,o,{get:()=>r[o],enumerable:!(a=J(r,o))||a.enumerable});return e};var P=(e,r,i)=>(i=e!=null?V(U(e)):{},k(r||!e||!e.__esModule?c(i,"default",{value:e,enumerable:!0}):i,e)),ee=e=>k(c({},"__esModule",{value:!0}),e);var re={};Z(re,{createMedia:()=>te,useIsHydrated:()=>m,useWindowSize:()=>h});module.exports=ee(re);var q=require("use-context-selector");var p=P(require("react")),O=require("use-context-selector");var C=require("react"),w=()=>{let e=(0,C.useRef)(!0);return e.current?(e.current=!1,!0):!1};var S=require("react"),E=!1,m=()=>{let[e,r]=(0,S.useState)(E);return(0,S.useEffect)(()=>{E=!0,e||r(!0)},[]),e};var s="media",l=({media:e,className:r})=>`@media ${e}{.${r}{display:none!important;}}`,$=e=>Object.keys(e);var v=(e,r,{betweenVariant:i="start-inclusive"}={})=>{let a=(t,n)=>t===void 0?!1:t<=e[n],o=(t,n)=>t===void 0?!1:t<e[n],z=(t,n)=>t===void 0?!1:t>e[n],x=(t,n)=>t===void 0?!1:t>=e[n],T=(t,n)=>{if(t===void 0)return!1;let[d,u]=n;return i==="end-inclusive"?t>e[d]&&t<=e[u]:t>=e[d]&&t<e[u]},b=t=>{let[n,d]=t;return i==="end-inclusive"?`${s}-greaterThan-${n.toString()} ${s}-at-${d.toString()}`:`${s}-greaterThanOrEqual-${n.toString()} ${s}-lessThan-${d.toString()}`},L=t=>"at"in t?[t.at,a]:"lessThan"in t?[t.lessThan,o]:"lessThanOrEqual"in t?[t.lessThanOrEqual,a]:"greaterThan"in t?[t.greaterThan,z]:"greaterThanOrEqual"in t?[t.greaterThanOrEqual,x]:[t.between,T],_=t=>"at"in t||"lessThanOrEqual"in t?"at":"lessThan"in t?"lessThan":"greaterThan"in t?"greaterThan":"greaterThanOrEqual",H=(t,n)=>`${s}-${_(n)}-${t.toString()}`;return t=>{let{children:n}=t,[d,u]=L(t),g=(0,p.useId)(),F=typeof window!="undefined",G=w(),j=m(),D=(0,O.useContextSelector)(r,B=>u(B.width,d)),y=Array.isArray(d)?b(d):H(d,t);y+=` ${g}`;let M=!0;if(F&&!D){if(j)return null;if(G){let B=document.getElementsByClassName(g);Array.from(B).forEach(X=>{X.innerHTML=""})}M=!1}return typeof n=="function"?p.default.createElement(p.default.Fragment,null,n(y,M)):p.default.createElement("div",{className:y},M?n:null)}};var K=P(require("react")),R=require("use-context-selector");var I=P(require("lodash.throttle")),f=require("react"),h=(e={width:void 0,height:void 0})=>{let[r,i]=(0,f.useState)(e);return(0,f.useEffect)(()=>{let a=()=>{i({width:window.innerWidth,height:window.innerHeight})},o=(0,I.default)(a,100);return window.addEventListener("resize",o),a(),()=>window.removeEventListener("resize",o)},[]),r};var N=({initialWindowSize:e})=>{let r=(0,R.createContext)(e);return{SizeProvider:({children:a})=>{let o=h(e);return K.default.createElement(r.Provider,{value:o},a)},SizeContext:r}};function A(e,{initialWindowSize:r={},betweenVariant:i}={}){let{SizeProvider:a,SizeContext:o}=N({initialWindowSize:r});function z(T){return(0,q.useContextSelector)(o,T)}return{Media:v(e,o,{betweenVariant:i}),SizeProvider:a,useSizeContextSelector:z}}var W=e=>{let r=[];for(let i of $(e)){let a=e[i];r.push(l({media:`(min-width:${a+1}px)`,className:`${s}-at-${i.toString()}`})),r.push(l({media:`(min-width:${a}px)`,className:`${s}-lessThan-${i.toString()}`})),r.push(l({media:`(max-width:${a-1}px)`,className:`${s}-greaterThanOrEqual-${i.toString()}`})),r.push(l({media:`(max-width:${a}px)`,className:`${s}-greaterThan-${i.toString()}`}))}return r.join(`
+`)};function te(e,r={}){function i(){return W(e)}return{createMediaStyle:i,breakpoints:e,prepareComponents:()=>A(e,r)}}0&&(module.exports={createMedia,useIsHydrated,useWindowSize});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@opensea/react-media",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Javascript library to deal with media queries in isomorphic React applications.",
   "license": "MIT",
   "author": "OpenSea Developers",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
@@ -15,36 +17,28 @@ "./dist",
     "build": "tsup src/index.ts",
-    "build:check-types": "attw --pack",
-    "check-types": "tsc --noEmit",
+    "build:typecheck": "attw --pack",
     "eslint:check": "eslint . --max-warnings 0",
     "eslint:fix": "eslint . --fix",
-    "lint": "concurrently \"npm run check-types\" \"npm run prettier:check\" \"npm run prettier:package.json:check\" \"npm run eslint:check\"",
-    "prepare": "husky install",
-    "prettier:check": "prettier --check .",
-    "prettier:fix": "prettier --write .",
-    "prettier:package.json:check": "prettier-package-json --list-different",
-    "test": "vitest"
+    "lint": "concurrently \"pnpm typecheck\" \"pnpm eslint:check\"",
+    "prepack": "sed -i.bak -e 's|\"main\": \"./src/index.ts\"|\"main\": \"./dist/index.js\"|; s|\"module\": \"./src/index.ts\"|\"module\": \"./dist/index.mjs\"|; s|\"types\": \"./src/index.ts\"|\"types\": \"./dist/index.d.ts\"|' package.json && rm package.json.bak",
+    "postpack": "sed -i.bak -e 's|\"main\": \"./dist/index.js\"|\"main\": \"./src/index.ts\"|; s|\"module\": \"./dist/index.mjs\"|\"module\": \"./src/index.ts\"|; s|\"types\": \"./dist/index.d.ts\"|\"types\": \"./src/index.ts\"|' package.json && rm package.json.bak",
+    "test": "vitest",
+    "test:coverage": "pnpm test -- --coverage",
+    "typecheck": "tsc --noEmit"
   },
-  "sideEffects": false,
-  "types": "dist/index.d.ts",
   "dependencies": {
     "lodash.throttle": "4.1.1"
   },
-  "peerDependencies": {
-    "react": "*",
-    "use-context-selector": "*"
-  },
   "devDependencies": {
-    "@arethetypeswrong/cli": "0.12.2",
-    "@testing-library/jest-dom": "6.1.4",
-    "@testing-library/react": "14.0.0",
-    "@types/lodash.throttle": "4.1.8",
-    "@types/react": "18.2.31",
-    "@typescript-eslint/eslint-plugin": "6.9.0",
-    "@typescript-eslint/parser": "6.9.0",
-    "@vitejs/plugin-react": "4.1.0",
+    "@arethetypeswrong/cli": "0.13.2",
+    "@testing-library/jest-dom": "6.1.5",
+    "@testing-library/react": "14.1.2",
+    "@types/lodash.throttle": "4.1.9",
+    "@types/react": "18.2.41",
+    "@typescript-eslint/eslint-plugin": "6.13.1",
+    "@typescript-eslint/parser": "6.13.1",
+    "@vitejs/plugin-react": "4.2.0",
     "@vitest/coverage-v8": "0.34.6",
-    "concurrently": "8.2.2",
     "confusing-browser-globals": "1.0.11",
-    "esbuild": "0.19.5",
-    "eslint": "8.52.0",
+    "esbuild": "0.19.8",
+    "eslint": "8.55.0",
     "eslint-import-resolver-typescript": "3.6.1",
@@ -54,26 +48,13 @@ "eslint-plugin-import": "2.29.0",
     "eslint-plugin-react-hooks": "4.6.0",
-    "husky": "8.0.3",
-    "jsdom": "22.1.0",
-    "lint-staged": "15.0.2",
-    "prettier": "3.0.3",
-    "prettier-package-json": "2.8.0",
+    "jsdom": "23.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tsup": "7.2.0",
+    "tsup": "8.0.1",
     "use-context-selector": "1.4.1",
     "vitest": "0.34.6"
   },
-  "lint-staged": {
-    "package.json": [
-      "prettier-package-json --write"
-    ],
-    "**/*.{ts,tsx,js,jsx,html,md,mdx,yml,json}": [
-      "prettier --write"
-    ]
-  },
-  "prettier": {
-    "arrowParens": "avoid",
-    "semi": false,
-    "trailingComma": "all"
+  "peerDependencies": {
+    "react": "*",
+    "use-context-selector": "*"
   }
 }

src/index.ts

@@ -1,7 +0,7 @@
-import { prepareComponents } from "./prepareComponents"
-import { Size } from "./SizeProvider.react"
-import { generateMediaStyles } from "./stylesheet"
-import { CreateMediaOptions } from "./types"
-import { useIsHydrated } from "./useIsHydrated"
-import { useWindowSize } from "./useWindowSize"
+import { prepareComponents } from "./prepareComponents";
+import { Size } from "./SizeProvider.react";
+import { generateMediaStyles } from "./stylesheet";
+import { CreateMediaOptions } from "./types";
+import { useIsHydrated } from "./useIsHydrated";
+import { useWindowSize } from "./useWindowSize";
 
@@ -13,3 +13,3 @@ export function createMedia<
   function createMediaStyle() {
-    return generateMediaStyles(breakpoints)
+    return generateMediaStyles(breakpoints);
   }
@@ -21,6 +21,5 @@
     prepareComponents: () => prepareComponents(breakpoints, options),
-  }
+  };
 }
 
-// eslint-disable-next-line import/no-unused-modules
-export { useIsHydrated, useWindowSize }
+export { useIsHydrated, useWindowSize };

src/prepareComponents.ts

@@ -1,7 +0,7 @@
-"use client"
+"use client";
 
-import { useContextSelector } from "use-context-selector"
-import { createMediaComponent } from "./Media.react"
-import { Size, createSizeProvider } from "./SizeProvider.react"
-import { CreateMediaOptions } from "./types"
+import { useContextSelector } from "use-context-selector";
+import { createMediaComponent } from "./Media.react";
+import { Size, createSizeProvider } from "./SizeProvider.react";
+import { CreateMediaOptions } from "./types";
 
@@ -20,5 +20,5 @@ export function prepareComponents<
     initialWindowSize,
-  })
+  });
 
-  type SizeWithInitialSize = TSize & Partial<Size>
+  type SizeWithInitialSize = TSize & Partial<Size>;
 
@@ -31,3 +31,3 @@ function useSizeContextSelector<Selected>(
       selector,
-    )
+    );
   }
@@ -39,5 +39,5 @@
     { betweenVariant },
-  )
+  );
 
-  return { Media, SizeProvider, useSizeContextSelector }
+  return { Media, SizeProvider, useSizeContextSelector };
 }

src/stylesheet.ts

@@ -1,2 +0,2 @@
-import { MEDIA_CLASS_NAME_PREFIX, generateRuleSet, keys } from "./utils"
+import { MEDIA_CLASS_NAME_PREFIX, generateRuleSet, keys } from "./utils";
 
@@ -6,6 +6,6 @@ export const generateMediaStyles = <T extends Record<string, number>>(
 ) => {
-  const classNames: string[] = []
+  const classNames: string[] = [];
 
   for (const breakpoint of keys(breakpoints)) {
-    const breakpointPixels = breakpoints[breakpoint]
+    const breakpointPixels = breakpoints[breakpoint];
     classNames.push(
@@ -16,3 +16,3 @@ generateRuleSet({
       }),
-    )
+    );
     classNames.push(
@@ -23,3 +23,3 @@ generateRuleSet({
       }),
-    )
+    );
     classNames.push(
@@ -30,3 +30,3 @@ generateRuleSet({
       }),
-    )
+    );
     classNames.push(
@@ -37,6 +37,6 @@ generateRuleSet({
       }),
-    )
+    );
   }
 
-  return classNames.join("\n")
-}
+  return classNames.join("\n");
+};

src/types.ts

@@ -1,9 +0,9 @@
-import { CreateMediaComponentOptions } from "./Media.react"
-import { Size } from "./SizeProvider.react"
+import { CreateMediaComponentOptions } from "./Media.react";
+import { Size } from "./SizeProvider.react";
 
-export type BetweenVariant = "start-inclusive" | "end-inclusive"
+export type BetweenVariant = "start-inclusive" | "end-inclusive";
 
 export type CreateMediaOptions<TSize extends Partial<Size>> =
   CreateMediaComponentOptions & {
-    initialWindowSize?: TSize
-  }
+    initialWindowSize?: TSize;
+  };

src/useIsHydrated.ts

@@ -1,19 +0,19 @@
-"use client"
+"use client";
 
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
 
-let _isHydrated = false
+let _isHydrated = false;
 
 export const useIsHydrated = () => {
-  const [isHydrated, setIsHydrated] = useState(_isHydrated)
+  const [isHydrated, setIsHydrated] = useState(_isHydrated);
 
   useEffect(() => {
-    _isHydrated = true
+    _isHydrated = true;
     if (!isHydrated) {
-      setIsHydrated(true)
+      setIsHydrated(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, []);
 
-  return isHydrated
-}
+  return isHydrated;
+};

src/useWindowSize.ts

@@ -1,6 +0,6 @@
-"use client"
+"use client";
 
-import throttle from "lodash.throttle"
-import { useEffect, useState } from "react"
-import { Size } from "./SizeProvider.react"
+import throttle from "lodash.throttle";
+import { useEffect, useState } from "react";
+import { Size } from "./SizeProvider.react";
 
@@ -13,3 +13,3 @@ export const useWindowSize = <T extends Partial<Size>>(
 ) => {
-  const [windowSize, setWindowSize] = useState<T>(initialWindowSize)
+  const [windowSize, setWindowSize] = useState<T>(initialWindowSize);
 
@@ -21,16 +21,16 @@ useEffect(() => {
         height: window.innerHeight,
-      } as T)
-    }
+      } as T);
+    };
 
-    const onResize = throttle(handleResize, 100)
+    const onResize = throttle(handleResize, 100);
 
-    window.addEventListener("resize", onResize)
+    window.addEventListener("resize", onResize);
 
     // Call handler right away so state gets updated with initial window size
-    handleResize()
+    handleResize();
 
-    return () => window.removeEventListener("resize", onResize)
-  }, [])
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
 
-  return windowSize
-}
+  return windowSize;
+};

src/utils.ts

@@ -1,7 +0,7 @@
-export const MEDIA_CLASS_NAME_PREFIX = "media"
+export const MEDIA_CLASS_NAME_PREFIX = "media";
 
 type GenerateRuleSetParams = {
-  media: string
-  className: string
-}
+  media: string;
+  className: string;
+};
 
@@ -12,6 +12,6 @@ export const generateRuleSet = ({
 }: GenerateRuleSetParams) => {
-  return `@media ${media}{.${className}{display:none!important;}}`
-}
+  return `@media ${media}{.${className}{display:none!important;}}`;
+};
 
 export const keys = <T extends object>(obj: T): Array<keyof T> =>
-  Object.keys(obj) as Array<keyof T>
+  Object.keys(obj) as Array<keyof T>;

New alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Fixed 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

Improved metrics

Total package byte prevSize

65566

increased by1.14%

Dev dependency count

22

decreased by-18.52%

Lines of code

461

increased by7.71%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

17

decreased by-5.56%

Number of medium quality alerts

2

increased by100%

Number of lines in readme file

0

decreased by-100%

No dependency changes