Как добавить React-компонент в Active Admin

В статье Неофициальный гайд по Active Admin мы рассмотрели библиотеки, из которых состоит Active Admin, и некоторые подходы к созданию собственных компонентов. Но иногда форма или информационный виджет могут быть настолько сложными или динамическими, что начинаешь задумываться, не пора ли обратиться к современному фронтенду, а не накручивать такой родной, но такой неподдерживаемый jQuery-код.

Мы в ДомКлик в таких случаях используем Vue.js и React, и под катом я расскажу, как именно можно внедрить React-компонент в Active Admin.

Рассмотрим идеальный вариант, когда Active Admin использует Webpacker для управления ресурсами. О настройке этого режима можно прочитать в официальной документации.

Active Admin с Webpacker

Начнем с того, что добавим и установим гем react-rails (подробнее в README):

# Gemfile gem 'react-rails', '~> 2.6'

bundle install rails webpacker:install:react rails generate react:install

Теперь добавим React-компонент hello world в директорию app/javascript/components:

// app/javascript/components/Hello.jsx import * as React from 'react';  const Hello = ({name}) => {   return(     <div>Hello {name}!</div>   ); };  export default Hello;

Чтобы компоненты были видны в Active Admin, добавим следующий код в app/javascript/packs/activeadmin.js:

// app/javascript/packs/activeadmin.js // ...  // Support component names relative to this directory: var componentRequireContext = require.context("components", true); var ReactRailsUJS = require("react_ujs"); ReactRailsUJS.useContext(componentRequireContext);

Теперь добавим новый Arbre-компонент, который позволит нам с легкостью вызывать React-виджеты (подробнее об Arbre-компонентах можно прочитать в статье Неофициальный гайд по Active Admin):

# app/admin/components/react_component.rb module Admin   module Components     # Defines a `react_component` arbre component. It allows     # to include react components into Active Admin using react-rails.     #     # @example     #     # show do     #   panel do     #     react_component 'Post', { title: 'My post' }     #   end     # end     #     class React < ActiveAdmin::Component       class ReactComponentBuilder         include ::React::Rails::ViewHelper         include ActionView::Helpers::TagHelper       end        builder_method :react_component        def to_s         ReactComponentBuilder.new.react_component(*@args, &@block)       end        def build(*args, &block)         @args = args         @block = block       end     end   end end

И наконец, вызовем компонент в dashboard.rb:

# app/admin/dashboard.rb ActiveAdmin.register_page "Dashboard" do   menu priority: 1, label: proc { I18n.t("active_admin.dashboard") }    content title: proc { I18n.t("active_admin.dashboard") } do     react_component 'Hello', { name: 'David' }   end end

Вы великолепны! Теперь можете использовать React-компоненты в Active Admin!

Бонус: убираем Sprockets из проекта

Если Assets Pipeline больше ни для чего не используется, то почему бы от него не отказаться? Для этого убедитесь, что Active Admin обновлен до версии 2.9, и затем:

• удалите require 'sprockets/railtie' из config/application.rb (если этой строки нет, но есть require 'rails/all', то посмотрите, во что раскрывается этот require);

• удалите строку config.assets.compile = false из config/environments/production.rb;

• удалите строки config.assets.debug = true и config.assets.quiet = true из config/environments/development.rb;

• удалите gem 'sass-rails' из Gemfile;

• удалите initializers/assets.rb;

• и наконец, удалите директорию app/assets со всем её содержимым.

Active Admin с Assets Pipeline

Если в вашем проекте для управления ресурсами Active Admin используется Sprockets, то react-rails можно подключить через Assets Pipeline (подробнее в README). Я смог запустить таким образом hello.jsx из примера выше, но, как мне показалось, это достаточно сложный для поддержки подход, поэтому я бы советовал добавить параллельно webpacker и собирать React-компоненты через него.

Для начала добавьте gem "webpacker"в Gemfile, затем установите react-rails, добавьте Arbre-компонент и React-компонент, как мы это делали выше.

Единственная разница в том, что у нас нет файла app/javascript/packs/activeadmin.js; давайте создадим его:

// app/javascript/packs/activeadmin.js  // Support component names relative to this directory: var componentRequireContext = require.context("components", true); var ReactRailsUJS = require("react_ujs"); ReactRailsUJS.useContext(componentRequireContext);

Теперь еще одно отличие: из-за того, что мы работаем в режиме sprockets, Active Admin не подключает данный pack, поэтому нам необходимо сделать это вручную. Например, вот так:

# app/admin/dashboard.rb ActiveAdmin.register_page "Dashboard" do   menu priority: 1, label: proc { I18n.t("active_admin.dashboard") }    content title: proc { I18n.t("active_admin.dashboard") } do     script src: asset_pack_path("activeadmin.js")     react_component 'Hello', { name: 'David' }   end end

Есть и более «чистые» варианты, например, можно написать подобное расширение Active Admin:

# lib/active_admin/extra_headers.rb  module ActiveAdmin   module ExtraHeaders     def build_active_admin_head(*args)       super       return unless controller.respond_to?(:extra_headers)        within head do         controller.extra_headers.each do |extra_header|           text_node(extra_header)         end       end     end   end end

Теперь добавим расширение в начало инициализатора:

# config/initializers/active_admin.rb  require_relative '../../lib/active_admin/extra_headers'  ActiveAdmin::Views::Pages::Base.send(:prepend, ActiveAdmin::ExtraHeaders)

Ну и наконец изменим app/admin/dashboard.rb:

# app/admin/dashboard.rb ActiveAdmin.register_page "Dashboard" do   menu priority: 1, label: proc { I18n.t("active_admin.dashboard") }    content title: proc { I18n.t("active_admin.dashboard") } do     react_component 'Hello', { name: 'David' }   end    controller do     def extra_headers       [helpers.javascript_pack_tag('activeadmin')]     end   end end

Вот такой хак. Интерфейс можно сделать еще удобнее, но я остановлюсь на этом варианте. Не забудьте перезагрузить приложение, чтобы применились изменения в инициализаторе.

React-rails и Webpacker в бою

Приблизим руководство к боевым условиям: добавим в проект поддержку Typescript и внешнюю библиотеку с react-компонентом, и вызовем его с помощью .tsx-файла.

Начнем с настройки Typescript:

rails webpacker:install:typescript yarn add -D @types/react @types/react-dom

Теперь переведем наш тестовый компонент из .jsx в .tsx:

import * as React from 'react';  const Hello = ({name}: {name: string}) => {   return(     <div>Hello {name}!</div>   ); };  export default Hello;

В качестве примера внешней библиотеки возьмем react-vis. Начнем с добавления зависимости:

yarn add -D react-vis @types/react-vis

Добавим новый компонент app/components/javascript/Plot.tsx:

// app/components/javascript/Plot.tsx  import * as React from 'react'; import 'react-vis/dist/style.css'; import { XYPlot, LineSeries, LineSeriesPoint } from 'react-vis';  type Params = {   data: LineSeriesPoint[]; } const Plot = ({data}: Params) => {   return (     <div className="Plot">       <XYPlot height={300} width={300}>         <LineSeries data={data} />       </XYPlot>     </div>   ); };  export default Plot;

Проверим работу нового компонента:

# app/admin/dashboard.rb  ActiveAdmin.register_page "Dashboard" do   menu priority: 1, label: proc { I18n.t("active_admin.dashboard") }    content title: proc { I18n.t("active_admin.dashboard") } do     react_component 'Hello', { name: 'David' }     data = [       { x: 0, y: 5 },       { x: 2, y: 7 },       { x: 5, y: 8 },       { x: 7, y: 7 },       { x: 8, y: 3 },       { x: 6, y: 0 },       { x: 0, y: -5 },       { x: -6, y: 0 },       { x: -8, y: 3 },       { x: -7, y: 7 },       { x: -5, y: 8 },       { x: -2, y: 7 },       { x: 0, y: 5 }     ]     react_component 'Plot', { data: data }   end end 

Ну вот и всё, теперь вы знаете, как добавить React в Active Admin, и наверняка смотрите в светлое будущее взором, полным решимости использовать (или не использовать) это знание на практике.