feat: moves to esm (#17)

Author: jacobsfletch

.eslintrc.js .eslintrc.cjs.eslintrc.js renamed to .eslintrc.cjs

@@ -1,8 +1,5 @@
 import React from 'react';
-import {
-  ScrollInfoProvider,
-  // ScrollInfo,
-} from '../src'; // swap '../src' for '../dist/build.bundle' to demo production build
+import { ScrollInfoProvider } from '@faceless-ui/scroll-info';
 // import WithScrollInfo from './WithScrollInfo.demo';
 import UseScrollInfo from './UseScrollInfo.demo';
 // import LogProps from './LogProps';

demo/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IScrollInfoContext } from '../src/ScrollInfoProvider/context';
+import type { IScrollInfoContext } from '../src/types';
 
 const filterObject = () => {
   const seen = new WeakSet();

demo/LogProps.tsx

@@ -1,4 +1,4 @@
-import { useScrollInfo } from '../src'; // swap '../src' for '../dist/build.bundle' to demo production build
+import { useScrollInfo } from '@faceless-ui/scroll-info';
 import LogProps from './LogProps';
 
 const UseScrollInfo: React.FC = () => {

demo/UseScrollInfo.demo.tsx

@@ -1,5 +1,5 @@
-import { withScrollInfo } from '../src'; // swap '../src' for '../dist/build.bundle' to demo production build
-import { IScrollInfoContext } from '../src/ScrollInfoProvider/context';
+import { withScrollInfo } from '@faceless-ui/scroll-info';
+import type { IScrollInfoContext } from '../src/types';
 import LogProps from './LogProps';
 
 const WithScrollInfo: React.FC<{

demo/WithScrollInfo.demo.tsx

@@ -11,6 +11,7 @@
     "name": "Jacob Fletcher",
     "url": "https://jacobsfletch.com"
   },
+  "type": "module",
   "bugs": {
     "url": "https://github.com/faceless-ui/scroll-info/issues",
     "email": "dev@facelessui.com"
@@ -32,9 +33,9 @@
     "ux"
   ],
   "scripts": {
-    "build": "yarn lint && tsc",
-    "build-demo": "yarn lint && webpack --config webpack.demo.config.js",
-    "dev": "webpack-dev-server --hot --config webpack.development.config.js",
+    "build": "yarn lint && tsc --project tsconfig.build.json",
+    "build:demo": "yarn lint && webpack --config webpack.build-demo.config.js",
+    "dev": "webpack-dev-server --hot --config webpack.dev.config.js",
     "lint": "eslint .",
     "test": "jest"
   },
@@ -44,13 +45,12 @@
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "@types/jest": "^27.4.1",
     "@types/node": "^14.14.22",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.18.0",
-    "@typescript-eslint/parser": "^5.18.0",
-    "eslint": "^8.14.0",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.1.5",
     "eslint-plugin-jest-dom": "^4.0.1",
@@ -65,11 +65,11 @@
     "react-dom": "^19.0.0-rc.0",
     "react-refresh": "^0.13.0",
     "react-refresh-typescript": "^2.0.4",
-    "ts-loader": "^9.2.9",
-    "typescript": "^4.6.3",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.8.1"
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.4.5",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
   "files": [
     "dist"

package.json

@@ -1,14 +1,14 @@
 import React, { Fragment } from 'react';
-import useScrollInfo from '../useScrollInfo';
-import { IScrollInfoContext } from '../ScrollInfoProvider/context';
+import { useScrollInfo } from '../useScrollInfo/index.js';
+import { IScrollInfoContext } from '../ScrollInfoProvider/context.js';
 
 export type ChildFunction = (context: IScrollInfoContext) => React.ReactNode; // eslint-disable-line no-unused-vars
 
 export type ScrollInfoProps = {
   children?: React.ReactNode | ChildFunction
 }
 
-const ScrollInfo: React.FC<ScrollInfoProps> = (props) => {
+export const ScrollInfo: React.FC<ScrollInfoProps> = (props) => {
   const { children } = props;
   const scrollInfo = useScrollInfo();
 
@@ -29,5 +29,3 @@ const ScrollInfo: React.FC<ScrollInfoProps> = (props) => {
   }
   return null;
 };
-
-export default ScrollInfo;

src/ScrollInfo/index.tsx

@@ -14,6 +14,4 @@ export interface IScrollInfoContext {
   hasScrolled: boolean,
 }
 
-const ScrollInfoContext = createContext<IScrollInfoContext>({} as IScrollInfoContext);
-
-export default ScrollInfoContext;
+export const ScrollInfoContext = createContext<IScrollInfoContext>({} as IScrollInfoContext);

src/ScrollInfoProvider/context.tsx

@@ -4,7 +4,7 @@ import React, {
   useReducer,
   useRef,
 } from 'react';
-import ScrollInfoContext, { IScrollInfoContext } from '../ScrollInfoProvider/context';
+import { ScrollInfoContext, IScrollInfoContext } from '../ScrollInfoProvider/context.js';
 
 type AnimationRef = React.MutableRefObject<number | null>;
 
@@ -73,7 +73,7 @@ export type ScrollInfoProviderProps = {
   children: React.ReactNode
 }
 
-const ScrollInfoProvider: React.FC<ScrollInfoProviderProps> = (props) => {
+export const ScrollInfoProvider: React.FC<ScrollInfoProviderProps> = (props) => {
   const {
     children,
   } = props;
@@ -135,5 +135,3 @@ const ScrollInfoProvider: React.FC<ScrollInfoProviderProps> = (props) => {
     </ScrollInfoContext.Provider>
   );
 };
-
-export default ScrollInfoProvider;

src/ScrollInfoProvider/index.tsx

@@ -1,5 +1,5 @@
-export { default as ScrollInfo } from './ScrollInfo';
-export { default as ScrollInfoContext } from './ScrollInfoProvider/context';
-export { default as ScrollInfoProvider } from './ScrollInfoProvider';
-export { default as useScrollInfo } from './useScrollInfo';
-export { default as withScrollInfo } from './withScrollInfo';
+export { ScrollInfo } from './ScrollInfo/index.js';
+export { ScrollInfoContext } from './ScrollInfoProvider/context.js';
+export { ScrollInfoProvider } from './ScrollInfoProvider/index.js';
+export { useScrollInfo } from './useScrollInfo/index.js';
+export { withScrollInfo } from './withScrollInfo/index.js';