[VAS-1037] feat: add simple implementation of template loading throug…

…h reactDom for testing
pagopa · May 13, 2024 · 001e775 · 001e775
1 parent 9a766ab
commit 001e775
Show file tree

Hide file tree

Showing 7 changed files with 7,997 additions and 5,010 deletions.
diff --git a/node/.bashrc b/node/.bashrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}
diff --git a/node/package-lock.json b/node/package-lock.json
diff --git a/node/package.json b/node/package.json
@@ -10,9 +10,11 @@
     "test:coverage": "jest --coverage"
   },
   "dependencies": {
+    "@babel/register": "^7.23.7",
     "adm-zip": "^0.5.10",
     "applicationinsights": "^1.7.4",
     "axios": "^1.5.0",
+    "babel-node": "^0.0.1-security",
     "bitgener": "^1.2.12",
     "chromium": "^3.0.3",
     "express": "^4.18.2",
@@ -22,9 +24,15 @@
     "nodemon": "^3.0.1",
     "puppeteer": "^22.0.0",
     "qrcode-svg": "^1.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
+    "@babel/cli": "^7.24.5",
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
     "@types/jest": "^24.0.15",
     "@types/semver": "^7.3.10",
     "jest": "^29.6.4"

diff --git a/node/pdf-generate/handlers.js b/node/pdf-generate/handlers.js
@@ -12,6 +12,12 @@ let handlebars = require("handlebars");
 const packageJson = require("../package.json");
 var AdmZip = require("adm-zip");
 const fse = require('fs-extra');
+const { renderToString } = require('react-dom/server');
+const React = require("react");
+require('@babel/register')({
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+})
+
 
 const info = async function (req, res, next) {
 
@@ -70,6 +76,7 @@ const generatePdf = async function (req, res, next) {
 
         let data = req.body.data;
         let title = req.body.title;
+        let renderMode = req.body.renderMode || 'handlebar';
 
         if (title == undefined) {
             title = "Documento PDF PagoPA";
@@ -83,12 +90,24 @@ const generatePdf = async function (req, res, next) {
         }
 
         try {
-            let templateFile = readFileSync(path.join(workingDir, "template.html")).toString();
-            let template = handlebars.compile(templateFile);
+
             const jsonData = JSON.parse(data);
-            jsonData.tempPath = workingDir;
-            let html = template(jsonData);
-            fs.writeFileSync(path.join(workingDir, "compiledTemplate.html"), html);
+            if (renderMode === 'handlebar') {
+                let templateFile = readFileSync(path.join(workingDir, "template.html")).toString();
+                let template = handlebars.compile(templateFile);
+                jsonData.tempPath = workingDir;
+                let html = template(jsonData);
+                fs.writeFileSync(path.join(workingDir, "compiledTemplate.html"), html);
+
+            } else {
+                const h = React.createElement;
+                //let template = require(path.join(workingDir, "template.js"));
+                let template = require("./react/test.js");
+                let html = renderToString(h(template, {
+                    data: jsonData
+                }));
+                fs.writeFileSync(path.join(workingDir, "compiledTemplate.html"), html);
+            }
         } catch (err) {
             console.log(err)
             res.status(500);
@@ -124,6 +143,7 @@ const generatePdf = async function (req, res, next) {
         res.send(content);
 
     } catch (err) {
+        console.log(err);
         res.status(500);
         res.json(buildResponseBody(500, 'PDFE_902', "Error generating the PDF document"));
     } finally {

diff --git a/...enerate/helpers/receipts/splitAndSpace.js → ...generate/helpers/commons/splitAndSpace.js b/...enerate/helpers/receipts/splitAndSpace.js → ...generate/helpers/commons/splitAndSpace.js
diff --git a/node/pdf-generate/helpers/notices/genDataMatrix.js b/node/pdf-generate/helpers/notices/genDataMatrix.js
@@ -3,7 +3,8 @@ const { v4: uuidv4 } = require("uuid");
 const path = require('path');
 
 function genDataMatrix(data, saveDir) {
-    const filename = path.join(saveDir,uuidv4()+".svg");
+    const filename = path.join(
+    saveDir,uuidv4()+".svg");
     bitgener({
       data: data,
       type: 'datamatrix',

diff --git a/node/pdf-generate/react/test.js b/node/pdf-generate/react/test.js
@@ -0,0 +1,44 @@
+const React = require("react");
+
+const css = {
+  __html: `
+<![CDATA[
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/inter/v1/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuBWYAZ9hiA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+]]>
+`,
+}
+
+module.exports = ({ size = 256, color = 'inherit', ...props }) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    width={size}
+    height={size}
+    style={{
+      fontFamily: 'Inter, sans-serif',
+      fontSize: 12,
+      letterSpacing: '0.1em',
+      fill: 'currentcolor',
+      color,
+      pointerEvents: 'none',
+    }}>
+    <defs>
+      <style dangerouslySetInnerHTML={css} type="text/css" />
+      <mask id="ui">
+        <rect width={32} height={32} fill="white" />
+        <text x={16} y={21} fill="black" textAnchor="middle">
+          UI
+        </text>
+      </mask>
+    </defs>
+    <circle cx={16} cy={16} r={16} mask="url(#ui)" />
+  </svg>
+)