Updated app build process + updated docs

2024-06-23 15:12:54 +02:00 · 2024-06-23 15:12:54 +02:00 · 3614461cea
commit 3614461cea
parent 8c722a29db
38 changed files with 436 additions and 111 deletions
--- a/README.md
+++ b/README.md
@ -24,6 +24,7 @@ ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows.

 - `prozilla-os` ([source][prozilla-os]) - A bundle containing all other packages
 - `@prozilla-os/core` ([source][core]) - Core functionality, React components and hooks
+- `@prozilla-os/shared` ([source][shared]) - Shared functions and utilities
 - `@prozilla-os/file-explorer` ([source][file-explorer]) - File explorer app
 - `@prozilla-os/terminal` ([source][terminal]) - Terminal/shell app
 - `@prozilla-os/text-editor` ([source][text-editor]) - Text editor app
@ -56,6 +57,7 @@ These resources can help you get started with ProzillaOS.
 [prozilla]: https://prozilla.dev/
 [prozilla-os]: ./packages/prozilla-os/
 [core]: ./packages/core/
+[shared]: ./packages/shared/
 [file-explorer]: ./packages/apps/file-explorer/
 [terminal]: ./packages/apps/terminal/
 [text-editor]: ./packages/apps/text-editor/
--- a/packages/apps/file-explorer/CHANGELOG.md
+++ b/packages/apps/file-explorer/CHANGELOG.md
@ -1,5 +1,15 @@
 # @prozilla-os/file-explorer

+## 1.0.11
+
+### Patch Changes
+
+- Added @prozilla-os/shared package
+  Updated app build process
+  Updated documentation
+- Updated dependencies
+  - @prozilla-os/core@1.0.14
+
 ## 1.0.10

 ### Patch Changes
--- a/packages/apps/file-explorer/README.md
+++ b/packages/apps/file-explorer/README.md
@ -27,6 +27,8 @@ $ pnpm add @prozilla-os/core @prozilla-os/file-explorer

 ## Usage

+### Basic setup
+
 ```tsx
 import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView, AppsConfig } from "@prozilla-os/core";
 import { fileExplorer } from "@prozilla-os/file-explorer";
@ -51,6 +53,41 @@ function App() {
 }
 ```

+### Window options
+
+```tsx
+/**
+ * Initial path that the app will open
+ * @default "~" - Home directory
+ */
+path: string;
+
+/**
+ * Defines in which mode the application is running
+ * 0: None
+ * 1: Single
+ * 2: Multiple
+ * @default 0
+ */
+selectorMode: number;
+
+/**
+ * Footer component that will be displayed when `selectorMode` != 0
+ * Can be used to display a list of selected files for example
+ */
+Footer: React.FC;
+
+/**
+ * Gets called each time the selection changes if `selectorMode` != 0
+ */
+onSelectionChange: (params: OnSelectionChangeParams) => void;
+
+/**
+ * Gets called when the selection is finished if `selectorMode` != 0
+ */
+onSelectionFinish: Function;
+```
+
 ## Links

 - [Website/demo][website]
--- a/packages/apps/file-explorer/package.json
+++ b/packages/apps/file-explorer/package.json
@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/file-explorer",
 	"description": "A standard ProzillaOS application for browsing files.",
-	"version": "1.0.10",
+	"version": "1.0.11",
 	"homepage": "https://os.prozilla.dev/file-explorer",
 	"author": {
 		"name": "Prozilla",
@ -34,7 +34,8 @@
 		"typescript": "^5.4.5",
 		"vite": "^5.3.1",
 		"vite-plugin-dts": "^3.9.1",
-		"vite-plugin-lib-inject-css": "^2.1.1"
+		"vite-plugin-lib-inject-css": "^2.1.1",
+		"@prozilla-os/shared": "workspace:*"
 	},
 	"files": [
 		"dist"
--- a/packages/apps/file-explorer/tsconfig.build.json
+++ b/packages/apps/file-explorer/tsconfig.build.json
@ -2,7 +2,8 @@
 	"extends": "./tsconfig.json",
 	"compilerOptions": {
 		"paths": {
-			"@prozilla-os/core": ["packages/core/dist/main"]
+			"@prozilla-os/core": ["packages/core/dist/main"],
+			"@prozilla-os/shared": ["packages/shared/dist/main"]
 		}
 	}
 }
--- a/packages/apps/file-explorer/tsconfig.json
+++ b/packages/apps/file-explorer/tsconfig.json
@ -8,7 +8,8 @@
 		"emitDeclarationOnly": true,
 		"noEmit": false,
 		"paths": {
-			"@prozilla-os/core": ["./node_modules/@prozilla-os/core/src/main"]
+			"@prozilla-os/core": ["./node_modules/@prozilla-os/core/src/main"],
+			"@prozilla-os/shared": ["./node_modules/@prozilla-os/shared/src/main"]
 		}
 	},
 	"include": ["src", "vite.config.ts"],
--- a/packages/apps/file-explorer/vite.config.ts
+++ b/packages/apps/file-explorer/vite.config.ts
@ -1,35 +1,6 @@
 import { defineConfig } from "vite";
-import { resolve } from "path";
-import react from "@vitejs/plugin-react-swc";
-import dts from "vite-plugin-dts";
-import { libInjectCss } from "vite-plugin-lib-inject-css";
+import { appViteConfig } from "@prozilla-os/shared";

-// https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [
-		react(),
-		libInjectCss(),
-		dts({
-			include: ["src"],
-			outDir: "dist",
-			rollupTypes: true,
-			strictOutput: true,
-			pathsToAliases: false,
-			tsconfigPath: "tsconfig.build.json"
-		})
-	],
-	build: {
-		lib: {
-			entry: resolve(__dirname, "src/main.ts"),
-			formats: ["es"],
-		},
-		rollupOptions: {
-			external: ["react", "react/jsx-runtime", "@prozilla-os/core"],
-			output: {
-				assetFileNames: "assets/[name][extname]",
-				entryFileNames: "[name].js",
-			}
-		},
-		sourcemap: true
-	}
+	...appViteConfig(__dirname, "src/main.ts")
 });
--- a/packages/apps/terminal/CHANGELOG.md
+++ b/packages/apps/terminal/CHANGELOG.md
@ -1,5 +1,15 @@
 # @prozilla-os/terminal

+## 1.0.4
+
+### Patch Changes
+
+- Added @prozilla-os/shared package
+  Updated app build process
+  Updated documentation
+- Updated dependencies
+  - @prozilla-os/core@1.0.14
+
 ## 1.0.3

 ### Patch Changes
--- a/packages/apps/terminal/README.md
+++ b/packages/apps/terminal/README.md
@ -27,6 +27,8 @@ $ pnpm add @prozilla-os/core @prozilla-os/terminal

 ## Usage

+### Basic setup
+
 ```tsx
 import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView, AppsConfig } from "@prozilla-os/core";
 import { terminal } from "@prozilla-os/terminal";
@ -51,6 +53,21 @@ function App() {
 }
 ```

+### Window options
+
+```tsx
+/**
+ * Initial path that the app will open
+ * @default "~" - Home directory
+ */
+path: string;
+
+/**
+ * Initial input
+ */
+input: string;
+```
+
 ## Links

 - [Website/demo][website]
--- a/packages/apps/terminal/package.json
+++ b/packages/apps/terminal/package.json
@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/terminal",
 	"description": "A terminal/shell application for ProzillaOS.",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"homepage": "https://os.prozilla.dev/terminal",
 	"author": {
 		"name": "Prozilla",
@ -33,7 +33,8 @@
 		"typescript": "^5.4.5",
 		"vite": "^5.3.1",
 		"vite-plugin-dts": "^3.9.1",
-		"vite-plugin-lib-inject-css": "^2.1.1"
+		"vite-plugin-lib-inject-css": "^2.1.1",
+		"@prozilla-os/shared": "workspace:*"
 	},
 	"files": [
 		"dist"
--- a/packages/apps/terminal/tsconfig.build.json
+++ b/packages/apps/terminal/tsconfig.build.json
@ -2,7 +2,8 @@
 	"extends": "./tsconfig.json",
 	"compilerOptions": {
 		"paths": {
-			"@prozilla-os/core": ["packages/core/dist/main"]
+			"@prozilla-os/core": ["packages/core/dist/main"],
+			"@prozilla-os/shared": ["packages/shared/dist/main"]
 		}
 	}
 }
--- a/packages/apps/terminal/tsconfig.json
+++ b/packages/apps/terminal/tsconfig.json
@ -8,7 +8,8 @@
 		"emitDeclarationOnly": true,
 		"noEmit": false,
 		"paths": {
-			"@prozilla-os/core": ["./node_modules/@prozilla-os/core/src/main"]
+			"@prozilla-os/core": ["./node_modules/@prozilla-os/core/src/main"],
+			"@prozilla-os/shared": ["./node_modules/@prozilla-os/shared/src/main"]
 		}
 	},
 	"include": ["src", "vite.config.ts"],
--- a/packages/apps/terminal/vite.config.ts
+++ b/packages/apps/terminal/vite.config.ts
@ -1,35 +1,6 @@
 import { defineConfig } from "vite";
-import { resolve } from "path";
-import react from "@vitejs/plugin-react-swc";
-import dts from "vite-plugin-dts";
-import { libInjectCss } from "vite-plugin-lib-inject-css";
+import { appViteConfig } from "@prozilla-os/shared";

-// https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [
-		react(),
-		libInjectCss(),
-		dts({
-			include: ["src"],
-			outDir: "dist",
-			rollupTypes: true,
-			strictOutput: true,
-			pathsToAliases: false,
-			staticImport: true
-		})
-	],
-	build: {
-		lib: {
-			entry: resolve(__dirname, "src/main.ts"),
-			formats: ["es"],
-		},
-		rollupOptions: {
-			external: ["react", "react/jsx-runtime", "@prozilla-os/core"],
-			output: {
-				assetFileNames: "assets/[name][extname]",
-				entryFileNames: "[name].js",
-			}
-		},
-		sourcemap: true
-	}
+	...appViteConfig(__dirname, "src/main.ts")
 });
--- a/packages/apps/text-editor/CHANGELOG.md
+++ b/packages/apps/text-editor/CHANGELOG.md
@ -1,5 +1,15 @@
 # @prozilla-os/text-editor

+## 1.0.4
+
+### Patch Changes
+
+- Added @prozilla-os/shared package
+  Updated app build process
+  Updated documentation
+- Updated dependencies
+  - @prozilla-os/core@1.0.14
+
 ## 1.0.3

 ### Patch Changes
--- a/packages/apps/text-editor/README.md
+++ b/packages/apps/text-editor/README.md
@ -27,6 +27,8 @@ $ pnpm add @prozilla-os/core @prozilla-os/text-editor

 ## Usage

+### Basic setup
+
 ```tsx
 import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView, AppsConfig } from "@prozilla-os/core";
 import { textEditor } from "@prozilla-os/text-editor";
@ -51,6 +53,28 @@ function App() {
 }
 ```

+### Window options
+
+```tsx
+/**
+ * Initial path that the app will open
+ * @default "~" - Home directory
+ */
+path: string;
+
+/**
+ * Virtual file to open the app with
+ */
+file: VirtualFile;
+
+/**
+ * Mode in which to run the app
+ * "view" - Renders markdown files and renders syntax highlighting of other file formats, disables text editing
+ * "edit" - Raw text editor
+ */
+mode: "view" | "edit";
+```
+
 ## Links

 - [Website/demo][website]
--- a/packages/apps/text-editor/package.json
+++ b/packages/apps/text-editor/package.json
@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/text-editor",
 	"description": "A text editor application for ProzillaOS.",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"homepage": "https://os.prozilla.dev/text-editor",
 	"author": {
 		"name": "Prozilla",
@ -35,7 +35,8 @@
 		"typescript": "^5.4.5",
 		"vite": "^5.3.1",
 		"vite-plugin-dts": "^3.9.1",
-		"vite-plugin-lib-inject-css": "^2.1.1"
+		"vite-plugin-lib-inject-css": "^2.1.1",
+		"@prozilla-os/shared": "workspace:*"
 	},
 	"files": [
 		"dist"
--- a/packages/apps/text-editor/tsconfig.build.json
+++ b/packages/apps/text-editor/tsconfig.build.json
@ -2,7 +2,8 @@
 	"extends": "./tsconfig.json",
 	"compilerOptions": {
 		"paths": {
-			"@prozilla-os/core": ["packages/core/dist/main"]
+			"@prozilla-os/core": ["packages/core/dist/main"],
+			"@prozilla-os/shared": ["packages/shared/dist/main"]
 		}
 	}
 }
--- a/packages/apps/text-editor/tsconfig.json
+++ b/packages/apps/text-editor/tsconfig.json
@ -8,9 +8,10 @@
 		"emitDeclarationOnly": true,
 		"noEmit": false,
 		"paths": {
-			"@prozilla-os/core": ["./node_modules/@prozilla-os/core/src/main"]
+			"@prozilla-os/core": ["./node_modules/@prozilla-os/core/src/main"],
+			"@prozilla-os/shared": ["./node_modules/@prozilla-os/shared/src/main"]
 		}
 	},
 	"include": ["src", "vite.config.ts"],
-	"exclude": ["node_modules"]
+	"exclude": ["node_modules"],
 }
--- a/packages/apps/text-editor/vite.config.ts
+++ b/packages/apps/text-editor/vite.config.ts
@ -1,34 +1,6 @@
 import { defineConfig } from "vite";
-import { resolve } from "path";
-import react from "@vitejs/plugin-react-swc";
-import dts from "vite-plugin-dts";
-import { libInjectCss } from "vite-plugin-lib-inject-css";
+import { appViteConfig } from "@prozilla-os/shared";

-// https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [
-		react(),
-		libInjectCss(),
-		dts({
-			include: ["src"],
-			outDir: "dist",
-			rollupTypes: true,
-			strictOutput: true,
-			pathsToAliases: false,
-		})
-	],
-	build: {
-		lib: {
-			entry: resolve(__dirname, "src/main.ts"),
-			formats: ["es"],
-		},
-		rollupOptions: {
-			external: ["react", "react/jsx-runtime", "@prozilla-os/core"],
-			output: {
-				assetFileNames: "assets/[name][extname]",
-				entryFileNames: "[name].js",
-			}
-		},
-		sourcemap: true
-	}
+	...appViteConfig(__dirname, "src/main.ts")
 });
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@ -1,5 +1,13 @@
 # @prozilla-os/core

+## 1.0.14
+
+### Patch Changes
+
+- Added @prozilla-os/shared package
+  Updated app build process
+  Updated documentation
+
 ## 1.0.13

 ### Patch Changes
--- a/packages/core/README.md
+++ b/packages/core/README.md
@ -13,7 +13,7 @@

 ## About 

-`@prozilla-os/core` is a React component library written in TypeScript for building web-based operating systems, made by Prozilla.
+`@prozilla-os/core` is a React Vite component library written in TypeScript for building web-based operating systems, made by Prozilla.

 ## Installation

@ -25,6 +25,8 @@ $ pnpm add @prozilla-os/core

 ## Usage

+### Basic setup
+
 ```tsx
 import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView } from "@prozilla-os/core";

--- a/packages/core/package.json
+++ b/packages/core/package.json
@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/core",
 	"description": "A React component library written in TypeScript for building web-based operating systems, made by Prozilla.",
-	"version": "1.0.13",
+	"version": "1.0.14",
 	"homepage": "https://os.prozilla.dev",
 	"author": {
 		"name": "Prozilla",
--- a/packages/prozilla-os/CHANGELOG.md
+++ b/packages/prozilla-os/CHANGELOG.md
@ -1,5 +1,18 @@
 # prozilla-os

+## 1.0.14
+
+### Patch Changes
+
+- Added @prozilla-os/shared package
+  Updated app build process
+  Updated documentation
+- Updated dependencies
+  - @prozilla-os/file-explorer@1.0.11
+  - @prozilla-os/text-editor@1.0.4
+  - @prozilla-os/terminal@1.0.4
+  - @prozilla-os/core@1.0.14
+
 ## 1.0.13

 ### Patch Changes
--- a/packages/prozilla-os/README.md
+++ b/packages/prozilla-os/README.md
@ -13,7 +13,9 @@

 ## About 

-`prozilla-os` is a React component library written in TypeScript for building web-based operating systems, made by Prozilla.
+`prozilla-os` is a React Vite component library written in TypeScript for building web-based operating systems, made by Prozilla. This package combines multiple other packages for easy access to different ProzillaOS features. You can also download these packages separately instead.
+
+**Live demo: [os.prozilla.dev][website]** - [(source)][website-source]

 ## Installation

@ -23,8 +25,21 @@ $ yarn add prozilla-os
 $ pnpm add prozilla-os
 ```

+## Packages
+
+`prozilla-os` combines the following packages into one:
+
+- [`@prozilla-os/core`][core] - Core functionality, React components and hooks
+- [`@prozilla-os/file-explorer`][file-explorer] - File explorer app
+- [`@prozilla-os/terminal`][terminal] - Terminal/shell app
+- [`@prozilla-os/text-editor`][text-editor] - Text editor app
+
 ## Usage

+For more information about the in-depth usage of each package, check out the links in the section above.
+
+### Basic setup
+
 ```tsx
 import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView } from "prozilla-os";

@ -158,6 +173,11 @@ function App() {
 - [Ko-fi][ko-fi]

 [website]: https://os.prozilla.dev/
+[website-source]: https://github.com/prozilla-os/ProzillaOS
 [github]: https://github.com/prozilla-os/ProzillaOS/tree/convert-to-monorepo/packages/prozilla-os
 [npm]: https://www.npmjs.com/package/prozilla-os
-[ko-fi]: https://ko-fi.com/prozilla
+[ko-fi]: https://ko-fi.com/prozilla
+[core]: https://www.npmjs.com/package/@prozilla-os/core
+[file-explorer]: https://www.npmjs.com/package/@prozilla-os/file-explorer
+[terminal]: https://www.npmjs.com/package/@prozilla-os/terminal
+[text-editor]: https://www.npmjs.com/package/@prozilla-os/text-editor
--- a/packages/prozilla-os/package.json
+++ b/packages/prozilla-os/package.json
@ -1,7 +1,7 @@
 {
 	"name": "prozilla-os",
 	"description": "a React component library written in TypeScript for building web-based operating systems, made by Prozilla.",
-	"version": "1.0.13",
+	"version": "1.0.14",
 	"homepage": "https://os.prozilla.dev",
 	"author": {
 		"name": "Prozilla",
--- a/packages/shared/CHANGELOG.md
+++ b/packages/shared/CHANGELOG.md
@ -0,0 +1,9 @@
+# @prozilla-os/shared
+
+## 1.0.1
+
+### Patch Changes
+
+- Added @prozilla-os/shared package
+  Updated app build process
+  Updated documentation
--- a/packages/shared/README.md
+++ b/packages/shared/README.md
@ -0,0 +1,59 @@
+<div align="center">
+  <br />
+  <p>
+    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg" height="200" alt="ProzillaOS" /></a>
+  </p>
+  <p>
+    <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>
+    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Stars" src="https://img.shields.io/github/stars/Prozilla/ProzillaOS?style=flat-square&color=FED24C&label=%E2%AD%90"></a>
+    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Forks" src="https://img.shields.io/github/forks/Prozilla/ProzillaOS?style=flat-square&color=4D9CFF&label=Forks&logo=github"></a>
+    <a href="https://www.npmjs.com/package/prozilla-os"><img alt="NPM Version" src="https://img.shields.io/npm/v/prozilla-os?logo=npm&style=flat-square&label=prozilla-os&color=FF4D5B"></a>
+  </p>
+</div>
+
+## About 
+
+`@prozilla-os/shared` is a library of shared utility functions for ProzillaOS packages.
+
+## Installation
+
+```sh
+$ npm install @prozilla-os/shared
+$ yarn add @prozilla-os/shared
+$ pnpm add @prozilla-os/shared
+```
+
+## Usage
+
+### `appViteConfig(basePath, entryPath)`
+
+Helper function for creating Vite configurations for ProzillaOS apps.
+
+#### Params
+
+- `basePath` (string) - Path of base directory
+- `entryPath` (string) - Path of library entry
+
+#### Example
+```tsx
+// vite.config.ts
+
+import { defineConfig } from "vite";
+import { appViteConfig } from "@prozilla-os/shared";
+
+export default defineConfig({
+	...appViteConfig(__dirname, "src/main.ts")
+});
+```
+
+## Links
+
+- [Website/demo][website]
+- [GitHub][github]
+- [npm][npm]
+- [Ko-fi][ko-fi]
+
+[website]: https://os.prozilla.dev/
+[github]: https://github.com/prozilla-os/ProzillaOS/tree/convert-to-monorepo/packages/shared
+[npm]: https://www.npmjs.com/package/@prozilla-os/shared
+[ko-fi]: https://ko-fi.com/prozilla
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@ -0,0 +1,40 @@
+{
+	"name": "@prozilla-os/shared",
+	"description": "A library of shared utility functions for ProzillaOS packages.",
+	"version": "1.0.1",
+	"homepage": "https://os.prozilla.dev",
+	"author": {
+		"name": "Prozilla",
+		"email": "business@prozilla.dev",
+		"url": "https://prozilla.dev/"
+	},
+	"type": "module",
+	"main": "dist/main.js",
+	"types": "dist/main.d.ts",
+	"scripts": {
+		"build": "tsc && vite build"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/prozilla-os/ProzillaOS.git",
+		"directory": "packages/shared"
+	},
+	"license": "MIT",
+	"dependencies": {},
+	"devDependencies": {
+		"@types/node": "^20.14.5",
+		"@types/react": "^18.3.3",
+		"@vitejs/plugin-react-swc": "^3.7.0",
+		"typescript": "^5.4.5",
+		"vite": "^5.3.1",
+		"vite-plugin-dts": "^3.9.1",
+		"vite-plugin-lib-inject-css": "^2.1.1"
+	},
+	"files": [
+		"dist"
+	],
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/",
+		"access": "public"
+	}
+}
--- a/packages/shared/src/configs/app.vite.config.d.ts
+++ b/packages/shared/src/configs/app.vite.config.d.ts
@ -0,0 +1,9 @@
+import { UserConfig } from "vite";
+/**
+ * Helper function for creating Vite configurations for ProzillaOS apps
+ * @param basePath - Path of base directory
+ * @param entryPath - Path of library entry
+ * @returns Vite configuration
+ * @see https://vitejs.dev/config/
+ */
+export declare const appViteConfig: (basePath: string, entryPath: string) => UserConfig;
--- a/packages/shared/src/configs/app.vite.config.ts
+++ b/packages/shared/src/configs/app.vite.config.ts
@ -0,0 +1,52 @@
+import { UserConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import dts from "vite-plugin-dts";
+import { libInjectCss } from "vite-plugin-lib-inject-css";
+import { posix, resolve, sep } from "path";
+
+/**
+ * Helper function for creating Vite configurations for ProzillaOS apps
+ * @param basePath - Path of base directory
+ * @param entryPath - Path of library entry
+ * @returns Vite configuration
+ * @see https://vitejs.dev/config/
+ */
+export const appViteConfig = (basePath: string, entryPath: string): UserConfig => {
+	let entryFile = resolve(basePath, entryPath);
+
+	// Normalize paths for Windows compatibility
+	if (sep === "\\")
+		entryFile = entryFile.split(sep).join(posix.sep);
+
+	console.log("Using Vite config for app");
+	console.log("Entry: " + entryFile);
+
+	return {
+		plugins: [
+			react(),
+			libInjectCss(),
+			dts({
+				include: ["src"],
+				outDir: "dist",
+				rollupTypes: true,
+				strictOutput: true,
+				pathsToAliases: false,
+				tsconfigPath: "tsconfig.build.json"
+			})
+		],
+		build: {
+			lib: {
+				entry: entryFile,
+				formats: ["es"],
+			},
+			rollupOptions: {
+				external: ["react", "react/jsx-runtime", "@prozilla-os/core"],
+				output: {
+					assetFileNames: "assets/[name][extname]",
+					entryFileNames: "[name].js",
+				}
+			},
+			sourcemap: true
+		}
+	};
+};
--- a/packages/shared/src/configs/index.d.ts
+++ b/packages/shared/src/configs/index.d.ts
@ -0,0 +1 @@
+export { appViteConfig } from "./app.vite.config";
--- a/packages/shared/src/configs/index.ts
+++ b/packages/shared/src/configs/index.ts
@ -0,0 +1 @@
+export { appViteConfig } from "./app.vite.config";
--- a/packages/shared/src/main.ts
+++ b/packages/shared/src/main.ts
@ -0,0 +1 @@
+export * from "./configs";
--- a/packages/shared/tsconfig.json
+++ b/packages/shared/tsconfig.json
@ -0,0 +1,13 @@
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"baseUrl": "../..",
+		"composite": true,
+		"outDir": "dist",
+		"declaration": true,
+		"emitDeclarationOnly": true,
+		"noEmit": false
+	},
+	"include": ["src", "vite.config.ts"],
+	"exclude": ["node_modules"]
+}
--- a/packages/shared/vite.config.ts
+++ b/packages/shared/vite.config.ts
@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import dts from "vite-plugin-dts";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [
+		dts({
+			include: ["src"],
+			outDir: "dist",
+			rollupTypes: true,
+			strictOutput: true
+		})
+	],
+	build: {
+		lib: {
+			entry: resolve(__dirname, "src/main.ts"),
+			formats: ["es"],
+		},
+		rollupOptions: {
+			external: ["vite", "path", /vite-plugin-/g, /@vitejs\/plugin-/g, "rollup"],
+			output: {
+				assetFileNames: "assets/[name][extname]",
+				entryFileNames: "[name].js",
+			}
+		},
+		sourcemap: true
+	}
+});
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -115,6 +115,9 @@ importers:
        specifier: ^18.3.1
        version: 18.3.1
    devDependencies:
+      '@prozilla-os/shared':
+        specifier: workspace:*
+        version: link:../../shared
      '@types/node':
        specifier: ^20.14.5
        version: 20.14.6
@ -152,6 +155,9 @@ importers:
        specifier: ^18.3.1
        version: 18.3.1
    devDependencies:
+      '@prozilla-os/shared':
+        specifier: workspace:*
+        version: link:../../shared
      '@types/node':
        specifier: ^20.14.5
        version: 20.14.6
@ -195,6 +201,9 @@ importers:
        specifier: ^15.5.0
        version: 15.5.0(react@18.3.1)
    devDependencies:
+      '@prozilla-os/shared':
+        specifier: workspace:*
+        version: link:../../shared
      '@types/node':
        specifier: ^20.14.5
        version: 20.14.6
@ -315,6 +324,30 @@ importers:
        specifier: ^2.1.1
        version: 2.1.1(vite@5.3.1(@types/node@20.14.6)(less@4.2.0))

+  packages/shared:
+    devDependencies:
+      '@types/node':
+        specifier: ^20.14.5
+        version: 20.14.6
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      '@vitejs/plugin-react-swc':
+        specifier: ^3.7.0
+        version: 3.7.0(vite@5.3.1(@types/node@20.14.6)(less@4.2.0))
+      typescript:
+        specifier: ^5.4.5
+        version: 5.4.5
+      vite:
+        specifier: ^5.3.1
+        version: 5.3.1(@types/node@20.14.6)(less@4.2.0)
+      vite-plugin-dts:
+        specifier: ^3.9.1
+        version: 3.9.1(@types/node@20.14.6)(rollup@4.18.0)(typescript@5.4.5)(vite@5.3.1(@types/node@20.14.6)(less@4.2.0))
+      vite-plugin-lib-inject-css:
+        specifier: ^2.1.1
+        version: 2.1.1(vite@5.3.1(@types/node@20.14.6)(less@4.2.0))
+
 packages:

  '@ampproject/remapping@2.3.0':
--- a/tsconfig.json
+++ b/tsconfig.json
@ -36,6 +36,7 @@
 	"include": [
 		"src/**/*",
 		"vite.config.ts",
+		"*.vite.config.ts",
 		// "scripts/**/*", // TO DO: uncomment this line
 	],
 	"exclude": [
--- a/vite.config.ts
+++ b/vite.config.ts
@ -23,7 +23,8 @@ function generateAliases() {

 	const localPackages = [
 		{ name: "prozilla-os", path: resolve(__dirname, "packages/prozilla-os/" + entryFile) },
-		{ name: "@prozilla-os/core", path: resolve(__dirname, "packages/core/" + entryFile) }
+		{ name: "@prozilla-os/core", path: resolve(__dirname, "packages/core/" + entryFile) },
+		{ name: "@prozilla-os/shared", path: resolve(__dirname, "packages/shared/" + entryFile) }
 	];

 	const localApps = [
				`@ -0,0 +1 @@`
				`export { appViteConfig } from "./app.vite.config";`