mini-figma-code-connect 0.1.0 → 0.1.3

package/src/main/schema.ts

@@ -1,45 +0,0 @@
-import type { ComponentSchema, FigmaPropertyType, PropertyDef } from '../runtime/types'
-
-/**
- * VARIANT 属性的定义住在 ComponentSet 上，其余属性也一并在那儿
- * （ComponentSet 的 componentPropertyDefinitions 同时包含 VARIANT 和 BOOLEAN/TEXT/INSTANCE_SWAP）。
- * 所以只取这一个 owner 不会漏属性，后面所有身份（key / name / id）都以它为准。
- */
-export function definitionOwner(main: ComponentNode): ComponentNode | ComponentSetNode {
-  return main.parent && main.parent.type === 'COMPONENT_SET' ? main.parent : main
-}
-
-/** Step 3：组件 → 属性 schema */
-export async function extractSchema(main: ComponentNode): Promise<ComponentSchema> {
-  const owner = definitionOwner(main)
-
-  // 注意：这个 getter 在「是 variant 但拿不到所属 ComponentSet」时会 **抛错**，
-  // 不是返回 undefined —— 所以必须 try/catch，`?? {}` 是无效防护。
-  let defs: ComponentPropertyDefinitions = {}
-  try {
-    defs = owner.componentPropertyDefinitions
-  } catch {
-    defs = {}
-  }
-
-  const properties: PropertyDef[] = Object.keys(defs).map((key) => {
-    const def = defs[key]
-    return {
-      // key 带 "#123:4" 后缀（VARIANT 除外）。只在展示层剥掉，查表时仍用完整 key
-      name: key.split('#')[0],
-      type: def.type as FigmaPropertyType,
-      variantOptions: def.variantOptions ? def.variantOptions.slice() : undefined,
-      defaultValue:
-        typeof def.defaultValue === 'string' || typeof def.defaultValue === 'boolean'
-          ? def.defaultValue
-          : undefined,
-    }
-  })
-
-  return {
-    componentId: owner.id,
-    componentKey: owner.key,
-    componentName: owner.name,
-    properties,
-  }
-}

package/src/main/validate.ts

@@ -1,49 +0,0 @@
-import type { AccessorCall, ComponentSchema } from '../runtime/types'
-
-export type Finding = { level: 'error' | 'warn'; text: string }
-
-/**
- * Step 6 的自动化版本。
- *
- * 思路：不让模板重复声明它消费了什么，而是在 render 期间记录每一次 accessor 调用，
- * 事后拿这份调用记录和 schema 对账。「穷举缺失」和「属性未映射」就都能被机器发现。
- *
- * @param calls    真实一遍 render 的调用记录 —— 用来报错
- * @param coverage 探测一遍（所有 boolean 视为 true）的调用记录 —— 用来算覆盖率，
- *                 避免条件分支里的属性被误报成未映射
- */
-export function validate(
-  schema: ComponentSchema,
-  calls: AccessorCall[],
-  coverage: AccessorCall[] = calls,
-): Finding[] {
-  const real = calls.filter((c) => c.depth === 0)
-  const touched = new Set(coverage.filter((c) => c.depth === 0).map((c) => c.prop))
-  const findings: Finding[] = []
-
-  for (const p of schema.properties) {
-    if (!touched.has(p.name)) {
-      findings.push({ level: 'warn', text: `属性 "${p.name}" (${p.type}) 未被模板消费` })
-      continue
-    }
-    if (p.type === 'VARIANT' && p.variantOptions) {
-      for (const c of real) {
-        if (c.prop !== p.name || c.method !== 'getEnum' || !c.mappingKeys) continue
-        const keys = c.mappingKeys
-        const missing = p.variantOptions.filter((v) => keys.indexOf(v) === -1)
-        if (missing.length > 0) {
-          findings.push({
-            level: 'error',
-            text: `"${p.name}" 的 getEnum 字典漏了 ${missing.join('、')} —— 选到这些值时会静默产出 undefined`,
-          })
-        }
-      }
-    }
-  }
-
-  for (const c of real) {
-    if (!c.ok) findings.push({ level: 'error', text: `${c.method}("${c.prop}")：${c.note ?? '失败'}` })
-  }
-
-  return findings
-}

package/src/runtime/define.ts

@@ -1,6 +0,0 @@
-import type { Template } from './types'
-
-/** 只做类型收窄，让 .figma.ts 里能拿到 accessor 的补全 */
-export function defineTemplate(t: Template): Template {
-  return t
-}

package/src/runtime/render.ts

@@ -1,26 +0,0 @@
-import type { ResultSection } from './types'
-
-/** 去掉模板字面量带来的公共缩进 */
-export function dedent(text: string): string {
-  const lines = text.replace(/^\n+/, '').replace(/\s+$/, '').split('\n')
-  const indents = lines.filter((l) => l.trim() !== '').map((l) => /^[ \t]*/.exec(l)![0].length)
-  const min = indents.length ? Math.min(...indents) : 0
-  return lines.map((l) => l.slice(min)).join('\n')
-}
-
-/** ResultSection[] → 给人看的字符串。真正的消费端（Dev Mode / MCP）拿的是数组本身 */
-export function renderToString(sections: ResultSection[]): string {
-  let out = ''
-  for (const s of sections) {
-    if (s.type === 'CODE') out += s.code
-    else if (s.type === 'INSTANCE') out += `{/* <${s.name}> 未连接 Code Connect */}`
-    else out += `/* ⚠ ${s.message} */`
-  }
-  return dedent(out)
-}
-
-export function collectErrors(sections: ResultSection[]): string[] {
-  const out: string[] = []
-  for (const s of sections) if (s.type === 'ERROR') out.push(s.message)
-  return out
-}

package/src/runtime/tagged.ts

@@ -1,46 +0,0 @@
-import type { ResultSection } from './types'
-
-export type Interpolable = ResultSection[] | string | number | boolean | null | undefined
-
-/**
- * figma.code`...` 的简版。
- *
- * 职责只有两件：把插值切成 ResultSection[]，把嵌套的 section 数组摊平。
- * 它 **不解析代码语义** —— 这正是真实 Code Connect 的实现边界，
- * 也是为什么用 `+` 或 `.join()` 拼 section 会得到 [object Object]。
- */
-function tag(strings: TemplateStringsArray, values: Interpolable[]): ResultSection[] {
-  const out: ResultSection[] = []
-
-  const pushCode = (s: string) => {
-    if (s === '') return
-    const last = out[out.length - 1]
-    if (last && last.type === 'CODE') last.code += s
-    else out.push({ type: 'CODE', code: s })
-  }
-
-  strings.forEach((chunk, i) => {
-    pushCode(chunk)
-    if (i >= values.length) return
-    const v = values[i]
-    // null / undefined / false 一律不输出，方便写条件插值
-    if (v === null || v === undefined || v === false) return
-    if (Array.isArray(v)) {
-      for (const sec of v) {
-        if (sec.type === 'CODE') pushCode(sec.code)
-        else out.push(sec)
-      }
-      return
-    }
-    pushCode(String(v))
-  })
-
-  return out
-}
-
-export function code(strings: TemplateStringsArray, ...values: Interpolable[]): ResultSection[] {
-  return tag(strings, values)
-}
-/** 真实 CC 里这些只影响语法高亮，运行时行为完全一致 */
-export const tsx = code
-export const html = code

package/src/runtime/types.ts

@@ -1,86 +0,0 @@
-/**
- * 迷你 Code Connect 运行时的类型定义。
- *
- * 关键一点，也是整套实现的地基：模板的输出不是字符串，而是 ResultSection[]。
- * 这样才能在拼装时保留实例身份、并让错误就地降级而不是拖垮整段 snippet。
- */
-
-/** 一段普通代码文本 */
-export type CodeSection = { type: 'CODE'; code: string }
-/** 「有实例但没有映射」的占位段：保留实例身份，真实 CC 在这里渲染成可展开的 pill */
-export type InstanceSection = { type: 'INSTANCE'; guid: string; symbolId: string; name: string }
-/** 就地降级的错误段 */
-export type ErrorSection = { type: 'ERROR'; message: string }
-export type ResultSection = CodeSection | InstanceSection | ErrorSection
-
-/** Figma 组件属性的封闭类型集（真实 CC 还有 SLOT，简版不做） */
-export type FigmaPropertyType = 'TEXT' | 'BOOLEAN' | 'VARIANT' | 'INSTANCE_SWAP'
-
-export type PropertyDef = {
-  name: string
-  type: FigmaPropertyType
-  variantOptions?: string[]
-  defaultValue?: string | boolean
-}
-
-/** Step 3 的产出：组件的属性 schema —— 映射的「左手边」 */
-export type ComponentSchema = {
-  componentId: string
-  componentKey: string
-  componentName: string
-  properties: PropertyDef[]
-}
-
-export type TemplateResult = {
-  example: ResultSection[]
-  id: string
-  imports?: string[]
-  metadata?: { nestable?: boolean; props?: Record<string, unknown> }
-}
-
-/** 头部三行绑定注释的结构化版本（真实 CC 是在构建时解析注释） */
-export type TemplateMeta = { url: string; source: string; component: string }
-
-export type Template = {
-  meta: TemplateMeta
-  id: string
-  /** 怎么认出这个模板对应哪个 Figma 组件：优先 componentKey，退回组件名 */
-  match: { componentName: string; componentKey?: string }
-  /**
-   * 映射的实体是这个函数，不是任何一段固定代码。
-   * 写一份，覆盖该组件的全部 variant 组合。
-   */
-  render: (instance: InstanceLike) => TemplateResult
-}
-
-/** 模板能看到的实例接口（accessor 层） */
-export interface InstanceLike {
-  readonly type: 'INSTANCE'
-  readonly name: string
-  getString(prop: string): string
-  getBoolean(prop: string): boolean
-  getBoolean<T>(prop: string, mapping: { true: T; false: T }): T
-  getEnum<T>(prop: string, mapping: Record<string, T>): T | undefined
-  getInstanceSwap(prop: string): InstanceLike | ErrorLike | null
-  findInstance(layerName: string): InstanceLike | ErrorLike
-  findText(layerName: string): TextLike | ErrorLike
-  hasCodeConnect(): boolean
-  codeConnectId(): string | null
-  executeTemplate(): TemplateResult | null
-}
-
-/** 注意 type 是 'ERROR' 而不是 null —— 查找失败返回的是 truthy 的句柄。
- *  这是真实 CC 的实现权衡：为了把 message 带下去渲染成 ERROR 段而放弃 null 惯例。
- *  代价就是模板里每次都得写 `x.type === 'INSTANCE'` 检查。 */
-export interface ErrorLike { readonly type: 'ERROR'; readonly message: string }
-export interface TextLike { readonly type: 'TEXT'; readonly name: string; readonly textContent: string }
-
-/** 一次 accessor 调用的记录，供 Step 6 的自动校验使用 */
-export type AccessorCall = {
-  depth: number
-  prop: string
-  method: 'getString' | 'getBoolean' | 'getEnum' | 'getInstanceSwap'
-  mappingKeys?: string[]
-  ok: boolean
-  note?: string
-}

package/src/ui/ui.ts

@@ -1,271 +0,0 @@
-type Level = 'error' | 'warn'
-type Finding = { level: Level; text: string }
-type PropertyDef = { name: string; type: string; variantOptions?: string[] }
-type Schema = {
-  componentId: string
-  componentKey: string
-  componentName: string
-  properties: PropertyDef[]
-}
-type AccessorCall = { depth: number; prop: string; method: string; ok: boolean; note?: string }
-type Candidate = { id: string; name: string; mapped: boolean }
-type Msg =
-  | {
-      type: 'state'
-      state: 'empty' | 'unmapped' | 'error'
-      message: string
-      schema?: Schema
-      figmaUrl?: string | null
-      candidates?: Candidate[]
-    }
-  | { type: 'state'; state: 'candidates'; message: string; candidates: Candidate[] }
-  | {
-      type: 'state'
-      state: 'scan'
-      message: string
-      groups: {
-        componentKey: string
-        componentName: string
-        count: number
-        sampleNodeId: string
-        mapped: boolean
-        codeComponent: string | null
-      }[]
-    }
-  | {
-      type: 'state'
-      state: 'ok'
-      schema: Schema
-      template: { id: string; meta: { url: string; source: string; component: string } }
-      snippet: string
-      imports: string[]
-      findings: Finding[]
-      calls: AccessorCall[]
-      candidates?: Candidate[]
-    }
-  | { type: 'download'; filename: string; json: string }
-
-const body = document.getElementById('body') as HTMLElement
-const send = (type: string, extra?: Record<string, unknown>) =>
-  parent.postMessage({ pluginMessage: { type, ...extra } }, '*')
-
-const esc = (s: string) =>
-  s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-
-function schemaTable(schema: Schema, calls: AccessorCall[]): string {
-  const consumed = new Set(calls.filter((c) => c.depth === 0).map((c) => c.prop))
-  const rows = schema.properties
-    .map((p) => {
-      const tag = consumed.has(p.name)
-        ? '<span class="tag ok">已映射</span>'
-        : '<span class="tag miss">未映射</span>'
-      const opts = p.variantOptions ? esc(p.variantOptions.join(' / ')) : '—'
-      return `<tr><td>${esc(p.name)}</td><td><code>${p.type}</code></td><td>${opts}</td><td>${tag}</td></tr>`
-    })
-    .join('')
-  return `<table><thead><tr><th>属性</th><th>类型</th><th>可选值</th><th></th></tr></thead><tbody>${rows}</tbody></table>`
-}
-
-function backBar(candidates?: Candidate[]): string {
-  if (!candidates || candidates.length === 0) return ''
-  return `<div class="row"><button class="ghost back" type="button">← 返回列表（${candidates.length} 个实例）</button></div>`
-}
-
-function wireBack(): void {
-  const btn = document.querySelector<HTMLButtonElement>('.back')
-  if (btn) btn.addEventListener('click', () => send('backToList'))
-}
-
-// 一个按钮身兼两职：候选列表状态（选中的是容器，没有单个实例）导出全部；其它状态导出当前选中的单个实例
-const exportSchemaBtn = document.getElementById('export-schema') as HTMLButtonElement
-let inCandidatesMode = false
-function syncExportButton(state: string, count: number): void {
-  inCandidatesMode = state === 'candidates'
-  if (state === 'candidates') {
-    exportSchemaBtn.disabled = count === 0
-    exportSchemaBtn.textContent = count > 0 ? `导出全部 schema.json（${count} 个）` : '导出全部 schema.json'
-  } else {
-    exportSchemaBtn.disabled = false
-    exportSchemaBtn.textContent = '导出 schema.json'
-  }
-}
-
-function render(msg: Msg): void {
-  if (msg.type !== 'download') {
-    syncExportButton(msg.state, msg.state === 'candidates' ? msg.candidates.length : 0)
-  }
-
-  if (msg.type === 'download') {
-    const url = URL.createObjectURL(new Blob([msg.json], { type: 'application/json' }))
-    const a = document.createElement('a')
-    a.href = url
-    a.download = msg.filename
-    document.body.appendChild(a)
-    a.click()
-    a.remove()
-    URL.revokeObjectURL(url)
-    // 兜底：iframe 的 sandbox 若拦掉下载，至少把内容留在剪贴板里
-    void navigator.clipboard.writeText(msg.json).catch(() => undefined)
-    return
-  }
-
-  if (msg.state === 'scan') {
-    // 未映射排前面（跟 scanPage 排序一致），仿 Figma 官方 Code Connect UI 那张组件目录列表的样式：
-    // 一行一个组件，左边 Figma 组件名，右边状态 + 代码组件名，顶部一个搜索框过滤
-    const rows = msg.groups
-      .map(
-        (g) => `
-          <li class="component-row" data-search="${esc(g.componentName.toLowerCase())}">
-            <button class="row-name" type="button" data-id="${esc(g.sampleNodeId)}">
-              <span class="diamond">◆</span>
-              <span>${esc(g.componentName)}</span>
-              <span class="dim">${g.count} 处</span>
-            </button>
-            <span class="row-code">
-              ${
-                g.mapped
-                  ? `<span class="status-dot ok">✓</span><code>&lt;${esc(g.codeComponent ?? '?')}&gt;</code>`
-                  : `<span class="status-dot miss">×</span><span class="dim">未映射</span>`
-              }
-            </span>
-          </li>`,
-      )
-      .join('')
-
-    body.innerHTML = `
-      <section>
-        <p class="hint">${esc(msg.message)}</p>
-        <input class="scan-search" type="text" placeholder="搜索组件…" />
-        <div class="component-list">
-          <div class="list-header"><span>Figma 组件</span><span>代码组件</span></div>
-          <ul class="component-rows">${rows}</ul>
-        </div>
-      </section>
-    `
-    body.querySelectorAll<HTMLButtonElement>('.row-name').forEach((el) => {
-      el.addEventListener('click', () => send('pick', { id: el.dataset.id }))
-    })
-    const search = document.querySelector<HTMLInputElement>('.scan-search')
-    if (search) {
-      search.addEventListener('input', () => {
-        const q = search.value.trim().toLowerCase()
-        body.querySelectorAll<HTMLLIElement>('.component-row').forEach((row) => {
-          row.style.display = !q || (row.dataset.search ?? '').includes(q) ? '' : 'none'
-        })
-      })
-    }
-    return
-  }
-
-  if (msg.state === 'candidates') {
-    const items = msg.candidates
-      .map(
-        (c, i) =>
-          `<li><button class="ghost pick" type="button" data-id="${esc(c.id)}"><span>${i + 1}. ${esc(
-            c.name,
-          )}</span><span class="tag ${c.mapped ? 'ok' : 'miss'}">${c.mapped ? '已映射' : '未映射'}</span></button></li>`,
-      )
-      .join('')
-    body.innerHTML = `<section><p class="hint">${esc(msg.message)}</p><ul class="candidates">${items}</ul></section>`
-    body.querySelectorAll<HTMLButtonElement>('.pick').forEach((btn) => {
-      btn.addEventListener('click', () => send('pick', { id: btn.dataset.id }))
-    })
-    return
-  }
-
-  if (msg.state !== 'ok') {
-    const extra =
-      msg.schema && msg.schema.properties.length > 0
-        ? `<section><h2>读到的属性 schema</h2>${schemaTable(msg.schema, [])}</section>`
-        : ''
-    // 未映射可能是因为压根没有对应的代码组件——给一条能直接丢进 AI 工具的提示词，
-    // 先把组件生成出来（组件名跟 Figma 实例名保持一致，方便后面接 mini-code-connect 映射）
-    const genPrompt =
-      msg.state === 'unmapped' && msg.schema && msg.figmaUrl
-        ? `<section>
-            <div class="row"><h2>生成通用组件</h2><button class="ghost copy" id="copy-prompt" type="button">复制</button></div>
-            <pre id="gen-prompt">/figma-design-to-code ${esc(msg.figmaUrl)}，生成通用组件"${esc(
-              msg.schema.componentName,
-            )}"，组件名和实例名保持一致</pre>
-          </section>`
-        : ''
-    body.innerHTML = `${backBar(msg.candidates)}<section><p class="hint">${esc(
-      msg.message,
-    )}</p></section>${genPrompt}${extra}`
-    wireBack()
-    const copyPrompt = document.getElementById('copy-prompt')
-    if (copyPrompt) {
-      copyPrompt.addEventListener('click', () => {
-        const pre = document.getElementById('gen-prompt')
-        if (!pre || !pre.textContent) return
-        void navigator.clipboard.writeText(pre.textContent).then(() => {
-          copyPrompt.textContent = '已复制'
-          setTimeout(() => (copyPrompt.textContent = '复制'), 1200)
-        })
-      })
-    }
-    return
-  }
-
-  const { schema, template, snippet, imports, findings, calls } = msg
-
-  const bindingCard = `
-    <div class="card">
-      <div class="kv"><span>Figma 组件</span><span>${esc(schema.componentName)}</span></div>
-      <div class="kv"><span>source</span><span><code>${esc(template.meta.source)}</code></span></div>
-      <div class="kv"><span>component</span><span><code>${esc(template.meta.component)}</code></span></div>
-      <div class="kv"><span>template id</span><span><code>${esc(template.id)}</code></span></div>
-    </div>`
-
-  const findingList =
-    findings.length === 0
-      ? '<p class="hint">没有发现问题。</p>'
-      : `<ul class="findings">${findings
-          .map((f) => `<li class="${f.level}">${esc(f.text)}</li>`)
-          .join('')}</ul>`
-
-  const importLines = imports.length ? esc(imports.join('\n')) + '\n\n' : ''
-
-  body.innerHTML = `
-    ${backBar(msg.candidates)}
-    <section><h2>绑定</h2>${bindingCard}</section>
-    <section>
-      <div class="row"><h2>生成的代码片段</h2><button class="ghost copy" id="copy" type="button">复制</button></div>
-      <pre id="snippet">${importLines}${esc(snippet)}</pre>
-    </section>
-    <section><h2>属性 schema 与覆盖率</h2>${schemaTable(schema, calls)}</section>
-    <section><h2>自检（Step 6）</h2>${findingList}</section>
-    <section><h2>本次 accessor 调用</h2><pre>${esc(
-      calls
-        .map((c) => `${'  '.repeat(c.depth)}${c.method}("${c.prop}")${c.ok ? '' : `  ⚠ ${c.note ?? ''}`}`)
-        .join('\n') || '（无）',
-    )}</pre></section>`
-
-  const copy = document.getElementById('copy')
-  if (copy) {
-    copy.addEventListener('click', () => {
-      const pre = document.getElementById('snippet')
-      if (!pre || !pre.textContent) return
-      void navigator.clipboard.writeText(pre.textContent).then(() => {
-        copy.textContent = '已复制'
-        setTimeout(() => (copy.textContent = '复制'), 1200)
-      })
-    })
-  }
-  wireBack()
-}
-
-;(document.getElementById('refresh') as HTMLButtonElement).addEventListener('click', () => send('refresh'))
-;(document.getElementById('scan') as HTMLButtonElement).addEventListener('click', () => send('scan'))
-exportSchemaBtn.addEventListener('click', () => send(inCandidatesMode ? 'exportAllSchemas' : 'exportSchema'))
-;(document.getElementById('export-mapping-table') as HTMLButtonElement).addEventListener('click', () =>
-  send('exportMappingTable'),
-)
-
-onmessage = (e: MessageEvent) => {
-  const msg = e.data && e.data.pluginMessage
-  if (msg) render(msg as Msg)
-}
-
-// UI 就绪后主动拉一次。主线程不做首次 post —— 那会早于这行代码执行，首帧会丢
-send('refresh')