UI: Prebundle @storybook/ui

.eslintrc.js

@@ -74,7 +74,7 @@ module.exports = {
     },
     {
       // this package uses pre-bundling, dependencies will be bundled, and will be in devDepenencies
-      files: ['**/lib/theming/**/*', '**/lib/router/**/*'],
+      files: ['**/lib/theming/**/*', '**/lib/router/**/*', '**/lib/ui/**/*'],
       rules: {
         'import/no-extraneous-dependencies': ['error', { bundledDependencies: false }],
       },

lib/cli/src/versions.ts

@@ -1,58 +1,58 @@
 // auto generated file, do not edit
 export default {
-  "@storybook/addon-a11y": "6.5.0-alpha.32",
-  "@storybook/addon-actions": "6.5.0-alpha.32",
-  "@storybook/addon-backgrounds": "6.5.0-alpha.32",
-  "@storybook/addon-controls": "6.5.0-alpha.32",
-  "@storybook/addon-docs": "6.5.0-alpha.32",
-  "@storybook/addon-essentials": "6.5.0-alpha.32",
-  "@storybook/addon-interactions": "6.5.0-alpha.32",
-  "@storybook/addon-jest": "6.5.0-alpha.32",
-  "@storybook/addon-links": "6.5.0-alpha.32",
-  "@storybook/addon-measure": "6.5.0-alpha.32",
-  "@storybook/addon-outline": "6.5.0-alpha.32",
-  "@storybook/addon-storyshots": "6.5.0-alpha.32",
-  "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.32",
-  "@storybook/addon-storysource": "6.5.0-alpha.32",
-  "@storybook/addon-toolbars": "6.5.0-alpha.32",
-  "@storybook/addon-viewport": "6.5.0-alpha.32",
-  "@storybook/addons": "6.5.0-alpha.32",
-  "@storybook/angular": "6.5.0-alpha.32",
-  "@storybook/api": "6.5.0-alpha.32",
-  "@storybook/builder-webpack4": "6.5.0-alpha.32",
-  "@storybook/builder-webpack5": "6.5.0-alpha.32",
-  "@storybook/channel-postmessage": "6.5.0-alpha.32",
-  "@storybook/channel-websocket": "6.5.0-alpha.32",
-  "@storybook/channels": "6.5.0-alpha.32",
-  "@storybook/cli": "6.5.0-alpha.32",
-  "@storybook/client-api": "6.5.0-alpha.32",
-  "@storybook/client-logger": "6.5.0-alpha.32",
-  "@storybook/codemod": "6.5.0-alpha.32",
-  "@storybook/components": "6.5.0-alpha.32",
-  "@storybook/core": "6.5.0-alpha.32",
-  "@storybook/core-client": "6.5.0-alpha.32",
-  "@storybook/core-common": "6.5.0-alpha.32",
-  "@storybook/core-events": "6.5.0-alpha.32",
-  "@storybook/core-server": "6.5.0-alpha.32",
-  "@storybook/csf-tools": "6.5.0-alpha.32",
-  "@storybook/ember": "6.5.0-alpha.32",
-  "@storybook/html": "6.5.0-alpha.32",
-  "@storybook/instrumenter": "6.5.0-alpha.32",
-  "@storybook/manager-webpack4": "6.5.0-alpha.32",
-  "@storybook/manager-webpack5": "6.5.0-alpha.32",
-  "@storybook/node-logger": "6.5.0-alpha.32",
-  "@storybook/postinstall": "6.5.0-alpha.32",
-  "@storybook/preact": "6.5.0-alpha.32",
-  "@storybook/preview-web": "6.5.0-alpha.32",
-  "@storybook/react": "6.5.0-alpha.32",
-  "@storybook/router": "6.5.0-alpha.32",
-  "@storybook/server": "6.5.0-alpha.32",
-  "@storybook/source-loader": "6.5.0-alpha.32",
-  "@storybook/store": "6.5.0-alpha.32",
-  "@storybook/svelte": "6.5.0-alpha.32",
-  "@storybook/theming": "6.5.0-alpha.32",
-  "@storybook/ui": "6.5.0-alpha.32",
-  "@storybook/vue": "6.5.0-alpha.32",
-  "@storybook/vue3": "6.5.0-alpha.32",
-  "@storybook/web-components": "6.5.0-alpha.32"
-}
+  '@storybook/addon-a11y': '6.5.0-alpha.32',
+  '@storybook/addon-actions': '6.5.0-alpha.32',
+  '@storybook/addon-backgrounds': '6.5.0-alpha.32',
+  '@storybook/addon-controls': '6.5.0-alpha.32',
+  '@storybook/addon-docs': '6.5.0-alpha.32',
+  '@storybook/addon-essentials': '6.5.0-alpha.32',
+  '@storybook/addon-interactions': '6.5.0-alpha.32',
+  '@storybook/addon-jest': '6.5.0-alpha.32',
+  '@storybook/addon-links': '6.5.0-alpha.32',
+  '@storybook/addon-measure': '6.5.0-alpha.32',
+  '@storybook/addon-outline': '6.5.0-alpha.32',
+  '@storybook/addon-storyshots': '6.5.0-alpha.32',
+  '@storybook/addon-storyshots-puppeteer': '6.5.0-alpha.32',
+  '@storybook/addon-storysource': '6.5.0-alpha.32',
+  '@storybook/addon-toolbars': '6.5.0-alpha.32',
+  '@storybook/addon-viewport': '6.5.0-alpha.32',
+  '@storybook/addons': '6.5.0-alpha.32',
+  '@storybook/angular': '6.5.0-alpha.32',
+  '@storybook/api': '6.5.0-alpha.32',
+  '@storybook/builder-webpack4': '6.5.0-alpha.32',
+  '@storybook/builder-webpack5': '6.5.0-alpha.32',
+  '@storybook/channel-postmessage': '6.5.0-alpha.32',
+  '@storybook/channel-websocket': '6.5.0-alpha.32',
+  '@storybook/channels': '6.5.0-alpha.32',
+  '@storybook/cli': '6.5.0-alpha.32',
+  '@storybook/client-api': '6.5.0-alpha.32',
+  '@storybook/client-logger': '6.5.0-alpha.32',
+  '@storybook/codemod': '6.5.0-alpha.32',
+  '@storybook/components': '6.5.0-alpha.32',
+  '@storybook/core': '6.5.0-alpha.32',
+  '@storybook/core-client': '6.5.0-alpha.32',
+  '@storybook/core-common': '6.5.0-alpha.32',
+  '@storybook/core-events': '6.5.0-alpha.32',
+  '@storybook/core-server': '6.5.0-alpha.32',
+  '@storybook/csf-tools': '6.5.0-alpha.32',
+  '@storybook/ember': '6.5.0-alpha.32',
+  '@storybook/html': '6.5.0-alpha.32',
+  '@storybook/instrumenter': '6.5.0-alpha.32',
+  '@storybook/manager-webpack4': '6.5.0-alpha.32',
+  '@storybook/manager-webpack5': '6.5.0-alpha.32',
+  '@storybook/node-logger': '6.5.0-alpha.32',
+  '@storybook/postinstall': '6.5.0-alpha.32',
+  '@storybook/preact': '6.5.0-alpha.32',
+  '@storybook/preview-web': '6.5.0-alpha.32',
+  '@storybook/react': '6.5.0-alpha.32',
+  '@storybook/router': '6.5.0-alpha.32',
+  '@storybook/server': '6.5.0-alpha.32',
+  '@storybook/source-loader': '6.5.0-alpha.32',
+  '@storybook/store': '6.5.0-alpha.32',
+  '@storybook/svelte': '6.5.0-alpha.32',
+  '@storybook/theming': '6.5.0-alpha.32',
+  '@storybook/ui': '6.5.0-alpha.32',
+  '@storybook/vue': '6.5.0-alpha.32',
+  '@storybook/vue3': '6.5.0-alpha.32',
+  '@storybook/web-components': '6.5.0-alpha.32',
+};

lib/ui/package.json

@@ -37,10 +37,9 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "prepare": "ts-node ../../scripts/prebundle.ts"
   },
   "dependencies": {
-    "@emotion/core": "^10.3.1",
     "@storybook/addons": "6.5.0-alpha.32",
     "@storybook/api": "6.5.0-alpha.32",
     "@storybook/channels": "6.5.0-alpha.32",
@@ -50,11 +49,17 @@
     "@storybook/router": "6.5.0-alpha.32",
     "@storybook/semver": "^7.3.2",
     "@storybook/theming": "6.5.0-alpha.32",
-    "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.8.2",
+    "resolve-from": "^5.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@testing-library/react": "^11.2.2",
+    "copy-to-clipboard": "^3.3.1",
     "core-js-pure": "^3.8.2",
     "downshift": "^6.0.15",
-    "emotion-theming": "^10.0.27",
+    "enzyme": "^3.11.0",
+    "flush-promises": "^1.0.2",
     "fuse.js": "^3.6.1",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
@@ -66,17 +71,8 @@
     "react-helmet-async": "^1.0.7",
     "react-sizeme": "^3.0.1",
     "regenerator-runtime": "^0.13.7",
-    "resolve-from": "^5.0.0",
-    "store2": "^2.12.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@testing-library/react": "^11.2.2",
-    "babel-loader": "^8.0.0",
-    "chromatic": "^6.0.2",
-    "enzyme": "^3.11.0",
-    "flush-promises": "^1.0.2",
-    "terser-webpack-plugin": "^5.0.3",
+    "store2": "^2.12.0",
+    "ts-node": "^10.4.0",
     "webpack": "4"
   },
   "peerDependencies": {
@@ -86,6 +82,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "efd7c324921bb08899caa75f707574d758e61dc2",
+  "bundlerEntrypoint": "./src/index.tsx",
+  "gitHead": "4dc5ec5956f3a8cfb07e3c4b3442fb3f6ac95662",
   "sbmodern": "dist/modern/index.js"
 }

lib/ui/src/components/layout/desktop.stories.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { Fragment } from 'react';
-import { DecoratorFn } from '@storybook/react';
+import type { DecoratorFn } from '@storybook/react';
 
 import isChromatic from 'chromatic/isChromatic';
 

lib/ui/src/components/layout/mobile.stories.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { ActiveTabs } from '@storybook/api';
-import { DecoratorFn } from '@storybook/react';
+import type { DecoratorFn } from '@storybook/react';
 
 import { Mobile, MobileProps } from './mobile';
 

lib/ui/src/components/panel/panel.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import Panel from './panel';

lib/ui/src/components/preview/preview.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 
 import { parsePath, createPath } from 'history';
@@ -6,7 +7,7 @@ import { Location, BaseLocationProvider } from '@storybook/router';
 
 import { ThemeProvider, ensure as ensureTheme, themes } from '@storybook/theming';
 
-import { DecoratorFn } from '@storybook/react';
+import type { DecoratorFn } from '@storybook/react';
 import { Preview } from './preview';
 
 import { PrettyFakeProvider } from '../../FakeProvider';

lib/ui/src/components/sidebar/Heading.stories.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable storybook/use-storybook-testing-library */
 // @TODO: use addon-interactions and remove the rule disable above
 import React from 'react';
-import { ComponentStory, ComponentMeta, ComponentStoryObj } from '@storybook/react';
+import type { ComponentStory, ComponentMeta, ComponentStoryObj } from '@storybook/react';
 import { ThemeProvider, useTheme, Theme } from '@storybook/theming';
 import { action } from '@storybook/addon-actions';
 import { screen } from '@testing-library/dom';

lib/ui/src/components/sidebar/Search.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 

lib/ui/src/components/sidebar/Tree.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable storybook/use-storybook-testing-library */
 // @TODO: use addon-interactions and remove the rule disable above
 import React from 'react';

lib/ui/src/index.tsx

@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="./typings.d.ts" />
+
 import global from 'global';
 import React, { FC, FunctionComponent } from 'react';
 import ReactDOM from 'react-dom';
@@ -80,7 +83,7 @@ const Main: FC<{ provider: Provider }> = ({ provider }) => {
   );
 };
 
-function renderStorybookUI(domNode: HTMLElement, provider: Provider) {
+export default function renderStorybookUI(domNode: HTMLElement, provider: Provider) {
   if (!(provider instanceof Provider)) {
     throw new Error('provider is not extended from the base Provider');
   }
@@ -89,4 +92,3 @@ function renderStorybookUI(domNode: HTMLElement, provider: Provider) {
 }
 
 export { Provider };
-export { renderStorybookUI as default };

lib/ui/src/settings/SettingsFooter.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 
 import { DecoratorFn } from '@storybook/react';

lib/ui/src/settings/about.stories.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { actions as createActions } from '@storybook/addon-actions';

lib/ui/src/settings/release_notes.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { actions as makeActions } from '@storybook/addon-actions';
 

lib/ui/src/settings/shortcuts.stories.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { actions as makeActions } from '@storybook/addon-actions';
 
-import { DecoratorFn } from '@storybook/react';
+import type { DecoratorFn } from '@storybook/react';
 import { ShortcutsScreen } from './shortcuts';
 
 const defaultShortcuts = {

yarn.lock

@@ -8710,7 +8710,6 @@ __metadata:
   resolution: "@storybook/ui@workspace:lib/ui"
   dependencies:
     "@babel/core": ^7.12.10
-    "@emotion/core": ^10.3.1
     "@storybook/addons": 6.5.0-alpha.32
     "@storybook/api": 6.5.0-alpha.32
     "@storybook/channels": 6.5.0-alpha.32
@@ -8721,13 +8720,10 @@ __metadata:
     "@storybook/semver": ^7.3.2
     "@storybook/theming": 6.5.0-alpha.32
     "@testing-library/react": ^11.2.2
-    babel-loader: ^8.0.0
-    chromatic: ^6.0.2
     copy-to-clipboard: ^3.3.1
     core-js: ^3.8.2
     core-js-pure: ^3.8.2
     downshift: ^6.0.15
-    emotion-theming: ^10.0.27
     enzyme: ^3.11.0
     flush-promises: ^1.0.2
     fuse.js: ^3.6.1
@@ -8743,7 +8739,7 @@ __metadata:
     regenerator-runtime: ^0.13.7
     resolve-from: ^5.0.0
     store2: ^2.12.0
-    terser-webpack-plugin: ^5.0.3
+    ts-node: ^10.4.0
     webpack: 4
   peerDependencies:
     react: ^16.8.0 || ^17.0.0