Change /dist to ESM && upgrade required dependencies to make this hap…

…pen & deal with the consequences

.babelrc.js

@@ -12,13 +12,24 @@ const withTests = {
   ],
 };
 
+const modules = process.env.BABEL_ESM === 'true' ? false : 'auto';
+
 module.exports = {
   ignore: [
     './lib/codemod/src/transforms/__testfixtures__',
     './lib/postinstall/src/__testfixtures__',
   ],
   presets: [
-    ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
+    [
+      '@babel/preset-env',
+      {
+        shippedProposals: true,
+        useBuiltIns: 'usage',
+        corejs: '3',
+        targets: 'defaults',
+        modules,
+      },
+    ],
     '@babel/preset-typescript',
     '@babel/preset-react',
     '@babel/preset-flow',
@@ -52,7 +63,16 @@ module.exports = {
     {
       test: './lib',
       presets: [
-        ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
+        [
+          '@babel/preset-env',
+          {
+            shippedProposals: true,
+            useBuiltIns: 'usage',
+            corejs: '3',
+            modules,
+            targets: 'defaults',
+          },
+        ],
         '@babel/preset-react',
       ],
       plugins: [
@@ -83,8 +103,9 @@ module.exports = {
             shippedProposals: true,
             useBuiltIns: 'usage',
             targets: {
-              node: '8.11',
+              node: '10',
             },
+            modules,
             corejs: '3',
           },
         ],
@@ -104,5 +125,22 @@ module.exports = {
         test: withTests,
       },
     },
+    {
+      test: ['**/virtualModuleEntry.template.js'],
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            shippedProposals: true,
+            useBuiltIns: 'usage',
+            targets: {
+              node: '10',
+            },
+            corejs: '3',
+            modules: false,
+          },
+        ],
+      ],
+    },
   ],
 };

.eslintrc.js

@@ -37,6 +37,7 @@ module.exports = {
     {
       files: ['**/*.tsx', '**/*.ts'],
       rules: {
+        'react/require-default-props': 'off',
         'react/prop-types': 'off', // we should use types
         'no-dupe-class-members': 'off', // this is called overloads in typescript
       },

addons/a11y/package.json

@@ -20,7 +20,8 @@
     "directory": "addons/a11y"
   },
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "typesVersions": {
     "<3.8": {

addons/a11y/preset.js

@@ -1 +1,13 @@
-module.exports = require('./dist/preset');
+function managerEntries(entry = []) {
+  return [...entry, require.resolve('./dist/esm/register')];
+}
+
+function config(entry = []) {
+  return [
+    ...entry,
+    require.resolve('./dist/esm/a11yRunner'),
+    require.resolve('./dist/esm/a11yHighlight'),
+  ];
+}
+
+module.exports = { managerEntries, config };

addons/a11y/register.js

@@ -1 +1 @@
-require('./dist/register');
+require('./dist/esm/register');

addons/a11y/src/preset/addDecorator.ts → addons/a11y/src/addDecorator.ts

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

addons/a11y/src/components/Report/Rules.tsx

@@ -71,8 +71,8 @@ const Rule: FunctionComponent<RuleProps> = ({ rule }) => {
   }
   return (
     <SizeMe refreshMode="debounce">
-      {({ size }: { size: { width: number; height: number } }) => (
-        <Item elementWidth={size.width}>
+      {({ size }) => (
+        <Item elementWidth={size.width || 0}>
           <StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
           <Message>{rule.message}</Message>
         </Item>

addons/a11y/src/components/Tabs.tsx

@@ -112,7 +112,7 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
   const highlightLabel = `Highlight results`;
   return (
     <SizeMe refreshMode="debounce">
-      {({ size }: { size: any }) => (
+      {({ size }) => (
         <Container>
           <List>
             <TabsWrapper>
@@ -130,7 +130,7 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
             </TabsWrapper>
           </List>
           {tabs[activeTab].items.length > 0 ? (
-            <GlobalToggle elementWidth={size.width}>
+            <GlobalToggle elementWidth={size.width || 0}>
               <HighlightToggleLabel htmlFor={highlightToggleId}>
                 {highlightLabel}
               </HighlightToggleLabel>

addons/a11y/src/typings.d.ts

@@ -1,2 +1 @@
 declare module 'global';
-declare module 'react-sizeme';

addons/actions/package.json

@@ -15,7 +15,8 @@
     "directory": "addons/actions"
   },
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "typesVersions": {
     "<3.8": {
@@ -51,11 +52,10 @@
     "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2",
-    "uuid": "^8.0.0"
+    "uuid-browser": "^3.1.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.150",
-    "@types/uuid": "^7.0.3",
     "@types/webpack-env": "^1.15.3"
   },
   "peerDependencies": {

addons/actions/preset.js

@@ -1 +1,16 @@
-module.exports = require('./dist/preset');
+function managerEntries(entry, options) {
+  return [...entry, require.resolve('./dist/esm/register')];
+}
+
+function config(entry = [], { addDecorator = true } = {}) {
+  const actionConfig = [];
+  if (addDecorator) {
+    actionConfig.push(require.resolve('./dist/esm/preset/addDecorator'));
+  }
+  return [...entry, ...actionConfig, require.resolve('./dist/esm/preset/addArgs')];
+}
+
+module.exports = {
+  managerEntries,
+  config,
+};

addons/actions/register.js

@@ -1 +1 @@
-require('./dist/register');
+require('./dist/esm/register');

addons/actions/src/preview/action.ts

@@ -1,4 +1,4 @@
-import { v4 as uuidv4 } from 'uuid';
+import uuidv4 from 'uuid-browser/v4';
 import { addons } from '@storybook/addons';
 import { EVENT_ID } from '../constants';
 import { ActionDisplay, ActionOptions, HandlerFunction } from '../models';

addons/actions/src/typings.d.ts

@@ -1,3 +1,4 @@
 // TODO: following packages need definition files or a TS migration
 declare module 'global';
 declare module 'react-inspector';
+declare module 'uuid-browser/v4';

addons/backgrounds/package.json

@@ -19,7 +19,8 @@
   },
   "license": "MIT",
   "author": "jbaxleyiii",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "typesVersions": {
     "<3.8": {

addons/backgrounds/preset.js

@@ -1 +1,16 @@
-module.exports = require('./dist/preset');
+function config(entry = []) {
+  return [
+    ...entry,
+    require.resolve('./dist/esm/preset/addDecorator'),
+    require.resolve('./dist/esm/preset/addParameter'),
+  ];
+}
+
+function managerEntries(entry = [], options) {
+  return [...entry, require.resolve('./dist/esm/register')];
+}
+
+module.exports = {
+  managerEntries,
+  config,
+};

addons/backgrounds/register.js

@@ -1 +1 @@
-require('./dist/register');
+require('./dist/esm/register');

addons/controls/package.json

@@ -19,7 +19,8 @@
     "directory": "addons/controls"
   },
   "license": "MIT",
-  "main": "dist/register.js",
+  "main": "dist/cjs/register.js",
+  "module": "dist/esm/register.js",
   "files": [
     "dist/**/*",
     "README.md",

addons/controls/preset.js

@@ -1 +1,8 @@
-module.exports = require('./dist/preset');
+const { ensureDocsBeforeControls } = require('./dist/cjs/preset/ensureDocsBeforeControls');
+
+function managerEntries(entry = [], options) {
+  ensureDocsBeforeControls(options.configDir);
+  return [...entry, require.resolve('./dist/esm/register')];
+}
+
+module.exports = { managerEntries };

addons/controls/register.js

@@ -1 +1 @@
-export * from './dist/register';
+import './dist/esm/register';

addons/cssresources/package.json

@@ -19,7 +19,8 @@
   },
   "license": "MIT",
   "author": "nm123github",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "typesVersions": {
     "<3.8": {

addons/cssresources/preset.js

@@ -0,0 +1,5 @@
+function managerEntries(entry = [], options) {
+  return [...entry, require.resolve('./dist/esm/register')];
+}
+
+module.exports = { managerEntries };

addons/cssresources/register.js

@@ -1 +1 @@
-require('./dist/register.js');
+require('./dist/esm/register.js');