fix: change globalObject value in build

Author: llorca

dist/index.d.ts

@@ -11,4 +11,3 @@ export interface ILayeredImageProps extends React.HTMLProps<HTMLDivElement> {
   shadowOpacity?: React.CSSProperties["opacity"]
 }
 export declare const LayeredImage: React.FC<ILayeredImageProps>
-export default LayeredImage

dist/index.js

@@ -8,11 +8,6 @@ interface Size {
   height: number
 }
 
-interface Position {
-  x: number
-  y: number
-}
-
 enum Interaction {
   None = "NONE",
   Resize = "RESIZE",
@@ -55,7 +50,6 @@ export const LayeredImage: React.FC<ILayeredImageProps> = ({
   style,
 }) => {
   const [size, setSize] = useState<Size>({ width: 0, height: 0 })
-  const [scrollPosition, setScrollPosition] = useState<Position>({ x: 0, y: 0 })
   const [interaction, setInteraction] = useState<Interaction>(Interaction.None)
   const [loaded, setLoaded] = useState<number>(0)
   const [, setError] = useState<number>(0)
@@ -132,7 +126,18 @@ export const LayeredImage: React.FC<ILayeredImageProps> = ({
     preventDefault = false,
   ) => {
     const { width, height } = _interaction === Interaction.Resize ? getDimensions() : size
-    const { x: scrollLeft, y: scrollTop } = scrollPosition
+
+    const scrollLeft =
+      document.documentElement.scrollLeft ||
+      document.scrollingElement.scrollLeft ||
+      window.scrollX ||
+      window.pageXOffset
+    // prettier-ignore
+    const scrollTop =
+      document.documentElement.scrollTop ||
+      document.scrollingElement.scrollTop ||
+      window.scrollY ||
+      window.pageYOffset
 
     const containerRect = elementsRef.current.container.current.getBoundingClientRect()
 
@@ -231,20 +236,6 @@ export const LayeredImage: React.FC<ILayeredImageProps> = ({
 
   useEffect(() => {
     const handleWindowResize = () => computeStyles(Interaction.Resize)
-    const handleWindowScroll = () => {
-      setScrollPosition({
-        x:
-          document.documentElement.scrollLeft ||
-          document.scrollingElement.scrollLeft ||
-          window.scrollX ||
-          window.pageXOffset,
-        y:
-          document.documentElement.scrollTop ||
-          document.scrollingElement.scrollTop ||
-          window.scrollY ||
-          window.pageYOffset,
-      })
-    }
 
     layers.forEach((layer) => {
       const image = new Image()
@@ -255,11 +246,9 @@ export const LayeredImage: React.FC<ILayeredImageProps> = ({
     })
 
     window.addEventListener("resize", handleWindowResize)
-    window.addEventListener("scroll", handleWindowScroll)
 
     return () => {
       window.removeEventListener("resize", handleWindowResize)
-      window.removeEventListener("scroll", handleWindowScroll)
     }
   }, [])
 

dist/index.js.map

@@ -3,7 +3,13 @@
  */
 export const applyStyles = (element: HTMLDivElement, styles: React.CSSProperties) => {
   for (const [style, value] of Object.entries(styles)) {
-    element.style[style] = value
+    if (isSafariDesktop()) {
+      element.style[style] = value
+    } else {
+      requestAnimationFrame(() => {
+        element.style[style] = value
+      })
+    }
   }
 }
 
@@ -21,3 +27,12 @@ export const clamp = (value: number, min: number, max: number) => {
  */
 // eslint-disable-next-line @typescript-eslint/ban-types
 export const isFunction = (value: unknown): value is Function => typeof value === "function"
+
+/**
+ * Detect whether the current browser is a desktop version of Safari.
+ */
+export const isSafariDesktop = () => {
+  const { userAgent, vendor } = navigator
+
+  return /Safari/i.test(userAgent) && /Apple Computer/.test(vendor) && !/Mobi|Android/i.test(userAgent)
+}

lib/LayeredImage.tsx

@@ -13,6 +13,7 @@ module.exports = {
     filename: "index.js",
     library: "react-layered-image",
     libraryTarget: "umd",
+    globalObject: "this",
   },
   devServer: {
     contentBase: "./example/build",

lib/utils.ts

@@ -15,6 +15,7 @@ module.exports = {
     filename: "index.js",
     library: "react-layered-image",
     libraryTarget: "umd",
+    globalObject: "this",
   },
   devtool: "source-map",
   externals: {