refact(-): separate template string to external html from js

CoderK · CoderK · commit a88725d3cef8 · 2016-09-03T14:49:53.000+09:00
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "babel-core": "^6.14.0",
     "babel-loader": "^6.2.5",
     "babel-preset-es2015": "^6.14.0",
+    "lodash-template-webpack-loader": "^1.0.2",
     "webpack": "^1.13.2"
   },
   "scripts": {
diff --git a/src/filter/props.js b/src/filter/props.js
@@ -1,8 +1,11 @@
+import tplItem from './templates/item.html';
+import tplInput from './templates/input.html';
+
 function injectInputform(selectNode, { tplInput }) {
     const childNods = selectNode.children;
     const lastIdx = childNods.length - 1;
 
-    childNods[lastIdx].insertAdjacentHTML('beforebegin', tplInput);
+    childNods[lastIdx].insertAdjacentHTML('beforebegin', tplInput());
 
     return selectNode.children[lastIdx];
 }
@@ -17,24 +20,8 @@ function readyElements(el, templates) {
 
 function readyTemplates() {
     return {
-        tplItem: `<a id="<%= name %>" href="<%= path %>" class="select-menu-item js-navigation-item gfe--filterItem">
-                            <div class="select-menu-item-text" style="float:left;"><%= name %></div>
-                            <svg
-                              data-name="<%= name %>"
-                              aria-hidden="true"
-                              class="octicon octicon-link-external select-menu-item-icon gfe--deleteBtn"
-                              height="16"
-                              version="1.1"
-                              viewBox="0 0 12 16"
-                              width="16">
-                            <path d="M7.48 8l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75-1.48-1.48 3.75-3.75L0.77 4.25l1.48-1.48 3.75 3.75 3.75-3.75 1.48 1.48-3.75 3.75z"></path>
-                          </svg>
-                        </a>`,
-        tplInput: `<a id='__filterInputWrap' class="select-menu-item" target="_blank">
-                            <div class="select-menu-item-text">
-                                <input class='gfe--input' type='text' placeholder="Enter name to save" maxlength="15">
-                            </div>
-                          </a>`
+        tplItem: tplItem,
+        tplInput: tplInput
     }
 }
 
diff --git a/src/filter/templates/input.html b/src/filter/templates/input.html
@@ -0,0 +1,5 @@
+<a id='__filterInputWrap' class="select-menu-item" target="_blank">
+    <div class="select-menu-item-text">
+        <input class='gfe--input' type='text' placeholder="Enter name to save" maxlength="15">
+    </div>
+</a>
diff --git a/src/filter/templates/item.html b/src/filter/templates/item.html
@@ -0,0 +1,13 @@
+<a id="<%= name %>" href="<%= path %>" class="select-menu-item js-navigation-item gfe--filterItem">
+<div class="select-menu-item-text" style="float:left;"><%= name %></div>
+<svg
+        data-name="<%= name %>"
+        aria-hidden="true"
+        class="octicon octicon-link-external select-menu-item-icon gfe--deleteBtn"
+        height="16"
+        version="1.1"
+        viewBox="0 0 12 16"
+        width="16">
+    <path d="M7.48 8l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75-1.48-1.48 3.75-3.75L0.77 4.25l1.48-1.48 3.75 3.75 3.75-3.75 1.48 1.48-3.75 3.75z"></path>
+</svg>
+</a>
diff --git a/src/filter/view.js b/src/filter/view.js
@@ -1,4 +1,3 @@
-import template from 'lodash/template';
 import DeepDiff from 'deep-diff';
 
 import 'rxjs/add/operator/do';
@@ -41,7 +40,7 @@ function patch(diff, element, template) {
 }
 
 function prependItem(tplItem, targetElement, data) {
-    const itemHtml = template(tplItem)(data);
+    const itemHtml = tplItem(data);
     targetElement.insertAdjacentHTML('beforebegin', itemHtml);
 }
 
diff --git a/webpack.config.js b/webpack.config.js
@@ -22,6 +22,10 @@ module.exports = {
                 query: {
                     presets: ['es2015']
                 }
+            },
+            {
+                test: /(\.tpl|\.html)$/,
+                loader: 'lodash-template-webpack',
             }
         ]
     },

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import template from 'lodash/template';`
`2`	`1`	`import DeepDiff from 'deep-diff';`
`3`	`2`
`4`	`3`	`import 'rxjs/add/operator/do';`
`@@ -41,7 +40,7 @@ function patch(diff, element, template) {`
`41`	`40`	`}`
`42`	`41`
`43`	`42`	`function prependItem(tplItem, targetElement, data) {`
`44`		`- const itemHtml = template(tplItem)(data);`
	`43`	`+ const itemHtml = tplItem(data);`
`45`	`44`	`targetElement.insertAdjacentHTML('beforebegin', itemHtml);`
`46`	`45`	`}`
`47`	`46`
Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,10 @@ module.exports = {`
`22`	`22`	`query: {`
`23`	`23`	`presets: ['es2015']`
`24`	`24`	`}`
	`25`	`+ },`
	`26`	`+ {`
	`27`	`+ test: /(\.tpl\|\.html)$/,`
	`28`	`+ loader: 'lodash-template-webpack',`
`25`	`29`	`}`
`26`	`30`	`]`
`27`	`31`	`},`