react-native-divkit 0.1.0-alpha.1

package/src/actions/array.ts

@@ -0,0 +1,170 @@
+import type { ActionArrayInsertValue, ActionArrayRemoveValue, ActionArraySetValue, WrappedError } from '../../typings/common';
+import type { ArrayVariable, Variable } from '../../typings/variables';
+import type { MaybeMissing } from '../expressions/json';
+import { convertTypedValue } from '../expressions/utils';
+import type { ComponentContext } from '../types/componentContext';
+import { wrapError } from '../utils/wrapError';
+
+export function arrayInsert(
+    componentContext: ComponentContext | undefined,
+    variables: Map<string, Variable>,
+    logError: (error: WrappedError) => void,
+    actionTyped: MaybeMissing<ActionArrayInsertValue>
+): void {
+    const { variable_name: name, index, value } = actionTyped;
+
+    if (!value || typeof index !== 'number' && index !== undefined) {
+        logError(wrapError(new Error('Incorrect array_insert_value action'), {
+            additional: {
+                name
+            }
+        }));
+        return;
+    }
+
+    handle(componentContext, variables, logError, actionTyped, variableInstance => {
+        const list = variableInstance.getValue();
+        if (typeof index === 'number' && (index < 0 || index > list.length)) {
+            logError(wrapError(new Error(`Index out of bound for mutation ${actionTyped.type}`), {
+                additional: {
+                    name,
+                    index,
+                    length: list.length
+                }
+            }));
+        } else if (!value.type) {
+            logError(wrapError(new Error('Incorrect value type'), {
+                additional: {
+                    name
+                }
+            }));
+        } else {
+            const newList = list.slice();
+            const val = convertTypedValue(value);
+            if (typeof index === 'number') {
+                newList.splice(index, 0, val);
+            } else {
+                newList.push(val);
+            }
+            variableInstance.setValue(newList);
+        }
+    });
+}
+
+export function arrayRemove(
+    componentContext: ComponentContext | undefined,
+    variables: Map<string, Variable>,
+    logError: (error: WrappedError) => void,
+    actionTyped: MaybeMissing<ActionArrayRemoveValue>
+): void {
+    const { variable_name: name, index } = actionTyped;
+
+    if (typeof index !== 'number') {
+        logError(wrapError(new Error('Incorrect array_remove_value action'), {
+            additional: {
+                name
+            }
+        }));
+        return;
+    }
+
+    handle(componentContext, variables, logError, actionTyped, variableInstance => {
+        const list = variableInstance.getValue();
+        if (typeof index === 'number' && (index < 0 || index >= list.length)) {
+            logError(wrapError(new Error(`Index out of bound for mutation ${actionTyped.type}`), {
+                additional: {
+                    name,
+                    index,
+                    length: list.length
+                }
+            }));
+        } else {
+            const newList = list.slice();
+            newList.splice(index, 1);
+            variableInstance.setValue(newList);
+        }
+    });
+}
+
+export function arraySet(
+    componentContext: ComponentContext | undefined,
+    variables: Map<string, Variable>,
+    logError: (error: WrappedError) => void,
+    actionTyped: MaybeMissing<ActionArraySetValue>
+): void {
+    const { variable_name: name, index, value } = actionTyped;
+
+    if (!value || typeof index !== 'number') {
+        logError(wrapError(new Error('Incorrect array_set_value action'), {
+            additional: {
+                name
+            }
+        }));
+        return;
+    }
+
+    handle(componentContext, variables, logError, actionTyped, variableInstance => {
+        const list = variableInstance.getValue();
+        if (typeof index === 'number' && (index < 0 || index >= list.length)) {
+            logError(wrapError(new Error(`Index out of bound for mutation ${actionTyped.type}`), {
+                additional: {
+                    name,
+                    index,
+                    length: list.length
+                }
+            }));
+        } else if (!value.type) {
+            logError(wrapError(new Error('Incorrect value type'), {
+                additional: {
+                    name
+                }
+            }));
+        } else {
+            const newList = list.slice();
+            newList[index] = convertTypedValue(value);
+            variableInstance.setValue(newList);
+        }
+    });
+}
+
+function handle(
+    componentContext: ComponentContext | undefined,
+    variables: Map<string, Variable>,
+    logError: (error: WrappedError) => void,
+    actionTyped: MaybeMissing<ActionArrayRemoveValue | ActionArrayInsertValue | ActionArraySetValue>,
+    cb: (variableInstance: ArrayVariable) => void
+): void {
+    const { variable_name: name } = actionTyped;
+
+    if (!name) {
+        logError(wrapError(new Error(`Incorrect ${actionTyped.type} action`), {
+            additional: {
+                name
+            }
+        }));
+        return;
+    }
+
+    const variableInstance = componentContext?.getVariable(name) || variables.get(name);
+
+    if (!variableInstance) {
+        logError(wrapError(new Error('Cannot find variable'), {
+            additional: {
+                name
+            }
+        }));
+        return;
+    }
+
+    const type = variableInstance.getType();
+    if (type === 'array') {
+        cb(variableInstance as ArrayVariable);
+    } else {
+        logError(wrapError(new Error('Trying to insert value into the non-array'), {
+            additional: {
+                name,
+                type
+            }
+        }));
+    }
+}

package/src/actions/copyToClipboard.ts

@@ -0,0 +1,82 @@
+import type { ActionCopyToClipboard, WrappedError } from '../../typings/common';
+import type { MaybeMissing } from '../expressions/json';
+import { wrapError } from '../utils/wrapError';
+
+/**
+ * Clipboard interface for React Native
+ * Uses @react-native-clipboard/clipboard when available
+ */
+interface ClipboardInterface {
+    setString: (content: string) => void;
+}
+
+// Optional clipboard module - will be undefined if not installed
+let Clipboard: ClipboardInterface | undefined;
+
+/**
+ * Initialize clipboard module
+ * This function attempts to load @react-native-clipboard/clipboard
+ * Returns true if clipboard is available
+ */
+export function initClipboard(clipboardModule?: ClipboardInterface): boolean {
+    if (clipboardModule) {
+        Clipboard = clipboardModule;
+        return true;
+    }
+
+    // Try to dynamically require the clipboard module
+    try {
+        // This will work if @react-native-clipboard/clipboard is installed
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        Clipboard = require('@react-native-clipboard/clipboard').default;
+        return true;
+    } catch {
+        // Clipboard module not installed
+        return false;
+    }
+}
+
+/**
+ * Copy content to clipboard
+ * Requires @react-native-clipboard/clipboard to be installed
+ */
+export function copyToClipboard(
+    logError: (error: WrappedError) => void,
+    actionTyped: MaybeMissing<ActionCopyToClipboard>
+): void {
+    if (!(
+        actionTyped.content && (actionTyped.content.type === 'text' || actionTyped.content.type === 'url') &&
+        typeof actionTyped.content.value === 'string'
+    )) {
+        logError(wrapError(new Error('Incorrect action'), {
+            additional: {
+                action: actionTyped
+            }
+        }));
+        return;
+    }
+
+    // Ensure clipboard is initialized
+    if (!Clipboard) {
+        initClipboard();
+    }
+
+    if (!Clipboard) {
+        logError(wrapError(new Error('Clipboard is unavailable. Install @react-native-clipboard/clipboard'), {
+            additional: {
+                action: actionTyped
+            }
+        }));
+        return;
+    }
+
+    try {
+        Clipboard.setString(actionTyped.content.value);
+    } catch (err) {
+        logError(wrapError(new Error('Failed to copy to the clipboard'), {
+            additional: {
+                originalError: String(err)
+            }
+        }));
+    }
+}

package/src/actions/dict.ts

@@ -0,0 +1,71 @@
+import type { ActionDictSetValue, WrappedError } from '../../typings/common';
+import type { Variable } from '../../typings/variables';
+import type { MaybeMissing } from '../expressions/json';
+import { convertTypedValue } from '../expressions/utils';
+import type { ComponentContext } from '../types/componentContext';
+import { wrapError } from '../utils/wrapError';
+
+export function dictSetValue(
+    componentContext: ComponentContext | undefined,
+    variables: Map<string, Variable>,
+    logError: (error: WrappedError) => void,
+    actionTyped: MaybeMissing<ActionDictSetValue>
+): void {
+    const { variable_name: name, key, value } = actionTyped;
+
+    if (typeof key !== 'string') {
+        logError(wrapError(new Error('Incorrect dict_set_value action'), {
+            additional: {
+                name
+            }
+        }));
+        return;
+    }
+
+    if (!name) {
+        logError(wrapError(new Error(`Incorrect ${actionTyped.type} action`), {
+            additional: {
+                name
+            }
+        }));
+        return;
+    }
+
+    if (value && !value.type) {
+        logError(wrapError(new Error('Incorrect value type'), {
+            additional: {
+                name
+            }
+        }));
+    }
+
+    const variableInstance = componentContext?.getVariable(name) || variables.get(name);
+
+    if (!variableInstance) {
+        logError(wrapError(new Error('Cannot find variable'), {
+            additional: {
+                name
+            }
+        }));
+        return;
+    }
+
+    const type = variableInstance.getType();
+    if (type === 'dict') {
+        const dict = variableInstance.getValue() as Record<string, unknown>;
+        const newDict = { ...dict };
+        if (value) {
+            newDict[key] = convertTypedValue(value);
+        } else {
+            delete newDict[key];
+        }
+        variableInstance.setValue(newDict);
+    } else {
+        logError(wrapError(new Error('Trying to set value into the non-dict'), {
+            additional: {
+                name,
+                type
+            }
+        }));
+    }
+}

package/src/actions/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Action handlers for DivKit React Native
+ *
+ * These handlers execute typed actions from DivKit JSON.
+ * Ported from Web implementation with React Native adaptations.
+ */
+
+export { arrayInsert, arrayRemove, arraySet } from './array';
+export { dictSetValue } from './dict';
+export { copyToClipboard, initClipboard } from './copyToClipboard';
+export { updateStructure } from './updateStructure';

package/src/actions/updateStructure.ts

@@ -0,0 +1,134 @@
+import type { ActionUpdateStructure, WrappedError } from '../../typings/common';
+import type { Variable } from '../../typings/variables';
+import type { MaybeMissing } from '../expressions/json';
+import { convertTypedValue } from '../expressions/utils';
+import type { ComponentContext } from '../types/componentContext';
+import { wrapError } from '../utils/wrapError';
+
+export function updateStructure(
+    componentContext: ComponentContext | undefined,
+    variables: Map<string, Variable>,
+    logError: (error: WrappedError) => void,
+    actionTyped: MaybeMissing<ActionUpdateStructure>
+): void {
+    const { variable_name: name, path, value } = actionTyped;
+
+    if (!value?.value) {
+        logError(wrapError(new Error('Missing value for an action'), {
+            additional: {
+                name
+            }
+        }));
+        return;
+    }
+
+    if (typeof path !== 'string' || !path || path.charAt(0) === '/' || path.charAt(path.length - 1) === '/') {
+        logError(wrapError(new Error(`Value '${path}' for key 'path' is not valid`), {
+            additional: {
+                name
+            }
+        }));
+        return;
+    }
+
+    if (!name) {
+        logError(wrapError(new Error(`Incorrect ${actionTyped.type} action`), {
+            additional: {
+                name
+            }
+        }));
+        return;
+    }
+
+    const variableInstance = componentContext?.getVariable(name) || variables.get(name);
+
+    if (!variableInstance) {
+        logError(wrapError(new Error('Cannot find variable'), {
+            additional: {
+                name
+            }
+        }));
+        return;
+    }
+
+    const type = variableInstance.getType();
+    if (type === 'dict' || type === 'array') {
+        const obj = variableInstance.getValue() as Record<string, unknown>;
+        const processed = path.replace(/\/+/g, '/');
+        if (processed === '/') {
+            logError(wrapError(new Error(`Value '${path}' for key 'path' is not valid`), {
+                additional: {
+                    name,
+                    type,
+                    path
+                }
+            }));
+            return;
+        }
+        const parts = processed.split('/');
+        const newObj = type === 'array' ? (obj as unknown as unknown[]).slice() : { ...obj };
+        let temp: any = newObj;
+        for (let i = 0; i < parts.length; ++i) {
+            const part = parts[i];
+
+            if (!part) {
+                logError(wrapError(new Error('Path is empty'), {
+                    additional: {
+                        name,
+                        type,
+                        path
+                    }
+                }));
+                return;
+            }
+
+            if (!temp || typeof temp !== 'object') {
+                logError(wrapError(new Error(`Element with path '${parts.slice(0, i).join('/')}' is not ${temp === undefined ? 'found' : 'a structure'}`), {
+                    additional: {
+                        name,
+                        type,
+                        path
+                    }
+                }));
+                return;
+            }
+            if (Array.isArray(temp)) {
+                const int = Number(part);
+                if (Number.isNaN(int)) {
+                    logError(wrapError(new Error(`Unable to use '${part}' as array index`), {
+                        additional: {
+                            name,
+                            type,
+                            path
+                        }
+                    }));
+                    return;
+                }
+                if (i + 1 === parts.length && (int < 0 || int > temp.length)) {
+                    logError(wrapError(new Error(`Position '${int}' is out of array bounds`), {
+                        additional: {
+                            name,
+                            type,
+                            path
+                        }
+                    }));
+                    return;
+                }
+            }
+
+            if (i + 1 < parts.length) {
+                temp = temp[part];
+            }
+        }
+
+        temp[parts[parts.length - 1]] = convertTypedValue(value);
+        variableInstance.setValue(newObj);
+    } else {
+        logError(wrapError(new Error('Action requires array or dictionary variable'), {
+            additional: {
+                name,
+                type
+            }
+        }));
+    }
+}

package/src/components/DivComponent.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { ComponentContext } from '../types/componentContext';
+import type { DivBaseData } from '../types/base';
+import { DivText } from './text';
+import { DivContainer } from './container';
+import { DivImage } from './image';
+import { DivState } from './state';
+import { Unknown } from './utilities/Unknown';
+
+export interface DivComponentProps {
+    componentContext: ComponentContext<DivBaseData>;
+}
+
+/**
+ * DivComponent - Universal component router
+ * Routes to the appropriate component based on the `type` field
+ *
+ * MVP Components:
+ * - text: DivText
+ * - container: DivContainer
+ * - image: DivImage
+ * - gif: DivImage (treated as image)
+ * - state: DivState
+ *
+ * Deferred for post-MVP:
+ * - gallery, pager, tabs
+ * - slider, indicator
+ * - input, select, switch
+ * - video, custom
+ * - separator
+ * - grid
+ *
+ * Based on Web component resolution logic
+ */
+export function DivComponent({ componentContext }: DivComponentProps) {
+    const { json } = componentContext;
+
+    if (!json || !json.type) {
+        return <Unknown type={json?.type || 'undefined'} />;
+    }
+
+    // Route to appropriate component based on type
+    switch (json.type) {
+        case 'text':
+            return <DivText componentContext={componentContext as any} />;
+
+        case 'container':
+            return <DivContainer componentContext={componentContext as any} />;
+
+        case 'image':
+        case 'gif':
+            return <DivImage componentContext={componentContext as any} />;
+
+        case 'state':
+            return <DivState componentContext={componentContext as any} />;
+
+        // Future components (post-MVP)
+        case 'gallery':
+        case 'pager':
+        case 'tabs':
+        case 'slider':
+        case 'indicator':
+        case 'input':
+        case 'select':
+        case 'switch':
+        case 'video':
+        case 'custom':
+        case 'separator':
+        case 'grid':
+            return <Unknown type={json.type} />;
+
+        default:
+            return <Unknown type={json.type} />;
+    }
+}