Refactor code structure for improved readability and maintainability

Author: bernaferrari

apps/debug/package.json

@@ -17,8 +17,8 @@
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.10",
-    "@types/node": "^22.15.32",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@types/node": "^24.0.4",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "eslint-config-custom": "workspace:*",

apps/plugin/package.json

@@ -15,23 +15,23 @@
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "lucide-react": "^0.483.0",
-    "motion": "^12.18.1",
+    "motion": "^12.19.1",
     "nanoid": "^5.1.5",
     "plugin-ui": "workspace:*",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.10",
-    "@types/node": "^22.15.32",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@types/node": "^24.0.4",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "@typescript-eslint/eslint-plugin": "^8.34.1",
-    "@typescript-eslint/parser": "^8.34.1",
-    "@vitejs/plugin-react": "^4.5.2",
+    "@typescript-eslint/eslint-plugin": "^8.35.0",
+    "@typescript-eslint/parser": "^8.35.0",
+    "@vitejs/plugin-react": "^4.6.0",
     "@vitejs/plugin-react-swc": "^3.10.2",
-    "concurrently": "^9.1.2",
+    "concurrently": "^9.2.0",
     "esbuild": "^0.25.5",
     "eslint-config-custom": "workspace:*",
     "eslint-plugin-react-hooks": "^5.2.0",

package.json

@@ -12,7 +12,7 @@
   "devDependencies": {
     "eslint": "^9.29.0",
     "eslint-config-custom": "workspace:*",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "turbo": "^2.5.4",
     "typescript": "^5.8.3"
   }

packages/backend/src/common/images.ts

@@ -48,15 +48,10 @@ const createCanvasImageUrl = (width: number, height: number): string => {
   return URL.createObjectURL(file);
 };
 
-export const getPlaceholderImage = (w: number, h = -1, useCanvas = false) => {
+export const getPlaceholderImage = (w: number, h = -1) => {
   const _w = w.toFixed(0);
   const _h = (h < 0 ? w : h).toFixed(0);
 
-  console.log("useCanvas", useCanvas);
-  if (useCanvas) {
-    return createCanvasImageUrl(parseInt(_w), parseInt(_h));
-  }
-
   return `${PLACEHOLDER_IMAGE_DOMAIN}/${_w}x${_h}`;
 };
 

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

@@ -214,8 +214,8 @@ export const flutterAngularGradient = (fill: GradientPaint): string => {
 /**
  * Convert opacity (0-1) to alpha (0-255)
  */
-const opacityToAlpha = (opacity: number): number => {
-  return Math.round(opacity * 255);
+const opacityToAlpha = (opacity: number) => {
+  return numberToFixedString(opacity);
 };
 
 export const flutterColor = (

packages/backend/src/flutter/flutterMain.ts

@@ -15,7 +15,6 @@ import {
 } from "./builderImpl/flutterAutoLayout";
 import { PluginSettings } from "types";
 import { addWarning } from "../common/commonConversionWarnings";
-import { getPlaceholderImage } from "../common/images";
 import { getVisibleNodes } from "../common/nodeVisibility";
 
 let localSettings: PluginSettings;

packages/backend/src/html/htmlMain.ts

@@ -617,8 +617,7 @@ const htmlContainer = async (
       ) {
         imgUrl = (await exportNodeAsBase64PNG(altNode, hasChildren)) ?? "";
       } else {
-        console.log("isPreviewGlobal", isPreviewGlobal);
-        imgUrl = getPlaceholderImage(node.width, node.height, isPreviewGlobal);
+        imgUrl = getPlaceholderImage(node.width, node.height);
         console.log("imgUrl", imgUrl);
       }
 

packages/plugin-ui/package.json

@@ -19,7 +19,7 @@
     "react": "^19.1.0",
     "react-syntax-highlighter": "^15.6.1",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.10"
+    "tailwindcss": "^4.1.11"
   },
   "devDependencies": {
     "eslint": "^9.29.0",

packages/plugin-ui/src/components/Preview.tsx

@@ -9,7 +9,7 @@ import {
   Ruler,
   Monitor,
 } from "lucide-react";
-import { cn } from "../lib/utils";
+import { cn, replaceExternalImagesWithCanvas } from "../lib/utils";
 
 // Update the component props to receive state from parent
 const Preview: React.FC<{
@@ -184,7 +184,7 @@ const Preview: React.FC<{
                     transition: "all 0.3s ease",
                   }}
                   dangerouslySetInnerHTML={{
-                    __html: htmlPreview.content,
+                    __html: replaceExternalImagesWithCanvas(htmlPreview.content),
                   }}
                 />
               </div>

packages/plugin-ui/src/lib/utils.ts

@@ -4,3 +4,39 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+const createCanvasImageUrl = (width: number, height: number): string => {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return `https://placehold.co/${width}x${height}`;
+  }
+
+  ctx.fillStyle = "#f5f5f5";
+  ctx.fillRect(0, 0, width, height);
+
+  const fontSize = Math.max(12, Math.floor(width * 0.15));
+  ctx.font = `bold ${fontSize}px Inter, Arial, Helvetica, sans-serif`;
+  ctx.fillStyle = "#888888";
+
+  const text = `${width} x ${height}`;
+  const textWidth = ctx.measureText(text).width;
+  const x = (width - textWidth) / 2;
+  const y = (height + fontSize) / 2;
+
+  ctx.fillText(text, x, y);
+
+  return canvas.toDataURL();
+};
+
+export function replaceExternalImagesWithCanvas(html: string): string {
+  return html.replace(
+    /https:\/\/placehold\.co\/(\d+)x(\d+)/g,
+    (_match, width, height) => {
+      return createCanvasImageUrl(parseInt(width), parseInt(height));
+    }
+  );
+}