angular: Component with void element selector throws error

[stefan-schweiger]

Describe the bug
When using a Component with a void element selector like input[my-input] it currently gets rendered as <input my-input></input>. This crashes the prettier-html formatter as it's not valid html to have a separate closing tag on void elements ("Void elements do not have end tags").

I already have a PR in the pipeline which will fix this issue by checking for void elements before replacing and then uses a different replacement strategy.

To Reproduce
Use a component with any void element tag and an attribute/class/whatever selector.

[trevoreyre]

Just ran into this today as well, with the exact same use case.

[admosity]

Hi @shilman, can #15495 be merged? We are facing the same issue.

[admosity]

Applied the following patch (patch-package) based on this PR and is working perfectly:

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @storybook/angular@6.3.12 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/@storybook/angular/dist/ts3.9/client/preview/angular-beta/ComputesTemplateFromComponent.js b/node_modules/@storybook/angular/dist/ts3.9/client/preview/angular-beta/ComputesTemplateFromComponent.js
index 2741f6a..b3684b7 100644
--- a/node_modules/@storybook/angular/dist/ts3.9/client/preview/angular-beta/ComputesTemplateFromComponent.js
+++ b/node_modules/@storybook/angular/dist/ts3.9/client/preview/angular-beta/ComputesTemplateFromComponent.js
@@ -93,6 +93,27 @@ exports.computesTemplateSourceFromComponent = function (component, initialProps,
     return buildTemplate(ngComponentMetadata.selector, '', templateInputs, templateOutputs);
 };
 var buildTemplate = function (selector, innerTemplate, inputs, outputs) {
+
+
+    var voidElements = [
+      'area',
+      'base',
+      'br',
+      'col',
+      'command',
+      'embed',
+      'hr',
+      'img',
+      'input',
+      'keygen',
+      'link',
+      'meta',
+      'param',
+      'source',
+      'track',
+      'wbr',
+    ];
+
     var templateReplacers = [
         [/(^\..+)/, 'div$1'],
         [/(^\[.+?])/, 'div$1'],
@@ -100,11 +121,17 @@ var buildTemplate = function (selector, innerTemplate, inputs, outputs) {
         [/#([\w-]+)/, " id=\"$1\""],
         [/((\.[\w-]+)+)/, function (_, c) { return " class=\"" + c.split(templateObject_1 || (templateObject_1 = __makeTemplateObject(["."], ["."]))).join(templateObject_2 || (templateObject_2 = __makeTemplateObject([" "], [" "]))).trim() + "\""; }],
         [/(\[.+?])/g, function (_, a) { return " " + a.slice(1, -1); }],
-        [/([\S]+)(.*)/, "<$1$2" + inputs + outputs + ">" + innerTemplate + "</$1>"],
+        // [/([\S]+)(.*)/, "<$1$2" + inputs + outputs + ">" + innerTemplate + "</$1>"],
     ];
-    return templateReplacers.reduce(function (prevSelector, _a) {
+    const template = templateReplacers.reduce(function (prevSelector, _a) {
         var searchValue = _a[0], replacer = _a[1];
         return prevSelector.replace(searchValue, replacer);
     }, selector);
+
+    const elementSelector = template.replace(/([\S]+)(.*)/, '$1');
+
+  return voidElements.some((element) => elementSelector === element)
+    ? template.replace(/([\S]+)(.*)/, `<$1$2${inputs}${outputs} />`)
+    : template.replace(/([\S]+)(.*)/, `<$1$2${inputs}${outputs}>${innerTemplate}</$1>`);
 };
 var templateObject_1, templateObject_2;

This issue body was partially generated by patch-package.

[shilman]

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.14 containing PR #15495 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.