fix(native): preserve authored keys in mutation nodes

packages/stx/src/native/bridge/protocol.tsmodified+3-1

Changes to packages/stx/src/native/bridge/protocol.ts

		⋯111 linesShow the 111 lines above this hunk@@ -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>
		⋯3 linesShow the 3 lines above this hunk@@ -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 }

packages/stx/src/native/runtime/native-host.tsmodified+6-2

Changes to packages/stx/src/native/runtime/native-host.ts

		⋯51 linesShow the 51 lines above this hunk@@ -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>
		⋯73 linesShow the 73 lines above this hunk@@ -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. */
		⋯153 linesShow the 153 lines above this hunk@@ -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 } } : {}),
		⋯111 linesShow the 111 lines above this hunk@@ -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))
		⋯2 linesShow the 2 lines above this hunk@@ -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,
		⋯237 linesShow the 237 lines above this hunk@@ -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 },

packages/stx/test/native/native-authored-keys.test.tsadded+68-0

Changes to packages/stx/test/native/native-authored-keys.test.ts

		@@ -0,0 +1,68 @@
	1	+import { describe, expect, it } from 'bun:test'
	2	+import path from 'node:path'
	3	+import vm from 'node:vm'
	4	+import { compileSharedScreenBundle } from '../../src/native/compiler/bundle'
	5	+import { createNode } from '../../src/native/compiler/ir'
	6	+import { createNativeHost } from '../../src/native/runtime/native-host'
	7	+import { createTempDir } from '../../src/temp-dir'
	8	+
	9	+describe('authored native reconciliation keys', () => {
	10	+ it('preserves the initial key when a production conditional creates its replacement', async () => {
	11	+ const root = createTempDir('stx-native-authored-keys-')
	12	+ const file = path.join(root, 'Keys.stx')
	13	+ await Bun.write(file, `<script>
	14	+const safe = state(false)
	15	+globalThis.toggleKeyProbe = () => safe.set(!safe())
	16	+</script>
	17	+<View>
	18	+ <View :if="!safe()" key="retained-container" testID="key-probe"><Text>Plain</Text></View>
	19	+ <SafeAreaView :if="safe()" key="retained-container" testID="key-probe"><Text>Safe</Text></SafeAreaView>
	20	+</View>`)
	21	+ const { code } = await compileSharedScreenBundle(file, { minify: true })
	22	+ const messages: any[] = []
	23	+ const scope: Record<string, any> = {
	24	+ console, Promise, Date, Map, Set, WeakMap, WeakSet,
	25	+ __stxNativeBridge: { platform: 'android', capabilityProtocolVersion: 1, capabilities: [],
	26	+ postMessage: (raw: string) => messages.push(JSON.parse(raw)), onMessage() {} },
	27	+ }
	28	+ vm.runInNewContext(code, scope)
	29	+ const settle = async () => { for (let i = 0; i < 6; i++) await Bun.sleep(0) }
	30	+ await settle()
	31	+ function find(node: any): any {
	32	+ if (node?.props?.testID === 'key-probe') return node
	33	+ for (const child of node?.children ?? []) {
	34	+ const found = find(child)
	35	+ if (found) return found
	36	+ }
	37	+ }
	38	+ expect(find(messages.find(message => message.type === 'RENDER')?.payload.document)?.key).toBe('retained-container')
	39	+ for (const type of ['SafeAreaView', 'View', 'SafeAreaView']) {
	40	+ const before = messages.length
	41	+ scope.toggleKeyProbe()
	42	+ await settle()
	43	+ const created = messages.slice(before).flatMap(message => message.payload?.operations ?? [])
	44	+ .find(operation => operation.op === 'createNode' && operation.node?.props?.testID === 'key-probe')
	45	+ expect(created?.node.type).toBe(type)
	46	+ expect(created?.node.key).toBe('retained-container')
	47	+ }
	48	+ })
	49	+
	50	+ it('retains authored keys through cloning, removal and rematerialization', () => {
	51	+ const operations: any[] = []
	52	+ const host = createNativeHost({ send: batch => operations.push(...batch), schedule() {} })
	53	+ const parent = host.adopt({ __stxId: 'root' }, 'View')
	54	+ const descriptor = createNode('TextInput')
	55	+ descriptor.key = 'draft-key'
	56	+ const original = host.adopt({ __stxId: 'original' }, 'TextInput', undefined, descriptor)
	57	+ const cloned = host.clone(original)
	58	+ host.insert(parent, cloned)
	59	+ host.flush()
	60	+ expect(operations.find(operation => operation.op === 'createNode' && operation.id === cloned.__stxId)?.node.key).toBe('draft-key')
	61	+ host.remove(cloned)
	62	+ host.flush()
	63	+ operations.length = 0
	64	+ host.insert(parent, cloned)
	65	+ host.flush()
	66	+ expect(operations.find(operation => operation.op === 'createNode' && operation.id === cloned.__stxId)?.node.key).toBe('draft-key')
	67	+ })
	68	+})