From 2168a4441355665f8e631d38f90c5b5698fc7a2c Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Fri, 11 Mar 2022 10:25:21 +0000
Subject: [PATCH] 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.
---
 .../consul-ui/lib/custom-element/index.js     | 63 +++++++++++++++++++
 .../consul-ui/lib/custom-element/package.json | 10 +++
 ui/packages/consul-ui/package.json            |  1 +
 3 files changed, 74 insertions(+)
 create mode 100644 ui/packages/consul-ui/lib/custom-element/index.js
 create mode 100644 ui/packages/consul-ui/lib/custom-element/package.json

diff --git a/ui/packages/consul-ui/lib/custom-element/index.js b/ui/packages/consul-ui/lib/custom-element/index.js
new file mode 100644
index 0000000000..6a52e24e09
--- /dev/null
+++ b/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);
+  },
+
+};
+
diff --git a/ui/packages/consul-ui/lib/custom-element/package.json b/ui/packages/consul-ui/lib/custom-element/package.json
new file mode 100644
index 0000000000..b952847350
--- /dev/null
+++ b/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"
+  ]
+}
diff --git a/ui/packages/consul-ui/package.json b/ui/packages/consul-ui/package.json
index c02b8b9a5c..4b12825962 100644
--- a/ui/packages/consul-ui/package.json
+++ b/ui/packages/consul-ui/package.json
@@ -185,6 +185,7 @@
       "lib/block-slots",
       "lib/colocated-components",
       "lib/commands",
+      "lib/custom-element",
       "lib/startup"
     ]
   }