@storybook/angular 7.0.0-alpha.52 → 7.0.0-alpha.54

package/dist/client/angular-beta/DocsRenderer.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DocsRenderer = void 0;
-const addons_1 = require("@storybook/addons");
+const preview_api_1 = require("@storybook/preview-api");
 const core_events_1 = require("@storybook/core-events");
 const AbstractRenderer_1 = require("./AbstractRenderer");
 class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
     async render(options) {
-        const channel = addons_1.addons.getChannel();
+        const channel = preview_api_1.addons.getChannel();
         /**
          * Destroy and recreate the PlatformBrowserDynamic of angular
          * For several stories to be rendered in the same docs we should

package/dist/client/decorateStory.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.decorateStory = void 0;
-const store_1 = require("@storybook/store");
+const preview_api_1 = require("@storybook/preview-api");
 const ComputesTemplateFromComponent_1 = require("./angular-beta/ComputesTemplateFromComponent");
 function decorateStory(mainStoryFn, decorators) {
     const returnDecorators = [cleanArgsDecorator, ...decorators].reduce((previousStoryFn, decorator) => (context) => {
         const decoratedStory = decorator((update) => {
             return previousStoryFn({
                 ...context,
-                ...(0, store_1.sanitizeStoryContextUpdate)(update),
+                ...(0, preview_api_1.sanitizeStoryContextUpdate)(update),
             });
         }, context);
         return decoratedStory;

package/dist/client/docs/sourceDecorator.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sourceDecorator = exports.skipSourceRender = void 0;
-const addons_1 = require("@storybook/addons");
+const preview_api_1 = require("@storybook/preview-api");
 const docs_tools_1 = require("@storybook/docs-tools");
 const renderer_1 = require("../../renderer");
 const skipSourceRender = (context) => {
@@ -25,11 +25,11 @@ const sourceDecorator = (storyFn, context) => {
     if ((0, exports.skipSourceRender)(context)) {
         return story;
     }
-    const channel = addons_1.addons.getChannel();
+    const channel = preview_api_1.addons.getChannel();
     const { props, template, userDefinedTemplate } = story;
     const { component, argTypes } = context;
     let toEmit;
-    (0, addons_1.useEffect)(() => {
+    (0, preview_api_1.useEffect)(() => {
         if (toEmit) {
             channel.emit(docs_tools_1.SNIPPET_RENDERED, context.id, toEmit, 'angular');
         }

package/dist/server/{angular-cli-webpack-13.x.x.js → angular-cli-webpack.js}

@@ -3,6 +3,7 @@ const { generateI18nBrowserWebpackConfigFromContext, } = require('@angular-devki
 const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig, } = require('@angular-devkit/build-angular/src/webpack/configs');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const { filterOutStylingRules } = require('./utils/filter-out-styling-rules');
+const { default: StorybookNormalizeAngularEntryPlugin, } = require('./plugins/storybook-normalize-angular-entry-plugin');
 /**
  * Extract webpack config from angular-cli 13.x.x
  * ⚠️ This file is in JavaScript to not use TypeScript. Because current storybook TypeScript version is not compatible with Angular CLI.
@@ -48,7 +49,11 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
         ...baseConfig.module,
         rules: [...cliConfig.module.rules, ...rulesExcludingStyles],
     };
-    const plugins = [...(cliConfig.plugins ?? []), ...baseConfig.plugins];
+    const plugins = [
+        ...(cliConfig.plugins ?? []),
+        ...baseConfig.plugins,
+        new StorybookNormalizeAngularEntryPlugin(),
+    ];
     const resolve = {
         ...baseConfig.resolve,
         modules: Array.from(new Set([...baseConfig.resolve.modules, ...cliConfig.resolve.modules])),

package/dist/server/framework-preset-angular-cli.js

@@ -33,8 +33,8 @@ const find_up_1 = require("find-up");
 const semver_1 = __importDefault(require("semver"));
 const ts_dedent_1 = require("ts-dedent");
 const core_1 = require("@angular-devkit/core");
+const angular_cli_webpack_1 = require("./angular-cli-webpack");
 const module_is_available_1 = require("./utils/module-is-available");
-const angular_cli_webpack_13_x_x_1 = require("./angular-cli-webpack-13.x.x");
 const angular_read_workspace_1 = require("./angular-read-workspace");
 async function webpackFinal(baseConfig, options) {
     if (!(0, module_is_available_1.moduleIsAvailable)('@angular-devkit/build-angular')) {
@@ -53,7 +53,7 @@ async function webpackFinal(baseConfig, options) {
                 const builderContext = getBuilderContext(_options);
                 const builderOptions = await getBuilderOptions(_options, builderContext);
                 const legacyDefaultOptions = await getLegacyDefaultBuildOptions(_options);
-                return (0, angular_cli_webpack_13_x_x_1.getWebpackConfig)(_baseConfig, {
+                return (0, angular_cli_webpack_1.getWebpackConfig)(_baseConfig, {
                     builderOptions: {
                         watch: options.configType === 'DEVELOPMENT',
                         ...legacyDefaultOptions,

package/dist/server/framework-preset-angular-cli.test.js

@@ -679,8 +679,8 @@ const newWebpackConfiguration = (transformer = (c) => c) => {
             modules: ['node_modules'],
             mainFields: ['browser', 'main'],
             alias: {
-                '@storybook/addons': '/Users/joe/storybook/lib/addons',
-                '@storybook/api': '/Users/joe/storybook/lib/api',
+                '@storybook/preview-api': '/Users/joe/storybook/lib/addons',
+                '@storybook/manager-api': '/Users/joe/storybook/lib/api',
                 '@storybook/channels': '/Users/joe/storybook/lib/channels',
                 '@storybook/channel-postmessage': '/Users/joe/storybook/lib/channel-postmessage',
                 '@storybook/components': '/Users/joe/storybook/ui/components',

package/dist/server/plugins/storybook-normalize-angular-entry-plugin.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Angular's webpack plugin @angular-devkit/build-angular/src/webpack/plugins/styles-webpack-plugin.js
+ * transforms the original webpackOptions.entry point array into a structure like this:
+ *
+ * ```js
+ * {
+ *  main: {
+ *    import: [...]
+ *  },
+ *
+ *  styles: {
+ *    import: [...]
+ *  },
+ * }
+ * ```
+ *
+ * Storybook throws an __webpack_require__.nmd is not a function error, when another runtime bundle (styles~runtime.iframe.bundle.js) is loaded.
+ * To prevent this error, we have to normalize the entry point to only generate one runtime bundle (main~runtime.iframe.bundle.js).
+ */
+export default class StorybookNormalizeAngularEntryPlugin {
+    constructor(options: any);
+    options: any;
+    apply(compiler: any): void;
+    compilation: any;
+}

package/dist/server/plugins/storybook-normalize-angular-entry-plugin.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const PLUGIN_NAME = 'storybook-normalize-angular-entry-plugin';
+/**
+ * Angular's webpack plugin @angular-devkit/build-angular/src/webpack/plugins/styles-webpack-plugin.js
+ * transforms the original webpackOptions.entry point array into a structure like this:
+ *
+ * ```js
+ * {
+ *  main: {
+ *    import: [...]
+ *  },
+ *
+ *  styles: {
+ *    import: [...]
+ *  },
+ * }
+ * ```
+ *
+ * Storybook throws an __webpack_require__.nmd is not a function error, when another runtime bundle (styles~runtime.iframe.bundle.js) is loaded.
+ * To prevent this error, we have to normalize the entry point to only generate one runtime bundle (main~runtime.iframe.bundle.js).
+ */
+class StorybookNormalizeAngularEntryPlugin {
+    constructor(options) {
+        this.options = options;
+    }
+    apply(compiler) {
+        const webpackOptions = compiler.options;
+        const entry = typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;
+        webpackOptions.entry = async () => {
+            const entryResult = await entry;
+            if (entryResult.main && entryResult.styles) {
+                return {
+                    main: {
+                        import: Array.from(new Set([...entryResult.main.import, ...entryResult.styles.import])),
+                    },
+                };
+            }
+            return entry;
+        };
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            this.compilation = compilation;
+        });
+    }
+}
+exports.default = StorybookNormalizeAngularEntryPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.0-alpha.52",
+  "version": "7.0.0-alpha.54",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -34,20 +34,19 @@
     "prep": "rimraf dist && ../../../scripts/node_modules/.bin/tsc --project tsconfig.build.json && echo \"Preventing passing flags to tsc\""
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.52",
-    "@storybook/api": "7.0.0-alpha.52",
-    "@storybook/builder-webpack5": "7.0.0-alpha.52",
-    "@storybook/client-logger": "7.0.0-alpha.52",
-    "@storybook/core-client": "7.0.0-alpha.52",
-    "@storybook/core-common": "7.0.0-alpha.52",
-    "@storybook/core-events": "7.0.0-alpha.52",
-    "@storybook/core-server": "7.0.0-alpha.52",
-    "@storybook/core-webpack": "7.0.0-alpha.52",
-    "@storybook/docs-tools": "7.0.0-alpha.52",
-    "@storybook/node-logger": "7.0.0-alpha.52",
-    "@storybook/store": "7.0.0-alpha.52",
-    "@storybook/types": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@storybook/builder-webpack5": "7.0.0-alpha.54",
+    "@storybook/client-logger": "7.0.0-alpha.54",
+    "@storybook/core-client": "7.0.0-alpha.54",
+    "@storybook/core-common": "7.0.0-alpha.54",
+    "@storybook/core-events": "7.0.0-alpha.54",
+    "@storybook/core-server": "7.0.0-alpha.54",
+    "@storybook/core-webpack": "7.0.0-alpha.54",
+    "@storybook/docs-tools": "7.0.0-alpha.54",
+    "@storybook/manager-api": "7.0.0-alpha.54",
+    "@storybook/node-logger": "7.0.0-alpha.54",
+    "@storybook/preview-api": "7.0.0-alpha.54",
+    "@storybook/types": "7.0.0-alpha.54",
+    "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
     "@types/semver": "^7.3.4",
@@ -123,5 +122,5 @@
     "access": "public"
   },
   "builders": "dist/builders/builders.json",
-  "gitHead": "d2494e3f51ce0f55bcb1ef693a6477c669fbe666"
+  "gitHead": "91177d4e27daec556a24ae6223c3cbe17a998d9b"
 }