helpers.js

@@ -11,6 +11,7 @@ import {buildHubspotEmail} from "./platforms/hubspot/hubspot-email-adapter.js";
 import {buildHubspotPage} from "./platforms/hubspot/hubspot-page-adapter.js";
 import fs from "fs/promises";
 import fetch from "node-fetch";
+import mime from "mime-types";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -180,7 +181,14 @@ export function removeCommentsFromJs(content) {
 }
 
 export async function uploadFile(filePath, uploadUrl, validator) {
-  let body = await fs.readFile(filePath, {encoding: 'utf8'});
+  const options = {};
+
+  const contentType = mime.lookup(filePath);
+  if (['text/css', 'application/javascript'].includes(contentType)) {
+    options.encoding = 'utf8';
+  }
+
+  let body = await fs.readFile(filePath, options);
 
   if (validator) {
     body = validator(body);
@@ -190,11 +198,12 @@ export async function uploadFile(filePath, uploadUrl, validator) {
     const response = await fetch(uploadUrl, {
       method: 'PUT',
       body: body,
-      headers: {'Content-Type': 'application/javascript'}
+      headers: {'Content-Type': contentType}
     });
 
     return response.status !== 200;
   } catch (err) {
+    console.log(err)
     const fileName = filePath.split('/').pop();
     throw new Error(`Can't upload "${fileName}" file. Server permission error.`);
   }
@@ -235,3 +244,11 @@ export async function isFileEmpty(filePath, ignoreComments = false) {
 
   return true;
 }
+
+export function replaceNames(content, images, uploadedImages) {
+  images.forEach((image, index) => {
+    content = content.replace(image, uploadedImages[index].fileName);
+  });
+
+  return content;
+}

package.json

@@ -7,9 +7,9 @@
 		"url": "https://axe-web.com/"
 	},
 	"scripts": {
-		"info": "NODE_ENV=development BLOCK_NAME=content MODULE_PATH= node debug.js",
-		"dev": "NODE_ENV=development BLOCK_NAME=content MODULE_PATH= node server.js",
-		"build-platform": "NODE_ENV=development BLOCK_NAME=content MODULE_PATH= node ./build.js",
+		"info": "NODE_ENV=development BLOCK_NAME=buttons MODULE_PATH= node debug.js",
+		"dev": "NODE_ENV=development BLOCK_NAME=buttons MODULE_PATH= node server.js",
+		"build-platform": "NODE_ENV=development BLOCK_NAME=buttons MODULE_PATH= node ./build.js",
 		"dev-dev-tool": "NODE_ENV=development rollup --config rollup.config.js --watch",
 		"build-dev-tool": "rollup --config rollup.config.js"
 	},
@@ -37,6 +37,7 @@
 		"lodash-es": "^4.17.21",
 		"mem-fs": "^2.2.1",
 		"mem-fs-editor": "^9.5.0",
+		"mime-types": "^2.1.35",
 		"ngrok": "^5.0.0-beta.2",
 		"node-fetch": "^3.2.10",
 		"open": "^8.4.0",

server.js

@@ -29,6 +29,7 @@ import {
   readJSONFile,
   removeCommentsFromCss,
   removeCommentsFromJs,
+  replaceNames,
   uploadFile,
   zipProject
 } from "./helpers.js";
@@ -139,18 +140,24 @@ app.get('/view/:baseView', (req, res) => {
 app.get('/publish', async (req, res) => {
   const data = await readJSONFile(path.join(projectPath, `block.json`));
 
-  data.static_files = {
-    css: getBlockName(data.name).name + '.min.css',
-    js: getBlockName(data.name).name + '.min.js',
-    images: await getImagesList(path.join(projectPath, 'src', 'images')),
-  }
+  // Trigger build on the registry server only if the type of the unit is `foundation` or `component`.
+  const uploadStaticFiles = ['foundation', 'component'].includes(data.type);
 
-  if (await isFileEmpty(path.join(projectPath, `src/scripts`, data.static_files.js), true)) {
-    delete data.static_files.js;
-  }
+  // Prepare list of static files for the registry server.
+  if (uploadStaticFiles) {
+    data.static_files = {
+      css: getBlockName(data.name).name + '.min.css',
+      js: getBlockName(data.name).name + '.min.js',
+      images: await getImagesList(path.join(projectPath, 'src', 'images')),
+    }
 
-  if (!data.static_files.images.length) {
-    delete data.static_files.images;
+    if (await isFileEmpty(path.join(projectPath, `src/scripts`, data.static_files.js), true)) {
+      delete data.static_files.js;
+    }
+
+    if (!data.static_files.images.length) {
+      delete data.static_files.images;
+    }
   }
 
   let responseData = {
@@ -183,25 +190,36 @@ app.get('/publish', async (req, res) => {
       await uploadFile(path.join(projectPath, 'dist.zip'), responseData.uploadBundleUrl); // Bundle
     }
 
-    // TODO: Upload CSS/JS/Images files only if the type of the unit is `foundation` or `component`.
-    if (responseData.staticFilesUrls.css) {
-      await uploadFile(
-        path.join(projectPath, 'src/styles', data.static_files.css),
-        responseData.staticFilesUrls.css.uploadUrl,
-        (data) => removeCommentsFromCss(data)); // CSS
-    }
+    if (uploadStaticFiles) {
+      if (responseData.staticFilesUrls.css) {
+        await uploadFile(
+          path.join(projectPath, 'src/styles', data.static_files.css),
+          responseData.staticFilesUrls.css.uploadUrl,
+          (content) => {
+            if (responseData.staticFilesUrls.images) {
+              content = replaceNames(content, data.static_files.images, responseData.staticFilesUrls.images);
+            }
 
-    if (responseData.staticFilesUrls.js) {
-      await uploadFile(
-        path.join(projectPath, 'src/scripts', data.static_files.js),
-        responseData.staticFilesUrls.js.uploadUrl,
-        (data) => removeCommentsFromJs(data)); // JS
-    }
+            removeCommentsFromCss(content)
+            return content;
+          }); // CSS
+      }
 
-    if (responseData.staticFilesUrls.images) {
-      for (let i = 0; i < data.static_files.images.length; i++) {
-        await uploadFile(path.join(projectPath, 'src/images', data.static_files.images[i]),
-          responseData.staticFilesUrls.images[i].uploadUrl); // Images
+      if (responseData.staticFilesUrls.js) {
+        await uploadFile(
+          path.join(projectPath, 'src/scripts', data.static_files.js),
+          responseData.staticFilesUrls.js.uploadUrl,
+          (data) => removeCommentsFromJs(data)
+        ); // JS
+      }
+
+      if (responseData.staticFilesUrls.images) {
+        for (let i = 0; i < data.static_files.images.length; i++) {
+          await uploadFile(
+            path.join(projectPath, 'src/images', data.static_files.images[i]),
+            responseData.staticFilesUrls.images[i].uploadUrl,
+          ); // Images
+        }
       }
     }
   } catch (err) {
@@ -214,12 +232,14 @@ app.get('/publish', async (req, res) => {
 
   await fs.unlink(path.join(projectPath, 'dist.zip')); // Remove local bundle
 
-  // TODO: Trigger build on the registry server only if the type of the unit is `foundation` or `component`.
-  try {
-    await triggerGlobalProjectFilesBuild(getBlockName(data.name).project);
-  } catch (err) {
-    res.json({success: false, message: 'Something wrong with Project Builder.'});
-    return;
+  // Trigger project's global files build on the registry server.
+  if (uploadStaticFiles) {
+    try {
+      await triggerGlobalProjectFilesBuild(getBlockName(data.name).project);
+    } catch (err) {
+      res.json({success: false, message: 'Something wrong with Project Builder.'});
+      return;
+    }
   }
 
   res.json({success: true});