From caae94119cce06e8438030454d2842dac2fb44f4 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 6 Dec 2023 16:24:21 -0500
Subject: [PATCH] No more pipes (#1771)

* a little whitespace never hurt nobody

* remove pipes from docs
---
 custom-elements-manifest.config.js | 6 ++++++
 docs/_includes/component.njk       | 6 +++---
 docs/eleventy.config.cjs           | 6 ++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js
index 3e33bc02..a434d675 100644
--- a/custom-elements-manifest.config.js
+++ b/custom-elements-manifest.config.js
@@ -38,6 +38,7 @@ export default {
         customElementsManifest.package = { name, description, version, author, homepage, license };
       }
     },
+
     // Infer tag names because we no longer use @customElement decorators.
     {
       name: 'shoelace-infer-tag-names',
@@ -66,6 +67,7 @@ export default {
         }
       }
     },
+
     // Parse custom jsDoc tags
     {
       name: 'shoelace-custom-tags',
@@ -137,6 +139,7 @@ export default {
         }
       }
     },
+
     {
       name: 'shoelace-react-event-names',
       analyzePhase({ ts, node, moduleDoc }) {
@@ -155,6 +158,7 @@ export default {
         }
       }
     },
+
     {
       name: 'shoelace-translate-module-paths',
       packageLinkPhase({ customElementsManifest }) {
@@ -191,6 +195,7 @@ export default {
         });
       }
     },
+
     // Generate custom VS Code data
     customElementVsCodePlugin({
       outdir,
@@ -202,6 +207,7 @@ export default {
         }
       ]
     }),
+
     customElementJetBrainsPlugin({
       outdir: './dist',
       excludeCss: true,
diff --git a/docs/_includes/component.njk b/docs/_includes/component.njk
index 8b087b89..e377e692 100644
--- a/docs/_includes/component.njk
+++ b/docs/_includes/component.njk
@@ -160,7 +160,7 @@
             </td>
             <td>
               {% if prop.type.text %}
-                <code>{{ prop.type.text | markdownInline | safe }}</code>
+                <code>{{ prop.type.text | trimPipes | markdownInline | safe }}</code>
               {% else %}
                 -
               {% endif %}
@@ -211,7 +211,7 @@
             <td>{{ event.description | markdownInline | safe }}</td>
             <td>
               {% if event.type.text %}
-                <code>{{ event.type.text }}</code>
+                <code>{{ event.type.text | trimPipes  }}</code>
               {% else %}
                 -
               {% endif %}
@@ -245,7 +245,7 @@
               {% if method.parameters.length %}
                 <code>
                   {% for param in method.parameters %}
-                    {{ param.name }}: {{ param.type.text }}{% if not loop.last %},{% endif %}
+                    {{ param.name }}: {{ param.type.text | trimPipes }}{% if not loop.last %},{% endif %}
                   {% endfor %}
                 </code>
               {% else %}
diff --git a/docs/eleventy.config.cjs b/docs/eleventy.config.cjs
index 2377943f..85724240 100644
--- a/docs/eleventy.config.cjs
+++ b/docs/eleventy.config.cjs
@@ -96,6 +96,12 @@ module.exports = function (eleventyConfig) {
     return shoelaceFlavoredMarkdown.renderInline(content);
   });
 
+  // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
+  // With Prettier 3, this means a leading pipe will exist if the line wraps.
+  eleventyConfig.addFilter('trimPipes', content => {
+    return content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '');
+  });
+
   eleventyConfig.addFilter('classNameToComponentName', className => {
     let name = capitalCase(className.replace(/^Sl/, ''));
     if (name === 'Qr Code') name = 'QR Code'; // manual override