バンドルするリソース

実行ファイルにコンパイルしないファイル（画像、テンプレート、JSON、その他のデータ）は resources/ ディレクトリに置きます。CLI はその内容をパッケージ後のアプリにコピーします。実行中のアプリはリソースディレクトリから読みます。起動時のカレントディレクトリには依存しません。

カスタムフォントは別オプションです。フォントを参照してください。

#resources ディレクトリ

my-app/
├── resources/
│   ├── icon.png
│   ├── hero.png
│   └── copy/
│       └── template.txt
├── app.tsx
└── quickgui.config.ts

各ファイルは resources/ からの相対パスを保ちます。resources/hero.png は hero.png としてインストールされます。resources/copy/template.txt は copy/template.txt としてインストールされます。行き先の名前は、fonts、AppIcon.icns、quickgui.json、ホスト共有ライブラリなどの予約名を置き換えてはいけません。

quickgui dev と quickgui build はどちらもこれらのファイルをステージします。設定に書いた追加パスが無いとビルドは失敗します。resources/ ディレクトリ自体は任意です。

#追加ファイル

resources 設定で、同じパッケージ先に追加のファイルやフォルダをマージします。各追加パスはベース名でコピーされます。プロジェクトの resources/ フォルダはここに書かないでください。自動で含まれます。

import { defineConfig } from "@quickgui/cli";

export default defineConfig({
  language: "typescript",
  name: "My App",
  identifier: "com.example.my-app",
  entry: "app.tsx",
  resources: ["legal/NOTICE.txt", "vendor/data"],
  fonts: ["assets/MyFont.ttf"],
});

legal/NOTICE.txt は NOTICE.txt としてインストールされます。vendor/data は data/ としてインストールされます。

#インストール先

実行時はパッケージ名を resourceDir に結合してください。プロジェクトツリーやカレントディレクトリからは読まないでください。

#ファイルの読み込み

app.whenReady() を待ってから、パッケージ後の名前を resourceDir に結合します。

import { join } from "node:path";
import { app, Window } from "@quickgui/native";
import { Image, createRenderer } from "@quickgui/solid";

await app.whenReady();
const paths = await app.getPaths();
const hero = join(paths!.resourceDir, "hero.png");

new Window({
  title: "My App",
  renderer: createRenderer(() => (
    <Image source={hero} style={{ width: 160, height: 120 }} />
  )),
});

Image はそのファイルシステムパスを受け取ります。他のファイルも同じ結合を使います。Bun.file や readFileSync で読みます。相対画像パスはリソースディレクトリに対して解決されません。

#フォント

fonts は OpenType ファイルです。CLI はそれらをリソースディレクトリ内の fonts/ にコピーし、最初のウィンドウを開く前に登録します。

export default defineConfig({
  language: "typescript",
  name: "My App",
  identifier: "com.example.my-app",
  entry: "app.tsx",
  fonts: ["assets/MyFont.ttf"],
});

style ではフォントファミリー名を使います。フォントは resources/ の代わりにはなりません。画像や JSON は、そのディレクトリか追加の resources リストに置きます。