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

package/README.md

@@ -1,340 +1,339 @@
 # react-native-divkit
 
-DivKit renderer for React Native - Server-driven UI framework.
+Рендерер DivKit для React Native — фреймворк для Server-Driven UI.
 
 [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](LICENSE)
 [![npm version](https://img.shields.io/npm/v/react-native-divkit.svg)](https://www.npmjs.com/package/react-native-divkit)
 
-## Overview
+## Обзор
 
-DivKit is a server-driven UI framework that allows you to define UI layouts in JSON and render them natively. This React Native implementation is based on the [DivKit Web](../web/divkit/) implementation, reusing the expression engine and adapting components for React Native.
+DivKit — это фреймворк для построения UI на основе данных с сервера (Server-Driven UI), который позволяет описывать макеты в формате JSON и рендерить их нативно. Данная реализация для React Native основана на веб-версии DivKit, переиспользуя движок выражений и адаптируя компоненты под React Native.
 
-## Status
+## Статус
 
-**MVP Version 0.1.0-alpha**
+**MVP Версия 0.1.0-alpha**
 
-| Feature | Status |
-|---------|--------|
-| Text component | ✅ Complete |
-| Container component | ✅ Complete |
-| Image component | ✅ Complete |
-| State component | ✅ Complete |
-| Variable system | ✅ Complete |
-| Expression engine | ✅ Complete |
-| Action handlers | ✅ Complete |
-| Template resolution | ✅ Complete |
+| Функция             | Статус      |
+| ------------------- | ----------- |
+| Текстовый компонент | ✅ Готово   |
+| Компонент контейнера| ✅ Готово   |
+| Компонент изображения| ✅ Готово  |
+| Компонент состояния | ✅ Готово   |
+| Система переменных  | ✅ Готово   |
+| Движок выражений    | ✅ Готово   |
+| Обработчики действий| ✅ Готово   |
+| Подстановка шаблонов| ✅ Готово   |
 
-## Installation
+## Скриншоты
+
+<p>
+  <img src="screenshots/image1.png" width="200" alt="" />
+  <img src="screenshots/image3.png" width="200" alt="" />
+  <img src="screenshots/image4.png" width="200" alt="" />
+  <img src="screenshots/image8.png" width="200" alt="" />
+</p>
+
+## Установка
 
 ```bash
 npm install react-native-divkit
 ```
 
-### Optional Dependencies
+### Опциональные зависимости
 
-For enhanced functionality, install these optional packages:
+Для расширенной функциональности установите следующие пакеты:
 
 ```bash
-# Optimized image loading with caching
+# Оптимизированная загрузка изображений с кешированием
 npm install react-native-fast-image
 
-# Gradient support (backgrounds)
+# Поддержка градиентов (фоны)
 npm install react-native-linear-gradient
 
-# Clipboard support
+# Поддержка буфера обмена
 npm install @react-native-clipboard/clipboard
 ```
 
-## Quick Start
+## Быстрый старт
 
 ```tsx
 import { DivKit } from 'react-native-divkit';
 
 const divKitJson = {
-  card: {
-    log_id: 'hello_world',
-    states: [{
-      state_id: 0,
-      div: {
-        type: 'text',
-        text: 'Hello, @{name}!',
-        font_size: 24,
-        text_color: '#000000',
-        text_alignment_horizontal: 'center'
-      }
-    }],
-    variables: [{
-      type: 'string',
-      name: 'name',
-      value: 'World'
-    }]
-  }
+    card: {
+        log_id: 'hello_world',
+        states: [
+            {
+                state_id: 0,
+                div: {
+                    type: 'text',
+                    text: 'Привет, @{name}!',
+                    font_size: 24,
+                    text_color: '#000000',
+                    text_alignment_horizontal: 'center'
+                }
+            }
+        ],
+        variables: [
+            {
+                type: 'string',
+                name: 'name',
+                value: 'Мир'
+            }
+        ]
+    }
 };
 
 export default function App() {
-  return (
-    <DivKit
-      data={divKitJson}
-      onStat={(stat) => console.log('Stat:', stat.type, stat.action.log_id)}
-      onCustomAction={(action) => console.log('Custom action:', action.url)}
-      onError={(error) => console.error('Error:', error.message)}
-    />
-  );
+    return (
+        <DivKit
+            data={divKitJson}
+            onStat={stat => console.log('Статистика:', stat.type, stat.action.log_id)}
+            onCustomAction={action => console.log('Кастомное действие:', action.url)}
+            onError={error => console.error('Ошибка:', error.message)}
+        />
+    );
 }
 ```
 
-## Components
+## Компоненты
 
-### Text
+### Text (Текст)
 
 ```json
 {
-  "type": "text",
-  "text": "Hello World",
-  "font_size": 16,
-  "font_weight": "bold",
-  "text_color": "#000000",
-  "text_alignment_horizontal": "center",
-  "max_lines": 2
+    "type": "text",
+    "text": "Привет, мир",
+    "font_size": 16,
+    "font_weight": "bold",
+    "text_color": "#000000",
+    "text_alignment_horizontal": "center",
+    "max_lines": 2
 }
 ```
 
-### Container
+### Container (Контейнер)
 
 ```json
 {
-  "type": "container",
-  "orientation": "vertical",
-  "items": [
-    { "type": "text", "text": "Item 1" },
-    { "type": "text", "text": "Item 2" }
-  ],
-  "content_alignment_horizontal": "center"
+    "type": "container",
+    "orientation": "vertical",
+    "items": [
+        { "type": "text", "text": "Элемент 1" },
+        { "type": "text", "text": "Элемент 2" }
+    ],
+    "content_alignment_horizontal": "center"
 }
 ```
 
-### Image
+### Image (Изображение)
 
 ```json
 {
-  "type": "image",
-  "image_url": "https://example.com/image.png",
-  "scale": "fill",
-  "width": { "type": "fixed", "value": 200 },
-  "height": { "type": "fixed", "value": 150 }
+    "type": "image",
+    "image_url": "https://example.com/image.png",
+    "scale": "fill",
+    "width": { "type": "fixed", "value": 200 },
+    "height": { "type": "fixed", "value": 150 }
 }
 ```
 
-### State
+### State (Состояние)
 
 ```json
 {
-  "type": "state",
-  "id": "my_state",
-  "default_state_id": "state1",
-  "states": [
-    {
-      "state_id": "state1",
-      "div": { "type": "text", "text": "State 1" }
-    },
-    {
-      "state_id": "state2",
-      "div": { "type": "text", "text": "State 2" }
-    }
-  ]
+    "type": "state",
+    "id": "my_state",
+    "default_state_id": "state1",
+    "states": [
+        {
+            "state_id": "state1",
+            "div": { "type": "text", "text": "Состояние 1" }
+        },
+        {
+            "state_id": "state2",
+            "div": { "type": "text", "text": "Состояние 2" }
+        }
+    ]
 }
 ```
 
-## Variables
+## Переменные
 
-Define variables in your JSON:
+Объявление переменных в JSON:
 
 ```json
 {
-  "card": {
-    "variables": [
-      { "type": "string", "name": "userName", "value": "World" },
-      { "type": "integer", "name": "counter", "value": 0 },
-      { "type": "color", "name": "textColor", "value": "#FF0000" },
-      { "type": "boolean", "name": "isActive", "value": true }
-    ]
-  }
+    "card": {
+        "variables": [
+            { "type": "string", "name": "userName", "value": "Мир" },
+            { "type": "integer", "name": "counter", "value": 0 },
+            { "type": "color", "name": "textColor", "value": "#FF0000" },
+            { "type": "boolean", "name": "isActive", "value": true }
+        ]
+    }
 }
 ```
 
-Use variables in expressions:
+Использование переменных в выражениях:
 
 ```json
 {
-  "type": "text",
-  "text": "Hello, @{userName}!",
-  "text_color": "@{textColor}"
+    "type": "text",
+    "text": "Привет, @{userName}!",
+    "text_color": "@{textColor}"
 }
 ```
 
-### Variable Types
+### Типы переменных
 
-| Type | Description | Example |
-|------|-------------|---------|
-| `string` | Text value | `"Hello"` |
-| `integer` | Whole number | `42` |
-| `number` | Decimal number | `3.14` |
-| `boolean` | True/false | `true` |
-| `color` | Color value | `"#FF5500"` |
-| `url` | URL string | `"https://..."` |
-| `dict` | Key-value object | `{"key": "value"}` |
-| `array` | List of values | `[1, 2, 3]` |
+| Тип       | Описание         | Пример             |
+| --------- | ---------------- | ------------------ |
+| `string`  | Текстовая строка | `"Hello"`          |
+| `integer` | Целое число      | `42`               |
+| `number`  | Дробное число    | `3.14`             |
+| `boolean` | Логическое       | `true`             |
+| `color`   | Цвет             | `"#FF5500"`        |
+| `url`     | URL              | `"https://..."`    |
+| `dict`    | Словарь (объект) | `{"key": "value"}` |
+| `array`   | Список (массив)  | `[1, 2, 3]`        |
 
-## Actions
+## Действия (Actions)
 
-Actions are triggered by user interaction:
+Действия вызываются при взаимодействии с пользователем:
 
 ```json
 {
-  "type": "text",
-  "text": "Tap me",
-  "actions": [{
-    "log_id": "button_tap",
-    "url": "divkit://custom_action"
-  }]
+    "type": "text",
+    "text": "Нажми меня",
+    "actions": [
+        {
+            "log_id": "button_tap",
+            "url": "divkit://custom_action"
+        }
+    ]
 }
 ```
 
-### Typed Actions
+### Типизированные действия
 
-#### set_variable
+#### set_variable (установка переменной)
 
 ```json
 {
-  "typed": {
-    "type": "set_variable",
-    "variable_name": "counter",
-    "value": { "type": "integer", "value": 10 }
-  }
+    "typed": {
+        "type": "set_variable",
+        "variable_name": "counter",
+        "value": { "type": "integer", "value": 10 }
+    }
 }
 ```
 
-#### set_state
+#### set_state (смена состояния)
 
 ```json
 {
-  "typed": {
-    "type": "set_state",
-    "state_id": "my_state",
-    "temporary_state_id": "state2"
-  }
+    "typed": {
+        "type": "set_state",
+        "state_id": "my_state",
+        "temporary_state_id": "state2"
+    }
 }
 ```
 
-## Props
+## Свойства (Props)
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `data` | `DivJson` | Yes | DivKit JSON data |
-| `onStat` | `(stat) => void` | No | Statistics callback |
-| `onCustomAction` | `(action) => void` | No | Custom action handler |
-| `onError` | `(error) => void` | No | Error handler |
-| `direction` | `'ltr' \| 'rtl'` | No | Text direction (default: `'ltr'`) |
-| `platform` | `'desktop' \| 'touch'` | No | Platform type (default: `'touch'`) |
-| `style` | `ViewStyle` | No | Container style |
+| Свойство         | Тип                    | Обязательно | Описание                           |
+| ---------------- | ---------------------- | ----------- | ---------------------------------- |
+| `data`           | `DivJson`              | Да          | JSON-данные DivKit                 |
+| `onStat`         | `(stat) => void`       | Нет         | Колбэк статистики                  |
+| `onCustomAction` | `(action) => void`     | Нет         | Обработчик кастомных действий      |
+| `onError`        | `(error) => void`      | Нет         | Обработчик ошибок                  |
+| `direction`      | `'ltr' \| 'rtl'`       | Нет         | Направление текста (по умолч.: `'ltr'`) |
+| `platform`       | `'desktop' \| 'touch'` | Нет         | Тип платформы (по умолч.: `'touch'`) |
+| `style`          | `ViewStyle`            | Нет         | Стили контейнера                   |
 
-## Hooks
+## Хуки
 
-For advanced usage, you can use hooks directly:
+Для продвинутого использования вы можете использовать хуки напрямую:
 
 ```tsx
-import {
-  useDivKitContext,
-  useVariable,
-  useVariableState,
-  useAction
-} from 'react-native-divkit';
+import { useDivKitContext, useVariable, useVariableState, useAction } from 'react-native-divkit';
 
 function MyComponent() {
-  const { setVariable } = useDivKitContext();
-  const counter = useVariable('counter');
-
-  return (
-    <View>
-      <Text>Count: {counter}</Text>
-      <Button
-        onPress={() => setVariable('counter', counter + 1)}
-        title="Increment"
-      />
-    </View>
-  );
+    const { setVariable } = useDivKitContext();
+    const counter = useVariable('counter');
+
+    return (
+        <View>
+            <Text>Счетчик: {counter}</Text>
+            <Button onPress={() => setVariable('counter', counter + 1)} title="Увеличить" />
+        </View>
+    );
 }
 ```
 
-## Examples
+## Примеры
 
-See the [examples/BasicExample](examples/BasicExample/) directory for a complete React Native app demonstrating all features.
+Смотрите директорию [examples/BasicExample](examples/BasicExample/) для готового React Native приложения, демонстрирующего все возможности.
 
 ```bash
 cd examples/BasicExample
 npm install
-npm run ios   # or npm run android
+npm run ios   # или npm run android
 ```
 
-## Documentation
+## Документация
 
-- [API Reference](docs/API.md) - Complete API documentation
-- [Migration Guide](docs/MIGRATION.md) - Migrating from Web version
-- [Architecture](docs/ARCHITECTURE.md) - Internal architecture
+- [Справочник API](docs/API.md) - Полная документация API
+- [Руководство по миграции](docs/MIGRATION.md) - Миграция с веб-версии
+- [Архитектура](docs/ARCHITECTURE.md) - Внутренняя архитектура
 
-## Not Included in MVP
+## Не включено в MVP
 
-The following features are planned for future versions:
+Следующие функции запланированы для будущих версий:
 
-- Gallery, Pager, Slider, Tabs
-- Input, Select, Switch
-- Video, Lottie animations
-- Text ranges, complex gradients
-- Advanced transitions and animations
-- Custom components API
+- Gallery (Галерея), Pager (Пейджер), Slider (Слайдер), Tabs (Вкладки)
+- Input (Ввод), Select (Выбор), Switch (Переключатель)
+- Видео, Lottie-анимации
+- Диапазоны текста, сложные градиенты
+- Продвинутые переходы и анимации
+- API пользовательских компонентов
 
-## Architecture
+## Архитектура
 
-This library is based on DivKit Web (TypeScript + Svelte):
+Библиотека основана на DivKit Web (TypeScript + Svelte):
 
-| Component | Reuse |
-|-----------|-------|
-| Expression engine | 100% copied |
-| Type definitions | 100% copied |
-| Utilities | ~90% adapted |
-| Components | ~20% (rewritten for RN) |
-| Context system | New (React-specific) |
+| Компонент         | Переиспользование       |
+| ----------------- | ----------------------- |
+| Движок выражений  | 100% скопировано        |
+| Определения типов | 100% скопировано        |
+| Утилиты           | ~90% адаптировано       |
+| Компоненты        | ~20% (переписано под RN)|
+| Система контекстов| Новая (специфично для React)|
 
-## Development
+## Разработка
 
 ```bash
-# Install dependencies
+# Установка зависимостей
 npm install
 
-# Build PEG parser
+# Сборка парсера PEG
 npm run build:peggy
 
-# Type check
+# Проверка типов
 npm run typecheck
 
-# Lint
+# Линтинг
 npm run lint
 
-# Build
+# Сборка
 npm run build
 
-# Test
+# Тесты
 npm test
 ```
 
-## Contributing
-
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Add tests
-5. Submit a pull request
-
-## License
+## Лицензия
 
 Apache 2.0

package/dist/DivKit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DivKit.d.ts","sourceRoot":"","sources":["../src/DivKit.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAe,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAUjF,OAAO,EAAa,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAClB,KAAK,IAAI,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,KAAK,IAAI,CAAC;AAE9E;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,WAAW;IACxB,uBAAuB;IACvB,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAEvB,sCAAsC;IACtC,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB,kCAAkC;IAClC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAEtC,0BAA0B;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB,sCAAsC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAE/B,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,mCAAmC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EACnB,IAAI,EACJ,MAAM,EACN,cAAc,EACd,OAAO,EACP,SAAiB,EACjB,QAAkB,EAClB,KAAK,EACL,EAAW,EACd,EAAE,WAAW,qBAmbb"}
+{"version":3,"file":"DivKit.d.ts","sourceRoot":"","sources":["../src/DivKit.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAe,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAUjF,OAAO,EAAa,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAQjE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,KAAK,IAAI,CAAC;AAE5E;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,KAAK,IAAI,CAAC;AAE9E;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,WAAW;IACxB,uBAAuB;IACvB,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAEvB,sCAAsC;IACtC,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB,kCAAkC;IAClC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAEtC,0BAA0B;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB,sCAAsC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAE/B,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,mCAAmC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EACnB,IAAI,EACJ,MAAM,EACN,cAAc,EACd,OAAO,EACP,SAAiB,EACjB,QAAkB,EAClB,KAAK,EACL,EAAW,EACd,EAAE,WAAW,qBA2db"}

package/dist/DivKit.js

@@ -31,6 +31,7 @@ import { dictSetValue } from './actions/dict';
 import { copyToClipboard } from './actions/copyToClipboard';
 import { updateStructure } from './actions/updateStructure';
 import { evalExpression } from './expressions/eval';
+import { parse } from './expressions/expressions';
 /**
  * DivKit - Main component
  *
@@ -158,12 +159,32 @@ export function DivKit({ data, onStat, onCustomAction, onError, direction = 'ltr
                                 const typedValue = typed.value;
                                 let value;
                                 // Convert typed value to raw value
-                                if (typeof typedValue === 'object' && typedValue !== null && 'value' in typedValue) {
+                                if (typeof typedValue === 'object' &&
+                                    typedValue !== null &&
+                                    'value' in typedValue) {
                                     value = typedValue.value;
                                 }
                                 else {
                                     value = typedValue;
                                 }
+                                // Evaluate expression if value is a string with @{...}
+                                if (typeof value === 'string' && value.includes('@{')) {
+                                    try {
+                                        const ast = parse(value, { startRule: 'JsonStringContents' });
+                                        const res = evalExpression(variables, undefined, undefined, ast);
+                                        if (res.result.type !== 'error') {
+                                            value = res.result.value;
+                                        }
+                                    }
+                                    catch (err) {
+                                        logError(wrapError(err, {
+                                            additional: {
+                                                phase: 'set_variable_expression',
+                                                expression: value
+                                            }
+                                        }));
+                                    }
+                                }
                                 setVariable(typed.variable_name, value);
                             }
                             break;
@@ -321,9 +342,7 @@ export function DivKit({ data, onStat, onCustomAction, onError, direction = 'ltr
                 return evalExpression(allVars, undefined, store, expr, opts);
             },
             produceChildContext: (div, opts) => {
-                const childPath = opts?.path !== undefined
-                    ? [...context.path, String(opts.path)]
-                    : context.path;
+                const childPath = opts?.path !== undefined ? [...context.path, String(opts.path)] : context.path;
                 const childContext = {
                     ...context,
                     path: childPath,
@@ -378,9 +397,7 @@ export function DivKit({ data, onStat, onCustomAction, onError, direction = 'ltr
     }, [rootDiv, variables, logError, execAnyActions, genId, id, stateContextValue]);
     // Render
     if (!rootDiv || !rootComponentContext) {
-        return (<View style={[styles.container, style]}>
-                {/* Empty state - could render error UI here */}
-            </View>);
+        return <View style={[styles.container, style]}>{/* Empty state - could render error UI here */}</View>;
     }
     return (<DivKitContext.Provider value={divKitContextValue}>
             <ActionContext.Provider value={actionContextValue}>