wip

.gitignore

@@ -41,4 +41,6 @@ examples/angular-cli/addon-jest.testresults.json
 !/**/.yarn/plugins
 !/**/.yarn/sdks
 !/**/.yarn/versions
-/**/.pnp.*
+/**/.pnp.*
+examples/*/*-stats.json
+examples/*/*-stats-*.json

lib/addons/src/types.ts

@@ -82,7 +82,7 @@ export interface Parameters {
   [key: string]: any;
 }
 
-export type StoryContext = StoryContextForFramework<AnyFramework>;
+export type StoryContext = StoryContextForFramework;
 export type StoryContextUpdate = Partial<StoryContext>;
 
 type ReturnTypeFramework<ReturnType> = { component: any; storyResult: ReturnType };

lib/client-api/src/types.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   Addon,
   StoryId,
   StoryName,
@@ -13,8 +13,8 @@ import {
   LoaderFunction,
   StoryContext,
 } from '@storybook/addons';
-import { AnyFramework, StoryIdentifier, ProjectAnnotations } from '@storybook/csf';
-import { StoryStore, HooksContext, RenderContext } from '@storybook/store';
+import type { AnyFramework, StoryIdentifier, ProjectAnnotations } from '@storybook/csf';
+import type { StoryStore, HooksContext, RenderContext } from '@storybook/store';
 
 export type {
   SBType,

lib/components/scripts/prebundle.js

@@ -10,13 +10,23 @@ const { babel } = require('@rollup/plugin-babel');
 const previewInputOptions = {
   input: resolve(__dirname, '../src/index.ts'), // conditionally required
   plugins: [
-    nodeResolve(),
+    nodeResolve({
+      browser: true,
+      preferBuiltins: true,
+    }),
     commonjs(),
     json(),
     babel({ babelHelpers: 'bundled' }),
     rollupTypescript(),
   ],
-  external: ['@storybook/addons', '@storybook/theming', 'react', 'react-dom', '@storybook/csf'],
+  external: [
+    '@storybook/addons',
+    '@storybook/csf',
+    '@storybook/theming',
+    'core-js',
+    'react-dom',
+    'react',
+  ],
 };
 
 const previewOutputOptions = {

lib/components/src/blocks/index.ts

@@ -8,3 +8,4 @@ export * from './IFrame';
 export * from './Typeset';
 export * from './ColorPalette';
 export * from './IconGallery';
+export * from './StorySkeleton';

lib/components/src/controls/react-editable-json-tree/utils/objectTypes.ts

@@ -3,7 +3,7 @@
  * @param obj {*} object to get type
  * @returns {*}
  */
-function getObjectType(obj) {
+function getObjectType(obj:any) {
   if (
     obj !== null &&
     typeof obj === 'object' &&
@@ -21,7 +21,7 @@ function getObjectType(obj) {
  * @param newValue {*} new value
  * @returns {boolean} result
  */
-function isComponentWillChange(oldValue, newValue) {
+function isComponentWillChange(oldValue:any, newValue:any) {
   const oldType = getObjectType(oldValue);
   const newType = getObjectType(newValue);
   return (oldType === 'Function' || newType === 'Function') && newType !== oldType;

lib/core-client/package.json

@@ -38,7 +38,9 @@
   ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js",
-    "prebundle": "node ./scripts/prebundle.js"
+    "prebundle": "node ./scripts/prebundle.js",
+    "dtsbundle2": "node ./scripts/dtsbundle.js",
+    "dtsbundle": "dts-bundle-generator --no-banner -o ./bundle/index.d.ts ./src/index.ts"
   },
   "dependencies": {
     "@storybook/addons": "6.5.0-alpha.1",
@@ -67,7 +69,11 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-typescript": "^8.3.0",
-    "rollup": "^2.60.2"
+    "dts-bundle-generator": "^6.2.0",
+    "rollup": "^2.60.2",
+    "rollup-plugin-dts": "^3.0.0",
+    "rollup-plugin-flat-dts": "^1.4.0",
+    "tsc-prog": "^2.2.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",

lib/core-client/scripts/dtsbundle.js

@@ -0,0 +1,12 @@
+const tsc = require('tsc-prog');
+
+tsc.build({
+  basePath: __dirname,
+  configFilePath: '../tsconfig.json',
+  compilerOptions: {
+    declaration: true, // must be set
+  },
+  bundleDeclaration: {
+    entryPoint: 'index.d.ts', // relative to the OUTPUT directory ('dist' here)
+  },
+});

lib/core-client/scripts/prebundle.js

@@ -5,24 +5,37 @@ 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 flatDts = require('rollup-plugin-flat-dts');
+
+// const { default: dts } = require('rollup-plugin-dts');
 
 const previewInputOptions = {
   input: resolve(__dirname, '../src/index.ts'), // conditionally required
-  plugins: [nodeResolve(), commonjs(), json(), rollupTypescript()],
+  plugins: [
+    nodeResolve({
+      browser: true,
+      preferBuiltins: true,
+    }),
+    commonjs(),
+    json(),
+    rollupTypescript() /* , dts() */,
+  ],
   external: [
     '@storybook/addons',
     '@storybook/components',
     '@storybook/csf',
     '@storybook/theming',
     'react-dom',
     'react',
+    'core-js',
   ],
 };
 
 const previewOutputOptions = {
   dir: resolve(__dirname, '../bundle/preview'),
 
   format: 'es', // required
+  // plugins: [flatDts()],
 };
 
 // see below for details on the options

lib/core-client/src/index.ts

@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../typings.d.ts" />
+
 export * from './preview';
 export * from './preview/types';
 

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

@@ -12,4 +12,4 @@ export default {
   StoryStore,
 };
 
-export { start, toId, ClientApi, StoryStore };
+export { start, toId, StoryStore };

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

@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../typings.d.ts" />
+
 import global from 'global';
 import deprecate from 'util-deprecate';
 import { ClientApi } from '@storybook/client-api';

lib/core-client/src/typings.d.ts

@@ -10,29 +10,29 @@ declare module 'open';
 declare module 'x-default-browser';
 declare module '@storybook/ui';
 
-declare module 'file-system-cache' {
-  export interface Options {
-    basePath?: string;
-    ns?: string | string[];
-    extension?: string;
-  }
+// declare module 'file-system-cache' {
+//   export interface Options {
+//     basePath?: string;
+//     ns?: string | string[];
+//     extension?: string;
+//   }
 
-  export declare class FileSystemCache {
-    constructor(options: Options);
-    path(key: string): string;
-    fileExists(key: string): Promise<boolean>;
-    ensureBasePath(): Promise<void>;
-    get(key: string, defaultValue?: any): Promise<any | typeof defaultValue>;
-    getSync(key: string, defaultValue?: any): any | typeof defaultValue;
-    set(key: string, value: any): Promise<{ path: string }>;
-    setSync(key: string, value: any): this;
-    remove(key: string): Promise<void>;
-    clear(): Promise<void>;
-    save(): Promise<{ paths: string[] }>;
-    load(): Promise<{ files: Array<{ path: string; value: any }> }>;
-  }
+//   export declare class FileSystemCache {
+//     constructor(options: Options);
+//     path(key: string): string;
+//     fileExists(key: string): Promise<boolean>;
+//     ensureBasePath(): Promise<void>;
+//     get(key: string, defaultValue?: any): Promise<any | typeof defaultValue>;
+//     getSync(key: string, defaultValue?: any): any | typeof defaultValue;
+//     set(key: string, value: any): Promise<{ path: string }>;
+//     setSync(key: string, value: any): this;
+//     remove(key: string): Promise<void>;
+//     clear(): Promise<void>;
+//     save(): Promise<{ paths: string[] }>;
+//     load(): Promise<{ files: Array<{ path: string; value: any }> }>;
+//   }
 
-  function create(options: Options): FileSystemCache;
+//   function create(options: Options): FileSystemCache;
 
-  export = create;
-}
+//   export = create;
+// }

scripts/bootstrap.js

@@ -99,6 +99,11 @@ function run() {
             process.env.CI ? `--max-parallel=${maxConcurrentTasks}` : ''
           }`
         );
+        spawn(
+          `nx run-many --target=prebundle --all --parallel ${
+            process.env.CI ? `--max-parallel=${maxConcurrentTasks}` : ''
+          }`
+        );
       },
       order: 2,
     }),