ui: Add CustomElement Transform (#12540)

This PR adds an Ember-Glimmer/Handlebars transform to drop the documentation copy from the CustomElement component out of the build, therefore it is not bundled into the code either at development time or production build time.

ui/packages/consul-ui/lib/custom-element/index.js

@@ -0,0 +1,63 @@
+'use strict';
+
+module.exports = {
+  name: require('./package').name,
+  getTransform: function() {
+    return {
+      name: 'custom-element',
+      plugin: class {
+        transform(ast) {
+          this.syntax.traverse(ast, {
+            ElementNode: (node) => {
+              if(node.tag === 'CustomElement') {
+                node.attributes = node.attributes
+                  // completely remove these ones, they are not used runtime
+                  // element is potentially only temporarily being removed
+                  .filter(item => !['element', 'description', 'slots', 'cssparts'].includes(`${item.name.substr(1)}`))
+                  .map(item => {
+                    switch(true) {
+                      // these ones are ones where we need to remove the documentation only
+                      // the attributes themselves are required at runtime
+                      case ['attrs', 'cssprops'].includes(`${item.name.substr(1)}`):
+                        item.value.params = item.value.params.map(item => {
+                          // we can't use arr.length here as we don't know
+                          // whether someone has used the documentation entry
+                          // in the array or not We use the hardcoded `3` for
+                          // the moment if that position needs to change per
+                          // property we can just add more cases for the
+                          // moment
+                          item.params = item.params.filter((item, i, arr) => i < 3);
+                          return item;
+                        });
+                        break;
+
+                    }
+                    return item;
+                  });
+              }
+            },
+          });
+          return ast;
+        }
+
+      },
+      baseDir: function() {
+        return __dirname;
+      },
+      cacheKey: function() {
+        return 'custom-element';
+      }
+    };
+  },
+  setupPreprocessorRegistry(type, registry) {
+    const transform = this.getTransform();
+    transform.parallelBabel = {
+      requireFile: __filename,
+      buildUsing: 'getTransform',
+      params: {}
+    };
+    registry.add('htmlbars-ast-plugin', transform);
+  },
+
+};
+

ui/packages/consul-ui/lib/custom-element/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "custom-element",
+  "dependencies": {
+    "ember-cli-htmlbars": "*",
+    "ember-cli-babel": "*"
+  },
+  "keywords": [
+    "ember-addon"
+  ]
+}

ui/packages/consul-ui/package.json

@@ -185,6 +185,7 @@
       "lib/block-slots",
       "lib/colocated-components",
       "lib/commands",
+      "lib/custom-element",
       "lib/startup"
     ]
   }