@peachy/plugin-resources 0.0.10 → 0.0.11

package/README.md

@@ -2,11 +2,19 @@
 
 Allow you to import files as resources.
 
+> NOTE: In dev mode, your resources will NOT be watched for changes and live-reloaded.
+
 ## Usage
 
-You will need to have peachy installed.
+You will need to have `peachy` installed.
+
+### Configuration
+
+Then you will need to create a peachy configuration file. There are two ways to do this:
 
-Then, you need to create a `peachy.config.ts` file in the root of your project.
+#### 1. Use `peachy.config.ts`
+
+You can create a `peachy.config.ts` file in the root of your project.
 
 ```ts
 // peachy.config.ts
@@ -14,16 +22,30 @@ Then, you need to create a `peachy.config.ts` file in the root of your project.
 import { defineConfig } from "@peachy/core";
 
 export default defineConfig({
-  package: {
-    name: "dev.peachy.Example"
-  },
+  applicationId: "dev.peachy.Example",
   resources: {
     icons: true,
-  }
+  },
 });
 ```
 
-TODO: enable this by default, skip generation if there's no resources/icons
+#### 2. Use a field in `package.json`
+
+You can also add a special `peachy` field in your existing package.json
+
+```json
+// package.json
+{
+  "peachy": {
+    "applicationId": "dev.peachy.Example",
+    "resources": {
+      "icons": true
+    }
+  }
+}
+```
+
+### Initialization
 
 In your code, make sure to initialize your code to use the given name in your `peachy.config.ts` file.
 
@@ -31,7 +53,7 @@ In your code, make sure to initialize your code to use the given name in your `p
 import Gtk from "gi://Gtk?version=4.0";
 
 const app = new Gtk.Application({
-  // IMPORTANT: match this with the one in `peachy.config.ts`
+  // IMPORTANT: match this with the one in the configuration file
   application_id: "dev.peachy.Example",
   flags: Gtk.ApplicationFlags.FLAGS_NONE,
 });
@@ -43,7 +65,6 @@ 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.
@@ -64,6 +85,22 @@ You can use the imported resource anywhere that accepts a `Gio.Resource` like `G
 
 Icons in `data/icons` folder will be automatically configured and registered as Themed Icons, so you can use them just by referencing their name.
 
+If your icons are in a different folder, you can specify the path in the configuration file.
+
+```ts
+// peachy.config.ts
+
+import { defineConfig } from "@peachy/core";
+
+export default defineConfig({
+  applicationId: "dev.peachy.Example",
+  resources: {
+    // specify the path to your icons folder
+    icons: "./path/to/icons",
+  },
+});
+```
+
 #### 1. Put your icons in `data/icons` folder.
 
 ```
@@ -80,3 +117,34 @@ const button = new Gtk.Button({
   icon_name: "right-symbolic",
 });
 ```
+
+### Bundle resources
+
+If you have resources that you want to always be bundled in your application, you can "bundle" them.
+
+These files can be read by objects that uses "Automatic resources" such as
+[Gtk.Application](https://gnome.pages.gitlab.gnome.org/gtk/gtk4/class.Application.html#automatic-resources) and
+[Adw.Application](https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Application.html).
+
+A few use cases are given below:
+
+- The `gtk/help-overlay.ui` file will be used to display application help.
+- The `style.css` file will be automatically loaded and applied to your application.
+
+```ts
+// peachy.config.ts
+
+import { defineConfig } from "@peachy/core";
+
+export default defineConfig({
+  applicationId: "dev.peachy.Example",
+  resources: {
+    bundle: [
+      // this assumes that the file is located at `gtk/help-overlay.ui`
+      "gtk/help-overlay.ui",
+      // if you have a file located elsewhere, you can specify the path and alias it will be available at
+      { path: "./path/to/style.css", alias: "style.css" },
+    ],
+  },
+});
+```

package/dist/index.d.mts

@@ -2,12 +2,17 @@ import { Plugin } from "rolldown";
 
 //#region src/types.d.ts
 interface ResourcesPluginOptions {
-  setRunnerEnv(key: string, value: string): void;
+  setRunnerEnv(this: void, key: string, value: string): void;
   applicationId?: string;
   prod: boolean;
   outdir: string;
   iconsPath?: string | false;
+  bundle?: BundledResource[];
 }
+type BundledResource = string | {
+  alias?: string;
+  path: string;
+};
 //#endregion
 //#region src/plugins/index.d.ts
 declare function resourcesPlugin(config: ResourcesPluginOptions): Plugin[];

package/dist/index.mjs

@@ -1,10 +1,10 @@
 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 path from "path";
 import { exactRegex, prefixRegex } from "rolldown/filter";
-import { tmpdir } from "node:os";
+import { access, mkdir, mkdtempDisposable, readFile, readdir, stat, writeFile } from "node:fs/promises";
 import { exec } from "node:child_process";
+import { tmpdir } from "node:os";
 import { promisify } from "node:util";
 
 //#region src/constants.ts
@@ -67,8 +67,7 @@ async function loadIcons(prefix, path$1) {
 		const id = relative(process.cwd(), fullName);
 		collectedAssets.set(fullName, {
 			internalResourceId: id,
-			resourceId: getResourceId(prefix, id),
-			path: fullName
+			resourceId: getResourceId(prefix, id)
 		});
 	}
 	return collectedAssets;
@@ -82,8 +81,8 @@ function getFilePath(path$1, 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") : "";
+	const files = Array.from(assets).map(([id, { internalResourceId }]) => getFilePath(id, internalResourceId)).join("\n");
+	const iconFiles = icons ? Array.from(icons).map(([id, { internalResourceId }]) => getFilePath(id, basename(internalResourceId))).join("\n") : "";
 	return `<?xml version="1.0" encoding="UTF-8"?>
 <gresources>
 <gresource prefix="${prefix}">
@@ -95,6 +94,21 @@ ${iconFiles}
 </gresources>`;
 }
 
+//#endregion
+//#region src/utilities/bundle.ts
+function addBundledResources(collectedResources, prefix, bundle = []) {
+	for (const bundledResource of bundle) {
+		const resourcePath = typeof bundledResource == "string" ? bundledResource : bundledResource.path;
+		const resourceAlias = typeof bundledResource == "object" ? bundledResource.alias : null;
+		const id = path.resolve(process.cwd(), resourcePath);
+		const internalResourceId = resourceAlias ?? resourcePath;
+		collectedResources.set(id, {
+			internalResourceId,
+			resourceId: getResourceId(prefix, internalResourceId)
+		});
+	}
+}
+
 //#endregion
 //#region src/utilities/icons.ts
 async function getIconsPath(iconsPath) {
@@ -114,7 +128,7 @@ async function collectIcons(baseIconsPath, prefix) {
 /**
 * This plugin configures a GRESOURCES overlay for development purposes.
 */
-function resourcesPluginOverlay({ prefix, prod, outdir, setRunnerEnv, iconsPath: baseIconsPath }) {
+function resourcesPluginOverlay({ prefix, prod, outdir, setRunnerEnv, iconsPath: baseIconsPath, bundle }) {
 	if (prod) return null;
 	const collectedResources = /* @__PURE__ */ new Map();
 	const devResourcesOverlay = path.join(outdir, "_peachy_resources");
@@ -130,7 +144,6 @@ function resourcesPluginOverlay({ prefix, prod, outdir, setRunnerEnv, iconsPath:
 				const resourceId = getResourceId(prefix, path$1);
 				collectedResources.set(path$1, {
 					resourceId,
-					path: path$1,
 					internalResourceId: getInternalResourceId(path$1)
 				});
 				return generateImportCode(importType, resourceId, false);
@@ -148,6 +161,7 @@ function resourcesPluginOverlay({ prefix, prod, outdir, setRunnerEnv, iconsPath:
 		},
 		async writeBundle() {
 			await fs.mkdir(devResourcesOverlay, { recursive: true });
+			addBundledResources(collectedResources, prefix, bundle);
 			const currentPaths = new Set(Array.from(collectedResources.values()).map((r) => r.internalResourceId));
 			const existing = await fs.readdir(devResourcesOverlay, {
 				recursive: true,
@@ -160,7 +174,7 @@ function resourcesPluginOverlay({ prefix, prod, outdir, setRunnerEnv, iconsPath:
 				if (currentPaths.has(relativePath) || relativePath === GRESOURCE_ICONS_PATH) continue;
 				await fs.unlink(fullPath);
 			}
-			for (const [, { path: filePath, internalResourceId }] of collectedResources) {
+			for (const [filePath, { internalResourceId }] of collectedResources) {
 				const linkPath = path.join(devResourcesOverlay, internalResourceId);
 				try {
 					await fs.lstat(linkPath);
@@ -174,10 +188,38 @@ function resourcesPluginOverlay({ prefix, prod, outdir, setRunnerEnv, iconsPath:
 	};
 }
 
+//#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/prod/index.ts
 const exec$1 = promisify(exec);
-function resourcesPluginGenerateXML({ prefix, gresourceName, gresourcePath, prod, iconsPath }) {
+function resourcesPluginGenerateXML({ prefix, gresourceName, gresourcePath, prod, iconsPath, bundle }) {
 	if (!prod) return null;
 	const collectedResources = /* @__PURE__ */ new Map();
 	return {
@@ -191,7 +233,6 @@ function resourcesPluginGenerateXML({ prefix, gresourceName, gresourcePath, prod
 				const resourceId = getResourceId(prefix, path$1);
 				collectedResources.set(path$1, {
 					resourceId,
-					path: path$1,
 					internalResourceId: getInternalResourceId(path$1)
 				});
 				return generateImportCode(importType, resourceId, true);
@@ -199,9 +240,12 @@ function resourcesPluginGenerateXML({ prefix, gresourceName, gresourcePath, prod
 		},
 		async generateBundle() {
 			const collectedIcons = await collectIcons(iconsPath ?? false, prefix);
+			addBundledResources(collectedResources, prefix, bundle);
 			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));
+			const xml = generateGResourceXML(prefix, collectedResources, collectedIcons);
+			await writeFile(xmlPath, xml);
+			console.log("xml", xml);
 			await mkdir(dirname(gresourcePath), { recursive: true });
 			await exec$1(`glib-compile-resources --sourcedir=${process.cwd()} --target=${gresourcePath} ${xmlPath}`, { env: { ...process.env } });
 			this.emitFile({
@@ -234,34 +278,6 @@ function resourcesPluginResolve() {
 	};
 }
 
-//#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) {

package/dist/{types/global.d.mts → modules.d.mts}

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

package/package.json

@@ -1,33 +1,33 @@
 {
   "name": "@peachy/plugin-resources",
-  "version": "0.0.10",
-  "type": "module",
+  "version": "0.0.11",
   "description": "Import resources in your app",
-  "main": "./src/index.ts",
+  "license": "MIT",
+  "author": "",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.mts"
     },
-    "./types": {
-      "types": "./dist/types/global.d.mts"
+    "./modules": {
+      "types": "./dist/modules.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"
+    "typescript": "^5.9.3",
+    "@peachy/internal-utilities": "0.0.0"
   },
   "peerDependencies": {
     "rolldown": "1.0.0-beta.58"
   },
-  "files": [
-    "dist"
-  ],
   "scripts": {
-    "build": "tsdown src/index.ts src/types/global.d.ts --dts"
+    "build": "tsdown src/index.ts src/modules.d.ts --dts"
   }
 }

package/src/index.ts

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