fix(Core): Fix plugin event ready triggering before its HTML finishes rendering. (issue #591)

Author: Maizify

CHANGELOG.md

@@ -1,9 +1,10 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
-## 3.16.0 (2023-05-??)
+## 3.15.1 (2023-05-??)
 
 - `Feat(Netwrk)` Add new option `network.ignoreUrlRegExp` to skip some requests. (PR #623)
 - `Fix(Core)` Fix prototype pollution in `vConsole.setOption()`. (issue #616 #621)
+- `Fix(Core)` Fix plugin event `ready` triggering before its HTML finishes rendering. (issue #591)
 - `Fix(Log)` Reset group state when `console.clear()` is called. (issue #611)
 - `Fix(Log)` Fix fatal error caused by iOS (less than 13.4) which is not support `ResizeObserver` interface. (issue #610)
 - `Fix(Network)` Fix possible "Cannot read property" error by `sendBeacon`. (issue #615)

CHANGELOG_CN.md

@@ -4,6 +4,7 @@
 
 - `Feat(Netwrk)` 新增配置项 `network.ignoreUrlRegExp` 以跳过一些请求。 (PR #623)
 - `Fix(Core)` 修复 `vConsole.setOption()` 中可能存在的原型污染问题。 (issue #616 #621)
+- `Fix(Core)` 修复插件事件 `ready` 在插件完成渲染前就被触发的问题。 (issue #591)
 - `Fix(Log)` 修复调用 `console.clear()` 时没有重置 group 层级的问题。 (issue #611)
 - `Fix(Log)` 修复因 iOS（小于 13.4）不支持 `ResizeObserver` 接口导致的致命错误 (issue #610)
 - `Fix(Network)` 修复可能由 `sendBeacon` 引发的 "Cannot read property" 错误。 (issue #615)

dev/plugin.html

@@ -39,9 +39,9 @@
   .on('init', function() { console.log(this.id, 'init'); })
   .on('renderTab', function(cb) {
     console.log(this.id, 'renderTab');
-    cb('<div>I am ' + this.id+'</div>');
+    cb('<div id="tab1">I am ' + this.id+'</div>');
   })
-  .on('ready', function() {  console.log(this.id, 'ready'); })
+  .on('ready', function() { console.log(this.id, 'ready', document.querySelector('#tab1')); })
   .on('show', function() { console.log(this.id, 'show'); })
   .on('hide', function() { console.log(this.id, 'hide'); })
   .on('showConsole', function() { console.log(this.id, 'showConsole'); })

src/core/core.svelte

@@ -2,6 +2,7 @@
   import { onMount, onDestroy, createEventDispatcher } from 'svelte';
   import * as tool from '../lib/tool';
   import { default as SwitchButton } from './switchButton.svelte';
+  import { default as PluginContent } from '../lib/pluginContent.svelte';
   import { contentStore } from './core.model';
   import Style from './core.less';
   import type { IVConsoleTopbarOptions, IVConsoleToolbarOptions, IVConsoleTabOptions } from '../lib/plugin';
@@ -17,6 +18,7 @@
     tabOptions?: IVConsoleTabOptions;
     topbarList?: IVConsoleTopbarOptions[];
     toolbarList?: IVConsoleToolbarOptions[];
+    content?: HTMLElement;
   }
 
   export let theme = '';
@@ -368,12 +370,13 @@
       on:scroll={onContentScroll}
     >
       {#each Object.entries(pluginList) as [pluginId, plugin]}
-        <div
-          id="__vc_plug_{plugin.id}"
-          class="vc-plugin-box"
-          class:vc-fixed-height="{plugin.tabOptions?.fixedHeight}"
-          class:vc-actived="{plugin.id === activedPluginId}"
-        ></div>
+        <svelte:component
+          this={PluginContent} 
+          pluginId={plugin.id} 
+          fixedHeight={plugin.tabOptions?.fixedHeight} 
+          actived={plugin.id === activedPluginId} 
+          content={plugin.content}
+        />
       {/each}
     </div>
 

src/core/core.ts

@@ -293,6 +293,8 @@ export class VConsole {
       tabOptions: undefined,
       topbarList: [],
       toolbarList: [],
+      content: undefined,
+      contentContainer: undefined,
     };
     this.compInstance.pluginList = this._reorderPluginList(this.compInstance.pluginList);
     // start init
@@ -305,20 +307,7 @@ export class VConsole {
       pluginInfo.tabOptions = options;
       // render tabbox
       if (!!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[plugin.id].content = tabboxHTML;
       }
       this.compInstance.pluginList = this.compInstance.pluginList;
     });

src/lib/pluginContent.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { isElement, isString } from './tool';
+
+  /*************************************
+   * Public properties
+   *************************************/
+
+  export let pluginId = '';
+  export let fixedHeight = false;
+  export let actived = false;
+  export let content: HTMLElement | string = undefined;
+
+  
+  /*************************************
+   * Inner properties
+   *************************************/
+  
+  let container: HTMLElement = undefined;
+  let previousId = undefined;
+
+  $: {
+    if (previousId !== pluginId && content && container) {
+      // console.log('pluginContent onChange', pluginId, previousId)
+      previousId = pluginId;
+      container.innerHTML = '';
+      if (isString(content)) {
+        container.innerHTML = <string>content;
+      } else if (isElement(content)) {
+        container.appendChild(<HTMLElement>content);
+      }
+    }
+  }
+
+  /*************************************
+   * Lifecycle
+   *************************************/
+
+  // onMount(() => {
+  //   console.log('pluginContent onMount', pluginId)
+  // });
+</script>
+
+<div
+  bind:this={container}
+  id="__vc_plug_{pluginId}"
+  class="vc-plugin-box"
+  class:vc-fixed-height="{fixedHeight}"
+  class:vc-actived="{actived}"
+>
+</div>