@gxp-dev/tools 2.0.56 → 2.0.58

package/bin/lib/commands/build.js

@@ -8,7 +8,6 @@ const path = require("path");
 const fs = require("fs");
 const shell = require("shelljs");
 const archiver = require("archiver");
-const { exportCmd } = require("../constants");
 const { findProjectRoot, resolveGxPaths } = require("../utils");
 
 /**
@@ -310,8 +309,6 @@ async function buildCommand(argv) {
 
 	console.log("🔨 Building plugin...\n");
 
-	const envVars = [];
-
 	// check if vite.config.js exists locally
 	let viteConfigPath = paths.viteConfigPath;
 	const localViteConfigPath = path.join(projectPath, "vite.config.js");
@@ -320,24 +317,18 @@ async function buildCommand(argv) {
 		console.log(`📁 Using local vite.config.js: ${viteConfigPath}`);
 	}
 
-	// Set variables only if not already defined in environment
+	// Set environment variables directly on process.env for cross-platform compatibility.
+	// Using shell-level "export"/"set" syntax breaks on Windows due to cmd.exe quote parsing.
 	if (!process.env.NODE_LOG_LEVEL) {
-		envVars.push(
-			`${exportCmd} NODE_LOG_LEVEL=${argv["node-log-level"] || "error"}`
-		);
+		process.env.NODE_LOG_LEVEL = argv["node-log-level"] || "error";
 	}
 	if (!process.env.COMPONENT_PATH) {
-		envVars.push(
-			`${exportCmd} COMPONENT_PATH=${
-				argv["component-path"] || "./src/Plugin.vue"
-			}`
-		);
+		process.env.COMPONENT_PATH = argv["component-path"] || "./src/Plugin.vue";
 	}
 
-	const command = [
-		...envVars,
-		`npx vite build --config "${viteConfigPath}"`,
-	].join(" && ");
+	// Normalize path separators to forward slashes for cross-platform shell compatibility
+	const normalizedViteConfigPath = viteConfigPath.replace(/\\/g, "/");
+	const command = `npx vite build --config "${normalizedViteConfigPath}"`;
 
 	const result = shell.exec(command);
 

package/bin/lib/commands/dev.js

@@ -9,7 +9,6 @@ const path = require("path");
 const fs = require("fs");
 const shell = require("shelljs");
 const dotenv = require("dotenv");
-const { exportCmd } = require("../constants");
 const {
 	findProjectRoot,
 	resolveGxPaths,
@@ -82,10 +81,13 @@ function getBrowserExtensionConfig(browser, projectPath, paths, options = {}) {
 			return null;
 		}
 
+		// Normalize path separators for cross-platform shell compatibility
+		const normalizedScriptPath = scriptPath.replace(/\\/g, "/");
 		return {
 			name: "CHROME",
 			color: "blue",
-			command: `CHROME_EXTENSION_PATH="${extensionPath}" USE_HTTPS="${useHttps}" NODE_PORT="${port}" node "${scriptPath}"`,
+			// Inline KEY=VALUE env syntax doesn't work on Windows; env vars are set on process.env before exec
+			command: `node "${normalizedScriptPath}"`,
 			extensionPath,
 			startUrl,
 		};
@@ -200,34 +202,26 @@ function devCommand(argv) {
 		console.log("📦 Using runtime dev files (publish to customize)");
 	}
 
-	// Only set environment variables if they're not already set (allows .env to take precedence)
-	const envVars = [];
-
-	// Set variables only if not already defined in environment
+	// Set environment variables directly on process.env for cross-platform compatibility.
+	// Using shell-level "export"/"set" syntax breaks on Windows due to cmd.exe quote parsing.
 	if (!process.env.NODE_LOG_LEVEL) {
-		envVars.push(
-			`${exportCmd} NODE_LOG_LEVEL=${argv["node-log-level"] || "info"}`
-		);
+		process.env.NODE_LOG_LEVEL = argv["node-log-level"] || "info";
 	}
 	if (!process.env.NODE_PORT) {
-		envVars.push(`${exportCmd} NODE_PORT=${finalPort}`);
+		process.env.NODE_PORT = String(finalPort);
 	}
 	if (!process.env.COMPONENT_PATH) {
-		envVars.push(
-			`${exportCmd} COMPONENT_PATH=${
-				argv["component-path"] || "./src/Plugin.vue"
-			}`
-		);
+		process.env.COMPONENT_PATH = argv["component-path"] || "./src/Plugin.vue";
 	}
 
 	// Always set HTTPS-related variables (these are dynamic)
-	envVars.push(`${exportCmd} USE_HTTPS=${useHttps ? "true" : "false"}`);
-	envVars.push(`${exportCmd} CERT_PATH=${certPath}`);
-	envVars.push(`${exportCmd} KEY_PATH=${keyPath}`);
+	process.env.USE_HTTPS = useHttps ? "true" : "false";
+	process.env.CERT_PATH = certPath;
+	process.env.KEY_PATH = keyPath;
 
 	// Set mock API flag if requested
 	if (withMock) {
-		envVars.push(`${exportCmd} MOCK_API_ENABLED=true`);
+		process.env.MOCK_API_ENABLED = "true";
 	}
 
 	// Check for browser extension flags
@@ -266,6 +260,11 @@ function devCommand(argv) {
 		}
 	}
 
+	// Set CHROME_EXTENSION_PATH on process.env so launch-chrome.js inherits it
+	if (chromeConfig) {
+		process.env.CHROME_EXTENSION_PATH = chromeConfig.extensionPath;
+	}
+
 	// Build the command based on what's requested
 	let command;
 
@@ -274,18 +273,19 @@ function devCommand(argv) {
 	const names = [];
 	const colors = [];
 
+	// Normalize path separators to forward slashes for cross-platform shell compatibility
+	const normalizedViteConfigPath = viteConfigPath.replace(/\\/g, "/");
+
 	// Vite is always included
-	const viteCommand = [
-		...envVars,
-		`npx vite dev --config "${viteConfigPath}"`,
-	].join(" && ");
+	const viteCommand = `npx vite dev --config "${normalizedViteConfigPath}"`;
 	processes.push(`"${viteCommand}"`);
 	names.push("VITE");
 	colors.push("cyan");
 
 	// Socket server (on by default, skip if --no-socket or server.js not found)
 	if (serverJsPath) {
-		processes.push(`"npx nodemon \\"${serverJsPath}\\""`);
+		const normalizedServerPath = serverJsPath.replace(/\\/g, "/");
+		processes.push(`"npx nodemon \\"${normalizedServerPath}\\""`);
 		names.push("SOCKET");
 		colors.push("green");
 	}
@@ -312,9 +312,7 @@ function devCommand(argv) {
 		)}" --prefix-colors "${colors.join(",")}" ${processes.join(" ")}`;
 	} else {
 		// Just run Vite dev server alone
-		command = [...envVars, `npx vite dev --config "${viteConfigPath}"`].join(
-			" && "
-		);
+		command = `npx vite dev --config "${normalizedViteConfigPath}"`;
 	}
 
 	shell.exec(command);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gxp-dev/tools",
-  "version": "2.0.56",
+  "version": "2.0.58",
   "description": "Dev tools to create platform plugins",
   "type": "commonjs",
   "publishConfig": {

package/runtime/stores/gxpPortalConfigStore.js

@@ -313,7 +313,55 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 			console.warn(`[GxP Store] Unknown SOCKET_DRIVER "${socketDriver}", sockets not initialized`);
 		}
 	}
+	/**
+	 * Initialize API operations registry from OpenAPI spec
+	 */
+	async function initializeApiOperations() {
+		// Operations are built from OpenAPI spec paths
+		// Structure: { [operationId]: { method, path, parameters } }
+		try {
+			const specUrl = `${apiBaseUrl.value}/api-specs/openapi.json`
+			const response = await axios.get(specUrl)
+			const spec = response.data
+
+			const operations = {}
+			const httpMethods = ["get", "post", "put", "patch", "delete"]
+
+			// Parse paths from OpenAPI spec
+			if (spec.paths) {
+				for (const [path, pathItem] of Object.entries(spec.paths)) {
+					for (const method of httpMethods) {
+						if (pathItem[method] && pathItem[method].operationId) {
+							const operation = pathItem[method]
+							const operationId = operation.operationId
+
+							// Extract path parameters from the path string
+							const pathParams = []
+							const paramMatches = path.matchAll(/\{([^}]+)\}/g)
+							for (const match of paramMatches) {
+								pathParams.push(match[1])
+							}
+
+							operations[operationId] = {
+								method,
+								path,
+								parameters: pathParams,
+							}
+						}
+					}
+				}
+			}
 
+			apiOperations.value = operations
+			console.log(
+				`Loaded ${Object.keys(operations).length} API operations from OpenAPI spec`,
+			)
+		} catch (error) {
+			console.error("Failed to load OpenAPI spec:", error.message)
+			// Initialize with empty operations on failure
+			apiOperations.value = {}
+		}
+	}
 	/**
 	 * Initialize dependency-based sockets
 	 * Called after manifest loads to set up dependency-specific listeners
@@ -329,43 +377,43 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 					dependency.operations &&
 					Object.keys(dependency.operations).length > 0
 				) {
-					Object.keys(dependency.operations).forEach((operation) => {
-						if (
-							Object.keys(apiOperations.value[dependency.identifier]).every(
-								(key) =>
-									[
-										"identifier",
-										"model",
-										"permissionKey",
-										"operations",
-									].includes(key)
-							)
-						) {
-							let method = "get";
-							let path = dependency.operations[operation];
-							if (path.includes(":")) {
-								let pathSplit = path.split(":");
-								method = pathSplit[0];
-								path = pathSplit[1];
-							}
-							path = path.replace(
-								"{teamSlug}/{projectSlug}",
-								pluginVars.value.projectId
-							);
-							path = path.replace(
-								`{${dependency.permissionKey}}`,
-								dependencyList.value[dependency.identifier]
-							);
-							if (!apiOperations.value[dependency.identifier]) {
-								apiOperations.value[dependency.identifier] = {};
-							}
-							apiOperations.value[dependency.identifier][operation] = {
-								method: method,
-								path: path,
-								model_key: dependency.permissionKey,
-							};
-						}
-					});
+					// Object.keys(dependency.operations).forEach((operation) => {
+					// 	if (
+					// 		Object.keys(apiOperations.value[dependency.identifier]).every(
+					// 			(key) =>
+					// 				[
+					// 					"identifier",
+					// 					"model",
+					// 					"permissionKey",
+					// 					"operations",
+					// 				].includes(key)
+					// 		)
+					// 	) {
+					// 		let method = "get";
+					// 		let path = dependency.operations[operation];
+					// 		if (path.includes(":")) {
+					// 			let pathSplit = path.split(":");
+					// 			method = pathSplit[0];
+					// 			path = pathSplit[1];
+					// 		}
+					// 		path = path.replace(
+					// 			"{teamSlug}/{projectSlug}",
+					// 			pluginVars.value.projectId
+					// 		);
+					// 		path = path.replace(
+					// 			`{${dependency.permissionKey}}`,
+					// 			dependencyList.value[dependency.identifier]
+					// 		);
+					// 		if (!apiOperations.value[dependency.identifier]) {
+					// 			apiOperations.value[dependency.identifier] = {};
+					// 		}
+					// 		apiOperations.value[dependency.identifier][operation] = {
+					// 			method: method,
+					// 			path: path,
+					// 			model_key: dependency.permissionKey,
+					// 		};
+					// 	}
+					// });
 				}
 				if (dependency.events && Object.keys(dependency.events).length > 0) {
 					// Create socket listeners for each event type
@@ -445,20 +493,133 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 			throw new Error(`DELETE ${endpoint}: ${error.message}`);
 		}
 	}
-	async function callApi(operation, identifier, data = {}) {
-		try {
-			const operationConfig = apiOperations.value[identifier][operation];
+	async function callApi(operationId, identifier, data = {}) {
+		// Initialize operations if not done
+		if (Object.keys(apiOperations.value).length === 0) {
+			await initializeApiOperations()
+		}
+		let operationConfig = apiOperations.value[operationId]
+		if (!operationConfig) {
+			operationConfig =
+				apiOperations.value["portal.v1.project." + operationId]
 			if (!operationConfig) {
-				throw new Error(`Operation not found: ${operation}`);
+				throw new Error(`Operation not found: portal.v1.${operationId}`)
 			}
-			const response = await apiClient[operationConfig.method](
-				operationConfig.path,
-				data
-			);
-			return response.data;
+		}
+
+		const { method, path, parameters } = operationConfig
+
+		// Build the URL by substituting path parameters
+		let resolvedPath = path
+
+		// Build context parameters from multiple sources:
+		// 1. Auto-inject teamSlug and projectSlug from portal context
+		// 2. Look up identifier value from dependencyList (if identifier provided)
+		// 3. Merge in additional data parameters
+
+		let projectTeamId = pluginVars.value?.projectId?.split("/")
+		if (!projectTeamId || projectTeamId.length !== 2) {
+			return []
+		}
+		let teamSlug = projectTeamId[0]
+		let projectSlug = projectTeamId[1]
+
+		const contextParams = {
+			teamSlug: teamSlug,
+			projectSlug: projectSlug,
+		}
+		if (parameters.includes("form") && pluginVars.value?.formId) {
+			contextParams["form"] = pluginVars.value?.formId
+		}
+		// If identifier is provided, look up its value from dependencyList
+		// dependencyList stores parent object IDs as { 'identifier': idValue }
+		if (identifier !== null && identifier !== undefined) {
+			const identifierValue = dependencyList.value?.[identifier]
+			if (identifierValue !== undefined) {
+				// Add the identifier value using the identifier key as the param name
+				// e.g., identifier='form' with dependencyList.form='quiz-123' adds { form: 'quiz-123' }
+				contextParams[identifier] = identifierValue
+			}
+		}
+		const parsedData = {}
+		for (const key in data) {
+			if (data[key] !== undefined && data[key] !== null) {
+				if (data[key].toString().startsWith("pluginVars")) {
+					const pluginVarKey = data[key].split(".")[1]
+
+					parsedData[key] = pluginVars.value[pluginVarKey]
+					continue
+				}
+				parsedData[key] = data[key]
+			}
+		}
+
+		// Merge in additional data (can override dependencyList values if needed)
+		Object.assign(contextParams, parsedData)
+
+		// Replace path parameters
+		for (const param of parameters) {
+			const value = contextParams[param]
+			if (value === undefined || value === null) {
+				throw new Error(
+					`Missing required parameter: ${param} for operation ${operationId}`,
+				)
+			}
+			resolvedPath = resolvedPath.replace(
+				`{${param}}`,
+				encodeURIComponent(value),
+			)
+		}
+
+		// Separate path params from body data
+		const bodyData = { ...parsedData }
+		for (const param of parameters) {
+			delete bodyData[param]
+		}
+		// Also remove identifier from body if it was in data
+		if (identifier && bodyData[identifier] !== undefined) {
+			delete bodyData[identifier]
+		}
+		
+		try {
+			let response
+			if (method === "get" || method === "delete") {
+				// GET/DELETE: params go in query string
+				response = await apiClient[method]("/api" + resolvedPath, {
+					params: bodyData,
+				})
+			} else {
+				// POST/PUT/PATCH: params go in body
+				response = await apiClient[method]("/api" + resolvedPath, bodyData)
+			}
+			return response.data
 		} catch (error) {
-			throw new Error(`${method} ${endpoint}: ${error.message}`);
+			const message =
+				error.response?.data?.message ||
+				error.response?.data?.error ||
+				error.message
+			console.error(
+				`API Error [${operationId}]:`,
+				message,
+				error.response?.data,
+			)
+			throw new Error(`${method.toUpperCase()} ${resolvedPath}: ${message}`)
 		}
+
+
+		// try {
+		// 	const operationConfig = apiOperations.value[identifier][operation];
+		// 	if (!operationConfig) {
+		// 		throw new Error(`Operation not found: ${operation}`);
+		// 	}
+		// 	const response = await apiClient[operationConfig.method](
+		// 		operationConfig.path,
+		// 		data
+		// 	);
+		// 	return response.data;
+		// } catch (error) {
+		// 	throw new Error(`${method} ${endpoint}: ${error.message}`);
+		// }
 	}
 
 	// Utility methods
@@ -563,7 +724,7 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 	// Initialize sockets SYNCHRONOUSLY when store is created
 	// This ensures sockets is available immediately
 	initializeSockets();
-
+	initializeApiOperations()
 	// Load manifest ASYNCHRONOUSLY in the background
 	// This allows the store to be used immediately while manifest loads
 	loadManifest();

package/runtime/vite.config.js

@@ -332,8 +332,8 @@ export default defineConfig(({ mode }) => {
 				? {
 						protocol: env.HMR_PROTOCOL || "wss",
 						host: env.HMR_HOST,
-						port: parseInt(env.HMR_PORT) || 443,
-						clientPort: parseInt(env.HMR_PORT) || 443,
+						port: parseInt(env.HMR_PORT) || parseInt(env.CLIENT_PORT) || parseInt(env.NODE_PORT) || 3060,
+						clientPort: parseInt(env.HMR_CLIENT_PORT) || parseInt(env.CLIENT_PORT) || parseInt(env.NODE_PORT) || 3060,
 				  }
 				: {
 						clientPort:

package/template/vite.config.js

@@ -320,7 +320,7 @@ export default defineConfig(({ mode }) => {
 		},
 		build: {
 			lib: {
-				entry: [env.COMPONENT_PATH || "./src/Plugin.vue"],
+				entry: [path.resolve(process.cwd(), env.COMPONENT_PATH || "./src/Plugin.vue")],
 				name: libName,
 				fileName: (format) => `plugin.${format}.js`,
 				formats: ["es"],