add esm module

.npmignore

@@ -1,9 +1,11 @@
 node_modules
 /document
 /src
+/esm
 .gitignore
 yarn.lock
 tsconfig.json
+tsconfig.esm.json
 jest.config.js
 .eslintrc.json
 .github

README.md

@@ -3,6 +3,7 @@
 Provides module mocking functionality like `jest.mock` on Storybook.
 
 ![](https://raw.githubusercontent.com/ReactLibraries/storybook-addon-module-mock/master/document/image/image01.png)
+![](https://raw.githubusercontent.com/ReactLibraries/storybook-addon-module-mock/master/document/image/image02.png)
 
 ## usage
 

esm/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package.json

@@ -1,10 +1,21 @@
 {
   "name": "storybook-addon-module-mock",
-  "version": "1.1.0",
-  "main": "dist/index.js",
+  "version": "1.1.1",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/cjs/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js"
+    },
+    "./preset": {
+      "require": "./dist/cjs/preset.js",
+      "import": "./dist/esm/preset.js"
+    }
+  },
   "license": "MIT",
   "scripts": {
-    "build": "tsc -b",
+    "build": "tsc && tsc -p ./tsconfig.esm.json && cpy esm dist",
     "watch": "tsc -b -w",
     "lint": "eslint --fix ./src",
     "lint:fix": "eslint --fix ./src"
@@ -24,6 +35,7 @@
     "@types/react": "^18.2.31",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
+    "cpy-cli": "^5.0.0",
     "eslint": "8.52.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.6.1",

src/ModuleMock/MockDecorator.tsx

@@ -2,7 +2,7 @@ import { useChannel, useEffect, useRef, useState } from '@storybook/addons';
 import { STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
 import { Decorator } from '@storybook/react';
 import React from 'react';
-import { ADDON_ID, moduleMockParameter } from './types';
+import { ADDON_ID, moduleMockParameter } from './types.js';
 
 export const MockDecorator: Decorator = (Story, context) => {
   const { parameters, name, id } = context;

src/ModuleMock/register.tsx

@@ -3,7 +3,7 @@ import { useChannel } from '@storybook/api';
 import { TabWrapper } from '@storybook/components';
 import React, { useState } from 'react';
 import { JSONTree } from 'react-json-tree';
-import { ADDON_ID, TAB_ID } from './types';
+import { ADDON_ID, TAB_ID } from './types.js';
 import type { Addon_RenderOptions } from '@storybook/types';
 import type { MockInstance } from 'jest-mock';
 const theme = {

src/ModuleMock/types.ts

@@ -1,4 +1,5 @@
 import type { Mock } from 'jest-mock';
+
 export const ADDON_ID = 'storybook-addon-module-mock';
 export const TAB_ID = `${ADDON_ID}/tab`;
 

src/NodeInfo/NodeInfoDecorator.tsx

@@ -1,7 +1,7 @@
 import { useChannel, useEffect } from '@storybook/addons';
 import { Decorator } from '@storybook/react';
 import React from 'react';
-import { ADDON_ID } from './types';
+import { ADDON_ID } from './types.js';
 
 const getDisplayValue = (element: Element) =>
   element instanceof HTMLInputElement

src/NodeInfo/preview.tsx

@@ -1,3 +1,3 @@
-import { NodeInfoDecorator } from "./NodeInfoDecorator";
+import { NodeInfoDecorator } from './NodeInfoDecorator.js';
 
 export const decorators = [NodeInfoDecorator];

src/NodeInfo/register.tsx

@@ -2,7 +2,7 @@ import { TabWrapper } from '@storybook/components';
 import { addons, types, useChannel } from '@storybook/manager-api';
 import React, { useState } from 'react';
 import { JSONTree } from 'react-json-tree';
-import { ADDON_ID, NodeInfo, TAB_ID } from './types';
+import { ADDON_ID, NodeInfo, TAB_ID } from './types.js';
 import type { Addon_RenderOptions } from '@storybook/types';
 
 const theme = {

src/index.ts

@@ -1,2 +1,2 @@
-export * from './ModuleMock/types';
-export * from './mocks';
+export * from './ModuleMock/types.js';
+export * from './mocks/index.js';

src/mocks/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { jest } from '@storybook/jest';
-import { ModuleMock, moduleMockParameter } from '../ModuleMock/types';
+import { ModuleMock, moduleMockParameter } from '../ModuleMock/types.js';
 import type { Parameters as P } from '@storybook/react';
 import type { Mock } from 'jest-mock';
 

src/preset.ts

@@ -1,5 +1,5 @@
 import { TransformOptions } from '@babel/core';
-import { ImportWriterPlugin } from './plugins/webpack-import-writer';
+import { ImportWriterPlugin } from './plugins/webpack-import-writer.js';
 import type { StorybookConfig } from '@storybook/types';
 import type { Options } from '@storybook/types';
 import type { Configuration } from 'webpack';

src/preview.tsx

@@ -1,6 +1,6 @@
-import { MockDecorator } from './ModuleMock/MockDecorator';
-import { NodeInfoDecorator } from './NodeInfo/NodeInfoDecorator';
+import { MockDecorator } from './ModuleMock/MockDecorator.js';
+import { NodeInfoDecorator } from './NodeInfo/NodeInfoDecorator.js';
 
-export { parameters } from './ModuleMock/MockDecorator';
+export { parameters } from './ModuleMock/MockDecorator.js';
 
 export const decorators = [MockDecorator, NodeInfoDecorator];

src/register.tsx

@@ -1,2 +1,2 @@
-import './ModuleMock/register';
-import './NodeInfo/register';
+import './ModuleMock/register.js';
+import './NodeInfo/register.js';

tsconfig.esm.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist/esm",
+    "module": "ESNext"
+  }
+}

tsconfig.json

@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     "jsx": "react" /* Specify what JSX code is generated. */,
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
@@ -27,7 +27,7 @@
     /* Modules */
     "module": "commonjs" /* Specify what module code is generated. */,
     "rootDir": "./src" /* Specify the root folder within your source files. */,
-    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
@@ -49,7 +49,7 @@
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
+    "outDir": "./dist/cjs" /* Specify an output folder for all emitted files. */,
     // "removeComments": true,                           /* Disable emitting comments. */
     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */