@storybook/angular 6.4.8 → 6.5.0-alpha.3

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.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "6.4.8",
+  "version": "6.5.0-alpha.3",
   "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.8",
-    "@storybook/api": "6.4.8",
-    "@storybook/core": "6.4.8",
-    "@storybook/core-common": "6.4.8",
-    "@storybook/core-events": "6.4.8",
+    "@storybook/addons": "6.5.0-alpha.3",
+    "@storybook/api": "6.5.0-alpha.3",
+    "@storybook/core": "6.5.0-alpha.3",
+    "@storybook/core-common": "6.5.0-alpha.3",
+    "@storybook/core-events": "6.5.0-alpha.3",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/node-logger": "6.4.8",
+    "@storybook/node-logger": "6.5.0-alpha.3",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.4.8",
+    "@storybook/store": "6.5.0-alpha.3",
+    "@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": "d6b59f78a528a5c7922e71d28b583dd31ad67e7d"
+  "gitHead": "4d971f7d493ecb388017a150a9943e87c7770d98"
 }