feat: rewrite the main pipeline

Author: Justineo

packages/extension/mcp/tools/code/assets/export.ts

@@ -0,0 +1,29 @@
+import type { AssetDescriptor } from '@tempad-dev/mcp-shared'
+
+import type { CodegenConfig } from '@/utils/codegen'
+
+import type { VisibleTree } from '../model'
+import type { AssetPlan } from './plan'
+import type { SvgEntry } from './vector'
+
+import { exportSvgEntry } from './vector'
+
+export async function exportVectorAssets(
+  tree: VisibleTree,
+  plan: AssetPlan,
+  config: CodegenConfig,
+  assetRegistry: Map<string, AssetDescriptor>
+): Promise<Map<string, SvgEntry>> {
+  const svgs = new Map<string, SvgEntry>()
+  for (const id of plan.vectorRoots) {
+    const snapshot = tree.nodes.get(id)
+    if (!snapshot) continue
+    const node = snapshot.node
+    const { width, height } = snapshot.bounds
+    if (width <= 0 && height <= 0 && !snapshot.renderBounds) continue
+    const entry = await exportSvgEntry(node, config, assetRegistry)
+    if (!entry) continue
+    svgs.set(id, entry)
+  }
+  return svgs
+}

packages/extension/mcp/tools/code/assets/image.ts

@@ -4,6 +4,7 @@ import type { CodegenConfig } from '@/utils/codegen'
 
 import { ensureAssetUploaded } from '@/mcp/assets'
 import { BG_URL_RE } from '@/utils/css'
+import { toDecimalPlace } from '@/utils/number'
 
 const imageBytesCache = new Map<string, Promise<Uint8Array>>()
 
@@ -55,8 +56,12 @@ function replaceImageUrlsWithPlaceholder(
   let w = 100
   let h = 100
 
-  if ('width' in node && typeof node.width === 'number') w = Math.round(node.width * scale)
-  if ('height' in node && typeof node.height === 'number') h = Math.round(node.height * scale)
+  if ('width' in node && typeof node.width === 'number') {
+    w = Math.round(toDecimalPlace(node.width) * scale)
+  }
+  if ('height' in node && typeof node.height === 'number') {
+    h = Math.round(toDecimalPlace(node.height) * scale)
+  }
 
   const placeholderUrl = `https://placehold.co/${w}x${h}`
   const result = { ...style }

packages/extension/mcp/tools/code/assets/index.ts

@@ -1,2 +1,4 @@
 export * from './vector'
 export * from './image'
+export * from './plan'
+export * from './export'

packages/extension/mcp/tools/code/assets/plan.ts

@@ -0,0 +1,75 @@
+import type { NodeSnapshot, VisibleTree } from '../model'
+
+export type AssetPlan = {
+  vectorRoots: Set<string>
+}
+
+export function planAssets(tree: VisibleTree): AssetPlan {
+  const vectorRoots = new Set<string>()
+  const skipped = new Set<string>()
+  const vectorInfo = computeVectorInfo(tree)
+
+  for (const id of tree.order) {
+    if (skipped.has(id)) continue
+    const node = tree.nodes.get(id)
+    if (!node) continue
+
+    const children = node.children
+      .map((childId) => tree.nodes.get(childId))
+      .filter(Boolean) as NodeSnapshot[]
+
+    const info = vectorInfo.get(id)
+    const isVectorGroup = !!info && info.allVector && info.leafCount > 1 && node.children.length > 1
+
+    if (isVectorGroup) {
+      vectorRoots.add(id)
+      children.forEach((child) => skipDescendants(child.id, tree, skipped))
+      continue
+    }
+
+    if (node.assetKind === 'vector') {
+      vectorRoots.add(id)
+    }
+  }
+
+  return { vectorRoots }
+}
+
+function computeVectorInfo(
+  tree: VisibleTree
+): Map<string, { allVector: boolean; leafCount: number }> {
+  const info = new Map<string, { allVector: boolean; leafCount: number }>()
+
+  for (let i = tree.order.length - 1; i >= 0; i--) {
+    const id = tree.order[i]
+    const node = tree.nodes.get(id)
+    if (!node) continue
+
+    if (!node.children.length) {
+      const isVector = node.assetKind === 'vector'
+      info.set(id, { allVector: isVector, leafCount: isVector ? 1 : 0 })
+      continue
+    }
+
+    let allVector = true
+    let leafCount = 0
+    for (const childId of node.children) {
+      const childInfo = info.get(childId)
+      if (!childInfo || !childInfo.allVector) {
+        allVector = false
+      }
+      if (childInfo) leafCount += childInfo.leafCount
+    }
+    info.set(id, { allVector, leafCount })
+  }
+
+  return info
+}
+
+function skipDescendants(id: string, tree: VisibleTree, skipped: Set<string>): void {
+  const node = tree.nodes.get(id)
+  if (!node) return
+  if (skipped.has(id)) return
+  skipped.add(id)
+  node.children.forEach((childId) => skipDescendants(childId, tree, skipped))
+}

packages/extension/mcp/tools/code/assets/vector.ts

@@ -4,6 +4,7 @@ import type { CodegenConfig } from '@/utils/codegen'
 
 import { ensureAssetUploaded } from '@/mcp/assets'
 import { normalizeCssValue } from '@/utils/css'
+import { toDecimalPlace } from '@/utils/number'
 
 export type SvgEntry = {
   props: Record<string, string>
@@ -29,8 +30,8 @@ export async function exportSvgEntry(
     }
     try {
       const asset = await ensureAssetUploaded(svgUint8, 'image/svg+xml', {
-        width: Math.round(node.width),
-        height: Math.round(node.height)
+        width: Math.round(toDecimalPlace(node.width)),
+        height: Math.round(toDecimalPlace(node.height))
       })
       assetRegistry.set(asset.hash, asset)
       baseProps['data-resource-uri'] = asset.resourceUri
@@ -41,7 +42,13 @@ export async function exportSvgEntry(
     }
   } catch (error) {
     console.warn('[tempad-dev] Failed to export vector node:', error)
-    return null
+    return {
+      props: {
+        width: `${toDecimalPlace(node.width)}px`,
+        height: `${toDecimalPlace(node.height)}px`
+      },
+      raw: '<svg></svg>'
+    }
   }
 }