react-native-divkit 0.1.0-alpha.1 → 0.1.0-alpha.2

package/src/components/README.md

@@ -3,9 +3,11 @@
 ## MVP Components Implemented
 
 ### 1. DivText (`text/DivText.tsx`)
+
 Text rendering component with variable substitution and styling.
 
 **Features:**
+
 - ✅ Text rendering with variable substitution
 - ✅ Font styling (size, weight, color, family)
 - ✅ Text alignment (horizontal, RTL support)
@@ -15,6 +17,7 @@ Text rendering component with variable substitution and styling.
 - ✅ Font feature settings (basic)
 
 **Deferred:**
+
 - Text ranges (nested styling)
 - Text images
 - Text gradients
@@ -23,9 +26,11 @@ Text rendering component with variable substitution and styling.
 - Selectable text with custom actions
 
 ### 2. DivContainer (`container/DivContainer.tsx`)
+
 Flex container component for layout management.
 
 **Features:**
+
 - ✅ Vertical/horizontal/overlap orientation
 - ✅ Content alignment (horizontal & vertical)
 - ✅ Item spacing (gap)
@@ -33,6 +38,7 @@ Flex container component for layout management.
 - ✅ RTL support
 
 **Deferred:**
+
 - Wrap layout mode
 - Separators (visual dividers)
 - Line separators (for wrap mode)
@@ -41,9 +47,11 @@ Flex container component for layout management.
 - Clip to bounds
 
 ### 3. DivImage (`image/DivImage.tsx`)
+
 Image component with network loading and scaling.
 
 **Features:**
+
 - ✅ Network image loading
 - ✅ Scaling modes (fill, fit, stretch, no_scale)
 - ✅ Placeholder color while loading
@@ -52,6 +60,7 @@ Image component with network loading and scaling.
 - ✅ Aspect ratio
 
 **Deferred:**
+
 - GIF support (requires react-native-gif)
 - Image preview (blur-up technique)
 - Tint color and tint modes
@@ -61,9 +70,11 @@ Image component with network loading and scaling.
 - react-native-fast-image integration
 
 ### 4. DivState (`state/DivState.tsx`)
+
 State management component for switching between different UI states.
 
 **Features:**
+
 - ✅ State selection by state_id
 - ✅ Default state
 - ✅ State switching via actions (set_state)
@@ -72,6 +83,7 @@ State management component for switching between different UI states.
 - ✅ Two-way binding with variables
 
 **Deferred:**
+
 - Transition animations (in/out/change)
 - Animation timing and interpolation
 - Clip to bounds
@@ -79,15 +91,18 @@ State management component for switching between different UI states.
 - Multiple concurrent state transitions
 
 ### 5. DivComponent (`DivComponent.tsx`)
+
 Universal component router that dispatches to appropriate component based on type.
 
 **Supported Types:**
+
 - `text` → DivText
 - `container` → DivContainer
 - `image` / `gif` → DivImage
 - `state` → DivState
 
 **Deferred Types:**
+
 - `gallery`, `pager`, `tabs`
 - `slider`, `indicator`
 - `input`, `select`, `switch`
@@ -97,9 +112,11 @@ Universal component router that dispatches to appropriate component based on typ
 ## Utility Components
 
 ### Outer (`utilities/Outer.tsx`)
+
 Base wrapper component providing common functionality for all components.
 
 **Features:**
+
 - Visibility handling (visible/invisible/gone)
 - Sizing (width/height with fixed/match_parent/wrap_content)
 - Padding and margins
@@ -110,6 +127,7 @@ Base wrapper component providing common functionality for all components.
 - Action handling (onPress)
 
 ### Unknown (`utilities/Unknown.tsx`)
+
 Fallback component for unsupported types.
 
 ## Architecture
@@ -131,6 +149,7 @@ DivComponent (router)
 ## Integration with Context System
 
 All components integrate with:
+
 - **DivKitContext**: Access to variables, actions, configuration
 - **StateContext**: State management and transitions
 - **ActionContext**: Action execution
@@ -139,6 +158,7 @@ All components integrate with:
 ## Integration with Hooks
 
 All components use reactive hooks:
+
 - `useDerivedFromVarsSimple`: Variable substitution
 - `useAction`, `useActionHandler`: Action execution
 - `useDivKitContext`, `useStateContext`: Context access
@@ -149,29 +169,29 @@ All components use reactive hooks:
 import { DivComponent } from 'react-native-divkit';
 
 const json = {
-  type: 'container',
-  orientation: 'vertical',
-  items: [
-    {
-      type: 'text',
-      text: 'Hello @{userName}!',
-      font_size: 24
-    },
-    {
-      type: 'image',
-      image_url: 'https://example.com/image.png',
-      scale: 'fit'
-    }
-  ]
+    type: 'container',
+    orientation: 'vertical',
+    items: [
+        {
+            type: 'text',
+            text: 'Hello @{userName}!',
+            font_size: 24
+        },
+        {
+            type: 'image',
+            image_url: 'https://example.com/image.png',
+            scale: 'fit'
+        }
+    ]
 };
 
 const componentContext = {
-  json,
-  variables: variablesMap,
-  // ... other context props
+    json,
+    variables: variablesMap
+    // ... other context props
 };
 
-<DivComponent componentContext={componentContext} />
+<DivComponent componentContext={componentContext} />;
 ```
 
 ## Next Steps (Phase 6)

package/src/components/container/DivContainer.tsx

@@ -50,10 +50,7 @@ export function DivContainer({ componentContext }: DivContainerProps) {
         variables || new Map()
     );
 
-    const itemSpacing = useDerivedFromVarsSimple<number>(
-        json.item_spacing || 0,
-        variables || new Map()
-    );
+    const itemSpacing = useDerivedFromVarsSimple<number>(json.item_spacing || 0, variables || new Map());
 
     // Build container style
     const containerStyle = useMemo((): ViewStyle => {
@@ -120,19 +117,14 @@ export function DivContainer({ componentContext }: DivContainerProps) {
 
         return json.items.map((item, index) => {
             const childContext = componentContext.produceChildContext(item, {
-                path: index,
+                path: index
             });
 
             if (!childContext) {
                 return null;
             }
 
-            const child = (
-                <DivComponent
-                    key={item.id || `item-${index}`}
-                    componentContext={childContext}
-                />
-            );
+            const child = <DivComponent key={item.id || `item-${index}`} componentContext={childContext} />;
 
             // Wrap in positioned View for overlap mode
             if (orientation === 'overlap' && childWrapperStyle) {
@@ -149,9 +141,7 @@ export function DivContainer({ componentContext }: DivContainerProps) {
 
     return (
         <Outer componentContext={componentContext}>
-            <View style={containerStyle}>
-                {renderChildren()}
-            </View>
+            <View style={containerStyle}>{renderChildren()}</View>
         </Outer>
     );
 }

package/src/components/image/DivImage.tsx

@@ -43,10 +43,7 @@ export function DivImage({ componentContext }: DivImageProps) {
         variables || new Map()
     );
 
-    const scale = useDerivedFromVarsSimple<ImageScale>(
-        json.scale || 'fill',
-        variables || new Map()
-    );
+    const scale = useDerivedFromVarsSimple<ImageScale>(json.scale || 'fill', variables || new Map());
 
     const placeholderColor = useDerivedFromVarsSimple<string | undefined>(
         json.placeholder_color,
@@ -103,12 +100,6 @@ export function DivImage({ componentContext }: DivImageProps) {
         return style;
     }, [json.aspect]);
 
-    // Handle image load events
-    const handleLoadStart = () => {
-        setLoading(true);
-        setError(false);
-    };
-
     const handleLoadEnd = () => {
         setLoading(false);
     };
@@ -146,7 +137,6 @@ export function DivImage({ componentContext }: DivImageProps) {
                     source={{ uri: imageUrl }}
                     style={imageStyle}
                     resizeMode={resizeMode}
-                    onLoadStart={handleLoadStart}
                     onLoadEnd={handleLoadEnd}
                     onError={handleError}
                 />

package/src/components/state/DivState.tsx

@@ -116,7 +116,7 @@ export function DivState({ componentContext }: DivStateProps) {
         if (!currentState?.div) return undefined;
 
         return componentContext.produceChildContext(currentState.div, {
-            path: currentStateId,
+            path: currentStateId
         });
     }, [currentState, currentStateId, componentContext]);
 
@@ -129,18 +129,12 @@ export function DivState({ componentContext }: DivStateProps) {
         // Import DivComponent dynamically to avoid circular dependency
         const DivComponent = require('../DivComponent').DivComponent;
 
-        return (
-            <DivComponent
-                componentContext={childContext}
-            />
-        );
+        return <DivComponent componentContext={childContext} />;
     };
 
     return (
         <Outer componentContext={componentContext}>
-            <View>
-                {renderContent()}
-            </View>
+            <View>{renderContent()}</View>
         </Outer>
     );
 }

package/src/components/text/DivText.tsx

@@ -35,30 +35,18 @@ export function DivText({ componentContext }: DivTextProps) {
     const { json, variables } = componentContext;
 
     // Reactive properties - use hooks for properties that may contain variables
-    const text = useDerivedFromVarsSimple<string>(
-        json.text || '',
-        variables || new Map()
-    );
+    const text = useDerivedFromVarsSimple<string>(json.text || '', variables || new Map());
 
-    const fontSize = useDerivedFromVarsSimple<number>(
-        json.font_size || 12,
-        variables || new Map()
-    );
+    const fontSize = useDerivedFromVarsSimple<number>(json.font_size || 12, variables || new Map());
 
-    const textColor = useDerivedFromVarsSimple<string>(
-        json.text_color || '#000000',
-        variables || new Map()
-    );
+    const textColor = useDerivedFromVarsSimple<string>(json.text_color || '#000000', variables || new Map());
 
     const textAlignmentHorizontal = useDerivedFromVarsSimple(
         json.text_alignment_horizontal || 'start',
         variables || new Map()
     );
 
-    const maxLines = useDerivedFromVarsSimple<number | undefined>(
-        json.max_lines,
-        variables || new Map()
-    );
+    const maxLines = useDerivedFromVarsSimple<number | undefined>(json.max_lines, variables || new Map());
 
     // Build text style
     const textStyle = useMemo((): TextStyle => {
@@ -77,10 +65,10 @@ export function DivText({ componentContext }: DivTextProps) {
         // Font weight
         if (json.font_weight) {
             const weightMap: Record<FontWeight, TextStyle['fontWeight']> = {
-                'light': '300',
-                'regular': '400',
-                'medium': '500',
-                'bold': '700'
+                light: '300',
+                regular: '400',
+                medium: '500',
+                bold: '700'
             };
             style.fontWeight = weightMap[json.font_weight] || '400';
         } else if (json.font_weight_value) {

package/src/components/utilities/Outer.tsx

@@ -31,14 +31,8 @@ export function Outer<T extends DivBaseData = DivBaseData>({
 
     // Only use reactive hooks for truly dynamic properties (visibility, alpha)
     // For MVP, other properties are read directly from JSON (can be enhanced later)
-    const visibility = useDerivedFromVarsSimple<Visibility>(
-        json.visibility || 'visible',
-        variables || new Map()
-    );
-    const alpha = useDerivedFromVarsSimple<number>(
-        json.alpha !== undefined ? json.alpha : 1,
-        variables || new Map()
-    );
+    const visibility = useDerivedFromVarsSimple<Visibility>(json.visibility || 'visible', variables || new Map());
+    const alpha = useDerivedFromVarsSimple<number>(json.alpha !== undefined ? json.alpha : 1, variables || new Map());
 
     // Extract properties directly from JSON for MVP (non-reactive)
     const paddings = json.paddings;
@@ -76,7 +70,10 @@ export function Outer<T extends DivBaseData = DivBaseData>({
             if (widthVal.type === 'fixed') {
                 styles.width = (widthVal as FixedSize).value;
             } else if (widthVal.type === 'match_parent') {
-                styles.width = '100%';
+                // Use alignSelf: 'stretch' instead of width: '100%' so that
+                // margins are subtracted from the available space rather than
+                // added on top of 100%, which would cause overflow.
+                styles.alignSelf = 'stretch';
                 styles.flexGrow = (widthVal as MatchParentSize).weight || 1;
             } else if (widthVal.type === 'wrap_content') {
                 styles.alignSelf = 'flex-start';
@@ -84,7 +81,7 @@ export function Outer<T extends DivBaseData = DivBaseData>({
             }
         } else {
             // Default: match_parent
-            styles.width = '100%';
+            styles.alignSelf = 'stretch';
             styles.flexGrow = 1;
         }
 
@@ -222,18 +219,11 @@ export function Outer<T extends DivBaseData = DivBaseData>({
     // Render with or without Pressable based on actions
     if (hasActions) {
         return (
-            <Pressable
-                onPress={handlePress}
-                style={finalStyle}
-            >
+            <Pressable onPress={handlePress} style={finalStyle}>
                 {children}
             </Pressable>
         );
     }
 
-    return (
-        <View style={finalStyle}>
-            {children}
-        </View>
-    );
+    return <View style={finalStyle}>{children}</View>;
 }

package/src/components/utilities/README.md

@@ -9,6 +9,7 @@ Base utility components for DivKit React Native library.
 Base wrapper component for all DivKit components. Handles common properties like visibility, sizing, padding, margins, background, borders, and actions.
 
 **Features:**
+
 - ✅ Visibility handling (`gone`, `invisible`, `visible`)
 - ✅ Width/Height sizing (`fixed`, `match_parent`, `wrap_content`)
 - ✅ Padding and margins (with RTL support)
@@ -25,11 +26,11 @@ Base wrapper component for all DivKit components. Handles common properties like
 import { Outer } from './components/utilities';
 
 function MyComponent({ componentContext }) {
-  return (
-    <Outer componentContext={componentContext}>
-      <Text>Content goes here</Text>
-    </Outer>
-  );
+    return (
+        <Outer componentContext={componentContext}>
+            <Text>Content goes here</Text>
+        </Outer>
+    );
 }
 ```
 
@@ -58,6 +59,7 @@ If the component has `actions` defined in JSON, Outer automatically wraps childr
 **RTL Support:**
 
 Padding and margins respect `direction` from DivKitContext:
+
 - `start`/`end` → automatically mapped to `left`/`right` based on direction
 - Supports both LTR and RTL layouts
 
@@ -73,14 +75,14 @@ Fallback component for unsupported component types. Renders a placeholder in DEV
 import { Unknown } from './components/utilities';
 
 function ComponentResolver({ type }) {
-  switch (type) {
-    case 'text':
-      return <DivText />;
-    case 'container':
-      return <DivContainer />;
-    default:
-      return <Unknown type={type} message="Not implemented yet" />;
-  }
+    switch (type) {
+        case 'text':
+            return <DivText />;
+        case 'container':
+            return <DivContainer />;
+        default:
+            return <Unknown type={type} message="Not implemented yet" />;
+    }
 }
 ```
 
@@ -104,12 +106,14 @@ function ComponentResolver({ type }) {
 The current implementation is MVP-focused and includes only essential features:
 
 **Included:**
+
 - Basic sizing and layout
 - Solid color backgrounds
 - Simple borders and shadows
 - Basic action handling
 
 **Deferred (Post-MVP):**
+
 - Complex backgrounds (images, gradients)
 - Advanced animations and transitions
 - Extensions
@@ -152,24 +156,24 @@ import { render } from '@testing-library/react-native';
 import { Outer } from './Outer';
 
 it('renders children when visible', () => {
-  const { getByText } = render(
-    <Outer componentContext={mockContext}>
-      <Text>Test</Text>
-    </Outer>
-  );
-  expect(getByText('Test')).toBeTruthy();
+    const { getByText } = render(
+        <Outer componentContext={mockContext}>
+            <Text>Test</Text>
+        </Outer>
+    );
+    expect(getByText('Test')).toBeTruthy();
 });
 
 it('returns null when visibility is gone', () => {
-  const context = {
-    ...mockContext,
-    json: { ...mockContext.json, visibility: 'gone' }
-  };
-  const { queryByText } = render(
-    <Outer componentContext={context}>
-      <Text>Test</Text>
-    </Outer>
-  );
-  expect(queryByText('Test')).toBeNull();
+    const context = {
+        ...mockContext,
+        json: { ...mockContext.json, visibility: 'gone' }
+    };
+    const { queryByText } = render(
+        <Outer componentContext={context}>
+            <Text>Test</Text>
+        </Outer>
+    );
+    expect(queryByText('Test')).toBeNull();
 });
 ```

package/src/context/index.ts

@@ -3,18 +3,9 @@
  * Phase 2: Context System
  */
 
-export {
-    DivKitContext,
-    useDivKitContext,
-    type DivKitContextValue
-} from './DivKitContext';
+export { DivKitContext, useDivKitContext, type DivKitContextValue } from './DivKitContext';
 
-export {
-    ActionContext,
-    useActionContext,
-    useActionContextOptional,
-    type ActionContextValue
-} from './ActionContext';
+export { ActionContext, useActionContext, useActionContextOptional, type ActionContextValue } from './ActionContext';
 
 export {
     StateContext,

package/src/expressions/ast.d.ts

@@ -1,10 +1,17 @@
-export type Node = BinaryExpression | LogicalExpression |
-    UnaryExpression |
-    StringLiteral | NumberLiteral | IntegerLiteral | BooleanLiteral |
-    TemplateLiteral |
-    ConditionalExpression | TryExpression |
-    CallExpression | MethodExpression |
-    Variable;
+export type Node =
+    | BinaryExpression
+    | LogicalExpression
+    | UnaryExpression
+    | StringLiteral
+    | NumberLiteral
+    | IntegerLiteral
+    | BooleanLiteral
+    | TemplateLiteral
+    | ConditionalExpression
+    | TryExpression
+    | CallExpression
+    | MethodExpression
+    | Variable;
 
 export type UnaryOperator = '!' | '+' | '-';
 
@@ -19,14 +26,14 @@ export type FactorOperator = '/' | '*' | '%';
 export type LogicalOperator = '&&' | '||';
 
 export interface BinaryExpression {
-    type: 'BinaryExpression',
+    type: 'BinaryExpression';
     operator: EqualityOperator | CompareOperator | SumOperator | FactorOperator;
     left: Node;
     right: Node;
 }
 
 export interface LogicalExpression {
-    type: 'LogicalExpression',
+    type: 'LogicalExpression';
     operator: LogicalOperator;
     left: Node;
     right: Node;