📝 Update doc and fix remote cli install

desktop-dev/scripts/dnt.ts

@@ -2,7 +2,7 @@ import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { dnt } from "../../scripts/deps.ts";
-import { WalkFiles } from "../../scripts/helper/WalkDir.ts";
+import { WalkFiles } from "./WalkDir.ts";
 // await emptyDir("./npm");
 
 /// before build

desktop-dev/scripts/migrate.ts

@@ -2,7 +2,7 @@
 import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import { WalkFiles } from "../../scripts/helper/WalkDir.ts";
+import { WalkFiles } from "./WalkDir.ts";
 
 const resolveTo = (to: string) => fileURLToPath(import.meta.resolve(to));
 const easyWriteFile = (filepath: string, content: string | Uint8Array) => {
@@ -18,6 +18,7 @@ emptyDir(resolveTo("./src"));
 
 for (const entry of WalkFiles(resolveTo("../../desktop/src"))) {
   ///  资源文件夹的东西直接迁移
+  // deno-lint-ignore no-constant-condition
   if (entry.relativepath.includes("/assets/") && false) {
     const [dir, ...rels] = entry.relativepath.split("/assets/");
     const projectName = path.basename(dir);

plaoc/README.md

@@ -1,14 +1,14 @@
-# plaoc
+# About plaoc
 
-1. 在 Dweb Browser 中，MutilWebview 作为前端载具，没有对全局变量的污染，所有的扩展都是通过网络通讯来实现功能（fetch/websocket）。
-2. 在 Dweb Browser 中，JsProcess 作为后端的载具，可以跟各个模块直接 IPC 通讯而不通过传统意义上的网络层。
-3. plugins 这个文件夹，就是在 JsProcess 这个环境里，对这些接口进行了聚合整理，使得开发者开箱即用地能够使用这些接口来访问各个模块。也就是说，它分成两部分的代码：
-   1. JsProcess 的后端代码，通过`jsProcess.nativeFetch/.nativeRequest`来访问其它模块，从而使得开发者可以将它挂特定的 subdomain/port 里，使得前端开发者可以访问这些模块。
-   2. MutilWebview 的前端代码，对后端的网络请求进行进一步封装，简化成 WebComponent 的声明式模块，使得接口更加符合前端开发者的思维直觉。
-      > 额外地，我们会基于这些 WebComponent 做一个进一步的封装，使得能够尽可能兼容 capacitor、cordova 等传统前端应用开发框架
+> [Engish doc](./README_US.md)
+
+[plaoc](https://github.com/BioforestChain/dweb_browser-docs) 是基于 dweb-browser 平台的一个对标 Cordova、Capacitor、Tauri 的“跨平台 Web 应用”开发工具包。
+
+## cli
 
+[plaoc cli 文档](./cli/README.md)
 
-## Build
+### dev Build
 
 到 dweb_browser 根目录。
 
@@ -18,6 +18,14 @@ deno task plaoc serve ./plaoc/demo/dist
 
 > `./plaoc/demo/dist` 指向一个 build 之后的应用目录
 
+## MutilWebview概念
+
+1. 在 Dweb Browser 中，MutilWebview 作为前端载具，没有对全局变量的污染，所有的扩展都是通过网络通讯来实现功能（fetch/websocket）。
+2. 在 Dweb Browser 中，JsProcess 作为后端的载具，可以跟各个模块直接 IPC 通讯而不通过传统意义上的网络层。
+3. plugins 这个文件夹，就是在 JsProcess 这个环境里，对这些接口进行了聚合整理，使得开发者开箱即用地能够使用这些接口来访问各个模块。也就是说，它分成两部分的代码：
+   1. JsProcess 的后端代码，通过`jsProcess.nativeFetch/.nativeRequest`来访问其它模块，从而使得开发者可以将它挂特定的 subdomain/port 里，使得前端开发者可以访问这些模块。
+   2. MutilWebview 的前端代码，对后端的网络请求进行进一步封装，简化成 WebComponent 的声明式模块，使得接口更加符合前端开发者的思维直觉。
+      > 额外地，我们会基于这些 WebComponent 做一个进一步的封装，使得能够尽可能兼容 capacitor、cordova 等传统前端应用开发框架
 
 ## publish
 

plaoc/README_US.md

@@ -0,0 +1,38 @@
+# About plaoc
+
+[plaoc](https://github.com/BioforestChain/dweb_browser-docs) is a "cross-platform web application" development toolkit based on the dweb-browser platform, aiming to compete with Cordova, Capacitor, and Tauri.
+
+## cli
+
+[plaoc cli documentation](./cli/README.md)
+
+### dev Build
+
+Navigate to the root directory of dweb_browser.
+
+```bash
+deno task plaoc serve ./plaoc/demo/dist
+```
+
+> `./plaoc/demo/dist` points to the directory of a built application.
+
+## MutilWebview concept
+
+1. In Dweb Browser, MutilWebview serves as a frontend container without polluting global variables. All extensions are implemented through network communication (fetch/websocket).
+2. In Dweb Browser, JsProcess serves as a backend container, allowing direct IPC communication with various modules without traditional network layers.
+3. The "plugins" folder aggregates and organizes these interfaces within the JsProcess environment, allowing developers to access various modules out of the box. It consists of two parts of code:
+   1. Backend code of JsProcess, which accesses other modules through `jsProcess.nativeFetch/.nativeRequest`, allowing developers to mount it to specific subdomains/ports, enabling frontend developers to access these modules.
+   2. Frontend code of MutilWebview, which further encapsulates the backend's network requests into declarative WebComponents, making the interfaces more intuitive for frontend developers.
+      > Additionally, we will further encapsulate these WebComponents to make them compatible with traditional frontend application development frameworks like Capacitor and Cordova.
+
+## publish
+
+- Tag and push to GitHub.
+
+```bash
+git tag -a 0.0.1 -m "feat: xxx"
+```
+
+```bash
+git push origin <tag-name>
+```

plaoc/cli/README.md

@@ -1,13 +1,55 @@
-### cli
+## cli
 
-1. `deno install -A https://deno.land/x/plaoc/cli/plaoc.ts`
+plaoc 前后端打包工具。
 
-1. `plaoc bundle ./dir`
-   会打包成以下的文件夹结构，并输出压缩文件 `.zip` 和一个 `plaoc.metadata.json`
+## 安装
 
-1. `plaoc preview http://localhost:1231` 或者 `plaoc preview ./dir`
-   > 会将该 url 放在一个 iframe 中被预览
-   > 该命令会输出一行命令：
-   ```bash
-   dweb-browser-dev install --url http://172.30.90.240:8080/usr/metadata.json
-   ```
+```bash
+deno install -A https://deno.land/x/plaoc/cli/plaoc.ts
+```
+
+## 打包app (bundle/build)
+
+```bash
+plaoc bundle ./dir
+```
+会打包成以下的文件夹结构，并输出压缩文件 `.zip` 和一个 `metadata.json`,详情请查看下面文档详情。
+
+- bundle
+  - appId.version.zip
+  - metadata.json
+
+### 选项
+
+- `--out`: 指定打包完的目录名称，默认为`bundle`。
+- `--version`: 指定app的版本，能覆盖`manifest.json`里面的配置。
+- `--id`: 指定app的id，能覆盖`manifest.json`里面的配置。
+- `--dir`：用来指定开发目录，即指定您创建`manifest.json`的根目录。
+### 示例
+
+```bash
+plaoc bundle  ./plaoc/demo/dist --dir ./plaoc/demo --version 0.0.2
+```
+
+## 开发者模式 （serve/preview）
+
+需要搭配开发者工具使用，这也是一个app的预览模式。
+
+```bash
+plaoc serve ./dir
+```
+
+### 选项
+
+- `--dir`：用来指定开发目录，即指定您创建`manifest.json`的根目录。
+- `--port`: 用来指定启动的服务端口。
+- `--mode`: 服务的处理模式，可以输入`www`,`live`,`prod`。
+  - `--mode www`: 将文件夹作为 usr/www 的只读文件进行启动。
+  - `--mode live`: 将本地文件夹使用动态服务器进行启, usr/www 会存在一个 index.html 中来进行跳转。
+  - `--mode prod`: 对将打包后的文件直接进行服务启动。
+
+### 示例
+
+```bash
+plaoc preview  ./plaoc/demo/dist --dir ./plaoc/demo --mode www 
+```

plaoc/cli/helper/WalkDir.ts

@@ -0,0 +1,80 @@
+import fs from "node:fs";
+import path from "node:path";
+export function* WalkAny(rootpath: string) {
+  const dirs = [rootpath];
+  for (const dirpath of dirs) {
+    for (const entryname of fs.readdirSync(dirpath)) {
+      if (entryname === ".DS_Store") {
+        continue;
+      }
+      const entrypath = path.join(dirpath, entryname);
+      const stats = fs.statSync(entrypath);
+      const isDirectory = stats.isDirectory();
+      const isFile = stats.isFile();
+      const relativepath = path.relative(rootpath, entrypath);
+      const relativedirpath = path.relative(rootpath, dirpath);
+      const entryBase = {
+        entryname,
+        entrypath,
+        dirpath,
+        rootpath,
+        relativepath,
+        relativedirpath,
+        stats,
+      };
+
+      if (isFile) {
+        yield {
+          ...entryBase,
+          isFile,
+          isDirectory: false as const,
+          readText() {
+            return fs.readFileSync(entrypath, "utf-8");
+          },
+          readJson<T>() {
+            return JSON.parse(this.readText()) as T;
+          },
+          read() {
+            return fs.readFileSync(entrypath);
+          },
+          write(content: string | Uint8Array) {
+            return fs.writeFileSync(entrypath, content);
+          },
+          writeJson(json: unknown, space?: number) {
+            return this.write(JSON.stringify(json, null, space));
+          },
+          updateText(updater: (content: string) => string) {
+            const oldContent = this.readText();
+            const newContent = updater(oldContent);
+            if (newContent !== oldContent) {
+              this.write(newContent);
+            }
+          },
+        };
+      }
+      if (isDirectory) {
+        yield {
+          ...entryBase,
+          isDirectory,
+          isFile: false as const,
+        };
+        dirs.push(entrypath);
+      }
+    }
+  }
+}
+export function* WalkFiles(rootpath: string) {
+  for (const entry of WalkAny(rootpath)) {
+    if (entry.isFile) {
+      yield entry;
+    }
+  }
+}
+
+export function* WalkDirs(rootpath: string) {
+  for (const entry of WalkAny(rootpath)) {
+    if (entry.isDirectory) {
+      yield entry;
+    }
+  }
+}

plaoc/cli/helper/zip.ts

@@ -1,7 +1,7 @@
 import JSZip from "npm:jszip";
-import { WalkAny } from "../../../scripts/helper/WalkDir.ts";
+import { WalkAny } from "./WalkDir.ts";
 
-export const bundleDirToZip = async (bundleDir: string, zip?: JSZip) => {
+export const bundleDirToZip =  (bundleDir: string, zip?: JSZip) => {
   return zipEntriesToZip(walkDirToZipEntries(bundleDir), zip);
 };
 

plaoc/cli/serve.ts

@@ -11,7 +11,7 @@ import { staticServe } from "./helper/http-static-helper.ts";
 
 export const doServe = (args = Deno.args) => {
   const flags = Flags.parse(args, {
-    string: ["port", "name", "mode"],
+    string: ["port", "mode","dir"],
     collect: ["metadata"],
     default: {
       port: 8096,
@@ -75,7 +75,7 @@ export const doServe = (args = Deno.args) => {
         console.log(
           `metadata: \thttp://${info?.address}:${port}/${nameFlagHelper.metadataName}`
         );
-        console.log(`package: \thttp://${info?.address}:${port}/${nameFlagHelper.bundleName}`)
+        // console.log(`package: \thttp://${info?.address}:${port}/${nameFlagHelper.bundleName}`)
       }
     });
 };