Make Storybook esbuild-compatible

This would be a good fundament for adding Snowpack/Vite builder support. Currently, Storybook UI can be built by Webpack or tsc, but esbuild transpiles .ts file-by-file and therefore has some caveats: https://esbuild.github.io/content-types/#typescript-caveats This change adds isolatedModules: true to tsconfig.json, and fixes a few places in the Storybook source code. The result has been briefly tested with esbuild - with these changes, it's possible to build Storybook UI using Vite.
storybookjs · Mar 29, 2021 · f74a04a · f74a04a
1 parent 8b7fa34
commit f74a04a
Show file tree

Hide file tree

Showing 28 changed files with 46 additions and 23 deletions.
diff --git a/addons/backgrounds/src/index.ts b/addons/backgrounds/src/index.ts
@@ -1,3 +1,6 @@
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }
+
+// make it work with --isolatedModules
+export {};
diff --git a/addons/docs/src/lib/docgen/types.ts b/addons/docs/src/lib/docgen/types.ts
@@ -53,4 +53,4 @@ export enum TypeSystem {
   UNKNOWN = 'Unknown',
 }
 
-export { PropDef };
+export type { PropDef };
diff --git a/addons/docs/src/public_api.ts b/addons/docs/src/public_api.ts
@@ -0,0 +1,2 @@
+// make it work with --isolatedModules
+export {};
diff --git a/addons/knobs/src/type-defs.ts b/addons/knobs/src/type-defs.ts
@@ -51,4 +51,4 @@ export type Knob<T extends KnobType = any> = T extends 'text'
   ? KnobPlus<T, Pick<OptionsTypeKnob<any>, 'options' | 'value' | 'optionsObj'>>
   : never;
 
-export { KnobType };
+export type { KnobType };
diff --git a/app/angular/src/client/index.ts b/app/angular/src/client/index.ts
@@ -11,7 +11,7 @@ export {
 
 export * from './preview/types-6-0';
 
-export { StoryFnAngularReturnType as IStory } from './preview/types';
+export type { StoryFnAngularReturnType as IStory } from './preview/types';
 
 export { moduleMetadata, componentWrapperDecorator } from './preview/decorators';
 

diff --git a/app/angular/src/client/preview/types-6-0.ts b/app/angular/src/client/preview/types-6-0.ts
@@ -8,7 +8,7 @@ import {
 } from '@storybook/addons';
 import { StoryFnAngularReturnType } from './types';
 
-export { Args, ArgTypes } from '@storybook/addons';
+export type { Args, ArgTypes } from '@storybook/addons';
 
 type AngularComponent = any;
 type AngularReturnType = StoryFnAngularReturnType;

diff --git a/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts b/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts
@@ -39,3 +39,7 @@
 it('work-around', () => {
   expect(true).toBe(true);
 });
+
+// Make it work with --isolatedModules, we need a dummy export
+/* eslint-disable jest/no-export */
+export default {};
diff --git a/app/aurelia/src/client/preview/index.ts b/app/aurelia/src/client/preview/index.ts
@@ -29,7 +29,8 @@ export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   });
 };
 
-export { StoryFnAureliaReturnType, addRegistries, addContainer, Component, addComponents };
+export { addRegistries, addContainer, addComponents };
+export type { StoryFnAureliaReturnType, Component };
 
 export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args);
 export const addDecorator: ClientApi['addDecorator'] = api.clientApi

diff --git a/app/aurelia/src/server/__tests__/create-fork-ts-checker-plugin.test.ts b/app/aurelia/src/server/__tests__/create-fork-ts-checker-plugin.test.ts
@@ -37,3 +37,7 @@
 it('work-around', () => {
   expect(true).toBe(true);
 });
+
+// Make it work with --isolatedModules, we need a dummy export
+/* eslint-disable jest/no-export */
+export default {};
diff --git a/app/react/src/client/preview/types.ts b/app/react/src/client/preview/types.ts
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 export type { RenderContext } from '@storybook/client-api';
-export { StoryContext } from '@storybook/addons';
+export type { StoryContext } from '@storybook/addons';
 
 export interface ShowErrorArgs {
   title: string;

diff --git a/app/web-components/src/client/preview/types.ts b/app/web-components/src/client/preview/types.ts
@@ -1,7 +1,7 @@
 import { TemplateResult, SVGTemplateResult } from 'lit-html';
 
 export type { RenderContext } from '@storybook/core';
-export { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
+export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
 
 export type StoryFnHtmlReturnType = string | Node | TemplateResult | SVGTemplateResult;
 

diff --git a/lib/api/shortcut.js b/lib/api/shortcut.js
@@ -1 +1 @@
-module.exports = require('./dist/cjs/lib/shortcut');
+export * from './dist/esm/lib/shortcut';
diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts
@@ -15,13 +15,15 @@ import { getEventMetadata } from '../lib/events';
 import {
   denormalizeStoryParameters,
   transformStoriesRawToStoriesHash,
+  isStory,
+  isRoot,
+} from '../lib/stories';
+import type {
   StoriesHash,
   Story,
   Group,
   StoryId,
-  isStory,
   Root,
-  isRoot,
   StoriesRaw,
   SetStoriesPayload,
 } from '../lib/stories';

diff --git a/lib/ui/src/components/layout/draggers.tsx b/lib/ui/src/components/layout/draggers.tsx
@@ -72,4 +72,5 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
   }
 );
 
-export { Draggable, Handle, DraggableEvent, DraggableData };
+export { Draggable, Handle };
+export type { DraggableEvent, DraggableData };
diff --git a/lib/ui/src/components/sidebar/SearchResults.stories.tsx b/lib/ui/src/components/sidebar/SearchResults.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StoriesHash } from '@storybook/api';
+import type { StoriesHash } from '@storybook/api';
 
 import { mockDataset } from './mockdata';
 import { SearchResults } from './SearchResults';

diff --git a/lib/ui/src/components/sidebar/Sidebar.tsx b/lib/ui/src/components/sidebar/Sidebar.tsx
@@ -3,7 +3,7 @@ import React, { FunctionComponent, useMemo } from 'react';
 
 import { styled } from '@storybook/theming';
 import { ScrollArea, Spaced } from '@storybook/components';
-import { StoriesHash, State } from '@storybook/api';
+import type { StoriesHash, State } from '@storybook/api';
 
 import { Heading } from './Heading';
 

diff --git a/lib/ui/src/components/sidebar/Tree.stories.tsx b/lib/ui/src/components/sidebar/Tree.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StoriesHash } from '@storybook/api';
+import type { StoriesHash } from '@storybook/api';
 
 import { Tree } from './Tree';
 import { stories } from './mockdata.large';

diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
@@ -1,4 +1,5 @@
-import { Group, Story, StoriesHash, isRoot, isStory } from '@storybook/api';
+import type { Group, Story, StoriesHash } from '@storybook/api';
+import { isRoot, isStory } from '@storybook/api';
 import { styled } from '@storybook/theming';
 import { Icons } from '@storybook/components';
 import { transparentize } from 'polished';

diff --git a/lib/ui/src/components/sidebar/data.test.ts b/lib/ui/src/components/sidebar/data.test.ts
@@ -1,4 +1,4 @@
-import { StoriesHash } from '@storybook/api';
+import type { StoriesHash } from '@storybook/api';
 import { collapseDocsOnlyStories, collapseAllStories } from './data';
 
 type Item = StoriesHash[keyof StoriesHash];

diff --git a/lib/ui/src/components/sidebar/data.ts b/lib/ui/src/components/sidebar/data.ts
@@ -1,4 +1,4 @@
-import { Story, StoriesHash } from '@storybook/api';
+import type { Story, StoriesHash } from '@storybook/api';
 import { Item } from './types';
 
 export const DEFAULT_REF_ID = 'storybook_internal';

diff --git a/lib/ui/src/components/sidebar/mockdata.ts b/lib/ui/src/components/sidebar/mockdata.ts
@@ -1,4 +1,4 @@
-import { StoriesHash } from '@storybook/api';
+import type { StoriesHash } from '@storybook/api';
 
 export type MockDataSet = Record<string, StoriesHash>;
 

diff --git a/lib/ui/src/components/sidebar/types.ts b/lib/ui/src/components/sidebar/types.ts
@@ -1,4 +1,4 @@
-import { StoriesHash, State } from '@storybook/api';
+import type { StoriesHash, State } from '@storybook/api';
 import { ControllerStateAndHelpers } from 'downshift';
 
 export type Refs = State['refs'];

diff --git a/lib/ui/src/components/sidebar/useExpanded.ts b/lib/ui/src/components/sidebar/useExpanded.ts
@@ -1,4 +1,5 @@
-import { StoriesHash, useStorybookApi } from '@storybook/api';
+import type { StoriesHash } from '@storybook/api';
+import { useStorybookApi } from '@storybook/api';
 import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core-events';
 import { document } from 'global';
 import throttle from 'lodash/throttle';

diff --git a/lib/ui/src/components/sidebar/utils.ts b/lib/ui/src/components/sidebar/utils.ts
@@ -1,7 +1,8 @@
 import memoize from 'memoizerific';
 import { document, window, DOCS_MODE } from 'global';
 import { SyntheticEvent } from 'react';
-import { StoriesHash, isRoot } from '@storybook/api';
+import type { StoriesHash } from '@storybook/api';
+import { isRoot } from '@storybook/api';
 
 import { DEFAULT_REF_ID } from './data';
 import { Item, RefType, Dataset, SearchItem } from './types';

diff --git a/lib/ui/src/containers/preview.tsx b/lib/ui/src/containers/preview.tsx
@@ -1,7 +1,8 @@
 import { PREVIEW_URL } from 'global';
 import React from 'react';
 
-import { Consumer, Combo, StoriesHash, isRoot, isGroup, isStory } from '@storybook/api';
+import type { Combo, StoriesHash } from '@storybook/api';
+import { Consumer, isRoot, isGroup, isStory } from '@storybook/api';
 
 import { Preview } from '../components/preview/preview';
 

diff --git a/lib/ui/src/containers/sidebar.tsx b/lib/ui/src/containers/sidebar.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from 'react';
 
-import { Consumer, Combo, StoriesHash } from '@storybook/api';
+import type { Combo, StoriesHash } from '@storybook/api';
+import { Consumer } from '@storybook/api';
 
 import { Sidebar as SidebarComponent } from '../components/sidebar/Sidebar';
 import { useMenu } from './menu';

diff --git a/lib/ui/src/typings.ts → lib/ui/src/typings.d.ts b/lib/ui/src/typings.ts → lib/ui/src/typings.d.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -11,6 +11,7 @@
     "skipLibCheck": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
+    "isolatedModules": true,
     "target": "es5",
     "types": ["jest"],
     "lib": ["es2017", "dom"]