diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index d47b285..9092686 100644 --- 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 index 2ced8f0..18c8790 100644 --- 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 }} \ No newline at end of file diff --git a/README.md b/README.md index 77c5534..f47d2f1 100644 --- 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 index 955bdba..d69fed2 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,21 @@ Eruda-monitor + +
+ \ No newline at end of file diff --git a/package.json b/package.json index 316f86b..b2ac440 100644 --- 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 index 06b630c..013105a 100644 --- 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('
') + $el.html( + '
' + ) 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 index d42350e..34ce5f3 100644 --- a/src/style.scss +++ b/src/style.scss @@ -3,4 +3,7 @@ .memory { margin: 10px 0; } + .luna-performance-monitor { + border-color: var(--border) !important; + } }