Future / pre-built manager - using esbuild

.circleci/config.yml

@@ -92,7 +92,9 @@ jobs:
           command: yarn install --immutable
       - run:
           name: Bootstrap
-          command: yarn bootstrap --build --manager
+          command: |
+            yarn bootstrap --build
+            git diff --exit-code
       - save_cache:
           name: Save Yarn cache
           key: build-yarn-2-cache-v3--{{ checksum "yarn.lock" }}

.eslintignore

@@ -7,8 +7,6 @@ docs/public
 storybook-static
 built-storybooks
 lib/cli/test
-lib/manager-webpack5/prebuilt
-lib/core-server/prebuilt
 lib/codemod/src/transforms/__testfixtures__
 scripts/storage
 scripts/repros-generator

.gitignore

@@ -32,8 +32,6 @@ cypress/screenshots
 examples/ember-cli/ember-output
 .verdaccio-cache
 tsconfig.tsbuildinfo
-lib/manager-webpack5/prebuilt
-lib/manager-webpack5/prebuilt
 examples/angular-cli/addon-jest.testresults.json
 junit.xml
 .next

examples/react-ts/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook build",
     "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011",
-    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev --no-manager-cache"
+    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev --port=3044"
   },
   "dependencies": {
     "formik": "^2.2.9",

examples/web-components-kitchen-sink/package.json

@@ -28,6 +28,7 @@
     "@storybook/addon-viewport": "link:../../addons/viewport",
     "@storybook/addons": "link:../../lib/addons",
     "@storybook/api": "link:../../lib/api",
+    "@storybook/builder-manager": "link:../../lib/builder-manager",
     "@storybook/builder-webpack5": "link:../../lib/builder-webpack5",
     "@storybook/channel-postmessage": "link:../../lib/channel-postmessage",
     "@storybook/channel-websocket": "link:../../lib/channel-websocket",
@@ -46,7 +47,6 @@
     "@storybook/csf-tools": "link:../../lib/csf-tools",
     "@storybook/docs-tools": "link:../../lib/docs-tools",
     "@storybook/jest": "^0.0.5",
-    "@storybook/manager-webpack5": "link:../../lib/manager-webpack5",
     "@storybook/mdx1-csf": "canary",
     "@storybook/node-logger": "link:../../lib/node-logger",
     "@storybook/postinstall": "link:../../lib/postinstall",

lib/addons/src/main.ts

@@ -1,6 +1,7 @@
 import global from 'global';
 import type { ReactElement } from 'react';
 import { Channel } from '@storybook/channels';
+import { SET_CONFIG } from '@storybook/core-events';
 import type { API } from '@storybook/api';
 import type { RenderData as RouterData } from '@storybook/router';
 import { logger } from '@storybook/client-logger';
@@ -124,6 +125,9 @@ export class AddonStore {
 
   setConfig = (value: Config) => {
     Object.assign(this.config, value);
+    if (this.hasChannel()) {
+      this.getChannel().emit(SET_CONFIG, value);
+    }
   };
 
   getConfig = () => this.config;

lib/api/src/modules/layout.ts

@@ -2,6 +2,7 @@ import global from 'global';
 import pick from 'lodash/pick';
 import deepEqual from 'fast-deep-equal';
 import { create } from '@storybook/theming';
+import { SET_CONFIG } from '@storybook/core-events';
 import type { ThemeVars } from '@storybook/theming';
 import { once } from '@storybook/client-logger';
 import { dedent } from 'ts-dedent';
@@ -93,7 +94,7 @@ export const focusableUIElements = {
   storyPanelRoot: 'storybook-panel-root',
 };
 
-export const init: ModuleFn = ({ store, provider, singleStory }) => {
+export const init: ModuleFn = ({ store, provider, singleStory, fullAPI }) => {
   const api = {
     toggleFullscreen(toggled?: boolean) {
       return store.setState(
@@ -295,5 +296,14 @@ export const init: ModuleFn = ({ store, provider, singleStory }) => {
 
   const persisted = pick(store.getState(), 'layout', 'ui', 'selectedPanel');
 
-  return { api, state: merge(api.getInitialOptions(), persisted) };
+  return {
+    api,
+    state: merge(api.getInitialOptions(), persisted),
+    init: () => {
+      api.setOptions(merge(api.getInitialOptions(), persisted));
+      fullAPI.on(SET_CONFIG, () => {
+        api.setOptions(merge(api.getInitialOptions(), persisted));
+      });
+    },
+  };
 };

lib/api/src/modules/provider.ts

@@ -3,7 +3,7 @@ import { Channel } from '@storybook/channels';
 import type { ThemeVars } from '@storybook/theming';
 
 import type { API, State, ModuleFn, HashEntry } from '../index';
-import type { StoryMapper, Refs } from './refs';
+import type { StoryMapper } from './refs';
 import type { UIOptions } from './layout';
 
 interface SidebarOptions {
@@ -29,7 +29,6 @@ export interface Provider {
   getConfig(): {
     sidebar?: SidebarOptions;
     theme?: ThemeVars;
-    refs?: Refs;
     StoryMapper?: StoryMapper;
     [k: string]: any;
   } & Partial<UIOptions>;

lib/api/src/modules/refs.ts

@@ -279,7 +279,7 @@ export const init: ModuleFn<SubAPI, SubState, void> = (
     },
   };
 
-  const refs = (!singleStory && provider.getConfig().refs) || {};
+  const refs: Refs = (!singleStory && global.REFS) || {};
 
   const initialState: SubState['refs'] = refs;
 

lib/api/src/tests/refs.test.js

@@ -6,6 +6,13 @@ const { fetch } = global;
 jest.mock('global', () => {
   const globalMock = {
     fetch: jest.fn(() => Promise.resolve({})),
+    REFS: {
+      fake: {
+        id: 'fake',
+        url: 'https://example.com',
+        title: 'Fake',
+      },
+    },
   };
   // Change global.location value to handle edge cases
   // Add additional variations of global.location mock return values in this array.
@@ -26,15 +33,7 @@ jest.mock('global', () => {
 });
 
 const provider = {
-  getConfig: jest.fn().mockReturnValue({
-    refs: {
-      fake: {
-        id: 'fake',
-        url: 'https://example.com',
-        title: 'Fake',
-      },
-    },
-  }),
+  getConfig: jest.fn().mockReturnValue({}),
 };
 
 const store = {
@@ -167,16 +166,14 @@ describe('Refs API', () => {
 
     it('passes version when set on the ref', async () => {
       // given
-      provider.getConfig.mockReturnValueOnce({
-        refs: {
-          fake: {
-            id: 'fake',
-            url: 'https://example.com',
-            title: 'Fake',
-            version: '2.1.3-rc.2',
-          },
+      global.REFS = {
+        fake: {
+          id: 'fake',
+          url: 'https://example.com',
+          title: 'Fake',
+          version: '2.1.3-rc.2',
         },
-      });
+      };
       initRefs({ provider, store });
 
       expect(fetch.mock.calls).toMatchInlineSnapshot(`

lib/builder-manager/README.md

@@ -0,0 +1,3 @@
+# Manager-Builder
+
+TODO

lib/builder-manager/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@storybook/builder-manager",
+  "version": "7.0.0-alpha.10",
+  "description": "Storybook manager builder",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/core",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "lib/builder-manager"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "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/**/*",
+    "templates/**/*",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "prepare": "esrun ../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
+    "@storybook/core-common": "7.0.0-alpha.10",
+    "@storybook/node-logger": "7.0.0-alpha.10",
+    "@storybook/ui": "7.0.0-alpha.10",
+    "@types/ejs": "^3.1.1",
+    "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
+    "browser-assert": "^1.2.1",
+    "chalk": "^4.1.0",
+    "ejs": "^3.1.8",
+    "esbuild": "^0.14.47",
+    "esbuild-plugin-alias": "^0.2.1",
+    "express": "^4.17.1",
+    "fs-extra": "^9.0.1",
+    "readdirp": "^3.6.0",
+    "rollup-plugin-node-polyfills": "^0.2.1"
+  },
+  "devDependencies": {
+    "@digitak/esrun": "^3.2.2",
+    "typescript": "~4.6.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "b13dd8fb52819d73d4983148af8ffc5d683e8b75"
+}