parse decorator for attribute

docs/assets/plugins/metadata/metadata.js

@@ -1,10 +1,6 @@
 (() => {
   let metadataStore;
 
-  function getAttrName(propName) {
-    return propName.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).replace(/^-/, '');
-  }
-
   function createPropsTable(props) {
     const table = document.createElement('table');
     table.innerHTML = `
@@ -19,18 +15,17 @@
       <tbody>
         ${props
           .map(prop => {
-            const attr = getAttrName(prop.name);
             return `
               <tr>
                 <td>
                   <code>${escapeHtml(prop.name)}</code>
                   ${
-                    prop.name !== attr
+                    prop.attribute && prop.name !== prop.attribute
                       ? `
                         <br>
                         <small>
-                          <sl-tooltip content="Use this attribute in your HTML">
-                            <code class="attribute-tooltip">${escapeHtml(attr)}</code>
+                          <sl-tooltip content="This is the corresponding HTML attribute">
+                            <code class="attribute-tooltip">${escapeHtml(prop.attribute)}</code>
                           </sl-tooltip>
                         </small>`
                       : ''

scripts/make-metadata.cjs

@@ -116,9 +116,29 @@ components.map(async component => {
 
   props.map(prop => {
     const { type, values } = getTypeInfo(prop);
+    let attribute;
+
+    // Look for an attribute in the @property decorator
+    if (Array.isArray(prop.decorators)) {
+      const decorator = prop.decorators.find(d => d.name === 'property');
+      if (decorator) {
+        try {
+          // We trust TypeDoc <3
+          const options = eval(`(${decorator.arguments.options})`);
+
+          // If an attribute is specified, it will always be a string
+          if (options && typeof options.attribute === 'string') {
+            attribute = options.attribute;
+          }
+        } catch (err) {
+          console.log(err);
+        }
+      }
+    }
 
     api.props.push({
       name: prop.name,
+      attribute: attribute,
       description: prop.comment.shortText,
       type,
       values,