openpencil/packages/fig/src/node-change/variable/metadata.ts
Danila Poyarkov 5146e7f7e5
fix(fig): keep variable metadata, plugin data and default mode on save (#848)
* fix(fig): keep variable metadata, plugin data and default mode on save

Saving a .fig rebuilt every variable record from the model, which held none
of Figma's variable metadata, so each save wrote variables as published to
all scopes with no description or code names, dropped other plugins' data,
and made the first mode the default.

Variables now carry scopes, codeSyntax and pluginData, collections carry
pluginData, and the reader and writer translate description,
symbolDescription, isPublishable, variableScopes and codeSyntax. Figma has
no default-mode field, so setting a default moves that mode first (undo
restores the order) and the writer orders the default first.

This is the base for design tokens: the CSS name will live in
codeSyntax.WEB and unit and mode conditions in OpenPencil plugin data.

* refactor(scene-graph): share the default-first mode order

setDefaultMode and the .fig writer both moved the default mode first by
hand; modesDefaultFirst does it once, with es-toolkit's partition.

* fix(core): undo a default mode change on the collection currently in the graph

Undoing a collection's removal restores a copy of it, so the inverse of
setDefaultMode wrote the previous order and default to an object the
graph no longer held when both were undone. Look the collection up by id
when undoing, as the forward step already does.
2026-10-04 12:53:04 +04:00

66 lines
2.3 KiB
TypeScript

import type { NodeChange } from '@open-pencil/kiwi/fig/codec'
import {
CODE_SYNTAX_PLATFORMS,
VARIABLE_SCOPES,
type CodeSyntaxPlatform,
type PluginDataEntry,
type Variable,
type VariableScope
} from '@open-pencil/scene-graph'
import { extractPluginData, mergePluginData } from '../plugin-data'
type VariableMetadata = Pick<
Variable,
'description' | 'hiddenFromPublishing' | 'scopes' | 'codeSyntax' | 'pluginData'
>
const isScope = (value: string): value is VariableScope =>
(VARIABLE_SCOPES as readonly string[]).includes(value)
const isPlatform = (value: string): value is CodeSyntaxPlatform =>
(CODE_SYNTAX_PLATFORMS as readonly string[]).includes(value)
function readCodeSyntax(nc: NodeChange): Variable['codeSyntax'] {
const entries = (nc.codeSyntax?.entries ?? []).flatMap(({ platform, value }) =>
isPlatform(platform) && value ? [[platform, value] as const] : []
)
return entries.length > 0 ? Object.fromEntries(entries) : undefined
}
/** Figma keeps the description twice, as `description` and `symbolDescription`. */
export function readVariableMetadata(nc: NodeChange): VariableMetadata {
const scopes = nc.variableScopes?.filter(isScope)
const pluginData = extractPluginData(nc)
return {
description: nc.description ?? nc.symbolDescription ?? '',
hiddenFromPublishing: nc.isPublishable === false,
scopes: scopes?.length ? scopes : undefined,
codeSyntax: readCodeSyntax(nc),
pluginData: pluginData.length > 0 ? pluginData : undefined
}
}
export function variableMetadataNodeChange(variable: Variable): Partial<NodeChange> {
const codeSyntax = Object.entries(variable.codeSyntax ?? {}).flatMap(([platform, value]) =>
value ? [{ platform, value }] : []
)
const nc: Partial<NodeChange> = {
isPublishable: !variable.hiddenFromPublishing,
variableScopes: variable.scopes?.length ? variable.scopes : ['ALL_SCOPES'],
pluginData: pluginDataNodeChange(variable.pluginData)
}
if (variable.description) {
nc.description = variable.description
nc.symbolDescription = variable.description
}
if (codeSyntax.length > 0) nc.codeSyntax = { entries: codeSyntax }
return nc
}
export function pluginDataNodeChange(
pluginData: PluginDataEntry[] | undefined
): NodeChange['pluginData'] {
return pluginData?.length ? mergePluginData(pluginData) : undefined
}