Merge pull request #17338 from storybookjs/tech/improve-dev-babel-setup

Build: Overhaul dev script & compile-babel & compile-tsc

.babelrc.js

@@ -50,6 +50,7 @@ module.exports = {
     ],
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
     '@babel/plugin-proposal-export-default-from',
     '@babel/plugin-syntax-dynamic-import',
     ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],

.circleci/config.yml

@@ -221,7 +221,6 @@ jobs:
           name: Run E2E tests
           # Do not test CRA here because it's done in PnP part
           # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
-          # TODO: Add `angular` as soon as Storybook is compatible with Angular 13
           command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2
           no_output_timeout: 5m
       - store_artifacts:

addons/docs/package.json

@@ -40,6 +40,7 @@
     "common/**/*",
     "ember/**/*",
     "html/**/*",
+    "svelte/**/*",
     "postinstall/**/*",
     "react/**/*",
     "vue/**/*",

addons/docs/src/frameworks/svelte/prepareForInline.ts

@@ -2,8 +2,8 @@ import { AnyFramework, StoryFn } from '@storybook/csf';
 
 import React from 'react';
 
-// @ts-ignore
-import HOC from './HOC.svelte';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import HOC from '@storybook/addon-docs/svelte/HOC.svelte';
 
 export const prepareForInline = (storyFn: StoryFn<AnyFramework>) => {
   const el = React.useRef(null);

addons/docs/src/typings.d.ts

@@ -8,6 +8,7 @@ declare module 'require-from-string';
 declare module 'styled-components';
 declare module 'acorn-jsx';
 declare module 'vue/dist/vue';
+declare module '@storybook/addon-docs/svelte/HOC.svelte';
 
 declare module 'sveltedoc-parser' {
   export function parse(options: any): Promise<any>;

addons/storysource/src/register.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { addons } from '@storybook/addons';
 
 import { StoryPanel } from './StoryPanel';
-import { ADDON_ID, PANEL_ID } from '.';
+import { ADDON_ID, PANEL_ID } from './index';
 
 addons.register(ADDON_ID, (api) => {
   addons.addPanel(PANEL_ID, {

app/svelte/src/client/preview/decorators.ts

@@ -1,6 +1,7 @@
 import { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
-import SlotDecorator from './SlotDecorator.svelte';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import SlotDecorator from '@storybook/svelte/templates/SlotDecorator.svelte';
 import { SvelteFramework } from './types';
 
 /**

app/svelte/src/client/preview/index.ts

@@ -4,19 +4,17 @@ import { decorateStory } from './decorators';
 import './globals';
 import { render, renderToDOM } from './render';
 
-const { configure: coreConfigure, clientApi, forceReRender } = start(renderToDOM, {
+const {
+  configure: coreConfigure,
+  clientApi,
+  forceReRender,
+} = start(renderToDOM, {
   decorateStory,
   render,
 });
 
-export const {
-  setAddon,
-  addDecorator,
-  addParameters,
-  clearDecorators,
-  getStorybook,
-  raw,
-} = clientApi;
+export const { setAddon, addDecorator, addParameters, clearDecorators, getStorybook, raw } =
+  clientApi;
 
 const framework = 'svelte';
 export const storiesOf = (kind: string, m: any) =>

app/svelte/src/client/preview/render.ts

@@ -1,8 +1,9 @@
 import global from 'global';
 import { ArgsStoryFn } from '@storybook/csf';
-import { RenderContext } from '@storybook/store';
+import type { RenderContext } from '@storybook/store';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import PreviewRender from '@storybook/svelte/templates/PreviewRender.svelte';
 import { SvelteFramework } from './types';
-import PreviewRender from './PreviewRender.svelte';
 
 const { document } = global;
 

app/svelte/src/typings.d.ts

@@ -1,2 +1,3 @@
 declare module 'global';
-declare module '*.svelte';
+declare module '@storybook/svelte/templates/SlotDecorator.svelte';
+declare module '@storybook/svelte/templates/PreviewRender.svelte';

docs/contribute/code.md

@@ -143,8 +143,8 @@ npx sb@next link --local /path/to/local-repro-directory
 
 <details>
 
-<summary>`yarn dev` watches everything but is resource-intensive</summary>
+<summary>`yarn build --all --watch` watches everything but is resource-intensive</summary>
 
-It's troublesome to know which packages you're going to change ahead of time, and watching all of them can be highly demanding, even on modern machines. If you're working on a powerful enough machine, you can use `yarn dev` instead of `yarn build`.
+It's troublesome to know which packages you're going to change ahead of time, and watching all of them can be highly demanding, even on modern machines. If you're working on a powerful enough machine, you can use `yarn build --all --watch` instead of `yarn build`.
 
 </details>

lib/builder-webpack4/package.json

@@ -31,8 +31,7 @@
   },
   "files": [
     "dist/**/*",
-    "dll/**/*",
-    "types/**/*",
+    "templates/**/*",
     "*.js",
     "*.d.ts"
   ],

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

@@ -101,7 +101,11 @@ export default async (options: Options & Record<string, any>): Promise<Configura
 
     const configEntryPath = path.resolve(path.join(workingDir, 'storybook-config-entry.js'));
     virtualModuleMapping[configEntryPath] = handlebars(
-      await readTemplate(path.join(__dirname, 'virtualModuleModernEntry.js.handlebars')),
+      await readTemplate(
+        require.resolve(
+          '@storybook/builder-webpack4/templates/virtualModuleModernEntry.js.handlebars'
+        )
+      ),
       {
         storiesFilename,
         configs,

lib/builder-webpack5/package.json

@@ -31,8 +31,7 @@
   },
   "files": [
     "dist/**/*",
-    "dll/**/*",
-    "types/**/*",
+    "templates/**/*",
     "*.js",
     "*.d.ts"
   ],

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

@@ -100,7 +100,11 @@ export default async (options: Options & Record<string, any>): Promise<Configura
     virtualModuleMapping[storiesPath] = toImportFn(stories);
     const configEntryPath = path.resolve(path.join(workingDir, 'storybook-config-entry.js'));
     virtualModuleMapping[configEntryPath] = handlebars(
-      await readTemplate(path.join(__dirname, 'virtualModuleModernEntry.js.handlebars')),
+      await readTemplate(
+        require.resolve(
+          '@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars'
+        )
+      ),
       {
         storiesFilename,
         configs,

lib/channel-websocket/tsconfig.json

@@ -3,6 +3,9 @@
   "compilerOptions": {
     "rootDir": "./src"
   },
+  "include": [
+    "src/**/*"
+  ],
   "exclude": [
     "src/**/*.test.*",
     "src/**/tests/**/*",

lib/cli/package.json

@@ -38,8 +38,7 @@
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts",
-    "versions.json"
+    "*.d.ts"
   ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js",

lib/cli/scripts/generate-sb-packages-versions.js

@@ -1,9 +1,10 @@
 #!/usr/bin/env node
 
-const { writeJson, readJson } = require('fs-extra');
+const { readJson, writeFile } = require('fs-extra');
 const path = require('path');
 const globby = require('globby');
 const semver = require('@storybook/semver');
+const { default: dedent } = require('ts-dedent');
 
 const rootDirectory = path.join(__dirname, '..', '..', '..');
 
@@ -39,9 +40,13 @@ const run = async () => {
     .sort((package1, package2) => package1.name.localeCompare(package2.name))
     .reduce((acc, { name }) => ({ ...acc, [name]: updatedVersion }), {});
 
-  await writeJson(path.join(__dirname, '..', 'src', 'versions.json'), packageToVersionMap, {
-    spaces: 2,
-  });
+  await writeFile(
+    path.join(__dirname, '..', 'src', 'versions.ts'),
+    dedent`
+      // auto generated file, do not edit
+      export default ${JSON.stringify(packageToVersionMap, null, 2)}
+    `
+  );
 };
 
 run().catch((e) => {

lib/cli/src/js-package-manager/JsPackageManager.ts

@@ -4,7 +4,7 @@ import { sync as spawnSync } from 'cross-spawn';
 import { commandLog } from '../helpers';
 import { PackageJson, PackageJsonWithDepsAndDevDeps } from './PackageJson';
 import { readPackageJson, writePackageJson } from './PackageJsonHelper';
-import storybookPackagesVersions from '../versions.json';
+import storybookPackagesVersions from '../versions';
 
 const logger = console;
 

lib/cli/src/js-package-manager/NPMProxy.test.ts

@@ -116,7 +116,7 @@ describe('NPM Proxy', () => {
   describe('getVersion', () => {
     it('with a Storybook package listed in versions.json it returns the version', async () => {
       // eslint-disable-next-line global-require
-      const storybookAngularVersion = require('../versions.json')['@storybook/angular'];
+      const storybookAngularVersion = require('../versions').default['@storybook/angular'];
       const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('"5.3.19"');
 
       const version = await npmProxy.getVersion('@storybook/angular');

lib/cli/src/versions.ts

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

lib/components/src/blocks/Story.tsx

@@ -1,7 +1,7 @@
 import global from 'global';
 import React, { createElement, ElementType, FunctionComponent, Fragment } from 'react';
 
-import type { Parameters } from '@storybook/api';
+import type { Parameters } from '@storybook/csf';
 
 import { IFrame } from './IFrame';
 import { EmptyBlock } from './EmptyBlock';

lib/core-common/package.json

@@ -31,8 +31,8 @@
   },
   "files": [
     "dist/**/*",
-    "dll/**/*",
     "types/**/*",
+    "templates/**/*",
     "*.js",
     "*.d.ts"
   ],