pulse-js-framework 1.7.31 → 1.7.33

package/loader/rollup-plugin.js

@@ -0,0 +1,259 @@
+/**
+ * Pulse Rollup Plugin
+ *
+ * Enables .pulse file support in Rollup projects
+ * Extracts CSS and compiles to JavaScript with source maps
+ *
+ * CSS Preprocessor Support:
+ * - If `sass`, `less`, or `stylus` is installed in the user's project,
+ *   preprocessor syntax in style blocks is automatically compiled
+ * - No configuration needed - just install the preprocessor package
+ *
+ * Usage in rollup.config.js:
+ * ```js
+ * import pulsePlugin from 'pulse-js-framework/rollup';
+ *
+ * export default {
+ *   input: 'src/main.js',
+ *   output: { file: 'dist/bundle.js', format: 'es' },
+ *   plugins: [
+ *     pulsePlugin({
+ *       sourceMap: true,
+ *       extractCss: 'dist/bundle.css',
+ *       sass: { loadPaths: ['src/styles'] }
+ *     })
+ *   ]
+ * };
+ * ```
+ */
+
+import { compile } from '../compiler/index.js';
+import {
+  preprocessStylesSync,
+  isSassAvailable,
+  isLessAvailable,
+  isStylusAvailable,
+  getSassVersion,
+  getLessVersion,
+  getStylusVersion,
+  detectPreprocessor
+} from '../compiler/preprocessor.js';
+import { dirname } from 'path';
+
+// Cache for preprocessor availability checks
+let preprocessorCache = null;
+
+/**
+ * Check available preprocessors once
+ */
+function checkPreprocessors() {
+  if (preprocessorCache) return preprocessorCache;
+
+  preprocessorCache = {
+    sass: isSassAvailable(),
+    less: isLessAvailable(),
+    stylus: isStylusAvailable()
+  };
+
+  return preprocessorCache;
+}
+
+/**
+ * Create Pulse Rollup plugin
+ */
+export default function pulsePlugin(options = {}) {
+  const {
+    include = /\.pulse$/,
+    exclude = /node_modules/,
+    sourceMap = true,
+    extractCss = null, // Path to output CSS file, or null for inline
+    sass: sassOptions = {},
+    less: lessOptions = {},
+    stylus: stylusOptions = {}
+  } = options;
+
+  const filter = createFilter(include, exclude);
+
+  // Accumulated CSS from all .pulse files
+  let accumulatedCss = '';
+  let cssEmitted = false;
+
+  return {
+    name: 'pulse',
+
+    /**
+     * Log preprocessor availability on build start
+     */
+    buildStart() {
+      // Reset accumulated CSS
+      accumulatedCss = '';
+      cssEmitted = false;
+
+      // Check preprocessor availability
+      const available = checkPreprocessors();
+      const preprocessors = [];
+
+      if (available.sass) {
+        preprocessors.push(`SASS ${getSassVersion() || 'unknown'}`);
+      }
+      if (available.less) {
+        preprocessors.push(`LESS ${getLessVersion() || 'unknown'}`);
+      }
+      if (available.stylus) {
+        preprocessors.push(`Stylus ${getStylusVersion() || 'unknown'}`);
+      }
+
+      if (preprocessors.length > 0) {
+        console.log(`[Pulse Rollup] Preprocessor support: ${preprocessors.join(', ')}`);
+      }
+    },
+
+    /**
+     * Resolve .pulse files
+     */
+    resolveId(id, importer) {
+      // Handle .pulse imports
+      if (id.endsWith('.pulse')) {
+        return null; // Let Rollup handle it
+      }
+
+      // Check if a .js import has a corresponding .pulse file
+      if (id.endsWith('.js') && importer) {
+        const pulseId = id.replace(/\.js$/, '.pulse');
+        // Let Rollup's resolution handle this
+        return null;
+      }
+
+      return null;
+    },
+
+    /**
+     * Transform .pulse files to JavaScript
+     */
+    transform(source, id) {
+      if (!filter(id)) return null;
+      if (!id.endsWith('.pulse')) return null;
+
+      try {
+        // Compile .pulse to JavaScript
+        const result = compile(source, {
+          runtime: 'pulse-js-framework/runtime',
+          sourceMap,
+          filename: id
+        });
+
+        if (!result.success) {
+          const errors = result.errors.map(e =>
+            `${e.message}${e.line ? ` at line ${e.line}` : ''}`
+          ).join('\n');
+
+          this.error(`Pulse compilation failed:\n${errors}`);
+          return null;
+        }
+
+        let outputCode = result.code;
+        let outputMap = result.map;
+
+        // Extract CSS from compiled output
+        const stylesMatch = outputCode.match(/const styles = `([\s\S]*?)`;/);
+
+        if (stylesMatch) {
+          let css = stylesMatch[1];
+
+          // Check available preprocessors
+          const available = checkPreprocessors();
+          const preprocessor = detectPreprocessor(css);
+
+          // Preprocess if preprocessor detected and available
+          if (preprocessor !== 'none' && available[preprocessor]) {
+            try {
+              const preprocessorOptions = {
+                sass: sassOptions,
+                less: lessOptions,
+                stylus: stylusOptions
+              }[preprocessor];
+
+              const preprocessed = preprocessStylesSync(css, {
+                filename: id,
+                loadPaths: [dirname(id), ...(preprocessorOptions.loadPaths || [])],
+                compressed: preprocessorOptions.compressed || false,
+                preprocessor // Force detected preprocessor
+              });
+
+              css = preprocessed.css;
+
+              // Log preprocessor usage in verbose mode
+              if (preprocessorOptions.verbose) {
+                console.log(`[Pulse] Compiled ${preprocessor.toUpperCase()} in ${id}`);
+              }
+            } catch (preprocessorError) {
+              // Emit warning but continue with original CSS
+              this.warn(`${preprocessor.toUpperCase()} compilation warning: ${preprocessorError.message}`);
+            }
+          }
+
+          if (extractCss) {
+            // Accumulate CSS for later emission
+            accumulatedCss += `/* ${id} */\n${css}\n\n`;
+
+            // Remove inline CSS injection from output
+            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 CSS file'
+            );
+          }
+          // else: keep inline CSS injection
+        }
+
+        return {
+          code: outputCode,
+          map: sourceMap ? outputMap : null
+        };
+      } catch (error) {
+        this.error(`Pulse plugin error: ${error.message}`);
+        return null;
+      }
+    },
+
+    /**
+     * Emit accumulated CSS as asset
+     */
+    generateBundle() {
+      if (extractCss && accumulatedCss && !cssEmitted) {
+        this.emitFile({
+          type: 'asset',
+          fileName: extractCss,
+          source: accumulatedCss
+        });
+        cssEmitted = true;
+        console.log(`[Pulse] Emitted CSS to ${extractCss}`);
+      }
+    }
+  };
+}
+
+/**
+ * Create filter function for include/exclude patterns
+ * Simple implementation to avoid dependency on @rollup/pluginutils
+ */
+function createFilter(include, exclude) {
+  return (id) => {
+    // Check exclude first
+    if (exclude) {
+      if (exclude instanceof RegExp && exclude.test(id)) return false;
+      if (Array.isArray(exclude) && exclude.some(pattern =>
+        pattern instanceof RegExp ? pattern.test(id) : id.includes(pattern)
+      )) return false;
+    }
+
+    // Check include
+    if (include) {
+      if (include instanceof RegExp) return include.test(id);
+      if (Array.isArray(include)) return include.some(pattern =>
+        pattern instanceof RegExp ? pattern.test(id) : id.includes(pattern)
+      );
+    }
+
+    return true;
+  };
+}

package/loader/swc-plugin.js

@@ -0,0 +1,286 @@
+/**
+ * Pulse SWC Plugin
+ *
+ * Enables .pulse file support in SWC-based build pipelines
+ * Provides transform functions and a plugin interface for custom build scripts
+ *
+ * CSS Preprocessor Support:
+ * - If `sass`, `less`, or `stylus` is installed in the user's project,
+ *   preprocessor syntax in style blocks is automatically compiled
+ * - No configuration needed - just install the preprocessor package
+ *
+ * Usage with direct transform API:
+ * ```js
+ * import { transformPulseFile } from 'pulse-js-framework/swc';
+ *
+ * const result = transformPulseFile('src/App.pulse', {
+ *   sourceMap: true,
+ *   sass: { loadPaths: ['src/styles'] }
+ * });
+ * console.log(result.code);  // Compiled JavaScript
+ * console.log(result.css);   // Extracted CSS (or null)
+ * ```
+ *
+ * Usage with plugin interface:
+ * ```js
+ * import pulsePlugin from 'pulse-js-framework/swc';
+ *
+ * const plugin = pulsePlugin({ extractCss: 'dist/bundle.css' });
+ * plugin.buildStart();
+ * const result = plugin.transform(source, 'src/App.pulse');
+ * plugin.buildEnd();  // Writes accumulated CSS
+ * ```
+ *
+ * Batch processing:
+ * ```js
+ * import { buildPulseFiles } from 'pulse-js-framework/swc';
+ *
+ * const results = buildPulseFiles(['src/App.pulse', 'src/Home.pulse'], {
+ *   extractCss: 'dist/bundle.css'
+ * });
+ * ```
+ */
+
+import { compile } from '../compiler/index.js';
+import {
+  preprocessStylesSync,
+  isSassAvailable,
+  isLessAvailable,
+  isStylusAvailable,
+  getSassVersion,
+  getLessVersion,
+  getStylusVersion,
+  detectPreprocessor
+} from '../compiler/preprocessor.js';
+import { dirname, resolve } from 'path';
+import { readFileSync, writeFileSync, mkdirSync } from 'fs';
+
+// Cache for preprocessor availability checks
+let preprocessorCache = null;
+
+/**
+ * Check available preprocessors once
+ */
+function checkPreprocessors() {
+  if (preprocessorCache) return preprocessorCache;
+
+  preprocessorCache = {
+    sass: isSassAvailable(),
+    less: isLessAvailable(),
+    stylus: isStylusAvailable()
+  };
+
+  return preprocessorCache;
+}
+
+/**
+ * Create Pulse SWC plugin
+ */
+export default function pulsePlugin(options = {}) {
+  const {
+    sourceMap = true,
+    extractCss = null, // Path to output CSS file, or null for inline
+    sass: sassOptions = {},
+    less: lessOptions = {},
+    stylus: stylusOptions = {}
+  } = options;
+
+  // Accumulated CSS from all .pulse files
+  let accumulatedCss = '';
+  let buildStarted = false;
+
+  return {
+    name: 'pulse',
+
+    /**
+     * Reset accumulated CSS and log preprocessor availability
+     */
+    buildStart() {
+      accumulatedCss = '';
+
+      if (!buildStarted) {
+        const available = checkPreprocessors();
+        const preprocessors = [];
+
+        if (available.sass) {
+          preprocessors.push(`SASS ${getSassVersion() || 'unknown'}`);
+        }
+        if (available.less) {
+          preprocessors.push(`LESS ${getLessVersion() || 'unknown'}`);
+        }
+        if (available.stylus) {
+          preprocessors.push(`Stylus ${getStylusVersion() || 'unknown'}`);
+        }
+
+        if (preprocessors.length > 0) {
+          console.log(`[Pulse SWC] Preprocessor support: ${preprocessors.join(', ')}`);
+        }
+
+        buildStarted = true;
+      }
+    },
+
+    /**
+     * Transform a .pulse file source to JavaScript
+     * @param {string} source - The .pulse file source code
+     * @param {string} filePath - The file path for error reporting and preprocessor resolution
+     * @returns {{ code: string|null, map: object|null, css: string|null, error: string|null }}
+     */
+    transform(source, filePath) {
+      try {
+        // Compile .pulse to JavaScript
+        const result = compile(source, {
+          runtime: 'pulse-js-framework/runtime',
+          sourceMap,
+          filename: filePath
+        });
+
+        if (!result.success) {
+          const errors = result.errors.map(e =>
+            `${e.message}${e.line ? ` at line ${e.line}` : ''}`
+          ).join('\n');
+
+          return {
+            code: null,
+            map: null,
+            css: null,
+            error: `Pulse compilation failed:\n${errors}`
+          };
+        }
+
+        let outputCode = result.code;
+        let extractedCss = null;
+
+        // Extract CSS from compiled output
+        const stylesMatch = outputCode.match(/const styles = `([\s\S]*?)`;/);
+
+        if (stylesMatch) {
+          let css = stylesMatch[1];
+
+          // Check available preprocessors
+          const available = checkPreprocessors();
+          const preprocessor = detectPreprocessor(css);
+
+          // Preprocess if preprocessor detected and available
+          if (preprocessor !== 'none' && available[preprocessor]) {
+            try {
+              const preprocessorOptions = {
+                sass: sassOptions,
+                less: lessOptions,
+                stylus: stylusOptions
+              }[preprocessor];
+
+              const preprocessed = preprocessStylesSync(css, {
+                filename: filePath,
+                loadPaths: [dirname(filePath), ...(preprocessorOptions.loadPaths || [])],
+                compressed: preprocessorOptions.compressed || false,
+                preprocessor // Force detected preprocessor
+              });
+
+              css = preprocessed.css;
+
+              // Log preprocessor usage in verbose mode
+              if (preprocessorOptions.verbose) {
+                console.log(`[Pulse] Compiled ${preprocessor.toUpperCase()} in ${filePath}`);
+              }
+            } catch (preprocessorError) {
+              // Emit warning but continue with original CSS
+              console.warn(`[Pulse SWC] ${preprocessor.toUpperCase()} compilation warning: ${preprocessorError.message}`);
+            }
+          }
+
+          extractedCss = css;
+
+          if (extractCss) {
+            // Accumulate CSS for later emission
+            accumulatedCss += `/* ${filePath} */\n${css}\n\n`;
+
+            // Remove inline CSS injection from output
+            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 CSS file'
+            );
+          }
+          // else: keep inline CSS injection
+        }
+
+        return {
+          code: outputCode,
+          map: result.sourceMap || null,
+          css: extractedCss,
+          error: null
+        };
+      } catch (error) {
+        return {
+          code: null,
+          map: null,
+          css: null,
+          error: `Pulse plugin error: ${error.message}`
+        };
+      }
+    },
+
+    /**
+     * Write accumulated CSS to disk
+     * Call after all transforms are complete
+     */
+    buildEnd() {
+      if (extractCss && accumulatedCss) {
+        try {
+          const cssPath = resolve(typeof extractCss === 'string' ? extractCss : 'dist/bundle.css');
+          const cssDir = dirname(cssPath);
+          mkdirSync(cssDir, { recursive: true });
+          writeFileSync(cssPath, accumulatedCss, 'utf8');
+          console.log(`[Pulse] Emitted CSS to ${extractCss}`);
+        } catch (writeError) {
+          console.error(`[Pulse] Failed to write CSS file: ${writeError.message}`);
+        }
+      }
+    }
+  };
+}
+
+/**
+ * Transform a .pulse file to JavaScript (standalone function)
+ * @param {string} filePath - Path to the .pulse file
+ * @param {object} options - Plugin options
+ * @returns {{ code: string|null, map: object|null, css: string|null, error: string|null }}
+ */
+export function transformPulseFile(filePath, options = {}) {
+  const resolvedPath = resolve(filePath);
+  const source = readFileSync(resolvedPath, 'utf8');
+  return transformPulseCode(source, { ...options, filename: resolvedPath });
+}
+
+/**
+ * Transform .pulse source code to JavaScript (standalone function)
+ * @param {string} source - The .pulse source code
+ * @param {object} options - Plugin options (plus optional `filename`)
+ * @returns {{ code: string|null, map: object|null, css: string|null, error: string|null }}
+ */
+export function transformPulseCode(source, options = {}) {
+  const { filename = 'unknown.pulse', ...pluginOptions } = options;
+  const plugin = pulsePlugin({ ...pluginOptions, extractCss: null });
+  return plugin.transform(source, filename);
+}
+
+/**
+ * Batch process multiple .pulse files
+ * @param {string[]} files - Array of .pulse file paths
+ * @param {object} options - Plugin options
+ * @returns {Array<{ file: string, code: string|null, map: object|null, css: string|null, error: string|null }>}
+ */
+export function buildPulseFiles(files, options = {}) {
+  const plugin = pulsePlugin(options);
+  plugin.buildStart();
+
+  const results = files.map(filePath => {
+    const resolvedPath = resolve(filePath);
+    const source = readFileSync(resolvedPath, 'utf8');
+    const result = plugin.transform(source, resolvedPath);
+    return { file: filePath, ...result };
+  });
+
+  plugin.buildEnd();
+  return results;
+}

package/loader/vite-plugin.js

@@ -4,11 +4,17 @@
  * Enables .pulse file support in Vite projects
  * Extracts CSS to virtual .css modules so Vite's CSS pipeline handles them
  * (prevents JS minifier from corrupting CSS in template literals)
+ *
+ * SASS/SCSS Support:
+ * - If `sass` is installed in the user's project, SCSS syntax in style blocks
+ *   is automatically compiled before being passed to Vite's CSS pipeline
+ * - No configuration needed - just install sass: `npm install -D sass`
  */
 
 import { compile } from '../compiler/index.js';
 import { existsSync } from 'fs';
 import { resolve, dirname } from 'path';
+import { preprocessStylesSync, isSassAvailable, getSassVersion } from '../compiler/preprocessor.js';
 
 // Virtual module ID for extracted CSS (uses .css extension so Vite treats it as CSS)
 const VIRTUAL_CSS_SUFFIX = '.pulse.css';
@@ -19,16 +25,37 @@ const VIRTUAL_CSS_SUFFIX = '.pulse.css';
 export default function pulsePlugin(options = {}) {
   const {
     exclude = /node_modules/,
-    sourceMap = true
+    sourceMap = true,
+    // SASS options
+    sass: sassOptions = {}
   } = options;
 
   // Store extracted CSS for each .pulse module
   const cssMap = new Map();
 
+  // Check for sass availability once at startup
+  let sassAvailable = false;
+  let sassVersion = null;
+
   return {
     name: 'vite-plugin-pulse',
     enforce: 'pre',
 
+    /**
+     * Log sass availability on build start
+     */
+    buildStart() {
+      // Clear CSS map on new build
+      cssMap.clear();
+
+      // Check sass availability
+      sassAvailable = isSassAvailable();
+      if (sassAvailable) {
+        sassVersion = getSassVersion();
+        console.log(`[Pulse] SASS support enabled (sass ${sassVersion || 'unknown'})`);
+      }
+    },
+
     /**
      * Resolve .pulse files and virtual CSS modules
      */
@@ -107,9 +134,27 @@ export default function pulsePlugin(options = {}) {
         // Extract CSS from compiled output and move to virtual CSS module
         const stylesMatch = outputCode.match(/const styles = `([\s\S]*?)`;/);
         if (stylesMatch) {
-          const css = stylesMatch[1];
+          let css = stylesMatch[1];
           const virtualCssId = id + '.css';
 
+          // Preprocess SASS/SCSS if detected and sass is available
+          if (sassAvailable) {
+            try {
+              const preprocessed = preprocessStylesSync(css, {
+                filename: id,
+                loadPaths: [dirname(id), ...(sassOptions.loadPaths || [])],
+                compressed: sassOptions.compressed || false
+              });
+
+              if (preprocessed.wasSass) {
+                css = preprocessed.css;
+              }
+            } catch (sassError) {
+              this.warn(`SASS compilation warning in ${id}: ${sassError.message}`);
+              // Continue with original CSS if SASS fails
+            }
+          }
+
           // Store CSS for the virtual module loader
           cssMap.set(id, css);
 
@@ -168,21 +213,21 @@ export default function pulsePlugin(options = {}) {
     },
 
     /**
-     * Configure dev server
+     * Configure dev server - log sass status on start
      */
     configureServer(server) {
+      // Check sass on server start if not already checked
+      if (!sassAvailable) {
+        sassAvailable = isSassAvailable();
+        if (sassAvailable) {
+          sassVersion = getSassVersion();
+          console.log(`[Pulse] SASS support enabled (sass ${sassVersion || 'unknown'})`);
+        }
+      }
+
       server.middlewares.use((_req, _res, next) => {
-        // Add any custom middleware here
         next();
       });
-    },
-
-    /**
-     * Build hooks
-     */
-    buildStart() {
-      // Clear CSS map on new build
-      cssMap.clear();
     }
   };
 }