@opensea/react-media - npm Package Compare versions

Comparing version 4.0.0-rc.1 to 4.0.0-rc.2

dist/index.d.ts

@@ -0,3 +1,3 @@
+import * as _artsy_fresnel_dist_Media from '@artsy/fresnel/dist/Media';
 import * as react from 'react';
-import * as _artsy_fresnel_dist_Media from '@artsy/fresnel/dist/Media';
 import * as _artsy_fresnel from '@artsy/fresnel';
@@ -21,14 +21,12 @@
     breakpoints: TBreakpoints;
-    prepareComponents: () => {
-        Media: react.ComponentType<_artsy_fresnel_dist_Media.MediaProps<keyof TBreakpoints, never>>;
-        SizeProvider: ({ children }: {
-            children: react.ReactNode;
-        }) => react.JSX.Element;
-        useSizeContextSelector: <Selected>(selector: (value: TSize & Partial<Size>) => Selected) => Selected;
-        MediaContextProvider: react.ComponentType<_artsy_fresnel_dist_Media.MediaContextProviderProps<keyof TBreakpoints> & {
-            children: react.ReactNode;
-        }>;
-    };
+    SizeProvider: ({ children }: {
+        children: react.ReactNode;
+    }) => react.JSX.Element;
+    useSizeContextSelector: <Selected>(selector: (value: TSize & Partial<Size>) => Selected) => Selected;
+    Media: react.ComponentType<_artsy_fresnel_dist_Media.MediaProps<keyof TBreakpoints, never>>;
+    MediaContextProvider: react.ComponentType<_artsy_fresnel_dist_Media.MediaContextProviderProps<keyof TBreakpoints> & {
+        children: react.ReactNode;
+    }>;
 };
 
 export { createMedia, useIsHydrated, useWindowSize };

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";"use client";var W=Object.create;var n=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var H=(e,i)=>{for(var t in i)n(e,t,{get:i[t],enumerable:!0})},S=(e,i,t,o)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of I(i))!g.call(e,r)&&r!==t&&n(e,r,{get:()=>i[r],enumerable:!(o=y(i,r))||o.enumerable});return e};var z=(e,i,t)=>(t=e!=null?W(M(e)):{},S(i||!e||!e.__esModule?n(t,"default",{value:e,enumerable:!0}):t,e)),R=e=>S(n({},"__esModule",{value:!0}),e);var E={};H(E,{createMedia:()=>B,useIsHydrated:()=>x,useWindowSize:()=>s});module.exports=R(E);var T=require("@artsy/fresnel");var l=require("@artsy/fresnel"),f=require("use-context-selector");var m=z(require("react")),c=require("use-context-selector");var p=z(require("lodash.throttle")),a=require("react"),s=(e={width:void 0,height:void 0})=>{let[i,t]=(0,a.useState)(e);return(0,a.useEffect)(()=>{let o=()=>{t({width:window.innerWidth,height:window.innerHeight})},r=(0,p.default)(o,100);return window.addEventListener("resize",r),o(),()=>window.removeEventListener("resize",r)},[]),i};var u=({initialWindowSize:e})=>{let i=(0,c.createContext)(e);return{SizeProvider:({children:o})=>{let r=s(e);return m.default.createElement(i.Provider,{value:r},o)},SizeContext:i}};function P(e,{initialWindowSize:i={}}={}){let{SizeProvider:t,SizeContext:o}=u({initialWindowSize:i});function r(C){return(0,f.useContextSelector)(o,C)}let{Media:w,MediaContextProvider:v}=(0,l.createMedia)({breakpoints:e});return{Media:w,SizeProvider:t,useSizeContextSelector:r,MediaContextProvider:v}}var d=require("react"),h=!1,x=()=>{let[e,i]=(0,d.useState)(h);return(0,d.useEffect)(()=>{h=!0,e||i(!0)},[]),e};function B(e,i={}){let{createMediaStyle:t}=(0,T.createMedia)({breakpoints:e});return{createMediaStyle:t,breakpoints:e,prepareComponents:()=>P(e,i)}}0&&(module.exports={createMedia,useIsHydrated,useWindowSize});
+"use strict";var W=Object.create;var n=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var H=(e,i)=>{for(var t in i)n(e,t,{get:i[t],enumerable:!0})},s=(e,i,t,o)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of C(i))!M.call(e,r)&&r!==t&&n(e,r,{get:()=>i[r],enumerable:!(o=y(i,r))||o.enumerable});return e};var z=(e,i,t)=>(t=e!=null?W(I(e)):{},s(i||!e||!e.__esModule?n(t,"default",{value:e,enumerable:!0}):t,e)),g=e=>s(n({},"__esModule",{value:!0}),e);var E={};H(E,{createMedia:()=>R,useIsHydrated:()=>f,useWindowSize:()=>S});module.exports=g(E);var h=require("@artsy/fresnel"),P=require("use-context-selector");var u=z(require("react")),p=require("use-context-selector");var c=z(require("lodash.throttle")),d=require("react"),S=(e={width:void 0,height:void 0})=>{let[i,t]=(0,d.useState)(e);return(0,d.useEffect)(()=>{let o=()=>{t({width:window.innerWidth,height:window.innerHeight})},r=(0,c.default)(o,100);return window.addEventListener("resize",r),o(),()=>window.removeEventListener("resize",r)},[]),i};var l=({initialWindowSize:e})=>{let i=(0,p.createContext)(e);return{SizeProvider:({children:o})=>{let r=S(e);return u.default.createElement(i.Provider,{value:r},o)},SizeContext:i}};var a=require("react"),m=!1,f=()=>{let[e,i]=(0,a.useState)(m);return(0,a.useEffect)(()=>{m=!0,e||i(!0)},[]),e};function R(e,i={}){let{createMediaStyle:t,Media:o,MediaContextProvider:r}=(0,h.createMedia)({breakpoints:e}),{SizeProvider:w,SizeContext:x}=l(i);function v(T){return(0,P.useContextSelector)(x,T)}return{createMediaStyle:t,breakpoints:e,SizeProvider:w,useSizeContextSelector:v,Media:o,MediaContextProvider:r}}0&&(module.exports={createMedia,useIsHydrated,useWindowSize});
 //# sourceMappingURL=index.js.map

package.json

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

src/index.ts

@@ -1,6 +0,4 @@
-"use client";
-
 import { createMedia as artsyCreateMedia } from "@artsy/fresnel";
-import { prepareComponents } from "./prepareComponents";
-import { Size } from "./SizeProvider.react";
+import { useContextSelector } from "use-context-selector";
+import { Size, createSizeProvider } from "./SizeProvider.react";
 import { CreateMediaOptions } from "./types";
@@ -14,8 +12,26 @@ import { useIsHydrated } from "./useIsHydrated";
 >(breakpoints: TBreakpoints, options: CreateMediaOptions<TSize> = {}) {
-  const { createMediaStyle } = artsyCreateMedia({ breakpoints });
+  const { createMediaStyle, Media, MediaContextProvider } = artsyCreateMedia({
+    breakpoints,
+  });
 
+  const { SizeProvider, SizeContext } = createSizeProvider<TSize>(options);
+
+  type SizeWithInitialSize = TSize & Partial<Size>;
+
+  function useSizeContextSelector<Selected>(
+    selector: (value: SizeWithInitialSize) => Selected,
+  ) {
+    return useContextSelector<SizeWithInitialSize, Selected>(
+      SizeContext,
+      selector,
+    );
+  }
+
   return {
     createMediaStyle,
     breakpoints,
-    prepareComponents: () => prepareComponents(breakpoints, options),
+    SizeProvider,
+    useSizeContextSelector,
+    Media,
+    MediaContextProvider,
   };
@@ -22,0 +38,0 @@ }

No alert changes

Worsened metrics

Total package byte prevSize

23948

decreased by-11.06%

Number of package files

12

decreased by-7.69%

Lines of code

153

decreased by-9.47%

No dependency changes