Issue #1679. Rename tmpl to jst (to match configs), and use shorter p…

…ath for convenience.

grunt-tasks/jst.js

@@ -15,10 +15,15 @@ module.exports = function(grunt) {
           src = src.replace(/<script type="text\/template">/, "");
           src = src.replace(/<\/script>/, "");
           return src.trim();
+        },
+        processName: function(filename) {
+          // make this a bit less redunant when we have to refer back
+          // to the pre-compiled template function names.
+          return filename.split("webcompat/templates/")[1];
         }
       },
       files: {
-        "<%= jsPath %>/templates.js": ["<%= tmplPath %>/**/*.tmpl"]
+        "<%= jsPath %>/templates.js": ["<%= tmplPath %>/**/*.jst"]
       }
     }
   });

webcompat/static/js/lib/comments.js

@@ -26,7 +26,7 @@ issues.CommentView = Backbone.View.extend({
   id: function() {
     return this.model.get("commentLinkId");
   },
-  template: wcTmpl["webcompat/templates/issue/issue-comment-list.tmpl"],
+  template: wcTmpl["issue/issue-comment-list.jst"],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     return this;

webcompat/static/js/lib/diagnose.js

@@ -23,7 +23,7 @@ diagnose.NeedsTriageView = Backbone.View.extend({
       })
       .error(function() {});
   },
-  template: wcTmpl["webcompat/templates/web_modules/issue-list.tmpl"],
+  template: wcTmpl["web_modules/issue-list.jst"],
   render: function() {
     this.$el.html(
       this.template({

webcompat/static/js/lib/issue-list.js

@@ -38,7 +38,7 @@ issueList.DropdownView = Backbone.View.extend({
       _.bind(this.selectDropdownOption, this)
     );
   },
-  template: wcTmpl["webcompat/templates/list-issue/dropdown.tmpl"],
+  template: wcTmpl["list-issue/dropdown.jst"],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     return this;
@@ -154,7 +154,7 @@ issueList.SearchView = Backbone.View.extend({
     issueList.events.on("search:clear", _.bind(this.clearSearchBox, this));
     issueList.events.on("search:current", _.bind(this.currentSearch, this));
   },
-  template: wcTmpl["webcompat/templates/list-issue/issuelist-search.tmpl"],
+  template: wcTmpl["list-issue/issuelist-search.jst"],
   render: function(cb) {
     this.$el.html(this.template());
     this.input = this.$el.find("input");
@@ -245,7 +245,7 @@ issueList.SortingView = Backbone.View.extend({
       model: this.sortModel
     });
   },
-  template: wcTmpl["webcompat/templates/list-issue/issuelist-sorting.tmpl"],
+  template: wcTmpl["list-issue/issuelist-sorting.jst"],
   render: function() {
     this.$el.html(this.template());
     this.paginationDropdown
@@ -290,7 +290,7 @@ issueList.IssueView = Backbone.View.extend(
       issuesPagination.initMixin(this, this.issues, $("main"));
       this.loadIssues();
     },
-    template: wcTmpl["webcompat/templates/list-issue/issuelist-issue.tmpl"],
+    template: wcTmpl["list-issue/issuelist-issue.jst"],
     loadIssues: function() {
       // Attemps to load model state from URL params, if present,
       // otherwise grab model defaults and load issues

webcompat/static/js/lib/issues.js

@@ -100,7 +100,7 @@ issues.MetaDataView = Backbone.View.extend({
       }, this)
     );
   },
-  template: wcTmpl["webcompat/templates/issue/metadata.tmpl"],
+  template: wcTmpl["issue/metadata.jst"],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     return this;
@@ -117,7 +117,7 @@ issues.AsideView = Backbone.View.extend({
       }, this)
     );
   },
-  template: wcTmpl["webcompat/templates/issue/aside.tmpl"],
+  template: wcTmpl["issue/aside.jst"],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     return this;
@@ -127,7 +127,7 @@ issues.AsideView = Backbone.View.extend({
 issues.BodyView = Backbone.View.extend({
   el: $(".wc-Issue-report"),
   mainView: null,
-  template: wcTmpl["webcompat/templates/issue/issue-report.tmpl"],
+  template: wcTmpl["issue/issue-report.jst"],
   initialize: function(options) {
     this.mainView = options.mainView;
   },
@@ -184,7 +184,7 @@ issues.ImageUploadView = Backbone.View.extend({
   },
   _submitButton: $(".js-Issue-comment-button"),
   _loaderImage: $(".js-Upload-Loader"),
-  template: wcTmpl["webcompat/templates/issue/upload-image.tmpl"],
+  template: wcTmpl["issue/upload-image.jst"],
   render: function() {
     this.$el.html(this.template()).insertAfter($("textarea"));
     return this;
@@ -352,7 +352,7 @@ issues.StateButtonView = Backbone.View.extend({
       }, this)
     );
   },
-  template: wcTmpl["webcompat/templates/issue/state-button.tmpl"],
+  template: wcTmpl["issue/state-button.jst"],
   render: function() {
     var buttonText;
     if (this.model.get("state") === "open") {

webcompat/static/js/lib/labels.js

@@ -35,7 +35,7 @@ issues.LabelsView = Backbone.View.extend({
       this.editLabels();
     }
   },
-  template: wcTmpl["webcompat/templates/issue/issue-labels.tmpl"],
+  template: wcTmpl["issue/issue-labels.jst"],
   // this subTemplate will need to be kept in sync with
   // relavant parts in $('#issue-labels-tmpl')
   // TODO: put subTemplate in its own .tmpl file
@@ -106,7 +106,7 @@ issues.LabelEditorView = Backbone.View.extend({
   initialize: function(options) {
     this.issueView = options.issueView;
   },
-  template: wcTmpl["webcompat/templates/web_modules/label-editor.tmpl"],
+  template: wcTmpl["web_modules/label-editor.jst"],
   render: function() {
     this.$el.html(this.template(this.model));
     this.resizeEditorHeight();

webcompat/static/js/lib/user-activity.js

@@ -36,7 +36,7 @@ issueList.MyIssuesView = Backbone.View.extend(
       );
       this.fetchAndRenderIssues({ url: this.issues.url });
     },
-    template: wcTmpl["webcompat/templates/web_modules/issue-list.tmpl"],
+    template: wcTmpl["web_modules/issue-list.jst"],
     render: function() {
       this.$el.html(
         this.template({
@@ -107,7 +107,7 @@ issueList.IssueMentionsView = Backbone.View.extend(
       );
       this.fetchAndRenderIssues({ url: this.issues.url });
     },
-    template: wcTmpl["webcompat/templates/web_modules/issue-list.tmpl"],
+    template: wcTmpl["web_modules/issue-list.jst"],
     render: function() {
       this.$el.html(
         this.template({

webcompat/templates/home-page/browse-issues.html

@@ -2,7 +2,7 @@
   <div class="wc-UIContent">
     <h2 class="wc-Title wc-Title--l">Latest Untriaged Issues</h2>
     <div id="js-lastIssue">
-      {% include "web_modules/issue-list.tmpl" %}
+      {% include "web_modules/issue-list.jst" %}
     </div>
     <p class="wc-IssueItem-linkMoreIssues">
       <a class="wc-Link" href="{{ url_for("show_issues") }}">View All</a>

webcompat/templates/issue.html

@@ -11,7 +11,7 @@
         {% include "issue/issue-aside.html" %}
         {% include "issue/issue-information.html" %}
         <div class="wc-Issue-commentList js-Issue-commentList">
-          {% include "issue/issue-comment-list.tmpl" %}
+          {% include "issue/issue-comment-list.jst" %}
         </div>
         {% if session.user_id and session.avatar_url %}
           <div class="wc-Issue-commentSubmit">

webcompat/templates/issue/aside.tmpl → webcompat/templates/issue/aside.jst

@@ -1,4 +1,4 @@
-<script type="text/template" id="aside-tmpl">
+<script type="text/template">
   <header class="wc-Issue-information-header wc-Issue-information-header--<%= stateClass %>">
     <div><%= issueState %></div>
     <div>#<%= number %></div>

webcompat/templates/issue/issue-aside.html

@@ -1,8 +1,8 @@
 <aside class="wc-Issue-aside">
   <div class="wc-Issue-information wc-Issue-information--fullWidth" id="js-Issue-aside">
-    {% include "issue/aside.tmpl" %}
+    {% include "issue/aside.jst" %}
   </div>
   <div class="wc-Issue-labels js-Issue-labels">
-    {% include "issue/issue-labels.tmpl" %}
+    {% include "issue/issue-labels.jst" %}
   </div>
 </aside>

webcompat/templates/issue/issue-comment-list.tmpl → webcompat/templates/issue/issue-comment-list.jst

@@ -1,4 +1,4 @@
-<script type="text/template" id="comment-tmpl">
+<script type="text/template">
   <div class="wc-Comment-body">
     <div class="wc-Comment-wrapper">
       <div class="wc-Comment-header">

webcompat/templates/issue/issue-comment-submit.html

@@ -13,11 +13,11 @@
   <label for="wc-Comment-text" class="wc-Accessibility">Comment Text</label>
     <textarea class="wc-Comment-submit js-Comment-text mousetrap js-autoExpand" placeholder="Leave a comment"></textarea>
     <div class="wc-Form-group js-ImageUploadView">
-      {% include "issue/upload-image.tmpl" %}
+      {% include "issue/upload-image.jst" %}
     </div>
     <div class="wc-Comment-button">
       <button class="wc-Button wc-Button--action js-Issue-state-button">
-        {% include "issue/state-button.tmpl" %}
+        {% include "issue/state-button.jst" %}
       </button>
       <button value="comment" class="wc-Button wc-Button--default js-Issue-comment-button" type="submit">Comment</button>
     </div>

webcompat/templates/issue/issue-information.html

@@ -1,5 +1,5 @@
 <div class="wc-Issue-information">
   <div id="js-Issue-information">
-  {% include "issue/metadata.tmpl" %}
+  {% include "issue/metadata.jst" %}
   </div>
 </div>

webcompat/templates/issue/issue-labels.tmpl → webcompat/templates/issue/issue-labels.jst

@@ -1,4 +1,4 @@
-<script type="text/template" id="issue-labels-tmpl">
+<script type="text/template">
   <header class="wc-Issue-labelEditor">
     <div class="wc-Issue-labelEditor-title">
       Labels
@@ -19,4 +19,4 @@
   </span>
 </script>
 
-{% include "web_modules/label-editor.tmpl" %}
+{% include "web_modules/label-editor.jst" %}

webcompat/templates/issue/issue-report.tmpl → webcompat/templates/issue/issue-report.jst

@@ -1,4 +1,4 @@
-<script type="text/template" id="issue-report">
+<script type="text/template">
   <div class="wc-Comment">
     <div class="wc-Comment-avatar">
       <img src="<%= reporterAvatar %>" alt="<%= reporter %>">

webcompat/templates/issue/metadata.tmpl → webcompat/templates/issue/metadata.jst

@@ -1,7 +1,7 @@
-<script type="text/template" id="metadata-tmpl">
+<script type="text/template">
   <div class="wc-Issue-information-content">
     <div class="js-Issue-markdown wc-Markdown">
       <%= body %>
     </div>
   </div>
-</script>
+</script>

webcompat/templates/issue/state-button.tmpl → webcompat/templates/issue/state-button.jst

@@ -1,3 +1,3 @@
-<script type="text/template" id="state-button-tmpl">
+<script type="text/template">
   <span class="js-comment-<%= stateClass %>"><%= state %></span>
 </script>

webcompat/templates/issue/upload-image.tmpl → webcompat/templates/issue/upload-image.jst

@@ -1,4 +1,4 @@
-<script type="text/template" id="upload-input-tmpl">
+<script type="text/template">
   <form>
     <label class="wc-UploadForm wc-UploadForm--new" for="image">
       <div class="wc-UploadForm-wrapper">

webcompat/templates/list-issue.html

@@ -22,7 +22,7 @@
         {% include "list-issue/search-issue-sorting.html" %}
       </div>
       <div class="wc-UIContent js-list-issue">
-        {% include "list-issue/issuelist-issue.tmpl" %}
+        {% include "list-issue/issuelist-issue.jst" %}
       </div>
       <div class="wc-SearchIssue-sorting">
         <div class="wc-UIContent">

webcompat/templates/list-issue/dropdown.tmpl → webcompat/templates/list-issue/dropdown.jst

@@ -1,4 +1,4 @@
-<script type="text/template" id="dropdown-tmpl">
+<script type="text/template">
   <button type="button" class="wc-Dropdown-toggle js-Dropdown-toggle">
      <h1 class="wc-Dropdown-label js-Dropdown-label"><%= dropdownTitle %></h1> <span class="wc-Icon wc-Icon--chevron-down"></span>
   </button>

webcompat/templates/list-issue/issuelist-issue.tmpl → webcompat/templates/list-issue/issuelist-issue.jst

@@ -1,4 +1,4 @@
-<script type="text/template" id="issuelist-issue-tmpl">
+<script type="text/template">
 <% if (issues.length) { %>
   <% _.each(issues, function(issue) { %>
     <article class="wc-IssueList wc-IssueList--<%= issue.stateClass %> wc-IssueList--large js-IssueList">

webcompat/templates/list-issue/issuelist-search.tmpl → webcompat/templates/list-issue/issuelist-search.jst

@@ -1,4 +1,4 @@
-<script type="text/template" id="issuelist-search-tmpl">
+<script type="text/template">
   <div class="wc-UIContent">
     <div class="wc-SearchForm-content">
       <label for="wc-SearchForm-input" class="wc-Accessibility">Search By Keyword</label>

webcompat/templates/list-issue/issuelist-sorting.tmpl → webcompat/templates/list-issue/issuelist-sorting.jst

@@ -1,4 +1,4 @@
-<script type="text/template" id="issuelist-sorting-tmpl">
+<script type="text/template">
   <div class="wc-Dropdown js-Dropdown js-Dropdown-pagination"></div>
   <div class="wc-Dropdown js-Dropdown js-Dropdown-sort"></div>
 </script>

webcompat/templates/list-issue/search-issue-filter.html

@@ -6,4 +6,4 @@
   {% endfor %}
 </div>
 
-{% include "list-issue/dropdown.tmpl" %}
+{% include "list-issue/dropdown.jst" %}

webcompat/templates/list-issue/search-issue-search-form.html

@@ -1,3 +1,3 @@
 <div class="wc-SearchForm js-SearchForm">
-  {% include "list-issue/issuelist-search.tmpl" %}
+  {% include "list-issue/issuelist-search.jst" %}
 </div>

webcompat/templates/list-issue/search-issue-sorting.html

@@ -2,7 +2,7 @@
   <div class="r-Grid">
     <div class="r-Grid-cell r-all--1of2">
       <div class="js-SearchIssue-sorting">
-      {% include "list-issue/issuelist-sorting.tmpl" %}
+      {% include "list-issue/issuelist-sorting.jst" %}
       </div>
     </div>
     <div class="r-Grid-cell r-all--1of2">

webcompat/templates/user-activity/reported-by-user.html

@@ -6,6 +6,6 @@ <h2 class="wc-Title wc-Title--l">Issues reported by {{user}}</h2>
     {% include "web_modules/pagination.html" %}
   </div>
   <div id="my-issues">
-    {% include "web_modules/issue-list.tmpl" %}
+    {% include "web_modules/issue-list.jst" %}
   </div>
 </div>

webcompat/templates/user-activity/user-mentions.html

@@ -6,6 +6,6 @@ <h2 class="wc-Title--l">Issues mentioning {{user}}</h2>
     {% include "web_modules/pagination.html" %}
   </div>
   <div id="issue-mentions">
-    {% include "web_modules/issue-list.tmpl" %}
+    {% include "web_modules/issue-list.jst" %}
   </div>
 </div>

webcompat/templates/web_modules/issue-list.tmpl → webcompat/templates/web_modules/issue-list.jst

@@ -1,4 +1,4 @@
-<script type="text/template" id="issue-list-tmpl">
+<script type="text/template">
   <% if (issues.length) { %>
     <% _.each(issues, function(issue) { %>
       <article class="wc-IssueList wc-IssueList--<%= issue.stateClass %> wc-IssueList--large js-IssueList">

webcompat/templates/web_modules/label-editor.tmpl → webcompat/templates/web_modules/label-editor.jst

@@ -1,4 +1,4 @@
-<script type="text/template" id="label-editor-tmpl">
+<script type="text/template">
   <div class="wc-LabelEditor-header">
     <input class="form-control wc-LabelEditor-search" placeholder="filter label">
     <button class="wc-LabelEditor-button r-ResetButton" tabindex="0">Save &amp; Close</button>