ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Teact: Fix missing layout effects after first render

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-04-15 13:51:22 +02:00
parent a11ef0f618
commit ad9e1bb9a1
2 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/teact/teact-dom.ts
View File

@ -18,6 +18,7 @@ import {
renderComponent, renderComponent,
unmountComponent, unmountComponent,
isFragmentElement, isFragmentElement,
runImmediateEffects,
} from './teact'; } from './teact';
import { DEBUG } from '../../config'; import { DEBUG } from '../../config';
import { addEventListener, removeAllDelegatedListeners, removeEventListener } from './dom-events'; import { addEventListener, removeAllDelegatedListeners, removeEventListener } from './dom-events';
@ -55,6 +56,9 @@ function render($element: VirtualElement | undefined, parentEl: HTMLElement) {
const $head = headsByElement.get(parentEl)!; const $head = headsByElement.get(parentEl)!;
const $newElement = renderWithVirtual(parentEl, $head.children[0], $element, $head, 0); const $newElement = renderWithVirtual(parentEl, $head.children[0], $element, $head, 0);
queueMicrotask(runImmediateEffects);
$head.children = $newElement ? [$newElement] : []; $head.children = $newElement ? [$newElement] : [];
if (process.env.APP_ENV === 'perf') { if (process.env.APP_ENV === 'perf') {

6
src/lib/teact/teact.ts
View File

@ -335,6 +335,10 @@ const runUpdatePassOnRaf = throttleWithRafFallback(() => {
forceUpdateComponent(instance); forceUpdateComponent(instance);
}); });
runImmediateEffects();
});
export function runImmediateEffects() {
const currentLayoutCleanups = pendingLayoutCleanups; const currentLayoutCleanups = pendingLayoutCleanups;
pendingLayoutCleanups = new Map(); pendingLayoutCleanups = new Map();
currentLayoutCleanups.forEach((cb) => cb()); currentLayoutCleanups.forEach((cb) => cb());
@ -342,7 +346,7 @@ const runUpdatePassOnRaf = throttleWithRafFallback(() => {
const currentLayoutEffects = pendingLayoutEffects; const currentLayoutEffects = pendingLayoutEffects;
pendingLayoutEffects = new Map(); pendingLayoutEffects = new Map();
currentLayoutEffects.forEach((cb) => cb()); currentLayoutEffects.forEach((cb) => cb());
}); }
function scheduleUpdate(componentInstance: ComponentInstance) { function scheduleUpdate(componentInstance: ComponentInstance) {
instancesPendingUpdate.add(componentInstance); instancesPendingUpdate.add(componentInstance);