Merge pull request #568 from Tencent/dev

v3.14.7
Tencent · Sep 23, 2022 · 5933fb4 · 5933fb4
2 parents e56370c + 61c7061
commit 5933fb4
Show file tree

Hide file tree

Showing 26 changed files with 278 additions and 142 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,19 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
+## 3.14.7 (2022-09-23)
+
+- `Perf(Log)` Optimize rendering performance when adding logs. (PR #567)
+- `Fix(Core)` Fix plugin panel sorting error when setting `pluginOrder` option. (issue #559)
+- `Fix(Core)` Fix intervention error caused by `preventDefault` in `Touch` events. (issue #546)
+- `Fix(Log)` Fix `window.onerror` missing line breaks.
+- `Fix(Log)` Fix unclickable `vc-cmd-clear-btn` on iOS Safari. (PR #564)
+- `Fix(Log)` Fix a typo that misjudged circular reference objects. (issue #566)
+- `Fix(Log|Network)` Copy objects or arrays as standard JSON format. (issue #547)
+- `Fix(Network)` Fix `Fetch` stays in pending status when `window` is proxied. (issue #556)
+- `Fix(Storage)` Fix storage pannel sorting error when setting `storage.defaultStorages` option. (issue #560)
+- `Chore` Add option `env['no-core-js']` to disable core-js polyfill. (PR #562)
+
+
 ## 3.14.6 (2022-04-14)
 
 - `Fix(Log)` Fix logs lost tracking when adding a new vConsole after destroying the old one.

diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
@@ -1,5 +1,19 @@
 [English](./CHANGELOG.md) | 简体中文
 
+## 3.14.7 (2022-09-23)
+
+- `Perf(Log)` 优化打印日志时的性能。 (PR #567)
+- `Fix(Core)` 修复因设置 `pluginOrder` 导致插件面板排序错误的问题。 (issue #559)
+- `Fix(Core)` 修复因 `Touch` 事件中的 `preventDefault` 导致的 intervention 错误。 (issue #546)
+- `Fix(Log)` 修复 `window.onerror` 丢失换行的问题。
+- `Fix(Log)` 修复清除命令行按钮在 iOS Safari 中无法点击的问题。 (PR #564)
+- `Fix(Log)` 修复一处误判循环引用对象的笔误。 (issue #566)
+- `Fix(Log|Network)` 以标准 JSON 格式复制对象或数组。 (issue #547)
+- `Fix(Network)` 修复因 `window` 对象被代理导致 `Fetch` 一直为 pending 状态的问题。 (issue #556)
+- `Fix(Storage)` 修复因设置 `storage.defaultStorages` 导致 Storage 面板排序错误的问题。 (issue #560)
+- `Chore` 添加 `env['no-core-js']` 选项来停用构建时使用 core-js polyfill。 (PR #562)
+
+
 ## 3.14.6 (2022-04-14)
 
 - `Fix(Log)` 修复当销毁后再次初始化 vConsole 时失去追踪 logs 的问题。

diff --git a/build/dummy.js b/build/dummy.js
@@ -0,0 +1 @@
+export default {}
diff --git a/dev/common.html b/dev/common.html
@@ -32,6 +32,7 @@
   // maxLogNumber: 1000,
   // disableLogScrolling: true,
   // theme: 'dark',
+  // pluginOrder: ['network'],
   onReady: function() {
     console.log('vConsole: onReady');
   },

diff --git a/dev/log.html b/dev/log.html
@@ -13,10 +13,17 @@
 </head>
 <body ontouchstart>
   <div id="page" class="page">
+    <div class="section">
+    <div class="hd">String</div>
+
+      <a onclick="simpleStrings()" href="javascript:;" class="weui_btn weui_btn_default">Simple Strings</a>
+      <a onclick="printf()" href="javascript:;" class="weui_btn weui_btn_default">Printf</a>
+      <a onclick="styling()" href="javascript:;" class="weui_btn weui_btn_default">Styling</a>
+    </div>
+
     <div class="section">
       <div class="hd">Object</div>
 
-      <a onclick="(() => console.log('Hello vConsole!'))()" href="javascript:;" class="weui_btn weui_btn_default">A Simple String</a>
       <a onclick="normalObject()" href="javascript:;" class="weui_btn weui_btn_default">Common Object</a>
       <a onclick="largeObject()" href="javascript:;" class="weui_btn weui_btn_default">Large Object</a>
       <a onclick="circularObject()" href="javascript:;" class="weui_btn weui_btn_default">Circular Object & Array</a>
@@ -120,6 +127,24 @@
   bc: [1, 2, 3],
 };
 
+function simpleStrings() {
+  console.log('Hello vConsole!');
+  console.log(`Line 1,
+  Line 2`);
+}
+
+function printf() {
+  console.log('Hi %s, Im %s', 'Foo', 'Bar'); // Hi Foo, Im Bar
+  console.log('I had %d cakes', 3); // I had 3 cakes
+  console.log('The %o is large', aa); // The [[aa]] is large
+}
+
+function styling() {
+  console.log('%c blue %c red', 'color:blue', 'color:red'); // blue red
+  console.log('%c FOO', 'font-weight:bold', 'bar'); // FOO bar
+  console.log('%c Foo %c bar', 'color:red'); // Foo %c bar
+}
+
 function differentPanelLog() {
   console.log('[default]', 'This log should be shown in Log panel.');
   console.log('[DEFAULT]', 'Switch to System tab to see next log.');
@@ -298,7 +323,7 @@
     'key': 'foo\nbar\tyoo',
     "-->\tyo\n'\"/><div>": "-->\n'\"/><iframe>"
   };
-  console.log('XSS str:', "-->\tyo\n'\"/><iframe>");
+  console.log('XSS str:', "-->\tyo\n'\"/><iframe><i>");
   console.log(arr);
   console.log(obj);
 }

diff --git a/dev/storage.html b/dev/storage.html
@@ -18,6 +18,7 @@
     <a onclick="xssStorage()" href="javascript:;" class="weui_btn weui_btn_default">XSS</a>
     <a onclick="defaultStoragesClear()" href="javascript:;" class="weui_btn weui_btn_default">defaultStorages: clear</a>
     <a onclick="defaultStoragesAdd()" href="javascript:;" class="weui_btn weui_btn_default">defaultStorages: add</a>
+    <a onclick="defaultStoragesUpdate()" href="javascript:;" class="weui_btn weui_btn_default">defaultStorages: update</a>
   </div>
 </body>
 </html>
@@ -28,7 +29,7 @@
 window.vConsole = new window.VConsole({
   // disableLogScrolling: true,
   storage: {
-    // defaultStorages: [],
+    // defaultStorages: ['sessionStorage', 'cookies', 'localStorage'],
   },
   onReady: function() {
     console.log('vConsole is ready.');
@@ -140,4 +141,8 @@
   window.wx = {};
   vConsole.setOption('storage.defaultStorages', ['wxStorage', 'localStorage']);
 }
+
+function defaultStoragesUpdate() {
+  vConsole.setOption('storage.defaultStorages', ['localStorage', 'unknownStorage', 'sessionStorage']);
+}
 </script>
diff --git a/doc/tutorial.md b/doc/tutorial.md
@@ -127,13 +127,13 @@ console.log('%c FOO', 'font-weight:bold', 'bar'); // FOO bar
 console.log('%c Foo %c bar', 'color:red'); // Foo %c bar
 ```
 
-> Note that only first parameter support `%c` format, and the following parameter(s) will be used as HTML style to fill `%c`, and the remain `%c` or parameters will be shown as normal string.
+> Note that only the first parameter support `%c` format, and the `%c` must be followed by a space. The following parameter(s) will be used as HTML style to fill `%c`, and the remain `%c` or parameters will be shown as normal string.
 
 ---
 
 ### Using string substitutions
 
-Use `%s, %d, %o` to output log with formatting.
+Use `%s, %d, %o` to output a log with formatting. The pattern must be followed by a space.
 
 - `%s`: Output as a string. Non-string objects will be converted into strings.
 - `%d`: Output as a number.

diff --git a/doc/tutorial_CN.md b/doc/tutorial_CN.md
@@ -123,15 +123,15 @@ console.log('%c FOO', 'font-weight:bold', 'bar'); // FOO bar
 console.log('%c Foo %c bar', 'color:red'); // Foo %c bar
 ```
 
-> 只有第一个参数支持 `%c` 格式，一旦出现 `%c` 格式，后续的字符串参数将作为 HTML style 样式来替换 `%c`；未被替换的 `%c`、剩余的参数，将作为默认日志照常输出。
+> 只有第一个参数支持 `%c` 格式，且 `%c` 后必须带空格。一旦出现 `%c` 格式，后续的字符串参数将作为 HTML style 样式来替换 `%c`；未被替换的 `%c`、剩余的参数，将作为默认日志照常输出。
 
 
 ---
 
 
 ### 使用字符串替换
 
-可使用 `%s, %d, %o` 来格式化输出。
+可使用 `%s, %d, %o` 来格式化输出，关键字后必须带空格。
 
 - `%s`：输出为字符串。非字符串对象会被转换成字符串。
 - `%d`：输出为数字。

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vconsole",
-  "version": "3.14.6",
+  "version": "3.14.7",
   "description": "A lightweight, extendable front-end developer tool for mobile web page.",
   "homepage": "https://github.com/Tencent/vConsole",
   "files": [

diff --git a/src/component/iconCopy.svelte b/src/component/iconCopy.svelte
@@ -15,7 +15,12 @@
       text = handler(content) || '';
     } else {
       if (tool.isObject(content) || tool.isArray(content)) {
-        text = tool.safeJSONStringify(content);
+        text = tool.safeJSONStringify(content, {
+          maxDepth: 10,
+          keyMaxLen: 10000,
+          pretty: false,
+          standardJSON: true,
+        });
       } else {
         text = content;
       }

diff --git a/src/core/core.svelte b/src/core/core.svelte
@@ -25,7 +25,7 @@
   export let switchButtonPosition = { x: 0, y: 0 };
   export let activedPluginId = '';
   export let pluginList: { [id: string]: IPlugin } = {};
-  export let divContentInner: HTMLElement = undefined;
+  export let divContent: HTMLElement;
 
 
   /*************************************
@@ -34,7 +34,6 @@
 
 	const dispatch = createEventDispatcher();
   let preventContentMove = false;
-  let divContent: HTMLElement;
   let unsubscribe: ReturnType<typeof contentStore.subscribe>;
   let fontSize = '';
   let showMain = false;
@@ -294,9 +293,9 @@
   class:vc-toggle={showMain}
   style="{fontSize ? 'font-size:' + fontSize + ';' : ''}"
   data-theme={theme}
-  on:touchstart|capture={mockTapEvent.touchStart}
-  on:touchmove|capture={mockTapEvent.touchMove}
-  on:touchend|capture={mockTapEvent.touchEnd}
+  on:touchstart|capture|nonpassive={mockTapEvent.touchStart}
+  on:touchmove|capture|nonpassive={mockTapEvent.touchMove}
+  on:touchend|capture|nonpassive={mockTapEvent.touchEnd}
 >
   <SwitchButton
     bind:show={showSwitchButton}
@@ -347,7 +346,6 @@
           id="__vc_plug_{plugin.id}"
           class="vc-plugin-box"
           class:vc-actived="{plugin.id === activedPluginId}"
-          bind:this={divContentInner}
         ></div>
       {/each}
     </div>

diff --git a/src/core/core.ts b/src/core/core.ts
@@ -302,13 +302,20 @@ export class VConsole {
       this.compInstance.pluginList[plugin.id].hasTabPanel = true;
       // render tabbox
       if (!!tabboxHTML) {
-        if (tool.isString(tabboxHTML)) {
-          this.compInstance.divContentInner.innerHTML += tabboxHTML;
-        } else if (tool.isFunction(tabboxHTML.appendTo)) {
-          tabboxHTML.appendTo(this.compInstance.divContentInner);
-        } else if (tool.isElement(tabboxHTML)) {
-          this.compInstance.divContentInner.insertAdjacentElement('beforeend', tabboxHTML);
-        }
+        // when built-in plugins are initializing in the same time,
+        // plugin's `.vc-plugin-box` element will be re-order by `pluginOrder` option,
+        // so the innerHTML should be inserted with a delay 
+        // to make sure getting the right `.vc-plugin-box`. (issue #559)
+        setTimeout(() => {
+          const divContentInner = document.querySelector('#__vc_plug_' + plugin.id);
+          if (tool.isString(tabboxHTML)) {
+            divContentInner.innerHTML += tabboxHTML;
+          } else if (tool.isFunction(tabboxHTML.appendTo)) {
+            tabboxHTML.appendTo(divContentInner);
+          } else if (tool.isElement(tabboxHTML)) {
+            divContentInner.insertAdjacentElement('beforeend', tabboxHTML);
+          }
+        }, 0);
       }
       this.compInstance.pluginList = this.compInstance.pluginList;
     });

diff --git a/src/core/switchButton.svelte b/src/core/switchButton.svelte
@@ -123,8 +123,8 @@
   class="vc-switch"
   style="right: {btnSwitchPos.x}px; bottom: {btnSwitchPos.y}px; display: {show ? 'block' : 'none'};"
   bind:this={btnSwitch}
-  on:touchstart={onTouchStart}
-  on:touchend={onTouchEnd}
-  on:touchmove={onTouchMove}
+  on:touchstart|nonpassive={onTouchStart}
+  on:touchend|nonpassive={onTouchEnd}
+  on:touchmove|nonpassive={onTouchMove}
   on:click
 >vConsole</div>
diff --git a/src/lib/tool.ts b/src/lib/tool.ts
@@ -185,6 +185,7 @@ type ISafeJSONStringifyOption = {
   maxDepth: number,
   keyMaxLen: number,
   pretty: boolean,
+  standardJSON: boolean,
   circularFinder: (val: any) => any,
 };
 const _safeJSONStringifyCircularFinder = () => {
@@ -227,11 +228,13 @@ const _safeJSONStringify = (obj, opt: ISafeJSONStringifyOption, _curDepth = 0) =
 
   const isCircular = opt.circularFinder(obj);
   if (isCircular) {
+    let circularText = '';
     if (isArray(obj)) {
-      opt.ret += '(Circular Array)';
-    } else if (isObject) {
-      opt.ret += `(Circular ${obj.constructor?.name || 'Object'})`;
+      circularText = '(Circular Array)';
+    } else if (isObject(obj)) {
+      circularText = `(Circular ${obj.constructor?.name || 'Object'})`;
     }
+    opt.ret += opt.standardJSON ? `"${circularText}"` : circularText;
     return;
   }
 
@@ -261,6 +264,8 @@ const _safeJSONStringify = (obj, opt: ISafeJSONStringifyOption, _curDepth = 0) =
       if (!isArray(obj)) {
         if (isObject(key) || isArray(key) || isSymbol(key)) {
           opt.ret += Object.prototype.toString.call(key);
+        } else if (isString(key) && opt.standardJSON) {
+          opt.ret += '"' + key + '"';
         } else {
           opt.ret += key;
         }
@@ -294,7 +299,7 @@ const _safeJSONStringify = (obj, opt: ISafeJSONStringifyOption, _curDepth = 0) =
 
     } catch (e) {
       // cannot stringify `value`, use a default text
-      opt.ret += '(...)';
+      opt.ret += opt.standardJSON ? '"(PARSE_ERROR)"' : '(PARSE_ERROR)';
     }
 
     if (opt.keyMaxLen > 0 && opt.ret.length >= opt.keyMaxLen * 10) {
@@ -311,12 +316,23 @@ const _safeJSONStringify = (obj, opt: ISafeJSONStringifyOption, _curDepth = 0) =
 /**
  * A safe `JSON.stringify` method. 
  */
-export function safeJSONStringify(obj, opt: { maxDepth?: number, keyMaxLen?: number, pretty?: boolean } = { maxDepth: -1, keyMaxLen: -1, pretty: false, }) {
+export function safeJSONStringify(obj, opt: {
+  maxDepth?: number,
+  keyMaxLen?: number,
+  pretty?: boolean,
+  standardJSON?: boolean,
+} = {
+  maxDepth: -1,
+  keyMaxLen: -1,
+  pretty: false,
+  standardJSON: false,
+}) {
   const option: ISafeJSONStringifyOption = Object.assign({
     ret: '',
     maxDepth: -1,
     keyMaxLen: -1,
     pretty: false,
+    standardJSON: false,
     circularFinder: _safeJSONStringifyCircularFinder(),
   }, opt);
   _safeJSONStringify(obj, option);

diff --git a/src/log/default.ts b/src/log/default.ts
@@ -48,17 +48,18 @@ export class VConsoleDefaultPlugin extends VConsoleLogPlugin {
     this.onErrorHandler = this.onErrorHandler ? this.onErrorHandler : (event) => {
       let msg = event.message;
       if (event.filename) {
-        msg += '\n' + event.filename.replace(location.origin, '');
-      }
-      if (event.lineno || event.colno) {
-        msg += ':' + event.lineno + ':' + event.colno;
+        msg += '\\n\\t' + event.filename.replace(location.origin, '');
+        if (event.lineno || event.colno) {
+          msg += ':' + event.lineno + ':' + event.colno;
+        }
       }
       // print error stack info
       const hasStack = !!event.error && !!event.error.stack;
       const stackInfo = (hasStack && event.error.stack.toString()) || '';
+      msg += '\\n' + stackInfo;
       this.model.addLog({
         type: 'error',
-        origData: [msg, stackInfo],
+        origData: [msg],
       }, { noOrig: true });
     };
     window.removeEventListener('error', this.onErrorHandler);