fix: Fixing Bundle (#13)

- Reworking how the bundle is done, so we generate separate TS index files
- Adding PrimeVue theme plugin to bundle

makeIndex.ts

@@ -1,15 +1,15 @@
 import { writeFileSync } from "fs";
 import { glob } from "glob";
+import path from "path";
 
-// TODOJEF: Need to include loading the theme in PrimeVue
 const Dirs = [{
 	dir: "./src/components/",
 	match: "**/*",
 	name: "components",
 }, {
 	dir: "./src/assets/",
 	match: "**/*.vue",
-	name: "assets",
+	name: "icons",
 }, {
 	dir: "./src/types/",
 	match: "**/*",
@@ -20,16 +20,18 @@ const Dirs = [{
 	name: "utils",
 }];
 const SrcRe = /^src/;
-const ComponentNameRe = /(\w+)\.(\w+)$/;
-for (const { dir, match } of Dirs) {
+for (const { dir, match, name } of Dirs) {
+	const output: string[] = [];
 	const files = glob.sync(`${dir}${match}`);
 	for (const file of files) {
-		let output = "";
-		const [, componentName, extension] = file.match(ComponentNameRe);
-		if (extension === "ts") {
-			continue;
+		const extension = path.extname(file);
+		const componentName = path.basename(file, extension);
+		if (extension === ".ts") {
+			output.push(`export * from "${file.replace(SrcRe, "@").replace(/\\/g, "/").replace(extension, "")}";`);
+		}
+		else {
+			output.push(`export { default as ${componentName} } from "${file.replace(SrcRe, "@").replace(/\\/g, "/")}";`);
 		}
-		output = `export { default as ${componentName} } from "${file.replace(SrcRe, "@").replace(/\\/g, "/")}";`;
-		writeFileSync(`${dir}${componentName}.ts`, output);
 	}
+	writeFileSync(`src/${name}.ts`, output.join("\n"));
 }

src/App.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import BaseButton from "@/components/BaseButton.vue";
 </script>
 
 <template>
 	<article class="text-red-400">
-		Hello!
+		<BaseButton text="My Button" />
 	</article>
 </template>

src/main.ts

@@ -1,14 +1,10 @@
 import "@/style.css";
 import { createApp } from "vue";
-import PrimeVue from "primevue/config";
 import App from "@/App.vue";
-import { TailwindTheme } from "@/assets/theme";
 import { router } from "@/router";
+import theme from "@/theme.ts";
 
 const app = createApp(App);
-app.use(PrimeVue, {
-	unstyled: true,
-	pt: TailwindTheme,
-});
+app.use(theme);
 app.use(router);
 app.mount("#app");

src/theme.ts

@@ -0,0 +1,12 @@
+import { App } from "vue";
+import PrimeVue from "primevue/config";
+import { TailwindTheme } from "@/assets/theme";
+
+export default {
+	install(app: App) {
+		app.use(PrimeVue, {
+			unstyled: true,
+			pt: TailwindTheme,
+		});
+	},
+};

tsconfig.build.json

@@ -31,11 +31,16 @@
         }
     },
     "include": [
-        "src/components/**/*",
-        "src/utils/**/*",
-        "src/types/**/*",
+        "src/components.ts",
+        "src/utils.ts",
+        "src/types.ts",
+        "src/icons.ts",
+        "src/theme.ts",
+        "src/components/*",
+        "src/utils/*",
+        "src/types/*",
         "src/assets/**/*.vue",
         "src/vite-env.d.ts"
     ],
-    "exclude": ["node_modules", "src/App.vue", "src/main.ts", "src/router.ts", "src/assets/theme", "src/indices"]
+    "exclude": ["node_modules", "src/App.vue", "src/main.ts", "src/router.ts", "src/assets/theme"]
 }

vite/config.prod.ts

@@ -5,7 +5,9 @@ import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
 import svgLoader from "vite-svg-loader";
 
-const entries: Record<string, string> = {};
+const entries: Record<string, string> = {
+	theme: "src/theme.ts",
+};
 glob.sync("src/components/**/*.ts").forEach((file) => {
 	entries[file.replace(/\\/g, "/").replace("src/", "").replace(".ts", "")] = file;
 });
@@ -41,7 +43,13 @@ export default defineConfig({
 		emptyOutDir: true,
 		outDir: "dist",
 		lib: {
-			entry: entries,
+			entry: {
+				theme: "src/theme.ts",
+				components: "src/components.ts",
+				types: "src/types.ts",
+				utils: "src/utils.ts",
+				icons: "src/icons.ts",
+			},
 			formats: ["es"],
 		},
 		rollupOptions: {