chore: remove handlebars

build/webpack.base.js

@@ -94,35 +94,6 @@ module.exports = {
         test: /luna-dom-highlighter\.css$/,
         use: [rawLoader],
       },
-      // https://github.com/wycats/handlebars.js/issues/1134
-      {
-        test: /\.hbs$/,
-        use: [
-          {
-            loader: path.resolve(
-              __dirname,
-              './loaders/handlebars-minifier-loader.js'
-            ),
-            options: {},
-          },
-          {
-            loader: nodeModDir + 'handlebars-loader/index.js',
-            options: {
-              runtime: srcDir + 'lib/handlebars.js',
-              knownHelpers: ['class', 'repeat', 'concat'],
-              precompileOptions: {
-                knownHelpersOnly: true,
-              },
-            },
-          },
-          {
-            loader: 'html-minifier-loader',
-            options: {
-              ignoreCustomFragments: [/\{\{\{[^}]+\}\}\}/, /\{\{[^}]+\}\}/],
-            },
-          },
-        ],
-      },
     ],
   },
   plugins: [

package.json

@@ -52,10 +52,6 @@
     "eslint": "^6.8.0",
     "eslint-loader": "^3.0.3",
     "eustia-module": "^1.30.0",
-    "handlebars": "^4.7.3",
-    "handlebars-loader": "^1.7.1",
-    "html-minifier": "^4.0.0",
-    "html-minifier-loader": "^1.4.1",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine-core": "^2.99.1",
     "jasmine-jquery": "^2.1.1",

src/Elements/BottomBar.hbs

@@ -1,14 +0,0 @@
-<div {{{class 'bottom-bar'}}}>
-  <div {{{class 'btn select'}}}>
-    <span {{{class 'icon icon-select'}}}></span>
-  </div>
-  <div {{{class 'btn refresh'}}}>
-    <span {{{class 'icon icon-refresh'}}}></span>
-  </div>
-  <div {{{class 'btn highlight'}}}>
-    <span {{{class 'icon icon-eye'}}}></span>
-  </div>
-  <div {{{class 'btn reset'}}}>
-    <span {{{class 'icon icon-reset'}}}></span>
-  </div>
-</div>

src/Elements/Elements.hbs

@@ -1,133 +0,0 @@
-{{#if parents}}
-  <ul {{{class 'parents'}}}>
-    {{#each parents}}
-      <li>
-        <div {{{class 'parent'}}} data-idx="{{idx}}">{{{text}}}</div>
-        <span {{{class 'icon-arrow-right'}}}></span>
-      </li>
-    {{/each}}
-  </ul>
-{{/if}}
-<div {{{class 'breadcrumb'}}}>
-  {{{name}}}
-</div>
-{{#if children}}
-  <ul {{{class 'children'}}}>
-    {{#each children}}
-      <li class="eruda-child {{#if isCmt}}eruda-green{{/if}} {{#if isEl}}eruda-active-effect{{/if}}" data-idx="{{idx}}">{{{text}}}</li>
-    {{/each}}
-  </ul>
-{{/if}}
-<div {{{class 'attributes section'}}}>
-  <h2>Attributes</h2>
-  <div {{{class 'table-wrapper'}}}>
-    <table>
-      <tbody>
-      {{#if attributes}}
-        {{#each attributes}}
-          <tr>
-            <td class="eruda-attribute-name-color">{{name}}</td>
-            <td class="eruda-string-color">{{{value}}}</td>
-          </tr>
-        {{/each}}
-      {{else}}
-        <tr>
-          <td>Empty</td>
-        </tr>
-      {{/if}}
-      </tbody>
-    </table>
-  </div>
-</div>
-{{#if styles}}
-  <div {{{class 'styles section'}}}>
-    <h2>Styles</h2>
-    <div {{{class 'style-wrapper'}}}>
-      {{#each styles}}
-        <div {{{class 'style-rules'}}}>
-          <div>{{selectorText}} {</div>
-          {{#each style}}
-            <div {{{class 'rule'}}}>
-              <span>{{@key}}</span>: {{{.}}};
-            </div>
-          {{/each}}
-          <div>}</div>
-        </div>
-      {{/each}}
-    </div>
-  </div>
-{{/if}}
-{{#if computedStyle}}
-  <div {{{class 'computed-style section'}}}>
-    <h2>
-      Computed Style
-      {{#if rmDefComputedStyle}}
-        <div {{{class 'btn toggle-all-computed-style'}}}>
-          <span {{{class 'icon-compress'}}}></span>
-        </div>
-      {{else}}
-        <div {{{class 'btn toggle-all-computed-style'}}}>
-          <span {{{class 'icon-expand'}}}></span>
-        </div>
-      {{/if}}
-      <div {{{class 'btn computed-style-search'}}}>
-        <span {{{class 'icon-filter'}}}></span>
-      </div>
-      {{#if computedStyleSearchKeyword}}
-        <div {{{class 'btn search-keyword'}}}>
-          {{computedStyleSearchKeyword}}
-        </div>
-      {{/if}}
-    </h2>
-    <div {{{class 'box-model'}}}>
-      {{#if boxModel.position}}<div {{{class 'position'}}}>
-        <div {{{class 'label'}}}>position</div><div {{{class 'top'}}}>{{boxModel.position.top}}</div><br><div {{{class 'left'}}}>{{boxModel.position.left}}</div>{{/if}}{{!
-        }}<div {{{class 'margin'}}}>
-          <div {{{class 'label'}}}>margin</div><div {{{class 'top'}}}>{{boxModel.margin.top}}</div><br><div {{{class 'left'}}}>{{boxModel.margin.left}}</div>{{!
-          }}<div {{{class 'border'}}}>
-            <div {{{class 'label'}}}>border</div><div {{{class 'top'}}}>{{boxModel.border.top}}</div><br><div {{{class 'left'}}}>{{boxModel.border.left}}</div>{{!
-            }}<div {{{class 'padding'}}}>
-              <div {{{class 'label'}}}>padding</div><div {{{class 'top'}}}>{{boxModel.padding.top}}</div><br><div {{{class 'left'}}}>{{boxModel.padding.left}}</div>{{!
-              }}<div {{{class 'content'}}}>
-                <span>{{boxModel.content.width}}</span>&nbsp;×&nbsp;<span>{{boxModel.content.height}}</span>
-              </div>{{!
-              }}<div {{{class 'right'}}}>{{boxModel.padding.right}}</div><br><div {{{class 'bottom'}}}>{{boxModel.padding.bottom}}</div>{{!
-              }}</div>{{!
-            }}<div {{{class 'right'}}}>{{boxModel.border.right}}</div><br><div {{{class 'bottom'}}}>{{boxModel.border.bottom}}</div>{{!
-          }}</div>{{!
-          }}<div {{{class 'right'}}}>{{boxModel.margin.right}}</div><br><div {{{class 'bottom'}}}>{{boxModel.margin.bottom}}</div>{{!
-        }}</div>{{!
-        }}{{#if boxModel.position}}<div {{{class 'right'}}}>{{boxModel.position.right}}</div><br><div {{{class 'bottom'}}}>{{boxModel.position.bottom}}</div>{{!
-      }}</div>{{/if}}
-    </div>
-    <div {{{class 'table-wrapper'}}}>
-      <table>
-        <tbody>
-        {{#each computedStyle}}
-          <tr>
-            <td {{{class 'key'}}}>{{@key}}</td>
-            <td>{{{.}}}</td>
-          </tr>
-        {{/each}}
-        </tbody>
-      </table>
-    </div>
-  </div>
-{{/if}}
-{{#if listeners}}
-  <div {{{class 'listeners section'}}}>
-    <h2>Event Listeners</h2>
-    <div {{{class 'listener-wrapper'}}}>
-      {{#each listeners}}
-         <div {{{class 'listener'}}}>
-           <div {{{class 'listener-type'}}}>{{@key}}</div>
-           <ul {{{class 'listener-content'}}}>
-             {{#each .}}
-               <li {{#if useCapture}}{{{class 'capture'}}}{{/if}}>{{listenerStr}}</li>
-             {{/each}}
-           </ul>
-         </div>
-      {{/each}}
-    </div>
-  </div>
-{{/if}}

src/Elements/Elements.js

@@ -4,6 +4,7 @@ import Highlight from './Highlight'
 import Select from './Select'
 import Settings from '../Settings/Settings'
 import $ from 'licia/$'
+import isEmpty from 'licia/isEmpty'
 import keys from 'licia/keys'
 import MutationObserver from 'licia/MutationObserver'
 import each from 'licia/each'
@@ -27,7 +28,7 @@ import trim from 'licia/trim'
 import lowerCase from 'licia/lowerCase'
 import pick from 'licia/pick'
 import LunaModal from 'luna-modal'
-import { pxToNum, isErudaEl } from '../lib/util'
+import { pxToNum, isErudaEl, classPrefix as c } from '../lib/util'
 import evalCss from '../lib/evalCss'
 
 export default class Elements extends Tool {
@@ -37,7 +38,6 @@ export default class Elements extends Tool {
     this._style = evalCss(require('./Elements.scss'))
 
     this.name = 'elements'
-    this._tpl = require('./Elements.hbs')
     this._rmDefComputedStyle = true
     this._highlightElement = false
     this._selectElement = false
@@ -54,7 +54,22 @@ export default class Elements extends Tool {
 
     $el.html('<div class="eruda-show-area"></div>')
     this._$showArea = $el.find('.eruda-show-area')
-    $el.append(require('./BottomBar.hbs')())
+    $el.append(
+      c(`<div class="bottom-bar">
+      <div class="btn select">
+        <span class="icon icon-select"></span>
+      </div>
+      <div class="btn refresh">
+        <span class="icon icon-refresh"></span>
+      </div>
+      <div class="btn highlight">
+        <span class="icon icon-eye"></span>
+      </div>
+      <div class="btn reset">
+        <span class="icon icon-reset"></span>
+      </div>
+    </div>`)
+    )
 
     this._htmlEl = document.documentElement
     this._highlight = new Highlight(this._container.$container)
@@ -353,7 +368,174 @@ export default class Elements extends Tool {
     if (!isElExist(this._curEl)) return this._back()
 
     this._highlight[this._highlightElement ? 'show' : 'hide']()
-    this._renderHtml(this._tpl(this._getData()))
+
+    const data = this._getData()
+
+    let parents = ''
+    if (!isEmpty(data.parents)) {
+      parents = `<ul class="${c('parents')}">
+        ${map(data.parents, ({ text, idx }) => {
+          return `<li>
+            <div class="${c('parent')}" data-idx="${idx}">${text}</div>
+            <span class="${c('icon-arrow-right')}"></span>
+          </li>`
+        }).join('')}
+      </ul>`
+    }
+
+    let children = ''
+    if (data.children) {
+      children = `<ul class="${c('children')}">
+        ${map(data.children, ({ isCmt, idx, isEl, text }) => {
+          return `<li class="${c(
+            `child ${isCmt ? 'green' : ''} ${isEl ? 'active-effect' : ''}`
+          )}" data-idx="${idx}">${text}</li>`
+        }).join('')}
+      </ul>`
+    }
+
+    let attribute = '<tr><td>Empty</td></tr>'
+    if (!isEmpty(data.attributes)) {
+      attribute = map(data.attributes, ({ name, value }) => {
+        return `<tr>
+          <td class="${c('attribute-name-color')}">${escape(name)}</td>
+          <td class="${c('string-color')}">${value}</td>
+        </tr>`
+      }).join('')
+    }
+    attribute = `<div class="${c('attributes section')}">
+      <h2>Attributes</h2>
+      <div class="${c('table-wrapper')}">
+        <table>
+          <tbody>
+            ${attribute} 
+          </tbody>
+        </table>
+      </div>
+    </div>`
+
+    let styles = ''
+    if (!isEmpty(data.styles)) {
+      const style = map(data.styles, ({ selectorText, style }) => {
+        style = map(style, (val, key) => {
+          return `<div class="${c('rule')}"><span>${escape(
+            key
+          )}</span>: ${val};</div>`
+        }).join('')
+        return `<div class="${c('style-rules')}">
+          <div>${escape(selectorText)} {</div>
+            ${style}
+          <div>}</div>
+        </div>`
+      }).join('')
+      styles = `<div class="${c('styles section')}">
+        <h2>Styles</h2>
+        <div class="${c('style-wrapper')}">
+          ${style}
+        </div>
+      </div>`
+    }
+
+    let computedStyle = ''
+    if (data.computedStyle) {
+      let toggleButton = c(`<div class="btn toggle-all-computed-style">
+        <span class="icon-expand"></span>
+      </div>`)
+      if (data.rmDefComputedStyle) {
+        toggleButton = c(`<div class="btn toggle-all-computed-style">
+          <span class="icon-compress"></span>
+        </div>`)
+      }
+
+      const boxModel = data.boxModel
+      // prettier-ignore
+      const boxModelHtml = [`<div class="${c('box-model')}">`,
+        boxModel.position ? `<div class="${c('position')}">` : '',
+          boxModel.position ? `<div class="${c('label')}">position</div><div class="${c('top')}">${boxModel.position.top}</div><br><div class="${c('left')}">${boxModel.position.left}</div>` : '',
+          `<div class="${c('margin')}">`,
+            `<div class="${c('label')}">margin</div><div class="${c('top')}">${boxModel.margin.top}</div><br><div class="${c('left')}">${boxModel.margin.left}</div>`,
+            `<div class="${c('border')}">`,
+              `<div class="${c('label')}">border</div><div class="${c('top')}">${boxModel.border.top}</div><br><div class="${c('left')}">${boxModel.border.left}</div>`,
+              `<div class="${c('padding')}">`,
+                `<div class="${c('label')}">padding</div><div class="${c('top')}">${boxModel.padding.top}</div><br><div class="${c('left')}">${boxModel.padding.left}</div>`,
+                `<div class="${c('content')}">`,
+                  `<span>${boxModel.content.width}</span>&nbsp;×&nbsp;<span>${boxModel.content.height}</span>`,
+                '</div>',
+                `<div class="${c('right')}">${boxModel.padding.right}</div><br><div class="${c('bottom')}">${boxModel.padding.bottom}</div>`,
+              '</div>',
+              `<div class="${c('right')}">${boxModel.border.right}</div><br><div class="${c('bottom')}">${boxModel.border.bottom}</div>`,
+            '</div>',
+            `<div class="${c('right')}">${boxModel.margin.right}</div><br><div class="${c('bottom')}">${boxModel.margin.bottom}</div>`,
+          '</div>',
+          boxModel.position ? `<div class="${c('right')}">${boxModel.position.right}</div><br><div class="${c('bottom')}">${boxModel.position.bottom}</div>` : '',
+        boxModel.position ? '</div>' : '',
+      '</div>'].join('')
+
+      computedStyle = `<div class="${c('computed-style section')}">
+        <h2>
+          Computed Style
+          ${toggleButton}
+          <div class="${c('btn computed-style-search')}">
+            <span class="${c('icon-filter')}"></span>
+          </div>
+          ${
+            data.computedStyleSearchKeyword
+              ? `<div class="${c('btn search-keyword')}">${escape(
+                  data.computedStyleSearchKeyword
+                )}</div>`
+              : ''
+          }
+        </h2>
+        ${boxModelHtml}
+        <div class="${c('table-wrapper')}">
+          <table>
+            <tbody>
+            ${map(data.computedStyle, (val, key) => {
+              return `<tr>
+                <td class="${c('key')}">${escape(key)}</td>
+                <td>${val}</td>
+              </tr>`
+            }).join('')}
+            </tbody>
+          </table>
+        </div>
+      </div>`
+    }
+
+    let listeners = ''
+    if (data.listeners) {
+      listeners = map(data.listeners, (listeners, key) => {
+        listeners = map(listeners, ({ useCapture, listenerStr }) => {
+          return `<li ${useCapture ? `class="${c('capture')}"` : ''}>${escape(
+            listenerStr
+          )}</li>`
+        }).join('')
+        return `<div class="${c('listener')}">
+          <div class="${c('listener-type')}">${escape(key)}</div>
+          <ul class="${c('listener-content')}">
+            ${listeners}
+          </ul>
+        </div>`
+      }).join('')
+      listeners = `<div class="${c('listeners section')}">
+        <h2>Event Listeners</h2>
+        <div class="${c('listener-wrapper')}">
+          ${listeners} 
+        </div>
+      </div>`
+    }
+
+    const html = `${parents}
+    <div class="${c('breadcrumb')}">
+      ${data.name}
+    </div>
+    ${children}
+    ${attribute}
+    ${styles}
+    ${computedStyle}
+    ${listeners}`
+
+    this._renderHtml(html)
   }
   _renderHtml(html) {
     if (html === this._lastHtml) return

src/lib/handlebars.js

@@ -1,49 +0,0 @@
-const handlebars = require('handlebars/runtime')
-
-// https://github.com/helpers/handlebars-helper-repeat
-handlebars.registerHelper('repeat', function (count = 0, options) {
-  if (count < 1) return options.inverse(this)
-
-  const step = 1
-  const start = 0
-  const max = count * step + start
-  let index = start
-  let str = ''
-
-  do {
-    const data = {
-      index,
-      count,
-      start,
-      step,
-      first: index === start,
-      last: index >= max - step,
-    }
-    const blockParams = [index, data]
-    str += options.fn(this, { data, blockParams })
-    index += data.step
-  } while (index < max)
-
-  return str
-})
-
-handlebars.registerHelper('class', function (value) {
-  let classes = value.split(/\s+/)
-
-  classes = classes.map((c) => `eruda-${c}`)
-
-  return `class="${classes.join(' ')}"`
-})
-
-handlebars.registerHelper('concat', function () {
-  let ret = ''
-
-  for (let i = 0, len = arguments.length; i < len; i++) {
-    const arg = arguments[i]
-    if (typeof arg === 'string') ret += arg
-  }
-
-  return ret
-})
-
-module.exports = handlebars