@ptkl/toolkit 0.8.8 → 0.9.0

package/dist/commands/forge.js

@@ -2,7 +2,7 @@ import { Command } from "commander";
 import { build, createServer } from 'vite';
 import { c } from 'tar';
 import { Writable } from "stream";
-import { writeFileSync, readFileSync } from "fs";
+import { writeFileSync, readFileSync, rmSync, existsSync } from "fs";
 import axios from 'axios';
 import Util from "../lib/util.js";
 import { join } from 'path';
@@ -50,6 +50,10 @@ class ForgeCommand {
             process.chdir(path);
             const module = await import(`${path}/ptkl.config.js`);
             const { views, name, version, distPath, icon, type, label, permissions, install_permissions, runtime_permissions, entitlements, requires, scripts, ssrRenderer, } = module.default ?? {};
+            // Clean dist folder before building to remove stale files
+            if (existsSync(distPath)) {
+                rmSync(distPath, { recursive: true, force: true });
+            }
             // Validate combined permissions limit
             const rtPerms = runtime_permissions ?? [];
             const ents = entitlements ?? [];
@@ -308,19 +312,115 @@ class ForgeCommand {
     async runDev(options) {
         const { path } = options;
         const host = Util.getCurrentProfile().host;
+        // Load ptkl.config.js to discover views and app name
+        let appName;
+        let views;
+        try {
+            console.log(`${path}/ptkl.config.js`);
+            const configModule = await import(`${path}/ptkl.config.js`);
+            appName = configModule.default?.name;
+            views = configModule.default?.views;
+        }
+        catch (err) {
+            // no manifest found – continue without view watch publishing
+            console.error(`Manifest not found: ${err.message}`);
+        }
+        // Ensure the local dev hub is running (start it on first forge dev, reuse on subsequent ones)
+        const { ensureHubRunning, pushBundle, DEV_HUB_PORT } = await import('../lib/devHub.js');
+        const hubStatus = await ensureHubRunning();
+        console.log(hubStatus === 'started'
+            ? `🔌 Dev hub started on http://localhost:${DEV_HUB_PORT}`
+            : `🔌 Reusing existing dev hub on http://localhost:${DEV_HUB_PORT}`);
+        // Start Vite dev server for the app, injecting window.__PTKL_DEV_HUB__ so AppView
+        // inside this app automatically knows where to fetch local view bundles from.
         const server = await createServer({
-            root: path, // Set your project root
+            root: path,
             define: {
                 __ENV_VARIABLES__: JSON.stringify({
                     API_HOST: host,
                     INTEGRATION_API: `${host}/luma/integrations`,
                     PROJECT_API_TOKEN: Util.getCurrentProfile().token,
-                })
-            }
+                }),
+                DEV_HUB_PORT
+            },
+            plugins: [],
         });
         await server.listen();
         console.log('Current profile:', Util.getCurrentProfile().name);
         console.log('Dev server running at:', server?.resolvedUrls?.local[0]);
+        // Build every view declared in ptkl.config.js in watch mode.
+        // On each successful rebuild the bundle is pushed to the dev hub so any
+        // other locally-running app that embeds this view via AppView picks it up instantly.
+        if (appName && views && Object.keys(views).length > 0) {
+            const os = await import('os');
+            const { join } = await import('path');
+            const { readFileSync, existsSync, mkdirSync } = await import('fs');
+            // Build output goes to a per-app temp dir so concurrent forge dev runs don't clash
+            const tmpDir = join(os.default.tmpdir(), `ptkl-dev-${appName}`);
+            mkdirSync(tmpDir, { recursive: true });
+            console.log(`👁️  Watching views for "${appName}": [${Object.keys(views).join(', ')}]`);
+            // createServer() sets process.env.NODE_ENV='development'.
+            // Vite 7 uses process.env.NODE_ENV (not config.mode) to determine isProduction,
+            // which controls jsxDev in esbuild. Force production here so the watch build
+            // compiles JSX without dev helpers (_store, _source, etc.).
+            process.env.NODE_ENV = 'production';
+            for (const viewName of Object.keys(views)) {
+                // Use a per-view output dir so each view's assets don't collide
+                // (two views could otherwise both emit a file named from their input, e.g. `index.css`)
+                const viewOutDir = join(tmpDir, viewName);
+                mkdirSync(viewOutDir, { recursive: true });
+                const watcher = (await build({
+                    root: path,
+                    mode: 'production',
+                    logLevel: 'silent',
+                    plugins: [],
+                    resolve: {
+                        // Force all react/* imports to resolve from the app's own node_modules,
+                        // preventing a second React instance from symlinked deps (e.g. @ptkl/components)
+                        // that have their own node_modules/react.
+                        dedupe: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
+                    },
+                    build: {
+                        outDir: viewOutDir,
+                        emptyOutDir: false,
+                        watch: {},
+                        rollupOptions: {
+                            input: views[viewName],
+                            output: {
+                                format: 'esm',
+                                // Use the view KEY as the output name, not the input filename.
+                                // This ensures `stockPage` (entry: src/stock.tsx) outputs `stockPage.bundle.js`
+                                // rather than `stock.bundle.js`.
+                                entryFileNames: `${viewName}.bundle.js`,
+                                assetFileNames: `${viewName}.[ext]`,
+                                manualChunks: undefined,
+                                inlineDynamicImports: true,
+                            },
+                        },
+                    },
+                }));
+                watcher.on('event', async (event) => {
+                    if (event.code === 'BUNDLE_END') {
+                        const bundleFile = join(viewOutDir, `${viewName}.bundle.js`);
+                        const cssFile = join(viewOutDir, `${viewName}.css`);
+                        if (existsSync(bundleFile)) {
+                            const bundle = readFileSync(bundleFile, 'utf-8');
+                            const css = existsSync(cssFile) ? readFileSync(cssFile, 'utf-8') : null;
+                            try {
+                                await pushBundle(appName, viewName, bundle, css);
+                                console.log(`🔄  [${appName}/${viewName}] published to dev hub`);
+                            }
+                            catch (err) {
+                                console.warn(`⚠️  [${appName}/${viewName}] failed to push to dev hub:`, err?.message ?? err);
+                            }
+                        }
+                    }
+                    if (event.code === 'ERROR') {
+                        console.error(`❌  [${appName}/${viewName}] build error:`, event.error?.message ?? event.error);
+                    }
+                });
+            }
+        }
     }
     async removeVersion(options) {
         const { ref, version } = options;

package/dist/lib/devHub.js

@@ -0,0 +1,130 @@
+/**
+ * Ptkl Forge Dev Hub
+ *
+ * A tiny HTTP + WebSocket server (port 4111) that acts as a relay between
+ * running `ptkl forge dev` processes (publishers) and browser apps that use
+ * AppView to embed views from other locally-running apps (subscribers).
+ *
+ * Flow:
+ *   1. `ptkl forge dev` starts → ensures hub is running (starts it if not)
+ *   2. Vite watch builds each view → pushes bundle to hub via POST /push/:scope/:view
+ *   3. Hub stores bundle in memory, broadcasts { type: 'update', scope, view } to all WS clients
+ *   4. AppView (in any browser tab running a ptkl forge dev app) receives the WS message,
+ *      invalidates its local cache, re-fetches bundle from GET /bundle/:scope/:view.bundle.js
+ *      and hot-swaps the mounted view
+ */
+import { createServer } from 'http';
+import { WebSocketServer, WebSocket } from 'ws';
+export const DEV_HUB_PORT = 4111;
+// In-memory store: scope → view → bundle
+const store = new Map();
+let _wss = null;
+function broadcast(payload) {
+    if (!_wss)
+        return;
+    const msg = JSON.stringify(payload);
+    _wss.clients.forEach((client) => {
+        if (client.readyState === WebSocket.OPEN)
+            client.send(msg);
+    });
+}
+function readBody(req) {
+    return new Promise((resolve) => {
+        let body = '';
+        req.on('data', (chunk) => (body += chunk));
+        req.on('end', () => resolve(body));
+    });
+}
+export async function startHub() {
+    const server = createServer(async (req, res) => {
+        res.setHeader('Access-Control-Allow-Origin', '*');
+        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+        res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+        if (req.method === 'OPTIONS') {
+            res.writeHead(204);
+            res.end();
+            return;
+        }
+        const url = new URL(req.url, `http://localhost:${DEV_HUB_PORT}`);
+        // GET /bundle/:scope/:view.bundle.js  OR  /bundle/:scope/:view.css
+        const bundleMatch = url.pathname.match(/^\/bundle\/([^/]+)\/([^/]+)\.(bundle\.js|css)$/);
+        if (bundleMatch && req.method === 'GET') {
+            const [, scope, view, ext] = bundleMatch;
+            const entry = store.get(scope)?.get(view);
+            if (!entry) {
+                res.writeHead(404);
+                res.end(`Dev hub: no bundle for ${scope}/${view}`);
+                return;
+            }
+            if (ext === 'bundle.js') {
+                res.writeHead(200, { 'Content-Type': 'application/javascript' });
+                res.end(entry.bundle);
+            }
+            else {
+                if (!entry.css) {
+                    res.writeHead(404);
+                    res.end(`Dev hub: no CSS for ${scope}/${view}`);
+                    return;
+                }
+                res.writeHead(200, { 'Content-Type': 'text/css' });
+                res.end(entry.css);
+            }
+            return;
+        }
+        // GET /manifest  – list all registered scopes and their views
+        if (url.pathname === '/manifest' && req.method === 'GET') {
+            const manifest = {};
+            store.forEach((views, scope) => {
+                manifest[scope] = Array.from(views.keys());
+            });
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify(manifest));
+            return;
+        }
+        // POST /push/:scope/:view  – called by forge dev to publish a freshly-built bundle
+        const pushMatch = url.pathname.match(/^\/push\/([^/]+)\/([^/]+)$/);
+        if (pushMatch && req.method === 'POST') {
+            const [, scope, view] = pushMatch;
+            const body = await readBody(req);
+            const { bundle, css } = JSON.parse(body);
+            if (!store.has(scope))
+                store.set(scope, new Map());
+            store.get(scope).set(view, { bundle, css: css ?? null });
+            broadcast({ type: 'update', scope, view });
+            res.writeHead(200);
+            res.end('ok');
+            return;
+        }
+        res.writeHead(404);
+        res.end();
+    });
+    _wss = new WebSocketServer({ server });
+    await new Promise((resolve, reject) => {
+        server.listen(DEV_HUB_PORT, () => resolve());
+        server.on('error', reject);
+    });
+    console.log(`🔌 Ptkl dev hub listening on http://localhost:${DEV_HUB_PORT}`);
+}
+/**
+ * Start the hub if it is not already running.
+ * Returns 'started' if this process started the hub, 'existing' if it was already up.
+ */
+export async function ensureHubRunning() {
+    try {
+        const { default: axios } = await import('axios');
+        await axios.get(`http://localhost:${DEV_HUB_PORT}/manifest`, { timeout: 1000 });
+        return 'existing';
+    }
+    catch {
+        await startHub();
+        return 'started';
+    }
+}
+/**
+ * Push a freshly-built view bundle to the hub.
+ * Called from within the Vite watch build event handler.
+ */
+export async function pushBundle(scope, view, bundle, css) {
+    const { default: axios } = await import('axios');
+    await axios.post(`http://localhost:${DEV_HUB_PORT}/push/${scope}/${view}`, { bundle, css }, { headers: { 'Content-Type': 'application/json' } });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptkl/toolkit",
-  "version": "0.8.8",
+  "version": "0.9.0",
   "description": "A command-line toolkit for managing Protokol platform applications, profiles, functions, and components",
   "keywords": [
     "protokol",