meno-core 1.0.52 → 1.0.53

package/lib/server/createServer.ts

@@ -8,6 +8,7 @@ import type { PageService } from './services/pageService';
 import type { ComponentService } from './services/componentService';
 import type { CMSService } from './services/cmsService';
 import type { CMSProvider } from '../shared/interfaces/contentProvider';
+import type { DraftPageStore } from './draftPageStore';
 import { WebSocketManager } from './websocketManager';
 import { handleRoutes, type RouteContext } from './routes';
 import { SERVER_PORT, MAX_PORT_ATTEMPTS, HMR_ROUTE } from '../shared/constants';
@@ -28,6 +29,13 @@ export interface ServerConfig {
   wsManager: WebSocketManager;
   cmsService?: CMSService;
   cmsProvider?: CMSProvider;
+  /**
+   * Optional in-memory draft page store. When provided, the page route
+   * reads a draft (if one exists for the requested path) before falling
+   * back to disk. Enables live preview in external browser tabs without
+   * persisting unsaved edits.
+   */
+  draftPageStore?: DraftPageStore;
   additionalRoutes?: AdditionalRouteHandler[];
   onWSMessage?: WSMessageHandler;
   /**
@@ -77,6 +85,7 @@ export async function createServer(config: ServerConfig): Promise<ServerResult>
     wsManager,
     cmsService,
     cmsProvider,
+    draftPageStore,
     additionalRoutes = [],
     onWSMessage,
     injectLiveReload,
@@ -96,6 +105,8 @@ export async function createServer(config: ServerConfig): Promise<ServerResult>
     cmsProvider,
     injectLiveReload,
     isEditor,
+    wsManager,
+    draftPageStore,
   };
 
   // Will be set after server starts to inject actual bound port into live reload script

package/lib/server/draftPageStore.ts

@@ -0,0 +1,49 @@
+/**
+ * DraftPageStore
+ *
+ * Holds ephemeral, unsaved versions of pages that the studio is currently
+ * editing. The SSR page route consults this store before falling back to
+ * the on-disk content, which lets external browser tabs see the editor's
+ * in-flight edits without anything being persisted.
+ *
+ * Drafts are cleared when the user saves the page to disk (so the next
+ * request reads the fresh disk version), and otherwise live only as long
+ * as the dev-server process.
+ */
+export class DraftPageStore {
+  private drafts = new Map<string, string>();
+
+  /**
+   * Store a draft for a page path. The value is the raw JSON string the
+   * SSR pipeline expects, matching PageService.getPage()'s contract.
+   */
+  set(path: string, content: string): void {
+    this.drafts.set(path, content);
+  }
+
+  /**
+   * Get the current draft string for a page path, if any.
+   */
+  get(path: string): string | undefined {
+    return this.drafts.get(path);
+  }
+
+  /**
+   * Drop the draft for a specific path. Called when the page is saved to
+   * disk so subsequent renders read the persisted version.
+   */
+  clear(path: string): void {
+    this.drafts.delete(path);
+  }
+
+  /**
+   * Drop every draft. Used on shutdown / project switch.
+   */
+  clearAll(): void {
+    this.drafts.clear();
+  }
+
+  has(path: string): boolean {
+    return this.drafts.has(path);
+  }
+}

package/lib/server/fileWatcher.ts

@@ -4,7 +4,7 @@
  */
 
 import { watch, existsSync } from 'fs';
-import { basename, dirname } from 'path';
+import { basename, dirname, join } from 'path';
 import type { FSWatcher } from 'fs';
 import { mapPageNameToPath } from './jsonLoader';
 import { projectPaths, getProjectRoot } from './projectContext';
@@ -70,6 +70,10 @@ export class FileWatcher {
   private imagesWatcher: FSWatcher | null = null;
   private librariesWatcher: FSWatcher | null = null;
   private projectConfigWatcher: FSWatcher | null = null;
+  // Astro-format projects keep pages/components/CMS under src/ as .astro/.json.
+  private astroPagesWatcher: FSWatcher | null = null;
+  private astroComponentsWatcher: FSWatcher | null = null;
+  private astroContentWatcher: FSWatcher | null = null;
 
   constructor(private callbacks: FileWatchCallbacks) {}
   
@@ -289,6 +293,43 @@ export class FileWatcher {
     );
   }
 
+  /**
+   * Astro-format projects keep pages/components/CMS under src/ as .astro/.json.
+   * The onPageChange/onComponentChange/onCMSChange callbacks are format-agnostic
+   * (reload goes through the active provider), so file→editor live reload works
+   * for `.astro` the same way it does for JSON. These are no-ops in JSON projects
+   * (the src/ dirs don't exist).
+   */
+  watchAstroPages(dirPath: string = join(getProjectRoot(), 'src', 'pages')): void {
+    if (!existsSync(dirPath)) return;
+    this.astroPagesWatcher = watch(dirPath, { recursive: true }, async (_event, filename) => {
+      // Skip dynamic CMS routes ([slug].astro) — those are CMS templates, not pages.
+      if (filename && filename.endsWith('.astro') && !filename.includes('[')) {
+        const pagePath = mapPageNameToPath(filename.replace(/\.astro$/, ''));
+        if (this.callbacks.onPageChange) await this.callbacks.onPageChange(pagePath);
+      }
+    });
+  }
+
+  watchAstroComponents(dirPath: string = join(getProjectRoot(), 'src', 'components')): void {
+    if (!existsSync(dirPath)) return;
+    this.astroComponentsWatcher = watch(dirPath, { recursive: true }, async (_event, filename) => {
+      if (filename && filename.endsWith('.astro') && this.callbacks.onComponentChange) {
+        await this.callbacks.onComponentChange();
+      }
+    });
+  }
+
+  watchAstroContent(dirPath: string = join(getProjectRoot(), 'src', 'content')): void {
+    if (!existsSync(dirPath)) return;
+    this.astroContentWatcher = watch(dirPath, { recursive: true }, async (_event, filename) => {
+      if (filename && filename.endsWith('.json') && this.callbacks.onCMSChange) {
+        const collection = filename.split('/')[0];
+        await this.callbacks.onCMSChange(collection);
+      }
+    });
+  }
+
   /**
    * Start watching all directories
    */
@@ -303,6 +344,10 @@ export class FileWatcher {
     this.watchImages();
     this.watchLibraries();
     this.watchProjectConfig();
+    // Astro-format dirs (no-ops in JSON projects).
+    this.watchAstroPages();
+    this.watchAstroComponents();
+    this.watchAstroContent();
   }
   
   /**
@@ -358,8 +403,23 @@ export class FileWatcher {
       this.projectConfigWatcher.close();
       this.projectConfigWatcher = null;
     }
+
+    if (this.astroPagesWatcher) {
+      this.astroPagesWatcher.close();
+      this.astroPagesWatcher = null;
+    }
+
+    if (this.astroComponentsWatcher) {
+      this.astroComponentsWatcher.close();
+      this.astroComponentsWatcher = null;
+    }
+
+    if (this.astroContentWatcher) {
+      this.astroContentWatcher.close();
+      this.astroContentWatcher = null;
+    }
   }
-  
+
   /**
    * Check if watchers are active
    */

package/lib/server/index.ts

@@ -15,7 +15,13 @@ export { generateBuildErrorPage, type BuildError, type BuildErrorsData } from '.
 
 // Services
 export { PageService } from './services/pageService';
-export { ComponentService, type ComponentInfo } from './services/componentService';
+export {
+  ComponentService,
+  type ComponentInfo,
+  type ComponentLoader,
+  type ComponentWriter,
+  type ComponentServiceFs,
+} from './services/componentService';
 export { CMSService, type ReferenceLocation } from './services/cmsService';
 export { configService, ConfigService } from './services/configService';
 export { ColorService, colorService } from './services/ColorService';
@@ -50,6 +56,9 @@ export { WebSocketManager } from './websocketManager';
 // Page cache
 export { PageCache } from './pageCache';
 
+// Draft page store (in-memory unsaved page versions for live preview)
+export { DraftPageStore } from './draftPageStore';
+
 // Project context
 export * from './projectContext';
 
@@ -65,6 +74,9 @@ export { buildStaticPages } from '../../build-static';
 // Astro export
 export { buildAstroProject } from '../../build-astro';
 
+// Next.js export
+export { buildNextProject } from '../../build-next';
+
 // Webflow export
 export { buildWebflowPayload, wrapInWebflowTemplate } from './webflow';
 export type {

package/lib/server/providers/fileSystemPageProvider.ts

@@ -149,4 +149,12 @@ export class FileSystemPageProvider implements PageProvider {
     const filePath = this.resolveFilePath(path);
     return existsSync(filePath);
   }
+
+  baseDir(): string {
+    return this.pagesDir;
+  }
+
+  extension(): string {
+    return '.json';
+  }
 }

package/lib/server/routes/api/components.ts

@@ -7,14 +7,19 @@ import type { ComponentService } from '../../services/componentService';
 import type { PageService } from '../../services/pageService';
 import type { ComponentNode } from '../../../shared/types';
 import { createCorsHeaders } from '../../middleware/cors';
-import { jsonResponse } from './shared';
+import { jsonResponse, cachedJsonResponse } from './shared';
 import { formatJsonErrorMessage } from '../../../shared/jsonRepair';
 
 /**
  * Handle components API endpoint - GET /api/components
- * Returns components with category metadata derived from folder structure
+ * Returns components with category metadata derived from folder structure.
+ * Uses ETag revalidation so repeat page navigations get a 304 when the
+ * registry hasn't changed.
  */
-export function handleComponentsRoute(componentService: ComponentService): Response {
+export function handleComponentsRoute(
+  req: Request,
+  componentService: ComponentService,
+): Response {
   const componentsWithCategories = componentService.getAllComponentsWithCategories();
 
   // Transform to API format: { name: { ...definition, _category } }
@@ -32,7 +37,7 @@ export function handleComponentsRoute(componentService: ComponentService): Respo
     result._diagnostics = diagnostics;
   }
 
-  return jsonResponse(result);
+  return cachedJsonResponse(req, JSON.stringify(result));
 }
 
 /**

package/lib/server/routes/api/core-routes.ts

@@ -68,7 +68,7 @@ export async function handleCoreApiRoutes(
 
   if (url.pathname === API_ROUTES.PAGE_CONTENT && req.method === 'GET') {
     return await handleRouteError(
-      () => Promise.resolve(pagesRoutes.handlePageContentRoute(url, pageService)),
+      () => Promise.resolve(pagesRoutes.handlePageContentRoute(req, url, pageService)),
       'Failed to fetch page content'
     );
   }
@@ -76,7 +76,7 @@ export async function handleCoreApiRoutes(
   // Components API routes (read-only)
   if (url.pathname === API_ROUTES.COMPONENTS && req.method === 'GET') {
     return await handleRouteError(
-      () => Promise.resolve(componentsRoutes.handleComponentsRoute(componentService)),
+      () => Promise.resolve(componentsRoutes.handleComponentsRoute(req, componentService)),
       'Failed to fetch components list'
     );
   }

package/lib/server/routes/api/pages.ts

@@ -7,7 +7,7 @@ import type { PageService } from '../../services/pageService';
 import { API_ROUTES } from '../../../shared/constants';
 import { parseJSON } from '../../jsonLoader';
 import { createCorsHeaders } from '../../middleware/cors';
-import { jsonResponse } from './shared';
+import { jsonResponse, cachedJsonResponse } from './shared';
 
 /**
  * Handle pages API endpoint - GET /api/pages
@@ -53,37 +53,29 @@ export function handlePageDataRoute(
 /**
  * Handle page content API endpoint - GET /api/page-content?page=...
  * Returns raw JSON text for client routing, prefetching, and studio editor.
+ * Uses ETag revalidation so repeat navigations to the same page get a 304
+ * instead of re-transmitting an unchanged body.
  */
 export function handlePageContentRoute(
+  req: Request,
   url: URL,
   pageService: PageService
 ): Response {
   const page = url.searchParams.get('page') || '/';
   const content = pageService.getPage(page);
-  const corsHeaders = createCorsHeaders();
 
   if (content) {
-    return new Response(content, {
-      headers: {
-        'Content-Type': 'application/json',
-        'Cache-Control': 'no-store, max-age=0',
-        'Pragma': 'no-cache',
-        'Expires': '0',
-        ...corsHeaders,
-      },
-    });
-  } else {
-    return new Response('Page not found', {
-      status: 404,
-      headers: {
-        'Content-Type': 'application/json',
-        'Cache-Control': 'no-store, max-age=0',
-        'Pragma': 'no-cache',
-        'Expires': '0',
-        ...corsHeaders,
-      },
-    });
+    return cachedJsonResponse(req, content);
   }
+  const corsHeaders = createCorsHeaders();
+  return new Response('Page not found', {
+    status: 404,
+    headers: {
+      'Content-Type': 'application/json',
+      'Cache-Control': 'no-store, max-age=0',
+      ...corsHeaders,
+    },
+  });
 }
 
 /**

package/lib/server/routes/api/shared.ts

@@ -29,3 +29,59 @@ export function errorResponse(message: string, status: number = 500): Response {
   return jsonResponse({ error: message }, { status });
 }
 
+/**
+ * Cheap, fast 32-bit string hash (FNV-1a). Used to build ETag values for
+ * read endpoints — collision chance is tiny and a false match only delays
+ * propagation of a change by one revalidation cycle.
+ */
+function fnv1a(str: string): string {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < str.length; i++) {
+    hash ^= str.charCodeAt(i);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return (hash >>> 0).toString(36);
+}
+
+/**
+ * JSON response variant that lets the browser keep the body cached and
+ * revalidates cheaply via `ETag` / `If-None-Match`. Returns 304 with no
+ * body when the client already has the same version. Used by the
+ * high-frequency read endpoints (`/api/page-content`, `/api/components`)
+ * so iframe page navigations don't re-download identical bodies.
+ */
+export function cachedJsonResponse(
+  req: Request,
+  body: string,
+  options: { status?: number; contentType?: string } = {},
+): Response {
+  const corsHeaders = createCorsHeaders();
+  const contentType = options.contentType ?? 'application/json';
+  const etag = `W/"${fnv1a(body)}"`;
+  const ifNoneMatch = req.headers.get('if-none-match');
+
+  // 304 path: identical body, skip transmission and parsing on the client.
+  if (ifNoneMatch && ifNoneMatch === etag) {
+    return new Response(null, {
+      status: 304,
+      headers: {
+        'ETag': etag,
+        'Cache-Control': 'no-cache',
+        ...corsHeaders,
+      },
+    });
+  }
+
+  return new Response(body, {
+    status: options.status ?? 200,
+    headers: {
+      'Content-Type': contentType,
+      'ETag': etag,
+      // `no-cache` (not `no-store`) — browser may keep the body but must
+      // revalidate every time. Pairs with the 304 branch above.
+      'Cache-Control': 'no-cache',
+      ...corsHeaders,
+    },
+  });
+}
+

package/lib/server/routes/index.ts

@@ -7,6 +7,8 @@ import type { PageService } from '../services/pageService';
 import type { ComponentService } from '../services/componentService';
 import type { CMSService } from '../services/cmsService';
 import type { CMSProvider } from '../../shared/interfaces/contentProvider';
+import type { WebSocketManager } from '../websocketManager';
+import type { DraftPageStore } from '../draftPageStore';
 import { HMR_ROUTE } from '../../shared/constants';
 import { handleCorsPreflight } from '../middleware/cors';
 import { handleRouteError } from '../middleware/errorHandler';
@@ -32,6 +34,19 @@ export interface RouteContext {
   isEditor?: boolean;
   /** Actual bound server port, used to connect live reload WS directly to SSR server */
   serverPort?: number;
+  /**
+   * WebSocket manager for this server. Used by the /__draft-page endpoint
+   * to nudge live-reload clients (external browser tabs) to refetch after a
+   * draft pageData has been stored on the server.
+   */
+  wsManager?: WebSocketManager;
+  /**
+   * In-memory draft page store. When the page route finds a draft for the
+   * requested path it renders from that instead of disk, so external
+   * browser tabs see the editor's in-flight edits without anything being
+   * persisted.
+   */
+  draftPageStore?: DraftPageStore;
 }
 
 /**
@@ -64,6 +79,69 @@ export async function handleRoutes(
       return undefined;
     }
 
+    // Ephemeral draft-page channel for external browser tabs.
+    //   POST /__draft-page         body: { path, content } — store draft + nudge clients
+    //   POST /__draft-page/clear   body: { path }          — drop draft (e.g. after save)
+    //   GET  /__draft-page/clients                          — probe connected-client count
+    //
+    // The studio fire-and-forgets POSTs here while the user edits. We bail
+    // before parsing the body when no external tab is listening, so this
+    // path costs ~zero in the common case.
+    if (url.pathname === '/__draft-page' && req.method === 'POST') {
+      const corsHeaders = { 'Access-Control-Allow-Origin': '*' };
+      const store = context.draftPageStore;
+      const ws = context.wsManager;
+      if (!store || !ws || ws.getClientCount() === 0) {
+        logResponseTime(startTime, req);
+        return new Response(null, { status: 204, headers: corsHeaders });
+      }
+      try {
+        const body = await req.json() as { path?: string; content?: string };
+        if (typeof body.path === 'string' && typeof body.content === 'string' && body.path.startsWith('/')) {
+          store.set(body.path, body.content);
+          // Nudge connected tabs to refetch. The existing live-reload
+          // script does a smart-diff hotReload off this message and will
+          // pull the draft-rendered HTML (classes + utility CSS together).
+          ws.broadcastUpdate(body.path);
+        }
+      } catch {
+        // Drop silently — studio retries on next commit.
+      }
+      logResponseTime(startTime, req);
+      return new Response(null, { status: 204, headers: corsHeaders });
+    }
+
+    if (url.pathname === '/__draft-page/clear' && req.method === 'POST') {
+      const corsHeaders = { 'Access-Control-Allow-Origin': '*' };
+      const store = context.draftPageStore;
+      if (store) {
+        try {
+          const body = await req.json() as { path?: string };
+          if (typeof body.path === 'string') {
+            store.clear(body.path);
+            // External tabs viewing this path should refetch the disk
+            // version now that the draft is gone.
+            context.wsManager?.broadcastUpdate(body.path);
+          }
+        } catch { /* ignore */ }
+      }
+      logResponseTime(startTime, req);
+      return new Response(null, { status: 204, headers: corsHeaders });
+    }
+
+    if (url.pathname === '/__draft-page/clients' && req.method === 'GET') {
+      const count = context.wsManager?.getClientCount() ?? 0;
+      logResponseTime(startTime, req);
+      return new Response(JSON.stringify({ count }), {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store',
+          'Access-Control-Allow-Origin': '*',
+        },
+      });
+    }
+
     // Build CMS context if CMS service and provider are available
     const cmsContext: CMSRouteContext | undefined =
       cmsService && cmsProvider
@@ -139,6 +217,18 @@ export async function handleRoutes(
       }
     }
 
+    // Unknown /api/* — return a real 404 instead of falling through to the
+    // SPA shell. Without this guard, an /api/foo that no handler claimed gets
+    // rendered as a 200 HTML page (the catch-all below), which makes broken
+    // route wiring look like a working endpoint to API clients.
+    if (url.pathname.startsWith('/api/')) {
+      logResponseTime(startTime, req);
+      return new Response(
+        JSON.stringify({ error: 'Not Found', path: url.pathname }),
+        { status: 404, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
     // Page routes (SSR)
     if (url.pathname === '/' || (url.pathname.startsWith('/') && !url.pathname.includes('.'))) {
       const response = await handlePageRoute(url, context, req);

package/lib/server/routes/pages.ts

@@ -47,10 +47,15 @@ export async function handlePageRoute(
 ): Promise<Response | undefined> {
   const { pageService, componentService, cmsService, injectLiveReload, isEditor, serverPort } = context;
   const pagePath = url.pathname;
-  // Editor selection attributes (data-element-path, data-cms-context, ...) are emitted
-  // only when the request is proxied from the studio editor (it sets `x-meno-editor: 1`).
-  // Direct access to the SSR preview server (e.g., http://localhost:8082/) gets clean output.
-  const injectEditorAttrs = req?.headers.get(EDITOR_HEADER) === '1';
+  // Editor selection attributes (data-element-path, data-cms-context, ...).
+  // Emitted whenever live-reload is on (dev SSR preview) so the inline
+  // smart-diff script can identify elements when external browser tabs
+  // refetch on draft pushes — without these attrs the diff only syncs
+  // text nodes and className changes get silently dropped. Also still
+  // emitted when the studio's /__static__/ proxy sets `x-meno-editor: 1`
+  // (back-compat). Static/production builds keep clean output because
+  // injectLiveReload is false there.
+  const injectEditorAttrs = injectLiveReload === true || req?.headers.get(EDITOR_HEADER) === '1';
 
   // Fresh CSP nonce per request: stamped onto every inline <script> emitted
   // by the SSR pipeline AND sent back to the Electron main process via the
@@ -222,8 +227,10 @@ export async function handlePageRoute(
     }
   }
 
-  // Development mode: Always use fresh SSR from JSON files (no caching)
-  const pageContent = pageService.getPage(lookupPath);
+  // Development mode: Always use fresh SSR from JSON files (no caching).
+  // Studio-pushed draft (if any) wins over the on-disk version so external
+  // browser tabs reflect unsaved edits.
+  const pageContent = context.draftPageStore?.get(lookupPath) ?? pageService.getPage(lookupPath);
 
   if (pageContent) {
     try {