REFACTOR: Remove `.erb` from emoji-picker

We can't use erb in ember-cli, and it seems the emoji groups rarely
change anyway. This commit migrates the ERB to pre-rendered javascript
that is updated via the `rake javascript:update_constants` task.

app/assets/javascripts/discourse/app/templates/components/emoji-group-buttons.hbs

@@ -0,0 +1,30 @@
+{{!-- DO NOT EDIT THIS FILE!!! --}}
+{{!-- Update it by running `rake javascript:update_constants` --}}
+
+<button type="button" data-section="smileys_&_emotion" {{action onCategorySelection "smileys_&_emotion"}} class="btn btn-default category-button emoji">
+	 {{replace-emoji ":grinning:"}}
+</button>
+<button type="button" data-section="people_&_body" {{action onCategorySelection "people_&_body"}} class="btn btn-default category-button emoji">
+	 {{replace-emoji ":wave:"}}
+</button>
+<button type="button" data-section="animals_&_nature" {{action onCategorySelection "animals_&_nature"}} class="btn btn-default category-button emoji">
+	 {{replace-emoji ":evergreen_tree:"}}
+</button>
+<button type="button" data-section="food_&_drink" {{action onCategorySelection "food_&_drink"}} class="btn btn-default category-button emoji">
+	 {{replace-emoji ":hamburger:"}}
+</button>
+<button type="button" data-section="travel_&_places" {{action onCategorySelection "travel_&_places"}} class="btn btn-default category-button emoji">
+	 {{replace-emoji ":airplane:"}}
+</button>
+<button type="button" data-section="activities" {{action onCategorySelection "activities"}} class="btn btn-default category-button emoji">
+	 {{replace-emoji ":soccer:"}}
+</button>
+<button type="button" data-section="objects" {{action onCategorySelection "objects"}} class="btn btn-default category-button emoji">
+	 {{replace-emoji ":eyeglasses:"}}
+</button>
+<button type="button" data-section="symbols" {{action onCategorySelection "symbols"}} class="btn btn-default category-button emoji">
+	 {{replace-emoji ":white_check_mark:"}}
+</button>
+<button type="button" data-section="flags" {{action onCategorySelection "flags"}} class="btn btn-default category-button emoji">
+	 {{replace-emoji ":checkered_flag:"}}
+</button>

app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs

@@ -1,20 +1,16 @@
 {{#if isActive}}
-  <div class="emoji-picker {{if @isActive 'opened'}}">
+  <div class="emoji-picker {{if @isActive "opened"}}">
     <div class="emoji-picker-category-buttons">
       {{#if recentEmojis.length}}
-        <button data-section="recent" {{action "onCategorySelection" "recent"}} class="btn btn-default category-button emoji">
+        <button type="button" data-section="recent" {{action "onCategorySelection" "recent"}} class="btn btn-default category-button emoji">
           {{replace-emoji ":star:"}}
         </button>
       {{/if}}
 
-      <% JSON.parse(File.read("lib/emoji/groups.json")).each.with_index do |group, group_index| %>
+      {{emoji-group-buttons onCategorySelection=(action "onCategorySelection")}}
-        <button data-section="<%= group["name"] %>" {{action "onCategorySelection" "<%= group["name"] %>"}} class="btn btn-default category-button emoji">
-          {{replace-emoji ":<%= group["tabicon"] %>:"}}
-        </button>
-      <% end %>
 
       {{#each-in customEmojis as |group emojis|}}
-        <button data-section={{concat "custom-" group}} {{action "onCategorySelection" (concat "custom-" group)}} class="btn btn-default category-button emoji">
+        <button type="button" data-section={{concat "custom-" group}} {{action "onCategorySelection" (concat "custom-" group)}} class="btn btn-default category-button emoji">
           {{replace-emoji (concat ":" emojis.firstObject.code ":")}}
         </button>
       {{/each-in}}
@@ -35,18 +31,18 @@
         {{d-icon "search"}}
       </div>
 
-      <div class="emoji-picker-emoji-area" {{on "click" this.onEmojiSelection}} {{on "mouseover" this.onEmojiHover}}>
+      <div class="emoji-picker-emoji-area" role="button" {{on "click" this.onEmojiSelection}} {{on "mouseover" this.onEmojiHover}}>
-        <div class='results'></div>
+        <div class="results"></div>
 
         {{#conditional-loading-spinner condition=isLoading}}
           <div class="emojis-container">
             {{#if recentEmojis.length}}
-              <div class='section recent' data-section='recent'>
+              <div class="section recent" data-section="recent">
-                <div class='section-header'>
+                <div class="section-header">
-                  <span class="title">{{i18n 'emoji_picker.recent'}}</span>
+                  <span class="title">{{i18n "emoji_picker.recent"}}</span>
                   {{d-button icon="trash-alt" action=(action "onClearRecents") class="trash-recent"}}
                 </div>
-                <div class='section-group'>
+                <div class="section-group">
                   {{#each recentEmojis as |emoji|}}
                     {{replace-emoji (concat ":" emoji ":") (hash lazy=true)}}
                   {{/each}}
@@ -54,30 +50,19 @@
               </div>
             {{/if}}
 
-            <% JSON.parse(File.read("lib/emoji/groups.json")).each.with_index do |group, group_index| %>
+            {{emoji-group-sections}}
-              <div class='section' data-section='<%= group["name"] %>'>
-                <div class='section-header'>
-                  <span class="title">{{i18n 'emoji_picker.<%= group["name"] %>'}}</span>
-                </div>
-                <div class='section-group'>
-                  <% group["icons"].each  do |icon| %>
-                    {{replace-emoji ":<%= icon['name'] %>:" (hash lazy=true class="<%= "diversity" if icon["diversity"] %>")}}
-                  <% end %>
-                </div>
-              </div>
-            <% end %>
 
             {{#each-in customEmojis as |group emojis|}}
-              <div class='section' data-section='custom-{{group}}'>
+              <div class="section" data-section="custom-{{group}}">
-                <div class='section-header'>
+                <div class="section-header">
                   <span class="title">
-                    {{i18n (concat 'emoji_picker.' group)}}
+                    {{i18n (concat "emoji_picker." group)}}
                   </span>
                 </div>
                 {{#if emojis.length}}
-                  <div class='section-group'>
+                  <div class="section-group">
                     {{#each emojis as |emoji|}}
-                      <img title="{{emoji.code}}" width="20" height="20" loading="lazy" class="emoji" src="{{emoji.src}}">
+                      <img title={{emoji.code}} width="20" height="20" loading="lazy" class="emoji" src={{emoji.src}}>
                     {{/each}}
                   </div>
                 {{/if}}
@@ -109,6 +94,6 @@
   </div>
 
   {{#if site.mobileView}}
-    <div class="emoji-picker-modal-overlay" {{on "click" this.onClose}}></div>
+    <div role="button" class="emoji-picker-modal-overlay" {{on "click" this.onClose}}></div>
   {{/if}}
 {{/if}}

lib/tasks/javascript.rake

@@ -16,6 +16,24 @@ def library_src
   "#{Rails.root}/node_modules"
 end
 
+def html_for_section(group)
+  icons = group["icons"].map do |icon|
+    class_attr = icon["diversity"] ? " class=\"diversity\"" : ""
+    "    {{replace-emoji \":#{icon['name']}:\" (hash lazy=true#{class_attr})}}"
+  end
+
+  <<~SECTION
+    <div class="section" data-section="#{group["name"]}">
+      <div class="section-header">
+        <span class="title">{{i18n "emoji_picker.#{group["name"]}"}}</span>
+      </div>
+      <div class="section-group">
+        #{icons.join("\n").strip}
+      </div>
+    </div>
+  SECTION
+end
+
 def write_template(path, task_name, template)
   header = <<~HEADER
     // DO NOT EDIT THIS FILE!!!
@@ -31,6 +49,18 @@ def write_template(path, task_name, template)
   puts "#{basename} prettified"
 end
 
+def write_hbs_template(path, task_name, template)
+  header = <<~HEADER
+  {{!-- DO NOT EDIT THIS FILE!!! --}}
+  {{!-- Update it by running `rake javascript:#{task_name}` --}}
+  HEADER
+
+  basename = File.basename(path)
+  output_path = "#{Rails.root}/app/assets/javascripts/#{path}"
+  File.write(output_path, "#{header}\n#{template}")
+  puts "#{basename} created"
+end
+
 def dependencies
   [
     {
@@ -188,6 +218,23 @@ task 'javascript:update_constants' => :environment do
   write_template("pretty-text/addon/emoji/version.js", task_name, <<~JS)
     export const IMAGE_VERSION = "#{Emoji::EMOJI_VERSION}";
   JS
+
+  groups_json = JSON.parse(File.read("lib/emoji/groups.json"))
+
+  emoji_buttons = groups_json.map do |group|
+    <<~BUTTON
+			<button type="button" data-section="#{group["name"]}" {{action onCategorySelection "#{group["name"]}"}} class="btn btn-default category-button emoji">
+				 {{replace-emoji ":#{group["tabicon"]}:"}}
+			</button>
+    BUTTON
+  end
+
+  emoji_sections = groups_json.map { |group| html_for_section(group) }
+
+  components_dir = "discourse/app/templates/components"
+  write_hbs_template("#{components_dir}/emoji-group-buttons.hbs", task_name, emoji_buttons.join)
+  write_hbs_template("#{components_dir}/emoji-group-sections.hbs", task_name, emoji_sections.join)
+
 end
 
 task 'javascript:update' => 'clean_up' do