Bugfix/layout shifts

src/core/elementNode.ts

@@ -1,58 +1,55 @@
 import { renderer } from './lightningInit.js';
 import {
+  AddColorString,
+  type AnimationEventHandler,
+  type AnimationEvents,
+  type AnimationSettings,
   type BorderRadius,
   type BorderStyle,
-  type StyleEffects,
-  type AnimationSettings,
+  type DollarString,
   type ElementText,
-  type Styles,
-  type AnimationEvents,
-  type AnimationEventHandler,
-  AddColorString,
-  TextProps,
-  type OnEvent,
   NewOmit,
+  type OnEvent,
   SingleBorderStyle,
-  type DollarString,
+  type StyleEffects,
+  type Styles,
+  TextProps,
 } from './intrinsicTypes.js';
 import States, { type NodeStates } from './states.js';
 import calculateFlexOld from './flex.js';
 import calculateFlexNew from './flexLayout.js';
-
-const calculateFlex = import.meta.env?.VITE_USE_NEW_FLEX
-  ? calculateFlexNew
-  : calculateFlexOld;
 import {
-  log,
   isArray,
-  keyExists,
-  isINode,
   isElementNode,
   isElementText,
-  logRenderTree,
   isFunction,
+  isINode,
+  isTextNode,
+  keyExists,
+  log,
+  logRenderTree,
   spliceItem,
 } from './utils.js';
 import { isDev, SHADERS_ENABLED } from './env.js';
 import { Config, isDomRendererActive } from './config.js';
 import type {
-  RendererMain,
+  CoreShaderNode,
+  IAnimationController,
   INode,
   INodeAnimateProps,
-  IAnimationController,
+  INodeProps,
+  ITextNodeProps,
   LinearGradientProps,
   RadialGradientProps,
+  RendererMain,
   ShadowProps,
-  CoreShaderNode,
-  ITextNodeProps,
-  INodeProps,
 } from '@solidtv/renderer';
 import { assertTruthy } from '@solidtv/renderer/utils';
 import { NodeType, TextNode } from './nodeTypes.js';
 import {
+  FocusNode,
   ForwardFocusHandler,
   setActiveElementCore,
-  FocusNode,
 } from './focusManager.js';
 import { initClickInspector } from './clickInspector.js';
 
@@ -65,6 +62,10 @@ import {
   IRendererTextNodeProps,
 } from './dom-renderer/domRendererTypes.js';
 
+const calculateFlex = import.meta.env?.VITE_USE_NEW_FLEX
+  ? calculateFlexNew
+  : calculateFlexOld;
+
 // Unified post-mutation scheduler.
 //
 // Three phases run in one microtask (or one renderer-tick callback):
@@ -1406,6 +1407,23 @@ export class ElementNode {
     }
   }
 
+  _isFlexRow() {
+    // default flexDirection is row if not specified
+    return (
+      this.display === 'flex' &&
+      this.flexDirection !== 'column' &&
+      this.flexDirection !== 'column-reverse'
+    );
+  }
+
+  _isFlexColumn() {
+    return (
+      this.display === 'flex' &&
+      this.flexDirection !== 'column' &&
+      this.flexDirection !== 'column-reverse'
+    );
+  }
+
   _stateChanged() {
     if (isDev) log('State Changed: ', this, this.states);
 
@@ -1636,31 +1654,17 @@ export class ElementNode {
         }
       }
     } else {
-      // If its not an image or texture apply some defaults
+      // If it's not an image or texture apply some defaults
       if (!props.texture) {
-        // Set width and height to parent less offset
+        // Set width and height to parent less offset. If it's a flex, we let the flexLayout handle the calculations
         if (isNaN(props.w as number)) {
-          // A flex container that sizes its width to its children (contain on the
-          // main axis) should default to 1 rather than filling its parent, so it
-          // shrinks to fit content once layout runs.
-          let flexFitsWidth = false;
-          if (node.display === 'flex') {
-            const flexDirection = node.flexDirection || 'row';
-            const isFlexRow =
-              flexDirection === 'row' || flexDirection === 'row-reverse';
-            flexFitsWidth = isFlexRow && node.flexBoundary !== 'fixed';
-          }
-
-          if (node.flexGrow || flexFitsWidth) {
-            props.w = 0;
-          } else {
-            props.w = parentWidth - props.x;
-          }
+          const defaultWidth = this._isFlexRow() ? 0 : parentWidth - props.x;
+          props.w = node.flexGrow ? 0 : defaultWidth;
           node._calcWidth = true;
         }
 
         if (isNaN(props.h as number)) {
-          props.h = parentHeight - props.y;
+          props.h = this._isFlexColumn() ? 0 : parentHeight - props.y;
           node._calcHeight = true;
         }