pulse-js-framework 1.11.3 → 1.11.4

package/loader/vite-plugin-server-components.js

@@ -26,26 +26,24 @@
  * @module pulse-js-framework/loader/vite-plugin-server-components
  */
 
-import { writeFileSync, mkdirSync } from 'fs';
-import { dirname, relative, posix } from 'path';
+import { relative } from 'path';
 import { getComponentTypeFromSource } from '../compiler/directives.js';
 import { sanitizeImportPath } from '../runtime/server-components/utils/path-sanitizer.js';
+import {
+  extractImports, createImportViolationError, buildManifest, writeManifestToDiskAsync,
+  DIRECTIVE_REGEX, COMPONENT_ID_REGEX, EXPORT_CONST_REGEX, CLIENT_CHUNK_PREFIX,
+  DEFAULT_MANIFEST_PATH, DEFAULT_MANIFEST_FILENAME
+} from './shared.js';
 
 /**
  * Default options for Server Components plugin
  */
 const DEFAULT_OPTIONS = {
-  // Output directory for client manifest
-  manifestPath: 'dist/.pulse-manifest.json',
-
-  // Public base path for chunk URLs (empty for relative paths)
+  manifestPath: DEFAULT_MANIFEST_PATH,
   base: '',
-
-  // Whether to inject manifest into SSR HTML
   injectManifest: true,
-
-  // Custom manifest filename (for different environments)
-  manifestFilename: '.pulse-manifest.json'
+  manifestFilename: DEFAULT_MANIFEST_FILENAME,
+  quiet: false
 };
 
 /**
@@ -116,13 +114,13 @@ export default function pulseServerComponentsPlugin(options = {}) {
 
       // Check if this module exports a Client Component
       // Look for: __directive: "use client"
-      const directiveMatch = code.match(/__directive:\s*["']use client["']/);
+      const directiveMatch = code.match(DIRECTIVE_REGEX);
 
       if (directiveMatch) {
         // Extract component ID from export
         // Look for: export const ComponentName = {
-        const exportMatch = code.match(/export const (\w+) = \{/);
-        const componentIdMatch = code.match(/__componentId:\s*["'](\w+)["']/);
+        const exportMatch = code.match(EXPORT_CONST_REGEX);
+        const componentIdMatch = code.match(COMPONENT_ID_REGEX);
 
         const componentId = componentIdMatch ? componentIdMatch[1] : (exportMatch ? exportMatch[1] : null);
 
@@ -133,7 +131,9 @@ export default function pulseServerComponentsPlugin(options = {}) {
             chunk: null // Will be filled in during generateBundle
           });
 
-          console.log(`[Pulse Server Components] Detected Client Component: ${componentId} (${relative(process.cwd(), id)})`);
+          if (!config.quiet) {
+            console.log(`[Pulse Server Components] Detected Client Component: ${componentId} (${relative(process.cwd(), id)})`);
+          }
         }
       }
 
@@ -202,7 +202,7 @@ export default function pulseServerComponentsPlugin(options = {}) {
                 for (const [componentId, info] of clientComponents.entries()) {
                   if (id === info.file) {
                     // Create a separate chunk for this Client Component
-                    return `client-${componentId}`;
+                    return `${CLIENT_CHUNK_PREFIX}${componentId}`;
                   }
                 }
 
@@ -230,36 +230,21 @@ export default function pulseServerComponentsPlugin(options = {}) {
           // Check if this chunk corresponds to a Client Component
           for (const [componentId, info] of clientComponents.entries()) {
             // Match by chunk name or by checking if the component file is in the chunk
-            if (chunk.name === `client-${componentId}` ||
+            if (chunk.name === `${CLIENT_CHUNK_PREFIX}${componentId}` ||
                 (chunk.facadeModuleId && chunk.facadeModuleId === info.file)) {
 
               // Store the chunk filename
               info.chunk = fileName;
 
-              console.log(`[Pulse Server Components] Mapped ${componentId} → ${fileName}`);
+              if (!config.quiet) {
+                console.log(`[Pulse Server Components] Mapped ${componentId} → ${fileName}`);
+              }
             }
           }
         }
       }
 
-      // Build client manifest
-      const manifest = {
-        version: '1.0',
-        components: {}
-      };
-
-      for (const [componentId, info] of clientComponents.entries()) {
-        if (info.chunk) {
-          const base = config.base || '';
-          const chunkUrl = posix.join(base, info.chunk);
-
-          manifest.components[componentId] = {
-            id: componentId,
-            chunk: chunkUrl,
-            exports: ['default', componentId] // Pulse components export both
-          };
-        }
-      }
+      const manifest = buildManifest(clientComponents, config);
 
       // Write manifest as JSON asset
       const manifestJson = JSON.stringify(manifest, null, 2);
@@ -270,151 +255,25 @@ export default function pulseServerComponentsPlugin(options = {}) {
         source: manifestJson
       });
 
-      console.log(`[Pulse Server Components] Generated client manifest with ${clientComponents.size} components`);
+      if (!config.quiet) {
+        console.log(`[Pulse Server Components] Generated client manifest with ${clientComponents.size} components`);
+      }
     },
 
     /**
-     * Write manifest to file system after build completes
+     * Write manifest to file system after build completes (async)
      */
-    closeBundle() {
+    async closeBundle() {
       // Only in client builds
       if (isSsrBuild || clientComponents.size === 0) {
         return;
       }
 
-      // Build manifest object
-      const manifest = {
-        version: '1.0',
-        components: {}
-      };
-
-      for (const [componentId, info] of clientComponents.entries()) {
-        if (info.chunk) {
-          const base = config.base || '';
-          const chunkUrl = posix.join(base, info.chunk);
-
-          manifest.components[componentId] = {
-            id: componentId,
-            chunk: chunkUrl,
-            exports: ['default', componentId]
-          };
-        }
-      }
-
-      // Write to file system (in addition to emitted asset)
-      if (config.manifestPath) {
-        try {
-          const manifestDir = dirname(config.manifestPath);
-          mkdirSync(manifestDir, { recursive: true });
-          writeFileSync(config.manifestPath, JSON.stringify(manifest, null, 2), 'utf-8');
-          console.log(`[Pulse Server Components] Manifest written to ${config.manifestPath}`);
-        } catch (error) {
-          console.warn(`[Pulse Server Components] Failed to write manifest: ${error.message}`);
-        }
-      }
+      const manifest = buildManifest(clientComponents, config);
+      await writeManifestToDiskAsync(manifest, config);
     }
   };
 }
 
-// ============================================================================
-// Helper Functions
-// ============================================================================
-
-/**
- * Extract import statements from source code
- * @param {string} code - Source code
- * @returns {Array<string>} Import sources
- */
-function extractImports(code) {
-  const imports = [];
-
-  // Match ES6 import statements
-  const importRegex = /import\s+(?:{[^}]*}|[\w$]+|\*\s+as\s+[\w$]+)\s+from\s+['"]([^'"]+)['"]/g;
-  let match;
-
-  while ((match = importRegex.exec(code)) !== null) {
-    imports.push(match[1]);
-  }
-
-  // Match dynamic imports
-  const dynamicImportRegex = /import\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
-  while ((match = dynamicImportRegex.exec(code)) !== null) {
-    imports.push(match[1]);
-  }
-
-  return imports;
-}
-
-/**
- * Create import violation error message
- * @param {string} clientPath - Client Component path
- * @param {string} serverPath - Server Component path
- * @param {string} importSource - Import statement source
- * @returns {string} Error message
- */
-function createImportViolationError(clientPath, serverPath, importSource) {
-  const clientRelative = relative(process.cwd(), clientPath);
-  const serverRelative = relative(process.cwd(), serverPath);
-
-  return `
-[Pulse] Import Violation: Client Component cannot import Server Component
-  at ${clientRelative}
-  importing ${importSource}
-  resolved to ${serverRelative}
-
-  Client Components can only import:
-  • Other Client Components ('use client')
-  • Shared utilities (no directive)
-  • Third-party packages
-
-  → Move shared logic to a Client Component
-  → Use Server Actions for server-side operations
-  → Create a wrapper Client Component that calls Server Actions
-
-  See: https://pulse-js.fr/server-components#import-rules
-  `.trim();
-}
-
-/**
- * Helper function to load client manifest (for SSR)
- *
- * @param {string} manifestPath - Path to manifest file
- * @returns {Object} Client manifest
- *
- * @example
- * import { loadClientManifest } from 'pulse-js-framework/vite/server-components';
- *
- * const manifest = loadClientManifest('./dist/.pulse-manifest.json');
- * // Use manifest for SSR: renderServerComponent(Component, props, { clientManifest: manifest.components })
- */
-export function loadClientManifest(manifestPath) {
-  try {
-    const { readFileSync } = require('fs');
-    const content = readFileSync(manifestPath, 'utf-8');
-    return JSON.parse(content);
-  } catch (error) {
-    console.warn(`Failed to load client manifest from ${manifestPath}:`, error.message);
-    return { version: '1.0', components: {} };
-  }
-}
-
-/**
- * Helper function to get client component chunk URL
- *
- * @param {Object} manifest - Client manifest
- * @param {string} componentId - Component ID
- * @returns {string|null} Chunk URL or null if not found
- */
-export function getComponentChunk(manifest, componentId) {
-  return manifest.components[componentId]?.chunk || null;
-}
-
-/**
- * Helper function to get all client component IDs
- *
- * @param {Object} manifest - Client manifest
- * @returns {Set<string>} Set of component IDs
- */
-export function getClientComponentIds(manifest) {
-  return new Set(Object.keys(manifest.components));
-}
+// Re-export shared manifest helpers
+export { loadClientManifest, getComponentChunk, getClientComponentIds } from './shared.js';

package/loader/vite-plugin.js

@@ -15,6 +15,7 @@ import { compile } from '../compiler/index.js';
 import { existsSync } from 'fs';
 import { resolve, dirname } from 'path';
 import { preprocessStylesSync, isSassAvailable, getSassVersion } from '../compiler/preprocessor.js';
+import { STYLES_MATCH_REGEX, removeInlineStyles } from './shared.js';
 
 // Virtual module ID for extracted CSS (uses .css extension so Vite treats it as CSS)
 const VIRTUAL_CSS_SUFFIX = '.pulse.css';
@@ -26,6 +27,7 @@ export default function pulsePlugin(options = {}) {
   const {
     exclude = /node_modules/,
     sourceMap = true,
+    quiet = false,
     // SASS options
     sass: sassOptions = {}
   } = options;
@@ -52,7 +54,9 @@ export default function pulsePlugin(options = {}) {
       sassAvailable = isSassAvailable();
       if (sassAvailable) {
         sassVersion = getSassVersion();
-        console.log(`[Pulse] SASS support enabled (sass ${sassVersion || 'unknown'})`);
+        if (!quiet) {
+          console.log(`[Pulse] SASS support enabled (sass ${sassVersion || 'unknown'})`);
+        }
       }
     },
 
@@ -132,7 +136,7 @@ export default function pulsePlugin(options = {}) {
         let outputCode = result.code;
 
         // Extract CSS from compiled output and move to virtual CSS module
-        const stylesMatch = outputCode.match(/const styles = `([\s\S]*?)`;/);
+        const stylesMatch = outputCode.match(STYLES_MATCH_REGEX);
         if (stylesMatch) {
           let css = stylesMatch[1];
           const virtualCssId = id + '.css';
@@ -160,10 +164,7 @@ export default function pulsePlugin(options = {}) {
 
           // Replace inline style injection with CSS import
           // Vite will process this through its CSS pipeline (not JS minifier)
-          outputCode = outputCode.replace(
-            /\/\/ Styles\nconst styles = `[\s\S]*?`;\n\/\/ Inject styles\nconst styleEl = document\.createElement\("style"\);\nstyleEl\.textContent = styles;\ndocument\.head\.appendChild\(styleEl\);/,
-            `// Styles extracted to virtual CSS module\nimport "${virtualCssId}";`
-          );
+          outputCode = removeInlineStyles(outputCode, `// Styles extracted to virtual CSS module\nimport "${virtualCssId}";`);
         }
 
         return {
@@ -177,11 +178,20 @@ export default function pulsePlugin(options = {}) {
     },
 
     /**
-     * Handle hot module replacement
+     * Handle hot module replacement for .pulse files.
+     * Invalidates both the JS module and its virtual CSS module, then
+     * sends an HMR update to the client instead of triggering a full reload.
+     *
+     * @param {Object} ctx - Vite HMR context
+     * @param {string} ctx.file - Absolute path of the changed file
+     * @param {Object} ctx.server - Vite dev server instance
+     * @returns {Array|undefined} Empty array to prevent default HMR handling
      */
     handleHotUpdate({ file, server }) {
       if (file.endsWith('.pulse')) {
-        console.log(`[Pulse] HMR update: ${file}`);
+        if (!quiet) {
+          console.log(`[Pulse] HMR update: ${file}`);
+        }
 
         // Invalidate the module in Vite's module graph
         const module = server.moduleGraph.getModuleById(file);
@@ -213,7 +223,10 @@ export default function pulsePlugin(options = {}) {
     },
 
     /**
-     * Configure dev server - log sass status on start
+     * Configure dev server middleware and check SASS availability on start.
+     * Called once when the Vite dev server is created.
+     *
+     * @param {Object} server - Vite dev server instance
      */
     configureServer(server) {
       // Check sass on server start if not already checked
@@ -221,7 +234,9 @@ export default function pulsePlugin(options = {}) {
         sassAvailable = isSassAvailable();
         if (sassAvailable) {
           sassVersion = getSassVersion();
-          console.log(`[Pulse] SASS support enabled (sass ${sassVersion || 'unknown'})`);
+          if (!quiet) {
+            console.log(`[Pulse] SASS support enabled (sass ${sassVersion || 'unknown'})`);
+          }
         }
       }
 

package/loader/webpack-loader-server-components.js

@@ -34,22 +34,23 @@
  * @module pulse-js-framework/loader/webpack-loader-server-components
  */
 
-import { writeFileSync, mkdirSync } from 'fs';
-import { dirname, posix, relative } from 'path';
+import { relative } from 'path';
 import { getComponentTypeFromSource } from '../compiler/directives.js';
+import {
+  createImportViolationError, buildManifest, writeManifestToDisk,
+  loadClientManifest, getComponentChunk, getClientComponentIds,
+  DIRECTIVE_REGEX, COMPONENT_ID_REGEX, EXPORT_CONST_REGEX, CLIENT_CHUNK_PREFIX,
+  DEFAULT_MANIFEST_PATH, DEFAULT_MANIFEST_FILENAME
+} from './shared.js';
 
 /**
  * Default options for Server Components Webpack plugin
  */
 const DEFAULT_OPTIONS = {
-  // Output directory for client manifest
-  manifestPath: 'dist/.pulse-manifest.json',
-
-  // Public base path for chunk URLs (empty for relative paths)
+  manifestPath: DEFAULT_MANIFEST_PATH,
   base: '',
-
-  // Custom manifest filename
-  manifestFilename: '.pulse-manifest.json'
+  manifestFilename: DEFAULT_MANIFEST_FILENAME,
+  quiet: false
 };
 
 /**
@@ -106,12 +107,12 @@ class PulseServerComponentsPlugin {
 
         // Check if this module exports a Client Component
         // Look for: __directive: "use client"
-        const directiveMatch = source.match(/__directive:\s*["']use client["']/);
+        const directiveMatch = source.match(DIRECTIVE_REGEX);
 
         if (directiveMatch) {
           // Extract component ID
-          const componentIdMatch = source.match(/__componentId:\s*["'](\w+)["']/);
-          const exportMatch = source.match(/export const (\w+) = \{/);
+          const componentIdMatch = source.match(COMPONENT_ID_REGEX);
+          const exportMatch = source.match(EXPORT_CONST_REGEX);
 
           const componentId = componentIdMatch ? componentIdMatch[1] : (exportMatch ? exportMatch[1] : null);
 
@@ -124,7 +125,7 @@ class PulseServerComponentsPlugin {
             });
 
             const relativePath = relative(process.cwd(), module.resource);
-            console.log(`[Pulse Server Components] Detected Client Component: ${componentId} (${relativePath})`);
+            if (!this.options.quiet) console.log(`[Pulse Server Components] Detected Client Component: ${componentId} (${relativePath})`);
           }
         }
       });
@@ -181,7 +182,7 @@ class PulseServerComponentsPlugin {
 
                   if (jsFile) {
                     info.chunk = jsFile;
-                    console.log(`[Pulse Server Components] Mapped ${componentId} → ${jsFile}`);
+                    if (!this.options.quiet) console.log(`[Pulse Server Components] Mapped ${componentId} → ${jsFile}`);
                   }
                   break;
                 }
@@ -189,24 +190,7 @@ class PulseServerComponentsPlugin {
             }
           }
 
-          // Build client manifest
-          const manifest = {
-            version: '1.0',
-            components: {}
-          };
-
-          for (const [componentId, info] of clientComponents.entries()) {
-            if (info.chunk) {
-              const base = this.options.base || '';
-              const chunkUrl = posix.join(base, info.chunk);
-
-              manifest.components[componentId] = {
-                id: componentId,
-                chunk: chunkUrl,
-                exports: ['default', componentId]
-              };
-            }
-          }
+          const manifest = buildManifest(clientComponents, { base: this.options.base });
 
           // Emit manifest as asset
           const manifestJson = JSON.stringify(manifest, null, 2);
@@ -217,7 +201,7 @@ class PulseServerComponentsPlugin {
             new RawSource(manifestJson)
           );
 
-          console.log(`[Pulse Server Components] Generated client manifest with ${clientComponents.size} components`);
+          if (!this.options.quiet) console.log(`[Pulse Server Components] Generated client manifest with ${clientComponents.size} components`);
         }
       );
 
@@ -227,75 +211,13 @@ class PulseServerComponentsPlugin {
           return;
         }
 
-        // Build manifest object
-        const manifest = {
-          version: '1.0',
-          components: {}
-        };
-
-        for (const [componentId, info] of clientComponents.entries()) {
-          if (info.chunk) {
-            const base = this.options.base || '';
-            const chunkUrl = posix.join(base, info.chunk);
-
-            manifest.components[componentId] = {
-              id: componentId,
-              chunk: chunkUrl,
-              exports: ['default', componentId]
-            };
-          }
-        }
-
-        // Write to file system
-        if (this.options.manifestPath) {
-          try {
-            const manifestDir = dirname(this.options.manifestPath);
-            mkdirSync(manifestDir, { recursive: true });
-            writeFileSync(this.options.manifestPath, JSON.stringify(manifest, null, 2), 'utf-8');
-            console.log(`[Pulse Server Components] Manifest written to ${this.options.manifestPath}`);
-          } catch (error) {
-            console.warn(`[Pulse Server Components] Failed to write manifest: ${error.message}`);
-          }
-        }
+        const manifest = buildManifest(clientComponents, { base: this.options.base });
+        writeManifestToDisk(manifest, this.options);
       });
     });
   }
 }
 
-// ============================================================================
-// Helper Functions
-// ============================================================================
-
-/**
- * Create import violation error message
- * @param {string} clientPath - Client Component path
- * @param {string} serverPath - Server Component path
- * @param {string} importSource - Import statement source
- * @returns {string} Error message
- */
-function createImportViolationError(clientPath, serverPath, importSource) {
-  const clientRelative = relative(process.cwd(), clientPath);
-  const serverRelative = relative(process.cwd(), serverPath);
-
-  return `
-[Pulse] Import Violation: Client Component cannot import Server Component
-  at ${clientRelative}
-  importing ${importSource}
-  resolved to ${serverRelative}
-
-  Client Components can only import:
-  • Other Client Components ('use client')
-  • Shared utilities (no directive)
-  • Third-party packages
-
-  → Move shared logic to a Client Component
-  → Use Server Actions for server-side operations
-  → Create a wrapper Client Component that calls Server Actions
-
-  See: https://pulse-js.fr/server-components#import-rules
-  `.trim();
-}
-
 /**
  * Helper function to add Server Components support to Webpack config
  *
@@ -315,42 +237,7 @@ export function addServerComponentsSupport(options = {}) {
   return new PulseServerComponentsPlugin(options);
 }
 
-/**
- * Helper function to load client manifest (for SSR)
- *
- * @param {string} manifestPath - Path to manifest file
- * @returns {Object} Client manifest
- */
-export function loadClientManifest(manifestPath) {
-  try {
-    const { readFileSync } = require('fs');
-    const content = readFileSync(manifestPath, 'utf-8');
-    return JSON.parse(content);
-  } catch (error) {
-    console.warn(`Failed to load client manifest from ${manifestPath}:`, error.message);
-    return { version: '1.0', components: {} };
-  }
-}
-
-/**
- * Helper function to get client component chunk URL
- *
- * @param {Object} manifest - Client manifest
- * @param {string} componentId - Component ID
- * @returns {string|null} Chunk URL or null if not found
- */
-export function getComponentChunk(manifest, componentId) {
-  return manifest.components[componentId]?.chunk || null;
-}
-
-/**
- * Helper function to get all client component IDs
- *
- * @param {Object} manifest - Client manifest
- * @returns {Set<string>} Set of component IDs
- */
-export function getClientComponentIds(manifest) {
-  return new Set(Object.keys(manifest.components));
-}
+// Re-export shared manifest helpers
+export { loadClientManifest, getComponentChunk, getClientComponentIds } from './shared.js';
 
 export default PulseServerComponentsPlugin;