chore: 🤖 esm build

.babelrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript',
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+  ],
+  env: {
+    esm: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            modules: false,
+          },
+        ],
+      ],
+    },
+  },
+};

.storybook/main.js

@@ -1,5 +1,5 @@
 module.exports = {
   stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['../dist/preset'],
+  addons: ['../preset.js'],
   framework: '@storybook/react',
 };

README.md

@@ -59,7 +59,7 @@ check [this comment](https://github.com/storybookjs/testing-react/issues/86#issu
 // setupFile.js
 import { setGlobalConfig } from '@storybook/testing-react';
 import * as globalConfig from '../.storybook/preview';
-import { decorators } from 'storybook-addon-launchdarkly/dist';
+import { decorators } from 'storybook-addon-launchdarkly/dist/esm';
 
 setGlobalConfig({
   ...globalConfig,

package.json

@@ -1,16 +1,18 @@
 {
   "name": "storybook-addon-launchdarkly",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "homepage": "https://github.com/kodai3/storybook-addon-launchdarkly#readme",
   "description": "Use Launchdarkly in your Storybook stories.",
   "license": "MIT",
-  "main": "preset.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts/index.d.ts",
   "author": "kodai3",
   "files": [
     "dist/**/*",
     "README.md",
-    "preset.js"
+    "*.js",
+    "*.d.ts"
   ],
   "keywords": [
     "storybook",
@@ -29,9 +31,14 @@
     "url": "https://github.com/kodai3/storybook-addon-launchdarkly/issues"
   },
   "scripts": {
-    "build": "tsc --build",
-    "clean": "rimraf dist",
-    "prebuild": "npm run clean",
+    "clean": "rimraf ./dist",
+    "buildBabel": "concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"",
+    "buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"",
+    "buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"",
+    "buildTsc": "tsc --declaration --emitDeclarationOnly --outDir ./dist/ts",
+    "prebuild": "yarn clean",
+    "build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
+    "build:watch": "concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"",
     "test": "NODE_ENV=test jest --config ./jest.config.js --setupFiles ./setupFiles.js",
     "storybook": "start-storybook -p 6006 -s public",
     "lint": "eslint .",
@@ -45,8 +52,11 @@
     "tslib": "^2.3.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.9",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
     "@storybook/addon-essentials": "^6.4.18",
     "@storybook/addon-links": "^6.4.18",
     "@storybook/addons": "^6.4.18",
@@ -60,6 +70,8 @@
     "@typescript-eslint/eslint-plugin": "5.9.0",
     "@typescript-eslint/parser": "5.9.0",
     "babel-jest": "^27.5.1",
+    "babel-loader": "^8.1.0",
+    "concurrently": "^7.1.0",
     "eslint": "8.6.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-react": "7.28.0",

preset.js

@@ -1,2 +1,13 @@
-/* eslint-env node */
-module.exports = require('./dist/preset');
+/* eslint-disable no-undef */
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/preset/preview')];
+}
+
+function managerEntries(entry = []) {
+  return [...entry, require.resolve('./dist/esm/preset/manager')];
+}
+
+module.exports = {
+  managerEntries,
+  config,
+};

setupFiles.js

@@ -1,6 +1,6 @@
 import { setGlobalConfig } from '@storybook/testing-react';
 import * as globalStorybookConfig from './.storybook/preview';
-import { decorators } from './dist';
+import { decorators } from './dist/esm';
 
 // NOTE: https://github.com/storybookjs/testing-react/issues/86#issuecomment-1027919112
 setGlobalConfig({

src/index.ts

@@ -1 +1 @@
-export { decorators } from './preset/addDecorator';
+export { decorators } from './preset/preview';

src/panel.tsx

@@ -1,5 +1,7 @@
+import { RenderOptions } from '@storybook/addons';
 import { useParameter } from '@storybook/api';
 import {
+  AddonPanel,
   Link,
   Placeholder,
   ResetWrapper,
@@ -9,50 +11,54 @@ import { LDContext } from 'launchdarkly-react-client-sdk/lib/context';
 import { FC } from 'react';
 import { PARAM_KEY } from './constants';
 
-export const Panel: FC = () => {
+export const Panel: FC<RenderOptions> = ({ key, active }) => {
   const params = useParameter<LDContext>(PARAM_KEY);
 
   if (typeof params?.flags !== 'object')
     return (
-      <Placeholder>
-        No flags found
-        <Link
-          href="https://github.com/kodai3/storybook-addon-launchdarkly/blob/main/README.md"
-          target="_blank"
-          withArrow
-        >
-          Learn how to add flags to your story
-        </Link>
-      </Placeholder>
+      <AddonPanel key={key} active={active}>
+        <Placeholder>
+          No flags found
+          <Link
+            href="https://github.com/kodai3/storybook-addon-launchdarkly/blob/main/README.md"
+            target="_blank"
+            withArrow
+          >
+            Learn how to add flags to your story
+          </Link>
+        </Placeholder>
+      </AddonPanel>
     );
 
   return (
-    <ResetWrapper>
-      <TableWrapper className="docblock-argstable">
-        <thead className="docblock-argstable-head">
-          <tr key="head">
-            <th key="name">
-              <span>Name</span>
-            </th>
-            <th key="value">
-              <span>Value</span>
-            </th>
-          </tr>
-        </thead>
-
-        <tbody className="docblock-argstable-body">
-          {Object.keys(params.flags).map((key) => (
-            <tr key={`key-${key}`}>
-              <th>
-                <span>{key}</span>
+    <AddonPanel key={key} active={active}>
+      <ResetWrapper>
+        <TableWrapper className="docblock-argstable">
+          <thead className="docblock-argstable-head">
+            <tr key="head">
+              <th key="name">
+                <span>Name</span>
               </th>
-              <th>
-                <span>{`${JSON.stringify(params.flags[key])}`}</span>
+              <th key="value">
+                <span>Value</span>
               </th>
             </tr>
-          ))}
-        </tbody>
-      </TableWrapper>
-    </ResetWrapper>
+          </thead>
+
+          <tbody className="docblock-argstable-body">
+            {Object.keys(params.flags).map((key) => (
+              <tr key={`key-${key}`}>
+                <th>
+                  <span>{key}</span>
+                </th>
+                <th>
+                  <span>{`${JSON.stringify(params.flags[key])}`}</span>
+                </th>
+              </tr>
+            ))}
+          </tbody>
+        </TableWrapper>
+      </ResetWrapper>
+    </AddonPanel>
   );
 };

src/preset/manager.tsx

@@ -0,0 +1,14 @@
+import { addons, types } from '@storybook/addons';
+import { ADDON_ID, PARAM_KEY } from '../constants';
+import { Panel } from '../panel';
+import { getTitle } from '../title';
+
+addons.register(ADDON_ID, () => {
+  // Register the panel
+  addons.add(ADDON_ID, {
+    paramKey: PARAM_KEY,
+    render: Panel,
+    title: getTitle,
+    type: types.PANEL,
+  });
+});

tsconfig.json

@@ -1,37 +1,21 @@
 {
     "compilerOptions": {
-    "alwaysStrict": true,
-    "declaration": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "importHelpers": true,
-    "jsx": "react-jsx",
-    "lib": [
-        "DOM",
-        "ESNext"
-    ],
-    "module": "CommonJS",
-    "moduleResolution": "Node",
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "outDir": "dist",
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true,
-    "strictFunctionTypes": true,
-    "strictNullChecks": true,
-    "strictPropertyInitialization": true,
-    "target": "ES5"
+      "allowSyntheticDefaultImports": true,
+      "baseUrl": ".",
+      "emitDecoratorMetadata": true,
+      "esModuleInterop": true,
+      "experimentalDecorators": true,
+      "incremental": false,
+      "isolatedModules": true,
+      "jsx": "react-jsx",
+      "lib": ["es2017", "dom"],
+      "module": "commonjs",
+      "noImplicitAny": true,
+      "rootDir": "./src",
+      "skipLibCheck": true,
+      "target": "es5",
     },
-    "exclude": [
-        "dist",
-        "node_modules"
-    ],
     "include": [
-        "src"
-    ]
-}
+      "src/**/*"
+    ],
+  }