release: v1.15.1

liriliri · Oct 16, 2024 · d4cce0b · d4cce0b
1 parent 16ee7cd
commit d4cce0b
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 70 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 1.15.1 (16 Oct 2024)
+
+* fix: cache network requests before enable [#53](https://github.com/liriliri/chii/issues/53)
+* chore: minor ui update 
+
 ## 1.15.0 (3 Oct 2024)
 
 * feat: shadow dom

diff --git a/eslint.config.js b/eslint.config.js
@@ -13,5 +13,6 @@ module.exports = tseslint.config(eslint.configs.recommended, ...tseslint.configs
     'prefer-const': 2,
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-require-imports': 'off',
   },
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chii",
-  "version": "1.15.0",
+  "version": "1.15.1",
   "description": "Chrome devtools framework",
   "main": "./server/index.js",
   "bin": {
@@ -42,22 +42,24 @@
   "devDependencies": {
     "@eslint/js": "^9.5.0",
     "@types/eslint__js": "^8.42.3",
-    "chobitsu": "^1.8.1",
+    "chobitsu": "^1.8.2",
     "css-loader": "^6.7.2",
     "es-check": "^6.2.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.5.0",
     "globals": "^15.6.0",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
-    "luna-data-grid": "^0.6.0",
+    "luna-data-grid": "^1.0.0",
+    "luna-modal": "^1.2.3",
+    "luna-toolbar": "^0.5.8",
     "ncp": "^2.0.0",
     "style-loader": "^3.3.1",
     "svg-url-loader": "^8.0.0",
     "terser": "^5.10.0",
     "ts-loader": "^9.3.1",
     "typescript": "^5.5.2",
-    "typescript-eslint": "^7.14.1",
+    "typescript-eslint": "^8.9.0",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0",
     "xml2js": "^0.4.23"

diff --git a/server/tpl/index.hbs b/server/tpl/index.hbs
@@ -23,34 +23,17 @@
       max-width: 1440px;
       margin: 0 auto;
     }
-    .content-header {
-      border-bottom: 1px solid #eee;
-      font-size: 150%;
-      padding: 20px 0 10px 0;
+    .toolbar {
+      background: transparent !important;
       z-index: 1;
       margin-bottom: 8px;
     }
-    .content-header .filter {
-      float: right;
-      border: 1px solid #eee;
-      margin-top: 4px;
-      height: 20px;
-      line-height: 20px;
-      box-sizing: border-box;
-      outline: none;
-      width: 150px;
-      color: #303942;
-      padding: 0 4px;
-    }
-    .content-header .filter:focus {
-      box-shadow: 0 0 0 1px #1a73e8;
-    }
     .description {
       margin: 1rem 0;
       font-size: .875rem;
       line-height: 2;
     }
-    .targets, .description, .content-header {
+    .targets {
       width: 100%;
     }
     .hidden {
@@ -70,31 +53,21 @@
         background-color: #202124;
         color: #ddd;
       }
-      .content-header {
-        border-bottom: 1px solid #555;
-      }
-      .content-header .filter {
-        background-color: #333;
-        border: 1px solid #555;
-        color: #ddd;
-      }
     }
   </style>
 </head>
 <body>
   <div id="container">
-    <div class="content-header">
-      Pages
-      <input class="filter hidden" placeholder="Filter"/>
-    </div>
-    <div class="description hidden">
-      You can use this script to inject the chii target code into your web page.<br/>
-      <a target="_blank" href="//{{domain}}{{basePath}}target.js">{{domain}}{{basePath}}target.js</a> <br/>
-      Or just open the demo page <a target="_blank" href="//{{domain}}{{basePath}}test/demo.html">{{domain}}{{basePath}}test/demo.html</a> to play around with.<br/>
-      <a target="_blank" href="https://github.com/liriliri/chii">Chii v{{version}}</a>
-    </div>  
-    <div class="targets hidden"></div>
+    <div class="toolbar"></div>
+    <div class="targets"></div>
+  </div>
+  <div class="description hidden">
+    You can use this script to inject the chii target code into your web page.<br/>
+    <a target="_blank" href="//{{domain}}{{basePath}}target.js">{{domain}}{{basePath}}target.js</a> <br/>
+    Or just open the demo page <a target="_blank" href="//{{domain}}{{basePath}}test/demo.html">{{domain}}{{basePath}}test/demo.html</a> to play around with.<br/>
+    <a target="_blank" href="https://chii.liriliri.io/">Chii v{{version}}</a>
   </div>
+  <div class="help"></div>
   <script>
     window.domain = '{{domain}}';
     window.basePath = '{{basePath}}';

diff --git a/src/icon/mac.svg b/src/icon/mac.svg
diff --git a/src/index.ts b/src/index.ts
@@ -2,21 +2,23 @@ import detectOs from 'licia/detectOs';
 import $ from 'licia/$';
 import randomId from 'licia/randomId';
 import toInt from 'licia/toInt';
-import isEmpty from 'licia/isEmpty';
 import isDarkMode from 'licia/isDarkMode';
 import LunaDataGrid from 'luna-data-grid';
+import LunaModal from 'luna-modal';
+import LunaToolbar from 'luna-toolbar';
 import each from 'licia/each';
 import throttle from 'licia/throttle';
 import escape from 'licia/escape';
 import toEl from 'licia/toEl';
 import h from 'licia/h';
-import debounce from 'licia/debounce';
 import winIcon from './icon/win.svg';
 import macIcon from './icon/mac.svg';
 import linuxIcon from './icon/linux.svg';
 import globeIcon from './icon/globe.svg';
 import androidIcon from './icon/android.svg';
 import 'luna-data-grid/luna-data-grid.css';
+import 'luna-toolbar/luna-toolbar.css';
+import 'luna-modal/luna-modal.css';
 
 declare const window: any;
 
@@ -57,21 +59,38 @@ setInterval(() => {
     });
 }, 2000);
 
-const $description = $('.description');
 const $targets = $('.targets');
-const $filter = $('.filter');
-const $contentHeader = $('.content-header');
+const $toolbar = $('.toolbar');
+const $help = $('.help');
+const $description = $('.description');
+
+const theme = isDarkMode() ? 'dark' : 'light';
+
+const help = new LunaModal($help.get(0) as HTMLElement, {
+  theme,
+  title: 'Help',
+  content: $description.get(0) as HTMLElement,
+});
 
-$filter.on(
-  'input',
-  debounce(function () {
-    const filter = $filter.val();
-    dataGrid.setOption('filter', filter);
-  }, 500)
-);
+const toolbar = new LunaToolbar($toolbar.get(0) as HTMLElement, {
+  theme,
+});
+const targets = toolbar.appendText('0 Target');
+toolbar.appendSpace();
+toolbar.appendInput('filter', '', 'Filter');
+toolbar.appendSeparator();
+toolbar.appendButton('Help', () => {
+  $description.rmClass('hidden');
+  help.show();
+});
+toolbar.on('change', (key, val) => {
+  if (key === 'filter') {
+    dataGrid.setOption('filter', val);
+  }
+});
 
 const dataGrid = new LunaDataGrid($targets.get(0) as HTMLElement, {
-  theme: isDarkMode() ? 'dark' : 'light',
+  theme,
   columns: [
     {
       id: 'title',
@@ -110,18 +129,9 @@ function update() {
   fetch(`${window.basePath}targets`)
     .then(res => res.json())
     .then(data => {
-      const targets = data.targets;
-
-      if (isEmpty(targets)) {
-        $description.rmClass('hidden');
-        $targets.addClass('hidden');
-        $filter.addClass('hidden');
-      } else {
-        $description.addClass('hidden');
-        $targets.rmClass('hidden');
-        $filter.rmClass('hidden');
-        render(targets);
-      }
+      const count = data.targets.length;
+      targets.setText(`${count} Target${count > 1 ? 's' : ''}`);
+      render(data.targets);
     });
 }
 
@@ -176,7 +186,7 @@ function render(targets: any[]) {
 update();
 
 function updateDataGridHeight() {
-  const height = window.innerHeight - $contentHeader.offset().height - 8 * 3 - 2;
+  const height = window.innerHeight - $toolbar.offset().height - 8 * 3 - 2;
   dataGrid.setOption('maxHeight', height);
 }