feat: support dom nodes

liriliri · Oct 8, 2024 · 154831d · 154831d
1 parent dca77cd
commit 154831d
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 22 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -13,15 +13,11 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [16.x]
-
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm i
-    - run: npm run ci
+        node-version: '18.x' 
+    - run: |
+        npm i
+        npm run ci
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -12,17 +12,14 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
-      - name: Setup Node
-        uses: actions/setup-node@v2
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
-      - name: Build eruda-monitor
-        run: |
+      - run: |
           npm i
           npm run build
-      - name: Publish package on NPM
-        run: npm publish
+      - run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@
 [ci-url]: https://github.com/liriliri/eruda-monitor/actions/workflows/main.yml 
 [license-image]: https://img.shields.io/npm/l/eruda-monitor.svg
 
-Eruda plugin for fps and memory.
+Eruda plugin for monitoring fps, memory and dom nodes.
 
 ## Demo
 

diff --git a/index.html b/index.html
@@ -6,9 +6,21 @@
         <title>Eruda-monitor</title>
     </head>
     <body>
+        <button id="add-nodes">Add 100 nodes</button>
+        <div class="nodes"></div>
         <script src="node_modules/eruda/eruda.js"></script>
         <script>eruda.init({tool: []});</script>
         <script src="assets/eruda-monitor.js"></script>
         <script>eruda.add(erudaMonitor).show('monitor').show();</script>
+        <script>
+            document.getElementById('add-nodes').addEventListener('click', function() {
+                const nodes = document.querySelector('.nodes');
+                for (let i = 0; i < 100; i++) {
+                    const node = document.createElement('div');
+                    node.textContent = 'Node ' + i;
+                    nodes.appendChild(node);
+                }
+            });
+        </script>
     </body>
 </html>
diff --git a/package.json b/package.json
@@ -36,12 +36,12 @@
     "es-check": "^7.2.1",
     "eslint": "^8.57.0",
     "licia": "^1.38.0",
-    "luna-performance-monitor": "^0.3.0",
+    "luna-performance-monitor": "^1.0.0",
     "postcss": "^8.4.21",
     "postcss-class-prefix": "^0.3.0",
     "postcss-loader": "^7.0.2",
     "sass": "^1.77.8",
-    "sass-loader": "^13.2.0",
+    "sass-loader": "^16.0.2",
     "webpack": "^5.76.2",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.12.0"

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,5 @@
 const raf = require('licia/raf')
-const LunaPerformanceMonitor = require('luna-performance-monitor')
+const LunaPerformanceMonitor = require('luna-performance-monitor').default
 const now = require('licia/now')
 
 module.exports = function (eruda) {
@@ -16,12 +16,15 @@ module.exports = function (eruda) {
     }
     init($el, container) {
       super.init($el, container)
-      $el.html('<div class="eruda-fps"></div><div class="eruda-memory"></div>')
+      $el.html(
+        '<div class="eruda-fps"></div><div class="eruda-memory"></div><div class="eruda-dom-nodes"></div>'
+      )
 
       this._initFps($el.find('.eruda-fps').get(0))
       if (performance.memory) {
         this._initMemory($el.find('.eruda-memory').get(0))
       }
+      this._initDomNodes($el.find('.eruda-dom-nodes').get(0))
 
       eruda.get().config.on('change', this._onThemeChange)
     }
@@ -32,6 +35,7 @@ module.exports = function (eruda) {
       if (this._memoryMonitor) {
         this._memoryMonitor.start()
       }
+      this._domNodesMonitor.start()
     }
     hide() {
       super.hide()
@@ -40,6 +44,7 @@ module.exports = function (eruda) {
       if (this._memoryMonitor) {
         this._memoryMonitor.stop()
       }
+      this._domNodesMonitor.stop()
     }
     destroy() {
       eruda.get().config.off('change', this._onThemeChange)
@@ -95,6 +100,18 @@ module.exports = function (eruda) {
       })
       this._memoryMonitor = memoryMonitor
     }
+    _initDomNodes(el) {
+      const domNodesMonitor = new LunaPerformanceMonitor(el, {
+        title: 'DOM Nodes',
+        color: this._getColor(),
+        smooth: false,
+        theme: this._getTheme(),
+        data() {
+          return document.body.getElementsByTagName('*').length
+        },
+      })
+      this._domNodesMonitor = domNodesMonitor
+    }
     _onThemeChange = (name) => {
       const fpsMonitor = this._fpsMonitor
       const memoryMonitor = this._memoryMonitor

diff --git a/src/style.scss b/src/style.scss
@@ -3,4 +3,7 @@
   .memory {
     margin: 10px 0;
   }
+  .luna-performance-monitor {
+    border-color: var(--border) !important;
+  }
 }