@opensea/react-media - npm Package Compare versions

Comparing version 1.0.9-rc3 to 1.0.9-rc4

dist/index.d.ts

@@ -14,4 +14,2 @@ import * as React from 'react';
 
-declare const generateMediaStyles: <T extends Record<string, number>>(breakpoints: T) => string;
-
 declare const useIsHydrated: () => boolean;
@@ -26,34 +24,36 @@
     createMediaStyle: () => string;
-    Media: (props: ({
-        children: React.ReactNode | ((className: string) => React.ReactNode);
-    } & {
-        at: keyof TBreakpoints;
-    }) | ({
-        children: React.ReactNode | ((className: string) => React.ReactNode);
-    } & {
-        lessThan: keyof TBreakpoints;
-    }) | ({
-        children: React.ReactNode | ((className: string) => React.ReactNode);
-    } & {
-        lessThanOrEqual: keyof TBreakpoints;
-    }) | ({
-        children: React.ReactNode | ((className: string) => React.ReactNode);
-    } & {
-        greaterThan: keyof TBreakpoints;
-    }) | ({
-        children: React.ReactNode | ((className: string) => React.ReactNode);
-    } & {
-        greaterThanOrEqual: keyof TBreakpoints;
-    }) | ({
-        children: React.ReactNode | ((className: string) => React.ReactNode);
-    } & {
-        between: [keyof TBreakpoints, keyof TBreakpoints];
-    })) => React.JSX.Element | null;
-    SizeProvider: ({ children }: {
-        children: React.ReactNode;
-    }) => React.JSX.Element;
     breakpoints: TBreakpoints;
-    useSizeContextSelector: <Selected>(selector: (value: TSize & Partial<Size>) => Selected) => Selected;
+    prepareComponents: () => {
+        Media: (props: ({
+            children: React.ReactNode | ((className: string) => React.ReactNode);
+        } & {
+            at: keyof TBreakpoints;
+        }) | ({
+            children: React.ReactNode | ((className: string) => React.ReactNode);
+        } & {
+            lessThan: keyof TBreakpoints;
+        }) | ({
+            children: React.ReactNode | ((className: string) => React.ReactNode);
+        } & {
+            lessThanOrEqual: keyof TBreakpoints;
+        }) | ({
+            children: React.ReactNode | ((className: string) => React.ReactNode);
+        } & {
+            greaterThan: keyof TBreakpoints;
+        }) | ({
+            children: React.ReactNode | ((className: string) => React.ReactNode);
+        } & {
+            greaterThanOrEqual: keyof TBreakpoints;
+        }) | ({
+            children: React.ReactNode | ((className: string) => React.ReactNode);
+        } & {
+            between: [keyof TBreakpoints, keyof TBreakpoints];
+        })) => React.JSX.Element | null;
+        SizeProvider: ({ children }: {
+            children: React.ReactNode;
+        }) => React.JSX.Element;
+        useSizeContextSelector: <Selected>(selector: (value: TSize & Partial<Size>) => Selected) => Selected;
+    };
 };
 
-export { createMedia, generateMediaStyles, useIsHydrated, useWindowSize };
+export { createMedia, useIsHydrated, useWindowSize };

dist/index.js

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

package.json

 {
   "name": "@opensea/react-media",
-  "version": "1.0.9-rc3",
+  "version": "1.0.9-rc4",
   "description": "Javascript library to deal with media queries in isomorphic React applications.",
@@ -5,0 +5,0 @@ "license": "MIT",

src/index.ts

@@ -30,35 +30,33 @@ import { useContextSelector } from "use-context-selector"
 
-  const { SizeProvider, SizeContext } = createSizeProvider<TSize>({
-    initialWindowSize,
-  })
+  function prepareComponents() {
+    const { SizeProvider, SizeContext } = createSizeProvider<TSize>({
+      initialWindowSize,
+    })
 
-  type SizeWithInitialSize = TSize & Partial<Size>
+    type SizeWithInitialSize = TSize & Partial<Size>
 
-  function useSizeContextSelector<Selected>(
-    selector: (value: SizeWithInitialSize) => Selected,
-  ) {
-    return useContextSelector<SizeWithInitialSize, Selected>(
+    function useSizeContextSelector<Selected>(
+      selector: (value: SizeWithInitialSize) => Selected,
+    ) {
+      return useContextSelector<SizeWithInitialSize, Selected>(
+        SizeContext,
+        selector,
+      )
+    }
+
+    const Media = createMediaComponent<TBreakpoints, TSize>(
+      breakpoints,
       SizeContext,
-      selector,
+      {
+        betweenVariant,
+      },
     )
+
+    return { Media, SizeProvider, useSizeContextSelector }
   }
 
-  const Media = createMediaComponent<TBreakpoints, TSize>(
-    breakpoints,
-    SizeContext,
-    {
-      betweenVariant,
-    },
-  )
-
-  return {
-    createMediaStyle,
-    Media,
-    SizeProvider,
-    breakpoints,
-    useSizeContextSelector,
-  }
+  return { createMediaStyle, breakpoints, prepareComponents }
 }
 
 // eslint-disable-next-line import/no-unused-modules
-export { useIsHydrated, useWindowSize, generateMediaStyles }
+export { useIsHydrated, useWindowSize }

Fixed alerts

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

62537

0.52%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Lines of code

418

-0.48%

No dependency changes