@storybook/angular 6.4.7 → 6.5.0-alpha.10

package/dist/ts3.4/client/preview/angular-beta/AbstractRenderer.d.ts

@@ -38,6 +38,19 @@ export declare abstract class AbstractRenderer {
         parameters: Parameters;
         targetDOMNode: HTMLElement;
     }): Promise<void>;
+    /**
+     * Only ASCII alphanumerics can be used as HTML tag name.
+     * https://html.spec.whatwg.org/#elements-2
+     *
+     * Therefore, stories break when non-ASCII alphanumerics are included in target selector.
+     * https://github.com/storybookjs/storybook/issues/15147
+     *
+     * This method returns storyId when it doesn't contain any non-ASCII alphanumerics.
+     * Otherwise, it generates a valid HTML tag name from storyId by removing non-ASCII alphanumerics from storyId, prefixing "sb-", and suffixing "-component"
+     * @protected
+     * @memberof AbstractRenderer
+     */
+    protected generateTargetSelectorFromStoryId(): string;
     protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string): void;
     private fullRendererRequired;
 }

package/dist/ts3.4/server/framework-preset-angular.d.ts

@@ -1,4 +1,5 @@
 import { Configuration } from 'webpack';
-export declare function webpack(config: Configuration, { configDir }: {
+export declare function webpack(config: Configuration, { configDir, angularBuilderContext }: {
     configDir: string;
-}): Configuration;
+    angularBuilderContext: any;
+}): Promise<Configuration>;

package/dist/ts3.9/builders/utils/run-compodoc.js

@@ -10,18 +10,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.runCompodoc = void 0;
 var child_process_1 = require("child_process");
 var rxjs_1 = require("rxjs");
+var hasTsConfigArg = function (args) { return args.indexOf('-p') !== -1; };
 exports.runCompodoc = function (_a, context) {
     var compodocArgs = _a.compodocArgs, tsconfig = _a.tsconfig;
     return new rxjs_1.Observable(function (observer) {
         var finalCompodocArgs = __spreadArrays([
-            // Default options
-            '-p',
-            tsconfig,
+            'compodoc'
+        ], (hasTsConfigArg(compodocArgs) ? [] : ['-p', tsconfig]), [
             '-d',
             "" + context.workspaceRoot
         ], compodocArgs);
         try {
-            var child = child_process_1.spawn('compodoc', finalCompodocArgs);
+            context.logger.info(finalCompodocArgs.join(' '));
+            var child = child_process_1.spawn('npx', finalCompodocArgs, {
+                cwd: context.workspaceRoot,
+                env: process.env,
+                shell: true,
+            });
             child.stdout.on('data', function (data) {
                 context.logger.info(data.toString());
             });

package/dist/ts3.9/client/preview/angular-beta/AbstractRenderer.d.ts

@@ -38,6 +38,19 @@ export declare abstract class AbstractRenderer {
         parameters: Parameters;
         targetDOMNode: HTMLElement;
     }): Promise<void>;
+    /**
+     * Only ASCII alphanumerics can be used as HTML tag name.
+     * https://html.spec.whatwg.org/#elements-2
+     *
+     * Therefore, stories break when non-ASCII alphanumerics are included in target selector.
+     * https://github.com/storybookjs/storybook/issues/15147
+     *
+     * This method returns storyId when it doesn't contain any non-ASCII alphanumerics.
+     * Otherwise, it generates a valid HTML tag name from storyId by removing non-ASCII alphanumerics from storyId, prefixing "sb-", and suffixing "-component"
+     * @protected
+     * @memberof AbstractRenderer
+     */
+    protected generateTargetSelectorFromStoryId(): string;
     protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string): void;
     private fullRendererRequired;
 }

package/dist/ts3.9/client/preview/angular-beta/AbstractRenderer.js

@@ -125,7 +125,7 @@ var AbstractRenderer = /** @class */ (function () {
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
-                        targetSelector = "" + this.storyId;
+                        targetSelector = "" + this.generateTargetSelectorFromStoryId();
                         newStoryProps$ = new rxjs_1.BehaviorSubject(storyFnAngular.props);
                         moduleMetadata = StorybookModule_1.getStorybookModuleMetadata({ storyFnAngular: storyFnAngular, component: component, targetSelector: targetSelector }, newStoryProps$);
                         if (!this.fullRendererRequired({
@@ -156,6 +156,25 @@ var AbstractRenderer = /** @class */ (function () {
             });
         });
     };
+    /**
+     * Only ASCII alphanumerics can be used as HTML tag name.
+     * https://html.spec.whatwg.org/#elements-2
+     *
+     * Therefore, stories break when non-ASCII alphanumerics are included in target selector.
+     * https://github.com/storybookjs/storybook/issues/15147
+     *
+     * This method returns storyId when it doesn't contain any non-ASCII alphanumerics.
+     * Otherwise, it generates a valid HTML tag name from storyId by removing non-ASCII alphanumerics from storyId, prefixing "sb-", and suffixing "-component"
+     * @protected
+     * @memberof AbstractRenderer
+     */
+    AbstractRenderer.prototype.generateTargetSelectorFromStoryId = function () {
+        var invalidHtmlTag = /[^A-Za-z0-9-]/g;
+        var storyIdIsInvalidHtmlTagName = invalidHtmlTag.test(this.storyId);
+        return storyIdIsInvalidHtmlTagName
+            ? "sb-" + this.storyId.replace(invalidHtmlTag, '') + "-component"
+            : this.storyId;
+    };
     AbstractRenderer.prototype.initAngularRootElement = function (targetDOMNode, targetSelector) {
         // Adds DOM element that angular will use as bootstrap component
         // eslint-disable-next-line no-param-reassign

package/dist/ts3.9/server/angular-cli-webpack-13.x.x.js

@@ -54,7 +54,7 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 };
 // Private angular devkit stuff
 var generateI18nBrowserWebpackConfigFromContext = require('@angular-devkit/build-angular/src/utils/webpack-browser-config').generateI18nBrowserWebpackConfigFromContext;
-var _a = require('@angular-devkit/build-angular/src/webpack/configs'), getCommonConfig = _a.getCommonConfig, getStylesConfig = _a.getStylesConfig, getTypescriptWorkerPlugin = _a.getTypescriptWorkerPlugin;
+var _a = require('@angular-devkit/build-angular/src/webpack/configs'), getCommonConfig = _a.getCommonConfig, getStylesConfig = _a.getStylesConfig, getDevServerConfig = _a.getDevServerConfig, getTypescriptWorkerPlugin = _a.getTypescriptWorkerPlugin;
 var TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 var filterOutStylingRules = require('./utils/filter-out-styling-rules').filterOutStylingRules;
 /**
@@ -76,7 +76,11 @@ exports.getWebpackConfig = function (baseConfig, _a) {
                         // Default options
                         index: 'noop-index', main: 'noop-main', outputPath: 'noop-out' }, builderOptions), { 
                         // Fixed options
-                        optimization: false, namedChunks: false, progress: false, buildOptimizer: false, aot: false }), builderContext, function (wco) { return [getCommonConfig(wco), getStylesConfig(wco), getTypescriptWorkerPlugin(wco)]; })];
+                        optimization: false, namedChunks: false, progress: false, buildOptimizer: false, aot: false }), builderContext, function (wco) { return [
+                        getCommonConfig(wco),
+                        getStylesConfig(wco),
+                        getTypescriptWorkerPlugin ? getTypescriptWorkerPlugin(wco) : getDevServerConfig(wco),
+                    ]; })];
                 case 1:
                     cliConfig = (_e.sent()).config;
                     entry = __spreadArrays(baseConfig.entry, ((_b = cliConfig.entry.styles) !== null && _b !== void 0 ? _b : []), ((_c = cliConfig.entry.polyfills) !== null && _c !== void 0 ? _c : []));

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

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -74,6 +78,7 @@ var node_logger_1 = require("@storybook/node-logger");
 var architect_1 = require("@angular-devkit/architect");
 var find_up_1 = require("find-up");
 var semver_1 = __importDefault(require("@storybook/semver"));
+var ts_dedent_1 = __importDefault(require("ts-dedent"));
 var core_1 = require("@angular-devkit/core");
 var module_is_available_1 = require("./utils/module-is-available");
 var angular_cli_webpack_12_2_x_1 = require("./angular-cli-webpack-12.2.x");
@@ -111,7 +116,7 @@ function webpackFinal(baseConfig, options) {
                                         case 2:
                                             legacyDefaultOptions = _a.sent();
                                             return [2 /*return*/, angular_cli_webpack_13_x_x_1.getWebpackConfig(_baseConfig, {
-                                                    builderOptions: __assign(__assign({}, builderOptions), legacyDefaultOptions),
+                                                    builderOptions: __assign(__assign({ watch: options.configType === 'DEVELOPMENT' }, builderOptions), legacyDefaultOptions),
                                                     builderContext: builderContext,
                                                 })];
                                     }
@@ -208,6 +213,7 @@ function getLegacyDefaultBuildOptions(options) {
                         // Not use legacy way with builder (`angularBrowserTarget` is defined or null with builder and undefined without)
                         return [2 /*return*/, {}];
                     }
+                    node_logger_1.logger.warn(ts_dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["Your Storybook startup uses a solution that will not be supported in version 7.0. \n            You must use angular builder to have an explicit configuration on the project used in angular.json\n            Read more at:\n            - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)\n            - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)\n          "], ["Your Storybook startup uses a solution that will not be supported in version 7.0. \n            You must use angular builder to have an explicit configuration on the project used in angular.json\n            Read more at:\n            - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)\n            - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)\n          "]))));
                     dirToSearch = process.cwd();
                     _b.label = 1;
                 case 1:
@@ -243,3 +249,4 @@ function getLegacyDefaultBuildOptions(options) {
         });
     });
 }
+var templateObject_1;

package/dist/ts3.9/server/framework-preset-angular.d.ts

@@ -1,4 +1,5 @@
 import { Configuration } from 'webpack';
-export declare function webpack(config: Configuration, { configDir }: {
+export declare function webpack(config: Configuration, { configDir, angularBuilderContext }: {
     configDir: string;
-}): Configuration;
+    angularBuilderContext: any;
+}): Promise<Configuration>;

package/dist/ts3.9/server/framework-preset-angular.js

@@ -10,6 +10,61 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __spreadArrays = (this && this.__spreadArrays) || function () {
     for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
     for (var r = Array(s), k = 0, i = 0; i < il; i++)
@@ -23,52 +78,76 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.webpack = void 0;
 var path_1 = __importDefault(require("path"));
+var semver_1 = __importDefault(require("@storybook/semver"));
 var webpack_1 = require("webpack");
 var autoprefixer_1 = __importDefault(require("autoprefixer"));
 var ts_config_1 = __importDefault(require("./ts_config"));
 var create_fork_ts_checker_plugin_1 = __importDefault(require("./create-fork-ts-checker-plugin"));
 function webpack(config, _a) {
-    var configDir = _a.configDir;
-    var tsLoaderOptions = ts_config_1.default(configDir);
-    return __assign(__assign({}, config), { module: __assign(__assign({}, config.module), { rules: __spreadArrays(config.module.rules, [
-                {
-                    test: /\.tsx?$/,
-                    use: [
-                        {
-                            loader: require.resolve('ts-loader'),
-                            options: tsLoaderOptions,
-                        },
-                        { loader: path_1.default.resolve(__dirname, 'ngx-template-loader') },
-                    ],
-                },
-                {
-                    test: /[/\\]@angular[/\\]core[/\\].+\.js$/,
-                    parser: { system: true },
-                },
-                {
-                    test: /\.html$/,
-                    loader: require.resolve('raw-loader'),
-                    exclude: /\.async\.html$/,
-                },
-                {
-                    test: /\.s(c|a)ss$/,
-                    use: [
-                        { loader: require.resolve('raw-loader') },
-                        {
-                            loader: require.resolve('postcss-loader'),
-                            options: {
-                                postcssOptions: {
-                                    plugins: [autoprefixer_1.default()],
-                                },
-                            },
-                        },
-                        { loader: require.resolve('sass-loader') },
-                    ],
-                },
-            ]) }), resolve: __assign({}, config.resolve), plugins: __spreadArrays(config.plugins, [
-            // See https://github.com/angular/angular/issues/11580#issuecomment-401127742
-            new webpack_1.ContextReplacementPlugin(/@angular(\\|\/)core(\\|\/)(fesm5|bundles)/, path_1.default.resolve(__dirname, '..')),
-            create_fork_ts_checker_plugin_1.default(tsLoaderOptions),
-        ]) });
+    var configDir = _a.configDir, angularBuilderContext = _a.angularBuilderContext;
+    return __awaiter(this, void 0, void 0, function () {
+        var angularCliVersion, error_1, tsLoaderOptions;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _b.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('@angular/cli')); }).then(function (m) {
+                            return semver_1.default.coerce(m.VERSION.full);
+                        })];
+                case 1:
+                    angularCliVersion = _b.sent();
+                    if ((semver_1.default.satisfies(angularCliVersion, '12.2.x') && angularBuilderContext) ||
+                        semver_1.default.satisfies(angularCliVersion, '>=13.0.0')) {
+                        return [2 /*return*/, config];
+                    }
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_1 = _b.sent();
+                    return [3 /*break*/, 3];
+                case 3:
+                    tsLoaderOptions = ts_config_1.default(configDir);
+                    return [2 /*return*/, __assign(__assign({}, config), { module: __assign(__assign({}, config.module), { rules: __spreadArrays(config.module.rules, [
+                                    {
+                                        test: /\.tsx?$/,
+                                        use: [
+                                            {
+                                                loader: require.resolve('ts-loader'),
+                                                options: tsLoaderOptions,
+                                            },
+                                            { loader: path_1.default.resolve(__dirname, 'ngx-template-loader') },
+                                        ],
+                                    },
+                                    {
+                                        test: /[/\\]@angular[/\\]core[/\\].+\.js$/,
+                                        parser: { system: true },
+                                    },
+                                    {
+                                        test: /\.html$/,
+                                        loader: require.resolve('raw-loader'),
+                                        exclude: /\.async\.html$/,
+                                    },
+                                    {
+                                        test: /\.s(c|a)ss$/,
+                                        use: [
+                                            { loader: require.resolve('raw-loader') },
+                                            {
+                                                loader: require.resolve('postcss-loader'),
+                                                options: {
+                                                    postcssOptions: {
+                                                        plugins: [autoprefixer_1.default()],
+                                                    },
+                                                },
+                                            },
+                                            { loader: require.resolve('sass-loader') },
+                                        ],
+                                    },
+                                ]) }), resolve: __assign({}, config.resolve), plugins: __spreadArrays(config.plugins, [
+                                // See https://github.com/angular/angular/issues/11580#issuecomment-401127742
+                                new webpack_1.ContextReplacementPlugin(/@angular(\\|\/)core(\\|\/)(fesm5|bundles)/, path_1.default.resolve(__dirname, '..')),
+                                create_fork_ts_checker_plugin_1.default(tsLoaderOptions),
+                            ]) })];
+            }
+        });
+    });
 }
 exports.webpack = webpack;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "6.4.7",
+  "version": "6.5.0-alpha.10",
   "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,15 +45,16 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.7",
-    "@storybook/api": "6.4.7",
-    "@storybook/core": "6.4.7",
-    "@storybook/core-common": "6.4.7",
-    "@storybook/core-events": "6.4.7",
+    "@storybook/addons": "6.5.0-alpha.10",
+    "@storybook/api": "6.5.0-alpha.10",
+    "@storybook/core": "6.5.0-alpha.10",
+    "@storybook/core-common": "6.5.0-alpha.10",
+    "@storybook/core-events": "6.5.0-alpha.10",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/node-logger": "6.4.7",
+    "@storybook/node-logger": "6.5.0-alpha.10",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.4.7",
+    "@storybook/store": "6.5.0-alpha.10",
+    "@types/node": "^14.14.20 || ^16.0.0",
     "@types/webpack-env": "^1.16.0",
     "autoprefixer": "^9.8.6",
     "core-js": "^3.8.2",
@@ -69,7 +70,7 @@
     "regenerator-runtime": "^0.13.7",
     "sass-loader": "^10.1.0",
     "strip-json-comments": "3.1.1",
-    "telejson": "^5.3.2",
+    "telejson": "^5.3.3",
     "ts-dedent": "^2.0.0",
     "ts-loader": "^8.0.14",
     "tsconfig-paths-webpack-plugin": "^3.3.0",
@@ -138,5 +139,5 @@
     "access": "public"
   },
   "builders": "dist/ts3.9/builders/builders.json",
-  "gitHead": "ebad5c8ec7e35a292f4d867b709f031a0dc0a8ea"
+  "gitHead": "9f7d260e82218d8bbf4fedda39e34d2e9d9813a3"
 }