@ozdao/prometheus-framework 0.2.155 → 0.2.157

package/src/builder/modes/ssr.prod.js

@@ -0,0 +1,76 @@
+const path = require("path");
+const express = require("express");
+
+const { transformProdStats } = require('../ssr/ssr-transform-webpack-stats.js');
+
+const { renderHtml } = require('../ssr/ssr-render-html.js');
+
+module.exports = 
+function createSsrProdServer(projectRoot, {clientConfig,serverConfig, createServerPath}) {
+
+  const clientStats = require(path.join(projectRoot, "builds/web/client/stats.json"));
+  const serverManifest = require(path.join(projectRoot, "builds/web/server/manifest.json"));
+  
+  const { createServer } = require(path.resolve(projectRoot, createServerPath));
+
+  const startServer = async () => {
+    const { app, server, env } = await createServer();
+
+    app.use(
+      clientConfig.output.publicPath, 
+      express.static(path.resolve(projectRoot, "builds/web/client"), {
+        maxAge: '1d' // Кэширование на 1 день
+      })
+    );
+
+    const { render } = require(path.join(
+      serverConfig.output.path,
+      serverManifest["main.js"]
+    ));
+
+    const { head, body } = transformProdStats({
+      stats: clientStats,
+      publicPath: clientConfig.output.publicPath,
+    });
+
+    app.use("/*", async (req, res) => {
+      const { html, meta, state, statusCode } = await render({ 
+        url: req.originalUrl, 
+        cookies: req.cookies, 
+        languages: req.acceptsLanguages() 
+      });
+
+      if (state.NotFound) {
+        res.status(404);
+      }
+
+      const userState = JSON.stringify(state.user);
+      const completeHtml = await renderHtml({
+        appHtml: html,
+        meta, 
+        head,
+        body,
+        userState
+      });
+
+      res.status(statusCode).header("Content-Type", "text/html; charset=utf-8").send(completeHtml);
+    });
+
+    return server;
+  };
+
+  const port = process.env.PORT || 8080;
+
+  const start = async () => {
+    const server = await startServer();
+    
+    try {
+      server.listen(port, () => console.log(`Server running on port ${port}`));
+    } catch (err) {
+      console.error(err);
+      process.exit(1);
+    }
+  };
+
+  return start;
+};

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

@@ -0,0 +1,57 @@
+const path = require("path");
+const Mustache = require("mustache");
+const chokidar = require("chokidar");
+const { promises: { readFile } } = require("fs");
+
+const templatePath = path.resolve(__dirname,"../templates/page.html");
+
+let template;
+
+const renderHtml = async (stuff) => {
+  if (!template) {
+    const buffer = await readFile(templatePath);
+    template = buffer.toString();
+  }
+
+  const data = {
+    ...stuff,
+    googleTagId: process.env.GOOGLE_TAG_ID,
+    googleMapApiKey: process.env.GOOGLE_MAPS_API_KEY
+  };
+
+  return Mustache.render(template, data);
+};
+
+const createHtmlRenderer = (onTemplateUpdate) => {
+  let shouldReload = true;
+  let currentTemplate;
+
+  chokidar.watch(templatePath).on("change", () => {
+    shouldReload = true;
+    onTemplateUpdate();
+  });
+
+  const loadTemplate = async () => {
+    if (!shouldReload) return;
+    const buffer = await readFile(templatePath);
+    currentTemplate = buffer.toString();
+    shouldReload = false;
+  };
+
+  return async (stuff) => {
+    await loadTemplate();
+
+    const data = {
+      ...stuff,
+      googleTagId: process.env.GOOGLE_TAG_ID,
+      googleMapApiKey: process.env.GOOGLE_MAPS_API_KEY
+    };
+
+    return Mustache.render(currentTemplate, 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/templates/page.html

@@ -0,0 +1,37 @@
+<!-- <!DOCTYPE html> -->
+<html {{{ meta.htmlAttrs }}}>
+  <head {{{ meta.headAttrs }}}>
+    {{{ meta.head }}}
+    <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="width=device-width, initial-scale=1, maximum-scale=1, 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>
+      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/templates/screen.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <title>Weeder</title>
+    <!-- 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>
+    <!-- Google tag (gtag.js) -->
+   <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>
+    <!-- Google Map Api -->
+    <script src="https://maps.googleapis.com/maps/api/js?key=<%= googleMapApiKey %>&amp;libraries=places&language=en" async=""></script>
+    <link rel="stylesheet" type="text/css" href="/main.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    
+    <script src="/main.js"></script>
+  </body>
+</html>

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

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

package/src/builder/webpack/index.js

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

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

@@ -0,0 +1,127 @@
+const path = require("path");
+const webpack = require("webpack");
+const { VueLoaderPlugin } = require("vue-loader");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+const Dotenv = require('dotenv-webpack');
+
+module.exports = (projectRoot) => {
+  return {
+    resolve: {
+      alias: {
+        '@': path.resolve(projectRoot, 'src'),
+        '@pf': path.resolve(projectRoot, 'prometheus-framework'),
+        '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'),
+      },
+      fallback: { 
+        "path": false 
+      }
+    },
+    module: {
+      rules: [
+        {
+          test: /\.m?js$/,
+          exclude: /node_modules\/(?!(vue-meta)\/).*/,
+          use: {
+            loader: "babel-loader",
+            options: {
+              configFile: path.resolve(projectRoot, 'babel.config.js')
+            },
+          },
+        },
+        {
+          test: /\.vue$/,
+          use: [
+            {
+              loader: require.resolve('vue-loader'),
+            },
+          ],
+        },
+        {
+          test: /\.(sa|sc|c)ss$/,
+          use: [
+            process.env.NODE_ENV !== 'production'
+              ? 'vue-style-loader'
+              : MiniCssExtractPlugin.loader,  
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMap: true,
+                url: {
+                  filter: (url, resourcePath) => {
+                    if (url.indexOf("/fonts/")==0) {
+                      return false;
+                    }
+                    return true;
+                  },
+                }
+              }
+            },
+            {
+              loader: 'sass-loader',
+              options: {
+                sourceMap: true, 
+              }
+            },
+          ],
+        },
+        {
+          test: /\.(?:ico|gif|png|jpg|jpeg|mp4|webp|webm|svg|woff2?|eot|ttf|otf)$/i,
+          use:  {
+            loader: 'url-loader',
+            options: {
+              emitFile: false
+            },
+          },
+        }
+      ],
+    },
+    plugins: [
+      // new BundleAnalyzerPlugin(),
+      new MiniCssExtractPlugin({
+        filename: '[name].[contenthash].css',
+        chunkFilename: '[id].[contenthash].css',
+        ignoreOrder: true
+      }),
+      new CleanWebpackPlugin(),
+      new VueLoaderPlugin(),
+      new Dotenv({
+        path: `.env.${process.env.NODE_ENV}`
+      }),
+      new webpack.DefinePlugin({
+        __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__: false,
+      })
+    ],
+    infrastructureLogging: {
+      level: 'verbose',
+    },
+    stats: {
+      colors: true,
+      hash: true,
+      version: true,
+      timings: true,
+      assets: true,
+      chunks: true,
+      modules: true, 
+      reasons: true,
+      children: true,
+      source: true, 
+      errors: true, 
+      errorDetails: true, 
+      errorStack: true,
+      warnings: true,
+      publicPath: true
+    },
+  };
+};

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

@@ -0,0 +1,78 @@
+const path = require("path");
+const glob = require('glob-all');
+const webpack = require("webpack");
+const { merge } = require("webpack-merge");
+const { StatsWriterPlugin } = require("webpack-stats-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const WorkboxPlugin = require('workbox-webpack-plugin');
+const PurgeCSSPlugin = require('purgecss-webpack-plugin');
+
+const baseConfig = require('./webpack.config.base');
+
+module.exports = (projectRoot) => {
+  const isProd = process.env.NODE_ENV === "production";
+
+  const config = {
+    mode: !isProd ? "development" : "production",
+    devtool: !isProd ? "inline-source-map" : "source-map",
+    entry: {
+      main: !isProd
+        ? [path.resolve("../utils/hot-reload.js"), path.resolve(projectRoot, "src/entry-client.js")]
+        : path.resolve(projectRoot, "src/entry-client.js"),
+    },
+    module: {
+      rules: [],
+    },
+    output: {
+      filename: "main.[fullhash].js",
+      chunkFilename: '[name].[contenthash].js',
+      path: path.resolve(projectRoot, "builds/web/client"),
+      publicPath: "/",
+      clean: true
+    },
+    plugins: [
+      ...(!isProd ? [new webpack.HotModuleReplacementPlugin()] : []),
+      new StatsWriterPlugin(),
+      new WorkboxPlugin.GenerateSW({
+         clientsClaim: true,
+         skipWaiting: true,
+       }),
+      new PurgeCSSPlugin({
+        paths: glob.sync([
+          path.join(projectRoot, 'src/**/*.vue'),
+          path.join(projectRoot, 'prometheus-framework/src/**/*.vue'),
+        ]),
+        safelist: { greedy: [ /data-v-.*/ ] }
+      }),
+    ],
+    optimization: {
+      usedExports: true,  
+      splitChunks: {
+        chunks: "async",
+        minSize: 0,
+        minRemainingSize: 0,
+        minChunks: 1,
+        maxAsyncRequests: 30,
+        maxInitialRequests: 30,
+        enforceSizeThreshold: 50000,
+        cacheGroups: {
+          vendor: {
+            test: /[\\/]node_modules[\\/]/,
+            name: "vendors",
+            priority: -10,
+            reuseExistingChunk: true,
+          },
+        },
+      },
+      minimize: isProd,
+      minimizer: [
+        new TerserPlugin(), 
+        new CssMinimizerPlugin()
+      ],
+    },
+  };
+
+  return merge(baseConfig(projectRoot), config);
+};

package/src/builder/webpack/webpack.config.server.js

@@ -0,0 +1,31 @@
+const path = require("path");
+const webpack = require('webpack');
+const nodeExternals = require('webpack-node-externals');
+
+module.exports = (projectRoot) => {
+  return {
+    target: 'node',
+    mode: "development",
+    entry: [
+      'webpack/hot/poll?1000', 
+      path.resolve(projectRoot, 'server/server.js')
+    ],
+    output: {
+      filename: "server.[fullhash].js",
+      path: path.resolve(projectRoot, "builds/web/server"),
+      clean: true
+    },
+    resolve: {
+      alias: {
+        '@pf': path.resolve(projectRoot, 'prometheus-framework'),
+      },
+      fallback: { 
+        "path": false 
+      }
+    },
+    // externals: [nodeExternals()],
+    plugins: [
+      new webpack.HotModuleReplacementPlugin(),
+    ],
+  };
+};

package/src/builder/webpack/webpack.config.spa.js

@@ -0,0 +1,80 @@
+const path = require("path");
+const webpack = require("webpack");
+const { merge } = require("webpack-merge");
+const { VueLoaderPlugin } = require("vue-loader");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const TerserPlugin = require("terser-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { StatsWriterPlugin } = require("webpack-stats-plugin");
+const Mustache = require("mustache");
+const fs = require('fs').promises;
+
+const getClientConfig = require("./webpack.config.client");
+const templatePath = path.resolve(__dirname,"../templates/page.html");
+
+const isProd = process.env.NODE_ENV === "production";
+
+module.exports = (projectRoot) => {
+
+  // let mainJS = !isProd ? [path.resolve("../utils/hot-reload.js"), path.resolve(projectRoot, "src/app.js")] : path.resolve(projectRoot, "src/app.js")
+
+  const spaConfig = {
+    mode: !isProd ? "development" : "production",
+    devtool: "source-map",
+    entry: {
+      main: path.resolve(projectRoot, "src/app.js"),
+    },
+    output: {
+      filename: "main.js",
+      path: path.resolve(projectRoot, "builds/web/spa"),
+      clean: true
+    },
+    target: "web",
+    module: {
+      rules: [
+        // Дополнительные правила могут быть добавлены здесь
+      ]
+    },
+    plugins: [
+      ...(!isProd ? [new webpack.HotModuleReplacementPlugin()] : []),
+      new StatsWriterPlugin(),
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+      new HtmlWebpackPlugin({
+        templateContent: async () => {
+          const template = await fs.readFile(templatePath, 'utf8');
+          const meta = {
+            htmlAttrs: 'lang="en"',
+            headAttrs: '',
+            bodyAttrs: '',
+            head: '<meta name="description" content="Example">',
+            body: '',
+          };
+          const data = {
+            googleTagId: process.env.GOOGLE_TAG_ID,
+            googleMapApiKey: process.env.GOOGLE_MAPS_API_KEY,
+            meta,
+          };
+          return Mustache.render(template, data);
+        },
+        filename: 'index.html',
+        inject: 'body',
+      }),
+      new CopyWebpackPlugin({
+        patterns: [
+          { from: path.resolve(projectRoot, '../public/logo'), to: 'logo' },
+          { from: path.resolve(projectRoot, '../public/walkthrough'), to: 'walkthrough' }
+        ]
+      }),
+      // new ServiceWorkerPlugin()
+    ],
+    optimization: {
+      minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
+    },
+  };
+
+  return merge(getClientConfig(projectRoot), spaConfig);
+};

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

@@ -0,0 +1,57 @@
+const path = require("path");
+const webpack = require("webpack");
+const nodeExternals = require('webpack-node-externals');
+const { merge } = require("webpack-merge");
+const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
+
+const getBaseConfig = require("./webpack.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/entry-server.js"),
+    },
+    output: {
+      filename: "main.[fullhash].js",
+      path: path.resolve(projectRoot, "builds/web/server"),
+      libraryTarget: "commonjs2",
+      clean: true
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          // we don't need styles on the server, so we just ignore them
+          use: "null-loader",
+        },
+      ],
+    },
+    optimization: {
+      minimize: false,
+    },
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+      ...(isProd ? [new WebpackManifestPlugin({
+         fileName: 'manifest.json'
+      })] : []),
+    ],
+    externals: [
+      nodeExternals({
+        allowlist: [
+          /^vue-meta*/,
+          /\.(css|sass|scss)$/,
+          /\.(vue)$/,
+          /\.(html)$/,
+        ],
+      })
+    ],
+  };
+
+  return merge(getBaseConfig(projectRoot), ssrConfig);
+};