@hiscovega/vundle 0.0.5

package/README.md

@@ -0,0 +1,250 @@
+# @griddo/bundler
+
+Master bundler configuration for Griddo Instance projects as an ESModules npm package.
+
+## 📦 Installation
+
+```bash
+npm install @griddo/bundler
+```
+
+## 🚀 Publishing
+
+### Automated Releases with release-it
+
+This package uses [release-it](https://github.com/release-it/release-it) for automated versioning and publishing.
+
+#### Prerequisites
+
+1. **NPM Token**: Ensure you have an NPM token with publish permissions
+2. **GitHub Token**: For automatic GitHub releases (optional)
+3. **Clean working directory**: All changes should be committed
+
+#### Release Commands
+
+```bash
+# Dry run (recommended first)
+npm run release:dry
+
+# Release patch version (1.0.0 -> 1.0.1)
+npm run release:patch
+
+# Release minor version (1.0.0 -> 1.1.0)
+npm run release:minor
+
+# Release major version (1.0.0 -> 2.0.0)
+npm run release:major
+
+# Interactive release (recommended)
+npm run release
+```
+
+#### What happens during release:
+
+1. ✅ **Pre-release checks**: Lint and format verification
+2. 📝 **Version bump**: Automatic version increment
+3. 📝 **Changelog generation**: Conventional commits to CHANGELOG.md
+4. 🔖 **Git operations**: Commit, tag, and push
+5. 📦 **NPM publish**: Publish to npm registry
+6. 🐙 **GitHub release**: Create GitHub release (if configured)
+
+#### Conventional Commits
+
+Use conventional commit format for automatic changelog generation:
+
+```bash
+feat: add new feature
+fix: bug fix
+docs: documentation update
+style: code style changes
+refactor: code refactoring
+test: add tests
+chore: maintenance tasks
+```
+
+## 🚀 Usage
+
+### Configuración Automática (Recomendada)
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { plugins } from "@griddo/bundler/plugins";
+
+export default defineConfig({
+  plugins: [react(), ...plugins],
+  build: {
+    // Tu configuración se mergeará automáticamente desde vite.config.mjs
+  },
+});
+```
+
+### Client Configuration (vite.config.mjs)
+
+The bundler automatically looks for a `vite.config.mjs` file in your project root. Create this file to customize the build configuration.
+
+#### Quick Start Template
+
+Copy the `vite.config.mjs.example` file from this repository as a starting point:
+
+```bash
+cp node_modules/@griddo/bundler/vite.config.mjs.example ./vite.config.mjs
+```
+
+Or create it manually:
+
+```javascript
+// vite.config.mjs (in your project root)
+export default {
+  build: {
+    rollupOptions: {
+      external: (id) => {
+        // Custom external dependencies
+        if (id === "your-heavy-dependency") return true;
+        return false;
+      },
+    },
+  },
+  plugins: [
+    // Additional Vite plugins for your project
+  ],
+};
+```
+
+### Advanced Configuration
+
+```javascript
+// If you need more complex configuration, you can also do:
+import { defineConfig } from 'vite';
+import { plugins } from "@griddo/bundler/plugins";
+
+// Your project's main vite.config.js
+export default defineConfig({
+  plugins: [
+    ...plugins,
+    // Your additional plugins
+  ],
+  build: {
+    // Your custom build config
+  },
+});
+```
+
+### TypeScript Support
+
+```typescript
+// vite.config.ts
+import { defineConfig } from "vite";
+import type { ClientConfig } from "@griddo/bundler/types";
+import { plugins } from "@griddo/bundler/plugins";
+
+const clientConfig: ClientConfig = {
+  build: {
+    rollupOptions: {
+      external: (id) => id.startsWith("client-dependency"),
+    },
+  },
+};
+
+export default defineConfig({
+  ...clientConfig,
+  plugins: [...plugins],
+});
+```
+
+## 📁 Package Structure
+
+```
+@griddo/bundler/
+├── vite.config.ts         # 📦 Main configuration file
+├── plugins/
+│   ├── index.mjs         # ESModule plugins
+│   └── index.d.ts        # TypeScript definitions
+├── types/
+│   └── client-config.d.ts # TypeScript types
+├── package.json          # 📦 Package definition
+└── README.md            # 📖 Documentation
+```
+
+### Exports
+
+The package provides the following exports:
+
+- **Default config**: `import config from '@griddo/bundler'` - Configuración automática
+- **Vite config**: `import config from '@griddo/bundler/vite.config'`
+- **Plugins**: `import { plugins } from '@griddo/bundler/plugins'`
+- **Types**: `import type { ClientConfig } from '@griddo/bundler/types'`
+
+## 🚀 Uso
+
+### 1. "Instalar" el master bundler
+
+```bash
+npm run install:master
+```
+
+Esto crea un symlink desde `node_modules/@griddo/bundler/` hacia `external/config/`
+
+### 2. Ejecutar el build
+
+```bash
+npm run build
+```
+
+El build ahora usa la configuración desde `node_modules/@griddo/bundler/vite.config.ts`
+
+### 3. Limpiar la instalación simulada
+
+```bash
+npm run uninstall:master
+```
+
+## 🔄 Flujo de trabajo
+
+1. **Desarrollo**: Usa `npm run build:local` para trabajar con la config local
+2. **Validación**: Usa `npm run install:master` + `npm run build` para validar el flujo simulado
+3. **Producción**: Los clientes reales usarán `npm install @griddo/master-bundler`
+
+## 📋 Comandos disponibles
+
+- `npm run install:master` - Instala el bundler simulado
+- `npm run uninstall:master` - Remueve la instalación simulada
+- `npm run build` - Build usando configuración simulada
+- `npm run build:local` - Build usando configuración local
+
+## 🎯 Beneficios
+
+- ✅ **Simulación realista** del paquete NPM
+- ✅ **Sin cambios en el workflow** de desarrollo
+- ✅ **Validación completa** antes de publicar
+- ✅ **Transición suave** al paquete real
+- ✅ **Mantenimiento fácil** del código
+
+## 🔧 Configuración del cliente
+
+Los clientes pueden mantener su `vite.config.ts` local con configuración específica:
+
+```typescript
+// vite.config.ts del cliente
+import type { ClientConfig } from "@griddo/bundler/types";
+
+const config: ClientConfig = {
+  plugins: [
+    // Plugins específicos del cliente
+  ],
+  build: {
+    rollupOptions: {
+      external: (id) => {
+        // Dependencias externas específicas
+        if (id === "cliente-paquete-pesado") return true;
+        return false;
+      },
+    },
+  },
+};
+
+export default config;
+```
+
+El master bundler combinará esta configuración con la suya propia.

package/package.json

@@ -0,0 +1,100 @@
+{
+	"name": "@hiscovega/vundle",
+	"version": "0.0.5",
+	"description": "Master bundler configuration for Griddo Instance projects",
+	"main": "vite.config.mjs",
+	"module": "vite.config.mjs",
+	"types": "types/client-config.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./vite.config.mjs",
+			"import": "./vite.config.mjs"
+		},
+		"./vite.config": {
+			"types": "./vite.config.mjs",
+			"import": "./vite.config.mjs"
+		},
+		"./plugins": {
+			"types": "./plugins/index.d.ts",
+			"import": "./plugins/index.mjs"
+		},
+		"./types": {
+			"types": "./types/client-config.d.ts"
+		},
+		"./types/client-config": {
+			"types": "./types/client-config.d.ts"
+		}
+	},
+	"files": [
+		"vite.config.mjs",
+		"plugins/",
+		"types/",
+		"README.md"
+	],
+	"scripts": {
+		"remote:build": "vite build --config ./vite.config.mjs",
+		"lint": "biome check .",
+		"lint:fix": "biome check --write .",
+		"format": "biome format --write .",
+		"format:check": "biome format .",
+		"prepublishOnly": "npm run lint && npm run format:check",
+		"prepare": "npm run lint",
+		"release": "release-it",
+		"release:dry": "release-it --dry-run",
+		"release:minor": "release-it minor",
+		"release:major": "release-it major",
+		"release:patch": "release-it patch"
+	},
+	"dependencies": {
+		"@vitejs/plugin-react": "^5.0.2",
+		"vite": "^6.0.0",
+		"vite-plugin-dts": "^5.0.0-beta.6",
+		"vite-plugin-static-copy": "^3.1.2"
+	},
+	"peerDependencies": {
+		"@griddo/core": "^11.0.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"peerDependenciesMeta": {
+		"@griddo/core": {
+			"optional": false
+		},
+		"react": {
+			"optional": false
+		},
+		"react-dom": {
+			"optional": false
+		}
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/griddo/griddo-bundler.git"
+	},
+	"homepage": "https://github.com/griddo/griddo-bundler#readme",
+	"bugs": {
+		"url": "https://github.com/griddo/griddo-bundler/issues"
+	},
+	"keywords": [
+		"griddo",
+		"bundler",
+		"vite",
+		"build",
+		"configuration",
+		"esm",
+		"esmodules",
+		"release-it",
+		"conventional-changelog"
+	],
+	"author": "Griddo",
+	"license": "MIT",
+	"engines": {
+		"node": ">=18.0.0"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.2.2",
+		"@release-it/conventional-changelog": "^10.0.1",
+		"release-it": "^19.0.4"
+	}
+}

package/plugins/index.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from "vite";
+
+export declare const plugins: Plugin[];

package/plugins/index.mjs

@@ -0,0 +1,26 @@
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+
+import { viteStaticCopy } from "vite-plugin-static-copy";
+
+export const plugins = [
+	react(),
+
+	dts({
+		insertTypesEntry: true,
+		include: ["src"],
+		exclude: ["src/**/*.test.*", "src/**/*.spec.*", "src/builder/**/*.jsx"],
+		entryRoot: "src",
+		compilerOptions: {
+			declaration: true,
+			emitDeclarationOnly: false,
+		},
+	}),
+
+	viteStaticCopy({
+		targets: [
+			{ src: "static", dest: "" },
+			{ src: "thumbnails", dest: "" },
+		],
+	}),
+];

package/types/client-config.d.ts

@@ -0,0 +1,25 @@
+import type { UserConfig } from "vite";
+
+/**
+ * Configuración del cliente.
+ * Extiende la configuración de usuario de Vite (`UserConfig`) con opciones
+ * específicas para el ecosistema de Griddo.
+ */
+export interface ClientConfig extends UserConfig {
+	/**
+	 * Opciones específicas para la integración con el bundler de Griddo.
+	 */
+	griddoOptions?: {
+		/**
+		 * Proporciona un array de dependencias para marcar como externas durante el build.
+		 * Puedes usar strings para coincidencias exactas o RegExp para patrones.
+		 *
+		 * @example
+		 * customExternals: [
+		 * 'moment', // Marcar 'moment' como externo
+		 * /^@my-scope\// // Marcar cualquier paquete bajo '@my-scope/' como externo
+		 * ]
+		 */
+		customExternals?: (string | RegExp)[];
+	};
+}

package/vite.config.mjs

@@ -0,0 +1,114 @@
+import { resolve } from "node:path";
+import { defineConfig, loadConfigFromFile, mergeConfig } from "vite";
+
+import { plugins as masterPlugins } from "./plugins/index";
+
+export default defineConfig(async ({ command, mode }) => {
+	let clientConfig = {};
+
+	// --- Lógica de Carga de Configuración del Cliente Mejorada ---
+	// Usamos la función nativa de Vite para encontrar, cargar y transpilar
+	// la configuración del cliente, soportando .ts, .js, .mjs, etc.
+	try {
+		const clientConfigResult = await loadConfigFromFile(
+			{ command, mode },
+			// Dejamos el segundo argumento como undefined para que Vite busque el nombre por defecto
+			// (vite.config.ts, vite.config.js, etc.)
+			undefined,
+			// Especificamos la ruta raíz donde se encuentra el proyecto del cliente
+			resolve(__dirname, "../../"),
+		);
+
+		if (clientConfigResult) {
+			clientConfig = clientConfigResult.config;
+			console.log(`Configuración del cliente cargada desde: ${clientConfigResult.path}`);
+		} else {
+			console.log("No se encontró configuración del cliente, usando configuración base del master.");
+		}
+		// biome-ignore lint/correctness/noUnusedVariables: No error, only byass with a console.log
+	} catch (e) {
+		// Si 'loadConfigFromFile' no encuentra el archivo, devuelve null en lugar de lanzar un error.
+		// Este catch es para errores de sintaxis dentro del archivo de config del cliente u otros problemas.
+		console.log(
+			"No se pudo cargar la configuración del cliente (posible error de sintaxis), usando configuración base del master.",
+		);
+	}
+	// --- Fin de la Lógica de Carga ---
+
+	// --- Configuración Base del Master ---
+	// (El resto del archivo no cambia)
+	const masterConfig = {
+		logLevel: "warn",
+		publicDir: "static",
+		define: { global: "globalThis" },
+		plugins: masterPlugins,
+		build: {
+			reportCompressedSize: false,
+			lib: {
+				entry: {
+					index: resolve(__dirname, "../../src/index.tsx"),
+					builder: resolve(__dirname, "../../src/builder.jsx"),
+				},
+				formats: ["es"],
+				name: "GriddoInstance",
+			},
+			rollupOptions: {
+				preserveEntrySignatures: "strict",
+				external: (id) => {
+					// 1. Reglas 'external' del master (no se pueden sobreescribir)
+					const masterRules = ["@griddo/core", "react", "react-dom", "react/jsx-runtime", "prop-types"];
+					if (masterRules.some((pkg) => id === pkg || id.startsWith(`${pkg}/`))) {
+						return true;
+					}
+
+					// 2. Comprobar las reglas personalizadas definidas por el cliente.
+					// Esta es la nueva API declarativa.
+					const clientCustomExternals = clientConfig.griddoOptions?.customExternals || [];
+					for (const ext of clientCustomExternals) {
+						if (typeof ext === "string" && id === ext) return true;
+						if (ext instanceof RegExp && ext.test(id)) return true;
+					}
+
+					return false;
+				},
+				onwarn(warning, warn) {
+					if (warning.code === "DYNAMIC_IMPORT_ASSERTIONS" && warning.message.includes("moment")) {
+						return;
+					}
+					warn(warning);
+				},
+				output: {
+					dir: "dist",
+					format: "es",
+					entryFileNames: "[name].js",
+					assetFileNames: (assetInfo) => {
+						if (assetInfo.name?.endsWith(".css")) {
+							return "builder.css";
+						}
+						if (assetInfo.name?.match(/\.(png|jpe?g|gif|webp)$/)) {
+							return "assets/[name]-[hash][extname]";
+						}
+						return "assets/[name]-[hash][extname]";
+					},
+				},
+			},
+			sourcemap: true,
+			copyPublicDir: false,
+			cssCodeSplit: false,
+		},
+	};
+
+	// --- Fusión Final ---
+	// Antes de fusionar, nos aseguramos de que la configuración `external` del
+	// master nunca sea sobreescrita por el cliente. Esta es la clave para
+	// evitar la duplicación de React.
+	if (clientConfig.build?.rollupOptions?.external) {
+		console.log(
+			"WARN: The client-defined 'build.rollupOptions.external' property will be ignored. Use 'griddoOptions.customExternals' instead.",
+		);
+		delete clientConfig.build.rollupOptions.external;
+	}
+
+	// Una única llamada a mergeConfig fusiona de forma inteligente ambas configuraciones.
+	return mergeConfig(masterConfig, clientConfig);
+});