Essentials: Prebundle addons and minimize need for react/react-dom as peerDependency

code/.eslintrc.js

@@ -1,7 +1,20 @@
 const path = require('path');
+const fs = require('fs');
+const { join } = require('path');
 
 const scriptPath = path.join(__dirname, '..', 'scripts');
 
+const addonsPackages = fs
+  .readdirSync(path.join(__dirname, 'addons'))
+  .filter((p) => fs.statSync(join(__dirname, 'addons', p)).isDirectory());
+const libPackages = fs
+  .readdirSync(path.join(__dirname, 'lib'))
+  .filter((p) => fs.statSync(join(__dirname, 'lib', p)).isDirectory());
+const uiPackages = fs
+  .readdirSync(path.join(__dirname, 'ui'))
+  .filter((p) => fs.statSync(join(__dirname, 'ui', p)).isDirectory())
+  .filter((p) => !p.startsWith('.'));
+
 module.exports = {
   root: true,
   extends: [path.join(scriptPath, '.eslintrc.js')],
@@ -52,32 +65,15 @@ module.exports = {
         project: null,
       },
       rules: {
-        // '@typescript-eslint/no-var-requires': 'off',
         '@typescript-eslint/dot-notation': 'off',
         '@typescript-eslint/no-implied-eval': 'off',
         '@typescript-eslint/no-throw-literal': 'off',
         '@typescript-eslint/return-await': 'off',
       },
     },
-    {
-      // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
-      files: ['**/*.ts', '**/*.tsx'],
-      rules: {
-        'no-shadow': 'off',
-        '@typescript-eslint/ban-types': 'warn', // should become error, in the future
-      },
-    },
     {
       // these packages use pre-bundling, dependencies will be bundled, and will be in devDepenencies
-      files: [
-        'addons/**/*',
-        'frameworks/**/*',
-        'lib/**/*',
-        'builders/**/*',
-        'deprecated/**/*',
-        'renderers/**/*',
-        'ui/**/*',
-      ],
+      files: ['frameworks/**/*', 'builders/**/*', 'deprecated/**/*', 'renderers/**/*'],
       excludedFiles: ['frameworks/angular/**/*', 'frameworks/ember/**/*', 'lib/core-server/**/*'],
       rules: {
         'import/no-extraneous-dependencies': [
@@ -87,11 +83,41 @@ module.exports = {
       },
     },
     {
-      files: ['**/ui/*', '**/ui/.storybook/*'],
+      files: ['**/ui/.storybook/**'],
       rules: {
-        'import/no-extraneous-dependencies': ['error', { packageDir: __dirname }],
+        'import/no-extraneous-dependencies': [
+          'error',
+          { packageDir: [__dirname], devDependencies: true },
+        ],
       },
     },
+    ...addonsPackages.map((directory) => ({
+      files: [join('**', 'addons', directory, '**', '*.*')],
+      rules: {
+        'import/no-extraneous-dependencies': [
+          'error',
+          { packageDir: [__dirname, join(__dirname, 'addons', directory)], devDependencies: true },
+        ],
+      },
+    })),
+    ...uiPackages.map((directory) => ({
+      files: [join('**', 'ui', directory, '**', '*.*')],
+      rules: {
+        'import/no-extraneous-dependencies': [
+          'error',
+          { packageDir: [__dirname, join(__dirname, 'ui', directory)], devDependencies: true },
+        ],
+      },
+    })),
+    ...libPackages.map((directory) => ({
+      files: [join('**', 'lib', directory, '**', '*.*')],
+      rules: {
+        'import/no-extraneous-dependencies': [
+          'error',
+          { packageDir: [__dirname, join(__dirname, 'lib', directory)], devDependencies: true },
+        ],
+      },
+    })),
     {
       files: [
         '**/__tests__/**',
@@ -113,7 +139,6 @@ module.exports = {
         'react/require-default-props': 'off',
       },
     },
-    { files: '**/.storybook/config.js', rules: { 'global-require': 'off' } },
     {
       files: ['**/*.stories.*'],
       rules: {
@@ -123,6 +148,8 @@ module.exports = {
     {
       files: ['**/*.tsx', '**/*.ts'],
       rules: {
+        'no-shadow': 'off',
+        '@typescript-eslint/ban-types': 'warn', // should become error, in the future
         'react/require-default-props': 'off',
         'react/prop-types': 'off', // we should use types
         'react/forbid-prop-types': 'off', // we should use types

code/addons/a11y/package.json

@@ -32,21 +32,9 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./manager": {
-      "types": "./dist/manager.d.ts",
-      "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs"
-    },
-    "./preview": {
-      "types": "./dist/preview.d.ts",
-      "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs"
-    },
-    "./register": {
-      "types": "./dist/manager.d.ts",
-      "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs"
-    },
+    "./manager": "./dist/manager.js",
+    "./preview": "./dist/preview.js",
+    "./register": "./dist/manager.js",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -60,10 +48,14 @@
   ],
   "scripts": {
     "check": "../../../scripts/prepare/check.ts",
-    "prep": "../../../scripts/prepare/bundle.ts"
+    "prep": "../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
     "@storybook/addon-highlight": "7.1.0",
+    "@storybook/types": "7.1.0",
+    "axe-core": "^4.2.0"
+  },
+  "devDependencies": {
     "@storybook/channels": "7.1.0",
     "@storybook/client-logger": "7.1.0",
     "@storybook/components": "7.1.0",
@@ -72,35 +64,23 @@
     "@storybook/manager-api": "7.1.0",
     "@storybook/preview-api": "7.1.0",
     "@storybook/theming": "7.1.0",
-    "@storybook/types": "7.1.0",
-    "axe-core": "^4.2.0",
-    "lodash": "^4.17.21",
-    "react-resize-detector": "^7.1.2"
-  },
-  "devDependencies": {
     "@testing-library/react": "^11.2.2",
+    "lodash": "^4.17.21",
+    "react-resize-detector": "^7.1.2",
     "resize-observer-polyfill": "^1.5.1",
     "typescript": "~4.9.3"
   },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    }
-  },
   "publishConfig": {
     "access": "public"
   },
   "bundler": {
-    "entries": [
-      "./src/index.ts",
-      "./src/manager.tsx",
+    "interfaceEntries": [
+      "./src/index.ts"
+    ],
+    "managerEntries": [
+      "./src/manager.tsx"
+    ],
+    "previewEntries": [
       "./src/preview.tsx"
     ]
   },

code/addons/actions/package.json

@@ -33,21 +33,9 @@
       "require": "./dist/decorator.js",
       "import": "./dist/decorator.mjs"
     },
-    "./manager": {
-      "types": "./dist/manager.d.ts",
-      "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs"
-    },
-    "./preview": {
-      "types": "./dist/preview.d.ts",
-      "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs"
-    },
-    "./register.js": {
-      "types": "./dist/manager.d.ts",
-      "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs"
-    },
+    "./manager": "./dist/manager.js",
+    "./preview": "./dist/preview.js",
+    "./register.js": "./dist/manager.js",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -58,14 +46,8 @@
       "*": [
         "dist/index.d.ts"
       ],
-      "manager": [
-        "dist/manager.d.ts"
-      ],
       "decorator": [
         "dist/decorator.d.ts"
-      ],
-      "preview": [
-        "dist/preview.d.ts"
       ]
     }
   },
@@ -77,51 +59,39 @@
   ],
   "scripts": {
     "check": "../../../scripts/prepare/check.ts",
-    "prep": "../../../scripts/prepare/bundle.ts"
+    "prep": "../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
+    "@storybook/global": "^5.0.0",
+    "@storybook/types": "7.1.0",
+    "polished": "^4.2.2",
+    "telejson": "^7.0.3"
+  },
+  "devDependencies": {
     "@storybook/client-logger": "7.1.0",
     "@storybook/components": "7.1.0",
     "@storybook/core-events": "7.1.0",
-    "@storybook/global": "^5.0.0",
     "@storybook/manager-api": "7.1.0",
     "@storybook/preview-api": "7.1.0",
     "@storybook/theming": "7.1.0",
-    "@storybook/types": "7.1.0",
+    "@types/uuid": "^9.0.1",
     "dequal": "^2.0.2",
-    "lodash": "^4.17.21",
-    "polished": "^4.2.2",
-    "prop-types": "^15.7.2",
     "react-inspector": "^6.0.0",
-    "telejson": "^7.0.3",
-    "ts-dedent": "^2.0.0",
+    "typescript": "~4.9.3",
     "uuid": "^9.0.0"
   },
-  "devDependencies": {
-    "@types/lodash": "^4.14.167",
-    "@types/uuid": "^9.0.1",
-    "typescript": "~4.9.3"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    }
-  },
   "publishConfig": {
     "access": "public"
   },
   "bundler": {
-    "entries": [
-      "./src/index.ts",
+    "interfaceEntries": [
       "./src/decorator.ts",
-      "./src/manager.tsx",
+      "./src/index.ts"
+    ],
+    "managerEntries": [
+      "./src/manager.tsx"
+    ],
+    "previewEntries": [
       "./src/preview.ts"
     ]
   },