@gxp-dev/tools 2.0.6 → 2.0.8

package/runtime/vite-source-tracker-plugin.js

@@ -0,0 +1,232 @@
+/**
+ * GxP Source Tracker Vite Plugin
+ *
+ * Transforms Vue templates at compile time to add data-gxp-expr attributes
+ * to elements that contain template expressions or dynamic directives.
+ *
+ * This uses a more reliable approach - adding attributes directly to the
+ * elements rather than using comments.
+ *
+ * Example transformations:
+ *
+ *   <span>{{ title }}</span>
+ * Becomes:
+ *   <span data-gxp-expr="title">{{ title }}</span>
+ *
+ *   <div v-html="content"></div>
+ * Becomes:
+ *   <div v-html="content" data-gxp-expr="v-html:content"></div>
+ */
+
+/**
+ * Create the source tracker plugin
+ */
+export function gxpSourceTrackerPlugin(options = {}) {
+  const {
+    enabled = true,
+    attrName = 'data-gxp-expr'
+  } = options;
+
+  return {
+    name: 'gxp-source-tracker',
+    enforce: 'pre',
+
+    apply(config, { command }) {
+      return enabled && command === 'serve';
+    },
+
+    transform(code, id) {
+      if (!id.endsWith('.vue')) {
+        return null;
+      }
+
+      const templateMatch = code.match(/<template>([\s\S]*?)<\/template>/);
+      if (!templateMatch) {
+        return null;
+      }
+
+      // Debug: log which file we're processing
+      const fileName = id.split('/').pop();
+      console.log(`[GxP Source Tracker] Processing: ${fileName}`);
+
+      let template = templateMatch[1];
+      let modified = false;
+
+      // Track which elements we've already processed to avoid duplicates
+      const processed = new Set();
+
+      // Process each element that has {{ expression }} as its content
+      // We need to find the element that DIRECTLY contains the expression
+      // Strategy: Find all {{ expr }} and trace back to their parent element
+
+      // Strategy: Find each {{ expression }} and trace back to find its parent element
+      // This handles cases where expressions are nested or mixed with other content
+
+      const exprPattern = /\{\{([\s\S]*?)\}\}/g;
+      let match;
+
+      // Map to track which elements we've already added attributes to
+      // Key: element start position, Value: array of expressions
+      const elementExpressions = new Map();
+
+      while ((match = exprPattern.exec(template)) !== null) {
+        const exprStart = match.index;
+        const expression = match[1].trim();
+
+        // Find the opening tag that contains this expression
+        // Look backwards from the expression to find the nearest unclosed tag
+        const beforeExpr = template.substring(0, exprStart);
+
+        // Find the last opening tag before this expression
+        // We need to find a tag that hasn't been closed yet
+        let depth = 0;
+        let tagMatch;
+        let parentTagInfo = null;
+
+        // Find all tags before this expression
+        const tagPattern = /<\/?([a-zA-Z][a-zA-Z0-9-]*)([^>]*)>/g;
+        const tags = [];
+
+        while ((tagMatch = tagPattern.exec(beforeExpr)) !== null) {
+          const isClosing = tagMatch[0].startsWith('</');
+          const isSelfClosing = tagMatch[0].endsWith('/>') ||
+            ['br', 'hr', 'img', 'input', 'meta', 'link', 'area', 'base', 'col', 'embed', 'param', 'source', 'track', 'wbr'].includes(tagMatch[1].toLowerCase());
+
+          tags.push({
+            tagName: tagMatch[1],
+            attrs: tagMatch[2],
+            start: tagMatch.index,
+            fullMatch: tagMatch[0],
+            isClosing,
+            isSelfClosing
+          });
+        }
+
+        // Walk through tags to find the immediate parent (last unclosed tag)
+        const stack = [];
+        for (const tag of tags) {
+          if (tag.isSelfClosing) continue;
+
+          if (tag.isClosing) {
+            // Pop from stack
+            if (stack.length > 0 && stack[stack.length - 1].tagName.toLowerCase() === tag.tagName.toLowerCase()) {
+              stack.pop();
+            }
+          } else {
+            stack.push(tag);
+          }
+        }
+
+        // The last item in the stack is our parent element
+        if (stack.length > 0) {
+          parentTagInfo = stack[stack.length - 1];
+
+          // Skip script/style tags
+          if (['script', 'style'].includes(parentTagInfo.tagName.toLowerCase())) {
+            continue;
+          }
+
+          // Skip if already has data-gxp-expr in the original attrs
+          if (parentTagInfo.attrs.includes(attrName)) {
+            continue;
+          }
+
+          // Add this expression to the parent element's list
+          const key = parentTagInfo.start;
+          if (!elementExpressions.has(key)) {
+            elementExpressions.set(key, {
+              tagInfo: parentTagInfo,
+              expressions: []
+            });
+          }
+          elementExpressions.get(key).expressions.push(expression);
+        }
+      }
+
+      // Now build replacements for each element that has expressions
+      const replacements = [];
+
+      for (const [start, data] of elementExpressions) {
+        const { tagInfo, expressions } = data;
+
+        // Only add expressions that are direct children (not from nested elements)
+        // For now, take all unique expressions
+        const uniqueExprs = [...new Set(expressions)];
+        const exprValue = uniqueExprs.join('; ');
+
+        const oldOpenTag = tagInfo.fullMatch;
+        // Insert the attribute before the closing >
+        const newOpenTag = oldOpenTag.replace(/>$/, ` ${attrName}="${escapeAttr(exprValue)}">`);
+
+        replacements.push({
+          start: tagInfo.start,
+          oldText: oldOpenTag,
+          newText: newOpenTag
+        });
+
+        modified = true;
+      }
+
+      // Apply replacements in reverse order to preserve indices
+      replacements.sort((a, b) => b.start - a.start);
+      for (const r of replacements) {
+        template = template.substring(0, r.start) +
+                   r.newText +
+                   template.substring(r.start + r.oldText.length);
+      }
+
+      // Also handle v-html, v-text directives
+      // Add data-gxp-expr to elements that have these
+      template = template.replace(
+        /<([a-zA-Z][a-zA-Z0-9-]*)([^>]*)(v-html)="([^"]+)"([^>]*)>/g,
+        (match, tag, before, directive, expr, after) => {
+          if (match.includes(attrName)) return match;
+          return `<${tag}${before}${directive}="${expr}"${after} ${attrName}="${escapeAttr('v-html:' + expr)}">`;
+        }
+      );
+
+      template = template.replace(
+        /<([a-zA-Z][a-zA-Z0-9-]*)([^>]*)(v-text)="([^"]+)"([^>]*)>/g,
+        (match, tag, before, directive, expr, after) => {
+          if (match.includes(attrName)) return match;
+          modified = true;
+          return `<${tag}${before}${directive}="${expr}"${after} ${attrName}="${escapeAttr('v-text:' + expr)}">`;
+        }
+      );
+
+      // Handle :textContent binding
+      template = template.replace(
+        /<([a-zA-Z][a-zA-Z0-9-]*)([^>]*):textContent="([^"]+)"([^>]*)>/g,
+        (match, tag, before, expr, after) => {
+          if (match.includes(attrName)) return match;
+          modified = true;
+          return `<${tag}${before}:textContent="${expr}"${after} ${attrName}="${escapeAttr(':textContent:' + expr)}">`;
+        }
+      );
+
+      if (!modified) {
+        console.log(`[GxP Source Tracker] No expressions found in: ${fileName}`);
+        return null;
+      }
+
+      console.log(`[GxP Source Tracker] Added data-gxp-expr to ${elementExpressions.size} elements in: ${fileName}`);
+      const newCode = code.replace(/<template>[\s\S]*?<\/template>/, `<template>${template}</template>`);
+
+      return {
+        code: newCode,
+        map: null
+      };
+    }
+  };
+}
+
+function escapeAttr(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+export default gxpSourceTrackerPlugin;

package/runtime/vite.config.js

@@ -0,0 +1,402 @@
+import { defineConfig, loadEnv } from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+import fs from "fs";
+import { fileURLToPath } from "url";
+import externalGlobals from "rollup-plugin-external-globals";
+import { gxpInspectorPlugin } from "./vite-inspector-plugin.js";
+import { gxpSourceTrackerPlugin } from "./vite-source-tracker-plugin.js";
+
+// Environment URL configuration for API proxy
+const ENVIRONMENT_URLS = {
+	production: "https://api.gramercy.cloud",
+	staging: "https://api.efz-staging.env.eventfinity.app",
+	testing: "https://api.zenith-develop-testing.env.eventfinity.app",
+	develop: "https://api.zenith-develop.env.eventfinity.app",
+	local: "https://dashboard.eventfinity.test",
+};
+
+/**
+ * Get the API proxy target URL based on environment
+ */
+function getApiProxyTarget(env) {
+	const apiEnv = env.API_ENV || "mock";
+
+	// Custom URL takes precedence
+	if (env.API_BASE_URL) {
+		return env.API_BASE_URL;
+	}
+
+	// Mock uses local mock-api server (no proxy needed, handled separately)
+	if (apiEnv === "mock") {
+		return null;
+	}
+
+	// Look up environment URL
+	return ENVIRONMENT_URLS[apiEnv] || ENVIRONMENT_URLS.production;
+}
+
+/**
+ * Get the library name from package.json
+ */
+function getLibName() {
+	try {
+		const packageJsonPath = path.resolve(process.cwd(), "package.json");
+		if (fs.existsSync(packageJsonPath)) {
+			const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+			// Convert package name to a valid JS identifier
+			// e.g., "@company/my-plugin" -> "MyPlugin"
+			const name = packageJson.name || "Plugin";
+			return name
+				.replace(/[@\/\-]/g, " ")
+				.replace(/\b\w/g, (l) => l.toUpperCase())
+				.replace(/\s/g, "");
+		}
+	} catch (error) {
+		console.warn("Could not read package.json, using default lib name");
+	}
+	return "Plugin";
+}
+
+/**
+ * Setup HTTPS configuration if certificates are available
+ */
+function getHttpsConfig(env) {
+	const useHttps = env.USE_HTTPS === "true";
+	const certPath = env.CERT_PATH;
+	const keyPath = env.KEY_PATH;
+
+	if (!useHttps || !certPath || !keyPath) {
+		return false;
+	}
+
+	// Resolve paths relative to project root
+	const resolvedCertPath = path.resolve(process.cwd(), certPath);
+	const resolvedKeyPath = path.resolve(process.cwd(), keyPath);
+
+	// Check if certificate files exist
+	if (!fs.existsSync(resolvedCertPath) || !fs.existsSync(resolvedKeyPath)) {
+		console.warn("⚠ SSL certificate files not found, falling back to HTTP");
+		return false;
+	}
+
+	try {
+		return {
+			key: fs.readFileSync(resolvedKeyPath),
+			cert: fs.readFileSync(resolvedCertPath),
+		};
+	} catch (error) {
+		console.warn("⚠ Failed to read SSL certificates, falling back to HTTP");
+		return false;
+	}
+}
+
+/**
+ * Find the gx-devtools package directory (works for both local and global installs)
+ */
+function findToolkitPath() {
+	const packageName = "@gramercytech/gx-devtools";
+
+	// Try local node_modules first
+	const localPath = path.resolve(process.cwd(), "node_modules", packageName);
+	if (fs.existsSync(localPath)) {
+		return localPath;
+	}
+
+	// Try to find via require.resolve
+	try {
+		const pkgPath = require.resolve(`${packageName}/package.json`);
+		return path.dirname(pkgPath);
+	} catch (e) {
+		// Fallback: assume we're in the toolkit itself during development
+		return process.cwd();
+	}
+}
+
+/**
+ * Check if a file exists locally in the project
+ */
+function hasLocalFile(fileName) {
+	const localPath = path.resolve(process.cwd(), fileName);
+	return fs.existsSync(localPath);
+}
+
+export default defineConfig(({ mode }) => {
+	// Load environment variables from project directory
+	const env = loadEnv(mode, process.cwd(), "");
+
+	// Get lib name from package.json
+	const libName = getLibName();
+
+	// Find the toolkit path for runtime imports
+	const toolkitPath = findToolkitPath();
+	const runtimeDir = path.resolve(toolkitPath, "runtime");
+
+	// Check for local dev files
+	const hasLocalIndexHtml = hasLocalFile("index.html");
+	const hasLocalMainJs = hasLocalFile("main.js");
+
+	// Log which files are being used
+	console.log(`📄 index.html: ${hasLocalIndexHtml ? "local" : "runtime"}`);
+	console.log(`📄 main.js: ${hasLocalMainJs ? "local" : "runtime"}`);
+
+	// Create plugin to serve runtime files (index.html and main.js) if no local ones exist
+	const runtimeFilesPlugin = {
+		name: "runtime-files",
+		configureServer(server) {
+			server.middlewares.use((req, res, next) => {
+				// Serve runtime index.html for root requests (if no local index.html)
+				if (
+					!hasLocalIndexHtml &&
+					(req.url === "/" || req.url === "/index.html")
+				) {
+					const runtimeIndexPath = path.join(runtimeDir, "index.html");
+					if (fs.existsSync(runtimeIndexPath)) {
+						// Read and transform the runtime index.html
+						server
+							.transformIndexHtml(
+								req.url,
+								fs.readFileSync(runtimeIndexPath, "utf-8")
+							)
+							.then((html) => {
+								res.setHeader("Content-Type", "text/html");
+								res.end(html);
+							})
+							.catch((err) => {
+								console.error("Error transforming index.html:", err);
+								next(err);
+							});
+						return;
+					}
+				}
+
+				// Serve runtime main.js for @gx-runtime/main.js requests (if no local main.js)
+				if (
+					!hasLocalMainJs &&
+					(req.url === "/@gx-runtime/main.js" ||
+						req.url?.startsWith("/@gx-runtime/main.js?"))
+				) {
+					const runtimeMainPath = path.join(runtimeDir, "main.js");
+					if (fs.existsSync(runtimeMainPath)) {
+						// Use the real path to handle symlinks correctly
+						const realMainPath = fs.realpathSync(runtimeMainPath);
+						server
+							.transformRequest(realMainPath)
+							.then((result) => {
+								if (result) {
+									res.setHeader("Content-Type", "application/javascript");
+									res.end(result.code);
+								} else {
+									next();
+								}
+							})
+							.catch((err) => {
+								console.error("Error transforming main.js:", err);
+								next(err);
+							});
+						return;
+					}
+				}
+
+				next();
+			});
+		},
+	};
+
+	// Determine if HTTPS is enabled
+	const useHttps = getHttpsConfig(env) !== false;
+
+	// Get API proxy target for non-mock environments
+	const apiProxyTarget = getApiProxyTarget(env);
+	if (apiProxyTarget) {
+		console.log(`🔀 API Proxy: /api-proxy -> ${apiProxyTarget}`);
+	}
+
+	return {
+		// Root is always the project directory
+		root: process.cwd(),
+		// Expose environment variables to the browser
+		define: {
+			"import.meta.env.VITE_API_ENV": JSON.stringify(env.API_ENV || "mock"),
+			"import.meta.env.VITE_API_BASE_URL": JSON.stringify(
+				env.API_BASE_URL || ""
+			),
+			"import.meta.env.VITE_API_KEY": JSON.stringify(env.API_KEY || ""),
+			"import.meta.env.VITE_API_PROJECT_ID": JSON.stringify(
+				env.API_PROJECT_ID || ""
+			),
+			"import.meta.env.VITE_USE_HTTPS": JSON.stringify(
+				useHttps ? "true" : "false"
+			),
+			"import.meta.env.VITE_NODE_PORT": JSON.stringify(env.NODE_PORT || "3060"),
+			"import.meta.env.VITE_SOCKET_IO_PORT": JSON.stringify(
+				env.SOCKET_IO_PORT || "3069"
+			),
+		},
+		plugins: [
+			runtimeFilesPlugin,
+			// Source tracker must run BEFORE vue() to transform templates before compilation
+			gxpSourceTrackerPlugin(),
+			vue(),
+			// GxP Inspector plugin for browser extension integration
+			gxpInspectorPlugin(),
+			externalGlobals(
+				{
+					vue: "Vue",
+					pinia: "Pinia",
+					"@/stores/gxpPortalConfigStore":
+						"(window.useGxpStore || (() => { console.warn('useGxpStore not found on window, using fallback'); return {}; }))",
+				},
+				{
+					include: ["src/**"],
+				}
+			),
+			// Custom request logging and CORS plugin
+			{
+				name: "request-logger-cors",
+				configureServer(server) {
+					server.middlewares.use((req, res, next) => {
+						const start = Date.now();
+						const originalEnd = res.end;
+
+						// Add CORS headers to all responses
+						res.setHeader("Access-Control-Allow-Origin", "*");
+						res.setHeader(
+							"Access-Control-Allow-Methods",
+							"GET, POST, PUT, DELETE, OPTIONS"
+						);
+						res.setHeader("Access-Control-Allow-Headers", "*");
+						res.setHeader("Access-Control-Allow-Credentials", "false");
+
+						// Handle preflight requests
+						if (req.method === "OPTIONS") {
+							res.statusCode = 200;
+							res.end();
+							return;
+						}
+
+						res.end = function (...args) {
+							const duration = Date.now() - start;
+							const status = res.statusCode;
+							const method = req.method;
+							const url = req.url;
+							const referer = req.headers.referer || "direct";
+							const origin = req.headers.origin || "unknown";
+
+							console.log(
+								`[${new Date().toISOString()}] ${method} ${url} ${status} (${duration}ms) - Origin: ${origin} - Referer: ${referer}`
+							);
+							originalEnd.apply(this, args);
+						};
+
+						next();
+					});
+				},
+			},
+		],
+		logLevel: env.NODE_LOG_LEVEL || "error",
+		clearScreen: false,
+		server: {
+			port: parseInt(env.NODE_PORT) || 3060,
+			strictPort: true,
+			https: getHttpsConfig(env),
+			cors: {
+				origin: "*",
+				methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
+				allowedHeaders: ["*"],
+				credentials: false,
+			},
+			hmr: {
+				clientPort:
+					parseInt(env.CLIENT_PORT) || parseInt(env.NODE_PORT) || 3060,
+			},
+			host: true, // Allow access from network
+			// Allow serving files from the toolkit runtime directory
+			// Also resolve symlinks to allow files from the real path
+			fs: {
+				allow: [process.cwd(), toolkitPath, fs.realpathSync(toolkitPath)],
+			},
+			// API proxy for non-mock environments
+			proxy: apiProxyTarget
+				? {
+						"/api-proxy": {
+							target: apiProxyTarget,
+							changeOrigin: true,
+							rewrite: (path) => path.replace(/^\/api-proxy/, ""),
+							secure: false,
+							configure: (proxy, options) => {
+								proxy.on("proxyReq", (proxyReq, req) => {
+									// Forward the API key as Authorization header if set
+									const apiKey = env.API_KEY;
+									if (apiKey) {
+										proxyReq.setHeader("Authorization", `Bearer ${apiKey}`);
+									}
+									console.log(
+										`[API Proxy] ${req.method} ${
+											req.url
+										} -> ${apiProxyTarget}${req.url.replace(
+											/^\/api-proxy/,
+											""
+										)}`
+									);
+								});
+								proxy.on("proxyRes", (proxyRes, req) => {
+									console.log(
+										`[API Proxy] ${req.method} ${req.url} <- ${proxyRes.statusCode}`
+									);
+								});
+								proxy.on("error", (err, req) => {
+									console.error(`[API Proxy] Error: ${err.message}`);
+								});
+							},
+						},
+				  }
+				: {},
+		},
+		build: {
+			// Build output goes to project directory
+			outDir: path.resolve(process.cwd(), "dist"),
+			lib: {
+				entry: [
+					path.resolve(process.cwd(), env.COMPONENT_PATH || "./src/Plugin.vue"),
+				],
+				name: libName,
+				fileName: (format) => `plugin.${format}.js`,
+				formats: ["es"],
+			},
+			rollupOptions: {
+				// Make sure Vue and Pinia are treated as external dependencies
+				external: ["vue", "pinia"],
+				output: {
+					globals: {
+						vue: "Vue",
+						pinia: "Pinia",
+					},
+				},
+			},
+		},
+		resolve: {
+			alias: {
+				// Client project's source directory
+				"@": path.resolve(process.cwd(), "src"),
+				// Theme layouts in client project
+				"@layouts": path.resolve(process.cwd(), "theme-layouts"),
+				// GxP Toolkit runtime (PortalContainer, etc.) - from node_modules
+				"@gx-runtime": runtimeDir,
+				// Ensure single Vue and Pinia instances
+				vue: path.resolve(process.cwd(), "node_modules/vue"),
+				pinia: path.resolve(process.cwd(), "node_modules/pinia"),
+			},
+			// Dedupe Vue and Pinia to ensure only one instance is used
+			dedupe: ["vue", "pinia"],
+		},
+		// Force Vite to pre-bundle these dependencies to ensure single instances
+		optimizeDeps: {
+			include: ["vue", "pinia"],
+		},
+		// SSR configuration to handle externals properly
+		ssr: {
+			external: ["vue", "pinia"],
+		},
+	};
+});