@nnao45/figma-use 0.1.0

package/packages/cli/src/render/render-from-string.ts

@@ -0,0 +1,121 @@
+import * as esbuild from 'esbuild'
+import * as React from 'react'
+
+import { sendCommand } from '../client.ts'
+import { loadVariablesIntoRegistry, isRegistryLoaded, preloadIcons, collectIcons } from './index.ts'
+import { renderWithWidgetApi } from './widget-renderer.ts'
+
+import type { NodeRef } from '../types.ts'
+
+const MOCK_RENDER_MODULE = `
+  export const Frame = 'frame'
+  export const Text = 'text'
+  export const Rectangle = 'rectangle'
+  export const Ellipse = 'ellipse'
+  export const Line = 'line'
+  export const Image = 'image'
+  export const SVG = 'svg'
+  export const Icon = (props) => ({ __icon: true, name: props.name, size: props.size, color: props.color })
+  export const View = 'frame'
+  export const Rect = 'rectangle'
+  export const Section = 'section'
+  export const Group = 'group'
+  export const defineComponent = (name, el) => () => el
+  export const defineVars = (vars) => Object.fromEntries(Object.entries(vars).map(([k, v]) => [k, v.value]))
+`
+
+export async function buildComponent(input: string): Promise<Function> {
+  let code = input.trim()
+
+  // Pure JSX snippet (no import/export) - wrap it
+  if (!code.includes('import ') && !code.includes('export ')) {
+    code = `import { Frame, Text, Rectangle, Ellipse, Line, Image, SVG, Icon } from 'figma-use/render'
+export default () => ${code}`
+  }
+  // Has imports but no export
+  else if (!code.includes('export ')) {
+    code = `${code}\nexport default () => null`
+  }
+
+  const result = await esbuild.build({
+    stdin: { contents: code, loader: 'tsx' },
+    bundle: true,
+    write: false,
+    format: 'iife',
+    globalName: '__mod',
+    jsx: 'transform',
+    jsxFactory: 'React.createElement',
+    plugins: [
+      {
+        name: 'mock-imports',
+        setup(build) {
+          build.onResolve({ filter: /^figma-use\/render$|^\./ }, (args) => ({
+            path: args.path,
+            namespace: 'mock'
+          }))
+          build.onLoad({ filter: /.*/, namespace: 'mock' }, () => ({
+            contents: MOCK_RENDER_MODULE,
+            loader: 'js'
+          }))
+        }
+      }
+    ]
+  })
+
+  const bundled = result.outputFiles![0]!.text
+  const fn = new Function('React', `${bundled}; return __mod.default`)
+  return fn(React)
+}
+
+export async function readStdin(): Promise<string> {
+  const chunks: Buffer[] = []
+  for await (const chunk of process.stdin) {
+    chunks.push(chunk)
+  }
+  return Buffer.concat(chunks).toString('utf-8')
+}
+
+interface RenderOptions {
+  x?: number
+  y?: number
+  parent?: string
+  props?: Record<string, unknown>
+}
+
+interface RenderResult {
+  id: string
+  name: string
+  type: string
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export async function renderFromString(
+  jsx: string,
+  options: RenderOptions = {}
+): Promise<RenderResult> {
+  const Component = await buildComponent(jsx)
+
+  if (!isRegistryLoaded()) {
+    try {
+      const vars = await sendCommand<NodeRef[]>('get-variables', { simple: true })
+      loadVariablesIntoRegistry(vars)
+    } catch {}
+  }
+
+  const props = options.props ?? {}
+  const element = React.createElement(Component as React.FC, props)
+
+  const icons = collectIcons(element)
+  if (icons.length > 0) {
+    await preloadIcons(icons)
+  }
+
+  return (await renderWithWidgetApi(element as unknown, {
+    parent: options.parent,
+    x: options.x,
+    y: options.y
+  })) as RenderResult
+}

package/packages/cli/src/render/render-jsx.ts

@@ -0,0 +1,44 @@
+import { transformSync } from 'esbuild'
+
+import { sendCommand } from '../client.ts'
+import { loadVariablesIntoRegistry, isRegistryLoaded, preloadIcons, collectIcons } from './index.ts'
+import * as React from './mini-react.ts'
+import { renderWithWidgetApi } from './widget-renderer.ts'
+
+import type { NodeRef } from '../types.ts'
+
+function buildComponent(jsx: string): React.FC {
+  const code = `
+    const h = React.createElement
+    const Frame = 'frame', Text = 'text', Rectangle = 'rectangle', Ellipse = 'ellipse', Line = 'line', Image = 'image', SVG = 'svg'
+    return function Component() { return ${jsx.trim()} }
+  `
+  const result = transformSync(code, {
+    loader: 'tsx',
+    jsx: 'transform',
+    jsxFactory: 'h'
+  })
+  return new Function('React', result.code)(React) as React.FC
+}
+
+export async function renderJsx(
+  jsx: string,
+  options?: { x?: number; y?: number; parent?: string }
+): Promise<NodeRef[]> {
+  const Component = buildComponent(jsx)
+
+  if (!isRegistryLoaded()) {
+    try {
+      const vars = await sendCommand<NodeRef[]>('get-variables', { simple: true })
+      loadVariablesIntoRegistry(vars)
+    } catch {}
+  }
+
+  const element = React.createElement(Component, null)
+
+  const icons = collectIcons(element)
+  if (icons.length > 0) await preloadIcons(icons)
+
+  const result = await renderWithWidgetApi(element, options)
+  return [result]
+}

package/packages/cli/src/render/tree.ts

@@ -0,0 +1,148 @@
+/**
+ * Figma Tree Node
+ */
+
+export type Props = Record<string, unknown>
+
+export interface TreeNode {
+  type: string
+  props: Props
+  children: (TreeNode | string)[]
+  key?: string | number | null
+}
+
+export interface ReactElement {
+  type: unknown
+  props: Props
+}
+
+export function isTreeNode(x: unknown): x is TreeNode {
+  if (x === null || typeof x !== 'object') return false
+  const obj = x as Props
+  return typeof obj.type === 'string' && 'props' in obj && Array.isArray(obj.children)
+}
+
+function isReactElement(x: unknown): x is ReactElement {
+  return x !== null && typeof x === 'object' && 'type' in x && 'props' in x
+}
+
+function resolveReactElement(el: ReactElement): TreeNode | null {
+  if (typeof el.type === 'function') {
+    const result = (el.type as (p: Props) => unknown)(el.props)
+    if (isTreeNode(result)) return result
+    if (isReactElement(result)) return resolveReactElement(result)
+  }
+  return null
+}
+
+function processChild(child: unknown): TreeNode | string | null {
+  if (child == null) return null
+  if (typeof child === 'string' || typeof child === 'number') return String(child)
+  if (isTreeNode(child)) return child
+  if (isReactElement(child)) return resolveReactElement(child)
+  return null
+}
+
+export function node(type: string, props: BaseProps): TreeNode {
+  const { children, ...rest } = props
+  const processed = [children]
+    .flat(Infinity)
+    .map(processChild)
+    .filter((c): c is TreeNode | string => c !== null)
+  return { type, props: rest, children: processed }
+}
+
+// Style props
+export interface StyleProps {
+  // Layout
+  flex?: 'row' | 'col' | 'column'
+  gap?: number
+  wrap?: boolean
+  rowGap?: number
+  justify?: 'start' | 'end' | 'center' | 'between'
+  items?: 'start' | 'end' | 'center'
+  position?: 'absolute' | 'relative'
+  grow?: number
+  stretch?: boolean
+
+  // Size
+  w?: number | 'fill'
+  h?: number | 'fill'
+  width?: number | 'fill'
+  height?: number | 'fill'
+  minW?: number
+  maxW?: number
+  minH?: number
+  maxH?: number
+
+  // Position
+  x?: number
+  y?: number
+
+  // Padding
+  p?: number
+  px?: number
+  py?: number
+  pt?: number
+  pr?: number
+  pb?: number
+  pl?: number
+  padding?: number
+
+  // Appearance
+  bg?: string
+  fill?: string
+  stroke?: string
+  strokeWidth?: number
+  strokeAlign?: 'inside' | 'outside' | 'center'
+  strokeTop?: number
+  strokeBottom?: number
+  strokeLeft?: number
+  strokeRight?: number
+  rounded?: number
+  cornerRadius?: number
+  roundedTL?: number
+  roundedTR?: number
+  roundedBL?: number
+  roundedBR?: number
+  cornerSmoothing?: number
+  opacity?: number
+  blendMode?: string
+  rotate?: number
+  overflow?: 'hidden' | 'visible'
+  shadow?: string
+  blur?: number
+
+  // Text
+  size?: number
+  fontSize?: number
+  font?: string
+  fontFamily?: string
+  weight?: number | 'bold' | 'medium' | 'normal'
+  fontWeight?: number | 'bold' | 'medium' | 'normal'
+  color?: string
+
+  // Other
+  src?: string
+  href?: string
+}
+
+// Custom child type that allows TreeNode in JSX
+type FigmaChild =
+  | TreeNode
+  | string
+  | number
+  | null
+  | undefined
+  | boolean
+  | (TreeNode | string | number | null | undefined | boolean)[]
+
+export interface BaseProps extends StyleProps {
+  name?: string
+  key?: string | number
+  children?: FigmaChild
+}
+
+export interface TextProps extends BaseProps {
+  children?: FigmaChild
+}

package/packages/cli/src/render/vars.ts

@@ -0,0 +1,186 @@
+/**
+ * Figma Variable Bindings (StyleX-inspired API)
+ *
+ * @example
+ * ```tsx
+ * // tokens.figma.ts - with explicit values (recommended)
+ * export const colors = defineVars({
+ *   primary: { name: 'Colors/Gray/50', value: '#F8FAFC' },
+ *   accent: { name: 'Colors/Blue/500', value: '#3B82F6' },
+ * })
+ *
+ * // tokens.figma.ts - name only (value loaded from Figma)
+ * export const colors = defineVars({
+ *   primary: 'Colors/Gray/50',
+ *   accent: 'Colors/Blue/500',
+ * })
+ *
+ * // Card.figma.tsx
+ * <Frame style={{ backgroundColor: colors.primary }}>
+ * ```
+ */
+
+const VAR_SYMBOL = Symbol.for('figma.variable')
+
+/** Variable definition - either string name or object with name and value */
+export type VarDef = string | { name: string; value: string }
+
+export interface FigmaVariable {
+  [VAR_SYMBOL]: true
+  name: string // Variable name like "Colors/Gray/50"
+  value?: string // Fallback color value like "#F8FAFC"
+  _resolved?: {
+    // Filled in at render time
+    id: string
+    sessionID: number
+    localID: number
+  }
+}
+
+export interface ResolvedVariable {
+  id: string
+  sessionID: number
+  localID: number
+}
+
+/**
+ * Check if value is a Figma variable reference
+ */
+export function isVariable(value: unknown): value is FigmaVariable {
+  return typeof value === 'object' && value !== null && VAR_SYMBOL in value
+}
+
+/**
+ * Variable registry - maps names to IDs
+ * Populated by loadVariables() before render
+ */
+const variableRegistry = new Map<string, ResolvedVariable>()
+
+/**
+ * Load variables from Figma into registry
+ */
+import type { NodeRef } from '../types.ts'
+
+export function loadVariablesIntoRegistry(variables: NodeRef[]) {
+  variableRegistry.clear()
+  for (const v of variables) {
+    const match = v.id.match(/VariableID:(\d+):(\d+)/)
+    if (match) {
+      variableRegistry.set(v.name, {
+        id: v.id,
+        sessionID: parseInt(match[1]!, 10),
+        localID: parseInt(match[2]!, 10)
+      })
+    }
+  }
+}
+
+/**
+ * Resolve a variable name to its ID
+ * @throws if variable not found in registry
+ */
+export function resolveVariable(variable: FigmaVariable): ResolvedVariable {
+  // Already resolved?
+  if (variable._resolved) {
+    return variable._resolved
+  }
+
+  // Check if it's an ID format (legacy support)
+  const idMatch = variable.name.match(/^(?:VariableID:)?(\d+):(\d+)$/)
+  if (idMatch) {
+    const resolved = {
+      id: `VariableID:${idMatch[1]}:${idMatch[2]}`,
+      sessionID: parseInt(idMatch[1]!, 10),
+      localID: parseInt(idMatch[2]!, 10)
+    }
+    variable._resolved = resolved
+    return resolved
+  }
+
+  // Lookup by name
+  const resolved = variableRegistry.get(variable.name)
+  if (!resolved) {
+    const available = Array.from(variableRegistry.keys()).slice(0, 5).join(', ')
+    throw new Error(
+      `Variable "${variable.name}" not found. ` +
+        `Available: ${available}${variableRegistry.size > 5 ? '...' : ''}. ` +
+        `Make sure variables are loaded before render.`
+    )
+  }
+
+  variable._resolved = resolved
+  return resolved
+}
+
+/**
+ * Check if variable registry is populated
+ */
+export function isRegistryLoaded(): boolean {
+  return variableRegistry.size > 0
+}
+
+/**
+ * Get registry size (for debugging)
+ */
+export function getRegistrySize(): number {
+  return variableRegistry.size
+}
+
+/**
+ * Define Figma variables for use in styles
+ *
+ * @example
+ * ```ts
+ * // With explicit fallback values (recommended)
+ * export const colors = defineVars({
+ *   primary: { name: 'Colors/Gray/50', value: '#F8FAFC' },
+ *   accent: { name: 'Colors/Blue/500', value: '#3B82F6' },
+ * })
+ *
+ * // Name only (value loaded from Figma registry)
+ * export const colors = defineVars({
+ *   primary: 'Colors/Gray/50',
+ * })
+ *
+ * // Use in components:
+ * <Frame style={{ backgroundColor: colors.primary }} />
+ * ```
+ */
+export function defineVars<T extends Record<string, VarDef>>(
+  vars: T
+): { [K in keyof T]: FigmaVariable } {
+  const result = {} as { [K in keyof T]: FigmaVariable }
+
+  for (const [key, def] of Object.entries(vars)) {
+    if (typeof def === 'string') {
+      result[key as keyof T] = {
+        [VAR_SYMBOL]: true,
+        name: def
+      }
+    } else {
+      result[key as keyof T] = {
+        [VAR_SYMBOL]: true,
+        name: def.name,
+        value: def.value
+      }
+    }
+  }
+
+  return result
+}
+
+/**
+ * Shorthand for single variable
+ *
+ * @example
+ * ```ts
+ * const primaryColor = figmaVar('Colors/Gray/50', '#F8FAFC')
+ * ```
+ */
+export function figmaVar(name: string, value?: string): FigmaVariable {
+  return {
+    [VAR_SYMBOL]: true,
+    name,
+    value
+  }
+}

package/packages/cli/src/render/widget-renderer.ts

@@ -0,0 +1,163 @@
+/**
+ * JSX → Figma Widget API renderer
+ */
+
+import { sendCommand } from '../client.ts'
+import { loadIconSvg } from './icon.ts'
+import { isTreeNode, type TreeNode, type ReactElement, type Props } from './tree.ts'
+
+import type { NodeRef } from '../types.ts'
+
+interface IconNode {
+  __icon: true
+  name: string
+  size?: number
+  color?: string
+}
+
+function isReactElement(x: unknown): x is ReactElement {
+  return x !== null && typeof x === 'object' && 'type' in x && 'props' in x
+}
+
+function convertReactElementToTree(el: ReactElement): TreeNode {
+  const children: (TreeNode | string)[] = []
+  const elChildren = el.props.children
+
+  if (elChildren != null) {
+    const childArray = Array.isArray(elChildren) ? elChildren : [elChildren]
+    for (const child of childArray.flat()) {
+      if (child == null) continue
+      if (typeof child === 'string' || typeof child === 'number') {
+        children.push(String(child))
+      } else if (isReactElement(child)) {
+        const resolved = resolveElement(child)
+        if (resolved) children.push(resolved)
+      }
+    }
+  }
+
+  const { children: _, ...props } = el.props
+  return { type: el.type as string, props, children }
+}
+
+function isIconNode(x: unknown): x is IconNode {
+  return x !== null && typeof x === 'object' && '__icon' in x && (x as IconNode).__icon === true
+}
+
+function resolveElement(element: unknown, depth = 0): TreeNode | null {
+  if (depth > 100) throw new Error('Component resolution depth exceeded')
+  if (isTreeNode(element)) return element
+
+  // Icon nodes are handled separately in processIcons
+  if (isIconNode(element)) {
+    return {
+      type: '__icon__',
+      props: { name: element.name, size: element.size, color: element.color },
+      children: []
+    }
+  }
+
+  if (isReactElement(element)) {
+    if (typeof element.type === 'function') {
+      return resolveElement((element.type as (p: Props) => unknown)(element.props), depth + 1)
+    }
+    if (typeof element.type === 'string') {
+      return convertReactElementToTree(element)
+    }
+  }
+
+  return null
+}
+
+function svgChildToString(child: TreeNode): string {
+  const { type, props } = child
+  const attrs = Object.entries(props)
+    .map(([k, v]) => {
+      // Convert camelCase to kebab-case
+      const kebab = k.replace(/([A-Z])/g, (m) => `-${m.toLowerCase()}`)
+      return `${kebab}="${v}"`
+    })
+    .join(' ')
+  return `<${type}${attrs ? ' ' + attrs : ''}/>`
+}
+
+function serializeInlineSvg(tree: TreeNode): string {
+  const { props, children } = tree
+  const { width, height, viewBox, fill, w, h } = props as Record<string, unknown>
+  const attrs = [
+    'xmlns="http://www.w3.org/2000/svg"',
+    width || w ? `width="${width || w}"` : '',
+    height || h ? `height="${height || h}"` : '',
+    viewBox ? `viewBox="${viewBox}"` : '',
+    fill ? `fill="${fill}"` : ''
+  ]
+    .filter(Boolean)
+    .join(' ')
+  const inner = children
+    .filter((c): c is TreeNode => typeof c !== 'string')
+    .map(svgChildToString)
+    .join('')
+  return `<svg ${attrs}>${inner}</svg>`
+}
+
+async function processIcons(tree: TreeNode): Promise<TreeNode> {
+  if (tree.type === '__icon__') {
+    const { name, size = 24, color } = tree.props as { name: string; size?: number; color?: string }
+    const iconData = await loadIconSvg(name, size)
+    if (!iconData) {
+      throw new Error(`Icon not found: ${name}`)
+    }
+
+    let svg = iconData.svg
+    if (color) {
+      svg = svg.replace(/currentColor/g, color)
+    }
+
+    return {
+      type: 'svg',
+      props: { src: svg, w: size, h: size, name },
+      children: []
+    }
+  }
+
+  // Handle inline <svg> with children (path, rect, etc.)
+  if (tree.type === 'svg' && tree.children.length > 0 && !tree.props.src) {
+    const svgString = serializeInlineSvg(tree)
+    return {
+      type: 'svg',
+      props: { ...tree.props, __svgString: svgString },
+      children: []
+    }
+  }
+
+  // Process children recursively
+  const children = await Promise.all(
+    tree.children.map(async (child) => {
+      if (typeof child === 'string') return child
+      return processIcons(child)
+    })
+  )
+
+  return { ...tree, children }
+}
+
+export async function renderWithWidgetApi(
+  element: unknown,
+  options?: { x?: number; y?: number; parent?: string }
+): Promise<NodeRef> {
+  let tree = typeof element === 'function' ? element() : resolveElement(element)
+
+  if (!tree) {
+    throw new Error('Root must be a Figma component (Frame, Text, etc)')
+  }
+
+  // Process icons (load SVG data)
+  tree = await processIcons(tree)
+
+  return sendCommand('create-from-jsx', {
+    tree,
+    x: options?.x,
+    y: options?.y,
+    parentId: options?.parent
+  })
+}