@ozdao/prometheus-framework 0.2.156 → 0.2.157

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/prometheus-framework",
-  "version": "0.2.156",
+  "version": "0.2.157",
   "description": "Web3 Framework focused on user experience and ease of development.",
   "author": "OZ DAO <hello@ozdao.dev>",
   "license": "GPL-3.0-or-later",
@@ -157,10 +157,11 @@
     ".": "./dist/prometheus-framework.es.js"
   },
   "scripts": {
-    "build": "vite build --config vite.components.config.js && vite build --config vite.modules.client.config.js && vite build --config vite.modules.server.config.js",
+    "build": "vite build --config vite.components.config.js && vite build --config vite.modules.client.config.js && vite build --config vite.modules.server.config.js && vite build --config vite.builder.config.js",
     "build:components": "vite build --config vite.components.config.js",
     "build:client": "vite build --config vite.modules.client.config.js",
     "build:server": "vite build --config vite.modules.server.config.js",
+    "build:builder": "vite build --config vite.builder.config.js",
     "test": "vue-tsc --noEmit",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",

package/src/builder/builder.js

@@ -0,0 +1,14 @@
+const createSsrDevServer = require('./modes/ssr.dev.js');
+const createSsrProdServer = require('./modes/ssr.prod.js');
+const createSpaDevServer = require('./modes/spa.dev.js');
+const createSpaProdServer = require('./modes/spa.prod.js');
+
+const webpackConfigs = require('./webpack');
+
+module.exports = {
+  createSsrDevServer,
+  createSsrProdServer,
+  createSpaDevServer,
+  createSpaProdServer,
+  webpackConfigs
+};

package/src/builder/modes/spa.dev.js

@@ -0,0 +1,100 @@
+const path = require("path");
+const webpack = require("webpack");
+const compression = require('compression');
+const readline = require('readline');
+const chalk = require('chalk');
+const devMiddleware = require("webpack-dev-middleware");
+const hotMiddleware = require("webpack-hot-middleware");
+const history = require('connect-history-api-fallback');
+const express = require('express');
+
+module.exports = function createSpaDevServer(projectRoot, { spaConfig, serverConfig, createServerPath }) {
+  const spaCompiler = webpack(spaConfig);
+  const serverCompiler = webpack(serverConfig);
+
+  const createDevRenderer = () => {
+    const progressPlugin = new webpack.ProgressPlugin((percentage, message, ...args) => {
+      readline.clearLine(process.stdout, 0);
+      readline.cursorTo(process.stdout, 0);
+      process.stdout.write(
+        chalk.greenBright.bold(`${(percentage * 100).toFixed(2)}% `) +
+        chalk.blueBright(message) +
+        ' ' +
+        args.map(arg => chalk.yellow(arg)).join(' ')
+      );
+    });
+    spaConfig.plugins.push(progressPlugin);
+  };
+
+  let serverInstance;
+  const clientDevMiddleware = devMiddleware(spaCompiler, {
+    publicPath: spaConfig.output.publicPath,
+    stats: false,
+  });
+  const clientHotMiddleware = hotMiddleware(spaCompiler, {
+    heartbeat: 5000,
+    log: false
+  });
+
+  const port = process.env.PORT || 8080;
+
+  // Функция для запуска сервера
+   const startServer = async () => {
+    if (serverInstance) {
+      serverInstance.close();
+    }
+    // Очистка кэша модуля и всех его зависимостей
+    Object.keys(require.cache).forEach((id) => {
+      delete require.cache[id];
+    });
+    const { createServer } = require(path.resolve(projectRoot, createServerPath));
+    let { app, server, env } = await createServer();
+
+    // Используем connect-history-api-fallback перед другими middleware
+    app.use(history());
+    
+    app.use(clientDevMiddleware);
+    app.use(clientHotMiddleware);
+    
+    app.use(compression());
+
+    // Удаляем статическое обслуживание файлов
+    // app.use(express.static(path.resolve(projectRoot, "builds/web/client")));
+
+    // Обрабатываем все маршруты
+    app.get('*', (req, res, next) => {
+      const filename = path.join(spaCompiler.outputPath, 'index.html');
+      spaCompiler.outputFileSystem.readFile(filename, (err, result) => {
+        if (err) {
+          return next(err);
+        }
+        res.set('content-type', 'text/html');
+        res.send(result);
+        res.end();
+      });
+    });
+
+    serverInstance = server;
+    try {
+      await server.listen(port);
+      console.log(`Server started at http://localhost:${port}\n`);
+    } catch (err) {
+      console.error(err);
+      process.exit(1);
+    }
+  };
+
+  // Настройка наблюдения за изменениями
+  serverCompiler.watch({}, async (err, stats) => {
+    if (err) {
+      console.error(err);
+      return;
+    }
+    console.log(stats.toString(serverConfig.stats));
+    console.log('Server.js has changed, updating...');
+    await startServer();
+  });
+
+  createDevRenderer();
+  return startServer;
+};

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

@@ -0,0 +1,59 @@
+const fs = require("fs");
+const path = require("path");
+const compression = require('compression');
+const express = require('express');
+const history = require('connect-history-api-fallback');
+
+module.exports = function createSpaProdServer(projectRoot, { createServerPath }) {
+  let serverInstance;
+  const port = process.env.PORT || 8080;
+
+  // Функция для запуска сервера
+  const startServer = async () => {
+    const { createServer } = require(path.resolve(projectRoot, createServerPath));
+
+    let { app, server } = await createServer();
+
+    // Включаем сжатие ответов
+    app.use(compression());
+
+    // Статическое обслуживание сбилженных файлов
+    app.use(express.static(path.resolve(projectRoot, "builds/web/spa")));
+
+    app.use(history({
+      index: '/index.html'
+    }));
+
+    app.get('*', (req, res) => {
+      fs.readFile(path.resolve(projectRoot, 'builds/web/spa', 'index.html'), 'utf-8', (err, content) => {
+        if (err) {
+          console.log('We cannot open "index.html" file.');
+          res.writeHead(500, {
+            'Content-Type': 'text/plain; charset=utf-8'
+          });
+          res.end('Internal Server Error');
+          return;
+        }
+
+        res.writeHead(200, {
+          'Content-Type': 'text/html; charset=utf-8'
+        });
+
+        res.end(content);
+      });
+    });
+
+    // Запуск сервера
+    serverInstance = server;
+
+    try {
+      await server.listen(port);
+      console.log(`Production server started at http://localhost:${port}\n`);
+    } catch (err) {
+      console.error(err);
+      process.exit(1);
+    }
+  };
+
+  return startServer;
+};

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

@@ -0,0 +1,184 @@
+const path = require("path");
+const webpack = require("webpack");
+const compression = require('compression');
+const readline = require('readline');
+const chalk = require('chalk');
+
+const devMiddleware = require("webpack-dev-middleware");
+const hotMiddleware = require("webpack-hot-middleware");
+
+const { createHtmlRenderer } = require("../ssr/ssr-render-html.js");
+const { transformDevStats } = require("../ssr/ssr-transform-webpack-stats.js");
+
+module.exports = function createSsrDevServer(projectRoot, { clientConfig, serverConfig, ssrConfig, createServerPath }) {
+  const clientCompiler = webpack(clientConfig);
+  const serverCompiler = webpack(serverConfig);
+  const ssrCompiler = webpack(ssrConfig);
+
+  const createDevRenderer = (onUpdate) => {
+
+    const createHotReloadingServerRenderer = (config) => {
+      const progressPlugin = new webpack.ProgressPlugin((percentage, message, ...args) => {
+        
+        readline.clearLine(process.stdout, 0);
+        readline.cursorTo(process.stdout, 0);
+        
+        process.stdout.write(
+          chalk.greenBright.bold(`${(percentage * 100).toFixed(2)}% `) +
+          chalk.blueBright(message) +
+          ' ' +
+          args.map(arg => chalk.yellow(arg)).join(' ')
+        );
+      });
+      
+      config.plugins = config.plugins || [];
+      config.plugins.push(progressPlugin);
+
+      let renderApp = null;
+      let setCompilationDone = null;
+
+      let ssrCompilation = new Promise((resolve) => {
+        setCompilationDone = resolve;
+      });
+
+      ssrCompiler.watch(
+        {
+          "info-verbosity": "none",
+        },
+        (error, stats) => {
+          if (error) {
+            console.error(chalk.red("Server critical error"));
+            console.error(JSON.stringify(error, null, 2)); //
+            throw error;
+            return
+          }
+
+          const jsonStats = stats.toJson();
+
+          if (stats.hasErrors()) {
+            console.error(chalk.red("Client compilation error"));
+            jsonStats.errors.forEach((err) => console.error(chalk.red(err.details)));
+            return;
+          }
+
+          const { entrypoints, outputPath } = jsonStats;
+          const { main: { assets: [mainChunkPath] }} = entrypoints;
+          const { render } = require(path.resolve(outputPath, mainChunkPath.name));
+          renderApp = render;
+          setCompilationDone();
+        }
+      );
+
+      return async (stuff) => {
+        await ssrCompilation;
+        
+        const result = await renderApp(stuff);
+
+        return result;
+      };
+    };
+
+    const renderApp = createHotReloadingServerRenderer(ssrConfig);
+    const renderHtml = createHtmlRenderer(onUpdate);
+
+    return async (stuff, { stats, outputFileSystem }) => {
+      const { html, meta, state, statusCode } = await renderApp(stuff);
+
+      const { head, body } = transformDevStats(stats.toJson(), outputFileSystem);
+
+      const userState = JSON.stringify(state.user);
+
+      const completeHtml = await renderHtml({
+        appHtml: html,
+        meta,
+        head,
+        body,
+        userState
+      });
+      return { html: completeHtml, statusCode };
+    };
+  };
+  
+  let serverInstance;
+  let rendererInstance;
+
+  const clientDevMiddleware = devMiddleware(clientCompiler, {
+    publicPath: clientConfig.output.publicPath,
+    serverSideRender: true,
+    stats: false,
+  });
+
+  const clientHotMiddleware = hotMiddleware(clientCompiler, {
+    heartbeat: 5000,
+    log: false
+  });
+
+  const port = process.env.PORT || 8080;
+
+  // Функция для запуска сервера
+  const startServer = async () => {
+    if (serverInstance) {
+      serverInstance.close();
+    }
+
+    // Рекурсивная функция для очистки кэша модуля и всех его зависимостей
+    Object.keys(require.cache).forEach((id) => {
+      delete require.cache[id];
+    });
+
+    const { createServer } = require(path.resolve(projectRoot, createServerPath));
+
+    let { app, server, env } = await createServer();
+
+    app.use(clientDevMiddleware);
+    app.use(clientHotMiddleware);
+
+    // Код для SSR клиентской части. Этот блок компилирует приложение
+    if (!rendererInstance) {
+      rendererInstance = createDevRenderer(() => {
+        clientCompiler.hooks.done.tap("reload", () => {
+          setTimeout(() => {
+            require("webpack-hot-middleware/client").reload();
+          }, 500);
+        });
+      });
+    }
+
+    // и сервит его по всем роутам, а там внутри приложения мы уже разбираемся че показывать.
+    app.use("/*", async (req, res) => {
+      const result = await rendererInstance({
+        url: req.originalUrl,
+        cookies: req.cookies,
+        languages: req.acceptsLanguages()
+      }, res.locals.webpack.devMiddleware);
+
+      // тут отправляем статус код и сгенерированный html
+      res.status(result.statusCode).header("Content-Type", "text/html; charset=utf-8").send(result.html);
+    });
+
+    app.use(compression());
+
+    serverInstance = server;
+
+    try {
+      await server.listen(port);
+      console.log(`Server started at localhost:${port}\n`);
+    } catch (err) {
+      console.error(err);
+      process.exit(1);
+    }
+  };
+
+  // Настройка наблюдения за изменениями
+  serverCompiler.watch({}, async (err, stats) => {
+    if (err) {
+      console.error(err);
+      return;
+    }
+    console.log(stats.toString(serverConfig.stats));
+    console.log('Server.js has changed, updating...');
+    await startServer();
+  });
+
+  return startServer;
+};

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,
+};