Добавление ClojureScript в существующую кодовую базу

Question

У меня есть достаточно большая база React + Relay, которая строится с использованием Webpack. Можно ли постепенно внедрить ClojureScript + Reagent?

Я подумывал начать с некоторых более мелких функциональных компонентов в нашей базе кода и поменять их. Это означало бы, что компонент Reagent каким-то образом должен получить реквизит от родителя.

Любые мысли или инструменты вокруг этого? Быстрая публикация Google, похоже, включает статьи, в том числе библиотеки JavaScript в вашем приложении ClojureScript, а не наоборот.

Answer 1

Вы можете создать компонент реагента, экспортировать его и импортировать в свой JS-код.

Поскольку у вас уже есть WebPack/реагировать в вашем Js проекте, необходимо исключить те из проекта cljs:

:dependencies [[org.clojure/clojure "1.8.0"] 
       [org.clojure/clojurescript "1.9.229"] 
       [org.clojure/core.async "0.2.391" 
       :exclusions [org.clojure/tools.reader]] 
       [reagent "0.6.0" :exclusions [cljsjs/react cljsjs/react-dom cljsjs/react-dom-server]]] 

Теперь вы должны обмануть Реагент, думая, что те реагируют файлы, которые вы только что исключенные все еще здесь. Создать эти три файла:

SRC/cljsjs/react.cljs

(ns cljsjs.react) 

SRC/cljsjs/реагируют/dom.cljs

(ns cljsjs.react.dom) 

SRC/cljsjs/реагировать/dom/server.cljs

(ns cljsjs.react.dom.server) 

Да, только одна строка с объявлением пространства имен в каждом файле.

Теперь вы можете написать свой компонент:

reagent_component/core.cljs:

(ns reagent-component.core 
    (:require [reagent.core :as r])) 

(def counter (r/atom 5)) 

(def ^:export test66 
    (r/create-class 
     {:reagent-render 
     (fn [props] 
      (let [{:keys [name]} props] 
       [:div 
        {:on-click (fn [] (swap! counter inc))} 
        name ", I am counting " (clojure.string/join ", " (map inc (range @counter)))]) 
      )})) 

Ваш cljsbuild раздел в project.clj может выглядеть следующим образом:

:cljsbuild {:builds 
      [{:id   "min" 
       :source-paths ["src"] 
       :compiler  {:output-to  "resources/public/js/compiled/reagent_component_min.js" 
          :output-dir "resources/public/js/compiled/min" 
          :main   reagent-component.core 
          :optimizations :advanced 
          :asset-path "js/compiled/out" 
          }}]} 

Для purpouse Краткость Я дал вам только раздел min cljsbuild.

lein cljsbuild once min будет производить файл resources/public/js/compiled/reagent_component_min.js, который необходимо скопировать в проект Webpack.

Новая запись будет добавлена ​​в webpack.config перед вашей главной точкой входа:

entry: [`${APP_DIR}/reagent_component_min.js`, `${APP_DIR}/main.js`], 

Этот файл (reagent_component_min.JS) должны быть исключены из babelification:

module: { 
    loaders: [ 
    { 
     test: /\.js$/, 
     exclude: /(node_modules|bower_components|reagent_component_min.js)/, 
     loader: 'babel-loader', 
     query: { 
     presets: ['latest'] 
     } 
    } 
    ] 
} 

и в вашем JavaScript вы использовать его как это:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

const comp = reagent_component.core.test66; 

const element = <div>Hello, world 
    {React.createElement(comp, {name: 'akond'})} 
</div>; 

ReactDOM.render(
    element, 
    document.getElementById('app') 
); 

Да, столпотворение JSX плагин не распознает <comp name="..."/>. Вот почему вызывается React.createElement. Я не понял, как сделать его лучше, но он работает.