chore: update luna console

2025-11-06 04:21:11 +08:00 · 2022-11-22 18:17:08 +08:00
parent dce1aefdd7
commit d6cbc5013b
9 changed files with 247 additions and 57 deletions
--- a/build/webpack.base.js
+++ b/build/webpack.base.js
@@ -17,7 +17,13 @@ const postcssLoader = {
    plugins: [
      prefixer({
        prefix: '_',
-        ignore: [/luna-console/, /luna-object-viewer/, /luna-notification/],
+        ignore: [
+          /luna-console/,
+          /luna-object-viewer/,
+          /luna-notification/,
+          /luna-data-grid/,
+          /luna-dom-viewer/,
+        ],
      }),
      autoprefixer,
      clean(),
--- a/package.json
+++ b/package.json
@@ -69,7 +69,9 @@
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^5.0.0",
    "licia": "^1.37.0",
-    "luna-console": "^0.3.1",
+    "luna-console": "^1.0.0",
+    "luna-data-grid": "^0.2.0",
+    "luna-dom-viewer": "^1.0.2",
    "luna-notification": "^0.1.4",
    "luna-object-viewer": "^0.2.1",
    "node-sass": "^7.0.1",
--- a/src/Elements/Elements.scss
+++ b/src/Elements/Elements.scss
@@ -12,11 +12,13 @@
    @include overflow-auto(x);
    background: var(--darker-background);
    color: var(--primary);
-    padding: $padding;
+    padding: 0 $padding;
+    height: 40px;
+    line-height: 40px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
-    font-size: $font-size-s;
+    font-size: $font-size;
    li {
      display: inline-block;
      .parent {
@@ -27,9 +29,9 @@
      }
    }
    .icon-arrow-right {
-      font-size: 8px;
+      font-size: $font-size-s;
      position: relative;
-      top: -1px;
+      top: 1px;
    }
  }
  .breadcrumb {
--- a/src/eruda.js
+++ b/src/eruda.js
@@ -166,7 +166,7 @@ export default {
        // 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-console/luna-console.css') + require('luna-object-viewer/luna-object-viewer.css') + require('luna-dom-viewer/luna-dom-viewer.css'))

        el = document.createElement('div')
        shadowRoot.appendChild(el)
@@ -203,12 +203,14 @@ 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('./style/style.scss') +
-        require('./style/reset.scss') +
-        require('./style/icon.css')
+      require('./style/icon.css')
    )
  },
  _initEntryBtn() {
--- a/src/lib/fione.js
+++ b/src/lib/fione.js
@@ -1008,7 +1008,14 @@ export var ltrim = _.ltrim = (function (exports) {
    var regSpace = /^\s+/;

    exports = function(str, chars) {
-        if (chars == null) return str.replace(regSpace, '');
+        if (chars == null) {
+            if (str.trimLeft) {
+                return str.trimLeft();
+            }
+
+            return str.replace(regSpace, '');
+        }
+
        var start = 0;
        var len = str.length;
        var charLen = chars.length;
@@ -1765,10 +1772,15 @@ export var rtrim = _.rtrim = (function (exports) {
    /* typescript
     * export declare function rtrim(str: string, chars?: string | string[]): string;
     */
-    var regSpace = /\s+$/;
-
    exports = function(str, chars) {
-        if (chars == null) return str.replace(regSpace, '');
+        if (chars == null) {
+            if (str.trimRight) {
+                return str.trimRight();
+            }
+
+            chars = ' \r\n\t\f\v';
+        }
+
        var end = str.length - 1;
        var charLen = chars.length;
        var found = true;
@@ -1821,10 +1833,11 @@ export var trim = _.trim = (function (exports) {
     * ltrim rtrim 
     */

-    var regSpace = /^\s+|\s+$/g;
-
    exports = function(str, chars) {
-        if (chars == null) return str.replace(regSpace, '');
+        if (chars == null && str.trim) {
+            return str.trim();
+        }
+
        return ltrim(rtrim(str, chars), chars);
    };

--- a/src/style/luna.scss
+++ b/src/style/luna.scss
@@ -46,6 +46,17 @@
  }
 }

+.luna-console-log-container {
+  &.luna-console-selected {
+    .luna-console-log-item {
+      background: var(--contrast);
+      &:not(.luna-console-error):not(.luna-console-warn) {
+        border-color: var(--border);
+      }
+    }
+  }
+}
+
 .luna-console-log-item {
  border-bottom-color: var(--border);
  color: var(--foreground);
@@ -64,7 +75,8 @@
    }
  }
  .luna-console-count {
-    background: var(--text-color);
+    color: var(--select-foreground);
+    background: var(--highlight);
  }
  &.luna-console-warn {
    color: var(--console-warn-foreground);
@@ -79,36 +91,18 @@
      background: var(--console-error-foreground);
    }
  }
-  &.luna-console-table {
-    table {
-      color: var(--foreground);
-      th {
-        background: var(--darker-background);
-      }
-      th,
-      td {
-        border-color: var(--border);
-      }
-      tr:nth-child(even) {
-        background: var(--contrast);
-      }
-    }
-  }
  .luna-console-code {
    @include luna-console-highlight();
  }
 }

-.luna-console-abstract {
+.luna-console-preview {
  @include luna-console-highlight();
 }

 .luna-object-viewer {
  color: var(--primary);
  font-size: 12px !important;
-  & > li {
-    padding: $padding 0 !important;
-  }
 }
 .luna-object-viewer-null {
  color: var(--operator-color);
@@ -161,3 +155,80 @@
 .luna-notification-lower {
  margin-top: 10px;
 }
+
+.luna-data-grid {
+  color: var(--foreground);
+  background: var(--background);
+  border-color: var(--border);
+  th,
+  td {
+    border-color: var(--border);
+  }
+  th {
+    background: var(--darker-background);
+    &.luna-data-grid-sortable {
+      &:hover {
+        background: var(--darker-background);
+      }
+    }
+  }
+  .luna-data-grid-data-container {
+    tr:nth-child(even) {
+      background: var(--contrast);
+    }
+  }
+}
+
+.luna-dom-viewer {
+  color: var(--foreground);
+  .luna-dom-viewer-html-tag,
+  .luna-dom-viewer-tag-name {
+    color: var(--tag-name-color);
+  }
+  .luna-dom-viewer-attribute-name {
+    color: var(--attribute-name-color);
+  }
+  .luna-dom-viewer-attribute-value {
+    color: var(--string-color);
+  }
+  .luna-dom-viewer-html-comment {
+    color: var(--comment-color);
+  }
+  .luna-dom-viewer-selection {
+    background: var(--highlight);
+  }
+  .luna-dom-viewer-text-node {
+    .luna-dom-viewer-key {
+      color: var(--var-color);
+    }
+    .luna-dom-viewer-number {
+      color: var(--number-color);
+    }
+    .luna-dom-viewer-null {
+      color: var(--operator-color);
+    }
+    .luna-dom-viewer-string {
+      color: var(--string-color);
+    }
+    .luna-dom-viewer-boolean {
+      color: var(--keyword-color);
+    }
+    .luna-dom-viewer-special {
+      color: var(--operator-color);
+    }
+    .luna-dom-viewer-keyword {
+      color: var(--keyword-color);
+    }
+    .luna-dom-viewer-operator {
+      color: var(--operator-color);
+    }
+    .luna-dom-viewer-comment {
+      color: var(--comment-color);
+    }
+  }
+}
+
+.luna-dom-viewer-children {
+  margin: 0;
+  padding-left: 15px !important;
+}
--- a/src/style/reset.scss
+++ b/src/style/reset.scss
@@ -81,8 +81,6 @@
    padding: 0;
    border: 0;
    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
  }
  article,
  aside,
--- a/test/manual.html
+++ b/test/manual.html
@@ -134,20 +134,27 @@
      addClickEvent('log', () => {
        console.clear()
        console.log('log')
+        for (let i = 0; i < 10; i++) {
+          console.log('repeat log')
+        }
        console.warn('warn')
        console.error(Error('test'))
        console.info('info')
        console.debug('debug')
-        console.dir(document.createElement('div'))
        console.time('test')
        console.timeEnd('test')
-        console.count('eruda')
-        console.count('eruda')
+        console.count('luna')
+        console.count('luna')
        console.assert(true, 'assert msg')
        var site1 = { name: 'Runoob', site: 'www.runoob.com' }
        var site2 = { name: 'Google', site: 'www.google.com' }
        var site3 = { name: 'Taobao', site: 'www.taobao.com' }
        console.table([site1, site2, site3], ['site'])
+        const el = util.toEl(
+          '<div class="test"><div class="test-inner"></div></div>'
+        )
+        console.log('test dom', el)
+        console.dir(el)
        console.log('%c Oh my heavens!', 'background: #222; color: #bada55')
        console.log('This is the outer level')
        console.group()
@@ -159,9 +166,12 @@
        console.log('Back to level 2')
        console.groupEnd()
        console.log('Back to the outer level')
-        console.log(navigator)
-        console.log(location)
-        console.log(performance)
+        console.log(
+          'navigator: %o location: %o performance: %o',
+          navigator,
+          location,
+          performance
+        )
        var arr = []
        for (var i = 0; i < 10000; i++) arr.push(i)
        console.log(arr)
--- a/test/util.js
+++ b/test/util.js
@@ -571,9 +571,10 @@
    _.evalCss = (function (exports) {
        /* Load css into page.
         *
-         * |Name|Desc    |
-         * |----|--------|
-         * |css |Css code|
+         * |Name  |Desc         |
+         * |------|-------------|
+         * |css   |Css code     |
+         * |return|Style element|
         */

        /* example
@@ -581,13 +582,14 @@
         */

        /* typescript
-         * export declare function evalCss(css: string): void;
+         * export declare function evalCss(css: string): HTMLStyleElement;
         */
        exports = function(css) {
            var style = document.createElement('style');
            style.textContent = css;
            style.type = 'text/css';
            document.head.appendChild(style);
+            return style;
        };

        return exports;
@@ -1546,6 +1548,31 @@
        return exports;
    })({});

+    /* ------------------------------ isSymbol ------------------------------ */
+
+    var isSymbol = _.isSymbol = (function (exports) {
+        /* Check if value is a symbol.
+         *
+         * |Name  |Desc                     |
+         * |------|-------------------------|
+         * |val   |Value to check           |
+         * |return|True if value is a symbol|
+         */
+
+        /* example
+         * isSymbol(Symbol('test')); // -> true
+         */
+
+        /* typescript
+         * export declare function isSymbol(val: any): boolean;
+         */
+        exports = function(val) {
+            return typeof val === 'symbol';
+        };
+
+        return exports;
+    })({});
+
    /* ------------------------------ lowerCase ------------------------------ */

    var lowerCase = _.lowerCase = (function (exports) {
@@ -1600,7 +1627,14 @@
        var regSpace = /^\s+/;

        exports = function(str, chars) {
-            if (chars == null) return str.replace(regSpace, '');
+            if (chars == null) {
+                if (str.trimLeft) {
+                    return str.trimLeft();
+                }
+
+                return str.replace(regSpace, '');
+            }
+
            var start = 0;
            var len = str.length;
            var charLen = chars.length;
@@ -2826,10 +2860,15 @@
        /* typescript
         * export declare function rtrim(str: string, chars?: string | string[]): string;
         */
-        var regSpace = /\s+$/;
-
        exports = function(str, chars) {
-            if (chars == null) return str.replace(regSpace, '');
+            if (chars == null) {
+                if (str.trimRight) {
+                    return str.trimRight();
+                }
+
+                chars = ' \r\n\t\f\v';
+            }
+
            var end = str.length - 1;
            var charLen = chars.length;
            var found = true;
@@ -2882,10 +2921,11 @@
         * ltrim rtrim 
         */

-        var regSpace = /^\s+|\s+$/g;
-
        exports = function(str, chars) {
-            if (chars == null) return str.replace(regSpace, '');
+            if (chars == null && str.trim) {
+                return str.trim();
+            }
+
            return ltrim(rtrim(str, chars), chars);
        };

@@ -3112,7 +3152,7 @@

            if (type === 'GET') {
                data = query.stringify(data);
-                url += url.indexOf('?') > -1 ? '&' + data : '?' + data;
+                if (data) url += url.indexOf('?') > -1 ? '&' + data : '?' + data;
            } else if (options.contentType === 'application/x-www-form-urlencoded') {
                if (isObj(data)) data = query.stringify(data);
            } else if (options.contentType === 'application/json') {
@@ -3207,7 +3247,7 @@
         */

        /* dependencies
-         * castPath isUndef 
+         * castPath isUndef toStr isSymbol isStr 
         */

        exports = function(obj, path, val) {
@@ -3217,6 +3257,11 @@
            prop = path.shift();

            while (!isUndef(prop)) {
+                // #25
+                if (!isStr(prop) && !isSymbol(prop)) {
+                    prop = toStr(prop);
+                }
+
                if (
                    prop === '__proto__' ||
                    prop === 'constructor' ||
@@ -3874,5 +3919,46 @@
        return exports;
    })({});

+    /* ------------------------------ toEl ------------------------------ */
+    _.toEl = (function (exports) {
+        /* Convert html string to dom elements.
+         *
+         * There should be only one root element.
+         *
+         * |Name  |Desc        |
+         * |------|------------|
+         * |str   |Html string |
+         * |return|Html element|
+         */
+
+        /* example
+         * toEl('<div>test</div>');
+         */
+
+        /* typescript
+         * export declare function toEl(str: string): Element;
+         */
+        var doc = document;
+
+        exports = function(str) {
+            var fragment = doc.createElement('body');
+            fragment.innerHTML = str;
+            return fragment.childNodes[0];
+        };
+
+        if (doc.createRange && doc.body) {
+            var range = doc.createRange();
+            range.selectNode(doc.body);
+
+            if (range.createContextualFragment) {
+                exports = function(str) {
+                    return range.createContextualFragment(str).childNodes[0];
+                };
+            }
+        }
+
+        return exports;
+    })({});
+
    return _;
 }));