Optimized package builds

.gitignore

@@ -4,23 +4,15 @@
 /node_modules
 /packages/*/node_modules
 /packages/apps/*/node_modules
-/.pnp
-.pnp.js
 
 # testing
-/coverage
 
 # production
-/build
 /dist
+/packages/*/dist
+/packages/apps/*/dist
 
 # misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

README.md

@@ -22,9 +22,11 @@ ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows.
 
 ## Packages
 
-- `prozilla-os` ([source][prozilla-os]) - Contains all other packages
+- `prozilla-os` ([source][prozilla-os]) - A bundle containing all other packages
 - `@prozilla-os/core` ([source][core]) - Core functionality, React components and hooks
 - `@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
 
 ## Links
 
@@ -54,4 +56,6 @@ These resources can help you get started with ProzillaOS.
 [prozilla]: https://prozilla.dev/
 [prozilla-os]: ./packages/prozilla-os/
 [core]: ./packages/core/
-[file-explorer]: ./packages/apps/file-explorer/
+[file-explorer]: ./packages/apps/file-explorer/
+[terminal]: ./packages/apps/terminal/
+[text-editor]: ./packages/apps/text-editor/

eslint.config.js

@@ -18,6 +18,7 @@ export default tseslint.config(
 		},
 		ignores: [
 			"eslint.config.js",
+			"**/dist/**/*"
 		],
 		plugins: {
 			react,

package.json

@@ -17,7 +17,7 @@
 		"predeploy": "pnpm run build && pnpm run stage",
 		"deploy": "tsx scripts/deploy",
 		"fetch": "tsx scripts/fetchRepository",
-		"packages:test": "pnpm -r --parallel run test",
+		"packages:build": "pnpm -r --sequential run build",
 		"packages:update": "npx changeset && pnpm changeset version",
 		"packages:release": "pnpm changeset publish"
 	},
@@ -33,11 +33,10 @@
 		"@fortawesome/fontawesome-svg-core": "^6.5.2",
 		"@fortawesome/free-solid-svg-icons": "^6.5.2",
 		"@fortawesome/react-fontawesome": "^0.2.2",
-		"@vitejs/plugin-react-swc": "^3.7.0",
 		"anser": "^2.1.1",
 		"escape-carriage": "^1.3.1",
 		"markdown-to-jsx": "^7.4.7",
-		"prozilla-os": "workspace:^",
+		"prozilla-os": "workspace:*",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-router-dom": "^6.23.1",
@@ -52,12 +51,13 @@
 		"@eslint/js": "^9.5.0",
 		"@types/eslint": "^8.56.10",
 		"@types/gh-pages": "^6.1.0",
-		"@types/node": "^20.14.5",
+		"@types/node": "^20.14.6",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
 		"@types/react-syntax-highlighter": "^15.5.13",
+		"@vitejs/plugin-react": "^4.3.1",
 		"eslint": "^8.57.0",
-		"eslint-plugin-react": "^7.34.2",
+		"eslint-plugin-react": "^7.34.3",
 		"eslint-plugin-react-refresh": "^0.4.7",
 		"gh-pages": "^5.0.0",
 		"stylelint": "^16.6.1",

packages/apps/file-explorer/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @prozilla-os/file-explorer
 
+## 1.0.9
+
+### Patch Changes
+
+- Optimized building process for each package using Vite
+- Updated dependencies
+  - @prozilla-os/core@1.0.12
+
 ## 1.0.8
 
 ### Patch Changes

packages/apps/file-explorer/package.json

@@ -1,17 +1,18 @@
 {
 	"name": "@prozilla-os/file-explorer",
 	"description": "A standard ProzillaOS application for browsing files.",
-	"version": "1.0.8",
+	"version": "1.0.9",
 	"homepage": "https://os.prozilla.dev/file-explorer",
 	"author": {
 		"name": "Prozilla",
 		"email": "business@prozilla.dev",
 		"url": "https://prozilla.dev/"
 	},
-	"main": "src/index.ts",
 	"type": "module",
+	"main": "dist/main.js",
+	"types": "dist/main.d.ts",
 	"scripts": {
-		"test": "tsc --watch"
+		"build": "tsc && vite build"
 	},
 	"repository": {
 		"type": "git",
@@ -27,10 +28,19 @@
 		"react": "^18.3.1"
 	},
 	"devDependencies": {
-		"typescript": "^5.4.5"
+		"@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": [
-		"src/**/*"
+		"dist"
+	],
+	"sideEffects": [
+		"**/*.css"
 	],
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/",

packages/apps/file-explorer/src/index.ts

@@ -1,8 +0,0 @@
-import { App } from "@prozilla-os/core";
-import { FileExplorer } from "./components/FileExplorer";
-
-const fileExplorer = new App("File Explorer", "file-explorer", FileExplorer)
-	.setIconUrl("https://os.prozilla.dev/assets/apps/icons/file-explorer.svg");
-
-export { fileExplorer };
-export { FileSelectorMode } from "./types/index.d";

packages/apps/file-explorer/src/main.ts

@@ -0,0 +1,8 @@
+import { App } from "@prozilla-os/core";
+import { FileExplorer, FileExplorerProps } from "./components/FileExplorer";
+
+const fileExplorer = new App<FileExplorerProps>("File Explorer", "file-explorer", FileExplorer)
+	.setIconUrl("https://os.prozilla.dev/assets/apps/icons/file-explorer.svg");
+
+export { fileExplorer };
+export { FileSelectorMode } from "./types/utils";

packages/apps/file-explorer/tsconfig.json

@@ -1,5 +1,16 @@
 {
 	"extends": "../../../tsconfig.json",
-	"include": ["src/**/*"],
+	"compilerOptions": {
+		"baseUrl": "../../..",
+		"composite": true,
+		"outDir": "dist",
+		"declaration": true,
+		"emitDeclarationOnly": true,
+		"noEmit": false,
+		"paths": {
+			"@prozilla-os/core": ["packages/core/dist/main"]
+		}
+	},
+	"include": ["src", "vite.config.ts"],
 	"exclude": ["node_modules"]
 }

packages/apps/file-explorer/vite.config.ts

@@ -0,0 +1,34 @@
+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";
+
+// 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
+	}
+});

packages/apps/terminal/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @prozilla-os/terminal
 
+## 1.0.2
+
+### Patch Changes
+
+- Optimized building process for each package using Vite
+- Updated dependencies
+  - @prozilla-os/core@1.0.12
+
 ## 1.0.1
 
 ### Patch Changes

packages/apps/terminal/package.json

@@ -1,17 +1,18 @@
 {
 	"name": "@prozilla-os/terminal",
 	"description": "A terminal/shell application for ProzillaOS.",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"homepage": "https://os.prozilla.dev/terminal",
 	"author": {
 		"name": "Prozilla",
 		"email": "business@prozilla.dev",
 		"url": "https://prozilla.dev/"
 	},
-	"main": "src/index.ts",
 	"type": "module",
+	"main": "dist/main.js",
+	"types": "dist/main.d.ts",
 	"scripts": {
-		"test": "tsc --watch"
+		"build": "tsc && vite build"
 	},
 	"repository": {
 		"type": "git",
@@ -26,10 +27,19 @@
 		"react": "^18.3.1"
 	},
 	"devDependencies": {
-		"typescript": "^5.4.5"
+		"@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": [
-		"src/**/*"
+		"dist"
+	],
+	"sideEffects": [
+		"**/*.css"
 	],
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/",

packages/apps/terminal/src/components/Terminal.tsx

@@ -9,7 +9,7 @@ import { CommandResponse } from "../core/command";
 import { formatError } from "../core/_utils/terminal.utils";
 import { CommandsManager } from "../core/commands";
 
-interface TerminalProps extends WindowProps {
+export interface TerminalProps extends WindowProps {
 	path: string;
 	input: string;
 }

packages/apps/terminal/src/core/commands.ts

@@ -2,14 +2,15 @@ import { Command } from "./command";
 
 let commands: Command[] = [];
 
+// https://vitejs.dev/guide/features.html#glob-import
+const modules = import.meta.glob("./commands/*.ts");
+
 /**
  * Dynamically import commands
  */
 const loadCommands = () => {
 	commands = [];
-
-	// https://vitejs.dev/guide/features.html#glob-import
-	const modules = import.meta.glob("./commands/*.ts");
+	
 	for (const path in modules) {
 		void modules[path]().then((commandModule) => {
 			const commandName = Object.keys(commandModule as Record<string, Command>)[0];

packages/apps/terminal/src/index.ts

@@ -1,7 +0,0 @@
-import { App } from "@prozilla-os/core";
-import { Terminal } from "./components/Terminal";
-
-const terminal = new App("Terminal", "terminal", Terminal)
-	.setIconUrl("https://os.prozilla.dev/assets/apps/icons/terminal.svg");
-
-export { terminal };

packages/apps/terminal/src/main.ts

@@ -0,0 +1,7 @@
+import { App } from "@prozilla-os/core";
+import { Terminal, TerminalProps } from "./components/Terminal";
+
+const terminal = new App<TerminalProps>("Terminal", "terminal", Terminal)
+	.setIconUrl("https://os.prozilla.dev/assets/apps/icons/terminal.svg");
+
+export { terminal };

packages/apps/terminal/tsconfig.json

@@ -1,5 +1,16 @@
 {
 	"extends": "../../../tsconfig.json",
-	"include": ["src/**/*"],
+	"compilerOptions": {
+		"baseUrl": "../../..",
+		"composite": true,
+		"outDir": "dist",
+		"declaration": true,
+		"emitDeclarationOnly": true,
+		"noEmit": false,
+		"paths": {
+			"@prozilla-os/core": ["packages/core/dist/main"]
+		}
+	},
+	"include": ["src", "vite.config.ts"],
 	"exclude": ["node_modules"]
 }

packages/apps/terminal/vite.config.ts

@@ -0,0 +1,35 @@
+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";
+
+// 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
+	}
+});

packages/apps/text-editor/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @prozilla-os/text-editor
 
+## 1.0.2
+
+### Patch Changes
+
+- Optimized building process for each package using Vite
+- Updated dependencies
+  - @prozilla-os/core@1.0.12
+
 ## 1.0.1
 
 ### Patch Changes

packages/apps/text-editor/package.json

@@ -1,17 +1,18 @@
 {
 	"name": "@prozilla-os/text-editor",
 	"description": "A text editor application for ProzillaOS.",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"homepage": "https://os.prozilla.dev/text-editor",
 	"author": {
 		"name": "Prozilla",
 		"email": "business@prozilla.dev",
 		"url": "https://prozilla.dev/"
 	},
-	"main": "src/index.ts",
 	"type": "module",
+	"main": "dist/main.js",
+	"types": "dist/main.d.ts",
 	"scripts": {
-		"test": "tsc --watch"
+		"build": "tsc && vite build"
 	},
 	"repository": {
 		"type": "git",
@@ -24,10 +25,19 @@
 		"react": "^18.3.1"
 	},
 	"devDependencies": {
-		"typescript": "^5.4.5"
+		"@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": [
-		"src/**/*"
+		"dist"
+	],
+	"sideEffects": [
+		"**/*.css"
 	],
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/",

packages/apps/text-editor/src/components/TextEditor.tsx

@@ -5,7 +5,7 @@ import { MarkdownLink } from "./overrides/MarkdownLink";
 import { MarkdownImage } from "./overrides/MarkdownImage";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { MarkdownBlockquote } from "./overrides/MarkdownBlockquote";
-import { App, ClickAction, CODE_EXTENSIONS, Divider, DropdownAction, FileSelector, FileSelectorMode, HeaderMenu, ModalsManager, useSystemManager, useVirtualRoot, useWindowedModal, useWindowsManager, VirtualFile, WindowProps, WindowsManager } from "@prozilla-os/core";
+import { App, ClickAction, CODE_EXTENSIONS, Divider, DropdownAction, HeaderMenu, ModalsManager, useSystemManager, useVirtualRoot, useWindowedModal, useWindowsManager, VirtualFile, WindowProps, WindowsManager } from "@prozilla-os/core";
 import { DEFAULT_ZOOM, EXTENSION_TO_LANGUAGE, ZOOM_FACTOR } from "../constants/textEditor.const";
 
 const OVERRIDES = {
@@ -23,7 +23,7 @@ export interface MarkdownProps {
 	children?: ReactNode;
 }
 
-interface TextEditorProps extends WindowProps {
+export interface TextEditorProps extends WindowProps {
 	file?: VirtualFile;
 	mode?: "view" | "edit";
 	path?: string;
@@ -141,7 +141,7 @@ export function TextEditor({ file, path, setTitle, setIconUrl, close, mode, app,
 		<HeaderMenu>
 			<DropdownAction label="File" showOnHover={false}>
 				<ClickAction label="New" onTrigger={() => { newText(); }} shortcut={["Control", "e"]}/>
-				<ClickAction label="Open" onTrigger={() => {
+				{/* <ClickAction label="Open" onTrigger={() => {
 					openWindowedModal({
 						size: modalsConfig.defaultFileSelectorSize,
 						Modal: (props: object) => <FileSelector
@@ -153,7 +153,7 @@ export function TextEditor({ file, path, setTitle, setIconUrl, close, mode, app,
 							{...props}
 						/>
 					});
-				}} shortcut={["Control", "o"]}/>
+				}} shortcut={["Control", "o"]}/> */}
 				<Divider/>
 				<ClickAction label="Save" onTrigger={() => { saveText(); }} shortcut={["Control", "s"]}/>
 				{/* <ClickAction label={`Reveal in ${APP_NAMES.FILE_EXPLORER}`} disabled={currentFile == null} onTrigger={() => {

packages/apps/text-editor/src/index.ts

@@ -1,7 +0,0 @@
-import { App } from "@prozilla-os/core";
-import { TextEditor } from "./components/TextEditor";
-
-const textEditor = new App("Text Editor", "text-editor", TextEditor)
-	.setIconUrl("https://os.prozilla.dev/assets/apps/icons/text-editor.svg");
-
-export { textEditor };

packages/apps/text-editor/src/main.ts

@@ -0,0 +1,7 @@
+import { App } from "@prozilla-os/core";
+import { TextEditor, TextEditorProps } from "./components/TextEditor";
+
+const textEditor = new App<TextEditorProps>("Text Editor", "text-editor", TextEditor)
+	.setIconUrl("https://os.prozilla.dev/assets/apps/icons/text-editor.svg");
+
+export { textEditor };

packages/apps/text-editor/tsconfig.json

@@ -1,5 +1,16 @@
 {
 	"extends": "../../../tsconfig.json",
-	"include": ["src/**/*"],
+	"compilerOptions": {
+		"baseUrl": "../../..",
+		"composite": true,
+		"outDir": "dist",
+		"declaration": true,
+		"emitDeclarationOnly": true,
+		"noEmit": false,
+		"paths": {
+			"@prozilla-os/core": ["packages/core/dist/main"]
+		}
+	},
+	"include": ["src", "vite.config.ts"],
 	"exclude": ["node_modules"]
 }

packages/apps/text-editor/vite.config.ts

@@ -0,0 +1,34 @@
+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";
+
+// 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
+	}
+});

packages/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @prozilla-os/core
 
+## 1.0.12
+
+### Patch Changes
+
+- Optimized building process for each package using Vite
+
 ## 1.0.11
 
 ### Patch Changes

packages/core/package.json

@@ -1,17 +1,18 @@
 {
 	"name": "@prozilla-os/core",
 	"description": "A React component library written in TypeScript for building web-based operating systems, made by Prozilla.",
-	"version": "1.0.11",
-	"homepage": "https://os.prozilla.dev/",
+	"version": "1.0.12",
+	"homepage": "https://os.prozilla.dev",
 	"author": {
 		"name": "Prozilla",
 		"email": "business@prozilla.dev",
 		"url": "https://prozilla.dev/"
 	},
-	"main": "src/index.ts",
 	"type": "module",
+	"main": "dist/main.js",
+	"types": "dist/main.d.ts",
 	"scripts": {
-		"test": "tsc --watch"
+		"build": "tsc && vite build"
 	},
 	"repository": {
 		"type": "git",
@@ -24,7 +25,6 @@
 		"@fortawesome/free-regular-svg-icons": "^6.5.2",
 		"@fortawesome/free-solid-svg-icons": "^6.5.2",
 		"@fortawesome/react-fontawesome": "^0.2.2",
-		"@prozilla-os/file-explorer": "workspace:*",
 		"react": "^18.3.1",
 		"react-draggable": "^4.4.6",
 		"react-error-boundary": "^4.0.13",
@@ -33,10 +33,21 @@
 	},
 	"devDependencies": {
 		"@types/node": "^20.14.5",
-		"typescript": "^5.4.5"
+		"@types/react": "^18.3.3",
+		"@vitejs/plugin-react-swc": "^3.7.0",
+		"typescript": "^5.4.5",
+		"vite": "^5.3.1",
+		"vite-plugin-css-modules": "^0.0.1",
+		"vite-plugin-dts": "^3.9.1"
+	},
+	"peerDependencies": {
+		"react": "^18.3.1"
 	},
 	"files": [
-		"src/**/*"
+		"dist"
+	],
+	"sideEffects": [
+		"**/*.css"
 	],
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/",

packages/core/src/components/desktop/Desktop.tsx

@@ -16,7 +16,7 @@ import { VirtualFolder, VirtualFolderLink } from "../../features/virtual-drive/f
 import { useSettingsManager, useWindowsManager, useVirtualRoot, useWindowedModal, useContextMenu, useSystemManager } from "../../hooks";
 import { DirectoryList } from "../_utils";
 import { FileEventHandler, FolderEventHandler } from "../_utils/directory-list/DirectoryList";
-import { fileExplorer } from "@prozilla-os/file-explorer";
+// import { fileExplorer } from "@prozilla-os/file-explorer";
 
 export const Desktop = memo(() => {
 	const { desktopConfig } = useSystemManager();
@@ -83,9 +83,9 @@ export const Desktop = memo(() => {
 				windowsManager?.open("settings", { tab: 2 });
 			}}/>
 			<Divider/>
-			<ClickAction label={`Open in ${fileExplorer.name}`} icon={fileExplorer.iconUrl as string | undefined} onTrigger={() => {
+			{/* <ClickAction label={`Open in ${fileExplorer.name}`} icon={fileExplorer.iconUrl as string | undefined} onTrigger={() => {
 				windowsManager?.open(fileExplorer.id, { path: directory?.path });
-			}}/>
+			}}/> */}
 			{/* <ClickAction label={`Open in ${"APP_NAMES.TERMINAL"}`} icon={APP_ICONS.TERMINAL} onTrigger={() => {
 				windowsManager?.open(APPS.TERMINAL, { path: directory?.path });
 			}}/> */}
@@ -103,9 +103,9 @@ export const Desktop = memo(() => {
 			<ClickAction label="Open" onTrigger={(event, file) => {
 				if (windowsManager != null) (file as VirtualFile).open(windowsManager);
 			}}/>
-			<ClickAction label={`Reveal in ${fileExplorer.name}`} icon={faFolder} onTrigger={(event, file) => {
+			{/* <ClickAction label={`Reveal in ${fileExplorer.name}`} icon={faFolder} onTrigger={(event, file) => {
 				if (windowsManager != null)	(file as VirtualFile).parent?.open(windowsManager);
-			}}/>
+			}}/> */}
 			<ClickAction label="Delete" icon={faTrash} onTrigger={(event, file) => {
 				(file as VirtualFile).delete();
 			}}/>
@@ -119,9 +119,9 @@ export const Desktop = memo(() => {
 			{/* <ClickAction label={`Open in ${APP_NAMES.TERMINAL}`} icon={faTerminal} onTrigger={(event, folder) => {
 				windowsManager?.open(APPS.TERMINAL, { path: (folder as VirtualFolder).path });
 			}}/> */}
-			<ClickAction label={`Reveal in ${fileExplorer.name}`} icon={faFolder} onTrigger={(event, folder) => {
+			{/* <ClickAction label={`Reveal in ${fileExplorer.name}`} icon={faFolder} onTrigger={(event, folder) => {
 				if (windowsManager != null)	(folder as VirtualFolder).parent?.open(windowsManager);
-			}}/>
+			}}/> */}
 			<Divider/>
 			<ClickAction label="Delete" icon={faTrash} onTrigger={(event, folder) => {
 				(folder as VirtualFolder).delete();
@@ -183,9 +183,9 @@ export const Desktop = memo(() => {
 					windowsManager?.openFile(file, options);
 				}}
 				onOpenFolder={(event, folder) => {
-					windowsManager?.open(fileExplorer.id, {
-						path: (folder as VirtualFolderLink).linkedPath ?? folder.path
-					});
+					// windowsManager?.open(fileExplorer.id, {
+					// 	path: (folder as VirtualFolderLink).linkedPath ?? folder.path
+					// });
 				}}
 				onContextMenuFile={onContextMenuFile as unknown as FileEventHandler}
 				onContextMenuFolder={onContextMenuFolder as unknown as FolderEventHandler}

packages/core/src/components/modals/file-selector/FileSelector.tsx

@@ -5,73 +5,73 @@ import styles from "./FileSelector.module.css";
 import { ModalProps } from "../ModalView";
 import { VirtualFile } from "../../../features/virtual-drive/file";
 import { VirtualFolder } from "../../../features/virtual-drive/folder";
-import { FileSelectorMode, fileExplorer } from "@prozilla-os/file-explorer";
+// import { FileSelectorMode, fileExplorer } from "@prozilla-os/file-explorer";
 
 interface FileSelectorProps extends ModalProps {
-	type: FileSelectorMode;
-	allowedFormats?: string[];
-	onFinish: (result: VirtualFile | VirtualFile[]) => void;
+// 	type: FileSelectorMode;
+// 	allowedFormats?: string[];
+// 	onFinish: (result: VirtualFile | VirtualFile[]) => void;
 }
 
 export function FileSelector({ modal, params, type, allowedFormats, onFinish, ...props }: FileSelectorProps) {
-	const multi = (type == FileSelectorMode.Multi);
+	// const multi = (type == FileSelectorMode.Multi);
 
-	const [selection, setSelection] = useState<string[] | null>(multi ? [] : null);
-	const [directory, setDirectory] = useState<VirtualFolder | null>(null);
+	// const [selection, setSelection] = useState<string[] | null>(multi ? [] : null);
+	// const [directory, setDirectory] = useState<VirtualFolder | null>(null);
 
-	const finish = (event: Event) => {
-		event?.preventDefault();
+	// const finish = (event: Event) => {
+	// 	event?.preventDefault();
 
-		if (directory == null || selection == null)
-			return;
+	// 	if (directory == null || selection == null)
+	// 		return;
 
-		const files = selection.map((id) => {
-			const { name, extension } = VirtualFile.splitId(id);
-			return directory.findFile(name, extension);
-		}).filter((file) => {
-			if (file == null)
-				return false;
-			const validFormat = (allowedFormats == null || (file.extension != null && allowedFormats.includes(file.extension)));
-			return validFormat;
-		}) as VirtualFile[];
+	// 	const files = selection.map((id) => {
+	// 		const { name, extension } = VirtualFile.splitId(id);
+	// 		return directory.findFile(name, extension);
+	// 	}).filter((file) => {
+	// 		if (file == null)
+	// 			return false;
+	// 		const validFormat = (allowedFormats == null || (file.extension != null && allowedFormats.includes(file.extension)));
+	// 		return validFormat;
+	// 	}) as VirtualFile[];
 
-		if (files.length === 0)
-			return;
+	// 	if (files.length === 0)
+	// 		return;
 
-		modal?.close();
-		onFinish?.(multi ? files : files[0]);
-	};
+	// 	modal?.close();
+	// 	onFinish?.(multi ? files : files[0]);
+	// };
 
-	return <WindowedModal modal={modal} params={{
-		title: multi ? "Select files" : "Select a file",
-		iconUrl: fileExplorer.iconUrl as string | undefined,
-		...params,
-	}} {...props}>
-		<fileExplorer.WindowContent
-			selectorMode={type}
-			Footer={() =>
-				<div className={styles.Footer}>
-					<span className={styles.Selection}>
-						{multi
-							? <p>Selected file(s): {selection != null ? selection.join(", ") : ""}</p>
-							: <p>Selected file: {selection ?? ""}</p>
-						}
-					</span>
-					<div className={styles.Buttons}>
-						<Button className={styles.Button} onClick={finish}>
-							Confirm
-						</Button>
-						<Button className={styles.Button} onClick={() => { modal?.close(); }}>
-							Cancel
-						</Button>
-					</div>
-				</div>
-			}
-			onSelectionChange={({ files, directory }) => {
-				setSelection(files as string[] | null);
-				setDirectory(directory as VirtualFolder);
-			}}
-			onSelectionFinish={finish}
-		/>
-	</WindowedModal>;
+	// return <WindowedModal modal={modal} params={{
+	// 	title: multi ? "Select files" : "Select a file",
+	// 	iconUrl: fileExplorer.iconUrl as string | undefined,
+	// 	...params,
+	// }} {...props}>
+	// 	<fileExplorer.WindowContent
+	// 		selectorMode={type}
+	// 		Footer={() =>
+	// 			<div className={styles.Footer}>
+	// 				<span className={styles.Selection}>
+	// 					{multi
+	// 						? <p>Selected file(s): {selection != null ? selection.join(", ") : ""}</p>
+	// 						: <p>Selected file: {selection ?? ""}</p>
+	// 					}
+	// 				</span>
+	// 				<div className={styles.Buttons}>
+	// 					<Button className={styles.Button} onClick={finish}>
+	// 						Confirm
+	// 					</Button>
+	// 					<Button className={styles.Button} onClick={() => { modal?.close(); }}>
+	// 						Cancel
+	// 					</Button>
+	// 				</div>
+	// 			</div>
+	// 		}
+	// 		onSelectionChange={({ files, directory }) => {
+	// 			setSelection(files as string[] | null);
+	// 			setDirectory(directory as VirtualFolder);
+	// 		}}
+	// 		onSelectionFinish={finish}
+	// 	/>
+	// </WindowedModal>;
 }

packages/core/src/components/modals/index.ts

@@ -1,8 +1,8 @@
 export { DialogBox } from "./dialog-box/DialogBox";
 export { WindowedModal } from "./_utils/WindowedModal";
-export { FileSelector } from "./file-selector/FileSelector";
+// export { FileSelector } from "./file-selector/FileSelector";
 export { Share } from "./share/Share";
 export { ModalsView } from "./ModalsView";
 
 export type { ModalProps } from "./ModalView";
-export { FileSelectorMode } from "@prozilla-os/file-explorer";
+// export { FileSelectorMode } from "@prozilla-os/file-explorer";

packages/core/src/components/prozilla-os/ProzillaOS.tsx

@@ -15,7 +15,7 @@ import { ModalsConfig, ModalsConfigOptions } from "../../features/system/configs
 import { TaskbarConfig, TaskbarConfigOptions } from "../../features/system/configs/taskbarConfig";
 import { TrackingConfig, TrackingConfigOptions } from "../../features/system/configs/trackingConfig";
 import { WindowsConfig, WindowsConfigOptions } from "../../features/system/configs/windowsConfig";
-import { OptionalInterface } from "../../types/util";
+import { OptionalInterface } from "../../types/utils";
 import { TrackingManagerProvider } from "../../hooks/tracking/trackingManagerProvider";
 import { VirtualDriveConfig, VirtualDriveConfigOptions } from "../../features/system/configs/virtualDriveConfig";
 

packages/core/src/components/taskbar/menus/HomeMenu.tsx

@@ -5,10 +5,10 @@ import taskbarStyles from "../Taskbar.module.css";
 import { faCircleInfo, faFileLines, faGear, faImage, faPowerOff } from "@fortawesome/free-solid-svg-icons";
 import { ReactSVG } from "react-svg";
 import { useEffect, useState } from "react";
-import { utilStyles } from "../../..";
 import { closeViewport, Vector2 } from "../../../features";
 import { useWindowsManager, useVirtualRoot, useKeyboardListener, useSystemManager } from "../../../hooks";
-import { fileExplorer } from "@prozilla-os/file-explorer";
+import { utilStyles } from "../../../styles";
+// import { fileExplorer } from "@prozilla-os/file-explorer";
 
 interface HomeMenuProps {
 	active: boolean;
@@ -82,7 +82,7 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) {
 						<FontAwesomeIcon icon={faCircleInfo}/>
 						<p className={utilStyles.TextRegular}>Info</p>
 					</button>
-					<button tabIndex={tabIndex} onClick={() => {
+					{/* <button tabIndex={tabIndex} onClick={() => {
 						setActive(false);
 						windowsManager?.open(fileExplorer.id, { path: "~/Pictures" });
 					}}>
@@ -95,7 +95,7 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) {
 					}>
 						<FontAwesomeIcon icon={faFileLines}/>
 						<p className={utilStyles.TextRegular}>Documents</p>
-					</button>
+					</button> */}
 				</div>
 				<div className={styles.Apps}>
 					<span className={styles.Logo}>

packages/core/src/features/system/configs/appsConfig.ts

@@ -1,5 +1,5 @@
 import { App } from ".";
-import { OptionalInterface } from "../../../types/util";
+import { OptionalInterface } from "../../../types/utils";
 
 export interface AppsConfigOptions {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/core/src/features/system/configs/desktopConfig.ts

@@ -1,4 +1,4 @@
-import { OptionalInterface } from "../../../types/util";
+import { OptionalInterface } from "../../../types/utils";
 
 export interface DesktopConfigOptions {
 	/** Array of URLs of wallpaper images */

packages/core/src/features/system/configs/miscConfig.ts

@@ -1,4 +1,4 @@
-import { OptionalInterface } from "../../../types/util";
+import { OptionalInterface } from "../../../types/utils";
 
 export interface MiscConfigOptions {
 	/**

packages/core/src/features/system/configs/modalsConfig.ts

@@ -1,4 +1,4 @@
-import { OptionalInterface } from "../../../types/util";
+import { OptionalInterface } from "../../../types/utils";
 import { Vector2 } from "../../math/vector2";
 
 export interface ModalsConfigOptions {

packages/core/src/features/system/configs/taskbarConfig.ts

@@ -1,4 +1,4 @@
-import { OptionalInterface } from "../../../types/util";
+import { OptionalInterface } from "../../../types/utils";
 
 export interface TaskbarConfigOptions {
 	/**

packages/core/src/features/system/configs/trackingConfig.ts

@@ -1,4 +1,4 @@
-import { OptionalInterface } from "../../../types/util";
+import { OptionalInterface } from "../../../types/utils";
 
 export interface TrackingConfigOptions {
 	/**

packages/core/src/features/system/configs/virtualDriveConfig.ts

@@ -1,4 +1,4 @@
-import { OptionalInterface } from "../../../types/util";
+import { OptionalInterface } from "../../../types/utils";
 
 export interface VirtualDriveConfigOptions {
 	fileIcon: string;

packages/core/src/features/system/configs/windowsConfig.ts

@@ -1,4 +1,4 @@
-import { OptionalInterface } from "../../../types/util";
+import { OptionalInterface } from "../../../types/utils";
 import { Vector2 } from "../../math/vector2";
 
 export interface WindowsConfigOptions {

packages/core/src/features/virtual-drive/folder/virtualFolder.ts

@@ -4,7 +4,7 @@ import { VirtualFileJson } from "../file/virtualFile";
 import { VirtualBase, VirtualBaseJson } from "../virtualBase";
 import { VirtualFolderLink } from ".";
 import { VirtualFile, VirtualFileLink } from "../file";
-import { fileExplorer } from "@prozilla-os/file-explorer";
+// import { fileExplorer } from "@prozilla-os/file-explorer";
 
 export interface VirtualFolderJson extends VirtualBaseJson {
 	fls?: VirtualFileJson[];
@@ -288,7 +288,7 @@ export class VirtualFolder extends VirtualBase {
 	 * Opens this folder in file explorer
 	 */
 	open(windowsManager: WindowsManager) {
-		return windowsManager.open(fileExplorer.id, { path: this.path });
+		return windowsManager.open("file-explorer", { path: this.path });
 	}
 
 	/**

packages/core/src/main.ts

@@ -1,5 +1,9 @@
 export * from "./features";
-export * from "./styles";
 export * from "./components";
 export * from "./hooks";
 export * from "./constants";
+export * from "./styles";
+
+import "./styles/global.css";
+
+export type * from "./types/utils";

packages/core/src/styles/index.ts

@@ -1,3 +1 @@
-import "./global.css";
-
 export { default as utilStyles } from "./utils.module.css";

packages/core/tsconfig.json

@@ -1,5 +1,13 @@
 {
 	"extends": "../../tsconfig.json",
-	"include": ["src/**/*"],
+	"compilerOptions": {
+		"baseUrl": "../..",
+		"composite": true,
+		"outDir": "dist",
+		"declaration": true,
+		"emitDeclarationOnly": true,
+		"noEmit": false
+	},
+	"include": ["src", "vite.config.ts"],
 	"exclude": ["node_modules"]
 }

packages/core/vite.config.ts

@@ -0,0 +1,33 @@
+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";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [
+		react(),
+		libInjectCss(),
+		dts({
+			include: ["src"],
+			outDir: "dist",
+			rollupTypes: true,
+			strictOutput: true
+		})
+	],
+	build: {
+		lib: {
+			entry: resolve(__dirname, "src/main.ts"),
+			formats: ["es"],
+		},
+		rollupOptions: {
+			external: ["react", "react/jsx-runtime"],
+			output: {
+				assetFileNames: "assets/[name][extname]",
+				entryFileNames: "[name].js",
+			}
+		},
+		sourcemap: true
+	}
+});

packages/prozilla-os/CHANGELOG.md

@@ -1,5 +1,16 @@
 # prozilla-os
 
+## 1.0.12
+
+### Patch Changes
+
+- Optimized building process for each package using Vite
+- Updated dependencies
+  - @prozilla-os/file-explorer@1.0.9
+  - @prozilla-os/text-editor@1.0.2
+  - @prozilla-os/terminal@1.0.2
+  - @prozilla-os/core@1.0.12
+
 ## 1.0.11
 
 ### Patch Changes

packages/prozilla-os/package.json

@@ -1,17 +1,18 @@
 {
 	"name": "prozilla-os",
 	"description": "a React component library written in TypeScript for building web-based operating systems, made by Prozilla.",
-	"version": "1.0.11",
-	"homepage": "https://os.prozilla.dev/",
+	"version": "1.0.12",
+	"homepage": "https://os.prozilla.dev",
 	"author": {
 		"name": "Prozilla",
 		"email": "business@prozilla.dev",
 		"url": "https://prozilla.dev/"
 	},
-	"main": "src/index.ts",
 	"type": "module",
+	"main": "dist/main.js",
+	"types": "dist/main.d.ts",
 	"scripts": {
-		"test": "tsc --watch"
+		"build": "tsc && vite build"
 	},
 	"repository": {
 		"type": "git",
@@ -19,14 +20,6 @@
 		"directory": "packages/prozilla-os"
 	},
 	"license": "MIT",
-	"keywords": [
-		"react",
-		"typescript",
-		"web-os",
-		"components",
-		"internet-os",
-		"virtual-desktop"
-	],
 	"dependencies": {
 		"@prozilla-os/core": "workspace:*",
 		"@prozilla-os/file-explorer": "workspace:*",
@@ -34,13 +27,33 @@
 		"@prozilla-os/text-editor": "workspace:*"
 	},
 	"devDependencies": {
-		"typescript": "^5.4.5"
+		"@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"
+	},
+	"peerDependencies": {
+		"react": "^18.3.1"
 	},
 	"files": [
-		"src/**/*"
+		"dist"
+	],
+	"sideEffects": [
+		"**/*.css"
 	],
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/",
 		"access": "public"
-	}
+	},
+	"keywords": [
+		"react",
+		"typescript",
+		"web-os",
+		"components",
+		"internet-os",
+		"virtual-desktop"
+	]
 }

packages/prozilla-os/src/main.ts

@@ -1,4 +1,4 @@
 export * from "@prozilla-os/core";
 export * from "@prozilla-os/file-explorer";
 export * from "@prozilla-os/terminal";
-export * from "@prozilla-os/text-editor";
+export * from "@prozilla-os/text-editor";

packages/prozilla-os/src/types/utils.ts

@@ -0,0 +1,5 @@
+export enum FileSelectorMode {
+	None = 0,
+	Single = 1,
+	Multi = 2
+}

packages/prozilla-os/src/types/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/prozilla-os/tsconfig.json

@@ -1,5 +1,17 @@
 {
 	"extends": "../../tsconfig.json",
-	"include": ["src/**/*"],
+	"compilerOptions": {
+		"baseUrl": "../..",
+		"composite": true,
+		"outDir": "dist",
+		"declaration": true,
+		"emitDeclarationOnly": true,
+		"noEmit": false,
+		"paths": {
+			"@prozilla-os/core": ["packages/core/dist/main"],
+			"@prozilla-os/*": ["packages/apps/*/dist/main"]
+		}
+	},
+	"include": ["src", "vite.config.ts"],
 	"exclude": ["node_modules"]
 }

packages/prozilla-os/vite.config.ts

@@ -0,0 +1,35 @@
+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";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [
+		react(),
+		libInjectCss(),
+		dts({
+			include: ["src"],
+			outDir: "dist",
+			rollupTypes: true,
+			strictOutput: true,
+			pathsToAliases: false,
+			bundledPackages: ["@prozilla-os/*"]
+		})
+	],
+	build: {
+		lib: {
+			entry: resolve(__dirname, "src/main.ts"),
+			formats: ["es"],
+		},
+		rollupOptions: {
+			external: ["react", "react/jsx-runtime", /^@prozilla-os\//g],
+			output: {
+				assetFileNames: "assets/[name][extname]",
+				entryFileNames: "[name].js",
+			}
+		},
+		sourcemap: true
+	}
+});

src/Main.tsx

@@ -1,10 +1,10 @@
-import { ProzillaOS } from "prozilla-os";
 import { ReactElement } from "react";
 import { Router } from "./router/Router";
 import { desktopConfig } from "./config/desktop.config";
 import { NAME, TAG_LINE } from "./config/branding.config";
 import { appsConfig } from "./config/apps.config";
 import { virtualDriveConfig } from "./config/virtualDrive.config";
+import { ProzillaOS } from "prozilla-os";
 
 export function Main(): ReactElement {
 	return <ProzillaOS

src/components/standalone/StandaloneHeader.tsx

@@ -1,8 +1,8 @@
 import { ReactSVG } from "react-svg";
 import { NAME } from "../../config/branding.config";
 import styles from "./StandaloneHeader.module.css";
-import { Button } from "prozilla-os";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { Button } from "@prozilla-os/core";
 
 interface StandaloneHeaderProps {
 	exit: Function;

src/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { Main } from "./Main";
 import { ASCII_LOGO, NAME } from "./config/branding.config";
+import { Main } from "./Main";
 
 // Render app
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

tsconfig.json

@@ -25,6 +25,13 @@
 		
 		/* Type Checking */
 		"strict": true,
+
+		/* Module resolution */
+		"baseUrl": "./",
+		"paths": {
+			"prozilla-os": ["packages/prozilla-os/dist/main"],
+			"@prozilla-os/*": ["packages/*/dist/main", "packages/apps/*/dist/main"],
+		}
 	},
 	"include": [
 		"src/**/*",
@@ -32,8 +39,8 @@
 		// "scripts/**/*", // TO DO: uncomment this line
 	],
 	"exclude": [
-		"./node_modules",
-		"./dist",
+		"**/node_modules",
+		"**/dist",
 		"./.vscode",
 		"./.github",
 	],

vite.config.ts

@@ -1,22 +1,71 @@
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
+import react from "@vitejs/plugin-react";
 import checker from "vite-plugin-checker";
 import { BUILD_DIR } from "./src/config/deploy.config";
+import { resolve } from "path";
+
+/**
+ * Loads packages from their local path instead of node_modules 
+ */
+const ENABLE_ALIASES = true;
+
+/**
+ * Enables importing local packages from their dist (build) directory instead of their src directory
+ * Useful for testing builds before publishing
+ */
+const USE_PACKAGE_BUILDS = true;
+
+function generateAliases() {
+	if (!ENABLE_ALIASES) return {};
+
+	const entryFile = USE_PACKAGE_BUILDS ? "dist/main.js" : "src/main.ts";
+
+	const localPackages = [
+		{ name: "prozilla-os", path: resolve(__dirname, "packages/prozilla-os/" + entryFile) },
+		{ name: "@prozilla-os/core", path: resolve(__dirname, "packages/core/" + entryFile) }
+	];
+
+	const localApps = [
+		"file-explorer",
+		"terminal",
+		"text-editor"
+	];
+
+	localApps.forEach((id) => {
+		const name = `@prozilla-os/${id}`;
+		const path = resolve(__dirname, `packages/apps/${id}/${entryFile}`);
+		localPackages.push({ name, path });
+	});
+
+	return localPackages.reduce((aliases, localPackage) => {
+		aliases[localPackage.name] = localPackage.path;
+		return aliases;
+	}, {} as Record<string, string>);
+}
 
 // https://vitejs.dev/config/
-export default defineConfig({
-	base: "/",
-	plugins: [
-		react(),
-		checker({
-			typescript: true,
-		}),
-	],
-	build: {
-		outDir: BUILD_DIR
-	},
-	server: {
-		port: 3000,
-		host: true
-	},
+export default defineConfig(({ command }) => {
+	const devMode = command == "serve";
+
+	return {
+		base: "/",
+		plugins: [
+			react(),
+			checker({
+				typescript: true,
+			}),
+		],
+		build: {
+			outDir: BUILD_DIR
+		},
+		resolve: {
+			alias: devMode ? generateAliases() : {},
+		},
+		server: {
+			port: 3000,
+		},
+		optimizeDeps: {
+			force: (devMode && !ENABLE_ALIASES)
+		}
+	};
 });