chore: remove network hbs template

package.json

@@ -44,7 +44,7 @@
     "autoprefixer": "^9.7.4",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.5",
-    "chobitsu": "^1.4.1",
+    "chobitsu": "^1.4.2",
     "core-js": "^3.26.1",
     "css-loader": "^3.4.2",
     "draggabilly": "^2.2.0",

src/Network/Detail.js

@@ -0,0 +1,113 @@
+import Emitter from 'licia/Emitter'
+import trim from 'licia/trim'
+import isEmpty from 'licia/isEmpty'
+import map from 'licia/map'
+import escape from 'licia/escape'
+import { classPrefix as c } from '../lib/util'
+
+export default class Detail extends Emitter {
+  constructor($container) {
+    super()
+    this._$container = $container
+
+    this._detailData = {}
+    this._bindEvent()
+  }
+  show(data) {
+    if (data.resTxt && trim(data.resTxt) === '') {
+      delete data.resTxt
+    }
+    if (isEmpty(data.resHeaders)) {
+      delete data.resHeaders
+    }
+    if (isEmpty(data.reqHeaders)) {
+      delete data.reqHeaders
+    }
+
+    let postData = ''
+    if (data.data) {
+      postData = `<pre class="${c('data')}">${escape(data.data)}</pre>`
+    }
+
+    let reqHeaders = '<tr><td>Empty</td></tr>'
+    if (data.reqHeaders) {
+      reqHeaders = map(data.reqHeaders, (val, key) => {
+        return `<tr>
+          <td class="${c('key')}">${escape(key)}</td>
+          <td>${escape(val)}</td>
+        </tr>`
+      }).join('')
+    }
+
+    let resHeaders = '<tr><td>Empty</td></tr>'
+    if (data.resHeaders) {
+      resHeaders = map(data.resHeaders, (val, key) => {
+        return `<tr>
+          <td class="${c('key')}">${escape(key)}</td>
+          <td>${escape(val)}</td>
+        </tr>`
+      }).join('')
+    }
+
+    let resTxt = ''
+    if (data.resTxt) {
+      resTxt = `<pre class="${c('response')}">${escape(data.resTxt)}</pre>`
+    }
+
+    const html = `<div class="${c('http')}">
+      <div class="${c('breadcrumb')}">${escape(data.url)}</div>
+      ${postData}
+      <div class="${c('section')}">
+        <h2>Request Headers</h2>
+        <table class="${c('headers')}">
+          <tbody>
+            ${reqHeaders}
+          </tbody>
+        </table>
+      </div>
+      <div class="${c('section')}">
+        <h2>Response Headers</h2>
+        <table class="${c('headers')}">
+          <tbody>
+            ${resHeaders}
+          </tbody>
+        </table>
+      </div>
+      ${resTxt}
+    </div>
+    <div class="${c('back')}">Back to the List</div>`
+
+    this._$container.html(html).show()
+    this._detailData = data
+  }
+  hide() {
+    this._$container.hide()
+  }
+  _bindEvent() {
+    this._$container
+      .on('click', c('.back'), () => this.hide())
+      .on('click', c('.http .response'), () => {
+        const data = this._detailData
+        const resTxt = data.resTxt
+
+        switch (data.subType) {
+          case 'css':
+            return showSources('css', resTxt)
+          case 'html':
+            return showSources('html', resTxt)
+          case 'javascript':
+            return showSources('js', resTxt)
+          case 'json':
+            return showSources('object', resTxt)
+        }
+        switch (data.type) {
+          case 'image':
+            return showSources('img', data.url)
+        }
+      })
+
+    const showSources = (type, data) => {
+      this.emit('showSources', type, data)
+    }
+  }
+}

src/Network/Network.hbs

@@ -1,8 +0,0 @@
-<div {{{class 'title'}}}>
-  Request
-  <div {{{class 'btn clear-request'}}}>
-    <span {{{class 'icon-clear'}}}></span>
-  </div>
-</div>
-<ul {{{class 'requests'}}}></ul>
-<div {{{class 'detail'}}}></div>

src/Network/Network.js

@@ -2,10 +2,11 @@ import Tool from '../DevTools/Tool'
 import isEmpty from 'licia/isEmpty'
 import $ from 'licia/$'
 import ms from 'licia/ms'
-import trim from 'licia/trim'
 import each from 'licia/each'
 import last from 'licia/last'
-import Emitter from 'licia/Emitter'
+import Detail from './Detail'
+import map from 'licia/map'
+import escape from 'licia/escape'
 import { getFileName, classPrefix as c } from '../lib/util'
 import evalCss from '../lib/evalCss'
 import chobitsu from '../lib/chobitsu'
@@ -18,8 +19,6 @@ export default class Network extends Tool {
 
     this.name = 'network'
     this._requests = {}
-    this._tpl = require('./Network.hbs')
-    this._requestsTpl = require('./requests.hbs')
   }
   init($el, container) {
     super.init($el)
@@ -124,7 +123,7 @@ export default class Network extends Tool {
     const self = this
 
     $el
-      .on('click', '.eruda-request', function () {
+      .on('click', c('.request'), function () {
         const id = $(this).data('id')
         const data = self._requests[id]
 
@@ -132,7 +131,7 @@ export default class Network extends Tool {
 
         self._detail.show(data)
       })
-      .on('click', '.eruda-clear-request', () => this.clear())
+      .on('click', c('.clear-request'), () => this.clear())
 
     this._detail.on('showSources', function (type, data) {
       const sources = container.get('sources')
@@ -164,9 +163,18 @@ export default class Network extends Tool {
   }
   _initTpl() {
     const $el = this._$el
-    $el.html(this._tpl())
-    this._$detail = $el.find('.eruda-detail')
-    this._$requests = $el.find('.eruda-requests')
+    $el.html(
+      c(`<div class="title">
+      Request
+      <div class="btn clear-request">
+        <span class="icon-clear"></span>
+      </div>
+    </div>
+    <ul class="requests"></ul>
+    <div class="detail"></div>`)
+    )
+    this._$detail = $el.find(c('.detail'))
+    this._$requests = $el.find(c('.requests'))
   }
   _render() {
     if (!this.active) return
@@ -175,7 +183,26 @@ export default class Network extends Tool {
 
     if (!isEmpty(this._requests)) renderData.requests = this._requests
 
-    this._renderHtml(this._requestsTpl(renderData))
+    let html = `<li><span class="${c('name')}">Empty</span></li>`
+    if (renderData.requests) {
+      html = map(
+        renderData.requests,
+        ({ hasErr, name, status, method, subType, size, displayTime }, idx) => {
+          return `<li class="${c('request')} ${
+            hasErr ? c('error') : ''
+          }" data-id="${idx}">
+          <span class="${c('name')}">${escape(name)}</span>
+          <span class="${c('status')}">${status}</span>
+          <span class="${c('method')}">${method}</span>
+          <span class="${c('type')}">${subType}</span>
+          <span class="${c('size')}">${size}</span>
+          <span class="${c('time')}">${displayTime}</span>
+        </li>`
+        }
+      ).join('')
+    }
+
+    this._renderHtml(html)
   }
   _renderHtml(html) {
     if (html === this._lastHtml) return
@@ -184,60 +211,6 @@ export default class Network extends Tool {
   }
 }
 
-class Detail extends Emitter {
-  constructor($container) {
-    super()
-    this._$container = $container
-
-    this._detailData = {}
-    this._detailTpl = require('./detail.hbs')
-    this._bindEvent()
-  }
-  show(data) {
-    if (data.resTxt && trim(data.resTxt) === '') {
-      delete data.resTxt
-    }
-    if (isEmpty(data.resHeaders)) {
-      delete data.resHeaders
-    }
-    if (isEmpty(data.reqHeaders)) {
-      delete data.reqHeaders
-    }
-    this._$container.html(this._detailTpl(data)).show()
-    this._detailData = data
-  }
-  hide() {
-    this._$container.hide()
-  }
-  _bindEvent() {
-    this._$container
-      .on('click', c('.back'), () => this.hide())
-      .on('click', '.eruda-http .eruda-response', () => {
-        const data = this._detailData
-        const resTxt = data.resTxt
-
-        switch (data.subType) {
-          case 'css':
-            return showSources('css', resTxt)
-          case 'html':
-            return showSources('html', resTxt)
-          case 'javascript':
-            return showSources('js', resTxt)
-          case 'json':
-            return showSources('object', resTxt)
-        }
-        switch (data.type) {
-          case 'image':
-            return showSources('img', data.url)
-        }
-      })
-
-    const showSources = (type, data) => {
-      this.emit('showSources', type, data)
-    }
-  }
-}
-
 function getType(contentType) {
   if (!contentType) return 'unknown'
 

src/Network/detail.hbs

@@ -1,46 +0,0 @@
-<div {{{class 'http'}}}>
-  <div {{{class 'breadcrumb'}}}>{{url}}</div>
-  {{#if data}}
-    <pre {{{class 'data'}}}>{{data}}</pre>
-  {{/if}}
-  <div {{{class 'section'}}}>
-    <h2>Request Headers</h2>
-    <table {{{class 'headers'}}}>
-      <tbody>
-        {{#if reqHeaders}}
-          {{#each reqHeaders}}
-            <tr>
-              <td {{{class 'key'}}}>{{@key}}</td>
-              <td>{{.}}</td>
-            </tr>
-          {{/each}}
-        {{else}}
-          <tr>
-            <td>Empty</td>
-          </tr>
-        {{/if}}
-      </tbody>
-    </table>
-    <h2>Response Headers</h2>
-    <table {{{class 'headers'}}}>
-      <tbody>
-        {{#if resHeaders}}
-          {{#each resHeaders}}
-            <tr>
-              <td {{{class 'key'}}}>{{@key}}</td>
-              <td>{{.}}</td>
-            </tr>
-          {{/each}}
-        {{else}}
-          <tr>
-            <td>Empty</td>
-          </tr>
-        {{/if}}
-      </tbody>
-    </table>
-  </div>
-  {{#if resTxt}}
-    <pre {{{class 'response'}}}>{{resTxt}}</pre>
-  {{/if}}
-</div>
-<div {{{class 'back'}}}>Back to the List</div>

src/Network/requests.hbs

@@ -1,14 +0,0 @@
-{{#if requests}}
-  {{#each requests}}
-    <li class="eruda-request {{#if hasErr}}eruda-error{{/if}}" data-id="{{@key}}">
-      <span {{{class 'name'}}}>{{name}}</span>
-      <span {{{class 'status'}}}>{{status}}</span>
-      <span {{{class 'method'}}}>{{method}}</span>
-      <span {{{class 'type'}}}>{{subType}}</span>
-      <span {{{class 'size'}}}>{{size}}</span>
-      <span {{{class 'time'}}}>{{displayTime}}</span>
-    </li>
-  {{/each}}
-{{else}}
-  <li><span {{{class 'name'}}}>Empty</span></li>
-{{/if}}