@ozdao/martyrs 0.2.423

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

@@ -0,0 +1,56 @@
+const path = require("path");
+const { rspack } = require('@rspack/core');
+const nodeExternals = require('webpack-node-externals');
+const { merge } = require("webpack-merge");
+const { RspackManifestPlugin } = require('rspack-manifest-plugin');
+
+const getBaseConfig = require("./rspack.config.base.js");
+
+module.exports = (projectRoot) => {
+  const isProd = process.env.NODE_ENV === "production";
+
+  const ssrConfig = {
+    target: "node",
+    mode: !isProd ? "development" : "production",
+    entry: {
+      main: path.resolve(projectRoot, "src/client.js"),
+    },
+    output: {
+      filename: "main.js",
+      path: path.resolve(projectRoot, "builds/web/server"),
+      libraryTarget: "commonjs2",
+      clean: true
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: "null-loader",
+        },
+      ],
+    },
+    optimization: {
+      minimize: false,
+    },
+    externals: [
+      nodeExternals({
+        allowlist: [
+          /^@ozdao*/,
+          /\.(css|sass|scss)$/,
+          /\.(vue)$/,
+          /\.(html)$/,
+        ],
+      })
+    ],
+    plugins: [
+      new rspack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+      ...(isProd ? [new RspackManifestPlugin({
+         fileName: 'manifest.json'
+      })] : []),
+    ],
+  };
+
+  return merge(getBaseConfig(projectRoot), ssrConfig);
+};

package/src/builder/ssr/ssr-render-html.js

@@ -0,0 +1,39 @@
+const Mustache = require("mustache");
+const template = require("../templates/page.js");
+
+const renderHtml = async (stuff) => {
+  const data = {
+    ...stuff,
+    googleTagId: process.env.GOOGLE_TAG_ID,
+    facebookPixelId: process.env.FACEBOOK_PIXEL_ID,
+    facebookDomainVerification: process.env.FACEBOOK_DOMAIN_VERIFICATION,
+    googleMapApiKey: process.env.GOOGLE_MAPS_API_KEY
+  };
+  
+  return Mustache.render(template, data);
+};
+
+const createHtmlRenderer = (onTemplateUpdate) => {
+  setInterval(() => {
+    delete require.cache[template];
+    if (onTemplateUpdate) {
+      onTemplateUpdate();
+    }
+  }, 1000);
+
+  return async (stuff) => {
+    const data = {
+      ...stuff,
+      googleTagId: process.env.GOOGLE_TAG_ID,
+      facebookPixelId: process.env.FACEBOOK_PIXEL_ID,
+      facebookDomainVerification: process.env.FACEBOOK_DOMAIN_VERIFICATION,
+      googleMapApiKey: process.env.GOOGLE_MAPS_API_KEY
+    };
+    return Mustache.render(template, data);
+  };
+};
+
+module.exports = {
+  createHtmlRenderer,
+  renderHtml
+};

package/src/builder/ssr/ssr-transform-webpack-stats.js

@@ -0,0 +1,54 @@
+const normalizeAssets = (assets) => {
+  if (Array.isArray(assets)) return assets;
+  if (typeof assets === "object") return Object.values(assets);
+  return [assets];
+};
+
+const transformDevStats = (stats, outputFileSystem) => {
+  const {
+    assetsByChunkName: { main },
+    outputPath,
+    publicPath,
+  } = stats;
+
+  const head = `
+      <style>
+      ${normalizeAssets(main)
+        .filter((path) => path.endsWith(".css"))
+        .map((path) =>
+          outputFileSystem.readFileSync(path.join(outputPath, path))
+        )
+        .join("\n")}
+      </style>
+    `;
+
+  const body = normalizeAssets(main)
+    .filter((path) => path.endsWith(".js"))
+    .map((path) => `<script src="${publicPath}${path}"></script>`)
+    .join("\n");
+
+  return { head, body };
+};
+
+const transformProdStats = ({ stats, publicPath }) => {
+  const {
+    assetsByChunkName: { main },
+  } = stats;
+
+  const head = normalizeAssets(main)
+    .filter((path) => path.endsWith(".css"))
+    .map((path) => `<link rel="stylesheet" href="${publicPath}${path}">`)
+    .join("\n");
+
+  const body = normalizeAssets(main)
+    .filter((path) => path.endsWith(".js"))
+    .map((path) => `<script src="${publicPath}${path}"></script>`)
+    .join("\n");
+
+  return { head, body };
+};
+
+module.exports = {
+  transformDevStats,
+  transformProdStats,
+};

package/src/builder/ssr/utils.js

@@ -0,0 +1,54 @@
+// @ts-check
+const crypto = require('crypto');
+const Module = require('module');
+const path = require('path');
+
+/**
+ * Normalizes assets from webpack stats
+ * @param {Array|string} assets - Assets to normalize
+ * @returns {Array} - Normalized array of assets
+ */
+function normalizeAssets(assets) {
+  if (typeof assets === 'string') {
+    return [assets];
+  }
+
+  if (Array.isArray(assets)) {
+    return assets;
+  }
+
+  const object = assets;
+  return Object.keys(object).reduce((result, key) => {
+    return result.concat(object[key]);
+  }, []);
+}
+
+/**
+ * Creates a hash from a string
+ * @param {string} str - String to hash
+ * @returns {string} - Resulting hash
+ */
+function hash(str) {
+  return crypto.createHash('md5').update(str).digest('hex');
+}
+
+/**
+ * Requires a module from a string
+ * @param {string} src - Module source code
+ * @param {string} filename - Module filename
+ * @returns {any} - Exported module
+ */
+function requireFromString(src, filename = '') {
+  const m = new Module(filename);
+  m.filename = filename;
+  m.paths = Module._nodeModulePaths(path.dirname(filename));
+  m._compile(src, filename);
+  
+  return m.exports;
+}
+
+module.exports = {
+  normalizeAssets,
+  requireFromString,
+  hash
+};

package/src/builder/templates/page.js

@@ -0,0 +1,67 @@
+module.exports = `
+  <html {{{ meta.htmlAttrs }}}>
+    <head {{{ meta.headAttrs }}}>
+      {{{ meta.headTags }}}
+      <meta charset="UTF-8">
+      
+      <!-- Facebook Domain Verification -->
+      {{#facebookDomainVerification}}
+      <meta name="facebook-domain-verification" content="{{facebookDomainVerification}}">
+      {{/facebookDomainVerification}}
+      
+      <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
+      <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
+      <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
+      <link rel="manifest" href="/favicon/site.webmanifest">
+      <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5">
+      <meta name="msapplication-TileColor" content="#000000">
+      <meta name="theme-color" content="#ffffff">
+      <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+      <!-- Facebook Pixel Code -->
+      {{#facebookPixelId}}
+      <script>
+      !function(f,b,e,v,n,t,s)
+      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+      n.queue=[];t=b.createElement(e);t.async=!0;
+      t.src=v;s=b.getElementsByTagName(e)[0];
+      s.parentNode.insertBefore(t,s)}(window, document,'script',
+      'https://connect.facebook.net/en_US/fbevents.js');
+      fbq('init', '{{facebookPixelId}}');
+      fbq('track', 'PageView');
+      </script>
+      <noscript><img height="1" width="1" style="display:none"
+      src="https://www.facebook.com/tr?id={{facebookPixelId}}&ev=PageView&noscript=1"
+      /></noscript>
+      {{/facebookPixelId}}
+      
+      {{{ head }}}
+      
+      <!-- Google Tag (gtag.js) -->
+      {{#googleTagId}}
+      <script async src="https://www.googletagmanager.com/gtag/js?id={{googleTagId}}"></script>
+      <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', '{{googleTagId}}');
+      </script>
+      {{/googleTagId}}
+    </head>
+    
+    <body {{{ meta.bodyAttrs }}}>
+      <div id="app">{{{ appHtml }}}</div>
+      
+      <script type="application/json" data-user-state>
+         {{{ userState }}}
+      </script>
+
+      <script type="application/json" data-state>
+        {{{ initialState }}}
+      </script>
+      
+      {{{ meta.body }}} {{{ body }}}
+    </body>
+  </html>
+`;

package/src/builder/templates/screen.js

@@ -0,0 +1,45 @@
+module.exports = `
+  <!-- <!DOCTYPE html> -->
+    <html lang="en">
+    <head {{{ meta.headAttrs }}}>
+      {{{ meta.headTags }}}
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+      <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
+      <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
+      <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
+      <link rel="manifest" href="/favicon/site.webmanifest">
+      <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5">
+      <meta name="msapplication-TileColor" content="#000000">
+      <meta name="theme-color" content="#ffffff">
+      <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+      {{{ head }}}
+      <!-- Sign in with Apple -->
+      <!-- <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script> -->
+    </head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{googleTagId}}"></script>
+    
+    <body {{{ meta.bodyAttrs }}}>
+      <div id="app">{{{ appHtml }}}</div>
+      
+      <script type="application/json" data-user-state>
+         {{{ userState }}}
+      </script>
+
+      <script type="application/json" data-state>
+        {{{ initialState }}}
+      </script>
+
+      <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', '{{googleTagId}}');
+      </script>
+      
+      {{{ meta.body }}} {{{ body }}}
+    </body>
+  </html>
+`;

package/src/builder/utils/hot-reload.js

@@ -0,0 +1,7 @@
+const webpackHotMiddlewareClient = require("webpack-hot-middleware/client?noInfo=true&reload=true");
+
+webpackHotMiddlewareClient.subscribe(({ reload }) => {
+  if (reload) {
+    window.location.reload();
+  }
+});

package/src/builder/vite/index.js

@@ -0,0 +1,13 @@
+const baseConfig = require('./vite.config.base');
+const clientConfig = require('./vite.config.client');
+const serverConfig = require('./vite.config.server');
+const spaConfig = require('./vite.config.spa');
+const ssrConfig = require('./vite.config.ssr');
+
+module.exports = {
+  baseConfig,
+  clientConfig,
+  serverConfig,
+  spaConfig,
+  ssrConfig,
+};

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

@@ -0,0 +1,121 @@
+const path = require('path');
+const vue = require('@vitejs/plugin-vue');
+const dotenv = require('dotenv');
+const fs = require('fs');
+
+// Функция для загрузки переменных окружения
+function loadEnv(mode) {
+  const envFile = `.env.${mode}`;
+  if (fs.existsSync(envFile)) {
+    const envConfig = dotenv.parse(fs.readFileSync(envFile));
+    for (const [key, value] of Object.entries(envConfig)) {
+      process.env[key] = value;
+    }
+  }
+}
+
+module.exports = (projectRoot) => {
+  // Загружаем переменные окружения
+  loadEnv(process.env.NODE_ENV || 'development');
+
+  return {
+    root: projectRoot,
+    
+    resolve: {
+      alias: {
+        '@': path.resolve(projectRoot, 'src'),
+        '@martyrs': path.resolve(projectRoot, 'martyrs'),
+        'vue': path.resolve(projectRoot, 'node_modules/vue'),
+        'vue-router': path.resolve(projectRoot, 'node_modules/vue-router'),
+        'vue-i18n': path.resolve(projectRoot, 'node_modules/vue-i18n'),
+      }
+    },
+    
+    plugins: [
+      vue({
+        // Опции для Vue 3
+        // Эквивалент experimentalInlineMatchResource
+        template: {
+          compilerOptions: {
+            // Настройки компилятора Vue
+          }
+        }
+      }),
+      // Дополнительные плагины для анализа бандла по условию
+      ...(process.env.BUNDLE_ANALYZER ? [
+        {
+          name: 'bundle-analyzer',
+          configResolved(config) {
+            // Динамически импортируем rollup-plugin-visualizer только когда нужно
+            const { visualizer } = require('rollup-plugin-visualizer');
+            config.plugins.push(
+              visualizer({
+                open: true,
+                filename: 'stats.html',
+                gzipSize: true,
+                brotliSize: true,
+              })
+            );
+          }
+        }
+      ] : [])
+    ],
+    
+    // Настройки для CSS
+    css: {
+      preprocessorOptions: {
+        scss: {
+          sourceMap: true,
+        }
+      },
+      // Экстракция CSS в продакшн
+      // В Vite это делается автоматически в production режиме
+    },
+    
+    // Настройки сборки
+    build: {
+      outDir: 'dist',
+      emptyOutDir: true, // Эквивалент CleanWebpackPlugin
+      sourcemap: true,
+      rollupOptions: {
+        output: {
+          // Настройки для получения хэша в имени файла
+          entryFileNames: 'assets/[name].[hash].js',
+          chunkFileNames: 'assets/[name].[hash].js',
+          assetFileNames: 'assets/[name].[hash].[ext]',
+        }
+      }
+    },
+    
+    // Определение глобальных переменных для Vue
+    define: {
+      __VUE_I18N_LEGACY_API__: false,
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS_: false,
+      __VUE_PROD_DEVTOOLS__: true,
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true,
+      __VUE_I18N_FULL_INSTALL__: true,
+      __INTLIFY_PROD_DEVTOOLS__: false,
+      __MOBILE_APP__: process.env.MODE === "SPA" ? true : false,
+    },
+    
+    // Настройки лога
+    logLevel: 'info', // 'info' | 'warn' | 'error' | 'silent'
+    
+    // Настройка для assets
+    assetsInclude: ['**/*.ico', '**/*.gif', '**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.mp4', '**/*.webp', '**/*.webm', '**/*.svg', '**/*.woff', '**/*.woff2', '**/*.eot', '**/*.ttf', '**/*.otf'],
+    
+    // Опция для URL в CSS, аналогичная той что была в Rspack
+    experimental: {
+      // Vite по умолчанию обрабатывает asset URLs в CSS
+      // Если нужно отключить обработку URL для определенных файлов, 
+      // это можно сделать через свой плагин
+      renderBuiltUrl(filename, { hostType }) {
+        if (filename.includes('/fonts/')) {
+          return { relative: true }; // Не обрабатывать URL для фонтов
+        }
+        return { relative: true }; // Для остальных использовать относительные пути
+      }
+    }
+  };
+};

package/src/builder/vite/vite.config.client.js

@@ -0,0 +1,186 @@
+const path = require("path");
+const { createServer } = require('vite');
+const { merge } = require("lodash");
+const { generateSW } = require('workbox-build');
+const fs = require('fs');
+const baseConfig = require('./vite.config.base');
+
+module.exports = (projectRoot) => {
+  const isProd = process.env.NODE_ENV === "production";
+  
+  // Базовая конфигурация для клиентской части
+  const clientConfig = {
+    // Основная точка входа
+    build: {
+      outDir: path.resolve(projectRoot, "builds/web/client"),
+      emptyOutDir: true, // эквивалент clean: true в Webpack
+      sourcemap: true,
+      rollupOptions: {
+        input: {
+          main: path.resolve(projectRoot, "src/client.js"),
+        },
+        output: {
+          // Настройки форматирования имен файлов
+          entryFileNames: '[name].[hash].js',
+          chunkFileNames: '[name].[hash].js',
+          assetFileNames: '[name].[hash].[ext]',
+          // Настройки разделения кода
+          manualChunks(id) {
+            if (id.includes('node_modules')) {
+              return 'vendors';
+            }
+          }
+        }
+      },
+      // Оптимизация в production
+      minify: isProd ? 'terser' : false,
+      terserOptions: isProd ? {
+        compress: {
+          drop_console: true,
+          drop_debugger: true,
+        }
+      } : undefined,
+      // Настройки CSS минификации
+      cssMinify: isProd ? 'cssnano' : false,
+      cssCodeSplit: true,
+    },
+    
+    // В режиме разработки используем HMR
+    server: {
+      hmr: !isProd,
+    },
+    
+    // Добавляем пользовательские плагины
+    plugins: [
+      // Плагин для PurgeCSS
+      {
+        name: 'vite-plugin-purge-css',
+        apply: 'build', // Применяем только при сборке
+        enforce: 'post', // После всех других плагинов
+        transformIndexHtml: {
+          enforce: 'post',
+          transform(html, { bundle }) {
+            if (!isProd) return html;
+            
+            // Здесь можно реализовать PurgeCSS для HTML
+            return html; 
+          }
+        },
+        async generateBundle(options, bundle) {
+          if (!isProd) return;
+          
+          // Здесь можно реализовать PurgeCSS для CSS файлов
+          // Это более сложная задача, которая требует анализа бандла
+          const purgecss = require('purgecss');
+          const cssFiles = Object.keys(bundle).filter(key => key.endsWith('.css'));
+          
+          for (const cssFile of cssFiles) {
+            const content = bundle[cssFile].source;
+            const purged = await new purgecss.PurgeCSS().purge({
+              content: [
+                path.join(projectRoot, 'src/**/*.vue'),
+                path.join(projectRoot, 'martyrs/src/**/*.vue'),
+                path.join(projectRoot, '/node_modules/@ozdao/martyrs/src/**/*.vue'),
+                path.join(projectRoot, '/node_modules/@vuepic/vue-datepicker/**/*.js')
+              ],
+              css: [{ raw: content }],
+              safelist: { 
+                standard: ["safelisted", /^html/, /^:root/],
+                deep: [/^safelisted-deep-/, /^html/, /^:root/],
+                greedy: [ /data-v-.*/ ] 
+              },
+              extractors: [
+                {
+                  extractor: (content) => {
+                    // fix for escaped tailwind prefixes (sm:, lg:, etc)
+                    return content.match(/[A-Za-z0-9-_:\/]+/g) || []
+                  },
+                  extensions: ['vue'],
+                },
+              ],
+            });
+            
+            if (purged.length > 0 && purged[0].css) {
+              bundle[cssFile].source = purged[0].css;
+            }
+          }
+        }
+      },
+      
+      // Workbox плагин для PWA
+      {
+        name: 'vite-plugin-workbox',
+        apply: 'build',
+        closeBundle: async () => {
+          if (!isProd) {
+            // Для режима разработки можно создать минимальный сервис-воркер
+            const devSwContent = `
+              self.addEventListener('install', () => self.skipWaiting());
+              self.addEventListener('activate', () => self.clients.claim());
+            `;
+            fs.writeFileSync(
+              path.join(path.resolve(projectRoot, "builds/web/client"), 'sw.js'), 
+              devSwContent
+            );
+            return;
+          }
+          
+          // Для продакшена используем полноценный Workbox
+          const { swDest, count, size, warnings } = await generateSW({
+            globDirectory: path.resolve(projectRoot, "builds/web/client"),
+            swDest: path.join(path.resolve(projectRoot, "builds/web/client"), 'sw.js'),
+            clientsClaim: true,
+            skipWaiting: true,
+          });
+          
+          if (warnings.length > 0) {
+            console.warn('Workbox warnings: ', warnings);
+          }
+          
+          console.log(`Generated service worker at ${swDest}, which will precache ${count} files (${size} bytes)`);
+        }
+      },
+      
+      // Плагин для записи статистики сборки
+      {
+        name: 'vite-plugin-stats-writer',
+        apply: 'build',
+        closeBundle: async (options, bundle) => {
+          // Создаем статистику сборки
+          const stats = {
+            entrypoints: {},
+            assetsByChunkName: {},
+            assets: []
+          };
+          
+          // Заполняем статистику на основе бандла
+          for (const [fileName, asset] of Object.entries(bundle)) {
+            if (fileName.endsWith('.js')) {
+              stats.assets.push({
+                name: fileName,
+                size: asset.code ? asset.code.length : 0,
+                emitted: true
+              });
+              
+              if (fileName.includes('main')) {
+                stats.entrypoints.main = { assets: [fileName] };
+                stats.assetsByChunkName.main = [fileName];
+              } else if (fileName.includes('vendors')) {
+                stats.assetsByChunkName.vendors = [fileName];
+              }
+            }
+          }
+          
+          // Записываем статистику в файл
+          fs.writeFileSync(
+            path.join(path.resolve(projectRoot, "builds/web/client"), 'stats.json'),
+            JSON.stringify(stats, null, 2)
+          );
+        }
+      }
+    ]
+  };
+  
+  // Объединяем базовый конфиг с клиентским
+  return merge({}, baseConfig(projectRoot), clientConfig);
+};