react-native-divkit 0.1.0-alpha.1

package/src/expressions/walk.ts

@@ -0,0 +1,43 @@
+import type { Node } from './ast';
+
+export function walk(ast: Node, visitors: {
+    [Type in Node['type']]?: (node: Extract<Node, { type: Type }>) => void;
+}): void {
+    visitors[ast.type]?.(ast as any);
+
+    switch (ast.type) {
+        case 'TemplateLiteral':
+            ast.expressions.forEach(item => {
+                walk(item, visitors);
+            });
+            break;
+        case 'BinaryExpression':
+        case 'LogicalExpression':
+            walk(ast.left, visitors);
+            walk(ast.right, visitors);
+            break;
+        case 'UnaryExpression':
+            walk(ast.argument, visitors);
+            break;
+        case 'ConditionalExpression':
+            walk(ast.test, visitors);
+            walk(ast.consequent, visitors);
+            walk(ast.alternate, visitors);
+            break;
+        case 'TryExpression':
+            walk(ast.test, visitors);
+            walk(ast.alternate, visitors);
+            break;
+        case 'CallExpression':
+            ast.arguments.forEach(item => {
+                walk(item, visitors);
+            });
+            break;
+        case 'MethodExpression':
+            walk(ast.object, visitors);
+            ast.arguments.forEach(item => {
+                walk(item, visitors);
+            });
+            break;
+    }
+}

package/src/hooks/README.md

@@ -0,0 +1,265 @@
+# DivKit React Hooks
+
+Custom React hooks для работы с DivKit в React Native приложениях.
+
+## Hooks Overview
+
+### 1. `useDerivedFromVars` - Реактивность переменных
+
+Главный hook для подстановки переменных в JSON props с автоматическим обновлением при изменении переменных.
+
+**Использование:**
+```tsx
+import { useDerivedFromVars } from './hooks';
+
+function DivText({ json, variables }: Props) {
+  // json.text = "Hello @{userName}!"
+  const text = useDerivedFromVars(json.text, { variables });
+  // text = "Hello Alice!" - обновляется при изменении userName
+
+  return <Text>{text}</Text>;
+}
+```
+
+**Опции:**
+- `variables` - Map переменных из DivKitContext
+- `additionalVars` - дополнительные локальные переменные
+- `keepComplex` - сохранять dict/array как объекты (не stringify)
+- `maxDepth` - максимальная глубина обработки (default: 10)
+- `customFunctions` - кастомные функции для expressions
+- `weekStartDay` - день начала недели (0 = воскресенье)
+
+**Simplified version:**
+```tsx
+const text = useDerivedFromVarsSimple(json.text, variables);
+```
+
+---
+
+### 2. `useVariable` - Подписка на переменную
+
+Подписывается на конкретную переменную по имени и обновляет компонент при её изменении.
+
+**Использование:**
+```tsx
+import { useVariable } from './hooks';
+
+function UserGreeting() {
+  const userName = useVariable('userName');
+
+  return <Text>Hello {userName}</Text>;
+}
+```
+
+**Related hooks:**
+- `useVariableInstance(variable)` - подписка на Variable инстанс
+- `useVariableSetter(name)` - получить setter функцию
+- `useVariableState(name)` - получить [value, setter] tuple (как useState)
+
+**Example with setter:**
+```tsx
+function Counter() {
+  const [count, setCount] = useVariableState('counter');
+
+  return (
+    <View>
+      <Text>Count: {count}</Text>
+      <Button title="+" onPress={() => setCount((count || 0) + 1)} />
+    </View>
+  );
+}
+```
+
+---
+
+### 3. `useAction` - Выполнение actions
+
+Hooks для выполнения DivKit actions (click, visibility, etc.)
+
+**Использование:**
+```tsx
+import { useActionHandler } from './hooks';
+
+function DivText({ json }: { json: DivTextJson }) {
+  const onPress = useActionHandler(json.actions);
+
+  return (
+    <Pressable onPress={onPress}>
+      <Text>{json.text}</Text>
+    </Pressable>
+  );
+}
+```
+
+**Available hooks:**
+- `useAction(options)` - выполнить одиночный action
+- `useActions(options)` - выполнить массив actions
+- `useActionHandler(actions, options)` - получить onPress handler
+- `useHasActions(actions)` - проверить наличие actions
+
+**Example with useAction:**
+```tsx
+function MyButton() {
+  const execAction = useAction({ processUrls: true });
+
+  const handlePress = () => {
+    execAction({
+      log_id: 'button_click',
+      typed: { type: 'set_variable', variable_name: 'counter', value: 42 }
+    });
+  };
+
+  return <Button title="Click" onPress={handlePress} />;
+}
+```
+
+---
+
+## Architecture
+
+### Паттерн реализации
+
+Все hooks следуют единому паттерну:
+
+1. **Получение контекста** - через `useDivKitContext()`
+2. **Подписка на изменения** - через `useEffect` + Variable.subscribe()
+3. **Автоматический cleanup** - unsubscribe в return useEffect
+
+### Зависимости
+
+- `DivKitContext` - главный контекст с переменными и actions
+- `Observable` - реализация реактивности (замена Svelte stores)
+- `Variable` - классы переменных с методом subscribe()
+- `prepareVars` / `applyVars` - обработка expressions в JSON
+
+### Связь с Web реализацией
+
+Эти hooks заменяют Svelte реактивные конструкции:
+
+| Svelte (Web) | React Native (Hooks) |
+|--------------|----------------------|
+| `$: derived = getDerivedFromVars(json)` | `useDerivedFromVars(json, { variables })` |
+| `$variable` (auto-subscribe) | `useVariable('variable')` |
+| `execAnyActions(actions)` | `useActions(options)` |
+
+---
+
+## Best Practices
+
+### 1. Оптимизация производительности
+
+```tsx
+// ❌ Плохо - создается новый объект options каждый рендер
+const text = useDerivedFromVars(json.text, { variables, keepComplex: true });
+
+// ✅ Хорошо - используем useMemo для стабильного объекта
+const options = useMemo(() => ({ variables, keepComplex: true }), [variables]);
+const text = useDerivedFromVars(json.text, options);
+
+// ✅ Или используйте simplified version для базовых случаев
+const text = useDerivedFromVarsSimple(json.text, variables);
+```
+
+### 2. Условная подписка
+
+```tsx
+// useVariable автоматически обрабатывает отсутствие переменной
+const userName = useVariable('userName'); // undefined если не найдена
+
+// Для проверки наличия:
+if (userName !== undefined) {
+  // переменная существует
+}
+```
+
+### 3. Action handling
+
+```tsx
+// ✅ Простой случай - используйте useActionHandler
+const onPress = useActionHandler(json.actions);
+
+// ✅ Сложный случай - используйте useActions для контроля
+const execActions = useActions({ componentContext, processUrls: false });
+const handlePress = async () => {
+  await execActions(json.actions);
+  console.log('Actions completed');
+};
+```
+
+---
+
+## Testing
+
+### Unit тесты
+
+```tsx
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useVariable } from './hooks';
+import { createVariable } from '../expressions/variable';
+
+test('useVariable subscribes and updates', () => {
+  const variable = createVariable('test', 'string', 'initial');
+  const variables = new Map([['test', variable]]);
+
+  const { result } = renderHook(() => useVariable('test'), {
+    wrapper: ({ children }) => (
+      <DivKitContext.Provider value={{ variables, /* ... */ }}>
+        {children}
+      </DivKitContext.Provider>
+    )
+  });
+
+  expect(result.current).toBe('initial');
+
+  act(() => {
+    variable.setValue('updated');
+  });
+
+  expect(result.current).toBe('updated');
+});
+```
+
+---
+
+## Migration from Web
+
+При портировании компонентов из Web версии:
+
+1. Замените `$: derived = getDerivedFromVars(...)` на `useDerivedFromVars(...)`
+2. Замените `$variable` на `useVariable('variable')`
+3. Замените прямые вызовы `execAnyActions` на `useActions()` hook
+4. Удалите `onMount` и замените на `useEffect`
+
+**Пример миграции:**
+
+```svelte
+<!-- Web (Svelte) -->
+<script>
+  import { getContext } from 'svelte';
+  const { variables } = getContext(ROOT_CTX);
+
+  $: text = getDerivedFromVars(json.text);
+  $: color = getDerivedFromVars(json.color);
+</script>
+```
+
+```tsx
+// React Native
+function DivText({ json }: Props) {
+  const { variables } = useDivKitContext();
+
+  const text = useDerivedFromVarsSimple(json.text, variables);
+  const color = useDerivedFromVarsSimple(json.color, variables);
+
+  return <Text style={{ color }}>{text}</Text>;
+}
+```
+
+---
+
+## Next Steps
+
+После реализации hooks, следующие фазы:
+- **Phase 4:** Base Component Wrapper (Outer.tsx)
+- **Phase 5:** MVP Components (Text, Container, Image, State)
+- **Phase 6:** Main DivKit Component integration

package/src/hooks/index.ts

@@ -0,0 +1,28 @@
+/**
+ * DivKit React Hooks
+ * Export all custom hooks for use in React Native components
+ */
+
+// Main reactivity hook - variable substitution in JSON
+export {
+    useDerivedFromVars,
+    useDerivedFromVarsSimple,
+    type UseDerivedFromVarsOptions
+} from './useDerivedFromVars';
+
+// Variable subscription hooks
+export {
+    useVariable,
+    useVariableInstance,
+    useVariableSetter,
+    useVariableState
+} from './useVariable';
+
+// Action execution hooks
+export {
+    useAction,
+    useActions,
+    useActionHandler,
+    useHasActions,
+    type UseActionOptions
+} from './useAction';

package/src/hooks/useAction.ts

@@ -0,0 +1,152 @@
+/**
+ * React hooks for executing DivKit actions
+ * Handles click actions, visibility actions, and other user interactions
+ */
+
+import { useCallback } from 'react';
+import type { Action } from '../../typings/common';
+import type { MaybeMissing } from '../expressions/json';
+import { useDivKitContext } from '../context/DivKitContext';
+import type { ComponentContext } from '../types/componentContext';
+
+export interface UseActionOptions {
+    /**
+     * Component context (for action execution context)
+     */
+    componentContext?: ComponentContext;
+
+    /**
+     * Whether to process URLs (open external links)
+     * Default: true
+     */
+    processUrls?: boolean;
+}
+
+/**
+ * Hook to execute a single action
+ *
+ * @param options Action execution options
+ * @returns Function to execute an action
+ *
+ * @example
+ * ```tsx
+ * function MyButton({ action }: { action: Action }) {
+ *   const execAction = useAction();
+ *
+ *   return (
+ *     <Pressable onPress={() => execAction(action)}>
+ *       <Text>Click me</Text>
+ *     </Pressable>
+ *   );
+ * }
+ * ```
+ */
+export function useAction(options?: UseActionOptions) {
+    const { execAnyActions } = useDivKitContext();
+
+    return useCallback(
+        async (action: MaybeMissing<Action> | undefined) => {
+            if (!action) {
+                return;
+            }
+
+            await execAnyActions([action], options);
+        },
+        [execAnyActions, options]
+    );
+}
+
+/**
+ * Hook to execute multiple actions
+ *
+ * @param options Action execution options
+ * @returns Function to execute an array of actions
+ *
+ * @example
+ * ```tsx
+ * function MyButton({ actions }: { actions: Action[] }) {
+ *   const execActions = useActions();
+ *
+ *   return (
+ *     <Pressable onPress={() => execActions(actions)}>
+ *       <Text>Click me</Text>
+ *     </Pressable>
+ *   );
+ * }
+ * ```
+ */
+export function useActions(options?: UseActionOptions) {
+    const { execAnyActions } = useDivKitContext();
+
+    return useCallback(
+        async (actions: MaybeMissing<Action[]> | undefined) => {
+            if (!actions || actions.length === 0) {
+                return;
+            }
+
+            await execAnyActions(actions, options);
+        },
+        [execAnyActions, options]
+    );
+}
+
+/**
+ * Hook to create an onPress handler from actions
+ * Convenience hook for Pressable/TouchableOpacity components
+ *
+ * @param actions Actions to execute on press
+ * @param options Action execution options
+ * @returns onPress handler function, or undefined if no actions
+ *
+ * @example
+ * ```tsx
+ * function DivText({ json }: { json: DivTextJson }) {
+ *   const onPress = useActionHandler(json.actions);
+ *
+ *   return (
+ *     <Pressable onPress={onPress}>
+ *       <Text>{json.text}</Text>
+ *     </Pressable>
+ *   );
+ * }
+ * ```
+ */
+export function useActionHandler(
+    actions: MaybeMissing<Action[]> | undefined,
+    options?: UseActionOptions
+): (() => Promise<void>) | undefined {
+    const execActions = useActions(options);
+
+    return useCallback(() => {
+        if (!actions || actions.length === 0) {
+            return Promise.resolve();
+        }
+        return execActions(actions);
+    }, [actions, execActions]);
+}
+
+/**
+ * Hook to check if actions array is not empty
+ * Useful for conditional rendering or styling
+ *
+ * @param actions Actions to check
+ * @returns true if actions exist and are not empty
+ *
+ * @example
+ * ```tsx
+ * function DivText({ json }: { json: DivTextJson }) {
+ *   const hasActions = useHasActions(json.actions);
+ *
+ *   return (
+ *     <Text style={{ cursor: hasActions ? 'pointer' : 'default' }}>
+ *       {json.text}
+ *     </Text>
+ *   );
+ * }
+ * ```
+ */
+export function useHasActions(
+    actions: MaybeMissing<Action[]> | undefined
+): boolean {
+    return Boolean(actions && actions.length > 0);
+}

package/src/hooks/useDerivedFromVars.ts

@@ -0,0 +1,187 @@
+/**
+ * React hook for reactive variable substitution in JSON props
+ * Replaces Svelte's $: reactive statements with React hooks
+ *
+ * Based on getDerivedFromVars pattern from Web Root.svelte
+ */
+
+import { useEffect, useState, useMemo, useRef } from 'react';
+import type { MaybeMissing } from '../expressions/json';
+import { prepareVars } from '../expressions/json';
+import type { Variable } from '../expressions/variable';
+import type { VariablesMap } from '../expressions/eval';
+import type { Store } from '../../typings/store';
+import type { CustomFunctions } from '../expressions/funcs/customFuncs';
+import type { Unsubscriber } from '../stores/createObservable';
+
+export interface UseDerivedFromVarsOptions {
+    /**
+     * Variables map (from DivKitContext)
+     */
+    variables: VariablesMap;
+
+    /**
+     * Additional variables (optional, for local context)
+     */
+    additionalVars?: Map<string, Variable>;
+
+    /**
+     * Keep complex types (dict, array) as objects instead of stringifying
+     * Default: false
+     */
+    keepComplex?: boolean;
+
+    /**
+     * Maximum depth for expression processing
+     * Default: 10
+     */
+    maxDepth?: number;
+
+    /**
+     * Custom functions for expressions
+     */
+    customFunctions?: CustomFunctions;
+
+    /**
+     * Store context (for advanced features)
+     */
+    store?: Store;
+
+    /**
+     * Week start day (0 = Sunday, 1 = Monday)
+     * Default: 0
+     */
+    weekStartDay?: number;
+
+    /**
+     * Error logger
+     */
+    logError?: (error: Error) => void;
+}
+
+/**
+ * Hook that subscribes to variables used in JSON expressions and re-evaluates when they change
+ *
+ * @example
+ * ```tsx
+ * const text = useDerivedFromVars(
+ *   json.text, // "Hello @{userName}"
+ *   { variables }
+ * );
+ * // text = "Hello Alice"
+ * // When userName variable changes, text automatically updates
+ * ```
+ */
+export function useDerivedFromVars<T>(
+    jsonProp: T,
+    options: UseDerivedFromVarsOptions
+): MaybeMissing<T> {
+    const {
+        variables,
+        additionalVars,
+        keepComplex = false,
+        maxDepth = 10,
+        customFunctions,
+        store,
+        weekStartDay = 0,
+        logError = console.error
+    } = options;
+
+    // Merge variables maps
+    const allVariables = useMemo(() => {
+        if (!additionalVars || additionalVars.size === 0) {
+            return variables;
+        }
+        const merged = new Map(variables);
+        additionalVars.forEach((value, key) => {
+            merged.set(key, value);
+        });
+        return merged;
+    }, [variables, additionalVars]);
+
+    // Prepare expressions once (parse and analyze JSON for @{} expressions)
+    const prepared = useMemo(() => {
+        return prepareVars(jsonProp, logError, store, weekStartDay, maxDepth);
+    }, [jsonProp, logError, store, weekStartDay, maxDepth]);
+
+    // Apply variables and get initial value
+    const getComputedValue = () => {
+        const { result, usedVars } = prepared.applyVars(
+            allVariables,
+            customFunctions,
+            keepComplex
+        );
+        return { result, usedVars };
+    };
+
+    // State for the computed value
+    const [value, setValue] = useState<MaybeMissing<T>>(() => getComputedValue().result);
+
+    // Track used variables for subscription
+    const usedVarsRef = useRef<Set<Variable>>();
+
+    // Subscribe to used variables and update when they change
+    useEffect(() => {
+        // If no expressions, no need to subscribe
+        if (!prepared.hasExpression) {
+            return;
+        }
+
+        // Compute initial value and get used variables
+        const { result, usedVars } = getComputedValue();
+        setValue(result);
+        usedVarsRef.current = usedVars;
+
+        // Subscribe to all used variables
+        const unsubscribers: Unsubscriber[] = [];
+
+        if (usedVars) {
+            usedVars.forEach(variable => {
+                const unsubscribe = variable.subscribe(() => {
+                    // Variable changed - recompute value
+                    const { result: newResult, usedVars: newUsedVars } = getComputedValue();
+                    setValue(newResult);
+
+                    // If used variables changed, we need to re-subscribe
+                    // This happens if expression result depends on conditional logic
+                    if (newUsedVars && newUsedVars !== usedVarsRef.current) {
+                        const hasChanged =
+                            newUsedVars.size !== usedVarsRef.current?.size ||
+                            Array.from(newUsedVars).some(v => !usedVarsRef.current?.has(v));
+
+                        if (hasChanged) {
+                            // usedVars changed - trigger re-render to re-subscribe
+                            usedVarsRef.current = newUsedVars;
+                        }
+                    }
+                });
+                unsubscribers.push(unsubscribe);
+            });
+        }
+
+        return () => {
+            unsubscribers.forEach(unsub => unsub());
+        };
+    }, [prepared, allVariables, customFunctions, keepComplex]);
+
+    if (!prepared.hasExpression) {
+        return getComputedValue().result;
+    }
+
+    return value;
+}
+
+/**
+ * Simplified version that only takes variables map (most common use case)
+ *
+ * @example
+ * ```tsx
+ * const text = useDerivedFromVarsSimple(json.text, variables);
+ * ```
+ */
+export function useDerivedFromVarsSimple<T>(
+    jsonProp: T,
+    variables: VariablesMap
+): MaybeMissing<T> {
+    return useDerivedFromVars(jsonProp, { variables });
+}