Restructure publishing (#222)

* v8.22.6

* Restructure how files are published, so we publish the "dist" directory

This flattens the list of files published, creating cleaner imports
As part of this, types have also been moved around

* Sync with Prettier

Author: thebuilder

package.json

@@ -1,17 +1,13 @@
 {
   "name": "react-intersection-observer",
-  "version": "8.22.5",
+  "version": "8.22.6",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
-  "main": "dist/react-intersection-observer.cjs.js",
-  "module": "dist/react-intersection-observer.esm.js",
-  "unpkg": "dist/react-intersection-observer.umd.min.js",
-  "typings": "dist/index.d.ts",
+  "main": "react-intersection-observer.cjs.js",
+  "module": "react-intersection-observer.esm.js",
+  "unpkg": "react-intersection-observer.umd.min.js",
+  "typings": "index.d.ts",
   "author": "Daniel Schmidt",
-  "files": [
-    "dist/*",
-    "test-utils.js",
-    "test-utils.d.ts"
-  ],
+  "private": true,
   "repository": {
     "type": "git",
     "url": "https://github.com/thebuilder/react-intersection-observer.git"
@@ -49,6 +45,7 @@
     "build": "run-s build:*",
     "build:lib": "rollup -c",
     "build:ts": "tsc -p tsconfig.build.json && tsc -p tsconfig.test.json",
+    "build:copy": "copyfiles -f package.json README.md LICENSE dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.optionalDependencies=undefined; this.scripts=undefined; this.husky=undefined; this.prettier=undefined; this.jest=undefined; this.eslintConfig=undefined; this.eslintIgnore=undefined; this.np=undefined;\"",
     "dev": "concurrently -k -r 'jest --watch' 'yarn run storybook'",
     "lint": "eslint . --ext js,ts,tsx",
     "preversion": "yarn build",
@@ -57,6 +54,9 @@
     "storybook:build": "build-storybook --output-dir example",
     "test": "jest"
   },
+  "np": {
+    "contents": "dist"
+  },
   "husky": {
     "hooks": {
       "pre-commit": "tsc && lint-staged"
@@ -106,7 +106,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "invariant": "^2.0.0"
+    "invariant": "^2.2.4"
   },
   "peerDependencies": {
     "react": "^15.0.0 || ^16.0.0 || ^17.0.0"
@@ -136,6 +136,7 @@
     "babel-jest": "^24.5.0",
     "babel-loader": "^8.0.5",
     "concurrently": "^4.1.0",
+    "copyfiles": "^2.1.0",
     "coveralls": "^3.0.3",
     "eslint": "^5.15.2",
     "eslint-config-react-app": "^4.0.0",
@@ -148,6 +149,7 @@
     "intersection-observer": "^0.6.0",
     "jest": "^24.5.0",
     "jest-dom": "^3.1.3",
+    "json": "^9.0.6",
     "lint-staged": "^8.1.5",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.16.2",

rollup.config.js

@@ -26,7 +26,7 @@ const getBabelOptions = ({ useESModules }) => ({
 export default [
   {
     input: './src/index.tsx',
-    output: { file: pkg.module, format: 'esm', exports: 'named' },
+    output: { file: 'dist/' + pkg.module, format: 'esm', exports: 'named' },
     external,
     plugins: [
       resolve({ extensions }),
@@ -35,7 +35,7 @@ export default [
   },
   {
     input: './src/index.tsx',
-    output: { file: pkg.main, format: 'cjs', exports: 'named' },
+    output: { file: 'dist/' + pkg.main, format: 'cjs', exports: 'named' },
     external,
     plugins: [
       resolve({ extensions }),
@@ -45,7 +45,7 @@ export default [
   {
     input: './src/index.tsx',
     output: {
-      file: pkg.unpkg,
+      file: 'dist/' + pkg.unpkg,
       format: 'umd',
       name: 'ReactIntersectionObserver',
       globals,

src/InView.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import invariant from 'invariant'
 import { observe, unobserve } from './intersection'
-import { IntersectionObserverProps, PlainChildrenProps } from './typings/types'
+import { IntersectionObserverProps, PlainChildrenProps } from './index'
 
 type State = {
   inView: boolean

src/typings/global-types.ts src/global-types.tssrc/typings/global-types.ts renamed to src/global-types.ts

@@ -1,5 +1,73 @@
+import * as React from 'react'
 import { InView } from './InView'
+
 export { InView } from './InView'
 export { useInView } from './useInView'
-
 export default InView
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
+
+export type ObserverInstanceCallback = (
+  inView: boolean,
+  intersection: IntersectionObserverEntry,
+) => void
+
+export type ObserverInstance = {
+  callback: ObserverInstanceCallback
+  element: Element
+  inView: boolean
+  observerId: string
+  observer: IntersectionObserver
+  thresholds: number[]
+}
+
+interface RenderProps {
+  inView: boolean
+  entry: IntersectionObserverEntry | undefined
+  ref: React.RefObject<any> | ((node?: Element | null) => void)
+}
+
+export interface IntersectionOptions extends IntersectionObserverInit {
+  /** Only trigger the inView callback once */
+  triggerOnce?: boolean
+}
+
+export interface IntersectionObserverProps extends IntersectionOptions {
+  /**
+   * Children expects a function that receives an object
+   * contain an `inView` boolean and `ref` that should be
+   * assigned to the element root.
+   */
+  children: (fields: RenderProps) => React.ReactNode
+
+  /** Call this function whenever the in view state changes */
+  onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void
+}
+
+/**
+ * Types specific to the PlainChildren rendering of InView
+ * */
+export type PlainChildrenProps = IntersectionOptions & {
+  children: React.ReactNode
+
+  /**
+   * Render the wrapping element as this element.
+   * @default `'div'`
+   */
+  as?: React.ReactType<any>
+
+  /**
+   * Element tag to use for the wrapping component
+   * @deprecated Replace with the 'as' prop
+   */
+  tag?: React.ReactType<any>
+
+  /** Call this function whenever the in view state changes */
+  onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void
+} & Omit<React.HTMLProps<HTMLElement>, 'onChange'>
+
+export type InViewHookResponse = [
+  ((node?: Element | null) => void),
+  boolean,
+  IntersectionObserverEntry | undefined
+]

src/index.tsx

@@ -1,18 +1,5 @@
 import invariant from 'invariant'
-
-type Callback = (
-  inView: boolean,
-  intersection: IntersectionObserverEntry,
-) => void
-
-export type ObserverInstance = {
-  callback: Callback
-  element: Element
-  inView: boolean
-  observerId: string
-  observer: IntersectionObserver
-  thresholds: number[]
-}
+import { ObserverInstance, ObserverInstanceCallback } from './index'
 
 const INSTANCE_MAP: Map<Element, ObserverInstance> = new Map()
 const OBSERVER_MAP: Map<string, IntersectionObserver> = new Map()
@@ -43,7 +30,7 @@ function getRootId(root?: Element | null) {
  */
 export function observe(
   element: Element,
-  callback: Callback,
+  callback: ObserverInstanceCallback,
   options: IntersectionObserverInit = {},
 ) {
   // IntersectionObserver needs a threshold to trigger, so set it to 0 if it's not defined.

src/intersection.ts

@@ -1,14 +1,16 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react'
 import { observe, unobserve } from './intersection'
-import { HookResponse, IntersectionOptions } from './typings/types'
+import { InViewHookResponse, IntersectionOptions } from './index'
 
 type State = {
   inView: boolean
   entry?: IntersectionObserverEntry
 }
 
-export function useInView(options: IntersectionOptions = {}): HookResponse {
+export function useInView(
+  options: IntersectionOptions = {},
+): InViewHookResponse {
   const [ref, setRef] = React.useState<Element | null | undefined>(null)
   const [state, setState] = React.useState<State>({
     inView: false,

src/typings/types.ts

@@ -1,10 +1,9 @@
 import * as React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
-import { useInView } from '../src/index'
+import { IntersectionOptions, useInView } from '../src/index'
 import ScrollWrapper from './ScrollWrapper/index'
 import { CSSProperties } from 'react'
-import { IntersectionOptions } from '../src/typings/types'
 import { withKnobs, number, boolean } from '@storybook/addon-knobs'
 import Status from './Status'
 

src/useInView.tsx

@@ -4,8 +4,8 @@
     "module": "commonjs",
     "target": "es6",
     "declaration": true,
-    "emitDeclarationOnly": true,
-    "outDir": ".",
+    "emitDeclarationOnly": false,
+    "outDir": "dist",
     "noEmit": false
   },
   "files": ["src/test-utils.ts"]