diff --git a/src/components/test/TestFragment2.tsx b/src/components/test/TestFragment2.tsx new file mode 100644 index 000000000..4e0502408 --- /dev/null +++ b/src/components/test/TestFragment2.tsx @@ -0,0 +1,27 @@ +import React, { useState } from '../../lib/teact/teact'; + +export function App() { + const [trigger, setTrigger] = useState(true); + + return ( +
{ + setTrigger((current) => !current); + }} + > +

Click to update

+ {true && ( + <> + {trigger && fragment} + {trigger && content} + + )} +
+ This should always go last. +
+
+ ); +} + +export default App; diff --git a/src/lib/teact/teact.ts b/src/lib/teact/teact.ts index be26e750e..3cd25755b 100644 --- a/src/lib/teact/teact.ts +++ b/src/lib/teact/teact.ts @@ -171,7 +171,7 @@ function createElement( function buildFragmentElement(children: any[]): VirtualElementFragment { return { type: VirtualElementTypesEnum.Fragment, - children: dropEmptyTail(children).map(buildChildElement), + children: dropEmptyTail(children, true).map(buildChildElement), }; } @@ -223,13 +223,11 @@ function buildComponentElement( componentInstance: ComponentInstance, children: VirtualElementChildren = [], ): VirtualElementComponent { - const builtChildren = dropEmptyTail(children).map(buildChildElement); - return { type: VirtualElementTypesEnum.Component, componentInstance, props: componentInstance.props, - children: builtChildren.length ? builtChildren : [buildEmptyElement()], + children: dropEmptyTail(children, true).map(buildChildElement), }; } @@ -243,7 +241,7 @@ function buildTagElement(tag: string, props: Props, children: any[]): VirtualEle } // We only need placeholders in the middle of collection (to ensure other elements order). -function dropEmptyTail(children: any[]) { +function dropEmptyTail(children: any[], noEmpty = false) { let i = children.length - 1; for (; i >= 0; i--) { @@ -252,7 +250,15 @@ function dropEmptyTail(children: any[]) { } } - return i + 1 < children.length ? children.slice(0, i + 1) : children; + if (i === children.length - 1) { + return children; + } + + if (i === -1 && noEmpty) { + return children.slice(0, 1); + } + + return children.slice(0, i + 1); } function isEmptyPlaceholder(child: any) {