feat: Add events generator (#707)

* feat Move the generator into the repo

* feat Add support for the config object

* feat Remove the better-config tool; not used

* feat Pull out changes to index file; update generator command

* feat Update changelog

* feat Fix bug Michael found in dangling comma

* feat Comment out invalid placeholder CSS and set up line clear in the template

* feat Update changelog

* feat Save conflict resolution file :)

* feat Update package-lock

* feat Update documentation, tidy up spacing in demo files, parity standalone packages with monorepo

* feat Add events to the generator

* feat Add to readme and add emitEvent to function

* feat Add changelog update, clean up newline, clear out demo listing

* feat Remove pfe-foo from listing

* feat Remove unnecessary / unrelated updates

* feat Add events to the schemas, update commenting approach

* feat Remove duplicate component type

* feat Adjust spacing

* feat Move observed attributes after type

* feat Fix logic on attribute commenting selector

* feat Adjusting spacing on comments

Author: castastrophe

CHANGELOG-prerelease.md

@@ -1,3 +1,9 @@
+## Prerelease 41 ( TBD )
+
+Tag: [v1.0.0-prerelease.41](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.41)
+
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add events to the generator
+
 ## Prerelease 40 ( 2020-03-10 )
 
 Tag: [v1.0.0-prerelease.40](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.40)
@@ -7,7 +13,6 @@ Tag: [v1.0.0-prerelease.40](https://github.com/patternfly/patternfly-elements/re
 - [7deb9bb](https://github.com/patternfly/patternfly-elements/commit/7deb9bb6227c0560b60a665ecd43b450db0f90e1) fix: Prevent default pfe-cta arrow from wrapping to a new line by itself #679 (#765)
 - [ba9d8b2](https://github.com/patternfly/patternfly-elements/commit/ba9d8b2cfed50580671041778d3d00cb5d5741d1) chore: Fixed invalid Markdown, was missing a back tic (#762)
 
-
 ## Prerelease 39 ( 2020-02-19 )
 
 Tag: [v1.0.0-prerelease.39](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.39)
@@ -35,6 +40,7 @@ Tag: [v1.0.0-prerelease.38](https://github.com/patternfly/patternfly-elements/re
 - [5585188](https://github.com/patternfly/patternfly-elements/commit/558518849087bd9b348c2827549acfe081d8ed96) docs: switching pfe-collapse story from heading tag to button
 
 ## Prerelease 37 ( 2020-01-28 )
+
 Tag: [v1.0.0-prerelease.37](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.37)
 
 - [6a41811](https://github.com/patternfly/patternfly-elements/commit/6a418112668ba580918ac4a8b4b54e8df05c1155) fix: reference error when slot is missing in pfe-navigation

generators/element/index.js

@@ -87,7 +87,6 @@ module.exports = class extends Generator {
           if (config.author) {
             ret = typeof config.author.name === "undefined";
           }
-
           return ret;
         }
       },
@@ -153,6 +152,20 @@ module.exports = class extends Generator {
             .split(",")
             .filter(s => s.length);
         }
+      },
+      {
+        type: "input",
+        name: "events",
+        message:
+          "List any events you want registered for the element, separated by commas (i.e., change, click)",
+        // validate: function(answer) {},
+        filter: function(response) {
+          // remove whitespace, split on comma, and remove empty entries
+          return response
+            .replace(/\s/g, "")
+            .split(",")
+            .filter(s => s.length);
+        }
       }
     ]).then(answers => {
       if (Object.keys(answers).length > 0) {
@@ -241,6 +254,7 @@ module.exports = class extends Generator {
           rollupConfigLocation: rollupConfigLocation,
           attributes: answers.attributes,
           slots: answers.slots,
+          events: answers.events,
           testFileLocation: testFileLocation
         };
 

generators/element/templates/pfelement-README.md

@@ -39,6 +39,11 @@ Explain how this component meets accessibility standards.
 ## Events
 Describe any events that are accessible external to the web component. There is no need to describe all the internal-only functions.
 
+<%_ for(let i = 0; i < events.length; i++) { _%>
+### <%= elementName %>:<%= events[i] %>
+
+<%_ } _%>
+
 ## Dependencies
 Describe any dependent elements or libraries here too.
 

generators/element/templates/src/element.js

@@ -21,21 +21,21 @@ class <%= elementClassName %> extends PFElement {
 <%_ } _%>
   }
 
-<%_ if (attributes.length > 0) { _%>
-  static get observedAttributes() {
-    return [<% if (isPfelement) { %><%- _.join(attributes.map(item => `"pfe-${item}"`), ", ") %><% } else { %><%- _.join(attributes.map(item => `"${item}"`), ", ") %><% } %>];
-  }
-<%_ } else { _%>
-  // static get observedAttributes() {
-  //   return [];
-  // }
-<%_ } _%>
+  <% if (events.length < 1) { %>// <% } %>static get events() {
+  <% if (events.length < 1) { %>//   <% } %>return {<% for(let i = 0; i < events.length; i++) { %>
+      <%= events[i] %>: `${this.tag}:<%= events[i] %>`<% if (i < (events.length - 1)) { %>,<% } } %>
+    <% if (events.length < 1) { %>//   <% } %>};
+  <% if (events.length < 1) { %>// <% } %>}
 
   // Declare the type of this component
   static get PfeType() {
     return PFElement.PfeTypes.<%= _.capitalize(template_type) %>;
   }
 
+  <% if (attributes.length < 1) { %>// <% } %>static get observedAttributes() {
+    <% if (attributes.length < 1) { %>//   <% } %>return [<% if (isPfelement) { %><%- _.join(attributes.map(item => `"pfe-${item}"`), ", ") %><% } else { %><%- _.join(attributes.map(item => `"${item}"`), ", ") %><% } %>];
+  <% if (attributes.length < 1) { %>// <% } %>}
+
   constructor() {
     super(<%= elementClassName %>, { type: <%= elementClassName %>.PfeType });
     <%_ if (slots.length > 0) { %>
@@ -56,17 +56,31 @@ class <%= elementClassName %> extends PFElement {
     // this.<%= slots[i] %>.addEventListener("slotchange", this._init);
     <%_ } _%>
     <%_ } _%>
+
+    <%_ for(let i = 0; i < events.length; i++) { _%>
+    this.addEventListener(<%= elementClassName %>.events.<%= events[i] %>, this._<%= events[i] %>Handler);
+    <%_ } _%>
   }
 
-  // disconnectedCallback() {}
+  disconnectedCallback() {
+    <%_ for(let i = 0; i < events.length; i++) { _%>
+    this.removeEventListener(<%= elementClassName %>.events.<%= events[i] %>, this._<%= events[i] %>Handler);
+    <%_ } _%>
+  }
 
 <%_ if (attributes.length > 0) { _%>
   // Process the attribute change
-  attributeChangedCallback(attr, oldValue, newValue) {
-    super.attributeChangedCallback(attr, oldValue, newValue);
+  <% if (attributes.length < 1) { %>// <% } %>attributeChangedCallback(attr, oldValue, newValue) {
+    <% if (attributes.length < 1) { %>//   <% } %>super.attributeChangedCallback(attr, oldValue, newValue);
+    <% if (attributes.length < 1) { %>//   <% } %>}
+<%_ } _%>
+
+<%_ for(let i = 0; i < events.length; i++) { _%>
+  _<%= events[i] %>Handler(event) {
+    this.emitEvent(<%= elementClassName %>.events.<%= events[i] %>, {
+      detail: {}
+    });
   }
-<%_ } else { _%>
-  // attributeChangedCallback(attr, oldValue, newValue) {}
 <%_ } _%>
 }
 

generators/element/templates/src/element.json

@@ -47,11 +47,23 @@
             "default": "",
             "prefixed": <% if (isPfelement) { %>true<% } else { %>false<% } %>
           }<% if(attributes.length > 1 && i < attributes.length - 1) { %>,<% } %>
-        <%_ } %>}<% if(attributes.length > 1) { %>,
+        <% } %>}<% if(attributes.length > 1) { %>,
         "required": [ "<%= attributes[0] %>" ]<% } %>
+      },
+      "events": {
+        "title": "Events",
+        "description": "Definition of the supported events",
+        "type": "object",
+        "properties": {<% for(let i = 0; i < events.length; i++) { %><% if (i > 0) { %>,<% } %>
+          "<%= events[i] %>": {
+            "title": "<%= _.capitalize(events[i]) %>",
+            "type": "string",
+            "default": "<%= elementName %>:<%= events[i] %>"
+          }<% } %>
+        }
       }
     },
-    "required": [ "slots", "attributes" ],
+    "required": [ "slots", "attributes", "events" ],
     "additionalProperties": false
   }
 

generators/element/templates/standalone-README.md

@@ -17,15 +17,32 @@ Explain how this component meets accessibility standards.
 
 ## Slots
 
+<%_ if (slots.length > 0) { _%>
+<%_ for(let i = 0; i < slots.length; i++) { _%>
+- `<%= slots[i] %>`: Describe this slot and best practices around what markup it can contain.
+<%_ } _%>
+<%_ } else { _%>
 - `namedSlot`: Describe each available slot and best practices around what markup it can contain.
+<%_ } _%>
 
 ## Attributes
 
+<%_ if (attributes.length > 0) { _%>
+<%_ for(let i = 0; i < attributes.length; i++) { _%>
+- `<% if (isPfelement) { %>pfe-<% } %><%= attributes[i] %>`: Describe this attribute and what function is serves.
+<%_ } _%>
+<%_ } else { _%>
 - `attr`: Describe each available attribute and what function is serves.
+<%_ } _%>
 
 ## Events
 Describe any events that are accessible external to the web component. There is no need to describe all the internal-only functions.
 
+<%_ for(let i = 0; i < events.length; i++) { _%>
+### <%= elementName %>:<%= events[i] %>
+
+<%_ } _%>
+
 ## Dependencies
 Describe any dependent elements or libraries here too.