wip

app/react/src/client/preview/index.tsx

@@ -1,7 +1,5 @@
 /* eslint-disable prefer-destructuring */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { start } from '@storybook/bundle/index';
+import { start } from '@storybook/core/client';
 import { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
@@ -19,8 +17,6 @@ interface ClientApi extends ClientStoryApi<ReactFramework['storyResult']> {
 }
 const framework = 'react';
 
-console.log('storybook/bundle/index', { start });
-
 const api = start(renderToDOM, { render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {

lib/builder-webpack4/src/preview/iframe-webpack.config.ts

@@ -38,10 +38,11 @@ const storybookPaths: Record<string, string> = [
   'channel-postmessage',
   'components',
   'core-events',
+  'core-client',
   'router',
   'theming',
   'semver',
-  'client-api',
+  // 'client-api',
   'client-logger',
   'preview-web',
   'store',
@@ -123,7 +124,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
     );
 
     configs.forEach((configFilename: any) => {
-      const clientApi = storybookPaths['@storybook/client-api'];
+      const clientApi = storybookPaths['@storybook/core-client'];
       const clientLogger = storybookPaths['@storybook/client-logger'];
 
       virtualModuleMapping[`${configFilename}-generated-config-entry.js`] = interpolate(
@@ -237,6 +238,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
       alias: {
         ...(features?.emotionAlias ? themingPaths : {}),
         ...storybookPaths,
+        '@storybook/client-api': storybookPaths['@storybook/core-client'],
         react: path.dirname(require.resolve('react/package.json')),
         'react-dom': path.dirname(require.resolve('react-dom/package.json')),
       },

lib/builder-webpack4/src/preview/virtualModuleModernEntry.js.handlebars

@@ -2,7 +2,7 @@ import fetch from 'unfetch';
 import global from 'global';
 
 import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
-import { ClientApi } from '@storybook/client-api';
+import { ClientApi } from '@storybook/core-client';
 import { addons } from '@storybook/addons';
 import createPostMessageChannel from '@storybook/channel-postmessage';
 import createWebSocketChannel from '@storybook/channel-websocket';

lib/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -40,6 +40,7 @@ const storybookPaths: Record<string, string> = [
   'channel-postmessage',
   'components',
   'core-events',
+  'core-client',
   'router',
   'theming',
   'semver',
@@ -122,7 +123,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
     );
 
     configs.forEach((configFilename: any) => {
-      const clientApi = storybookPaths['@storybook/client-api'];
+      const clientApi = storybookPaths['@storybook/core-client'];
       const clientLogger = storybookPaths['@storybook/client-logger'];
 
       virtualModuleMapping[`${configFilename}-generated-config-entry.js`] = interpolate(

lib/builder-webpack5/src/preview/virtualModuleModernEntry.js.handlebars

@@ -2,7 +2,7 @@ import fetch from 'unfetch';
 import global from 'global';
 
 import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
-import { ClientApi } from '@storybook/client-api';
+import { ClientApi } from '@storybook/core-client';
 import { addons } from '@storybook/addons';
 import createPostMessageChannel from '@storybook/channel-postmessage';
 import createWebSocketChannel from '@storybook/channel-websocket';

lib/client-api/src/ClientApi.ts

@@ -41,7 +41,7 @@ export interface GetStorybookKind<TFramework extends AnyFramework> {
 }
 
 // ClientApi (and StoreStore) are really singletons. However they are not created until the
-// relevant framework instanciates them via `start.js`. The good news is this happens right away.
+// relevant framework instantiates them via `start.js`. The good news is this happens right away.
 let singleton: ClientApi<AnyFramework>;
 
 const warningAlternatives = {

lib/core-client/package.json

@@ -19,8 +19,8 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "bundle/preview/index.js",
+  "module": "bundle/preview/index.js",
   "types": "dist/ts3.9/index.d.ts",
   "typesVersions": {
     "<3.8": {
@@ -37,7 +37,8 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "prepare": "node ../../scripts/prepare.js",
+    "prebundle": "node ./scripts/prebundle.js"
   },
   "dependencies": {
     "@storybook/addons": "6.5.0-alpha.1",
@@ -61,6 +62,13 @@
     "unfetch": "^4.2.0",
     "util-deprecate": "^1.0.2"
   },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "rollup": "^2.60.2"
+  },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
@@ -75,5 +83,5 @@
     "access": "public"
   },
   "gitHead": "fbf6e247a099ec45c30f8594f255a088847b7957",
-  "sbmodern": "dist/modern/index.js"
+  "sbmodern": "bundle/preview/index.js"
 }

lib/core-client/scripts/prebundle.js

@@ -0,0 +1,36 @@
+const { resolve } = require('path');
+const rollup = require('rollup');
+
+const rollupTypescript = require('@rollup/plugin-typescript');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const commonjs = require('@rollup/plugin-commonjs');
+const json = require('@rollup/plugin-json');
+
+const previewInputOptions = {
+  input: resolve(__dirname, '../src/index.ts'), // conditionally required
+  plugins: [nodeResolve(), commonjs(), json(), rollupTypescript()],
+  external: ['@storybook/addons'],
+};
+
+const previewOutputOptions = {
+  dir: resolve(__dirname, '../bundle/preview'),
+
+  format: 'es', // required
+};
+
+// see below for details on the options
+
+async function build() {
+  // create a bundle
+  const bundle = await rollup.rollup(previewInputOptions);
+
+  await bundle.generate(previewOutputOptions);
+
+  // or write the bundle to disk
+  await bundle.write(previewOutputOptions);
+
+  // closes the bundle
+  await bundle.close();
+}
+
+build();

lib/core-client/src/index.ts

@@ -1,2 +1,4 @@
 export * from './preview';
 export * from './preview/types';
+
+console.log('core-client');

lib/core-client/src/preview/index.ts

@@ -3,6 +3,8 @@ import { StoryStore } from '@storybook/store';
 import { toId } from '@storybook/csf';
 import { start } from './start';
 
+export * from '@storybook/client-api';
+
 export default {
   start,
   toId,