chore: nodenext module resolution (#57)

demo/App/index.tsx → demo/App.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { ModalProvider, ModalContainer, ModalToggler } from '@faceless-ui/modal';
-import AsModal from '../AsModalDemo';
-import UseModal from '../UseModalDemo';
-import Modal from '../ModalDemo';
-import CSS from '../CSS';
-import SettingsControls from '../SettingsControls';
-import { SettingsProvider } from '../SettingsProvider';
+import AsModal from './AsModalDemo/index.js';
+import UseModal from './UseModalDemo/index.js';
+import Modal from './ModalDemo/index.js';
+import CSS from './CSS.js';
+import SettingsControls from './SettingsControls/index.js';
+import { SettingsProvider } from './SettingsProvider/index.js';
 // import Test from '../Test';
 
 const App: React.FC = () => {

demo/AsModalDemo/reducer.ts

@@ -1,4 +1,4 @@
-import { Settings, IReducerAction } from './types';
+import { Settings, IReducerAction } from './types.js';
 
 const reducer = (state: Settings, action: IReducerAction): Settings => {
   const { payload } = action;

demo/ModalControls/index.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { useModal, ModalToggler } from '@faceless-ui/modal';
-import type {ModalPropsWithContext} from '../../src/Modal';
+import type { ModalPropsWithContext } from '../../src/Modal/index.js';
 import { useSettings } from '../SettingsProvider/index.js';
 
 const ModalControls: React.FC<ModalPropsWithContext> = (props) => {

demo/ModalDemo/index.tsx

@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react';
 import { Modal, ModalToggler } from '@faceless-ui/modal';
-import LogProps from '../LogProps';
-import ModalControls from '../ModalControls';
-import { SettingsProvider } from '../SettingsProvider';
+import LogProps from '../LogProps/index.js';
+import ModalControls from '../ModalControls/index.js';
+import { SettingsProvider } from '../SettingsProvider/index.js';
 
 const ModalDemo: React.FC = () => {
 

demo/ModalDemo/reducer.ts

@@ -1,4 +1,4 @@
-import { Settings, IReducerAction } from './types';
+import { Settings, IReducerAction } from './types.js';
 
 const reducer = (state: Settings, action: IReducerAction): Settings => {
   const { payload } = action;

demo/SettingsControls/index.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { useModal } from '@faceless-ui/modal';
-import { useSettings } from '../SettingsProvider';
+import { useSettings } from '../SettingsProvider/index.js';
 
 const SettingsControls: React.FC = () => {
   const { dispatchSettings } = useSettings();

demo/SettingsProvider/index.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useReducer } from 'react';
-import reducer from './reducer'
+import reducer from './reducer.js'
 
 export type Settings = Record<string, unknown>;
 

demo/SettingsProvider/reducer.ts

@@ -1,4 +1,4 @@
-import { Settings, IReducerAction } from './';
+import { Settings, IReducerAction } from './index.js';
 
 const reducer = (state: Settings, action: IReducerAction): Settings => {
   const { payload } = action;

demo/UseModalDemo/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useModal } from '@faceless-ui/modal';
-import LogProps from '../LogProps';
+import LogProps from '../LogProps/index.js';
 
 const UseModal: React.FC = (props) => {
   const modal = useModal();

demo/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import App from './App';
+import App from './App.js';
 import { createRoot } from 'react-dom/client';
 const container = document.getElementById('root');
 if (container) {

package.json

@@ -1,6 +1,7 @@
 {
   "name": "@faceless-ui/modal",
   "version": "3.0.0-beta.0",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "homepage:": "https://facelessui.com/docs/modal",
@@ -11,7 +12,6 @@
     "name": "Faceless UI",
     "url": "https://facelessui.com"
   },
-  "type": "module",
   "bugs": {
     "url": "https://github.com/faceless-ui/modal/issues",
     "email": "[email protected]"
@@ -44,10 +44,11 @@
     "ux"
   ],
   "scripts": {
-    "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 .",
+    "build": "yarn lint:src && tsc --project tsconfig.build.json",
+    "build:demo": "webpack --config webpack.build-demo.config.js",
+    "dev": "webpack serve --config webpack.dev.config.js",
+    "lint:src": "eslint ./src",
+    "lint:demo": "eslint ./demo",
     "test": "jest"
   },
   "peerDependencies": {
@@ -70,6 +71,7 @@
     "@types/react-transition-group": "^4.4.4",
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
+    "@types/webpack": "^5.28.5",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.1.5",

tsconfig.json

@@ -3,8 +3,8 @@
     "outDir": "./dist",
     "allowJs": true,
     "target": "es6",
-    "module": "ESNext",
-    "moduleResolution": "node",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "resolveJsonModule": true,
     "strict": true,
     "sourceMap": true,

webpack.build-demo.config.js

@@ -5,47 +5,48 @@ import { fileURLToPath } from 'node:url'
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
-export default [
-  {
-    devtool: 'source-map',
-    mode: 'production',
-    entry: path.resolve(dirname, 'demo/index.tsx'),
-    output: {
-      filename: 'demo.bundle.js',
-      path: path.resolve(dirname, 'dist-demo'),
-    },
-    module: {
-      rules: [
-        {
-          test: /\.(js|jsx|ts|tsx)$/,
-          exclude: /node_modules/,
-          use: [{
-            loader: 'ts-loader',
-            options: {
-              configFile: 'tsconfig.json',
-              compilerOptions: {
-                outDir: "./dist-demo",
-                declarationDir: undefined,
-                declaration: false
-              },
+const config = {
+  devtool: 'source-map',
+  mode: 'production',
+  entry: path.resolve(dirname, 'demo/index.tsx'),
+  output: {
+    filename: 'demo.bundle.js',
+    path: path.resolve(dirname, 'dist-demo'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: [{
+          loader: 'ts-loader',
+          options: {
+            configFile: 'tsconfig.json',
+            compilerOptions: {
+              outDir: "./dist-demo",
+              declarationDir: undefined,
+              declaration: false
             },
-          }],
-        },
-      ],
-    },
-    resolve: {
-      extensions: ['.ts', '.tsx', '.js', '.jsx'],
-      alias: {
-        '@faceless-ui/modal': path.resolve(dirname, 'src/index.ts'),
+          },
+        }],
       },
-      extensionAlias: {
-        '.js': ['.ts', '.js', '.tsx', '.jsx'],
-        '.mjs': ['.mts', '.mjs'],
-      },
-    },
-    plugins: [
-      new HtmlWebPackPlugin({
-        template: 'demo/index.html',
-      }),
     ],
-  }];
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    alias: {
+      '@faceless-ui/modal': path.resolve(dirname, 'src/index.ts'),
+    },
+    extensionAlias: {
+      '.js': ['.ts', '.js', '.tsx', '.jsx'],
+      '.mjs': ['.mts', '.mjs'],
+    },
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      template: 'demo/index.html',
+    }),
+  ],
+}
+
+export default config;

webpack.dev.config.js

@@ -7,7 +7,7 @@ import ESLintPlugin from 'eslint-webpack-plugin';
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
-export default {
+const config = {
   devtool: 'inline-source-map',
   mode: 'development',
   entry: path.resolve(dirname, 'demo/index.tsx'),
@@ -22,6 +22,11 @@ export default {
         loader: 'ts-loader',
         options: {
           transpileOnly: true,
+          compilerOptions: {
+            module: "commonjs",
+            target: "es5",
+            moduleResolution: "node",
+          }
         },
       }
     ],
@@ -49,5 +54,8 @@ export default {
   devServer: {
     port: 3000,
     host: '0.0.0.0',
+    hot: true,
   },
 };
+
+export default config;

yarn.lock

@@ -1013,6 +1013,15 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
   integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
 
+"@types/webpack@^5.28.5":
+  version "5.28.5"
+  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-5.28.5.tgz#0e9d9a15efa09bbda2cef41356ca4ac2031ea9a2"
+  integrity sha512-wR87cgvxj3p6D0Crt1r5avwqffqPXUkNlnQ1mjU93G7gCuFjufZR4I6j8cz5g1F1tTYpfOOFvly+cmIQwL9wvw==
+  dependencies:
+    "@types/node" "*"
+    tapable "^2.2.0"
+    webpack "^5"
+
 "@types/ws@^8.5.10":
   version "8.5.10"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.10.tgz#4acfb517970853fa6574a3a6886791d04a396787"
@@ -1738,14 +1747,14 @@ braces@^3.0.3, braces@~3.0.2:
     fill-range "^7.1.1"
 
 browserslist@^4.21.10, browserslist@^4.22.2:
-  version "4.23.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
-  integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
+  version "4.23.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.1.tgz#ce4af0534b3d37db5c1a4ca98b9080f985041e96"
+  integrity sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==
   dependencies:
-    caniuse-lite "^1.0.30001587"
-    electron-to-chromium "^1.4.668"
+    caniuse-lite "^1.0.30001629"
+    electron-to-chromium "^1.4.796"
     node-releases "^2.0.14"
-    update-browserslist-db "^1.0.13"
+    update-browserslist-db "^1.0.16"
 
 [email protected]:
   version "2.1.1"
@@ -1810,7 +1819,7 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-caniuse-lite@^1.0.30001587:
+caniuse-lite@^1.0.30001629:
   version "1.0.30001629"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001629.tgz#907a36f4669031bd8a1a8dbc2fa08b29e0db297e"
   integrity sha512-c3dl911slnQhmxUIT4HhYzT7wnBK/XYpGnYLOj4nJBaRiw52Ibe7YxlDaAeRECvA786zCuExhxIUJ2K7nHMrBw==
@@ -2319,10 +2328,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-electron-to-chromium@^1.4.668:
-  version "1.4.795"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.795.tgz#25d05961c529bc32435e5e4abdd8f9dabcbc9dc5"
-  integrity sha512-hHo4lK/8wb4NUa+NJYSFyJ0xedNHiR6ylilDtb8NUW9d4dmBFmGiecYEKCEbti1wTNzbKXLfl4hPWEkAFbHYlw==
+electron-to-chromium@^1.4.796:
+  version "1.4.796"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.796.tgz#48dd6ff634b7f7df6313bd27aaa713f3af4a2b29"
+  integrity sha512-NglN/xprcM+SHD2XCli4oC6bWe6kHoytcyLKCWXmRL854F0qhPhaYgUswUsglnPxYaNQIg2uMY4BvaomIf3kLA==
 
 emittery@^0.10.2:
   version "0.10.2"
@@ -5853,7 +5862,7 @@ [email protected], unpipe@~1.0.0:
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
 
-update-browserslist-db@^1.0.13:
+update-browserslist-db@^1.0.16:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz#f6d489ed90fb2f07d67784eb3f53d7891f736356"
   integrity sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==
@@ -6005,7 +6014,7 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.91.0:
+webpack@^5, webpack@^5.91.0:
   version "5.91.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.91.0.tgz#ffa92c1c618d18c878f06892bbdc3373c71a01d9"
   integrity sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==