compose WIP

Author: bernaferrari

apps/plugin/plugin-src/code.ts

@@ -23,6 +23,7 @@ export const defaultPluginSettings: PluginSettings = {
   responsiveRoot: false,
   flutterGenerationMode: "snippet",
   swiftUIGenerationMode: "snippet",
+  composeGenerationMode: "snippet",
   roundTailwindValues: true,
   roundTailwindColors: true,
   useColorVariables: true,

packages/backend/src/common/images.ts

@@ -7,24 +7,25 @@ export const PLACEHOLDER_IMAGE_DOMAIN = "https://placehold.co";
 
 const createCanvasImageUrl = (width: number, height: number): string => {
   // Check if we're in a browser environment
-  if (typeof document === 'undefined' || typeof window === 'undefined') {
+  console.log("typeof document", typeof document);
+  if (typeof document === "undefined" || typeof window === "undefined") {
     // Fallback for non-browser environments
     return `${PLACEHOLDER_IMAGE_DOMAIN}/${width}x${height}`;
   }
 
-  const canvas = document.createElement('canvas');
+  const canvas = document.createElement("canvas");
   canvas.width = width;
   canvas.height = height;
 
-  const ctx = canvas.getContext('2d');
+  const ctx = canvas.getContext("2d");
   if (!ctx) {
     // Fallback if canvas context is not available
     return `${PLACEHOLDER_IMAGE_DOMAIN}/${width}x${height}`;
   }
 
   const fontSize = Math.max(12, Math.floor(width * 0.15));
   ctx.font = `bold ${fontSize}px Inter, Arial, Helvetica, sans-serif`;
-  ctx.fillStyle = '#888888';
+  ctx.fillStyle = "#888888";
 
   const text = `${width} x ${height}`;
   const textWidth = ctx.measureText(text).width;
@@ -42,19 +43,20 @@ const createCanvasImageUrl = (width: number, height: number): string => {
   }
   const byteArray = new Uint8Array(byteNumbers);
   const file = new Blob([byteArray], {
-    type: 'image/png;base64',
+    type: "image/png;base64",
   });
   return URL.createObjectURL(file);
 };
 
 export const getPlaceholderImage = (w: number, h = -1, useCanvas = false) => {
   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/common/retrieveUI/convertToCode.ts

@@ -1,4 +1,5 @@
 import { PluginSettings } from "types";
+import { composeMain } from "../../compose/composeMain";
 import { flutterMain } from "../../flutter/flutterMain";
 import { htmlMain } from "../../html/htmlMain";
 import { swiftuiMain } from "../../swiftui/swiftuiMain";
@@ -15,6 +16,8 @@ export const convertToCode = async (
       return await flutterMain(nodes, settings);
     case "SwiftUI":
       return await swiftuiMain(nodes, settings);
+    case "Compose":
+      return composeMain(nodes, settings);
     case "HTML":
     default:
       return (await htmlMain(nodes, settings)).html;

packages/backend/src/compose/builderImpl/composeAutoLayout.ts

@@ -0,0 +1,99 @@
+export const getMainAxisAlignment = (
+  node: InferredAutoLayoutResult,
+): string => {
+  switch (node.primaryAxisAlignItems) {
+    case undefined:
+    case "MIN":
+      return "Arrangement.Start";
+    case "CENTER":
+      return "Arrangement.Center";
+    case "MAX":
+      return "Arrangement.End";
+    case "SPACE_BETWEEN":
+      return "Arrangement.SpaceBetween";
+  }
+};
+
+export const getCrossAxisAlignment = (
+  node: InferredAutoLayoutResult,
+): string => {
+  // For Row (horizontal layout), cross axis is vertical
+  // For Column (vertical layout), cross axis is horizontal
+  if (node.layoutMode === "HORIZONTAL") {
+    switch (node.counterAxisAlignItems) {
+      case undefined:
+      case "MIN":
+        return "Alignment.Top";
+      case "CENTER":
+        return "Alignment.CenterVertically";
+      case "MAX":
+        return "Alignment.Bottom";
+      case "BASELINE":
+        return "Alignment.CenterVertically"; // Compose doesn't have baseline alignment for Row
+    }
+  } else {
+    // VERTICAL layout mode
+    switch (node.counterAxisAlignItems) {
+      case undefined:
+      case "MIN":
+        return "Alignment.Start";
+      case "CENTER":
+        return "Alignment.CenterHorizontally";
+      case "MAX":
+        return "Alignment.End";
+      case "BASELINE":
+        return "Alignment.CenterHorizontally"; // Baseline not applicable for Column
+    }
+  }
+};
+
+export const getWrapAlignment = (
+  node: InferredAutoLayoutResult,
+): string => {
+  switch (node.primaryAxisAlignItems) {
+    case undefined:
+    case "MIN":
+      return "Arrangement.Start";
+    case "CENTER":
+      return "Arrangement.Center";
+    case "MAX":
+      return "Arrangement.End";
+    case "SPACE_BETWEEN":
+      return "Arrangement.SpaceBetween";
+  }
+};
+
+export const getWrapRunAlignment = (
+  node: InferredAutoLayoutResult,
+): string => {
+  if (node.counterAxisAlignContent === "SPACE_BETWEEN") {
+    return "Arrangement.SpaceBetween";
+  }
+  
+  // For FlowRow/FlowColumn, the cross axis alignment depends on layout mode
+  if (node.layoutMode === "HORIZONTAL") {
+    // FlowRow - vertical alignment
+    switch (node.counterAxisAlignItems) {
+      case undefined:
+      case "MIN":
+        return "Arrangement.Top";
+      case "CENTER":
+      case "BASELINE":
+        return "Arrangement.Center";
+      case "MAX":
+        return "Arrangement.Bottom";
+    }
+  } else {
+    // FlowColumn - horizontal alignment
+    switch (node.counterAxisAlignItems) {
+      case undefined:
+      case "MIN":
+        return "Arrangement.Start";
+      case "CENTER":
+      case "BASELINE":
+        return "Arrangement.Center";
+      case "MAX":
+        return "Arrangement.End";
+    }
+  }
+};

packages/backend/src/compose/builderImpl/composeBlend.ts

@@ -0,0 +1,104 @@
+import { AltNode } from "../../alt_api_types";
+import { numberToFixedString } from "../../common/numToAutoFixed";
+
+/**
+ * Handles opacity transformations for Jetpack Compose
+ * Maps to Modifier.alpha() in Compose
+ */
+export const composeOpacity = (
+  node: MinimalBlendMixin,
+  child: string,
+): string => {
+  if (node.opacity !== undefined && node.opacity !== 1 && child !== "") {
+    const opacity = numberToFixedString(node.opacity);
+    return `Box(
+    modifier = Modifier.alpha(${opacity}f)
+) {
+    ${child}
+}`;
+  }
+  return child;
+};
+
+/**
+ * Handles visibility transformations for Jetpack Compose
+ * Uses conditional rendering or alpha(0f) based on visibility
+ */
+export const composeVisibility = (node: SceneNode, child: string): string => {
+  // [when testing] node.visible can be undefined
+  if (node.visible !== undefined && !node.visible && child !== "") {
+    // In Compose, we can either use conditional rendering or set alpha to 0
+    // Using alpha(0f) to maintain layout space (similar to visibility: hidden in CSS)
+    return `Box(
+    modifier = Modifier.alpha(0f)
+) {
+    ${child}
+}`;
+  }
+  return child;
+};
+
+/**
+ * Handles rotation transformations for Jetpack Compose
+ * Maps to Modifier.rotate() in Compose
+ * Converts angles from degrees to the format expected by Compose
+ */
+export const composeRotation = (node: AltNode, child: string): string => {
+  if (
+    node.rotation !== undefined &&
+    child !== "" &&
+    Math.round(node.rotation) !== 0
+  ) {
+    const totalRotation = (node.rotation || 0) + (node.cumulativeRotation || 0);
+    
+    if (Math.round(totalRotation) === 0) {
+      return child;
+    }
+
+    const rotationDegrees = numberToFixedString(totalRotation);
+    return `Box(
+    modifier = Modifier.rotate(${rotationDegrees}f)
+) {
+    ${child}
+}`;
+  }
+  return child;
+};
+
+/**
+ * Combines multiple blend transformations into a single modifier chain
+ * This is more efficient than nesting multiple Box composables
+ */
+export const composeBlendModifiers = (node: AltNode, child: string): string => {
+  const modifiers: string[] = [];
+  
+  // Add opacity modifier
+  if (node.opacity !== undefined && node.opacity !== 1) {
+    const opacity = numberToFixedString(node.opacity);
+    modifiers.push(`alpha(${opacity}f)`);
+  }
+  
+  // Add visibility modifier (using alpha for invisible elements)
+  if (node.visible !== undefined && !node.visible) {
+    modifiers.push(`alpha(0f)`);
+  }
+  
+  // Add rotation modifier
+  const totalRotation = (node.rotation || 0) + (node.cumulativeRotation || 0);
+  if (Math.round(totalRotation) !== 0) {
+    const rotationDegrees = numberToFixedString(totalRotation);
+    modifiers.push(`rotate(${rotationDegrees}f)`);
+  }
+  
+  // If we have modifiers, wrap in Box with combined modifier chain
+  if (modifiers.length > 0 && child !== "") {
+    const modifierChain = `Modifier.${modifiers.join(".")}`;
+    return `Box(
+    modifier = ${modifierChain}
+) {
+    ${child}
+}`;
+  }
+  
+  return child;
+};