@gxp-dev/tools 2.0.91 → 2.0.93

package/bin/lib/commands/init.js

@@ -29,6 +29,7 @@ const {
 	safeCopyFile,
 	createPackageJson,
 	updateAppManifest,
+	ensureBaseFramework,
 	installDependencies,
 	updateExistingProject,
 	ensureMkcertInstalled,
@@ -721,6 +722,7 @@ async function initCommand(argv) {
 			console.log("Updating existing project...")
 			updateExistingProject(projectPath)
 			copyBundleFiles(projectPath, paths, false)
+			ensureBaseFramework(projectPath)
 			console.log("✅ Project updated!")
 			return
 		}

package/bin/lib/constants.js

@@ -8,6 +8,12 @@
 const isWin = process.platform === "win32"
 const exportCmd = isWin ? "set" : "export"
 
+// Base CSS framework loaded by theme-layouts during development.
+// Versioned here so the same value lands in package.json devDependencies
+// AND the app-manifest's baseFramework field (platform reads the manifest
+// to know which CSS framework to provide for the live plugin).
+const TAILWIND_VERSION = "^4.3.0"
+
 // Required dependencies for GxP projects
 const REQUIRED_DEPENDENCIES = {
 	dotenv: "^16.4.5",
@@ -23,8 +29,12 @@ const REQUIRED_DEV_DEPENDENCIES = {
 	vitest: "^4.1.5",
 	"@vue/test-utils": "^2.4.6",
 	"happy-dom": "^15.11.0",
+	tailwindcss: TAILWIND_VERSION,
+	"@tailwindcss/vite": TAILWIND_VERSION,
 }
 
+const BASE_FRAMEWORK = `tailwindcss@${TAILWIND_VERSION}`
+
 // Default scripts for package.json
 const DEFAULT_SCRIPTS = {
 	dev: "gxdev dev --cli",
@@ -131,4 +141,6 @@ module.exports = {
 	DEFAULT_PORTS,
 	PACKAGE_NAME,
 	ENVIRONMENT_URLS,
+	TAILWIND_VERSION,
+	BASE_FRAMEWORK,
 }

package/bin/lib/utils/files.js

@@ -11,6 +11,7 @@ const {
 	REQUIRED_DEPENDENCIES,
 	REQUIRED_DEV_DEPENDENCIES,
 	DEFAULT_SCRIPTS,
+	BASE_FRAMEWORK,
 } = require("../constants")
 const { loadGlobalConfig } = require("./paths")
 
@@ -89,6 +90,9 @@ function updateAppManifest(projectPath, projectName, description = "") {
 			manifest.description = `GxP Plugin: ${projectName}`
 		}
 
+		// Tell the platform which base CSS framework the layouts load.
+		manifest.baseFramework = BASE_FRAMEWORK
+
 		// Update strings with project name
 		if (manifest.strings && manifest.strings.default) {
 			manifest.strings.default.welcome_text = `Welcome to ${projectName}`
@@ -101,6 +105,33 @@ function updateAppManifest(projectPath, projectName, description = "") {
 	}
 }
 
+/**
+ * Ensures app-manifest.json has the current baseFramework value.
+ * Used during existing-project updates where the manifest file is not overwritten.
+ * @param {string} projectPath - Path to project directory
+ */
+function ensureBaseFramework(projectPath) {
+	const manifestPath = path.join(projectPath, "app-manifest.json")
+	if (!fs.existsSync(manifestPath)) {
+		return
+	}
+
+	try {
+		const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"))
+		if (manifest.baseFramework === BASE_FRAMEWORK) {
+			return
+		}
+		manifest.baseFramework = BASE_FRAMEWORK
+		fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, "\t"))
+		console.log(`✓ Set baseFramework in app-manifest.json (${BASE_FRAMEWORK})`)
+	} catch (error) {
+		console.warn(
+			"⚠ Could not set baseFramework in app-manifest.json:",
+			error.message,
+		)
+	}
+}
+
 /**
  * Installs npm dependencies
  */
@@ -244,6 +275,7 @@ module.exports = {
 	safeCopyFile,
 	createPackageJson,
 	updateAppManifest,
+	ensureBaseFramework,
 	installDependencies,
 	updateExistingProject,
 	isImageMagickInstalled,

package/package.json

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

package/runtime/stores/gxpPortalConfigStore.js

@@ -47,7 +47,7 @@ function getApiConfig() {
 	const projectId = import.meta.env.VITE_API_PROJECT_ID || ""
 	const useHttps = import.meta.env.VITE_USE_HTTPS !== "false"
 	const nodePort = import.meta.env.VITE_NODE_PORT || "3060"
-	const mockPort = import.meta.env.VITE_SOCKET_IO_PORT || "3061"
+	const mockPort = import.meta.env.VITE_SOCKET_IO_PORT || "3069"
 
 	// Check if we're in development mode (Vite dev server)
 	const isDev = import.meta.env.DEV

package/runtime/vite.config.js

@@ -120,6 +120,28 @@ function hasLocalFile(fileName) {
  * concatenated, objects (resolve.alias, define, etc.) are merged key-by-key,
  * primitives are overwritten.
  */
+/**
+ * Try to load the `@tailwindcss/vite` plugin from the project's node_modules.
+ *
+ * Tailwind 4 ships as a dev-only base CSS framework — `tailwindcss` and
+ * `@tailwindcss/vite` are declared in the project's devDependencies and
+ * imported via `@import "tailwindcss";` inside the theme-layouts (which are
+ * dev-only; the production build entry is `src/Plugin.vue`). Loading the
+ * Vite plugin here lets that import generate utility CSS without each
+ * project having to wire it up in `vite.extend.js`. If the user has removed
+ * Tailwind we silently skip — the layouts work without it, just without
+ * Tailwind's default styling.
+ */
+async function loadTailwindPlugin() {
+	try {
+		const mod = await import("@tailwindcss/vite")
+		const plugin = mod.default ?? mod
+		return typeof plugin === "function" ? plugin() : null
+	} catch {
+		return null
+	}
+}
+
 async function loadExtensionConfig(ctx, runtimeConfig) {
 	const candidates = ["vite.extend.js", "vite.extend.mjs"]
 	for (const name of candidates) {
@@ -188,6 +210,59 @@ export default defineConfig(async (ctx) => {
 	const runtimeMainFsUrl = toFsUrl("main.js")
 	const runtimeLogoFsUrl = toFsUrl("logo.png")
 
+	// ---------------------------------------------------------------------
+	// Live log streaming for the developer hub IDE.
+	//
+	// The portal's Session page wants to surface gxdev's stdout/stderr (Vite
+	// build errors, HMR notices, custom console.log from the project, etc.)
+	// in a bottom dock so the developer doesn't have to `kubectl logs` from
+	// outside the cluster. We keep a small ring buffer of recent lines and
+	// fan them out to any number of SSE subscribers — the buffer is replayed
+	// to each new subscriber so they see context from before they connected.
+	//
+	// We hook process.stdout.write / process.stderr.write rather than
+	// Vite's customLogger so we also capture lines emitted by the user's
+	// plugins, the runtime mock-api, console.log from server-side code,
+	// etc. The patch is a wrapper, not a replacement — the original
+	// terminal output keeps working unchanged.
+	const LOG_BUFFER_MAX = 500
+	const logBuffer = []
+	const logSubscribers = new Set()
+
+	function pushLog(stream, chunk) {
+		const text = typeof chunk === "string" ? chunk : chunk.toString("utf-8")
+		if (!text) return
+		// Split on newlines so each line is its own SSE event. Trailing
+		// empty splits (from `foo\n`) become "" — skip them.
+		const lines = text.split(/\r?\n/)
+		const ts = Date.now()
+		for (const raw of lines) {
+			if (!raw) continue
+			const entry = { stream, line: raw, ts }
+			logBuffer.push(entry)
+			if (logBuffer.length > LOG_BUFFER_MAX) logBuffer.shift()
+			for (const send of logSubscribers) {
+				try {
+					send(entry)
+				} catch {
+					// subscriber errored — drop it on the floor; the
+					// `res.on("close")` cleanup handles dead clients.
+				}
+			}
+		}
+	}
+
+	const _originalStdoutWrite = process.stdout.write.bind(process.stdout)
+	const _originalStderrWrite = process.stderr.write.bind(process.stderr)
+	process.stdout.write = function (chunk, ...rest) {
+		pushLog("stdout", chunk)
+		return _originalStdoutWrite(chunk, ...rest)
+	}
+	process.stderr.write = function (chunk, ...rest) {
+		pushLog("stderr", chunk)
+		return _originalStderrWrite(chunk, ...rest)
+	}
+
 	// Create plugin to serve runtime files (index.html and main.js) if no local ones exist
 	const runtimeFilesPlugin = {
 		name: "runtime-files",
@@ -216,6 +291,55 @@ export default defineConfig(async (ctx) => {
 			return null
 		},
 		configureServer(server) {
+			// SSE endpoint that streams gxdev's stdout/stderr to the
+			// portal's IDE. CORS is wide open because the portal is on a
+			// different origin than the preview pod (dashboard.<env> vs
+			// <subdomain>.dev.<env>) and we already gate access at the
+			// network layer — the preview URLs are unguessable and live
+			// inside the cluster's preview namespace.
+			server.middlewares.use("/__logs", (req, res) => {
+				if (req.method === "OPTIONS") {
+					res.writeHead(204, {
+						"Access-Control-Allow-Origin": "*",
+						"Access-Control-Allow-Methods": "GET, OPTIONS",
+						"Access-Control-Allow-Headers": "*",
+					})
+					res.end()
+					return
+				}
+				if (req.method !== "GET") {
+					res.writeHead(405)
+					res.end()
+					return
+				}
+				res.writeHead(200, {
+					"Content-Type": "text/event-stream",
+					"Cache-Control": "no-cache, no-transform",
+					Connection: "keep-alive",
+					"Access-Control-Allow-Origin": "*",
+					"X-Accel-Buffering": "no",
+				})
+				// Replay buffered lines so the client gets context.
+				for (const entry of logBuffer) {
+					res.write(`data: ${JSON.stringify(entry)}\n\n`)
+				}
+				// Heartbeat every 25s to keep the connection alive
+				// through any intermediate idle-timeout (GCP LB defaults
+				// to 30s; we already bump it to 86400s via
+				// GCPBackendPolicy but the heartbeat is cheap insurance).
+				const heartbeat = setInterval(() => {
+					res.write(`: heartbeat\n\n`)
+				}, 25000)
+				const send = (entry) => {
+					res.write(`data: ${JSON.stringify(entry)}\n\n`)
+				}
+				logSubscribers.add(send)
+				req.on("close", () => {
+					clearInterval(heartbeat)
+					logSubscribers.delete(send)
+				})
+			})
+
 			server.middlewares.use((req, res, next) => {
 				// Serve runtime index.html for root requests and SPA navigation requests
 				// (unless local index.html is opted in). SPA fallback is required so
@@ -313,6 +437,12 @@ export default defineConfig(async (ctx) => {
 	// Determine if HTTPS is enabled
 	const useHttps = getHttpsConfig(env) !== undefined
 
+	// Load Tailwind 4 Vite plugin from the project's node_modules if present.
+	const tailwindPlugin = await loadTailwindPlugin()
+	if (tailwindPlugin) {
+		console.log("🎨 Tailwind: @tailwindcss/vite plugin loaded")
+	}
+
 	// Get API proxy target for non-mock environments
 	const apiProxyTarget = getApiProxyTarget(env)
 	if (apiProxyTarget) {
@@ -346,6 +476,8 @@ export default defineConfig(async (ctx) => {
 		},
 		plugins: [
 			runtimeFilesPlugin,
+			// Tailwind 4 Vite plugin (no-op if @tailwindcss/vite isn't installed).
+			...((tailwindPlugin && [tailwindPlugin]) || []),
 			// Source tracker must run BEFORE vue() to transform templates before compilation
 			...(useSourceTracker ? [gxpSourceTrackerPlugin()] : []),
 			vue(),
@@ -375,8 +507,24 @@ export default defineConfig(async (ctx) => {
 					exclude: [
 						// Consumer install (published toolkit from npm)
 						"**/node_modules/@gxp-dev/tools/**",
-						// Workspace / `npm link` / self-dev: the runtime source itself
+						// Workspace / `npm link` / self-dev: the runtime source itself,
+						// resolved via the @gx-runtime alias.
 						`${runtimeDir.replace(/\\/g, "/")}/**`,
+						// If the toolkit lives at a symlinked path (global install,
+						// `npm link`, monorepo workspace), Vite resolves modules to
+						// their realpath — match that too so the runtime source is
+						// not double-rewritten.
+						...(realRuntimeDir !== runtimeDir.replace(/\\/g, "/")
+							? [`${realRuntimeDir}/**`]
+							: []),
+						// `vue-demi` is the Vue 2/3 compat shim that Pinia (and many
+						// other libs) pull in transitively. Its `lib/index.mjs` does
+						// `export * from "vue"`, which rollup-plugin-external-globals
+						// can't rewrite ("Cannot export all properties from an
+						// external variable"). Leave it alone — Vite's `dedupe: ["vue"]`
+						// already ensures it imports the same Vue instance that we
+						// expose on `window.Vue`.
+						"**/node_modules/vue-demi/**",
 					],
 				},
 			),

package/template/app-manifest.json

@@ -4,6 +4,7 @@
 	"description": "GxToolkit Plugin",
 	"manifest_version": 3,
 	"asset_dir": "/src/public",
+	"baseFramework": "tailwindcss@^4.3.0",
 	"configurationFile": "configuration.json",
 	"appInstructionsFile": "app-instructions.md",
 	"defaultStylingFile": "default-styling.css",

package/template/env.example

@@ -24,7 +24,7 @@ API_ENV=mock
 # Development server configuration
 NODE_PORT=3060
 CLIENT_PORT=3060
-SOCKET_IO_PORT=3061
+SOCKET_IO_PORT=3069
 
 # Logging configuration
 NODE_LOG_LEVEL=info

package/template/theme-layouts/PrivateLayout.vue

@@ -2,6 +2,16 @@
 	<slot />
 </template>
 
+<!--
+	Tailwind base/utilities for development only. The layouts wrap the plugin in
+	the dev runtime but are NOT part of the production build (build entry is
+	src/Plugin.vue), so this CSS never ships in dist/. Remove this block if you
+	don't want Tailwind defaults applied while developing.
+-->
+<style>
+@import "tailwindcss";
+</style>
+
 <style scoped></style>
 
 <script setup>

package/template/theme-layouts/PublicLayout.vue

@@ -2,6 +2,16 @@
 	<slot />
 </template>
 
+<!--
+	Tailwind base/utilities for development only. The layouts wrap the plugin in
+	the dev runtime but are NOT part of the production build (build entry is
+	src/Plugin.vue), so this CSS never ships in dist/. Remove this block if you
+	don't want Tailwind defaults applied while developing.
+-->
+<style>
+@import "tailwindcss";
+</style>
+
 <style scoped></style>
 
 <script setup>

package/template/theme-layouts/SystemLayout.vue

@@ -2,6 +2,16 @@
 	<slot />
 </template>
 
+<!--
+	Tailwind base/utilities for development only. The layouts wrap the plugin in
+	the dev runtime but are NOT part of the production build (build entry is
+	src/Plugin.vue), so this CSS never ships in dist/. Remove this block if you
+	don't want Tailwind defaults applied while developing.
+-->
+<style>
+@import "tailwindcss";
+</style>
+
 <style scoped></style>
 
 <script setup>