feat(sources): use luna text viewer

.prettierignore

@@ -1,3 +1 @@
-test/util.js
-eruda.js
-eruda.min.js
+test/util.js

build/webpack.base.js

@@ -66,6 +66,7 @@ module.exports = {
           path.resolve(__dirname, '../node_modules/luna-data-grid'),
           path.resolve(__dirname, '../node_modules/luna-object-viewer'),
           path.resolve(__dirname, '../node_modules/luna-dom-viewer'),
+          path.resolve(__dirname, '../node_modules/luna-text-viewer'),
         ],
         use: [
           {

package.json

@@ -70,6 +70,7 @@
     "luna-notification": "^0.1.4",
     "luna-object-viewer": "^0.2.4",
     "luna-tab": "^0.1.2",
+    "luna-text-viewer": "^0.1.0",
     "node-sass": "^7.0.1",
     "postcss-clean": "^1.1.0",
     "postcss-loader": "^3.0.0",

src/Network/Detail.js

@@ -6,6 +6,7 @@ import escape from 'licia/escape'
 import copy from 'licia/copy'
 import isJson from 'licia/isJson'
 import Emitter from 'licia/Emitter'
+import truncate from 'licia/truncate'
 import { classPrefix as c } from '../lib/util'
 
 export default class Detail extends Emitter {
@@ -55,7 +56,11 @@ export default class Detail extends Emitter {
 
     let resTxt = ''
     if (data.resTxt) {
-      resTxt = `<pre class="${c('response')}">${escape(data.resTxt)}</pre>`
+      let text = data.resTxt
+      if (text.length > MAX_RES_LEN) {
+        text = truncate(text, MAX_RES_LEN)
+      }
+      resTxt = `<pre class="${c('response')}">${escape(text)}</pre>`
     }
 
     const html = `<div class="${c('control')}">
@@ -153,3 +158,5 @@ export default class Detail extends Emitter {
     }
   }
 }
+
+const MAX_RES_LEN = 100000

src/Sources/Sources.js

@@ -4,9 +4,9 @@ import Settings from '../Settings/Settings'
 import ajax from 'licia/ajax'
 import isStr from 'licia/isStr'
 import escape from 'licia/escape'
-import trim from 'licia/trim'
-import map from 'licia/map'
+import truncate from 'licia/truncate'
 import highlight from 'licia/highlight'
+import LunaTextViewer from 'luna-text-viewer'
 import evalCss from '../lib/evalCss'
 import { classPrefix as c } from '../lib/util'
 
@@ -172,9 +172,15 @@ export default class Sources extends Tool {
   _renderCode() {
     const data = this._data
 
+    this._renderHtml(`<div class="${c('code')}"></div>`, false)
+
     let code = data.val
     const len = data.val.length
 
+    if (len > MAX_RAW_LEN) {
+      code = truncate(code, MAX_RAW_LEN)
+    }
+
     // If source code too big, don't process it.
     if (len < MAX_BEAUTIFY_LEN) {
       const curTheme = evalCss.getCurTheme()
@@ -189,44 +195,13 @@ export default class Sources extends Tool {
       code = escape(code)
     }
 
-    const showLineNum = len < MAX_LINE_NUM_LEN && this._showLineNum
-
-    if (showLineNum) {
-      code = code.split('\n').map((line, idx) => {
-        if (trim(line) === '') line = '&nbsp;'
-
-        return {
-          idx: idx + 1,
-          val: line,
-        }
-      })
-    }
-
-    let html
-    if (showLineNum) {
-      const lineNum = map(code, ({ idx }) => {
-        return `<div class="${c('line-num')}">${idx}</div>`
-      }).join('')
-      const codeLine = map(code, ({ val }) => {
-        return `<pre class="${c('code-line')}">${val}</pre>`
-      }).join('')
-      html = `<div class="${c('code-wrapper')}">
-        <table class="${c('code')}">
-          <tbody>
-            <tr>
-              <td class="${c('gutter')}">${lineNum}</td>
-              <td class="${c('content')}">${codeLine}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>`
-    } else {
-      html = `<div class="${c('code-wrapper')}">
-        <pre class="${c('code')}">${code}</pre>
-      </div>`
-    }
-
-    this._renderHtml(html)
+    const container = this._$el.find(c('.code')).get(0)
+    new LunaTextViewer(container, {
+      text: code,
+      escape: false,
+      wrapLongLines: true,
+      showLineNumbers: data.val.length < MAX_LINE_NUM_LEN && this._showLineNum,
+    })
   }
   _renderObj() {
     // Using cache will keep binding events to the same elements.
@@ -251,9 +226,23 @@ export default class Sources extends Tool {
     objViewer.set(val)
   }
   _renderRaw() {
+    const data = this._data
+
     this._renderHtml(`<div class="${c('raw-wrapper')}">
-      <div class="${c('raw')}">${escape(this._data.val)}</div>
+      <div class="${c('raw')}"></div>
     </div>`)
+
+    let val = data.val
+    const container = this._$el.find(c('.raw')).get(0)
+    if (val.length > MAX_RAW_LEN) {
+      val = truncate(val, MAX_RAW_LEN)
+    }
+
+    new LunaTextViewer(container, {
+      text: val,
+      wrapLongLines: true,
+      showLineNumbers: val.length < MAX_LINE_NUM_LEN && this._showLineNum,
+    })
   }
   _renderIframe() {
     this._renderHtml(`<iframe src="${escape(this._data.val)}"></iframe>`)
@@ -267,5 +256,6 @@ export default class Sources extends Tool {
   }
 }
 
-const MAX_BEAUTIFY_LEN = 100000
-const MAX_LINE_NUM_LEN = 400000
+const MAX_BEAUTIFY_LEN = 30000
+const MAX_LINE_NUM_LEN = 80000
+const MAX_RAW_LEN = 100000

src/Sources/Sources.scss

@@ -11,35 +11,9 @@
     width: 100%;
     min-height: 100%;
   }
-  .raw {
-    font-size: $font-size-s;
-    user-select: text;
-    padding: $padding;
-  }
+  .raw,
   .code {
-    font-size: $font-size-s;
-    .content * {
-      user-select: text;
-    }
-  }
-  pre.code {
-    padding: $padding;
-  }
-  table.code {
-    border-collapse: collapse;
-    .gutter {
-      background: var(--background);
-      color: var(--primary);
-    }
-    .line-num {
-      border-right: 1px solid var(--border);
-      padding: 0 3px 0 5px;
-      text-align: right;
-    }
-    .code-line {
-      padding: 0 4px;
-      white-space: pre;
-    }
+    height: 100%;
   }
   .image {
     font-size: $font-size-s;

src/eruda.js

@@ -29,7 +29,13 @@ import evalCss from './lib/evalCss'
 import chobitsu from './lib/chobitsu'
 
 export default {
-  init({ container, tool, autoScale = true, useShadowDom = true, defaults = {} } = {}) {
+  init({
+    container,
+    tool,
+    autoScale = true,
+    useShadowDom = true,
+    defaults = {},
+  } = {}) {
     if (this._isInit) return
 
     this._isInit = true
@@ -171,8 +177,13 @@ export default {
       if (shadowRoot) {
         // font-face doesn't work inside shadow dom.
         evalCss.container = document.head
-        evalCss(require('./style/icon.css') +
-        require('luna-console/luna-console.css') + require('luna-object-viewer/luna-object-viewer.css') + require('luna-dom-viewer/luna-dom-viewer.css'))
+        evalCss(
+          require('./style/icon.css') +
+            require('luna-console/luna-console.css') +
+            require('luna-object-viewer/luna-object-viewer.css') +
+            require('luna-dom-viewer/luna-dom-viewer.css') +
+            require('luna-text-viewer/luna-text-viewer.css')
+        )
 
         el = document.createElement('div')
         shadowRoot.appendChild(el)
@@ -181,13 +192,13 @@ export default {
     }
 
     if (!this._shadowRoot) {
-      el = document.createElement('div') 
+      el = document.createElement('div')
       container.appendChild(el)
     }
 
     extend(el, {
       className: 'eruda-container __chobitsu-hide__',
-      contentEditable: false
+      contentEditable: false,
     })
 
     // http://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
@@ -197,7 +208,7 @@ export default {
   },
   _initDevTools(defaults) {
     this._devTools = new DevTools(this._$el, {
-      defaults
+      defaults,
     })
   },
   _initStyle() {
@@ -214,15 +225,16 @@ export default {
 
     evalCss(
       require('./style/reset.scss') +
-      require('luna-object-viewer/luna-object-viewer.css') +
-      require('luna-console/luna-console.css') +
-      require('luna-notification/luna-notification.css') + 
-      require('luna-data-grid/luna-data-grid.css') +
-      require('luna-dom-viewer/luna-dom-viewer.css') +
-      require('luna-modal/luna-modal.css') +
-      require('luna-tab/luna-tab.css') +
-      require('./style/style.scss') +
-      require('./style/icon.css')
+        require('luna-object-viewer/luna-object-viewer.css') +
+        require('luna-console/luna-console.css') +
+        require('luna-notification/luna-notification.css') +
+        require('luna-data-grid/luna-data-grid.css') +
+        require('luna-dom-viewer/luna-dom-viewer.css') +
+        require('luna-modal/luna-modal.css') +
+        require('luna-tab/luna-tab.css') +
+        require('luna-text-viewer/luna-text-viewer.css') +
+        require('./style/style.scss') +
+        require('./style/icon.css')
     )
   },
   _initEntryBtn() {
@@ -246,14 +258,14 @@ export default {
       'resources',
       'sources',
       'info',
-      'snippets'
+      'snippets',
     ]
   ) {
     tool = toArr(tool)
 
     const devTools = this._devTools
 
-    tool.forEach(name => {
+    tool.forEach((name) => {
       const Tool = this[upperFirst(name)]
       try {
         if (Tool) devTools.add(new Tool())
@@ -269,5 +281,5 @@ export default {
     })
 
     devTools.showTool(tool[0] || 'settings')
-  }
+  },
 }

src/style/luna.scss

@@ -332,3 +332,26 @@
 .luna-tab-slider {
   background: var(--accent);
 }
+
+.luna-text-viewer {
+  color: var(--foreground);
+  border: none;
+  background: var(--background);
+  font-size: $font-size-s;
+  .luna-text-viewer-line-code {
+    user-select: text;
+    * {
+      user-select: text;
+    }
+  }
+  .luna-text-viewer-copy,
+  .luna-text-viewer-line-number {
+    border-color: var(--border);
+  }
+  .luna-text-viewer-copy .luna-text-viewer-icon-check {
+    color: var(--accent);
+  }
+  .luna-text-viewer-copy {
+    background-color: var(--background);
+  }
+}

test/eruda.js

@@ -1,12 +1,12 @@
-describe('devTools', function() {
-  describe('init', function() {
-    it('destroy', function() {
+describe('devTools', function () {
+  describe('init', function () {
+    it('destroy', function () {
       eruda.destroy()
 
       expect($('#eruda')).toHaveLength(0)
     })
 
-    it('init', function() {
+    it('init', function () {
       let container = document.createElement('div')
       container.id = 'eruda'
       document.body.appendChild(container)
@@ -14,7 +14,7 @@ describe('devTools', function() {
       eruda.init({
         container: container,
         tool: [],
-        useShadowDom: false
+        useShadowDom: false,
       })
 
       let $eruda = $('#eruda')
@@ -22,49 +22,49 @@ describe('devTools', function() {
     })
   })
 
-  describe('tool', function() {
-    it('add', function() {
+  describe('tool', function () {
+    it('add', function () {
       eruda.add({
         name: 'test',
-        init: function($el) {
+        init: function ($el) {
           this._$el = $el
           $el.html('Test Plugin')
-        }
+        },
       })
 
       expect($('.eruda-test')).toContainText('Test Plugin')
     })
 
-    it('show', function() {
+    it('show', function () {
       let $tool = $('.eruda-test')
       expect($tool).toBeHidden()
       eruda.show('test')
       expect($tool).toHaveCss({ display: 'block' })
     })
 
-    it('remove', function() {
+    it('remove', function () {
       eruda.remove('test')
       expect($('.eruda-test')).toHaveLength(0)
     })
   })
 
-  describe('display', function() {
-    it('show', function() {
+  describe('display', function () {
+    it('show', function () {
       eruda.show()
       expect($('.eruda-dev-tools')).toHaveCss({ display: 'block' })
     })
 
-    it('hide', function(done) {
+    it('hide', function (done) {
       eruda.hide()
-      setTimeout(function() {
+      setTimeout(function () {
         expect($('.eruda-dev-tools')).toBeHidden()
         done()
       }, 500)
     })
   })
 
-  describe('scale', function() {
-    it('get', function() {
+  describe('scale', function () {
+    it('get', function () {
       eruda.scale(1)
       expect(eruda.scale()).toBe(1)
     })