Merge pull request #82 from mm-vasyl/react-preview-on-dev-server

React preview on dev server sync
mediamonks · Oct 19, 2023 · 9480d17 · 9480d17
2 parents b6fd6b1 + 98e3ded
commit 9480d17
Show file tree

Hide file tree

Showing 6 changed files with 2,142 additions and 2,145 deletions.
diff --git a/src/preview/dist/js/index_bundle.js b/src/preview/dist/js/index_bundle.js
diff --git a/src/preview/public/data/ads.json b/src/preview/public/data/ads.json
@@ -1,4 +1,6 @@
 {
+  "isGoogleSpreadsheetBanner": false,
+  "maxFileSize": 150,
   "timestamp": 1691759644915,
   "ads": [
     {

diff --git a/src/preview/src/components/AdPreview.js b/src/preview/src/components/AdPreview.js
@@ -113,28 +113,18 @@ export const AdPreview = (props) => {
             </>
           : <></>
         }
-        <Box>
-          <Box marginBottom="20px">
-            <Tooltip title="Bundle size">
-              <Chip icon={Math.round(ad.output.zip.size / 1024) <= maxFileSize ? <DoneIcon /> : <ClearIcon />} label={`${Math.round(ad.output.zip.size / 1024)} KB`} color={Math.round(ad.output.zip.size / 1024) <= maxFileSize ? "success" : "error"} />
-            </Tooltip>
-          </Box>
-          {/*<Box>
-            <Typography sx={{ marginBottom: "10px" }} variant="body2">
-              Optimizations:
-            </Typography>
-            <Tooltip title="Optimizations">
-              <Box display="flex" flexWrap="wrap" gap="5px">
-                <Chip icon={ad.output.html.optimizations.image ? <DoneIcon /> : <ClearIcon />} label="Images" />
-                <Chip icon={<DoneIcon />} label="Fonts" />
-                <Chip icon={ad.output.html.optimizations.js ? <DoneIcon /> : <ClearIcon />} label="Code" />
+        {
+          ad.output?.zip?.size
+          ? <>
+              <Box marginBottom="20px">
+                <Tooltip title="Bundle size">
+                  <Chip icon={Math.round(ad.output.zip.size / 1024) <= maxFileSize ? <DoneIcon /> : <ClearIcon />} label={`${Math.round(ad.output.zip.size / 1024)} KB`} color={Math.round(ad.output.zip.size / 1024) <= maxFileSize ? "success" : "error"} />
+                </Tooltip>
               </Box>
-            </Tooltip>
-          </Box>*/}
-        </Box>
-
-        <Divider light sx={{margin: "20px 0"}} />
-
+              <Divider light sx={{margin: "20px 0"}} />
+            </>
+          : <></>
+        }
         <Box display="flex" flexWrap="wrap" justifyContent="space-between">
           <Box>
             <Tooltip title="Reload">

diff --git a/src/preview/src/components/Previews.js b/src/preview/src/components/Previews.js
@@ -3,8 +3,9 @@ import styles from "./Previews.module.scss";
 import { useState, useMemo, useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
 
-import { ListSubheader, Box, Chip, FormControl, InputLabel, Card, CardMedia, CardContent, Button, Select, MenuItem, Typography, Stack, Pagination, TablePagination, AppBar, Toolbar, Checkbox, ListItemText, OutlinedInput, Tooltip } from "@mui/material";
+import { ListSubheader, Tooltip, Box, Chip, FormControl, InputLabel, Card, CardMedia, CardContent, Button, Select, MenuItem, Typography, Stack, Pagination, TablePagination, AppBar, Toolbar, Checkbox, ListItemText, OutlinedInput } from "@mui/material";
 import CancelIcon from "@mui/icons-material/Cancel";
+import CachedIcon from '@mui/icons-material/Cached';
 
 import { AdPreview } from "./AdPreview";
 
@@ -136,8 +137,6 @@ export default function Previews({ data }) {
     // set each filter's selected value based on the value from the event
     updatedFilters.flat().forEach((filter) => {
       if (filter.value === value) {
-        console.log("found the one to be deleted");
-        console.log(filter);
         filter.selected = false;
       }
     });
@@ -148,10 +147,16 @@ export default function Previews({ data }) {
   // handle button(s)
 
   const handleDownloadZips = (event) => {
-    console.log(event);
+    // console.log(event);
     window.open("all.zip");
   };
 
+  const handleReloadDynamicData = async e => {
+    const res = await fetch('reload_dynamic_data')
+    if (res.status === 200)
+      location.reload()
+  }
+
   // handle pages
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
@@ -171,13 +176,20 @@ export default function Previews({ data }) {
     <>
       <AppBar position="sticky">
         <Toolbar className={styles.toolbar}>
-          <Tooltip title={(new Date(data.timestamp)).toLocaleString()}>
+          <Box sx={{ display: 'flex', gap: '10px' }}>
+            {
+              data.isGoogleSpreadsheetBanner
+              ? <Tooltip title="Reload dynamic data">
+                  <Button onClick={handleReloadDynamicData} color="inherit">
+                    <CachedIcon />
+                  </Button>
+                </Tooltip>
+              : <></>
+            }
             <Typography align="left" variant="h5" component="div">
               Preview
             </Typography>
-          </Tooltip>
-
-          {/*<img src={"logo.png"}></img>*/}
+          </Box>
 
           <FormControl sx={{ m: 1, minWidth: 150, maxWidth: "40%" }}>
             <InputLabel id="demo-multiple-chip-label">Filters</InputLabel>

diff --git a/src/webpack/config/createConfig.js b/src/webpack/config/createConfig.js
@@ -45,15 +45,9 @@ module.exports = function createConfig({
     stats: false,
   },
 }) {
-  let devtool = false;
+  const devtool = mode === DevEnum.PRODUCTION ? false : "inline-source-map"; // 7% improvement on dev times if false
   const entry = [];
 
-  if (mode === DevEnum.PRODUCTION) {
-    devtool = false;
-  } else if (mode === DevEnum.DEVELOPMENT) {
-    devtool = "inline-source-map";
-  }
-
   let namedHashing = richmediarc.settings.useOriginalFileNames ? "[name]" : "[name]_[contenthash]";
   let optimizations = getOptimisationsFromConfig(richmediarc);
   let browserCompiler = richmediarc.settings.browserSupport ? richmediarc.settings.browserSupport : ["ie 11", "last 2 versions", "safari >= 7"];
@@ -128,7 +122,7 @@ module.exports = function createConfig({
           use: function () {
             let loaderArray = [];
 
-            if (richmediarc.settings.optimizations.js) {
+            if (mode === DevEnum.PRODUCTION && richmediarc.settings.optimizations.js) {
               loaderArray.push({
                 loader: "esbuild-loader",
                 options: {
@@ -181,7 +175,7 @@ module.exports = function createConfig({
             {
               loader: "html-loader",
               options: {
-                minimize: optimizations.html,
+                minimize: mode === DevEnum.PRODUCTION && optimizations.html,
                 esModule: false,
               },
             },
@@ -267,7 +261,7 @@ module.exports = function createConfig({
               },
             ];
 
-            if (optimizations.image && !richmediarc.settings.optimizeToFileSize) {
+            if (mode === DevEnum.PRODUCTION && (optimizations.image && !richmediarc.settings.optimizeToFileSize)) {
               // don't optimize images if optimizeToFileSize is set to true
               imageLoadersArray.push({
                 loader: path.resolve(path.join(__dirname, "../loader/ImageOptimizeLoader.js")),
@@ -330,7 +324,7 @@ module.exports = function createConfig({
     plugins: [
       new HtmlWebpackPlugin({
         template: richmediarc.settings.entry.html,
-        minify: optimizations.html,
+        minify: mode === DevEnum.PRODUCTION && optimizations.html,
         filename: "./index.html",
       }),
       new HtmlWebpackInlineSVGPlugin({
@@ -363,7 +357,8 @@ module.exports = function createConfig({
     );
   }
 
-  if (richmediarc.settings.type === "flashtalking") {
+  if (mode === DevEnum.PRODUCTION && richmediarc.settings.type === "flashtalking") {
+
     console.log("found flashtalking ad");
 
     const outputString = `FT.manifest({
@@ -382,7 +377,7 @@ module.exports = function createConfig({
     );
   }
 
-  if (richmediarc.settings.type === "adform") {
+  if (mode === DevEnum.PRODUCTION && richmediarc.settings.type === "adform") {
     let clickTags = richmediarc.settings.clickTags || { clickTAG: "http://www.adform.com" };
     let obj = {
       version: "1.0",
@@ -410,17 +405,18 @@ module.exports = function createConfig({
   }
 
   config.optimization = {
-    minimize: true,
+    minimize: mode === DevEnum.PRODUCTION,
     minimizer: [],
   };
 
-  if (optimizations.js) {
+  if (mode === DevEnum.PRODUCTION && optimizations.js) {
     config.optimization.splitChunks = {
       chunks: "async",
     };
 
     config.optimization.minimizer.push(
       new TerserPlugin({
+        // minify: TerserPlugin.esbuildMinify,
         extractComments: false,
       })
     );

diff --git a/src/webpack/devServer.js b/src/webpack/devServer.js
@@ -15,7 +15,6 @@ const createObjectFromJSONPath = require('../util/createObjectFromJSONPath');
 const getDataFromGoogleSpreadsheet = require('../util/getDataFromGoogleSpreadsheet');
 const removeTempRichmediaRc = require('../util/removeTempRichmediaRc');
 
-const getTemplate = require('../util/getPreviewTemplate');
 const getNameFromLocation = require('../util/getNameFromLocation');
 
 /**
@@ -27,13 +26,12 @@ module.exports = async function devServer(configs, openLocation = true) {
   const webpackConfigList = configs.map(({ webpack }) => webpack);
   const settingsList = configs.map(({ settings }) => settings);
   const port = await portfinder.getPortPromise();
-  const template = await getTemplate();
 
   const httpLocation = `http://localhost:${port}`;
 
   if (openLocation) {
     // opener
-    open(httpLocation);
+    open(`${httpLocation}?gsdevtools=true`);
   }
 
   console.log(`${chalk.blue('i')} Server running. Please go to ${httpLocation}
@@ -69,42 +67,30 @@ ${chalk.grey.bold('-------------------------------------------------------')}
         path: `/${name}/${hmrPath}`,
       }),
     );
-
-    app.use('/static', express.static(path.join(__dirname, '../data/static')));
   });
 
-  app.get('/', (req, res) => {
-    const templateConfig = {
-      banner: settingsList.map(value => {
-        const name = getNameFromLocation(value.location);
-        let width = value.data.settings.size.width;
-        let height = value.data.settings.size.height;
-        let title = name;
-        const isDevelopment = true;
-
-        if (value.data.settings.expandable) {
-          width = value.data.settings.expandable.width;
-          height = value.data.settings.expandable.height;
-          title += `_EXP_${width}x${height}`;
-        }
+  app.use('/', express.static(path.join(__dirname, '../preview/dist')));
 
+  app.get('/data/ads.json', (req, res) => {
+    res.json({
+      isGoogleSpreadsheetBanner: typeof configs[0].settings.data.settings.contentSource !== 'undefined',
+      ads: settingsList.map(e => {
+        const assetName = getNameFromLocation(e.location)
+        const bundleName = e.data.settings.bundleName || getNameFromLocation(e.location)
+        const url = `${httpLocation}/${assetName}/index.html`
         return {
-          src: `./${name}/`,
-          name,
-          title,
-          width,
-          height,
-          isDevelopment,
-        };
-      }),
-      query: req.query,
-      settings: {
-        isGoogleSpreadsheetBanner: typeof configs[0].settings.data.settings.contentSource !== 'undefined'
-      },
-    };
-
-    res.send(template(templateConfig));
-  });
+          url,
+          ...e.data.settings.size,
+          bundleName,
+          output: {
+            html: {
+              url,
+            },
+          },
+        }
+      })
+    })
+  })
 
   app.get("/reload_dynamic_data", async function (req, res) {
     const contentSource = configs[0].settings.data.settings.contentSource;