From a3180fbd4d2709b574bd70e636c4868381ca274c Mon Sep 17 00:00:00 2001 From: pan93412 Date: Tue, 8 Nov 2022 15:32:36 +0800 Subject: [PATCH 1/6] feat: Make devtools a feature Users can now enable DevTools easily, without worrying about forgetting 'uncomment' that function. --- src-tauri/Cargo.toml | 2 ++ src-tauri/src/main.rs | 11 +++++++---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 1bc557f..f593931 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -28,3 +28,5 @@ default = [ "custom-protocol" ] # this feature is used used for production builds where `devPath` points to the filesystem # DO NOT remove this custom-protocol = [ "tauri/custom-protocol" ] +# Enable DevTools for debugging. +devtools = [] diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index af3ce31..1280e26 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -74,14 +74,17 @@ fn main() -> wry::Result<()> { } }; - let _webview = WebViewBuilder::new(window)? + let webview = WebViewBuilder::new(window)? .with_url(&url.to_string())? - // .with_devtools(true) + .with_devtools(cfg!(feature = "devtools")) .with_initialization_script(include_str!("pake.js")) .with_ipc_handler(handler) .build()?; - // _webview.open_devtools(); + #[cfg(feature = "devtools")] { + webview.open_devtools(); + } + event_loop.run(move |event, _, control_flow| { *control_flow = ControlFlow::Wait; @@ -97,7 +100,7 @@ fn main() -> wry::Result<()> { .. } => { if menu_id == close_item.clone().id() { - _webview.window().set_minimized(true); + webview.window().set_minimized(true); } println!("Clicked on {:?}", menu_id); } From 772f13157c2c28a1833ab92483a13b3932fda629 Mon Sep 17 00:00:00 2001 From: pan93412 Date: Tue, 8 Nov 2022 15:33:09 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat(npm):=20Add=20=E2=80=9Cdev:withtool?= =?UTF-8?q?=E2=80=9D=20script?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Make enabling `devtools` feature one-click. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index a138df2..4ec8c6d 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "scripts": { "start": "npm run dev", "dev": "npm run tauri dev", + "dev:withtool": "npm run tauri dev -- --features devtools", "build": "npm run tauri build -- --target universal-apple-darwin", "tauri": "tauri" }, From 2d2e9b9e53ae2c85276f256a9b7f2d386301c127 Mon Sep 17 00:00:00 2001 From: pan93412 Date: Tue, 8 Nov 2022 15:36:00 +0800 Subject: [PATCH 3/6] docs: Update description of DevTools MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Recommand people using `npm run dev:withtool` instead of the old “comment” way. --- README.md | 12 ++++++------ README_EN.md | 12 ++++++------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 12fc060..c9ca6dc 100644 --- a/README.md +++ b/README.md @@ -7,9 +7,9 @@ ## 特征 -🏂 **小**：相比传统的 Electron 套壳打包，大小要小将近 40 倍，一般不到 3M ([数据](https://static.tw93.fun/img/pakedata.png)) -😂 **快**：Pake 的底层使用的 Rust Tauri 框架，性能体验较 JS 框架要轻快不少，内存小很多 -🩴 **特**：不是单纯打包，实现了通用快捷键的透传、沉浸式的窗口、拖动、样式改写简化 +🏂 **小**：相比传统的 Electron 套壳打包，大小要小将近 40 倍，一般不到 3M ([数据](https://static.tw93.fun/img/pakedata.png)) +😂 **快**：Pake 的底层使用的 Rust Tauri 框架，性能体验较 JS 框架要轻快不少，内存小很多 +🩴 **特**：不是单纯打包，实现了通用快捷键的透传、沉浸式的窗口、拖动、样式改写简化 🐶 **玩**：只是一个很简单的小玩具，用 Rust 替代之前套壳网页老的思路玩法，PWA 也很好，友好交流勿喷 ## 下载 @@ -84,14 +84,14 @@ npm run build 1. 修改 `src-tauri` 目录下的 `tauri.conf.json` 中的 `url、productName、icon、title、identifier` 这 5 个字段，其中 icon 可以从 icons 目录选择一个，也可以去 [macOSicons](https://macosicons.com/#/) 下载符合产品名称的 2. 关于窗口属性设置，可以在 `tauri.conf.json` 修改 `windows` 属性对应的 `width/height`，是否全屏 `fullscreen`，是否可以调整大小 `resizable`，假如你不好适配沉浸式头部，可以将 `transparent` 设置成 `true` 即可。 -3. `npm run dev` 本地调试看看效果，此外可以打开 `main.rs` 中两处注释 `_devtools` 进行容器调试 -4. `npm run build` 运行即可打包，假如有打开 devtools 模式，记得注释掉 +3. `npm run dev` 本地调试看看效果，此外可以使用 `npm run dev:withtool` 进行容器调试 +4. `npm run build` 运行即可打生产包 ## 高级 #### 1. 如何改写样式，如去掉原站广告、不想要的模块、甚至重新设计？ -首先需要打开 devtools 调试模式，找到你需要修改的样式名称，先在 devtools 里面验证效果；找到 `pake.js` 中样式位置 `style.innerHTML` ，将需要覆盖的样式加上即可，有一些案例你可以模仿，正式打包前记得干掉 devtools 注释。 +首先需要使用 `npm run dev:withtool` 打开 devtools 调试模式，找到你需要修改的样式名称，先在 devtools 里面验证效果；找到 `pake.js` 中样式位置 `style.innerHTML` ，将需要覆盖的样式加上即可，有一些案例你可以模仿。 #### 2. 如何注入 JS 的逻辑，比如实现事件监听，比如说键盘快捷键？ diff --git a/README_EN.md b/README_EN.md index 5c3ea69..f2ee6dd 100644 --- a/README_EN.md +++ b/README_EN.md @@ -7,9 +7,9 @@ ## Features -🏂 **Small**：Nearly 40 times smaller than the Electron shell package, less than 3M ([Data](https://static.tw93.fun/img/pakedata.png)). -😂 **Fast**：Using the Rust Tauri, the performance experience is much lighter and faster than JS, memory is much smaller. -🩴 **Special**：Not just packaged, with universal shortcut pass-through, immersive windows, drag-and-drop, packaged style compatibility. +🏂 **Small**：Nearly 40 times smaller than the Electron shell package, less than 3M ([Data](https://static.tw93.fun/img/pakedata.png)). +😂 **Fast**：Using the Rust Tauri, the performance experience is much lighter and faster than JS, memory is much smaller. +🩴 **Special**：Not just packaged, with universal shortcut pass-through, immersive windows, drag-and-drop, packaged style compatibility. 🐶 **Toy**：Just a very simple little toy, a way to play with Rust instead of the old idea of shelling the web ## Download @@ -84,14 +84,14 @@ npm run build 1. Modify the `tauri.conf.json` in the `src-tauri` directory to include 5 fields `url, productName, icon, title, identifier`, icon can be selected from the `icons` directory or downloaded from [macOSicons](https://macosicons.com/#/) to match the product. 2. For window property settings, you can modify the `width/height` of the `windows` property in `tauri.conf.json`, whether it is `fullscreen`, whether it is `resizable`, if you are not good at adapting immersive headers, you can set `transparent` to `true` and you're done. -3. `npm run dev` for local debugging, and open the devtools comments in `main.rs` (search for `_devtools`) for container debugging. -4. `npm run build` can be run to package, if you have devtools mode open, remember to comment it out. +3. `npm run dev` for local debugging; `npm run dev:withtool` to open the devtools for container debugging. +4. `npm run build` can be run to package for production. ## Advanced #### 1. How do I rewrite the style, e.g. to remove ads from the original site, or even redesign it? -First open devtools debug mode, find the name of the style you want to change and verify the effect in devtools first, find the location of the style in `pake.js` with `style.innerHTML` and add the style you need to override, there are some examples you can copy. Remember to remove the devtools comments before packaging. +First, open devtools debug mode with `npm run dev:withtool`. After that, find the name of the style you want to change and verify the effect in devtools, and find the location of the style in `pake.js` with `style.innerHTML`. Finally, add the style you need to override, there are some examples you can copy. #### 2. How to inject js code, e.g. to implement event listeners, e.g. keyboard shortcuts? From 670b369855a9f0c1dcc68f36eed1fcb4d470ade8 Mon Sep 17 00:00:00 2001 From: Tw93 Date: Tue, 8 Nov 2022 15:50:52 +0800 Subject: [PATCH 4/6] docs(contributor): contrib-readme-action has updated readme --- README.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c9ca6dc..cbfb6ef 100644 --- a/README.md +++ b/README.md @@ -120,6 +120,13 @@ npm run build Bryan Lee + + + pan93412 +
+ Pan93412 + + QingZ11 @@ -147,15 +154,15 @@ npm run build
Hyzhao - + + liusishan
Null - - + piaoyidage From 70292aad1cc42e61699bd1ca6ac09e461c971a84 Mon Sep 17 00:00:00 2001 From: Tw93 Date: Tue, 8 Nov 2022 15:51:03 +0800 Subject: [PATCH 5/6] docs(contributor): contrib-readme-action has updated readme --- README.md | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index cbfb6ef..c9ca6dc 100644 --- a/README.md +++ b/README.md @@ -120,13 +120,6 @@ npm run build Bryan Lee - - - pan93412 -
- Pan93412 - - QingZ11 @@ -154,15 +147,15 @@ npm run build
Hyzhao - - + liusishan
Null - + + piaoyidage From 75ea83430a2ec655edc3e56034b8f8e267310e5a Mon Sep 17 00:00:00 2001 From: Tw93 Date: Tue, 8 Nov 2022 15:59:31 +0800 Subject: [PATCH 6/6] =?UTF-8?q?:bug:=20=E6=9B=B4=E6=96=B0=E4=B8=80?= =?UTF-8?q?=E4=B8=8B=E7=94=A8debug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 ++++++------ README_EN.md | 12 ++++++------ package.json | 2 +- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index c9ca6dc..b34c43a 100644 --- a/README.md +++ b/README.md @@ -7,10 +7,10 @@ ## 特征 -🏂 **小**：相比传统的 Electron 套壳打包，大小要小将近 40 倍，一般不到 3M ([数据](https://static.tw93.fun/img/pakedata.png)) -😂 **快**：Pake 的底层使用的 Rust Tauri 框架，性能体验较 JS 框架要轻快不少，内存小很多 -🩴 **特**：不是单纯打包，实现了通用快捷键的透传、沉浸式的窗口、拖动、样式改写简化 -🐶 **玩**：只是一个很简单的小玩具，用 Rust 替代之前套壳网页老的思路玩法，PWA 也很好，友好交流勿喷 +- 🏂 **小**：相比传统的 Electron 套壳打包，大小要小将近 40 倍，一般不到 3M ([数据](https://static.tw93.fun/img/pakedata.png)) +- 😂 **快**：Pake 的底层使用的 Rust Tauri 框架，性能体验较 JS 框架要轻快不少，内存小很多 +- 🩴 **特**：不是单纯打包，实现了通用快捷键的透传、沉浸式的窗口、拖动、样式改写简化 +- 🐶 **玩**：只是一个很简单的小玩具，用 Rust 替代之前套壳网页老的思路玩法，PWA 也很好，友好交流勿喷 ## 下载 @@ -84,14 +84,14 @@ npm run build 1. 修改 `src-tauri` 目录下的 `tauri.conf.json` 中的 `url、productName、icon、title、identifier` 这 5 个字段，其中 icon 可以从 icons 目录选择一个，也可以去 [macOSicons](https://macosicons.com/#/) 下载符合产品名称的 2. 关于窗口属性设置，可以在 `tauri.conf.json` 修改 `windows` 属性对应的 `width/height`，是否全屏 `fullscreen`，是否可以调整大小 `resizable`，假如你不好适配沉浸式头部，可以将 `transparent` 设置成 `true` 即可。 -3. `npm run dev` 本地调试看看效果，此外可以使用 `npm run dev:withtool` 进行容器调试 +3. `npm run dev` 本地调试看看效果，此外可以使用 `npm run dev:debug` 进行容器调试 4. `npm run build` 运行即可打生产包 ## 高级 #### 1. 如何改写样式，如去掉原站广告、不想要的模块、甚至重新设计？ -首先需要使用 `npm run dev:withtool` 打开 devtools 调试模式，找到你需要修改的样式名称，先在 devtools 里面验证效果；找到 `pake.js` 中样式位置 `style.innerHTML` ，将需要覆盖的样式加上即可，有一些案例你可以模仿。 +首先需要使用 `npm run dev:debug` 打开 devtools 调试模式，找到你需要修改的样式名称，先在 devtools 里面验证效果；找到 `pake.js` 中样式位置 `style.innerHTML` ，将需要覆盖的样式加上即可，有一些案例你可以模仿。 #### 2. 如何注入 JS 的逻辑，比如实现事件监听，比如说键盘快捷键？ diff --git a/README_EN.md b/README_EN.md index f2ee6dd..f1a0c88 100644 --- a/README_EN.md +++ b/README_EN.md @@ -7,10 +7,10 @@ ## Features -🏂 **Small**：Nearly 40 times smaller than the Electron shell package, less than 3M ([Data](https://static.tw93.fun/img/pakedata.png)). -😂 **Fast**：Using the Rust Tauri, the performance experience is much lighter and faster than JS, memory is much smaller. -🩴 **Special**：Not just packaged, with universal shortcut pass-through, immersive windows, drag-and-drop, packaged style compatibility. -🐶 **Toy**：Just a very simple little toy, a way to play with Rust instead of the old idea of shelling the web +- 🏂 **Small**：Nearly 40 times smaller than the Electron shell package, less than 3M ([Data](https://static.tw93.fun/img/pakedata.png)). +- 😂 **Fast**：Using the Rust Tauri, the performance experience is much lighter and faster than JS, memory is much smaller. +- 🩴 **Special**：Not just packaged, with universal shortcut pass-through, immersive windows, drag-and-drop, packaged style compatibility. +- 🐶 **Toy**：Just a very simple little toy, a way to play with Rust instead of the old idea of shelling the web. ## Download @@ -84,14 +84,14 @@ npm run build 1. Modify the `tauri.conf.json` in the `src-tauri` directory to include 5 fields `url, productName, icon, title, identifier`, icon can be selected from the `icons` directory or downloaded from [macOSicons](https://macosicons.com/#/) to match the product. 2. For window property settings, you can modify the `width/height` of the `windows` property in `tauri.conf.json`, whether it is `fullscreen`, whether it is `resizable`, if you are not good at adapting immersive headers, you can set `transparent` to `true` and you're done. -3. `npm run dev` for local debugging; `npm run dev:withtool` to open the devtools for container debugging. +3. `npm run dev` for local debugging; `npm run dev:debug` to open the devtools for container debugging. 4. `npm run build` can be run to package for production. ## Advanced #### 1. How do I rewrite the style, e.g. to remove ads from the original site, or even redesign it? -First, open devtools debug mode with `npm run dev:withtool`. After that, find the name of the style you want to change and verify the effect in devtools, and find the location of the style in `pake.js` with `style.innerHTML`. Finally, add the style you need to override, there are some examples you can copy. +First, open devtools debug mode with `npm run dev:debug`. After that, find the name of the style you want to change and verify the effect in devtools, and find the location of the style in `pake.js` with `style.innerHTML`. Finally, add the style you need to override, there are some examples you can copy. #### 2. How to inject js code, e.g. to implement event listeners, e.g. keyboard shortcuts? diff --git a/package.json b/package.json index 4ec8c6d..26ff7b1 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "scripts": { "start": "npm run dev", "dev": "npm run tauri dev", - "dev:withtool": "npm run tauri dev -- --features devtools", + "dev:debug": "npm run tauri dev -- --features devtools", "build": "npm run tauri build -- --target universal-apple-darwin", "tauri": "tauri" },