@ozdao/martyrs 0.2.526 → 0.2.528

package/src/builder/modes/ssr.rspack.dev.js

@@ -7,33 +7,25 @@ import { fork } from "child_process";
 import devMiddleware from "webpack-dev-middleware";
 
 import { createHtmlRenderer } from "../ssr/ssr-render-html.js";
-import { transformDevStats } from "../ssr/ssr-transform-webpack-stats.js";
+import { createAssetResolver } from "../ssr/asset-resolver.js";
+import { createBeastiesProcessor } from '../ssr/beasties-processor.js';
 
-export default function createSsrDevServer(projectRoot, { clientConfig, apiConfig, ssrConfig }) {
-  const clientCompiler = rspack(clientConfig); 
-  const ssrCompiler = rspack(ssrConfig);
-  const serverCompiler = rspack(apiConfig);
+export default function createSsrDevServer(projectRoot, configs, createServer) {
+  const { client, api, ssr } = configs;
+  const clientCompiler = rspack(client); 
+  const ssrCompiler = rspack(ssr);
+  const serverCompiler = rspack(api);
+  const beastiesProcessor = createBeastiesProcessor(projectRoot);
 
   const createDevRenderer = (onUpdate) => {
-    const createHotReloadingServerRenderer = (config) => {
-      const progressPlugin = new ProgressPlugin((percentage, message, ...args) => {
-
-        console.log(
-          chalk.greenBright(`${(percentage * 100).toFixed(2)}% `) +
-          chalk.blueBright(message) +
-          " " +
-          args.map((arg) => chalk.yellow(arg)).join(" ")
-        );
-      });
+    const createHotReloadingServerRenderer = () => {
+      const progressPlugin = new ProgressPlugin((percentage, message, ...args) => {});
 
-      config.plugins = config.plugins || [];
-      config.plugins.push(progressPlugin);
+      ssr.plugins = ssr.plugins || [];
+      ssr.plugins.push(progressPlugin);
       
       let renderApp = null;
 
-      let setCompilationDone = null;
-      let ssrCompilation = new Promise((resolve) => { setCompilationDone = resolve });
-
       ssrCompiler.watch(
         {
           "info-verbosity": "none",
@@ -75,37 +67,73 @@ export default function createSsrDevServer(projectRoot, { clientConfig, apiConfi
           const { main: { assets: [mainChunkPath] } } = entrypoints;
           const mainModulePath = path.resolve(outputPath, mainChunkPath.name);
           
-          // Dynamic import for ESM compatibility
-          const module = await import(mainModulePath);
-          renderApp = module.render;
-          setCompilationDone();
+          // Dynamic import for ESM compatibility with cache busting
+          // IMPORTANT: Add timestamp to force reimport after recompilation
+          const module = await import(`${mainModulePath}?t=${Date.now()}`);
+          renderApp = module._renderApp;
         }
       );
       
       return async (stuff) => {
-        await ssrCompilation;
+        if (!renderApp) {
+          throw new Error('SSR module not compiled yet');
+        }
         const result = await renderApp(stuff);
         return result;
       };
     };
 
-    const renderApp = createHotReloadingServerRenderer(ssrConfig);
+    const renderApp = createHotReloadingServerRenderer();
     const renderHtml = createHtmlRenderer(onUpdate);
 
     return async (stuff, { stats, outputFileSystem }) => {
-      const { html, meta, state, statusCode } = await renderApp(stuff);
+      const ssrContext = {};
+      
+      const { html, meta, state, statusCode, usedModules, loadedModules } = await renderApp({
+        ...stuff,
+        ssrContext
+      });
+
+      // Используем loadedModules если они есть, иначе usedModules
+      const modulesToLoad = loadedModules || usedModules || [];
 
-      const { head, body } = transformDevStats(stats.toJson(), outputFileSystem);
+      let head = '';
+      let body = '';
+      
+      if (cachedStatsJson) {
+        // Используем кэшированный stats - это в 1000 раз быстрее!
+        const resolver = createAssetResolver(cachedStatsJson);
+        const tags = resolver.collect(modulesToLoad);
+        head = tags.head;
+        body = tags.body;
+      } else if (stats && stats.toJson) {
+        // Fallback если кэш еще не готов (только первый запрос)
+        const statsJson = stats.toJson();
+        
+        const resolver = createAssetResolver(statsJson);
+        const tags = resolver.collect(modulesToLoad);
+        head = tags.head;
+        body = tags.body;
+      } else {
+        // This shouldn't happen
+        console.error('[DEBUG ssr.rspack.dev] No stats available!');
+      }
 
       const initialState = JSON.stringify(state);
 
-      const completeHtml = await renderHtml({
+      let completeHtml = await renderHtml({
         appHtml: html,
         meta,
         head,
         body,
         initialState,
       });
+      
+      // Обрабатываем HTML через Beasties для извлечения критического CSS
+      completeHtml = await beastiesProcessor.processHtml(completeHtml, {
+        url: stuff.url
+      });
+      
       return { html: completeHtml, statusCode };
     };
   };
@@ -121,7 +149,6 @@ export default function createSsrDevServer(projectRoot, { clientConfig, apiConfi
       return;
     }
     
-    console.log(stats.toString(apiConfig.stats));
     
     try {
       // Получаем путь к скомпилированному файлу
@@ -136,19 +163,35 @@ export default function createSsrDevServer(projectRoot, { clientConfig, apiConfi
         throw new Error("Экспорт createServer не найден");
       }
       
-      console.log("Сервер скомпилирован, перезапуск...");
       await startServer();
     } catch (error) {
       console.error("Ошибка при загрузке серверного модуля:", error);
     }
   });
 
+  // Кэшируем stats после компиляции чтобы не вызывать toJson() на каждый запрос  
+  let cachedStatsJson = null;
+  
+  clientCompiler.hooks.done.tap('cache-stats', (stats) => {
+    cachedStatsJson = stats.toJson({
+      assets: true,
+      chunks: true,
+      modules: true,
+      entrypoints: true,
+      chunkModules: true
+    });
+  });
+
   const clientDevMiddleware = devMiddleware(clientCompiler, {
-    publicPath: clientConfig.output.publicPath,
+    publicPath: client.output.publicPath,
     serverSideRender: true,
-    stats: 'minimal', // или 'errors-only'
     stats: {
-      children: true
+      children: true,
+      assets: true,
+      chunks: true,
+      modules: true,
+      entrypoints: true,
+      chunkModules: true
     },
   });
 
@@ -203,7 +246,6 @@ export default function createSsrDevServer(projectRoot, { clientConfig, apiConfi
 
     try {
       await server.listen(port);
-      console.log(`Server started at localhost:${port}\n`);
     } catch (err) {
       console.error(err);
       process.exit(1);

package/src/builder/modes/ssr.vite.dev.js

@@ -38,7 +38,7 @@ export default (function createSsrDevServer(projectRoot, { clientConfig, apiConf
       }
       // Рендерим приложение с помощью SSR
       try {
-        const { html, meta, state, statusCode } = await ssrEntry.render(stuff);
+        const { html, meta, state, statusCode } = await ssrEntry._renderApp(stuff);
         // Получаем скрипты и стили клиентской части для вставки в HTML
         const headTags = [];
         const bodyTags = [];

package/src/builder/rspack/rspack.config.base.js

@@ -81,9 +81,9 @@ export default (projectRoot) => {
         {
           test: /\.(sa|sc|c)ss$/,
           use: [
-            process.env.NODE_ENV !== 'production'
-              ? 'vue-style-loader'
-              : rspack.CssExtractRspackPlugin.loader,  
+            // ВСЕГДА используем CssExtractRspackPlugin для SSR
+            // Это нужно чтобы Beasties мог найти CSS файлы
+            rspack.CssExtractRspackPlugin.loader,  
             {
               loader: 'css-loader',
               options: {
@@ -119,11 +119,16 @@ export default (projectRoot) => {
     plugins: [
       ...(process.env.BUNDLE_ANALYZER ? [new RsdoctorRspackPlugin(), new BundleAnalyzerPlugin()] : []),
       new VueLoaderPlugin(),
-      ...(process.env.NODE_ENV === 'production' ? [new rspack.CssExtractRspackPlugin({
-        filename: '[name].[contenthash].css',
-        chunkFilename: '[id].[contenthash].css',
+      // Используем CssExtractRspackPlugin в обоих режимах
+      new rspack.CssExtractRspackPlugin({
+        filename: process.env.NODE_ENV === 'production' 
+          ? '[name].[contenthash].css' 
+          : '[name].css',
+        chunkFilename: process.env.NODE_ENV === 'production'
+          ? '[id].[contenthash].css'
+          : '[id].css',
         ignoreOrder: true,
-      })]: []),
+      }),
       new CleanWebpackPlugin(),
       new Dotenv({
         path: `.env.${process.env.NODE_ENV}`,

package/src/builder/rspack/rspack.config.spa.client.js

@@ -19,7 +19,7 @@ export default projectRoot => {
       main: path.resolve(projectRoot, 'src/client.js'),
     },
     output: {
-      filename: 'main.js',
+      filename: '[name].[contenthash:8].js',
       path: path.resolve(projectRoot, 'builds/web/spa'),
       clean: true,
     },

package/src/builder/rspack/rspack.config.ssr.client.js

@@ -11,6 +11,7 @@ import baseConfig from './rspack.config.base.js';
 export default (projectRoot) => {
   const isProd = process.env.NODE_ENV === "production";
   const config = {
+    target: 'web',
     mode: !isProd ? "development" : "production",
     devtool: !isProd ? "inline-source-map" : "source-map",
     entry: {
@@ -20,8 +21,8 @@ export default (projectRoot) => {
       rules: [],
     },
     output: {
-      filename: "[name].js",
-      chunkFilename: '[name].js',
+      filename: "[name].[contenthash:8].js",
+      chunkFilename: 'chunks/[name].[contenthash:8].js',
       path: path.resolve(projectRoot, "builds/web/client"),
       publicPath: "/",
       clean: true
@@ -29,7 +30,18 @@ export default (projectRoot) => {
     
     plugins: [
       // ...(!isProd ? [new rspack.HotModuleReplacementPlugin()] : []),
-      new StatsWriterPlugin(),
+      new StatsWriterPlugin({
+        filename: 'stats.json',
+        stats: {
+          all: false,
+          assets: true,
+          chunks: true,
+          modules: true,
+          entrypoints: true,
+          chunkModules: true,
+          assetsByChunkName: true
+        }
+      }),
       new PurgeCSSPlugin({
         paths: glob.sync([
           path.join(projectRoot, 'src/**/*.vue'),
@@ -66,6 +78,11 @@ export default (projectRoot) => {
         ],
       }),
       // PWA PWA PWA PWA PWA
+      // Simple RspackManifestPlugin configuration
+      new RspackManifestPlugin({
+        fileName: 'manifest.json',
+        publicPath: '/'
+      }),
       ...(isProd ? [
         new InjectManifest({
           swSrc: path.resolve(projectRoot, '../public/sw.js'),
@@ -91,7 +108,7 @@ export default (projectRoot) => {
           ]
         }),
         new RspackManifestPlugin({
-          fileName: 'manifest.json',
+          fileName: 'pwa-manifest.json',
           seed: {
             name: process.env.APP_NAME || 'App by Martyrs Framework',
             short_name: process.env.APP_SHORT_NAME || 'App',
@@ -120,15 +137,54 @@ export default (projectRoot) => {
       ] : []),
     ],
     optimization: {
-      usedExports: true,  
+      sideEffects: false,
+      usedExports: true,
+      innerGraph: true,
+      providedExports: true,
+      runtimeChunk: false,
       splitChunks: {
-        chunks: "async",
-        minSize: 0,
-        // minRemainingSize: 0,
+        chunks: "all",
+        minSize: 10000,
         minChunks: 1,
         maxAsyncRequests: 30,
-        maxInitialRequests: 30,
-        // enforceSizeThreshold: 50000,
+        maxInitialRequests: 5,
+        cacheGroups: {
+          // Vendor libraries (except Vue)
+          vendor: {
+            test: /[\\/]node_modules[\\/](?!(vue|vue-router|vuex|@vue|@unhead|vue-i18n)[\\/])/,
+            name: 'vendor',
+            priority: 10,
+            chunks: 'initial',
+            enforce: true
+          },
+          // Vue core framework only
+          vue: {
+            test: /[\\/]node_modules[\\/](vue|vue-router|vuex|@vue|@unhead|vue-i18n)[\\/]/,
+            name: 'vue',
+            priority: 20,
+            chunks: 'initial',
+            reuseExistingChunk: true,
+            enforce: true
+          },
+          // Martyrs modules - only for async imports
+          modules: {
+            test: /[\\/]martyrs[\\/]src[\\/]modules[\\/]/,
+            chunks: 'async',
+            name: false,
+            priority: 5,
+            enforce: true
+          },
+          // Combine all CSS into single file
+          styles: {
+            name: 'styles',
+            type: 'css/mini-extract',
+            chunks: 'all',
+            enforce: true,
+            minChunks: 1,
+            reuseExistingChunk: true,
+            priority: 100
+          }
+        }
       },
       minimize: isProd,
       minimizer: [
@@ -136,6 +192,14 @@ export default (projectRoot) => {
         new rspack.LightningCssMinimizerRspackPlugin()
       ],
     },
+    stats: {
+      assets: true,
+      chunks: true,
+      modules: true,
+      ids: true,
+      entrypoints: true,
+      chunkModules: true
+    },
   };
   return merge(baseConfig(projectRoot), config);
 };

package/src/builder/rspack/rspack.config.ssr.server.js

@@ -10,7 +10,7 @@ export default (projectRoot) => {
   const isProd = process.env.NODE_ENV === "production";
 
   const ssrConfig = {
-    target: ["node", "es2022"], // Явно указываем современную версию Node.js с поддержкой ESM
+    target: "node", // Для совместимости с VueSsrAssetsServerPlugin
     mode: !isProd ? "development" : "production",
     entry: {
       main: path.resolve(projectRoot, "src/client.js"),
@@ -34,10 +34,7 @@ export default (projectRoot) => {
     },
     module: {
       rules: [
-        {
-          test: /\.css$/,
-          use: "null-loader",
-        },
+        // CSS обрабатывается base конфигом, не нужен null-loader
       ],
     },
     optimization: {

package/src/builder/ssr/asset-resolver.js

@@ -0,0 +1,148 @@
+export function createAssetResolver(statsJson) {
+  
+  return {
+    collect(usedModules = [], options = {}) {
+      const initialFiles = new Set();
+      const moduleFiles = new Set();
+      
+      // Add initial chunks from entrypoint (support both 'app' and 'main')
+      const entrypointName = statsJson?.entrypoints?.app ? 'app' : 'main';
+      
+      // Collect initial chunks - these will be executed immediately
+      if (statsJson?.entrypoints?.[entrypointName]?.assets) {
+        for (const asset of statsJson.entrypoints[entrypointName].assets) {
+          const filename = typeof asset === 'string' ? asset : asset.name;
+          if (filename) initialFiles.add(filename);
+        }
+      }
+      
+      // Collect module chunks - these will be preloaded but not executed
+      // Try to find chunks via assetsByChunkName first (Rspack/Webpack v5)
+      if (usedModules.length > 0 && statsJson?.assetsByChunkName) {
+        
+        for (const moduleName of usedModules) {
+          // Check with module- prefix (how modules are named in chunks)
+          const chunkName = `module-${moduleName}`;
+          
+          if (statsJson.assetsByChunkName[chunkName]) {
+            const assets = statsJson.assetsByChunkName[chunkName];
+            
+            // assetsByChunkName can be either string or array
+            const assetList = Array.isArray(assets) ? assets : [assets];
+            for (const asset of assetList) {
+              moduleFiles.add(asset);
+            }
+          }
+          
+          // Also check without prefix (for other types of chunks)
+          if (statsJson.assetsByChunkName[moduleName]) {
+            const assets = statsJson.assetsByChunkName[moduleName];
+            
+            const assetList = Array.isArray(assets) ? assets : [assets];
+            for (const asset of assetList) {
+              moduleFiles.add(asset);
+            }
+          }
+        }
+      }
+      // Fallback to old method for compatibility
+      else if (usedModules.length > 0 && statsJson?.modules && statsJson?.chunks) {
+        // Collect chunks for used modules
+        const neededChunks = new Set();
+        
+        for (const module of statsJson.modules) {
+          const moduleId = module.identifier || module.id || module.name;
+          if (!moduleId) continue;
+          
+          // Check if module is used
+          const isUsed = usedModules.some(used => 
+            moduleId.includes(used) || used.includes(moduleId)
+          );
+          
+          if (isUsed && module.chunks) {
+            for (const chunkId of module.chunks) {
+              neededChunks.add(chunkId);
+            }
+          }
+        }
+        
+        // Add files from needed chunks
+        for (const chunk of statsJson.chunks) {
+          if (neededChunks.has(chunk.id)) {
+            for (const file of chunk.files || []) {
+              moduleFiles.add(file);
+            }
+          }
+        }
+      }
+      
+      // Split files into categories
+      const initialJs = [];
+      const moduleJs = [];
+      const css = [];
+      
+      // Process initial files - these go to script tags
+      for (const file of initialFiles) {
+        if (file.endsWith('.js')) initialJs.push(file);
+        if (file.endsWith('.css')) css.push(file);
+      }
+      
+      // Sort initial JS files by priority: runtime -> vue -> vendor -> main -> others
+      initialJs.sort((a, b) => {
+        const getPriority = (file) => {
+          if (file.includes('runtime')) return 1;
+          if (file.includes('vue')) return 2;
+          if (file.includes('vendor')) return 3;
+          if (file.includes('main')) return 4;
+          return 5;
+        };
+        return getPriority(a) - getPriority(b);
+      });
+      
+      // Process module files - these go to modulepreload (excluding already loaded initial files)
+      for (const file of moduleFiles) {
+        if (file.endsWith('.js') && !initialFiles.has(file)) {
+          moduleJs.push(file);
+        }
+        // CSS from modules should also be added if not already in initial
+        if (file.endsWith('.css') && !initialFiles.has(file)) {
+          css.push(file);
+        }
+      }
+      
+      const publicPath = '/';
+      
+      // Если включен режим критического CSS, все стили будут обработаны Beasties
+      if (options.criticalCss) {
+        const result = {
+          head: [
+            // Modulepreload для ВСЕХ initial chunks для параллельной загрузки
+            ...initialJs.map(src => `<link rel="modulepreload" href="${publicPath}${src}">`),
+            // Module chunks as modulepreload
+            ...moduleJs.map(src => `<link rel="modulepreload" href="${publicPath}${src}">`),
+            // CSS файлы будут обработаны Beasties, поэтому добавляем их как обычные link теги
+            ...css.map(href => `<link rel="stylesheet" href="${publicPath}${href}">`)
+          ].join('\n'),
+          // Script tags в body для выполнения после загрузки
+          body: initialJs.map(src => `<script type="module" src="${publicPath}${src}"></script>`).join('\n')
+        };
+        return result;
+      }
+      
+      // Стандартное поведение без Beasties
+      const result = {
+        head: [
+          // Modulepreload для ВСЕХ initial chunks для параллельной загрузки
+          ...initialJs.map(src => `<link rel="modulepreload" href="${publicPath}${src}">`),
+          // Module chunks as modulepreload
+          ...moduleJs.map(src => `<link rel="modulepreload" href="${publicPath}${src}">`),
+          ...css.map(href => `<link rel="stylesheet" href="${publicPath}${href}">`)
+        ].join('\n'),
+        // Script tags в body для выполнения после загрузки
+        body: initialJs.map(src => `<script type="module" src="${publicPath}${src}"></script>`).join('\n')
+      };
+      
+      return result;
+    }
+  };
+}

package/src/builder/ssr/beasties-processor.js

@@ -0,0 +1,107 @@
+import Beasties from 'beasties';
+import path from 'path';
+
+export function createBeastiesProcessor(projectRoot, options = {}) {
+  // Путь к директории с CSS файлами
+  const cssPath = path.join(projectRoot, 'builds/web/client');
+  
+  console.log('[Beasties] Initializing with CSS path:', cssPath);
+  
+  const beasties = new Beasties({
+    // ВАЖНО: указываем путь к директории с CSS файлами
+    path: cssPath,
+    
+    // Публичный путь для резолва URL в link тегах
+    publicPath: '/',
+    
+    // Обрабатывать внешние CSS файлы
+    external: true,
+    
+    // Встроить ВСЕ используемые стили без ограничений
+    inlineThreshold: 0,
+    
+    // Lazy-load остальные стили через swap
+    preload: 'swap',
+    
+    // НЕ УДАЛЯТЬ встроенные правила из внешних файлов (иначе ломается для последующих запросов)
+    pruneSource: false,
+    
+    // Добавить noscript fallback для браузеров без JS
+    noscriptFallback: true,
+    
+    // Минифицировать встроенные стили
+    compress: true,
+    
+    // Встраивать критические keyframes
+    keyframes: 'critical',
+    
+    // Встраивать используемые шрифты
+    fonts: true,
+    
+    // Уровень логирования для отладки
+    logLevel: process.env.NODE_ENV === 'production' ? 'warn' : 'info',
+    
+    // Дополнительные опции пользователя
+    ...options
+  });
+
+  return {
+    async processHtml(html, { url } = {}) {
+      try {
+        console.log('[Beasties] Processing HTML for URL:', url);
+        
+        // Логируем наличие CSS link тегов
+        const cssLinks = html.match(/<link[^>]*rel="stylesheet"[^>]*>/g);
+        console.log('[Beasties] Found CSS links:', cssLinks?.length || 0);
+        
+        // Обрабатываем HTML через Beasties
+        const processedHtml = await beasties.process(html);
+        
+        // Проверяем, что critical CSS был добавлен
+        const hasInlineStyles = processedHtml.includes('<style>');
+        const hasSwapLinks = processedHtml.includes('onload="this.media=\'all\'');
+        console.log('[Beasties] Critical CSS inlined:', hasInlineStyles);
+        console.log('[Beasties] CSS lazy-loading enabled:', hasSwapLinks);
+        
+        // Логируем размер встроенного CSS
+        const inlineStyleMatch = processedHtml.match(/<style[^>]*>([\s\S]*?)<\/style>/);
+        if (inlineStyleMatch) {
+          const inlineSize = inlineStyleMatch[1].length;
+          console.log('[Beasties] Inline CSS size:', Math.round(inlineSize / 1024), 'KB');
+        }
+        
+        // Дополнительная оптимизация: удаляем дублирующиеся стили
+        const optimizedHtml = removeDuplicateStyles(processedHtml);
+        
+        return optimizedHtml;
+      } catch (error) {
+        console.error('[Beasties] Processing error:', error);
+        console.error('[Beasties] Error stack:', error.stack);
+        // В случае ошибки возвращаем оригинальный HTML
+        return html;
+      }
+    },
+    
+  };
+}
+
+// Утилита для удаления дублирующихся стилей
+function removeDuplicateStyles(html) {
+  // Находим все inline стили
+  const styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+  const styles = new Set();
+  
+  return html.replace(styleRegex, (match, content) => {
+    const trimmedContent = content.trim();
+    
+    // Если стиль уже встречался, удаляем дубликат
+    if (styles.has(trimmedContent)) {
+      return '';
+    }
+    
+    styles.add(trimmedContent);
+    return match;
+  });
+}
+
+// Дефолтный экспорт удален - теперь требуется projectRoot