RAZUMAI API

Документация

Жизненный цикл плагина

Класс Plugin определяет жизненный цикл плагина и предоставляет операции, доступные для всех плагинов:

import { Plugin } from "razumai";

class ExamplePlugin extends Plugin {
  onload() {
    // Настройте ресурсы, необходимые плагину.
    console.log('loading plugin')
  }
  onunload() {
    // Освободите все ресурсы, настроенные плагином.
    console.log('unloading plugin')
  }
}

render(new ExamplePlugin('example_plugin'))

Создание страницы плагина

Чтобы создать страниц плагина, воспользуйтесь классом View:

onOpen()

Функция onOpen() вызывается, когда страница открывается, и отвечает за формирование содержимого.

createEl()

Функция createEl() добавляет элемент на страницу.

render()

Функция render() формирует содержимое страницу.

onClose()

Функция onClose() вызывается, когда страница закрывается, и отвечает за очистку любых ресурсов.

clean()

Функция clean() отчищает содержимое страницы.

import {Plugin, render, View, ViewLeaf} from 'razumai'

class ExampleView extends View {
    constructor(leaf: ViewLeaf) {
        super(leaf);
    }

    onOpen() {
        const h6 = document.createElement('h2')
        h6.innerHTML = "Lorem ipsum dolor"

        const text = document.createElement('span')
        text.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis sed mi ac fringilla."

        this.createEl(h6)
        this.createEl(text)

        this.render()
    }

    onClose() {
        this.clean()
    }
}

class ExamplePlugin extends Plugin {
  onload() {
      this.registerView('view_example', (leaf) => new ExampleView(leaf))
  }
}

render(new ExamplePlugin('example_plugin'))

Использование React

Создайте новый файл под названием ReactView.tsx в корневом каталоге плагина со следующим содержимым:

const ReactView: React.FC = () => {
    return(
        <>
            <h4>ReactView</h4>
        </>
    );
};

Если вы хотите получить доступ к объекту Plugin из одного из ваших компонентов React, вам нужно передать его как зависимость:

const PluginContext = createContext();

const usePlugin = () => {
    return useContext(PluginContext);
};

const ReactView: React.FC = () => {
    const plugin = usePlugin();
    
    return(
        <>
            <h4>ReactView</h4>
        </>
    );
};

Чтобы использовать компонент React, его необходимо установить на HTML-элемент. В следующем примере компонент ReactView устанавливается на элемент this.leaf.containerEl:

import {Plugin, render, View, ViewLeaf} from 'razumai'
import { StrictMode } from "react";
import { Root, createRoot } from "react-dom/client";
import { ReactView } from "./ReactView";

class ExampleView extends View {
    
    root: Root | null = null;
    
    constructor(leaf: ViewLeaf) {
        super(leaf);
    }

    onOpen() {
        this.root = createRoot(this.leaf.containerEl);
        this.root.render(<StrictMode><ReactView /></StrictMode>);
    }

    onClose() {
        this.root?.unmount();
    }
}

class ExamplePlugin extends Plugin {
  onload() {
      this.registerView('view_example', (leaf) => new ExampleView(leaf))
  }
}

render(new ExamplePlugin('example_plugin'))