Implemented app metadata

Author: Prozilla

.gitignore

@@ -11,4 +11,5 @@ yarn-error.log*
 *.ini
 
 /tmp
-demo/public/config/tree.json
+demo/public/config/tree.json
+vite.config.ts.timestamp-*.mjs

docs/src/reference/apps/app-center/index.md

@@ -0,0 +1,7 @@
+---
+outline: deep
+---
+
+# @prozilla-os/app-center
+
+<!--@include: ../../../../../packages/apps/app-center/README.md{13,}-->

packages/apps/app-center/src/components/header/Header.tsx

@@ -26,9 +26,9 @@ export function Header({ searchQuery, setSearchQuery, category, setCategory }: H
 		<select className={styles.CategoryInput} value={category} onChange={handleCategoryChange}>
 			<option value={"All"}>All</option>
 			{APP_CATEGORIES.filter((category) => {
-				return appsConfig.getAppsByCategory(category).length > 0
+				return appsConfig.getAppsByCategory(category).length > 0;
 			}).map((category) =>
-				<option value={category}>{category}</option>
+				<option key={category} value={category}>{category}</option>
 			)}
 		</select>
 	</div>;

packages/core/src/features/apps/app.tsx

@@ -5,6 +5,12 @@ import { APP_CATEGORIES } from "../../constants/apps.const";
 
 const validIdRegex = /^[a-zA-Z0-9-]+$/;
 
+interface AppMetadata {
+	name: string;
+	version: `${number}.${number}.${number}`;
+	author: string;
+}
+
 /**
  * An application that can be ran by ProzillaOS
  * Applications can be installed by adding them to the `apps` array in {@link AppsConfig}
@@ -70,6 +76,11 @@ export class App<AppProps extends WindowProps = WindowProps> {
 	 */
 	category: typeof APP_CATEGORIES[number] | null = null;
 
+	/**
+	 * Metadata of the app's package
+	 */
+	metadata: AppMetadata | null = null;
+
 	isActive: boolean = false;
 	isPinned?: boolean;
 	isInstalled = true;
@@ -165,4 +176,9 @@ export class App<AppProps extends WindowProps = WindowProps> {
 		this.category = category;
 		return this;
 	}
+
+	setMetadata(metadata: AppMetadata | null): this {
+		this.metadata = metadata;
+		return this;
+	}
 }

packages/dev-tools/src/configs/app.vite.config.ts

@@ -3,6 +3,7 @@ import react from "@vitejs/plugin-react-swc";
 import dts from "vite-plugin-dts";
 import cssInjectedByJs from "vite-plugin-css-injected-by-js";
 import { posix, resolve, sep } from "path";
+import { appMetadataPlugin } from "../plugins";
 
 /**
  * Helper function for creating Vite configurations for ProzillaOS apps
@@ -23,15 +24,18 @@ export const appViteConfig = (basePath: string, entryPath: string): UserConfig =
 
 	return {
 		plugins: [
+			appMetadataPlugin({
+				entryPath,
+			}),
 			react(),
 			cssInjectedByJs(),
 			dts({
 				outDir: "dist",
 				rollupTypes: true,
 				strictOutput: true,
 				pathsToAliases: false,
-				tsconfigPath: "tsconfig.build.json"
-			})
+				tsconfigPath: "tsconfig.build.json",
+			}),
 		],
 		build: {
 			lib: {
@@ -41,11 +45,12 @@ export const appViteConfig = (basePath: string, entryPath: string): UserConfig =
 			rollupOptions: {
 				external: ["react", "react/jsx-runtime", "@prozilla-os/core", "@prozilla-os/shared", /@fortawesome\/*/g],
 				output: {
-					assetFileNames: "chunks/[name][extname]",
+					assetFileNames: "assets/[name][extname]",
+					chunkFileNames: "chunks/[name]-[hash].js",
 					entryFileNames: "[name].js",
-				}
+				},
 			},
-			sourcemap: true
-		}
+			sourcemap: true,
+		},
 	};
 };

packages/dev-tools/src/plugins/appMetadata.ts

@@ -0,0 +1,76 @@
+import { readFileSync } from "fs";
+import { resolve } from "path";
+import { RollupError } from "rollup";
+import { Plugin } from "vite";
+
+interface PackageJson {
+	name: string;
+	version: string;
+	author?: string | { name: string };
+}
+
+interface AppMetadataPluginOptions {
+	entryPath: string;
+}
+
+export function appMetadataPlugin({ entryPath }: AppMetadataPluginOptions): Plugin {
+	return {
+		name: "vite-plugin-app-metadata",
+		apply: "build",
+		load(id) {
+			if (!id.includes(entryPath)) return null;
+		
+			const rootDir = process.cwd();
+			const packageJsonPath = resolve(rootDir, "package.json");
+		
+			// Read and parse the package.json file
+			let packageJson: PackageJson | null = null;
+			try {
+				const packageJsonContent = readFileSync(packageJsonPath, "utf-8");
+				packageJson = JSON.parse(packageJsonContent) as PackageJson;
+			} catch (error) {
+				this.error(error as RollupError);
+			}
+
+			if (!packageJson)
+				return null;
+		
+			const { name, version } = packageJson;
+			let { author = "Unknown" } = packageJson;
+
+			if (typeof author == "string") {
+				author = author.replace(/<[^>]*>|\([^)]*\)/g, "").trim();
+			} else {
+				author = author.name;
+			}
+		
+			// Read the source file content
+			let code: string | null = null;
+			try {
+				code = readFileSync(id, "utf-8");
+			} catch (error) {
+				this.error(error as RollupError);
+			}
+
+			if (code == null)
+				return null;
+
+			// Find instance of app class
+			const appInstanceRegex = /const\s+(\w+)\s*=\s*new\s+App(?:<[\w\s,]+>)?\s*\(([^;]*)\)\s*(\.[\w]+\([^)]*\)\s*)*;/;
+			const match = code.match(appInstanceRegex);
+		
+			if (match) {
+				const appInstanceName = match[1];
+		
+				// Inject code to set metadata of app
+				const injectCode = `\n${appInstanceName}.setMetadata({ name: "${name}", version: "${version}", author: "${author}" });\n`;
+				const modifiedCode = code.replace(appInstanceRegex, match[0] + injectCode);
+		
+				return modifiedCode; 
+			} else {
+				this.warn("No App instance found in the entry file.");
+				return null;
+			}
+		},
+	};
+}

packages/dev-tools/src/plugins/index.ts

@@ -1,3 +1,4 @@
 export { stageSitePlugin } from "./stageSite";
+export { appMetadataPlugin } from "./appMetadata";
 
 export type { StageOptions } from "./stageSite";

packages/dev-tools/src/plugins/stageSite.ts

@@ -127,7 +127,7 @@ function generate404Page(context: PluginContext, template: string) {
 	context.emitFile({
 		type: "asset",
 		fileName: "404.html",
-		source: template
+		source: template,
 	});
 }
 
@@ -164,7 +164,7 @@ function generateAppPages(context: PluginContext, template: string, options: Sta
 		context.emitFile({
 			type: "asset",
 			fileName: `${appId}.html`,
-			source: html
+			source: html,
 		});
 	}
 }
@@ -195,14 +195,14 @@ function stageSite(context: PluginContext, bundle: OutputBundle, { appsConfig, s
 			domain,
 			baseUrl,
 			imageUrls,
-			paths
+			paths,
 		};
 
 		files.forEach(([path, generateContent]) => {
 			context.emitFile({
 				type: "asset",
 				fileName: path,
-				source: generateContent(extendedOptions)
+				source: generateContent(extendedOptions),
 			});
 		});
 
@@ -213,7 +213,7 @@ function stageSite(context: PluginContext, bundle: OutputBundle, { appsConfig, s
 			context.emitFile({
 				type: "asset",
 				fileName: "index.html",
-				source: template 
+				source: template, 
 			});
 
 			generate404Page(context, template);

packages/dev-tools/vite.config.ts

@@ -12,22 +12,22 @@ export default defineConfig({
 			strictOutput: true,
 			pathsToAliases: false,
 			bundledPackages: ["@prozilla-os/*"],
-			tsconfigPath: "tsconfig.build.json"
-		})
+			tsconfigPath: "tsconfig.build.json",
+		}),
 	],
 	build: {
 		lib: {
 			entry: resolve(__dirname, "src/main.ts"),
 			formats: ["es"],
 		},
 		rollupOptions: {
-			external: ["vite", "path", /vite-plugin-/g, /@vitejs\/plugin-/g, "rollup", "@prozilla-os/core", "@prozilla-os/shared"],
+			external: ["vite", "path", "fs", "typescript", /vite-plugin-/g, /@vitejs\/plugin-/g, "rollup", "@prozilla-os/core", "@prozilla-os/shared"],
 			output: {
 				assetFileNames: "assets/[name][extname]",
 				chunkFileNames: "chunks/[name]-[hash].js",
 				entryFileNames: "[name].js",
-			}
+			},
 		},
-		sourcemap: true
-	}
+		sourcemap: true,
+	},
 });