build: switch to microbundle

Author: thebuilder

.editorconfig

@@ -5,8 +5,8 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm"
-    directory: "/"
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "monthly"
-      time: "07:00"
+      interval: 'monthly'
+      time: '07:00'

.github/dependabot.yml

@@ -1,4 +1,4 @@
 module.exports = {
   stories: ['../src/stories/**/*.@(story|stories).@(ts|tsx|js|jsx|mdx)'],
   addons: ['@storybook/addon-actions', '@storybook/addon-viewport'],
-}
+};

.storybook/main.js

@@ -2,7 +2,7 @@
 <style>
   body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+      Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
     padding: 0;
     margin: 0;
     color: #0c0c0c;

.storybook/preview-head.html

@@ -1,8 +1,8 @@
-import React from 'react'
-import { addDecorator, addParameters } from '@storybook/react'
-import { create } from '@storybook/theming'
-import 'intersection-observer'
-import { Global } from '@emotion/react'
+import React from 'react';
+import { addDecorator, addParameters } from '@storybook/react';
+import { create } from '@storybook/theming';
+import 'intersection-observer';
+import { Global } from '@emotion/react';
 
 addParameters({
   options: {
@@ -14,7 +14,7 @@ addParameters({
     isFullscreen: false,
     panelPosition: 'bottom',
   },
-})
+});
 
 addDecorator((storyFn) => (
   <>
@@ -32,4 +32,4 @@ addDecorator((storyFn) => (
     />
     {storyFn()}
   </>
-))
+));

.storybook/preview.js

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017 React Intersection Observer authors
+Copyright (c) 2020 React Intersection Observer authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

LICENSE

@@ -55,7 +55,7 @@ npm install react-intersection-observer --save
 #### `useInView`
 
 ```js
-const [ref, inView, entry] = useInView(options)
+const [ref, inView, entry] = useInView(options);
 ```
 
 React Hooks make it easy to monitor the `inView` state of your components. Call
@@ -66,21 +66,21 @@ Assign the `ref` to the DOM element you want to monitor, and the hook will
 report the status.
 
 ```jsx
-import React from 'react'
-import { useInView } from 'react-intersection-observer'
+import React from 'react';
+import { useInView } from 'react-intersection-observer';
 
 const Component = () => {
   const [ref, inView, entry] = useInView({
     /* Optional options */
     threshold: 0,
-  })
+  });
 
   return (
     <div ref={ref}>
       <h2>{`Header inside viewport ${inView}.`}</h2>
     </div>
-  )
-}
+  );
+};
 ```
 
 [![Edit react-intersection-observer](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-intersection-observer-ud2vo?fontsize=14&hidenavigation=1&theme=dark)
@@ -99,7 +99,7 @@ on `entry`, giving you access to all the details about the current intersection
 state.
 
 ```jsx
-import { InView } from 'react-intersection-observer'
+import { InView } from 'react-intersection-observer';
 
 const Component = () => (
   <InView>
@@ -109,9 +109,9 @@ const Component = () => (
       </div>
     )}
   </InView>
-)
+);
 
-export default Component
+export default Component;
 ```
 
 ### Plain children
@@ -122,15 +122,15 @@ state in your own component. Any extra props you add to `<InView>` will be
 passed to the HTML element, allowing you set the `className`, `style`, etc.
 
 ```jsx
-import { InView } from 'react-intersection-observer'
+import { InView } from 'react-intersection-observer';
 
 const Component = () => (
   <InView as="div" onChange={(inView, entry) => console.log('Inview:', inView)}>
     <h2>Plain children are always rendered. Use onChange to monitor state.</h2>
   </InView>
-)
+);
 
-export default Component
+export default Component;
 ```
 
 > ⚠️ When rendering a plain child, make sure you keep your HTML output semantic.
@@ -157,15 +157,15 @@ argument for the hooks.
 > avoid the component re-rendering too often. For example:
 
 ```js
-const THRESHOLD = [0.25, 0.5, 0.75] // Store multiple thresholds in a constant
+const THRESHOLD = [0.25, 0.5, 0.75]; // Store multiple thresholds in a constant
 const MyComponent = () => {
-  const [ref, inView, entry] = useInView({ threshold: THRESHOLD })
+  const [ref, inView, entry] = useInView({ threshold: THRESHOLD });
   return (
     <div ref={ref}>
       Triggered at intersection ratio {entry.intersectionRatio}
     </div>
-  )
-}
+  );
+};
 ```
 
 ### InView Props
@@ -195,25 +195,25 @@ few ideas for how you can use it.
 You can wrap multiple `ref` assignments in a single `useCallback`:
 
 ```js
-import React, { useRef } from 'react'
-import { useInView } from 'react-intersection-observer'
+import React, { useRef } from 'react';
+import { useInView } from 'react-intersection-observer';
 
 function Component(props) {
-  const ref = useRef()
-  const [inViewRef, inView] = useInView()
+  const ref = useRef();
+  const [inViewRef, inView] = useInView();
 
   // Use `useCallback` so we don't recreate the function on each render - Could result in infinite loop
   const setRefs = useCallback(
     (node) => {
       // Ref's from useRef needs to have the node assigned to `current`
-      ref.current = node
+      ref.current = node;
       // Callback refs, like the one from `useInView`, is a function that takes the node as an argument
-      inViewRef(node)
+      inViewRef(node);
     },
     [inViewRef],
-  )
+  );
 
-  return <div ref={setRefs}>Shared ref is visible: {inView}</div>
+  return <div ref={setRefs}>Shared ref is visible: {inView}</div>;
 }
 ```
 
@@ -258,23 +258,23 @@ Call the `intersectionMockInstance` method with an element, to get the (mocked)
 ### Test Example
 
 ```js
-import React from 'react'
-import { render } from 'react-testing-library'
-import { useInView } from 'react-intersection-observer'
-import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'
+import React from 'react';
+import { render } from 'react-testing-library';
+import { useInView } from 'react-intersection-observer';
+import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
 
 const HookComponent = ({ options }) => {
-  const [ref, inView] = useInView(options)
-  return <div ref={ref}>{inView.toString()}</div>
-}
+  const [ref, inView] = useInView(options);
+  return <div ref={ref}>{inView.toString()}</div>;
+};
 
 test('should create a hook inView', () => {
-  const { getByText } = render(<HookComponent />)
+  const { getByText } = render(<HookComponent />);
 
   // This causes all (existing) IntersectionObservers to be set as intersecting
-  mockAllIsIntersecting(true)
-  getByText('true')
-})
+  mockAllIsIntersecting(true);
+  getByText('true');
+});
 ```
 
 ## Intersection Observer
@@ -301,7 +301,7 @@ yarn add intersection-observer
 Then import it in your app:
 
 ```js
-import 'intersection-observer'
+import 'intersection-observer';
 ```
 
 If you are using Webpack (or similar) you could use
@@ -315,7 +315,7 @@ this:
  **/
 async function loadPolyfills() {
   if (typeof window.IntersectionObserver === 'undefined') {
-    await import('intersection-observer')
+    await import('intersection-observer');
   }
 }
 ```

README.md

@@ -36,16 +36,16 @@ build it according to your needs.
 > is a small hook that detects support for `loading` as a side effect.
 
 ```jsx
-import React from 'react'
-import useNativeLazyLoading from '@charlietango/use-native-lazy-loading'
-import { useInView } from 'react-intersection-observer'
+import React from 'react';
+import useNativeLazyLoading from '@charlietango/use-native-lazy-loading';
+import { useInView } from 'react-intersection-observer';
 
 const LazyImage = ({ width, height, src, ...rest }) => {
-  const supportsLazyLoading = useNativeLazyLoading()
+  const supportsLazyLoading = useNativeLazyLoading();
   const [ref, inView] = useInView({
     triggerOnce: true,
     rootMargin: '200px 0px',
-  })
+  });
 
   return (
     <div
@@ -67,10 +67,10 @@ const LazyImage = ({ width, height, src, ...rest }) => {
         />
       ) : null}
     </div>
-  )
-}
+  );
+};
 
-export default LazyImage
+export default LazyImage;
 ```
 
 **See [Codesandbox](https://codesandbox.io/embed/lazy-image-load-mjsgc)**
@@ -88,23 +88,23 @@ for an IntersectionObserver.
   have it go inwards. You can also use a percentage value, instead of pixels.
 
 ```jsx
-import React from 'react'
-import { useInView } from 'react-intersection-observer'
-import { motion } from 'framer-motion'
+import React from 'react';
+import { useInView } from 'react-intersection-observer';
+import { motion } from 'framer-motion';
 
 const LazyAnimation = () => {
   const [ref, inView] = useInView({
     rootMargin: '-100px 0px',
-  })
+  });
 
   return (
     <motion.div ref={ref} style={{ opacity: inView ? 1 : 0 }}>
       <span aria-label="Wave">👋</span>
     </motion.div>
-  )
-}
+  );
+};
 
-export default LazyAnimation
+export default LazyAnimation;
 ```
 
 ## Track impressions
@@ -121,24 +121,27 @@ fire an event on your tracking service.
   have it go inwards. You can also use a percentage value, instead of pixels.
 
 ```jsx
-import React, { useEffect } from 'react'
-import { useInView } from 'react-intersection-observer'
+import React, { useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
 
 const TrackImpression = () => {
-  const [ref, inView] = useInView({ triggerOnce: true, rootMargin: '-100px 0' })
+  const [ref, inView] = useInView({
+    triggerOnce: true,
+    rootMargin: '-100px 0',
+  });
   useEffect(() => {
     if (inView) {
       // Fire a tracking event to your tracking service of choice.
-      dataLayer.push('Section shown') // Here's a GTM dataLayer push
+      dataLayer.push('Section shown'); // Here's a GTM dataLayer push
     }
-  }, [inView])
+  }, [inView]);
 
   return (
     <div ref={ref}>
       Exemplars sunt zeluss de bassus fuga. Credere velox ducunt ad audax amor.
     </div>
-  )
-}
+  );
+};
 
-export default TrackImpression
+export default TrackImpression;
 ```