Extracted placeholder image url to reduce duplicated code. (#176)

* Extracted placeholder image url to reduce duplicated code.

* refactor to how images are built in HTML builder

* linter fix

Author: mimshwright

packages/backend/src/common/images.ts

@@ -0,0 +1,7 @@
+export const PLACEHOLDER_IMAGE_DOMAIN = "https://placehold.co";
+
+export const getPlaceholderImage = (w: number, h = -1) => {
+  const _w = w.toFixed(0);
+  const _h = (h < 0 ? w : h).toFixed(0);
+  return `${PLACEHOLDER_IMAGE_DOMAIN}/${_w}x${_h}`;
+};

packages/backend/src/flutter/builderImpl/flutterColor.ts

@@ -6,6 +6,7 @@ import {
 } from "../../common/numToAutoFixed";
 import { retrieveTopFill } from "../../common/retrieveFill";
 import { nearestValue } from "../../tailwind/conversionTables";
+import { getPlaceholderImage } from "../../common/images";
 
 /**
  * Retrieve the SOLID color for Flutter when existent, otherwise ""
@@ -56,9 +57,7 @@ export const flutterBoxDecorationColor = (
 export const flutterDecorationImage = (node: SceneNode, fill: ImagePaint) => {
   addWarning("Image fills are replaced with placeholders");
   return generateWidgetCode("DecorationImage", {
-    image: `NetworkImage("https://placehold.co/${node.width.toFixed(
-      0,
-    )}x${node.height.toFixed(0)}")`,
+    image: `NetworkImage("${getPlaceholderImage(node.width, node.height)}")`,
     fit: fitToBoxFit(fill),
   });
 };

packages/backend/src/flutter/flutterMain.ts

@@ -14,6 +14,7 @@ import {
 import { commonSortChildrenWhenInferredAutoLayout } from "../common/commonChildrenOrder";
 import { PluginSettings } from "types";
 import { addWarning } from "../common/commonConversionWarnings";
+import { getPlaceholderImage } from "../common/images";
 
 let localSettings: PluginSettings;
 let previousExecutionCache: string[];
@@ -148,9 +149,7 @@ const flutterContainer = (node: SceneNode, child: string): string => {
   let image = "";
   if ("fills" in node && retrieveTopFill(node.fills)?.type === "IMAGE") {
     addWarning("Image fills are replaced with placeholders");
-    image = `Image.network("https://placehold.co/${node.width.toFixed(
-      0,
-    )}x${node.height.toFixed(0)}")`;
+    image = `Image.network("${getPlaceholderImage(node.width, node.height)}")`;
   }
 
   if (child.length > 0) {

packages/backend/src/html/htmlMain.ts

@@ -9,6 +9,7 @@ import { addWarning } from "../common/commonConversionWarnings";
 import { PluginSettings, HTMLPreview, AltNode, HTMLSettings } from "types";
 import { renderAndAttachSVG } from "../altNodes/altNodeUtils";
 import { getVisibleNodes } from "../common/nodeVisibility";
+import { getPlaceholderImage } from "../common/images";
 
 const selfClosingTags = ["img"];
 
@@ -211,7 +212,10 @@ const htmlFrame = async (
   }
 };
 
-const htmlAsset = (node: SceneNode, settings: HTMLSettings): string => {
+const htmlAsset = async (
+  node: SceneNode,
+  settings: HTMLSettings,
+): Promise<string> => {
   if (!("opacity" in node) || !("layoutAlign" in node) || !("fills" in node)) {
     return "";
   }
@@ -220,21 +224,13 @@ const htmlAsset = (node: SceneNode, settings: HTMLSettings): string => {
     .commonPositionStyles()
     .commonShapeStyles();
 
-  let tag = "div";
-  let src = "";
   if (retrieveTopFill(node.fills)?.type === "IMAGE") {
     addWarning("Image fills are replaced with placeholders");
-    tag = "img";
-    src = ` src="https://placehold.co/$${node.width.toFixed(
-      0,
-    )}x${node.height.toFixed(0)}"`;
+    const imgUrl = getPlaceholderImage(node.width, node.height);
+    return `\n<img${builder.build()} src="${imgUrl}" />`;
   }
 
-  if (tag === "div") {
-    return `\n<div${builder.build()}${src}></div>`;
-  }
-
-  return `\n<${tag}${builder.build()}${src} />`;
+  return `\n<div${builder.build()}></div>`;
 };
 
 // properties named propSomething always take care of ","
@@ -266,20 +262,13 @@ const htmlContainer = (
     let src = "";
     if (retrieveTopFill(node.fills)?.type === "IMAGE") {
       addWarning("Image fills are replaced with placeholders");
+      const imageURL = getPlaceholderImage(node.width, node.height);
       if (!("children" in node) || node.children.length === 0) {
         tag = "img";
-        src = ` src="https://placehold.co/${node.width.toFixed(
-          0,
-        )}x${node.height.toFixed(0)}"`;
+        src = ` src="${imageURL}"`;
       } else {
         builder.addStyles(
-          formatWithJSX(
-            "background-image",
-            settings.jsx,
-            `url(https://placehold.co/${node.width.toFixed(
-              0,
-            )}x${node.height.toFixed(0)})`,
-          ),
+          formatWithJSX("background-image", settings.jsx, `url(${imageURL})`),
         );
       }
     }

packages/backend/src/swiftui/builderImpl/swiftuiColor.ts

@@ -3,6 +3,7 @@ import { gradientAngle } from "../../common/color";
 import { nearestValue } from "../../tailwind/conversionTables";
 import { numberToFixedString } from "../../common/numToAutoFixed";
 import { addWarning } from "../../common/commonConversionWarnings";
+import { getPlaceholderImage } from "../../common/images";
 
 export const swiftUISolidColor = (fill: Paint): string => {
   if (fill && fill.type === "SOLID") {
@@ -60,9 +61,7 @@ export const swiftuiBackground = (
     return swiftuiGradient(fill);
   } else if (fill?.type === "IMAGE") {
     addWarning("Image fills are replaced with placeholders");
-    return `AsyncImage(url: URL(string: "https://placehold.co/${node.width.toFixed(
-      0,
-    )}x${node.height.toFixed(0)}"))`;
+    return `AsyncImage(url: URL(string: "${getPlaceholderImage(node.width, node.height)}"))`;
   }
 
   return "";

packages/backend/src/tailwind/tailwindMain.ts

@@ -8,6 +8,7 @@ import { AltNode, PluginSettings, TailwindSettings } from "types";
 import { addWarning } from "../common/commonConversionWarnings";
 import { renderAndAttachSVG } from "../altNodes/altNodeUtils";
 import { getVisibleNodes } from "../common/nodeVisibility";
+import { getPlaceholderImage } from "../common/images";
 
 export let localTailwindSettings: PluginSettings;
 
@@ -232,17 +233,12 @@ export const tailwindContainer = (
     let src = "";
     if (retrieveTopFill(node.fills)?.type === "IMAGE") {
       addWarning("Image fills are replaced with placeholders");
+      const imageURL = getPlaceholderImage(node.width, node.height);
       if (!("children" in node) || node.children.length === 0) {
         tag = "img";
-        src = ` src="https://placehold.co/${node.width.toFixed(
-          0,
-        )}x${node.height.toFixed(0)}"`;
+        src = ` src="${imageURL}"`;
       } else {
-        builder.addAttributes(
-          `bg-[url(https://placehold.co/${node.width.toFixed(
-            0,
-          )}x${node.height.toFixed(0)})]`,
-        );
+        builder.addAttributes(`bg-[url(${imageURL})]`);
       }
     }