Add ES module build

.gitignore

@@ -1,5 +1,5 @@
 node_modules
 coverage
-lib
+dist
 npm-debug.log.*
 .DS_Store

babel.config.js

@@ -0,0 +1,24 @@
+module.exports = api => {
+  const isTest = api.env('test');
+
+  api.cache(true);
+
+  const config = {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: '> 0.5%, last 2 versions, Firefox ESR, not dead',
+          modules: process.env.CJS || isTest ? 'commonjs' : false,
+        },
+      ],
+      '@babel/preset-react',
+    ],
+  };
+
+  if (!isTest) {
+    config.plugins = [['babel-plugin-add-import-extension', { extension: process.env.CJS ? 'cjs' : 'mjs' }]];
+  }
+
+  return config;
+};

index.d.ts

@@ -1,134 +1,132 @@
-declare module 'intro.js-react' {
-  import * as React from 'react';
-  import { IntroJs, Options } from 'intro.js';
+import * as React from 'react';
+import { IntroJs, Options } from 'intro.js';
 
-  interface Step {
-    /**
-     * CSS selector or element to use for the step.
-     */
-    element?: string | HTMLElement | Element;
-    /**
-     * The tooltip content.
-     */
-    intro: string | React.ReactNode;
-    /**
-     * Position of the tooltip.
-     */
-    position?: string;
-    /**
-     * The tooltip title.
-    */
-    title?: string
-    /**
-     * CSS class of the tooltip.
-     */
-    tooltipClass?: string;
-    /**
-     * CSS class of the helperLayer.
-     */
-    highlightClass?: string;
-  }
-
-  interface Hint {
-    /**
-     * CSS selector to use for the hint.
-     */
-    element: string;
-    /**
-     * The tooltip text.
-     */
-    hint: string;
-    /**
-     * Position of the tooltip.
-     */
-    hintPosition?: string;
-  }
+interface Step {
+  /**
+   * CSS selector or element to use for the step.
+   */
+  element?: string | HTMLElement | Element;
+  /**
+   * The tooltip content.
+   */
+  intro: string | React.ReactNode;
+  /**
+   * Position of the tooltip.
+   */
+  position?: string;
+  /**
+   * The tooltip title.
+   */
+  title?: string;
+  /**
+   * CSS class of the tooltip.
+   */
+  tooltipClass?: string;
+  /**
+   * CSS class of the helperLayer.
+   */
+  highlightClass?: string;
+}
 
-  interface StepsProps {
-    /**
-     * Defines if the steps are visible or not.
-     * @default false
-     */
-    enabled?: boolean;
-    /**
-     * Step index to start with when showing the steps.
-     */
-    initialStep: number;
-    /**
-     * All the steps.
-     */
-    steps: Step[];
-    /**
-     * Callback called when the steps are disabled.
-     * Required to force keeping track of the state when the steps are dismissed with an Intro.js event and not the
-     * enabled prop.
-     */
-    onExit(stepIndex: number): void;
-    /**
-     * Callback called before exiting the intro.
-     * If you want to prevent exiting the intro, you can return false in this callback (available since intro.js 0.2.7).
-     */
-    onBeforeExit?(stepIndex: number): void | false;
-    /**
-     * Callback called when the steps are enabled.
-     */
-    onStart?(stepIndex: number): void;
-    /**
-     * Callback called when the current step is changed.
-     */
-    onChange?(nextStepIndex: number, nextElement: Element): void;
-    /**
-     * Callback called before changing the current step.
-     * If you want to prevent the transition to the next / previous step, you can return false in this callback
-     * (available since intro.js 2.8.0).
-     */
-    onBeforeChange?(nextStepIndex: number, nextElement: Element): void | false | Promise<void | false>;
-    /**
-     * Callback called after changing the current step.
-     */
-    onAfterChange?(newStepIndex: number, newElement: Element): void;
-    /**
-     * Callback called if you prevented transitioning to a new step by returning false in onBeforeChange.
-     */
-    onPreventChange?(stepIndex: number): void;
-    /**
-     * Callback called when all the steps are completed.
-     */
-    onComplete?(): void;
-    /**
-     * Intro.js options.
-     */
-    options?: Options;
-  }
+interface Hint {
+  /**
+   * CSS selector to use for the hint.
+   */
+  element: string;
+  /**
+   * The tooltip text.
+   */
+  hint: string;
+  /**
+   * Position of the tooltip.
+   */
+  hintPosition?: string;
+}
 
-  interface HintsProps {
-    /**
-     * Defines if the hints are visible or not.
-     * @default false
-     */
-    enabled?: boolean;
-    /**
-     * All the hints.
-     */
-    hints: Hint[];
-    /**
-     * Callback called when a hint is clicked.
-     */
-    onClick?(): void;
-    /**
-     * Callback called when a hint is closed.
-     */
-    onClose?(): void;
-    /**
-     * Intro.js options.
-     */
-    options?: Options;
-  }
+interface StepsProps {
+  /**
+   * Defines if the steps are visible or not.
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * Step index to start with when showing the steps.
+   */
+  initialStep: number;
+  /**
+   * All the steps.
+   */
+  steps: Step[];
+  /**
+   * Callback called when the steps are disabled.
+   * Required to force keeping track of the state when the steps are dismissed with an Intro.js event and not the
+   * enabled prop.
+   */
+  onExit(stepIndex: number): void;
+  /**
+   * Callback called before exiting the intro.
+   * If you want to prevent exiting the intro, you can return false in this callback (available since intro.js 0.2.7).
+   */
+  onBeforeExit?(stepIndex: number): void | false;
+  /**
+   * Callback called when the steps are enabled.
+   */
+  onStart?(stepIndex: number): void;
+  /**
+   * Callback called when the current step is changed.
+   */
+  onChange?(nextStepIndex: number, nextElement: Element): void;
+  /**
+   * Callback called before changing the current step.
+   * If you want to prevent the transition to the next / previous step, you can return false in this callback
+   * (available since intro.js 2.8.0).
+   */
+  onBeforeChange?(nextStepIndex: number, nextElement: Element): void | false | Promise<void | false>;
+  /**
+   * Callback called after changing the current step.
+   */
+  onAfterChange?(newStepIndex: number, newElement: Element): void;
+  /**
+   * Callback called if you prevented transitioning to a new step by returning false in onBeforeChange.
+   */
+  onPreventChange?(stepIndex: number): void;
+  /**
+   * Callback called when all the steps are completed.
+   */
+  onComplete?(): void;
+  /**
+   * Intro.js options.
+   */
+  options?: Options;
+}
 
-  export class Steps extends React.Component<StepsProps> {
-    public introJs: IntroJs;
-    public updateStepElement(stepIndex: number): void;
-  }
+interface HintsProps {
+  /**
+   * Defines if the hints are visible or not.
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * All the hints.
+   */
+  hints: Hint[];
+  /**
+   * Callback called when a hint is clicked.
+   */
+  onClick?(): void;
+  /**
+   * Callback called when a hint is closed.
+   */
+  onClose?(): void;
+  /**
+   * Intro.js options.
+   */
+  options?: Options;
+}
 
-  export class Hints extends React.Component<HintsProps> {}
+export class Steps extends React.Component<StepsProps> {
+  public introJs: IntroJs;
+  public updateStepElement(stepIndex: number): void;
 }
+
+export class Hints extends React.Component<HintsProps> {}

package.json

@@ -2,12 +2,28 @@
   "name": "intro.js-react",
   "version": "0.7.1",
   "description": "Intro.js React Wrapper",
-  "main": "lib/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "types": "index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.mts",
+        "default": "./dist/esm/index.mjs"
+      },
+      "default": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    }
+  },
   "scripts": {
-    "prebuild": "rimraf lib/*",
-    "build": "babel --ignore '**/*.test.js' --out-dir lib src",
-    "build:watch": "npm run build -- --watch",
+    "prebuild": "rimraf dist",
+    "build": "npm run build:cjs && npm run build:esm",
+    "build:cjs": "CJS=true babel --ignore '**/*.test.js' --out-dir dist/cjs --out-file-extension .cjs src && cp dist/cjs/index.cjs dist/cjs/index.js && cp index.d.ts dist/cjs/index.d.cts",
+    "build:esm": "babel --ignore '**/*.test.js' --out-dir dist/esm --out-file-extension .mjs src && cp dist/esm/index.mjs dist/esm/index.js && cp index.d.ts dist/esm/index.d.mts",
+    "build:watch": "npm run build:esm -- --watch",
     "lint": "eslint src",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -17,15 +33,15 @@
     "prepublish": "npm run build"
   },
   "devDependencies": {
-    "@babel/cli": "7.8.4",
-    "@babel/plugin-proposal-class-properties": "7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "7.9.6",
-    "@babel/preset-env": "7.9.6",
-    "@babel/preset-react": "7.9.4",
+    "@babel/cli": "7.21.0",
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "7.21.4",
+    "@babel/preset-react": "7.18.6",
     "@types/intro.js": "3.0.1",
     "@types/react": "17.0.4",
     "babel-eslint": "^7.2.3",
     "babel-jest": "26.0.1",
+    "babel-plugin-add-import-extension": "^1.6.0",
     "coveralls": "^3.0.1",
     "enzyme": "^2.8.2",
     "eslint": "7.0.0",
@@ -79,8 +95,7 @@
     ]
   },
   "files": [
-    "lib",
-    "src",
+    "dist",
     "index.d.ts"
   ]
 }