feat: moves to esm (#56)

jacobsfletch · web-flow · commit ab66df9520a2 · 2024-06-07T21:47:09.000-04:00
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/demo/App/index.tsx b/demo/App/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ModalProvider, ModalContainer, ModalToggler } from '../../src'; // swap '../src' for '../dist/build.bundle' to demo production build
+import { ModalProvider, ModalContainer, ModalToggler } from '@faceless-ui/modal';
 import AsModal from '../AsModalDemo';
 import UseModal from '../UseModalDemo';
 import Modal from '../ModalDemo';
diff --git a/demo/AsModalDemo/index.tsx b/demo/AsModalDemo/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import LogProps from '../LogProps';
-import { asModal, ModalToggler } from '../../src'; // swap '../src' for '../dist/build.bundle' to demo production build
-import ModalControls from '../ModalControls';
-import { SettingsProvider } from '../SettingsProvider';
+import LogProps from '../LogProps/index.js';
+import { asModal, ModalToggler } from '@faceless-ui/modal';
+import ModalControls from '../ModalControls/index.js';
+import { SettingsProvider } from '../SettingsProvider/index.js';
 
 const AsModal = asModal((props) => {
   return (
diff --git a/demo/CSS.tsx b/demo/CSS.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useModal } from '../src';
+import { useModal } from '@faceless-ui/modal';
 
 const CSS: React.FC = () => {
   const {
diff --git a/demo/ModalControls/index.tsx b/demo/ModalControls/index.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
-import { useModal, ModalToggler } from '../../src';
-import { ModalPropsWithContext } from '../../src/Modal';
-import { useSettings } from '../SettingsProvider';
+import { useModal, ModalToggler } from '@faceless-ui/modal';
+import type {ModalPropsWithContext} from '../../src/Modal';
+import { useSettings } from '../SettingsProvider/index.js';
 
 const ModalControls: React.FC<ModalPropsWithContext> = (props) => {
   const { dispatchSettings } = useSettings();
diff --git a/demo/ModalDemo/index.tsx b/demo/ModalDemo/index.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { Modal, ModalToggler } from '../../src'; // swap '../src' for '../dist/build.bundle' to demo production build
+import { Modal, ModalToggler } from '@faceless-ui/modal';
 import LogProps from '../LogProps';
 import ModalControls from '../ModalControls';
 import { SettingsProvider } from '../SettingsProvider';
diff --git a/demo/SettingsControls/index.tsx b/demo/SettingsControls/index.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { useModal } from '../../src';
+import { useModal } from '@faceless-ui/modal';
 import { useSettings } from '../SettingsProvider';
 
 const SettingsControls: React.FC = () => {
diff --git a/demo/SettingsProvider/index.tsx b/demo/SettingsProvider/index.tsx
@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useReducer } from 'react';
-import reducer from './reducer';
+import reducer from './reducer'
 
 export type Settings = Record<string, unknown>;
 
diff --git a/demo/Test/index.tsx b/demo/Test/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Modal, useModal } from '../../src';
+import { Modal, useModal } from '@faceless-ui/modal';
 
 const Test: React.FC = () => {
   const [renderModal, setRenderModal] = useState(false);
diff --git a/demo/UseModalDemo/index.tsx b/demo/UseModalDemo/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useModal } from '../../src'; // swap '../src' for '../dist/build.bundle' to demo production build
+import { useModal } from '@faceless-ui/modal';
 import LogProps from '../LogProps';
 
 const UseModal: React.FC = (props) => {
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "name": "Faceless UI",
     "url": "https://facelessui.com"
   },
+  "type": "module",
   "bugs": {
     "url": "https://github.com/faceless-ui/modal/issues",
     "email": "dev@facelessui.com"
@@ -43,9 +44,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"
   },
@@ -67,9 +68,9 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-transition-group": "^4.4.4",
-    "@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",
@@ -84,11 +85,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"
diff --git a/src/Modal/index.tsx b/src/Modal/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import * as focusTrap from 'focus-trap';
 import React, { Fragment, ElementType, HTMLProps } from 'react';
-import asModal from '../asModal';
-import { IModalContext } from '../ModalProvider/context';
+import { asModal } from '../asModal/index.js';
+import { IModalContext } from '../ModalProvider/context.js';
 
 export type ModalPropsWithContext = ModalProps & {
   modal?: IModalContext
diff --git a/src/ModalContainer/index.tsx b/src/ModalContainer/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import React, { MouseEvent, ElementType, HTMLProps } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import useModal from '../useModal';
-import generateTransitionClasses from '../ModalProvider/generateTransitionClasses';
+import { useModal } from '../useModal/index.js';
+import generateTransitionClasses from '../ModalProvider/generateTransitionClasses.js';
 
 export const containerBaseClass = 'modal-container';
 
@@ -11,7 +11,7 @@ export type ModalContainerProps = HTMLProps<HTMLElement> & {
   children?: React.ReactNode
 }
 
-const ModalContainer: React.FC<ModalContainerProps> = (props) => {
+export const ModalContainer: React.FC<ModalContainerProps> = (props) => {
   const {
     oneModalIsOpen,
     classPrefix,
@@ -65,5 +65,3 @@ const ModalContainer: React.FC<ModalContainerProps> = (props) => {
     </CSSTransition>
   );
 };
-
-export default ModalContainer;
diff --git a/src/ModalProvider/context.tsx b/src/ModalProvider/context.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { createContext } from 'react';
-import { ModalProviderProps } from '../ModalProvider';
+import { ModalProviderProps } from '../ModalProvider/index.js';
 
 export type ModalStatus = {
   slug: string
@@ -35,5 +35,3 @@ export interface IModalContext extends ModalProviderProps {
 }
 
 export const ModalContext = createContext<IModalContext>({} as IModalContext);
-
-export default ModalContext;
diff --git a/src/ModalProvider/generateCSS.tsx b/src/ModalProvider/generateCSS.tsx
@@ -1,5 +1,5 @@
-import { containerBaseClass } from '../ModalContainer';
-import { itemBaseClass } from '../asModal';
+import { containerBaseClass } from '../ModalContainer/index.js';
+import { itemBaseClass } from '../asModal/index.js';
 
 const CSS = ({
   classPrefix,
diff --git a/src/ModalProvider/index.tsx b/src/ModalProvider/index.tsx
@@ -9,9 +9,9 @@ import React, {
 } from 'react';
 import queryString from 'qs';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
-import generateCSS from './generateCSS';
-import ModalContext, { ModalState } from './context';
-import reducer from './reducer';
+import generateCSS from './generateCSS.js';
+import { ModalContext, ModalState } from './context.js';
+import reducer from './reducer.js';
 
 export type ModalProviderProps = {
   generateCSS?: boolean
@@ -45,7 +45,7 @@ const getModalParamArray = (): string[] => {
   return params;
 };
 
-const ModalProvider: React.FC<ModalProviderProps> = (props) => {
+export const ModalProvider: React.FC<ModalProviderProps> = (props) => {
   const {
     classPrefix,
     minifyCSS = true,
@@ -231,5 +231,3 @@ const ModalProvider: React.FC<ModalProviderProps> = (props) => {
     </Fragment>
   );
 };
-
-export default ModalProvider;
diff --git a/src/ModalProvider/reducer.ts b/src/ModalProvider/reducer.ts
@@ -1,4 +1,4 @@
-import { ModalStatus, ModalState } from './context';
+import { ModalStatus, ModalState } from './context.js';
 
 export type UPDATE_MODAL = {
   type: 'UPDATE_MODAL'
diff --git a/src/ModalToggler/index.tsx b/src/ModalToggler/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import React, { ElementType, HTMLProps, MouseEvent } from 'react';
-import { IModalContext } from '../ModalProvider/context';
-import useModal from '../useModal';
+import { IModalContext } from '../ModalProvider/context.js';
+import { useModal } from '../useModal/index.js';
 
 export const togglerBaseClass = 'modal-toggler';
 
@@ -12,7 +12,7 @@ export type ModalTogglerProps = HTMLProps<HTMLElement> & {
   children?: React.ReactNode
 }
 
-const ModalToggler: React.FC<ModalTogglerProps> = (props) => {
+export const ModalToggler: React.FC<ModalTogglerProps> = (props) => {
   const {
     slug,
     htmlElement: Tag = 'button',
@@ -55,5 +55,3 @@ const ModalToggler: React.FC<ModalTogglerProps> = (props) => {
     </Tag>
   );
 };
-
-export default ModalToggler;
diff --git a/src/asModal/index.tsx b/src/asModal/index.tsx
@@ -6,14 +6,14 @@ import React, {
 } from 'react';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
-import useModal from '../useModal';
-import generateTransitionClasses from '../ModalProvider/generateTransitionClasses';
-import { ModalProps } from '../Modal';
+import { useModal } from '../useModal/index.js';
+import generateTransitionClasses from '../ModalProvider/generateTransitionClasses.js';
+import { ModalProps } from '../Modal/index.js';
 import * as focusTrap from 'focus-trap'; // ESM
 
 export const itemBaseClass = 'modal-item';
 
-const asModal = <P extends ModalProps>(
+export const asModal = <P extends ModalProps>(
   ModalComponent: React.FC<P>,
   slugFromArg?: string,
 ): React.FC<P> => {
@@ -206,5 +206,3 @@ const asModal = <P extends ModalProps>(
 
   return ModalWrap;
 };
-
-export default asModal;
diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,7 @@
-export { default as asModal } from './asModal';
-export { default as Modal } from './Modal';
-export { default as ModalContainer } from './ModalContainer';
-export { default as ModalContext } from './ModalProvider/context';
-export { default as ModalProvider } from './ModalProvider';
-export { default as ModalToggler } from './ModalToggler';
-export { default as useModal } from './useModal';
+export { asModal } from './asModal/index.js';
+export { default as Modal } from './Modal/index.js';
+export { ModalContainer } from './ModalContainer/index.js';
+export { ModalContext } from './ModalProvider/context.js';
+export { ModalProvider } from './ModalProvider/index.js';
+export { ModalToggler } from './ModalToggler/index.js';
+export { useModal } from './useModal/index.js';
diff --git a/src/types.ts b/src/types.ts
@@ -1,5 +1,5 @@
-export { ModalProviderProps } from './ModalProvider';
-export { IModalContext } from './ModalProvider/context';
-export { ModalContainerProps } from './ModalContainer';
-export { ModalTogglerProps } from './ModalToggler';
-export { ModalProps } from './Modal';
+export type { ModalProviderProps } from './ModalProvider/index.js';
+export type { IModalContext } from './ModalProvider/context.js';
+export type { ModalContainerProps } from './ModalContainer/index.js';
+export type { ModalTogglerProps } from './ModalToggler/index.js';
+export type { ModalProps } from './Modal/index.js';
diff --git a/src/useModal/index.tsx b/src/useModal/index.tsx
@@ -1,7 +1,5 @@
 'use client'
 import { useContext } from 'react';
-import ModalContext, { IModalContext } from '../ModalProvider/context';
+import { ModalContext, IModalContext } from '../ModalProvider/context.js';
 
-const useModal = (): IModalContext => useContext(ModalContext);
-
-export default useModal;
+export const useModal = (): IModalContext => useContext(ModalContext);
diff --git a/tsconfig.build.json b/tsconfig.build.json
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "src/**/*",
+  ],
+}
diff --git a/tsconfig.demo.json b/tsconfig.demo.json
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,20 +2,27 @@
   "compilerOptions": {
     "outDir": "./dist",
     "allowJs": true,
-    "target": "es5",
-    "module": "commonjs",
+    "target": "es6",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
     "strict": true,
     "sourceMap": true,
     "jsx": "react",
     "skipLibCheck": true,
     "esModuleInterop": true,
     "declaration": true,
     "declarationDir": "./dist",
+    "paths": {
+      "@faceless-ui/modal": ["./src/index.ts"],
+    },
   },
   "include": [
-    "src/**/*"
+    "src/**/*",
+    "demo/**/*",
   ],
   "exclude": [
-    "**/*.test.js"
+    "**/*.test.js",
+    "node_modules",
   ]
 }
diff --git a/webpack.build-demo.config.js b/webpack.build-demo.config.js
diff --git a/webpack.demo.config.js b/webpack.demo.config.js
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
diff --git a/webpack.development.config.js b/webpack.development.config.js
diff --git a/yarn.lock b/yarn.lock
