Update package dependencies for Emotion and Chakra UI. Enhance SSR rendering to include Chakra UI styles and improve HTML output for index.html and terms.html.

2025-10-24 13:08:02 +03:00 · 2025-10-24 13:08:02 +03:00 · 3b997a18e2
commit 3b997a18e2
parent 82613194f3
3 changed files with 271 additions and 14 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -37,6 +37,8 @@
                "@babel/preset-env": "^7.28.5",
                "@babel/preset-react": "^7.28.5",
                "@babel/register": "^7.28.3",
+                "@emotion/cache": "^11.14.0",
+                "@emotion/server": "^11.11.0",
                "@eslint/js": "^9.9.0",
                "@types/jest": "^29.5.12",
                "babel-jest": "^29.7.0",
@ -3463,14 +3465,14 @@
            "license": "MIT"
        },
        "node_modules/@emotion/cache": {
-            "version": "11.13.1",
-            "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
-            "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+            "version": "11.14.0",
+            "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+            "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
            "license": "MIT",
            "dependencies": {
                "@emotion/memoize": "^0.9.0",
                "@emotion/sheet": "^1.4.0",
-                "@emotion/utils": "^1.4.0",
+                "@emotion/utils": "^1.4.2",
                "@emotion/weak-memoize": "^0.4.0",
                "stylis": "4.2.0"
            }
@ -3546,6 +3548,27 @@
                "csstype": "^3.0.2"
            }
        },
+        "node_modules/@emotion/server": {
+            "version": "11.11.0",
+            "resolved": "https://registry.npmjs.org/@emotion/server/-/server-11.11.0.tgz",
+            "integrity": "sha512-6q89fj2z8VBTx9w93kJ5n51hsmtYuFPtZgnc1L8VzRx9ti4EU6EyvF6Nn1H1x3vcCQCF7u2dB2lY4AYJwUW4PA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@emotion/utils": "^1.2.1",
+                "html-tokenize": "^2.0.0",
+                "multipipe": "^1.0.2",
+                "through": "^2.3.8"
+            },
+            "peerDependencies": {
+                "@emotion/css": "^11.0.0-rc.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/css": {
+                    "optional": true
+                }
+            }
+        },
        "node_modules/@emotion/sheet": {
            "version": "1.4.0",
            "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
@ -3591,9 +3614,9 @@
            }
        },
        "node_modules/@emotion/utils": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz",
-            "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==",
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+            "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
            "license": "MIT"
        },
        "node_modules/@emotion/weak-memoize": {
@ -6589,6 +6612,13 @@
                "url": "https://opencollective.com/core-js"
            }
        },
+        "node_modules/core-util-is": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+            "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/cosmiconfig": {
            "version": "7.1.0",
            "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@ -7214,6 +7244,56 @@
            "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
            "license": "MIT"
        },
+        "node_modules/duplexer2": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+            "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "readable-stream": "^2.0.2"
+            }
+        },
+        "node_modules/duplexer2/node_modules/isarray": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+            "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/duplexer2/node_modules/readable-stream": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+            "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.3",
+                "isarray": "~1.0.0",
+                "process-nextick-args": "~2.0.0",
+                "safe-buffer": "~5.1.1",
+                "string_decoder": "~1.1.1",
+                "util-deprecate": "~1.0.1"
+            }
+        },
+        "node_modules/duplexer2/node_modules/safe-buffer": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/duplexer2/node_modules/string_decoder": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+            "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "safe-buffer": "~5.1.0"
+            }
+        },
        "node_modules/eastasianwidth": {
            "version": "0.2.0",
            "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@ -9357,6 +9437,57 @@
                "void-elements": "3.1.0"
            }
        },
+        "node_modules/html-tokenize": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/html-tokenize/-/html-tokenize-2.0.1.tgz",
+            "integrity": "sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "buffer-from": "~0.1.1",
+                "inherits": "~2.0.1",
+                "minimist": "~1.2.5",
+                "readable-stream": "~1.0.27-1",
+                "through2": "~0.4.1"
+            },
+            "bin": {
+                "html-tokenize": "bin/cmd.js"
+            }
+        },
+        "node_modules/html-tokenize/node_modules/buffer-from": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz",
+            "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/html-tokenize/node_modules/isarray": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+            "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/html-tokenize/node_modules/readable-stream": {
+            "version": "1.0.34",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+            "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.1",
+                "isarray": "0.0.1",
+                "string_decoder": "~0.10.x"
+            }
+        },
+        "node_modules/html-tokenize/node_modules/string_decoder": {
+            "version": "0.10.31",
+            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+            "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/html-webpack-plugin": {
            "version": "5.6.0",
            "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz",
@ -11474,6 +11605,17 @@
            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
            "license": "MIT"
        },
+        "node_modules/multipipe": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-1.0.2.tgz",
+            "integrity": "sha512-6uiC9OvY71vzSGX8lZvSqscE7ft9nPupJ8fMjrCNRAUy2LREUW42UL+V/NTrogr6rFgRydUrCX4ZitfpSNkSCQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "duplexer2": "^0.1.2",
+                "object-assign": "^4.1.0"
+            }
+        },
        "node_modules/nanoid": {
            "version": "3.3.11",
            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@ -12500,6 +12642,13 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/process-nextick-args": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+            "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/progress": {
            "version": "2.0.3",
            "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@ -14484,6 +14633,51 @@
                "tslib": "^2"
            }
        },
+        "node_modules/through": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+            "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/through2": {
+            "version": "0.4.2",
+            "resolved": "https://registry.npmjs.org/through2/-/through2-0.4.2.tgz",
+            "integrity": "sha512-45Llu+EwHKtAZYTPPVn3XZHBgakWMN3rokhEv5hu596XP+cNgplMg+Gj+1nmAvj+L0K7+N49zBKx5rah5u0QIQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "readable-stream": "~1.0.17",
+                "xtend": "~2.1.1"
+            }
+        },
+        "node_modules/through2/node_modules/isarray": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+            "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/through2/node_modules/readable-stream": {
+            "version": "1.0.34",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+            "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.1",
+                "isarray": "0.0.1",
+                "string_decoder": "~0.10.x"
+            }
+        },
+        "node_modules/through2/node_modules/string_decoder": {
+            "version": "0.10.31",
+            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+            "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/tiny-invariant": {
            "version": "1.3.3",
            "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@ -15527,6 +15721,25 @@
                }
            }
        },
+        "node_modules/xtend": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz",
+            "integrity": "sha512-vMNKzr2rHP9Dp/e1NQFnLQlwlhp9L/LfvnsVdHxN1f+uggyVI3i08uD14GPvCToPkdsRfyPqIyYGmIk58V98ZQ==",
+            "dev": true,
+            "dependencies": {
+                "object-keys": "~0.4.0"
+            },
+            "engines": {
+                "node": ">=0.4"
+            }
+        },
+        "node_modules/xtend/node_modules/object-keys": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz",
+            "integrity": "sha512-ncrLw+X55z7bkl5PnUvHwFK9FcGuFYo9gtjws2XtSzL+aZ8tm830P60WJ0dSmFVaSalWieW5MD7kEdnXda9yJw==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/y18n": {
            "version": "5.0.8",
            "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
--- a/package.json
+++ b/package.json
@ -47,6 +47,8 @@
        "@babel/preset-env": "^7.28.5",
        "@babel/preset-react": "^7.28.5",
        "@babel/register": "^7.28.3",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/server": "^11.11.0",
        "@eslint/js": "^9.9.0",
        "@types/jest": "^29.5.12",
        "babel-jest": "^29.7.0",
--- a/scripts/ssr-render.js
+++ b/scripts/ssr-render.js
@ -51,14 +51,52 @@ try {
  // Импортируем компоненты
  const { UnderConstruction } = require('../src/pages/under-construction/underConstruction.tsx');
  const { Terms } = require('../src/pages/terms/Terms.tsx');
+  const { ChakraProvider, extendTheme } = require('@chakra-ui/react');

  console.log('✅ Компоненты загружены');

-  // Рендерим компоненты в HTML
-  const homeContent = renderToString(React.createElement(UnderConstruction));
-  const termsContent = renderToString(React.createElement(Terms));
+  // Функция для рендера с Chakra UI + базовыми стилями
+  function renderWithStyles(Component) {
+    // Chakra theme с базовыми стилями
+    const theme = extendTheme({});
+    
+    // Генерируем базовые CSS переменные и стили Chakra
+    const baseStyles = `
+<style data-emotion="chakra-global">
+:root,:host{--chakra-vh:100vh}@supports(height:100dvh){:root,:host{--chakra-vh:100dvh}}
+:root{color-scheme:light;--chakra-colors-chakra-body-text:#1A202C;--chakra-colors-chakra-body-bg:#fff;
+--chakra-colors-chakra-border-color:#E2E8F0;--chakra-colors-chakra-placeholder-color:#A0AEC0}
+body{background:var(--chakra-colors-chakra-body-bg);color:var(--chakra-colors-chakra-body-text);
+font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;line-height:1.5}
+.chakra-container{width:100%;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
+.chakra-stack>*:not(style)~*:not(style){margin-top:1.5rem;margin-inline-start:0}
+.chakra-heading{font-weight:700;font-size:1.875rem;line-height:2.25rem;margin-bottom:0.5rem}
+.chakra-text{margin:0;margin-bottom:0.5rem}
+.chakra-link{color:#3182ce;text-decoration:none}
+.chakra-link:hover{text-decoration:underline}
+.chakra-divider{border-color:var(--chakra-colors-chakra-border-color);border-style:solid;
+border-width:0;border-bottom-width:1px;margin-top:1rem;margin-bottom:1rem}
+ul,ol{margin-left:1.5rem;margin-bottom:1rem}
+li{margin-bottom:0.5rem}
+hr{border-top-width:1px;border-color:#E2E8F0}
+</style>`;

-  console.log('✅ Компоненты отрендерены');
+    const html = renderToString(
+      React.createElement(
+        ChakraProvider, 
+        { theme, cssVarsRoot: 'body' },
+        React.createElement(Component)
+      )
+    );
+
+    return { html, styles: baseStyles };
+  }
+
+  // Рендерим компоненты с извлечением стилей
+  const { html: homeContent, styles: homeStyles } = renderWithStyles(UnderConstruction);
+  const { html: termsContent, styles: termsStyles } = renderWithStyles(Terms);
+
+  console.log('✅ Компоненты отрендерены с Chakra UI + Emotion стилями');

  // Читаем dist/index.html
  const distPath = path.resolve(__dirname, '../dist');
@ -68,14 +106,17 @@ try {
  // 1. Главная страница
  const searchString = '<div id="app"></div>';
  if (indexHtml.includes(searchString)) {
-    indexHtml = indexHtml.replace(searchString, `<div id="app">${homeContent}</div>`);
+    indexHtml = indexHtml
+      .replace(searchString, `<div id="app">${homeContent}</div>`)
+      .replace('</head>', `${homeStyles}</head>`);
    fs.writeFileSync(indexPath, indexHtml, 'utf-8');
-    console.log('✅ index.html обновлен с SSR контентом');
+    console.log('✅ index.html обновлен с SSR контентом и стилями');
  }

  // 2. Страница terms
  let termsHtml = indexHtml
    .replace(homeContent, termsContent)
+    .replace(homeStyles, termsStyles)
    .replace('<title>bro-js admin</title>', '<title>Пользовательское соглашение - BROJS.RU</title>')
    .replace(
      '</head>',
@ -84,11 +125,12 @@ try {

  const termsPath = path.join(distPath, 'terms.html');
  fs.writeFileSync(termsPath, termsHtml, 'utf-8');
-  console.log('✅ terms.html создан с SSR контентом');
+  console.log('✅ terms.html создан с SSR контентом и стилями');

  console.log('🎉 SSR завершен успешно!');
  console.log('📄 Созданы: index.html, terms.html');
  console.log('💡 Весь контент отрендерен через React SSR');
+  console.log('🎨 Критические стили Emotion встроены в HTML');

 } catch (error) {
  console.error('❌ Ошибка при SSR:', error.message);