@peachy/plugin-resources 0.0.10

package/README.md

@@ -0,0 +1,82 @@
+# @peachy/plugin-resources
+
+Allow you to import files as resources.
+
+## Usage
+
+You will need to have peachy installed.
+
+Then, you need to create a `peachy.config.ts` file in the root of your project.
+
+```ts
+// peachy.config.ts
+
+import { defineConfig } from "@peachy/core";
+
+export default defineConfig({
+  package: {
+    name: "dev.peachy.Example"
+  },
+  resources: {
+    icons: true,
+  }
+});
+```
+
+TODO: enable this by default, skip generation if there's no resources/icons
+
+In your code, make sure to initialize your code to use the given name in your `peachy.config.ts` file.
+
+```tsx
+import Gtk from "gi://Gtk?version=4.0";
+
+const app = new Gtk.Application({
+  // IMPORTANT: match this with the one in `peachy.config.ts`
+  application_id: "dev.peachy.Example",
+  flags: Gtk.ApplicationFlags.FLAGS_NONE,
+});
+
+/// ...
+
+app.run([]);
+```
+
+Then you can start importing resources/icons.
+
+
+### Importing Files
+
+When you need to import a resource, you can directly import them. Currently, only SVG files are supported.
+
+```tsx
+import Gtk from "gi://Gtk?version=4.0";
+
+import File from "./path/to/file.svg";
+
+const image = new Gtk.Image({
+  resource: File,
+});
+```
+
+You can use the imported resource anywhere that accepts a `Gio.Resource` like `Gtk.Image` and `Gtk.Picture`.
+
+### Icons
+
+Icons in `data/icons` folder will be automatically configured and registered as Themed Icons, so you can use them just by referencing their name.
+
+#### 1. Put your icons in `data/icons` folder.
+
+```
+data/icons/right-symbolic.svg
+data/icons/left-symbolic.svg
+```
+
+#### 2. Use them in your code.
+
+```tsx
+import Gtk from "gi://Gtk?version=4.0";
+
+const button = new Gtk.Button({
+  icon_name: "right-symbolic",
+});
+```

package/dist/index.d.mts

@@ -0,0 +1,15 @@
+import { Plugin } from "rolldown";
+
+//#region src/types.d.ts
+interface ResourcesPluginOptions {
+  setRunnerEnv(key: string, value: string): void;
+  applicationId?: string;
+  prod: boolean;
+  outdir: string;
+  iconsPath?: string | false;
+}
+//#endregion
+//#region src/plugins/index.d.ts
+declare function resourcesPlugin(config: ResourcesPluginOptions): Plugin[];
+//#endregion
+export { resourcesPlugin };

package/dist/index.mjs

@@ -0,0 +1,287 @@
+import { basename, dirname, join, relative, resolve } from "node:path";
+import path from "path";
+import fs from "fs/promises";
+import { access, mkdir, mkdtempDisposable, readFile, readdir, stat, writeFile } from "node:fs/promises";
+import { exactRegex, prefixRegex } from "rolldown/filter";
+import { tmpdir } from "node:os";
+import { exec } from "node:child_process";
+import { promisify } from "node:util";
+
+//#region src/constants.ts
+const GRESOURCE_PREFIX = "\0gresource";
+const GRESOURCE_LOADER = `${GRESOURCE_PREFIX}:loader`;
+const GRESOURCE_ICONS_PATH = "icons/scalable/actions";
+
+//#endregion
+//#region src/utilities/index.ts
+function parseImportType(assertions) {
+	if (!assertions?.type) return null;
+	const type = assertions.type;
+	if (![
+		"resource",
+		"string",
+		"bytes"
+	].includes(type)) throw new SyntaxError(`Invalid gresource import type: ${type}`);
+	return type;
+}
+function getInternalResourceId(id) {
+	const normalized = id.replace(/\\/g, "/");
+	return relative(process.cwd(), normalized);
+}
+function getResourceId(prefix, id) {
+	return `${prefix}/${getInternalResourceId(id)}`;
+}
+function generateImportCode(type, resourcePath, addImportCode = false) {
+	let code;
+	switch (type) {
+		case "resource":
+			code = `export default "${resourcePath}";\n`;
+			break;
+		case "string":
+			code = [
+				`import Gio from 'gi://Gio';`,
+				`const bytes = Gio.resources_lookup_data("${resourcePath}", Gio.ResourceLookupFlags.NONE);`,
+				`export default new TextDecoder().decode(bytes.toArray());`,
+				""
+			].join("\n");
+			break;
+		case "bytes":
+			code = [
+				`import Gio from 'gi://Gio';`,
+				`export default Gio.resources_lookup_data("${resourcePath}", Gio.ResourceLookupFlags.NONE);`,
+				""
+			].join("\n");
+			break;
+	}
+	if (addImportCode) return `import ${JSON.stringify(GRESOURCE_LOADER)};${code}`;
+	return code;
+}
+async function loadIcons(prefix, path$1) {
+	if (!access(path$1).catch(() => false)) throw new Error(`Icon assets directory not found: ${path$1}`);
+	const files = await readdir(path$1, { recursive: true });
+	const collectedAssets = /* @__PURE__ */ new Map();
+	for (const file of files) {
+		const fullName = resolve(path$1, file);
+		const stats = await stat(fullName);
+		if (!fullName.endsWith(".svg") || !stats.isFile()) continue;
+		const id = relative(process.cwd(), fullName);
+		collectedAssets.set(fullName, {
+			internalResourceId: id,
+			resourceId: getResourceId(prefix, id),
+			path: fullName
+		});
+	}
+	return collectedAssets;
+}
+function getFilePath(path$1, alias) {
+	let attrs = "";
+	if (/\.(svg|xml)$/.test(path$1)) attrs = " compressed=\"true\" preprocess=\"xml-stripblanks\"";
+	else if (/\.(png|jpg|jpeg)$/.test(path$1)) attrs = " compressed=\"true\"";
+	else if (/\.(json)$/.test(path$1)) attrs = " preprocess=\"json-stripblanks\"";
+	if (alias) attrs += ` alias="${alias}"`;
+	return `    <file${attrs}>${path$1}</file>`;
+}
+function generateGResourceXML(prefix, assets, icons) {
+	const files = [...assets.values()].map(({ internalResourceId }) => getFilePath(internalResourceId)).join("\n");
+	const iconFiles = icons ? [...icons.values()].map(({ internalResourceId }) => getFilePath(internalResourceId, basename(internalResourceId))).join("\n") : "";
+	return `<?xml version="1.0" encoding="UTF-8"?>
+<gresources>
+<gresource prefix="${prefix}">
+${files}
+</gresource>
+${iconFiles ? `<gresource prefix="${prefix}/${GRESOURCE_ICONS_PATH}">
+${iconFiles}
+</gresource>` : ""}
+</gresources>`;
+}
+
+//#endregion
+//#region src/utilities/icons.ts
+async function getIconsPath(iconsPath) {
+	if (!iconsPath) return null;
+	if (!await fs.stat(iconsPath).then(() => true).catch(() => false)) return null;
+	return path.resolve(process.cwd(), iconsPath);
+}
+async function collectIcons(baseIconsPath, prefix) {
+	const iconsPath = await getIconsPath(baseIconsPath);
+	let collectedIcons = /* @__PURE__ */ new Map();
+	if (iconsPath) collectedIcons = await loadIcons(prefix, iconsPath);
+	return collectedIcons;
+}
+
+//#endregion
+//#region src/plugins/dev/index.ts
+/**
+* This plugin configures a GRESOURCES overlay for development purposes.
+*/
+function resourcesPluginOverlay({ prefix, prod, outdir, setRunnerEnv, iconsPath: baseIconsPath }) {
+	if (prod) return null;
+	const collectedResources = /* @__PURE__ */ new Map();
+	const devResourcesOverlay = path.join(outdir, "_peachy_resources");
+	let iconsLinked = false;
+	setRunnerEnv("G_RESOURCE_OVERLAYS", `${prefix}=${devResourcesOverlay}`);
+	return {
+		name: "@peachy/plugin-resources#bundle-dev",
+		load: {
+			filter: { id: prefixRegex(`${GRESOURCE_PREFIX}:`) },
+			handler(id) {
+				const [, importType, path$1] = id.split(":", 3);
+				if (!path$1) return;
+				const resourceId = getResourceId(prefix, path$1);
+				collectedResources.set(path$1, {
+					resourceId,
+					path: path$1,
+					internalResourceId: getInternalResourceId(path$1)
+				});
+				return generateImportCode(importType, resourceId, false);
+			}
+		},
+		async buildStart() {
+			if (iconsLinked) return;
+			iconsLinked = true;
+			const iconsPath = await getIconsPath(baseIconsPath ?? false);
+			if (!iconsPath) return;
+			const linkPath = path.join(devResourcesOverlay, GRESOURCE_ICONS_PATH);
+			await fs.mkdir(path.dirname(linkPath), { recursive: true });
+			await fs.lstat(linkPath).then(() => fs.unlink(linkPath)).catch(() => {});
+			await fs.symlink(iconsPath, linkPath);
+		},
+		async writeBundle() {
+			await fs.mkdir(devResourcesOverlay, { recursive: true });
+			const currentPaths = new Set(Array.from(collectedResources.values()).map((r) => r.internalResourceId));
+			const existing = await fs.readdir(devResourcesOverlay, {
+				recursive: true,
+				withFileTypes: true
+			});
+			for (const entry of existing) {
+				if (!entry.isSymbolicLink()) continue;
+				const fullPath = path.resolve(entry.parentPath, entry.name);
+				const relativePath = path.relative(devResourcesOverlay, fullPath);
+				if (currentPaths.has(relativePath) || relativePath === GRESOURCE_ICONS_PATH) continue;
+				await fs.unlink(fullPath);
+			}
+			for (const [, { path: filePath, internalResourceId }] of collectedResources) {
+				const linkPath = path.join(devResourcesOverlay, internalResourceId);
+				try {
+					await fs.lstat(linkPath);
+				} catch {
+					await fs.mkdir(path.dirname(linkPath), { recursive: true });
+					await fs.symlink(filePath, linkPath);
+				}
+			}
+			collectedResources.clear();
+		}
+	};
+}
+
+//#endregion
+//#region src/plugins/prod/index.ts
+const exec$1 = promisify(exec);
+function resourcesPluginGenerateXML({ prefix, gresourceName, gresourcePath, prod, iconsPath }) {
+	if (!prod) return null;
+	const collectedResources = /* @__PURE__ */ new Map();
+	return {
+		name: "@peachy/plugin-resources#bundle-prod",
+		load: {
+			filter: { id: prefixRegex(`${GRESOURCE_PREFIX}:`) },
+			handler(id) {
+				const [, _importType, path$1] = id.split(":", 3);
+				if (!path$1) return;
+				const importType = _importType;
+				const resourceId = getResourceId(prefix, path$1);
+				collectedResources.set(path$1, {
+					resourceId,
+					path: path$1,
+					internalResourceId: getInternalResourceId(path$1)
+				});
+				return generateImportCode(importType, resourceId, true);
+			}
+		},
+		async generateBundle() {
+			const collectedIcons = await collectIcons(iconsPath ?? false, prefix);
+			if (collectedResources.size === 0 && collectedIcons.size === 0) return;
+			const xmlPath = join((await mkdtempDisposable(join(tmpdir(), "peachy-resource-build"))).path, "gresources.xml");
+			await writeFile(xmlPath, generateGResourceXML(prefix, collectedResources, collectedIcons));
+			await mkdir(dirname(gresourcePath), { recursive: true });
+			await exec$1(`glib-compile-resources --sourcedir=${process.cwd()} --target=${gresourcePath} ${xmlPath}`, { env: { ...process.env } });
+			this.emitFile({
+				type: "asset",
+				fileName: gresourceName,
+				source: await readFile(gresourcePath)
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/plugins/resolve.ts
+/**
+* This plugin monitors all imports, and decides if the import is a resource.
+*
+* Then it replaces the import with some code that registers the resource.
+*/
+function resourcesPluginResolve() {
+	return {
+		name: "@peachy/plugin-resources#resolve",
+		resolveId: {
+			filter: { id: /\.svg$/ },
+			handler(id, importer) {
+				const importType = parseImportType({ type: "resource" });
+				if (!importType) return null;
+				return `${GRESOURCE_PREFIX}:${importType}:${importer ? path.resolve(path.dirname(importer), id) : path.resolve(id)}`;
+			}
+		}
+	};
+}
+
+//#endregion
+//#region src/plugins/loader.ts
+/**
+* This plugin injects some code that loads and registers our application's
+* GResource
+*/
+function resourcesPluginLoader({ gresourcePath }) {
+	return {
+		name: "@peachy/plugin-resources#loader",
+		resolveId: {
+			filter: { id: exactRegex(GRESOURCE_LOADER) },
+			handler(id) {
+				return id;
+			}
+		},
+		load: {
+			filter: { id: exactRegex(GRESOURCE_LOADER) },
+			handler() {
+				return [
+					`import Gio from "gi://Gio";`,
+					`const resource = Gio.Resource.load("${gresourcePath}");`,
+					`resource._register();`
+				].join("\n");
+			}
+		}
+	};
+}
+
+//#endregion
+//#region src/plugins/index.ts
+function resourcesPlugin(config) {
+	const pkgName = config.applicationId || "dev.peachy.application";
+	const prefix = "/" + pkgName.replaceAll(".", "/");
+	const gresourceName = `${pkgName}.gresource`;
+	const gresourcePath = join(config.outdir, gresourceName);
+	const resourcesOptions = {
+		...config,
+		gresourceName,
+		gresourcePath,
+		prefix
+	};
+	return [
+		resourcesPluginResolve(),
+		resourcesPluginLoader(resourcesOptions),
+		resourcesPluginOverlay(resourcesOptions),
+		resourcesPluginGenerateXML(resourcesOptions)
+	].filter(Boolean);
+}
+
+//#endregion
+export { resourcesPlugin };

package/dist/types/global.d.mts

@@ -0,0 +1,5 @@
+//#region src/types/global.d.ts
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@peachy/plugin-resources",
+  "version": "0.0.10",
+  "type": "module",
+  "description": "Import resources in your app",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    },
+    "./types": {
+      "types": "./dist/types/global.d.mts"
+    }
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^25.0.9",
+    "rolldown": "1.0.0-beta.60",
+    "tsdown": "0.20.0-beta.4",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "rolldown": "1.0.0-beta.58"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown src/index.ts src/types/global.d.ts --dts"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./plugins";