@opensea/react-media - npm Package Compare versions

Comparing version 1.0.9-rc5 to 1.0.9-rc6

dist/index.d.ts

@@ -8,4 +8,2 @@ import * as React from 'react';
 
-type BetweenVariant = "start-inclusive" | "end-inclusive";
-
 type CreateMediaComponentOptions = {
@@ -15,2 +13,7 @@ betweenVariant?: BetweenVariant;
 
+type BetweenVariant = "start-inclusive" | "end-inclusive";
+type CreateMediaOptions<TSize extends Partial<Size>> = CreateMediaComponentOptions & {
+    initialWindowSize?: TSize;
+};
+
 declare const useIsHydrated: () => boolean;
@@ -20,6 +23,3 @@
 
-type CreateMediaOptions<TSize extends Partial<Size>> = CreateMediaComponentOptions & {
-    initialWindowSize?: TSize;
-};
-declare function createMedia<TBreakpoints extends Record<string, number>, TSize extends Partial<Size>>(breakpoints: TBreakpoints, { initialWindowSize, betweenVariant, }?: CreateMediaOptions<TSize>): {
+declare function createMedia<TBreakpoints extends Record<string, number>, TSize extends Partial<Size>>(breakpoints: TBreakpoints, options?: CreateMediaOptions<TSize>): {
     createMediaStyle: () => string;
@@ -26,0 +26,0 @@ breakpoints: TBreakpoints;

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,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});
+"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});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@opensea/react-media",
-  "version": "1.0.9-rc5",
+  "version": "1.0.9-rc6",
   "description": "Javascript library to deal with media queries in isomorphic React applications.",
@@ -54,3 +54,2 @@ "license": "MIT",
     "lint-staged": "14.0.1",
-    "microbundle": "0.15.1",
     "prettier": "3.0.2",
@@ -57,0 +56,0 @@ "prettier-package-json": "2.8.0",

src/index.ts

@@ -1,26 +0,12 @@
-import { useContextSelector } from "use-context-selector"
-import {
-  CreateMediaComponentOptions,
-  createMediaComponent,
-} from "./Media.react"
-import { Size, createSizeProvider } from "./SizeProvider.react"
+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"
 
-type CreateMediaOptions<TSize extends Partial<Size>> =
-  CreateMediaComponentOptions & {
-    initialWindowSize?: TSize
-  }
-
 export function createMedia<
   TBreakpoints extends Record<string, number>,
   TSize extends Partial<Size>,
->(
-  breakpoints: TBreakpoints,
-  {
-    initialWindowSize = {} as TSize,
-    betweenVariant,
-  }: CreateMediaOptions<TSize> = {},
-) {
+>(breakpoints: TBreakpoints, options: CreateMediaOptions<TSize> = {}) {
   function createMediaStyle() {
@@ -30,30 +16,7 @@ return generateMediaStyles(breakpoints)
 
-  function prepareComponents() {
-    const { SizeProvider, SizeContext } = createSizeProvider<TSize>({
-      initialWindowSize,
-    })
-
-    type SizeWithInitialSize = TSize & Partial<Size>
-
-    function useSizeContextSelector<Selected>(
-      selector: (value: SizeWithInitialSize) => Selected,
-    ) {
-      return useContextSelector<SizeWithInitialSize, Selected>(
-        SizeContext,
-        selector,
-      )
-    }
-
-    const Media = createMediaComponent<TBreakpoints, TSize>(
-      breakpoints,
-      SizeContext,
-      {
-        betweenVariant,
-      },
-    )
-
-    return { Media, SizeProvider, useSizeContextSelector }
+  return {
+    createMediaStyle,
+    breakpoints,
+    prepareComponents: () => prepareComponents(breakpoints, options),
   }
-
-  return { createMediaStyle, breakpoints, prepareComponents }
 }
@@ -60,0 +23,0 @@

src/types.ts

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

src/useIsHydrated.ts

@@ -0,1 +1,3 @@
+"use client"
+
 import { useEffect, useState } from "react"
@@ -2,0 +4,0 @@

src/useWindowSize.ts

@@ -0,1 +1,3 @@
+"use client"
+
 import throttle from "lodash.throttle"
@@ -2,0 +4,0 @@ import { useEffect, useState } from "react"

No alert changes

Improved metrics

Total package byte prevSize

63807

2.03%

Dev dependency count

26

-3.7%

Number of package files

18

5.88%

Lines of code

430

2.87%

No dependency changes