# sciter-study

**Repository Path**: web_74/sciter-study

## Basic Information

- **Project Name**: sciter-study
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-17
- **Last Updated**: 2026-10-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 文件监听器

基于 **Sciter.JS** 的文件变动监听工具，实时显示目录下文件的增删改事件。

## 功能

- 实时监听当前目录的文件变动
- 日志记录变动事件（创建/修改/删除）
- 启动/停止监听控制
- 一键清空日志
- 浅色高对比度主题

## 快速开始

### 开发模式运行

双击 `run.bat`，或命令行：

```cmd
run.bat
```

使用 `usciter.exe` 加载 `index.html`，支持热修改——改完代码重新运行即可看到效果。

### 打包成独立 exe

双击 `build.bat`，或命令行：

```cmd
build.bat
```

生成 `filewatcher.exe`（约 18.5MB），包含所有资源，可独立分发，无需安装 SDK。

---

## Sciter.JS 官方手册要点

### JS 运行时

Sciter.JS 使用 **QuickJS** 引擎，支持 **ES2020 superset**，内置 JSX 和 Reactor。

#### 内置模块

| 模块 | 用途 | 示例 |
|------|------|------|
| `@sys` | 文件系统/网络/进程（基于 libuv） | `import * as sys from "@sys"` |
| `@env` | 环境信息（OS/平台/路径） | `import * as env from "@env"` |
| `@sciter` | Sciter 专用函数 | `import { on, off } from "@sciter"` |
| `@debug` | 调试支持 | `import * as dbg from "@debug"` |

#### 预定义常量

- `__FILE__` — 当前文件 URL
- `__DIR__` — 当前目录 URL（末尾含 `/`）
- `__LINE__` — 行号

### 第三方 JS 库支持

**纯 JS 的 ES Module 库都能用**，直接 `import` 即可。不能用依赖 Node.js API（`fs`/`Buffer`/`process`）或浏览器独有 API（Web Workers 等）的库。

| 库 | 支持 | 说明 |
|---|---|---|
| **dayjs** | ✅ | 纯 JS、无依赖、ESM 版本，直接 `import dayjs from "./dayjs.min.js"` |
| **lodash-es** | ✅ | ESM 版本可用，建议按需导入单函数减小体积 |
| **lodash** (CJS) | ⚠️ | 需 `samples/commonJS/require.js` 提供 CommonJS 支持 |
| **Preact** | ✅ SDK 自带 | `samples/preact/preact.js`，设 `JSX = h` 即可 |
| **Vue 3** | ✅ SDK 自带 | `samples/vue/vue-esm.js` |
| **React** | ✅ 第三方 | github.com/veluxa/sciterjs-react |
| **Mithril** | ✅ SDK 自带 | `samples/mithril/` |

NPM 风格模块解析（`@sciter`）：

```js
import * as srt from "@sciter";
srt.setModuleUrlResolver((name, dir) => `${dir}node_modules/${name}/index.js`);
```

### Reactor（UI 框架）

Reactor 是 Sciter 内置功能，非外部库。核心 API：

```js
const { signal, computed, effect } = Reactor;

// signal：响应式值，用 .value 读写
const count = signal(0);
count.value++;          // 触发更新

// computed：计算 signal
const double = computed(() => count.value * 2);

// effect：副作用，自动追踪依赖
effect(() => console.log(count.value));

// 函数组件
function App() {
  return <div>计数: {count.value}</div>;
}

// 渲染
document.body.append(<App/>);
```

### CSS 布局

Sciter 用 **flow + flex 单位** 替代 `display:flexbox`：

```css
container {
  flow: vertical;        /* 或 horizontal / horizontal-wrap / stack / grid() */
  border-spacing: 8px;   /* 子元素间距 */
}
child {
  width: *;              /* flex 填充，等价 flex:1 */
  height: *;             /* flex 填充 */
}
```

**注意**：Sciter 对 CSS 变量 `var()` 支持不完整，建议直接写颜色值。

### JSX 语法

```jsx
<div.app>                  // class 快捷写法
<button.danger>            // 多 class
<input|text(name) />       // type + name 快捷写法
<span :checked={true} />   // 运行时状态
<div state-value={x} />    // 运行时 value
```

---

## 打包运行说明（官方手册）

### scapp.exe 启动方式

```cmd
scapp.exe index.htm          :: HTML 窗口模式
scapp.exe run.js             :: bootstrap 模式
scapp.exe                    :: 不带参数按序查找: run.js → scapp.htm → main.htm → index.htm
scapp.exe index.htm --debug  :: 调试模式
```

### 打包成独立 exe

打包分两步：

**1. packfolder 生成 .dat 资源包**（`-binary` 生成二进制，`-i` 只打包指定文件）：

```cmd
packfolder.exe appfolder output.dat -binary -i "index.html"
```

**2. scapp.assembleExe 组装最终 exe**（更新 PE 头 + 追加资源）：

```js
Window.this.scapp.assembleExe(scappPath, datFile, exeFile, {
  productName: "MyApp",
  productVersion: "1.0.0",
});
```

> **注意**：不能简单 `copy /b scapp.exe + resources.dat`，必须用 `assembleExe` API 正确更新 PE 头。也不能 `packfolder folder exe.exe` 不加 `-binary`，那样生成的是 C 源码不是二进制。

打包后 exe 从自身读取资源，URL 为 `this://app/`。启动时在资源根目录按序查找 `run.js` → `index.htm` → `main.htm`。

### Bootstrap 模式（run.js）

用于窗口创建前初始化。**仅限** `@env`/`@sys`/`@sciter`，**无** DOM/fetch/setTimeout。

```js
import * as env from "@env";

application.start("gpu");   // 图形后端
const win = new Window({ url: __DIR__ + "main.htm" });
win.on("close", () => application.quit(0));
application.run();          // 消息循环
```

### 图形后端

| 值 | 平台 | 说明 |
|---|---|---|
| `gpu` | 全部 | 默认，自动选最快 |
| `direct2d` | Windows | Windows 默认 |
| `opengl` | 全部 | 跨平台 |
| `vulkan` | Win/Linux | |
| `metal` | macOS | |
| `raster` | 全部 | 软件渲染 |

---

## 技术栈

| 项目 | 说明 |
|------|------|
| 运行时 | Sciter.JS（QuickJS + libuv） |
| UI 框架 | Sciter Reactor（函数组件 + Signals） |
| 文件监听 | `@sys` 模块 `sys.fs.watch()` |
| 布局 | Sciter flow + flex 单位（`flow: vertical` / `width: *`） |
| 样式 | CSS（直接颜色值，不用 CSS 变量） |

## 核心代码

```javascript
import * as sys from "@sys";
const { signal } = Reactor;

const dir = URL.toPath(__DIR__);
const watcher = sys.fs.watch(dir, (path, event) => {
  addLog("event", path + " [" + event + "]");
});
```

## 文件说明

```
test/
├── index.html       # 主界面（Reactor + @sys 文件监听）
├── run.bat          # 开发模式启动
├── build.bat        # 打包成独立 exe
├── pack.htm         # 打包脚本（Sciter 窗口，调用 assembleExe）
├── pack.js          # 打包逻辑（assembleExe API）
├── filewatcher.exe  # 打包产物（约 18.5MB，可独立分发）
└── readme.md        # 本文档
```

## SDK 依赖

Sciter.JS SDK 位于 `E:\code\web\sciter-js-sdk\`，需包含：

- `bin/windows/x64/usciter.exe` — 开发调试
- `bin/windows/x64/scapp.exe` — 打包容器
- `bin/windows/packfolder.exe` — 资源打包