Update with suggestions

HiDeoo · Apr 20, 2023 · 61c681a · 61c681a
1 parent 981ca45
commit 61c681a
Show file tree

Hide file tree

Showing 7 changed files with 1,258 additions and 837 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.babelrc-esm b/.babelrc-esm
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,5 @@
 node_modules
 coverage
-lib
-esm
+dist
 npm-debug.log.*
 .DS_Store
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,17 @@
+module.exports = api => {
+  api.cache(true);
+
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: 'last 2 versions, not dead',
+          modules: process.env.CJS ? 'commonjs' : false,
+        },
+      ],
+      '@babel/preset-react',
+    ],
+    plugins: [['babel-plugin-add-import-extension', { extension: process.env.CJS ? 'cjs' : 'mjs' }]],
+  };
+};
diff --git a/index.d.ts b/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> {}
diff --git a/package.json b/package.json
@@ -2,32 +2,40 @@
   "name": "intro.js-react",
   "version": "0.7.1",
   "description": "Intro.js React Wrapper",
-  "main": "lib/index.js",
-  "module": "esm/index.js",
+  "main": "dist/lib/index.js",
+  "module": "dist/esm/index.js",
   "types": "index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./dist/esm/index.mjs",
+      "default": "./dist/cjs/index.cjs"
+    }
+  },
   "scripts": {
     "prebuild": "rimraf lib/* && rimraf esm/*",
-    "build": "babel --ignore '**/*.test.js' --out-dir lib src",
-    "build:esm": "babel --ignore '**/*.test.js' --out-dir esm --config-file ./.babelrc-esm --no-babelrc src",
-    "build:watch": "npm run build -- --watch",
+    "build": "yarn build:cjs && yarn 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",
+    "build:esm": "babel --ignore '**/*.test.js' --out-dir dist/esm --out-file-extension .mjs src && cp dist/esm/index.mjs dist/esm/index.js",
+    "build:watch": "npm run build:esm -- --watch",
     "lint": "eslint src",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage && open coverage/index.html",
     "test:ci": "jest --coverage",
     "precommit": "lint-staged",
-    "prepublish": "npm run build && npm run build:esm"
+    "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/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",
@@ -81,9 +89,7 @@
     ]
   },
   "files": [
-    "lib",
-    "esm",
-    "src",
+    "dist",
     "index.d.ts"
   ]
 }