From 36ecc51f5bf88f52c642a1ca315abcb5cc1dd7d4 Mon Sep 17 00:00:00 2001 From: waterbang <409071692@qq.com> Date: Tue, 6 Jun 2023 18:30:50 +0800 Subject: [PATCH] :memo: Update doc and fix remote cli install --- .../helper => desktop-dev/scripts}/WalkDir.ts | 0 desktop-dev/scripts/dnt.ts | 2 +- desktop-dev/scripts/migrate.ts | 3 +- plaoc/README.md | 24 ++++-- plaoc/README_US.md | 38 +++++++++ plaoc/cli/README.md | 62 +++++++++++--- plaoc/cli/helper/WalkDir.ts | 80 +++++++++++++++++++ plaoc/cli/helper/zip.ts | 4 +- plaoc/cli/serve.ts | 4 +- 9 files changed, 193 insertions(+), 24 deletions(-) rename {scripts/helper => desktop-dev/scripts}/WalkDir.ts (100%) create mode 100644 plaoc/README_US.md create mode 100644 plaoc/cli/helper/WalkDir.ts diff --git a/scripts/helper/WalkDir.ts b/desktop-dev/scripts/WalkDir.ts similarity index 100% rename from scripts/helper/WalkDir.ts rename to desktop-dev/scripts/WalkDir.ts diff --git a/desktop-dev/scripts/dnt.ts b/desktop-dev/scripts/dnt.ts index 0f40fc20f7..12998e270f 100644 --- a/desktop-dev/scripts/dnt.ts +++ b/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 diff --git a/desktop-dev/scripts/migrate.ts b/desktop-dev/scripts/migrate.ts index 484bfa5462..bcc2f27045 100644 --- a/desktop-dev/scripts/migrate.ts +++ b/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); diff --git a/plaoc/README.md b/plaoc/README.md index b125097f09..1adbb11ea8 100644 --- a/plaoc/README.md +++ b/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 diff --git a/plaoc/README_US.md b/plaoc/README_US.md new file mode 100644 index 0000000000..bf1c517915 --- /dev/null +++ b/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 +``` \ No newline at end of file diff --git a/plaoc/cli/README.md b/plaoc/cli/README.md index d6ec495eca..0386375232 100644 --- a/plaoc/cli/README.md +++ b/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 +``` \ No newline at end of file diff --git a/plaoc/cli/helper/WalkDir.ts b/plaoc/cli/helper/WalkDir.ts new file mode 100644 index 0000000000..3cf2458b54 --- /dev/null +++ b/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() { + 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; + } + } +} diff --git a/plaoc/cli/helper/zip.ts b/plaoc/cli/helper/zip.ts index 137da7f6bc..0a62395652 100644 --- a/plaoc/cli/helper/zip.ts +++ b/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); }; diff --git a/plaoc/cli/serve.ts b/plaoc/cli/serve.ts index b1c07b3520..e5ab2aee3d 100644 --- a/plaoc/cli/serve.ts +++ b/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}`) } }); };