Web: Doceditor: applied changes

web/ASC.Web.Editor/src/App.js

@@ -1,9 +1,6 @@
-//import "@appserver/common/utils/wdyr";
 import React from "react";
 import Editor from "./Editor.js";
 
-import "@appserver/common/custom.scss";
-
 const App = (initProps) => {
   return <Editor {...initProps} />;
 };

web/ASC.Web.Editor/src/index.js

@@ -6,10 +6,13 @@ import i18next from "i18next";
 import Backend from "i18next-fs-backend";
 import path, { join } from "path";
 import compression from "compression";
+// import webpack from "webpack";
+// import WebpackDevMiddleware from "webpack-dev-middleware";
+// import WebpackHotMiddleware from "webpack-hot-middleware";
 
 const loadPath = (lng, ns) => {
   let resourcePath =
-    path.resolve(process.cwd(), "clientBuild") + `/locales/${lng}/${ns}.json`;
+    path.resolve(process.cwd(), "dist/client") + `/locales/${lng}/${ns}.json`;
 
   if (ns === "Common")
     resourcePath = join(__dirname, `../../../public/locales/${lng}/${ns}.json`);
@@ -42,16 +45,30 @@ i18next.use(Backend).init({
   },
 });
 
+// if (process.env.NODE_ENV === "development") {
+//   const webpackConfig = require("../webpack/dev/webpack.dev.client.js");
+//   const compiler = webpack(webpackConfig);
+//   console.log("server");
+//   app.use(
+//     WebpackDevMiddleware(compiler, {
+//       publicPath: webpackConfig.output.publicPath,
+//       serverSideRender: true,
+//     })
+//   );
+
+//   app.use(WebpackHotMiddleware(compiler));
+// }
+
 app.use(i18nextMiddleware.handle(i18next));
 app.use(compression());
 app.use(
   "/products/files/doceditor/static/",
-  express.static(path.resolve(__dirname, "../clientBuild/static"))
+  express.static(path.resolve(__dirname, "../dist/client/static"))
 );
-app.use(express.static(path.resolve(__dirname, "../clientBuild")));
+app.use(express.static(path.resolve(__dirname, "../dist/client")));
 
 app.get("/products/files/doceditor", async (req, res) => {
-  const { props, content, styleTags, scriptTags } = await render(req);
+  const { props, content, styleTags, extractor } = await render(req);
   const userLng = props?.user?.cultureName || "en";
   const initialI18nStore = {};
 
@@ -71,9 +88,9 @@ app.get("/products/files/doceditor", async (req, res) => {
       props,
       content,
       styleTags,
-      scriptTags,
       initialI18nStore,
-      initialLanguage
+      initialLanguage,
+      extractor
     );
 
     res.send(response);

web/ASC.Web.Editor/src/server/render.js

@@ -3,26 +3,33 @@ import { renderToString } from "react-dom/server";
 import App from "../Editor.js";
 import { initDocEditor } from "../helpers/utils";
 import { ServerStyleSheet } from "styled-components";
-import { ChunkExtractor } from "@loadable/server";
+import { ChunkExtractor, ChunkExtractorManager } from "@loadable/server";
 import path from "path";
 import { I18nextProvider } from "react-i18next";
 
 const sheet = new ServerStyleSheet();
-const statsFile = path.resolve("clientBuild/stats.json");
+//const statsFile = path.resolve("clientBuild/stats.json");
+const loadableJson = path.resolve(__dirname, "./loadable-stats.json");
 export default async (req) => {
   const props = await initDocEditor(req);
 
-  const extractor = new ChunkExtractor({ statsFile });
+  //const extractor = new ChunkExtractor({ statsFile });
+  const extractor = new ChunkExtractor({
+    statsFile: loadableJson,
+    entrypoints: ["client"],
+  });
   const scriptTags = extractor.getScriptTags();
 
   const content = renderToString(
     sheet.collectStyles(
-      <I18nextProvider i18n={req.i18n}>
-        <App />
-      </I18nextProvider>
+      <ChunkExtractorManager extractor={extractor}>
+        <I18nextProvider i18n={req.i18n}>
+          <App />
+        </I18nextProvider>
+      </ChunkExtractorManager>
     )
   );
   const styleTags = sheet.getStyleTags();
 
-  return { ...props, content, styleTags, scriptTags };
+  return { ...props, content, styleTags, extractor };
 };

web/ASC.Web.Editor/src/server/template.js

@@ -5,9 +5,10 @@ export default function template(
   initialState = {},
   content = "",
   styleTags,
-  scriptTags,
+  //scriptTags,
   initialI18nStore,
-  initialLanguage
+  initialLanguage,
+  extractor
 ) {
   const { title } = pkg;
   const { docApiUrl } = initialState;
@@ -22,7 +23,7 @@ export default function template(
       window.initialLanguage = '${initialLanguage}'
     </script>
     <script type='text/javascript' id='scripDocServiceAddress' src="${docApiUrl}" async></script>
-   ${scriptTags}
+    ${extractor.getScriptTags()}
 `;
 
   const page = `