Merge pull request #19271 from storybookjs/tech/tsup-lib-client-api

Build: Bundle lib/client-api with ts-up

code/frameworks/angular/package.json

@@ -87,6 +87,7 @@
     "@nrwl/workspace": "14.6.1",
     "@types/autoprefixer": "^9.7.2",
     "@types/tmp": "^0.2.3",
+    "@types/webpack-env": "^1.16.0",
     "cross-spawn": "^7.0.3",
     "jest": "^27.5.1",
     "jest-preset-angular": "^12.0.0",

code/frameworks/angular/src/client/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 import './globals';
 
 export * from './public-api';

code/frameworks/ember/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 export {
   storiesOf,
   setAddon,

code/lib/client-api/package.json

@@ -20,9 +20,17 @@
   },
   "license": "MIT",
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -31,7 +39,7 @@
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "node ../../../scripts/prepare.js"
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
     "@storybook/addons": "7.0.0-alpha.34",
@@ -57,5 +65,10 @@
   "publishConfig": {
     "access": "public"
   },
+  "bundler": {
+    "entries": [
+      "./src/index.ts"
+    ]
+  },
   "gitHead": "fc90fc875462421c1faa35862ac4bc436de8e75f"
 }

code/lib/client-api/src/index.ts

@@ -11,6 +11,8 @@ import {
   setGlobalRender,
 } from './ClientApi';
 
+export type { GetStorybookKind, GetStorybookStory } from './ClientApi';
+
 export * from './types';
 
 export * from './queryparams';

code/lib/core-client/src/preview/executeLoadable.ts

@@ -1,3 +1,6 @@
+/// <reference types="node" />
+/// <reference types="webpack-env" />
+
 import { logger } from '@storybook/client-logger';
 import { Path, ModuleExports } from '@storybook/store';
 import { Loadable, RequireContext, LoaderFunction } from './types';

code/lib/core-client/src/preview/start.ts

@@ -5,7 +5,7 @@ import { PreviewWeb } from '@storybook/preview-web';
 import type { AnyFramework, ArgsStoryFn } from '@storybook/csf';
 import { createChannel } from '@storybook/channel-postmessage';
 import { addons } from '@storybook/addons';
-import Events from '@storybook/core-events';
+import { FORCE_RE_RENDER } from '@storybook/core-events';
 import type { Path, WebProjectAnnotations } from '@storybook/store';
 
 import { Loadable } from './types';
@@ -24,16 +24,45 @@ const removedApi = (name: string) => () => {
   throw new Error(`@storybook/client-api:${name} was removed in storyStoreV7.`);
 };
 
+interface RendererImplementation<TFramework extends AnyFramework> {
+  decorateStory?: WebProjectAnnotations<TFramework>['applyDecorators'];
+  render?: ArgsStoryFn<TFramework>;
+}
+
+interface ClientAPIFacade {
+  /* deprecated */
+  addDecorator: (...args: any[]) => never;
+  /* deprecated */
+  addParameters: (...args: any[]) => never;
+  /* deprecated */
+  clearDecorators: (...args: any[]) => never;
+  /* deprecated */
+  addLoader: (...args: any[]) => never;
+  /* deprecated */
+  setAddon: (...args: any[]) => never;
+  /* deprecated */
+  getStorybook: (...args: any[]) => never;
+  /* deprecated */
+  storiesOf: (...args: any[]) => never;
+  /* deprecated */
+  raw: (...args: any[]) => never;
+}
+
+interface StartReturnValue<TFramework extends AnyFramework> {
+  /* deprecated */
+  forceReRender: () => void;
+  /* deprecated */
+  getStorybook: any;
+  /* deprecated */
+  configure: any;
+  /* deprecated */
+  clientApi: ClientApi<TFramework> | ClientAPIFacade;
+}
+
 export function start<TFramework extends AnyFramework>(
   renderToDOM: WebProjectAnnotations<TFramework>['renderToDOM'],
-  {
-    decorateStory,
-    render,
-  }: {
-    decorateStory?: WebProjectAnnotations<TFramework>['applyDecorators'];
-    render?: ArgsStoryFn<TFramework>;
-  } = {}
-) {
+  { decorateStory, render }: RendererImplementation<TFramework> = {}
+): StartReturnValue<TFramework> {
   if (globalWindow) {
     // To enable user code to detect if it is running in Storybook
     globalWindow.IS_STORYBOOK = true;
@@ -84,9 +113,8 @@ export function start<TFramework extends AnyFramework>(
   }
 
   return {
-    forceReRender: () => channel.emit(Events.FORCE_RE_RENDER),
+    forceReRender: () => channel.emit(FORCE_RE_RENDER),
     getStorybook: (): void[] => [],
-    raw: (): void => {},
 
     clientApi,
     // This gets called each time the user calls configure (i.e. once per HMR)

code/renderers/html/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 import './globals';
 
 export * from './public-api';

code/renderers/preact/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 export * from './globals';
 
 export * from './public-api';

code/renderers/react/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 import './globals';
 
 export * from './public-api';

code/renderers/server/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 import './globals';
 
 export * from './public-api';

code/renderers/svelte/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 import './globals';
 
 export * from './public-api';

code/renderers/vue/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 import './globals';
 
 export * from './public-api';

code/renderers/vue3/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 import './globals';
 
 export * from './public-api';

code/renderers/web-components/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 // @ts-expect-error (Converted from ts-ignore)
 import global from 'global';
 

code/yarn.lock

@@ -7150,6 +7150,7 @@ __metadata:
     "@types/react": ^16.14.23
     "@types/react-dom": ^16.9.14
     "@types/tmp": ^0.2.3
+    "@types/webpack-env": ^1.16.0
     autoprefixer: ^9.8.6
     core-js: ^3.8.2
     cross-spawn: ^7.0.3