fix: adjust key generating in the library

Author: 5ZYSZ3K

packages/render/src/renderChildren.tsx

@@ -4,6 +4,16 @@ import TNodeRenderer from './TNodeRenderer';
 import { TChildrenRendererProps } from './shared-types';
 import collapseTopMarginForChild from './helpers/collapseTopMarginForChild';
 
+function generateKey(childTnode: TNode): string {
+  let key = "";
+  let currNode = childTnode as TNode | null;
+  while (currNode){
+    key = `${key}-${currNode.tagName}-${String(currNode.nodeIndex)}`
+    currNode = currNode.parent;
+  }
+  return `childTnode-${key}`
+}
+
 const mapCollapsibleChildren = (
   propsForChildren: TChildrenRendererProps['propsForChildren'],
   renderChild: TChildrenRendererProps['renderChild'],
@@ -16,7 +26,7 @@ const mapCollapsibleChildren = (
     ? null
     : collapseTopMarginForChild(n, tchildren);
   const propsFromParent = { ...propsForChildren, collapsedMarginTop };
-  const key = childTnode.nodeIndex;
+  const key = `tnode_${generateKey(childTnode)}`;
   const childElement = React.createElement(TNodeRenderer, {
     propsFromParent,
     tnode: childTnode,

packages/transient-render-engine/src/__tests__/__snapshots__/TRenderEngine.test.ts.snap

@@ -132,11 +132,11 @@ exports[`TRenderEngine > buildTTree method should support disabling whitespace c
         <TText tagName="span" nodeIndex={1} data="phrasing content" webStyles={{ whiteSpace: "normal"}} />
         <TText anonymous nodeIndex={2} data="\\n" webStyles={{ whiteSpace: "normal"}} />
       </TPhrasing>
-      <TBlock tagName="img" nodeIndex={3} src="https://domain.com/logo.jpg" webStyles={{ whiteSpace: "normal"}} />
-      <TPhrasing anonymous nodeIndex={0} webStyles={{ whiteSpace: "normal"}}>
-        <TText anonymous nodeIndex={4} data="\\n    and this is " webStyles={{ whiteSpace: "normal"}} />
-        <TText tagName="strong" nodeIndex={5} data="too" webStyles={{ whiteSpace: "normal"}} />
-        <TText anonymous nodeIndex={6} data=".\\n" webStyles={{ whiteSpace: "normal"}} />
+      <TBlock tagName="img" nodeIndex={1} src="https://domain.com/logo.jpg" webStyles={{ whiteSpace: "normal"}} />
+      <TPhrasing anonymous nodeIndex={2} webStyles={{ whiteSpace: "normal"}}>
+        <TText anonymous nodeIndex={0} data="\\n    and this is " webStyles={{ whiteSpace: "normal"}} />
+        <TText tagName="strong" nodeIndex={1} data="too" webStyles={{ whiteSpace: "normal"}} />
+        <TText anonymous nodeIndex={2} data=".\\n" webStyles={{ whiteSpace: "normal"}} />
       </TPhrasing>
     </TBlock>
   </TBlock>

packages/transient-render-engine/src/flow/__tests__/__snapshots__/hoist.test.ts.snap

@@ -7,20 +7,20 @@ exports[`hoist function should comply with RFC002 example (hoisting)  1`] = `
     <TText tagName="span" nodeIndex={1} data="phrasing content" />
     <TText anonymous nodeIndex={2} data="\\n" />
   </TPhrasing>
-  <TBlock tagName="img" nodeIndex={3} src="https://domain.com/logo.jpg" />
-  <TPhrasing anonymous nodeIndex={0}>
-    <TText anonymous nodeIndex={4} data="\\n    and this is " />
-    <TText tagName="strong" nodeIndex={5} data="too" />
-    <TText anonymous nodeIndex={6} data=".\\n" />
+  <TBlock tagName="img" nodeIndex={1} src="https://domain.com/logo.jpg" />
+  <TPhrasing anonymous nodeIndex={2}>
+    <TText anonymous nodeIndex={0} data="\\n    and this is " />
+    <TText tagName="strong" nodeIndex={1} data="too" />
+    <TText anonymous nodeIndex={2} data=".\\n" />
   </TPhrasing>
 </TBlock>
 `;
 
 exports[`hoist function should hoist multiple blocks 1`] = `
 <TBlock tagName="span" nodeIndex={0}>
   <TBlock tagName="div" nodeIndex={0} />
-  <TPhrasing anonymous nodeIndex={0}>
-    <TText anonymous nodeIndex={1} data="Hello" />
+  <TPhrasing anonymous nodeIndex={1}>
+    <TText anonymous nodeIndex={0} data="Hello" />
   </TPhrasing>
   <TBlock tagName="img" nodeIndex={2} />
 </TBlock>

packages/transient-render-engine/src/flow/hoist.ts

@@ -16,7 +16,7 @@ function groupText(tnode: TBlockImpl): TNodeImpl {
     // some React Native styles working only for the uppermost Text element
     // such as "textAlign" are preserved.
     parentStyles: tnode.styles,
-    parent: null
+    parent: tnode
   };
   let wrapper = new TPhrasingCtor(wrapperInit);
   let wrapperChildren: TNodeImpl[] = [];
@@ -26,18 +26,18 @@ function groupText(tnode: TBlockImpl): TNodeImpl {
     } else {
       if (wrapperChildren.length) {
         newChildren.push(wrapper);
-        wrapper.bindChildren(wrapperChildren);
+        wrapper.bindChildren(wrapperChildren, true);
         wrapper = new TPhrasingCtor(wrapperInit);
         wrapperChildren = [];
       }
       newChildren.push(child);
     }
   }
   if (wrapperChildren.length) {
-    wrapper.bindChildren(wrapperChildren);
+    wrapper.bindChildren(wrapperChildren, true);
     newChildren.push(wrapper);
   }
-  tnode.bindChildren(newChildren);
+  tnode.bindChildren(newChildren, true);
   return tnode;
 }