From a612c8490ae6f4afef32ae347da3682647a2c2b7 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Wed, 13 Jul 2022 14:06:03 +0300 Subject: [PATCH] Web: Doceditor: rewrite server to CommonJs --- web/ASC.Web.Editor/src/server/app.js | 130 +++++++++++++++++ web/ASC.Web.Editor/src/server/index.js | 194 +++++++++++++------------ 2 files changed, 230 insertions(+), 94 deletions(-) create mode 100644 web/ASC.Web.Editor/src/server/app.js diff --git a/web/ASC.Web.Editor/src/server/app.js b/web/ASC.Web.Editor/src/server/app.js new file mode 100644 index 0000000000..52656c8922 --- /dev/null +++ b/web/ASC.Web.Editor/src/server/app.js @@ -0,0 +1,130 @@ +const express = require("express"); +const fs = require("fs"); +const path = require("path"); +const React = require("react"); +const ReactDOMServer = require("react-dom/server"); +const compression = require("compression"); +const i18nextMiddleware = require("i18next-express-middleware"); +const i18next = require("i18next"); +const Backend = require("i18next-fs-backend"); + +// const webpack = require("webpack"); +// const WebpackDevMiddleware = require("webpack-dev-middleware"); +// const WebpackHotMiddleware = require("webpack-hot-middleware"); + +const pkg = require("../../package.json"); +const title = pkg.title; +const { App } = require("../client/App"); + +const loadPath = (lng, ns) => { + let resourcePath = path.resolve( + process.cwd(), + `dist/locales/${lng}/${ns}.json` + ); + if (ns === "Common") + resourcePath = path.join( + __dirname, + `../../../../public/locales/${lng}/${ns}.json` + ); + + return resourcePath; +}; + +const app = express(); +const port = process.env.PORT || 5013; + +i18next.use(Backend).init({ + backend: { + loadPath: loadPath, + allowMultiLoading: true, + crossDomain: false, + }, + fallbackLng: "en", + load: "currentOnly", + + saveMissing: true, + ns: ["Editor", "Common"], + defaultNS: "Editor", + + interpolation: { + escapeValue: false, // not needed for react as it escapes by default + format: function (value, format) { + if (format === "lowercase") return value.toLowerCase(); + return value; + }, + }, +}); + +// if (process.env.NODE_ENV === "development") { +// console.log("its work dev!!!!!"); +// const webpackConfig = require("../../webpack/dev/webpack.dev.client.js"); +// const compiler = webpack(webpackConfig); +// app.use( +// WebpackDevMiddleware(compiler, { +// publicPath: webpackConfig.output.publicPath, +// serverSideRender: true, +// }) +// ); + +// app.use(WebpackHotMiddleware(compiler)); +// } + +app.set("view engine", "ejs"); +app.set("views", path.join(__dirname, "views")); + +// app.get( +// /\.(js|css|map|ico)$/, +// express.static(path.resolve(process.cwd(), "dist")) +// ); + +app.use(i18nextMiddleware.handle(i18next)); +app.use(compression()); + +app.use( + "/products/files/doceditor/", + express.static(path.resolve(process.cwd(), "dist")) +); +//app.use(express.static(path.resolve(process.cwd(), "dist"))); + +app.get("/products/files/doceditor", async (req, res) => { + const manifest = fs.readFileSync( + path.join(process.cwd(), "dist/manifest.json"), + "utf-8" + ); + console.log("its get"); + const assets = JSON.parse(manifest); + const component = ReactDOMServer.renderToString(React.createElement(App)); + + const userLng = "en"; //props?.user?.cultureName || "en"; + const initialI18nStore = {}; + const initialState = { test: "test" }; + + i18next.changeLanguage(userLng).then(() => { + const initialLanguage = userLng; + const usedNamespaces = req.i18n.reportNamespaces + ? req.i18n.reportNamespaces.getUsedNamespaces() + : ["Common", "Editor"]; + + initialI18nStore[initialLanguage] = {}; + usedNamespaces.forEach((namespace) => { + initialI18nStore[initialLanguage][namespace] = + req.i18n.services.resourceStore.data[initialLanguage][namespace]; + }); + + const parsedI18nStore = JSON.stringify(initialI18nStore); + const parsedInitialState = JSON.stringify(initialState); + + res.render("editor", { + assets, + component, + title, + parsedI18nStore, + initialLanguage, + parsedInitialState, + }); + }); +}); + +app.listen(port, () => { + console.log(`Server is listening on port `); +}); diff --git a/web/ASC.Web.Editor/src/server/index.js b/web/ASC.Web.Editor/src/server/index.js index 7394eb9118..e077cbd9ee 100644 --- a/web/ASC.Web.Editor/src/server/index.js +++ b/web/ASC.Web.Editor/src/server/index.js @@ -1,101 +1,107 @@ -import express from "express"; -import template from "./template"; -import render from "./render"; -import i18nextMiddleware from "i18next-express-middleware"; -import i18next from "i18next"; -import Backend from "i18next-fs-backend"; -import path from "path"; -import compression from "compression"; -import webpack from "webpack"; -import WebpackDevMiddleware from "webpack-dev-middleware"; -import WebpackHotMiddleware from "webpack-hot-middleware"; +// import express from "express"; +// import template from "./template"; +// import render from "./render"; +// import i18nextMiddleware from "i18next-express-middleware"; +// import i18next from "i18next"; +// import Backend from "i18next-fs-backend"; +// import path 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(), "dist/client") + `/locales/${lng}/${ns}.json`; - if (ns === "Common") - resourcePath = path.join( - __dirname, - `../../../../public/locales/${lng}/${ns}.json` - ); +// const loadPath = (lng, ns) => { +// let resourcePath = +// path.resolve(process.cwd(), "dist/client") + `/locales/${lng}/${ns}.json`; +// if (ns === "Common") +// resourcePath = path.join( +// __dirname, +// `../../../../public/locales/${lng}/${ns}.json` +// ); - return resourcePath; -}; +// return resourcePath; +// }; -const app = express(); -const port = process.env.PORT || 5013; +// const app = express(); +// const port = process.env.PORT || 5013; -i18next.use(Backend).init({ - backend: { - loadPath: loadPath, - allowMultiLoading: true, - crossDomain: false, - }, - fallbackLng: "en", - load: "currentOnly", +// i18next.use(Backend).init({ +// backend: { +// loadPath: loadPath, +// allowMultiLoading: true, +// crossDomain: false, +// }, +// fallbackLng: "en", +// load: "currentOnly", - saveMissing: true, - ns: ["Editor", "Common"], - defaultNS: "Editor", +// saveMissing: true, +// ns: ["Editor", "Common"], +// defaultNS: "Editor", - interpolation: { - escapeValue: false, // not needed for react as it escapes by default - format: function (value, format) { - if (format === "lowercase") return value.toLowerCase(); - return value; - }, - }, -}); - -if (process.env.NODE_ENV === "development") { - const webpackConfig = require("../../webpack/dev/webpack.dev.client.js"); - const compiler = webpack(webpackConfig); - 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, "../../dist/client/static")) -); -app.use(express.static(path.resolve(__dirname, "../../dist/client"))); - -app.get("/products/files/doceditor", async (req, res) => { - const { props, content, styleTags, extractor } = await render(req); - const userLng = props?.user?.cultureName || "en"; - const initialI18nStore = {}; - - i18next.changeLanguage(userLng).then(() => { - const initialLanguage = userLng; - - const usedNamespaces = req.i18n.reportNamespaces.getUsedNamespaces(); - - initialI18nStore[initialLanguage] = {}; - usedNamespaces.forEach((namespace) => { - initialI18nStore[initialLanguage][namespace] = - req.i18n.services.resourceStore.data[initialLanguage][namespace]; - }); - const response = template( - props, - content, - styleTags, - initialI18nStore, - initialLanguage, - extractor - ); - - res.send(response); - }); -}); - -app.listen(port, () => { - console.log(`Server is listening on port ${port}`); +// interpolation: { +// escapeValue: false, // not needed for react as it escapes by default +// format: function (value, format) { +// if (format === "lowercase") return value.toLowerCase(); +// return value; +// }, +// }, +// }); + +// // if (process.env.NODE_ENV === "development") { +// // const webpackConfig = require("../../webpack/dev/webpack.dev.client.js"); +// // const compiler = webpack(webpackConfig); +// // app.use( +// // WebpackDevMiddleware(compiler, { +// // publicPath: webpackConfig.output.publicPath, +// // serverSideRender: true, +// // }) +// // ); + +// // +// // } + +// app.use(i18nextMiddleware.handle(i18next)); +// app.use(compression()); +// app.use( +// "/products/files/doceditor/static/", +// express.static(path.resolve(__dirname, "../../dist/client/static")) +// ); +// app.use(express.static(path.resolve(__dirname, "../../dist/client"))); + +// app.get("/products/files/doceditor", async (req, res) => { +// const { props, content, styleTags, extractor } = await render(req); +// const userLng = props?.user?.cultureName || "en"; +// const initialI18nStore = {}; + +// i18next.changeLanguage(userLng).then(() => { +// const initialLanguage = userLng; + +// const usedNamespaces = req.i18n.reportNamespaces.getUsedNamespaces(); + +// initialI18nStore[initialLanguage] = {}; +// usedNamespaces.forEach((namespace) => { +// initialI18nStore[initialLanguage][namespace] = +// req.i18n.services.resourceStore.data[initialLanguage][namespace]; +// }); +// const response = template( +// props, +// content, +// styleTags, +// initialI18nStore, +// initialLanguage, +// extractor +// ); + +// res.send(response); +// }); +// }); + +// app.listen(port, () => { +// console.log(`Server is listening on port ${port}`); +// }); +const path = require("path"); + +require("@babel/register")({ + configFile: path.resolve(__dirname, "../../babel.config.js"), }); +require("./app.js");