react-native-divkit 0.1.0-alpha.1

package/src/hooks/useVariable.ts

@@ -0,0 +1,157 @@
+/**
+ * React hook for subscribing to a specific DivKit variable
+ * Automatically updates component when variable value changes
+ */
+
+import { useEffect, useState } from 'react';
+import type { Variable, VariableValue } from '../expressions/variable';
+import { useDivKitContext } from '../context/DivKitContext';
+
+/**
+ * Subscribe to a variable by name and get its current value
+ *
+ * @param variableName Name of the variable to subscribe to
+ * @returns Current value of the variable, or undefined if not found
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const userName = useVariable('userName');
+ *   return <Text>Hello {userName}</Text>;
+ * }
+ * ```
+ */
+export function useVariable(variableName: string): VariableValue | undefined {
+    const { getVariable } = useDivKitContext();
+    const variable = getVariable(variableName);
+
+    const [value, setValue] = useState<VariableValue | undefined>(() =>
+        variable ? variable.getValue() : undefined
+    );
+
+    useEffect(() => {
+        if (!variable) {
+            setValue(undefined);
+            return;
+        }
+
+        // Subscribe to variable changes
+        const unsubscribe = variable.subscribe((newValue) => {
+            setValue(newValue);
+        });
+
+        return unsubscribe;
+    }, [variable]);
+
+    return value;
+}
+
+/**
+ * Subscribe to a Variable instance directly (for advanced use cases)
+ *
+ * @param variable Variable instance to subscribe to
+ * @returns Current value of the variable
+ *
+ * @example
+ * ```tsx
+ * function MyComponent({ variable }: { variable: Variable }) {
+ *   const value = useVariableInstance(variable);
+ *   return <Text>{String(value)}</Text>;
+ * }
+ * ```
+ */
+export function useVariableInstance<T extends VariableValue>(
+    variable: Variable<T> | undefined
+): T | undefined {
+    const [value, setValue] = useState<T | undefined>(() =>
+        variable ? variable.getValue() : undefined
+    );
+
+    useEffect(() => {
+        if (!variable) {
+            setValue(undefined);
+            return;
+        }
+
+        // Subscribe to variable changes
+        const unsubscribe = variable.subscribe((newValue) => {
+            setValue(newValue);
+        });
+
+        return unsubscribe;
+    }, [variable]);
+
+    return value;
+}
+
+/**
+ * Get variable setter function
+ * Returns a function that updates the variable value
+ *
+ * @param variableName Name of the variable
+ * @returns Setter function, or undefined if variable not found
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const userName = useVariable('userName');
+ *   const setUserName = useVariableSetter('userName');
+ *
+ *   return (
+ *     <View>
+ *       <Text>Hello {userName}</Text>
+ *       <Button
+ *         title="Change name"
+ *         onPress={() => setUserName?.('Bob')}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function useVariableSetter(
+    variableName: string
+): ((value: VariableValue) => void) | undefined {
+    const { setVariable } = useDivKitContext();
+
+    // Return stable function reference
+    return (value: VariableValue) => {
+        setVariable(variableName, value);
+    };
+}
+
+/**
+ * Combined hook that returns both value and setter
+ *
+ * @param variableName Name of the variable
+ * @returns Tuple of [value, setter]
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const [userName, setUserName] = useVariableState('userName');
+ *
+ *   return (
+ *     <View>
+ *       <Text>Hello {userName}</Text>
+ *       <Button
+ *         title="Change name"
+ *         onPress={() => setUserName('Bob')}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function useVariableState(
+    variableName: string
+): [VariableValue | undefined, (value: VariableValue) => void] {
+    const value = useVariable(variableName);
+    const { setVariable } = useDivKitContext();
+
+    const setter = (newValue: VariableValue) => {
+        setVariable(variableName, newValue);
+    };
+
+    return [value, setter];
+}

package/src/index.ts

@@ -0,0 +1,97 @@
+/**
+ * react-native-divkit
+ *
+ * React Native implementation of DivKit
+ * Based on Web (TypeScript + Svelte) implementation
+ *
+ * MVP Scope:
+ * - 4 basic components: Text, Container, Image, State
+ * - Expression engine with variable system
+ * - Action execution
+ * - Template resolution
+ *
+ * @see https://github.com/divkit/divkit
+ */
+
+// Main component
+export { DivKit } from './DivKit';
+export type {
+    DivKitProps,
+    StatCallback,
+    CustomActionCallback,
+    ErrorCallback
+} from './DivKit';
+
+// Types
+export type {
+    Action,
+    DivJson,
+    DivBase,
+    DivVariable,
+    Direction,
+    TemplateContext,
+    BooleanInt
+} from '../typings/common';
+
+export type {
+    DivBaseData
+} from './types/base';
+
+export type {
+    ComponentContext
+} from './types/componentContext';
+
+// Variables
+export {
+    createVariable,
+    Variable,
+    StringVariable,
+    IntegerVariable,
+    NumberVariable,
+    BooleanVariable,
+    ColorVariable,
+    UrlVariable,
+    DictVariable,
+    ArrayVariable
+} from './expressions/variable';
+
+export type {
+    VariableType,
+    VariableValue
+} from './expressions/variable';
+
+// Context hooks (for advanced usage)
+export {
+    useDivKitContext,
+    DivKitContext
+} from './context/DivKitContext';
+
+export type {
+    DivKitContextValue
+} from './context/DivKitContext';
+
+// Hooks (for custom components)
+export {
+    useDerivedFromVars,
+    useDerivedFromVarsSimple
+} from './hooks/useDerivedFromVars';
+
+export {
+    useVariable,
+    useVariableInstance,
+    useVariableSetter,
+    useVariableState
+} from './hooks/useVariable';
+
+export {
+    useAction,
+    useActions,
+    useActionHandler,
+    useHasActions
+} from './hooks/useAction';
+
+// Utils (for advanced usage)
+export { wrapError } from './utils/wrapError';
+export type { WrappedError } from './utils/wrapError';
+
+export { correctColor } from './utils/correctColor';

package/src/stores/createObservable.ts

@@ -0,0 +1,64 @@
+/**
+ * Observable implementation to replace Svelte stores for React Native
+ * Provides subscribe/set pattern compatible with Svelte store interface
+ */
+
+export type Subscriber<T> = (value: T) => void;
+export type Unsubscriber = () => void;
+
+export class Observable<T> {
+  private value: T;
+  private subscribers = new Set<Subscriber<T>>();
+
+  constructor(initialValue: T) {
+    this.value = initialValue;
+  }
+
+  /**
+   * Subscribe to value changes
+   * @param callback Function called immediately with current value and on each change
+   * @returns Unsubscribe function
+   */
+  subscribe(callback: Subscriber<T>): Unsubscriber {
+    this.subscribers.add(callback);
+    // Immediately call with current value (Svelte store behavior)
+    callback(this.value);
+
+    return () => {
+      this.subscribers.delete(callback);
+    };
+  }
+
+  /**
+   * Update the value and notify all subscribers
+   * @param newValue New value to set
+   */
+  set(newValue: T): void {
+    if (this.value !== newValue) {
+      this.value = newValue;
+      this.subscribers.forEach(cb => cb(newValue));
+    }
+  }
+
+  /**
+   * Get current value without subscribing
+   * @returns Current value
+   */
+  get(): T {
+    return this.value;
+  }
+}
+
+/**
+ * Create a writable observable (compatible with Svelte's writable store)
+ * @param initialValue Initial value
+ * @returns Observable instance
+ */
+export function writable<T>(initialValue: T): Observable<T> {
+  return new Observable(initialValue);
+}
+
+/**
+ * TypeScript type compatibility with Svelte stores
+ */
+export type Writable<T> = Observable<T>;

package/src/types/alignment.d.ts

@@ -0,0 +1,13 @@
+export type AlignmentHorizontal = 'left' | 'center' | 'right' | 'start' | 'end';
+
+export type AlignmentVertical = 'top' | 'center' | 'bottom' | 'baseline';
+
+export type ContentAlignmentHorizontal =
+    'left' | 'center' | 'right' |
+    'start' | 'end' |
+    'space-between' | 'space-around' | 'space-evenly';
+
+export type ContentAlignmentVertical =
+    'top' | 'center' | 'bottom' |
+    'space-between' | 'space-around' | 'space-evenly' |
+    'baseline';

package/src/types/background.d.ts

@@ -0,0 +1,71 @@
+import type { AlignmentHorizontal, AlignmentVertical } from './alignment';
+import type { ImageScale } from './imageScale';
+import type { FixedSize } from './sizes';
+import type { EdgeInsets } from './edgeInserts';
+import type { Filter } from './filter';
+
+export interface GradientColorPoint {
+    color: string;
+    position: number;
+}
+
+export interface GradientBackground {
+    type: 'gradient';
+    colors?: string[];
+    color_map?: GradientColorPoint[];
+    angle?: number;
+}
+
+export interface ImageBackground {
+    type: 'image';
+    image_url: string;
+    content_alignment_vertical?: AlignmentVertical;
+    content_alignment_horizontal?: AlignmentHorizontal;
+    scale?: ImageScale;
+    alpha?: number;
+    // preload_required
+    filters?: Filter[];
+}
+
+export interface NinePatchImageBackground {
+    type: 'nine_patch_image';
+    image_url: string;
+    insets: EdgeInsets;
+}
+
+export interface SolidBackground {
+    type: 'solid';
+    color: string;
+}
+
+export interface RadialBackgroundRelativeRadius {
+    type: 'relative';
+    value: 'nearest_side' | 'nearest_corner' | 'farthest_side' | 'farthest_corner';
+}
+
+export type RadialBackgroundRadius = FixedSize | RadialBackgroundRelativeRadius;
+
+export interface RadialGradientFixedCenter {
+    type: 'fixed';
+    value: number;
+    // unit:
+}
+
+export interface RadialGradientRelativeCenter {
+    type: 'relative';
+    value: number;
+}
+
+export type RadialGradientCenter = RadialGradientFixedCenter | RadialGradientRelativeCenter;
+
+export interface RadialBackground {
+    type: 'radial_gradient';
+    colors?: string[];
+    color_map?: GradientColorPoint[];
+    radius?: RadialBackgroundRadius;
+    center_x?: RadialGradientCenter;
+    center_y?: RadialGradientCenter;
+}
+
+export type Background = GradientBackground | ImageBackground |
+    SolidBackground | RadialBackground | NinePatchImageBackground;

package/src/types/base.d.ts

@@ -0,0 +1,224 @@
+import type { Size } from './sizes';
+import type { AlignmentHorizontal, AlignmentVertical } from './alignment';
+import type { Border } from './border';
+import type { Background } from './background';
+import type { EdgeInsets } from './edgeInserts';
+import type { Dimension } from './sizes';
+import type { Action, AnimatorDirection, AnimatorRepeatCount, BooleanInt, DisappearAction, DivFunction, DivVariable, Interpolation, VariableTrigger, VisibilityAction } from '../../typings/common';
+import type { Focus } from './focus';
+import type { Animation } from './animation';
+
+export type AccessibilityType = 'none' | 'button' | 'image' | 'text' | 'edit_text' |
+    'header' | 'tab_bar' | 'list' | 'select' | 'checkbox' | 'radio' | 'auto';
+
+export type AccessibilityMode = 'default' | 'merge' | 'exclude';
+
+export interface Accessibility {
+    description?: string;
+    type?: AccessibilityType;
+    state_description?: string;
+    hint?: string;
+    is_checked?: BooleanInt;
+    mode?: AccessibilityMode;
+}
+
+export interface TransitionBase {
+    start_delay?: number;
+    duration?: number;
+    interpolator?: Interpolation;
+}
+
+export interface FadeTransition extends TransitionBase {
+    type: 'fade';
+    alpha?: number;
+}
+
+export interface ScaleTransition extends TransitionBase {
+    type: 'scale';
+    scale?: number;
+    pivot_x?: number;
+    pivot_y?: number;
+}
+
+export type SlideTransitionEdge = 'left' | 'top' | 'right' | 'bottom';
+
+export interface SlideTransition extends TransitionBase {
+    type: 'slide';
+    edge?: SlideTransitionEdge;
+    distance?: Dimension;
+}
+
+export type AnyTransition = FadeTransition | ScaleTransition | SlideTransition;
+
+interface TransitionSet {
+    type: 'set';
+    items: AppearanceTransition[];
+}
+
+export type AppearanceTransition = AnyTransition | TransitionSet;
+
+export type Visibility = 'visible' | 'invisible' | 'gone';
+export type TransitionTrigger = 'state_change' | 'visibility_change';
+
+export interface ChangeBoundsTransition extends TransitionBase {
+    type: 'change_bounds';
+}
+
+export type TransitionChange = ChangeBoundsTransition | {
+    type: 'set';
+    items: TransitionChange[];
+}
+
+export interface PivotFixedValue {
+    type: 'pivot-fixed';
+    value: number;
+}
+
+export interface PivotPercentageValue {
+    type: 'pivot-percentage';
+    value: number;
+}
+
+export type PivotValue = PivotFixedValue | PivotPercentageValue;
+
+export interface Transform {
+    pivot_x?: PivotValue;
+    pivot_y?: PivotValue;
+    rotation?: number;
+}
+
+export interface RotationTransformation {
+    type: 'rotation';
+    angle: number;
+    pivot_x?: PivotValue;
+    pivot_y?: PivotValue;
+}
+
+export interface PercentageTranslation {
+    type: 'translation-percentage';
+    value: number;
+}
+
+export interface FixedTranslation {
+    type: 'translation-fixed';
+    value: number;
+    // unit?:
+}
+
+export type Translation = PercentageTranslation | FixedTranslation;
+
+export interface TranslationTransformation {
+    type: 'translation';
+    x?: Translation;
+    y?: Translation;
+}
+
+export type Transformation = RotationTransformation | TranslationTransformation;
+
+export interface Extension {
+    id: string;
+    params?: object;
+}
+
+export interface TooltipModeModal {
+    type: 'modal';
+}
+
+export interface TooltipModeNonModal {
+    type: 'non_modal';
+}
+
+export type TooltipMode = TooltipModeModal | TooltipModeNonModal;
+
+export interface Tooltip {
+    id: string;
+    div: DivBaseData;
+    position: 'left' | 'top-left' | 'top' | 'top-right' | 'right' |
+        'bottom-right' | 'bottom' | 'bottom-left' | 'center';
+    duration?: number;
+    offset?: {
+        x: {
+            value: number;
+            // unit;
+        };
+        y: {
+            value: number;
+            // unit;
+        };
+    };
+    animation_in?: Animation;
+    animation_out?: Animation;
+
+    mode?: TooltipMode;
+    tap_outside_actions?: Action[];
+    close_by_tap_outside?: boolean;
+    background_accessibility_description?: string;
+    substrate_div?: DivBaseData;
+}
+
+export interface DivLayoutProvider {
+    width_variable_name?: string;
+    height_variable_name?: string;
+}
+
+export interface AnimatorBase {
+    id: string;
+    variable_name: string;
+    duration: number;
+    start_delay?: number;
+    interpolator?: Interpolation;
+    direction?: AnimatorDirection;
+    repeat_count?: AnimatorRepeatCount;
+    end_actions?: Action[];
+    cancel_actions?: Action[];
+}
+
+export interface NumberAnimator extends AnimatorBase {
+    type: 'number_animator';
+    start_value?: number;
+    end_value: number;
+}
+
+export interface ColorAnimator extends AnimatorBase {
+    type: 'color_animator';
+    start_value?: string;
+    end_value: string;
+}
+
+export type Animator = NumberAnimator | ColorAnimator;
+
+export interface DivBaseData {
+    type: string;
+    id?: string;
+    border?: Border;
+    width?: Size;
+    height?: Size;
+    background?: Background[];
+    paddings?: EdgeInsets;
+    margins?: EdgeInsets;
+    alpha?: number;
+    alignment_horizontal?: AlignmentHorizontal;
+    alignment_vertical?: AlignmentVertical;
+    row_span?: number;
+    column_span?: number;
+    visibility?: Visibility;
+    visibility_action?: VisibilityAction;
+    visibility_actions?: VisibilityAction[];
+    disappear_actions?: DisappearAction[];
+    tooltips?: Tooltip[];
+    accessibility?: Accessibility;
+    extensions?: Extension[];
+    transition_in?: AppearanceTransition;
+    transition_change?: TransitionChange;
+    transition_out?: AppearanceTransition;
+    transition_triggers?: TransitionTrigger[];
+    selected_actions?: Action[];
+    focus?: Focus;
+    layout_provider?: DivLayoutProvider;
+    transform?: Transform;
+    transformations?: Transformation[];
+    variables?: DivVariable[];
+    variable_triggers?: VariableTrigger[];
+    animators?: Animator[];
+    functions?: DivFunction[];
+}

package/src/types/border.d.ts

@@ -0,0 +1,46 @@
+import type { BooleanInt } from '../../typings/common';
+import type { Dimension } from './sizes';
+
+export interface StrokeStyleSolid {
+    type: 'solid';
+}
+
+export interface StrokeStyleDashed {
+    type: 'dashed';
+}
+
+export type StrokeStyle = StrokeStyleSolid | StrokeStyleDashed;
+
+export interface Stroke {
+    width?: number;
+    color: string;
+    // unit
+    style?: StrokeStyle;
+}
+
+export interface CornersRadius {
+    'top-left'?: number;
+    'top-right'?: number;
+    'bottom-left'?: number;
+    'bottom-right'?: number;
+}
+
+export interface Point {
+    x: Dimension;
+    y: Dimension;
+}
+
+export interface Shadow {
+    color?: string;
+    offset: Point;
+    blur?: number;
+    alpha?: number;
+}
+
+export interface Border {
+    has_shadow?: BooleanInt;
+    shadow?: Shadow;
+    stroke?: Stroke;
+    corner_radius?: number;
+    corners_radius?: CornersRadius;
+}