also looking at this
fix(native): preserve authored keys in mutation nodes
#2084
3 files
+77
-3
Review threads live on the whole diff, not on one commit, so none are shown here - a thread's line means something in the branch's final form, and painting it into an intermediate step would put it on code it is not about.
| @@ -112,6 +112,8 @@ export interface RenderPayload { | ||
| 112 | 112 | |
| 113 | 113 | export interface NativeMutationNode { |
| 114 | 114 | type: string |
| 115 | /** Authored reconciliation identity, retained across native mutations. */ | |
| 116 | key?: string | |
| 115 | 117 | props?: Record<string, unknown> |
| 116 | 118 | style?: Partial<import('../compiler/ir').STXStyle> |
| 117 | 119 | events?: Record<string, string> |
| @@ -121,7 +123,7 @@ export interface NativeMutationNode { | ||
| 121 | 123 | |
| 122 | 124 | export type NativeMutationOperation |
| 123 | 125 | = | { op: 'createNode', id: string, node: NativeMutationNode, root?: boolean } |
| 124 | | { op: 'updateNode', id: string, patch: Omit<NativeMutationNode, 'type'> } | |
| 126 | | { op: 'updateNode', id: string, patch: Omit<NativeMutationNode, 'type' | 'key'> } | |
| 125 | 127 | | { op: 'insertChild', parentId: string, childId: string, index: number } |
| 126 | 128 | | { op: 'moveChild', parentId: string, childId: string, index: number } |
| 127 | 129 | | { op: 'removeNode', id: string } |
| @@ -52,6 +52,7 @@ export interface NativeNode { | ||
| 52 | 52 | |
| 53 | 53 | interface NodeRecord { |
| 54 | 54 | type: string |
| 55 | key?: string | |
| 55 | 56 | props: Record<string, unknown> |
| 56 | 57 | style: Record<string, unknown> |
| 57 | 58 | baseStyle: Record<string, unknown> |
| @@ -131,7 +132,7 @@ export interface NativeHost { | ||
| 131 | 132 | descendants: (node: NativeNode) => NativeNode[] |
| 132 | 133 | scopesIn: (node: NativeNode) => string[] |
| 133 | 134 | /** Register a node the native side already created, so the host can track it. */ |
| 134 | adopt: (node: NativeNode, type: string, owner?: NativeNode | null, descriptor?: Pick<STXNode, 'props' | 'style' | 'events' | 'children' | '_classes' | '_inlineStyle'>) => NativeNode | |
| 135 | adopt: (node: NativeNode, type: string, owner?: NativeNode | null, descriptor?: Pick<STXNode, 'key' | 'props' | 'style' | 'events' | 'children' | '_classes' | '_inlineStyle'>) => NativeNode | |
| 135 | 136 | /** Send whatever is pending now, rather than waiting for the scheduled flush. */ |
| 136 | 137 | flush: () => void |
| 137 | 138 | /** Dispatch an event the native side reported, by the id handed to it. */ |
| @@ -291,6 +292,7 @@ export function createNativeHost(options: NativeHostOptions): NativeHost { | ||
| 291 | 292 | id: node.__stxId, |
| 292 | 293 | node: { |
| 293 | 294 | type: record.type, |
| 295 | ...(record.key === undefined ? {} : { key: record.key }), | |
| 294 | 296 | props: { ...record.props }, |
| 295 | 297 | style: { ...record.style }, |
| 296 | 298 | ...(Object.keys(record.events).length ? { events: { ...record.events } } : {}), |
| @@ -408,7 +410,7 @@ export function createNativeHost(options: NativeHostOptions): NativeHost { | ||
| 408 | 410 | } |
| 409 | 411 | } |
| 410 | 412 | |
| 411 | function adopt(node: NativeNode, type: string, owner?: NativeNode | null, descriptor?: Pick<STXNode, 'props' | 'style' | 'events' | 'children' | '_classes' | '_inlineStyle'>): NativeNode { | |
| 413 | function adopt(node: NativeNode, type: string, owner?: NativeNode | null, descriptor?: Pick<STXNode, 'key' | 'props' | 'style' | 'events' | 'children' | '_classes' | '_inlineStyle'>): NativeNode { | |
| 412 | 414 | const suffix = /(?:^|\D)(\d+)$/.exec(node.__stxId)?.[1] |
| 413 | 415 | if (suffix) |
| 414 | 416 | counter = Math.max(counter, Number(suffix)) |
| @@ -417,6 +419,7 @@ export function createNativeHost(options: NativeHostOptions): NativeHost { | ||
| 417 | 419 | const baseStyle = descriptor?._inlineStyle ? { ...descriptor._inlineStyle } : Object.fromEntries(Object.entries(descriptor?.style ?? {}).filter(([key, value]) => classStyle[key] !== value)) |
| 418 | 420 | const record: NodeRecord = { |
| 419 | 421 | type, |
| 422 | key: descriptor?.key, | |
| 420 | 423 | props: { ...(descriptor?.props ?? {}) }, |
| 421 | 424 | style: { ...(descriptor?.style ?? {}) }, |
| 422 | 425 | baseStyle, |
| @@ -660,6 +663,7 @@ export function createNativeHost(options: NativeHostOptions): NativeHost { | ||
| 660 | 663 | } |
| 661 | 664 | records.set(copy.__stxId, { |
| 662 | 665 | type: descriptor.type, |
| 666 | key: descriptor.key, | |
| 663 | 667 | props: { ...descriptor.props, __stxId: copy.__stxId }, |
| 664 | 668 | style: { ...descriptor.style }, |
| 665 | 669 | baseStyle: { ...descriptor.baseStyle }, |