Merge pull request #514 from Tencent/dev

v3.12.1

CHANGELOG.md

@@ -1,5 +1,11 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
+## 3.12.1 (2022-02-25)
+
+- `Fix(Core)` Fix bug that `VConsole.instance` is empty when VConsole `import` as a new module.
+- `Chore(Core)` Fix type declaration errors caused by vendors.
+
+
 ## 3.12.0 (2022-02-17)
 
 - `Feat(Core)` Add new static property `VConsole.instance` to get the singleton instance.

CHANGELOG_CN.md

@@ -1,5 +1,11 @@
 [English](./CHANGELOG.md) | 简体中文
 
+## 3.12.1 (2022-02-25)
+
+- `Fix(Core)` 修复当 VConsole 作为新模块 `import` 时 `VConsole.instance` 为空的问题。
+- `Chore(Core)` 修复由外部依赖库引起的 TypeScript 类型声明错误问题。
+
+
 ## 3.12.0 (2022-02-17)
 
 - `Feat(Core)` 新增静态属性 `VConsole.instance` 以获取实例化后的单例 vConsole 对象。

build/build.typings.js

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const { execSync } = require('child_process');
+const vendorConfig = require('./vendor.json');
+
+const main = () => {
+  console.group('\nEmitting type declarations...');
+  const distFile = './dist/vconsole.min.d.ts';
+  if (fs.existsSync(distFile)) {
+    fs.unlinkSync(distFile);
+  }
+  execSync('tsc --build ./tsconfig.type.json');
+  let distContent = fs.readFileSync(distFile, 'utf8');
+  for (const name of vendorConfig.name) {
+    distContent = distContent.replace(new RegExp(`['"]${name}['"]`, 'g'), `"vendor/${name}"`);
+  }
+  const vendorContent = '/// <reference path="../build/vendor.d.ts" />\n\n';
+  fs.writeFileSync(distFile, vendorContent + distContent, 'utf8');
+  console.groupEnd();
+};
+
+main();

build/vendor.d.ts

@@ -0,0 +1,24 @@
+declare module 'vendor/core-js/stable/symbol' {
+}
+
+declare module 'vendor/mutation-observer' {
+  export class MutationObserver {
+  }
+}
+
+declare module 'vendor/svelte' {
+  export class SvelteComponent {
+  }
+}
+
+declare module 'vendor/svelte/store' {
+  export interface Subscriber<T> {
+  }
+  export interface Unsubscriber {
+  }
+  export interface Updater<T> {
+  }
+  export interface Writable<T> {
+  }
+}
+

build/vendor.json

@@ -0,0 +1,8 @@
+{
+  "name": [
+    "core-js/stable/symbol",
+    "mutation-observer",
+    "svelte/store",
+    "svelte"
+  ]
+}

package.json

@@ -1,18 +1,19 @@
 {
   "name": "vconsole",
-  "version": "3.12.0",
+  "version": "3.12.1",
   "description": "A lightweight, extendable front-end developer tool for mobile web page.",
   "homepage": "https://github.com/Tencent/vConsole",
   "files": [
     "dist/*",
+    "build/vendor.d.ts",
     "CHANGELOG*",
     "README*"
   ],
   "main": "dist/vconsole.min.js",
   "typings": "dist/vconsole.min.d.ts",
   "scripts": {
     "build": "webpack --mode=production --progress",
-    "build:typings": "tsc --build tsconfig.type.json",
+    "build:typings": "node ./build/build.typings.js",
     "build:dev": "webpack --mode=development --progress",
     "watch": "webpack --mode=development --watch --progress",
     "serve": "webpack serve --config webpack.serve.config --progress",

src/core/core.ts

@@ -53,9 +53,6 @@ export class VConsole {
   public system: VConsoleLogExporter;
   public network: VConsoleNetworkExporter;
 
-  // Singleton instance
-  public static instance: VConsole;
-
   // Export static classes
   public static VConsolePlugin = VConsolePlugin;
   public static VConsoleLogPlugin = VConsoleLogPlugin;
@@ -71,7 +68,6 @@ export class VConsole {
       return VConsole.instance;
     }
 
-    VConsole.instance = this;
     this.isInited = false;
     this.option = {
       defaultPlugins: ['system', 'network', 'element', 'storage'],
@@ -132,6 +128,29 @@ export class VConsole {
     }
   }
 
+  /**
+   * Get singleton instance.
+   **/
+  public static get instance() {
+    return (<any>$.one(VCONSOLE_ID))?.__VCONSOLE_INSTANCE as VConsole;
+  }
+
+  /**
+   * Set singleton instance.
+   **/
+  public static set instance(value: VConsole | undefined) {
+    if (value !== undefined && !(value instanceof 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.');
+    }
+  }
+
   /**
    * Add built-in plugins.
    */
@@ -199,6 +218,9 @@ export class VConsole {
         const pluginId = e.detail.pluginId;
         this.showPlugin(pluginId);
       });
+
+      // bind vConsole instance
+      VConsole.instance = this;
     }
 
     // set options into component
@@ -497,17 +519,17 @@ export class VConsole {
     if (!this.isInited) {
       return;
     }
+    // reverse isInited when destroyed
+    this.isInited = false;
+    VConsole.instance = undefined;
+
     // remove plugins
     const pluginIds = Object.keys(this.pluginList);
     for (let i = pluginIds.length - 1; i >= 0; i--) {
       this.removePlugin(pluginIds[i]);
     }
     // remove component
     this.compInstance.$destroy();
-
-    // reverse isInited when destroyed
-    this.isInited = false;
-    VConsole.instance = undefined;
   }
 
 } // END class

tsconfig.json

@@ -16,5 +16,5 @@
 		},
 	},
   "include": ["src/**/*"],
-	"exclude": ["node_modules/*"],
+	"exclude": ["build/vendor.d.ts", "node_modules/*"],
 }

tsconfig.type.json

@@ -4,7 +4,7 @@
     "declaration": true,
     // "declarationDir": "./dist/typings",
     "outFile": "dist/vconsole.min.d.ts",
-    "outDir": "./dist/typings",
+    "outDir": "./dist",
     "baseUrl": "./src",
     "rootDir": "./src",
     "moduleResolution": "node",

webpack.config.js

@@ -131,9 +131,7 @@ module.exports = (env, argv) => {
         apply: (compiler) => {
           compiler.hooks.done.tap('DeclarationEmitter', () => {
             if (isDev) return; // only emit declarations in prod mode
-            console.group('Emitting type declarations...');
             execSync('npm run build:typings');
-            console.groupEnd();
           });
         },
       },