Merge pull request #529 from Tencent/dev

Maizify · web-flow · commit 5b2064de4b65 · 2022-04-06T11:40:29.000+08:00
v3.14.5
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
+## 3.14.5 (2022-04-06)
+
+- `Fix(Core)` Fix unexpected error when init vConsole twice in short time. (issue #525)
+- `Fix(Log)` Fix bug that `console.time | console.timeEnd` do not output log. (issue #523)
+- `Fix(Element)` Fix `undefined is not an object` error when updating attributes. (issue #526)
+- `Fix(Network)` Do not proxy response body reader when response is done.
+- `Chore` Fix typo that Svelte is not transpiled by Babel on Windows. (PR #528)
+
+
 ## 3.14.4 (2022-03-31)
 
 - `Fix(Network)` Fix CPU high load bug when response is a large string. (issue #515)
diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
@@ -1,5 +1,14 @@
 [English](./CHANGELOG.md) | 简体中文
 
+## 3.14.5 (2022-04-06)
+
+- `Fix(Core)` 修复极短时间内重复初始化 vConsole 导致的报错。 (issue #525)
+- `Fix(Log)` 修复 `console.time | console.timeEnd` 不输出日志的问题。 (issue #523)
+- `Fix(Element)` 修复更新 attributes 时引起的 `undefined is not an object` 错误。 (issue #526)
+- `Fix(Network)` 当请求完成后，不再代理 response body reader。
+- `Chore` 修复 Svelte 在 Windows 环境中未被 Babel 转义的问题。 (PR #528)
+
+
 ## 3.14.4 (2022-03-31)
 
 - `Fix(Network)` 修复回包超大时导致的卡死问题。 (issue #515)
diff --git a/dev/common.html b/dev/common.html
@@ -20,6 +20,7 @@
     <a onclick="setOption()" href="javascript:;" class="weui_btn weui_btn_default">setOption</a>
     <a onclick="destroy()" href="javascript:;" class="weui_btn weui_btn_default">Destroy</a>
     <a onclick="newVConsole()" href="javascript:;" class="weui_btn weui_btn_default">new VConsole</a>
+    <a onclick="existingId()" href="javascript:;" class="weui_btn weui_btn_default">Existing Id</a>
   </div>
 </body>
 </html>
@@ -105,4 +106,13 @@
   window.vConsole.destroy();
   console.log('vConsole is destroyed');
 }
+
+function existingId() {
+  window.vConsole.destroy();
+  const div = document.createElement('DIV');
+  div.id = '__vconsole';
+  document.body.append(div);
+
+  window.vConsole = new window.VConsole();
+}
 </script>
diff --git a/dev/log.html b/dev/log.html
@@ -129,12 +129,12 @@
 
 function logTime() {
   vConsole.show();
-  const label = 'aaa';
+  const label = 'ab';
   console.time(label);
-  console.log('Wait...');
-  setTimeout(() => {
-    console.timeEnd(label);
-  }, Math.ceil(Math.random() * 2000));
+  for (let i = 0; i < 10; i++) {
+    console.log('Wait...', i);
+  }
+  console.timeEnd(label);
 }
 
 function formattingLog() {
diff --git a/dev/network.html b/dev/network.html
@@ -8,6 +8,8 @@
   <link href="./lib/demo.css" rel="stylesheet"/>
 
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script src="https://unpkg.com/zepto/dist/zepto.min.js"></script>
+  <script src="https://unpkg.com/wavesurfer.js"></script>
   <script src="../dist/vconsole.min.js"></script>
 </head>
 <body ontouchstart>
@@ -45,8 +47,10 @@
       <a onclick="sendBeacon()" href="javascript:;" class="weui_btn weui_btn_default">sendBeacon</a>
       <a onclick="axiosRequest('GET')" href="javascript:;" class="weui_btn weui_btn_default">Axios: GET</a>
       <a onclick="axiosRequest('POST')" href="javascript:;" class="weui_btn weui_btn_default">Axios: POST</a>
+      <a onclick="zeptoRequest('POST')" href="javascript:;" class="weui_btn weui_btn_default">Zepto: POST</a>
       <a onclick="scrolling()" href="javascript:;" class="weui_btn weui_btn_default">Scrolling</a>
       <a onclick="crossDomain()" href="javascript:;" class="weui_btn weui_btn_default">Cross Domain</a>
+      <a onclick="testWavesurfer()" href="javascript:;" class="weui_btn weui_btn_default">Wavesurfer.js</a>
     </div>
 
     <div class="section">
@@ -113,8 +117,9 @@
   if (postType === 'json') {
     postData = JSON.stringify(postData);
   }
-  console.log('post data:', postData);
+  console.log(xhr.setRequestHeader);
   xhr.open('POST', `./data/${file}?method=fetchPost&c=中文`);
+  xhr.setRequestHeader.apply(xhr, ['custom-auth', 'foobar']);
   xhr.send(postData);
   // xhr.send(JSON.stringify({foo: 'bar', id: Math.random(), '<xss0>': '<xss1> XSS Attack!'}));
 }
@@ -173,7 +178,7 @@
 }
 
 function getFetchSimple() {
-  window.fetch('./data/large.json?type=fetchGet&id=' + Math.random()).then((data) => {
+  window.fetch('./data/massive.json?type=fetchGet&id=' + Math.random()).then((data) => {
     return data.json();
   }).then((data) => {
     console.log('getFetchSimple Response:', data);
@@ -375,6 +380,29 @@
   });
 }
 
+function zeptoRequest(method = 'GET') {
+  vConsole.show();
+  $.ajax({
+    type: method,
+    async: true,
+    url: './data/success.json?method=zepto&r=' + Math.random(),
+    headers: {
+      'content-type': 'application/x-www-form-urlencoded',
+      'custom-auth': 'foobar'
+    },
+    data: {
+      foo: 'bar',
+    },
+    xhrFields:{
+      withCredentials: true
+    },
+    dataType: 'json',
+    success(data) {
+      console.log('zeptoRequest response:', data);
+    },
+  });
+}
+
 function optionsXHR() {
   console.info('optionsXHR() Start');
   const url = window.location.origin + '/dev/success.json?method=optionsXHR&s=200&id=' + Math.random() + '&<xss0>';
@@ -413,6 +441,19 @@
   console.info('optionsFetch() End');
 }
 
+function testWavesurfer() {
+  showPanel();
+  const div = document.createElement('DIV');
+  div.id = 'waveform';
+  document.body.append(div);
+  var wavesurfer = WaveSurfer.create({
+    container: '#waveform',
+    waveColor: 'violet',
+    progressColor: 'purple'
+  });
+  wavesurfer.load('./data/a.wav?method=fetch');
+}
+
 function scrolling() {
   vConsole.setOption('maxNetworkNumber', 60);
   let n = 0
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vconsole",
-  "version": "3.14.4",
+  "version": "3.14.5",
   "description": "A lightweight, extendable front-end developer tool for mobile web page.",
   "homepage": "https://github.com/Tencent/vConsole",
   "files": [
diff --git a/src/core/core.ts b/src/core/core.ts
@@ -66,6 +66,7 @@ export class VConsole {
       console.debug('[vConsole] vConsole is already exists.');
       return VConsole.instance;
     }
+    VConsole.instance = this;
 
     this.isInited = false;
     this.option = {
@@ -131,7 +132,7 @@ export class VConsole {
    * Get singleton instance.
    **/
   public static get instance() {
-    return (<any>$.one(VCONSOLE_ID))?.__VCONSOLE_INSTANCE as VConsole;
+    return (<any>window).__VCONSOLE_INSTANCE;
   }
 
   /**
@@ -142,12 +143,7 @@ export class VConsole {
       console.debug('[vConsole] Cannot set `VConsole.instance` because the value is not the instance of VConsole.');
       return;
     }
-    const $elm = $.one(VCONSOLE_ID);
-    if ($elm) {
-      (<any>$elm).__VCONSOLE_INSTANCE = value;
-    } else {
-      console.debug('[vConsole] Cannot set `VConsole.instance` because vConsole has not finished initializing yet.');
-    }
+    (<any>window).__VCONSOLE_INSTANCE = value;
   }
 
   /**
@@ -219,9 +215,6 @@ export class VConsole {
         const pluginId = e.detail.pluginId;
         this.showPlugin(pluginId);
       });
-
-      // bind vConsole instance
-      VConsole.instance = this;
     }
 
     // set options into component
diff --git a/src/element/element.ts b/src/element/element.ts
@@ -182,6 +182,9 @@ export class VConsoleElementPlugin extends VConsoleSveltePlugin {
 
   protected _onCharacterDataChange(mutation: MutationRecord) {
     const node = this.nodeMap.get(mutation.target);
+    if (!node) {
+      return;
+    }
     node.textContent = mutation.target.textContent;
     this._refreshStore();
   }
@@ -233,6 +236,9 @@ export class VConsoleElementPlugin extends VConsoleSveltePlugin {
 
   protected _updateVNodeAttributes(elem: Node) {
     const node = this.nodeMap.get(elem);
+    if (!node) {
+      return;
+    }
     if (elem instanceof Element) {
       node.id = elem.id || '';
       node.className = elem.className || '';
diff --git a/src/log/log.model.ts b/src/log/log.model.ts
@@ -149,10 +149,16 @@ export class VConsoleLogModel extends VConsoleModel {
     window.console.timeEnd = ((label: string = '') => {
       const pre = timeLog[label];
       if (pre) {
-        console.log(label + ':', (Date.now() - pre) + 'ms');
+        this.addLog({
+          type: 'log',
+          origData: [label + ':', (Date.now() - pre) + 'ms'],
+        });
         delete timeLog[label];
       } else {
-        console.log(label + ': 0ms');
+        this.addLog({
+          type: 'log',
+          origData: [label + ': 0ms'],
+        });
       }
     }).bind(window.console);
 
diff --git a/src/network/fetch.proxy.ts b/src/network/fetch.proxy.ts
@@ -23,7 +23,8 @@ export class ResponseProxyHandler<T extends Response> implements ProxyHandler<T>
   }
 
   public get(target: T, key: string) {
-    // if (typeof key === 'string') { console.log('Proxy get:', key) }
+    // if (typeof key === 'string') { console.log('[Fetch.proxy] get:', key) }
+    const value = Reflect.get(target, key);
     switch (key) {
       case 'arrayBuffer':
       case 'blob':
@@ -32,33 +33,41 @@ export class ResponseProxyHandler<T extends Response> implements ProxyHandler<T>
       case 'text':
         return () => {
           this.item.responseType = <any>key.toLowerCase();
-          return target[key]().then((resp) => {
+          return value.apply(target).then((resp) => {
             this.item.response = Helper.genResonseByResponseType(this.item.responseType, resp);
             this.onUpdateCallback(this.item);
             return resp;
           });
         };
     }
-    if (typeof target[key] === 'function') {
-      return (...args) => {
-        return target[key].apply(target, args);
-      };
+    if (typeof value === 'function') {
+      return value.bind(target);
     } else {
-      return Reflect.get(target, key);
+      return value;
     }
   }
 
   protected mockReader() {
     let readerReceivedValue: Uint8Array;
     const _getReader = this.resp.body.getReader;
     this.resp.body.getReader = () => {
+      // console.log('[Fetch.proxy] getReader');
       const reader = <ReturnType<typeof _getReader>>_getReader.apply(this.resp.body);
+
+      // when readyState is already 4,
+      // it's not a chunked stream, or it had already been read.
+      // so should not update status.
+      if (this.item.readyState === 4) {
+        return reader;
+      }
+
       const _read = reader.read;
       const _cancel = reader.cancel;
       this.item.responseType = 'arraybuffer';
 
       reader.read = () => {
         return (<ReturnType<typeof _read>>_read.apply(reader)).then((result) => {
+          // console.log('[Fetch.proxy] read', result.done);
           if (!readerReceivedValue) {
             readerReceivedValue = new Uint8Array(result.value);
           } else {
@@ -142,7 +151,7 @@ export class FetchProxyHandler<T extends typeof fetch> implements ProxyHandler<T
     item.statusText = 'Pending';
     item.readyState = 1;
     if (!item.startTime) { // UNSENT
-      item.startTime = (+new Date());
+      item.startTime = Date.now();
     }
 
     if (Object.prototype.toString.call(requestHeader) === '[object Headers]') {
@@ -183,6 +192,7 @@ export class FetchProxyHandler<T extends typeof fetch> implements ProxyHandler<T
         item.header[key] = value;
         isChunked = value.toLowerCase().indexOf('chunked') > -1 ? true : isChunked;
       }
+      // console.log('[Fetch.proxy] afterFetch', 'isChunked:', isChunked, resp.status);
       
       if (isChunked) {
         // when `transfer-encoding` is chunked, the response is a stream which is under loading,
diff --git a/src/network/xhr.proxy.ts b/src/network/xhr.proxy.ts
@@ -21,6 +21,9 @@ export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T
   public get(target: T, key: string) {
     // if (typeof key === 'string') { console.log('Proxy get:', typeof key, key); }
     switch (key) {
+      case '_noVConsole':
+        return this.item.noVConsole;
+
       case 'open':
         return this.getOpen(target);
 
@@ -31,12 +34,11 @@ export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T
         return this.getSetRequestHeader(target);
 
       default:
-        if (typeof target[key] === 'function') {
-          return (...args) => {
-            return target[key].apply(target, args);
-          };
+        const value = Reflect.get(target, key);
+        if (typeof value === 'function') {
+          return value.bind(target);
         } else {
-          return Reflect.get(target, key);
+          return value;
         }
     }
   }
@@ -108,7 +110,7 @@ export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T
       this.item.name = this.item.url.replace(new RegExp('[/]*$'), '').split('/').pop() || '';
       this.item.getData = Helper.genGetDataByUrl(this.item.url, {});
       this.triggerUpdate();
-      return target.open.apply(target, args);
+      return Reflect.get(target, 'open').apply(target, args);
     };
   }
 
@@ -118,7 +120,7 @@ export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T
       const data: XMLHttpRequestBodyInit = args[0];
       this.item.postData = Helper.genFormattedBody(data);
       this.triggerUpdate();
-      return target.send.apply(target, args);
+      return Reflect.get(target, 'send').apply(target, args);
     };
   }
 
@@ -129,7 +131,7 @@ export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T
       }
       this.item.requestHeader[args[0]] = args[1];
       this.triggerUpdate();
-      return target.setRequestHeader.apply(target, args);
+      return Reflect.get(target, 'setRequestHeader').apply(target, args);
     };
   }
 
diff --git a/webpack.config.js b/webpack.config.js
diff --git a/webpack.serve.config.js b/webpack.serve.config.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vconsole",`
`3`		`- "version": "3.14.4",`
	`3`	`+ "version": "3.14.5",`
`4`	`4`	`"description": "A lightweight, extendable front-end developer tool for mobile web page.",`
`5`	`5`	`"homepage": "https://github.com/Tencent/vConsole",`
`6`	`6`	`"files": [`