external JS with react-native, clojurescript and re-natal

doc.md

example of using https://github.com/davidedc/Algebrite in react-native.

I generated project as described here: https://github.com/drapanjanas/re-natal

First compile algebrite js file using webpack.

Clone Algebrite, put webpack.config.js in root

install webpack2 and babel-core, babel-loader

npm install --save-dev babel-core babel-loader webpack

Run webpack, see output.

Create js folder in future-app and

Copy dist/algbrt.js to future-app/js folder

cp dist/algbrt.js ~/future-app/js/algebrite.js

Create js/algebrite.externs.js file (see below) to produce correct production js.

Now add following to project.clj in cljsbuild -> builds -> id = ios -> compiler

                                                                     :foreign-libs
                                                                                    [{:file "js/algebrite.js"
                                                                                      :provides ["algebrite"]}]
                                                                     :externs ["js/algebrite.externs.js"]

You can also add :verbose true and search for algebrite in output

...
Copying file:/Users/eduard/future-app/js/algebrite.js to target/ios/algebrite.js
...

In future-app.ios.core namespace

add algebrite to requires

(ns future-app.ios.core
  (:require [reagent.core :as r :refer [atom]]
            [re-frame.core :refer [subscribe dispatch dispatch-sync]]
            [future-app.events]
            [future-app.subs]
            algebrite))

Use (.run js/Algebrite "...") in code

       [touchable-highlight {:style {:background-color "#aaa" :padding 20 :border-radius 4}
                             :on-press #(alert (str "HELLO! " (.run js/Algebrite "x + x")))}

When you press button you should see "HELLO! 2 x"

js_algebrite.externs.js

var Algebrite = {};
Algebrite.run = function() {};

webpack.config.js

module.exports = {
  entry: './dist/algebrite.js',
  output: {
    filename: './dist/algbrt.js',
    library: "Algebrite",
    libraryTarget: "this",
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
    }]
  },
  devtool: 'source-map'
}

webpack.output.txt

$ webpack                                                                                                         
[BABEL] Note: The code generator has deoptimised the styling of "/Users/eduard/Algebrite/dist/algebrite.js" as it exceeds the max of "500KB".
Hash: 74a8d6c44704666e34e6
Version: webpack 2.4.1
Time: 4164ms
               Asset     Size  Chunks                    Chunk Names
    ./dist/algbrt.js   474 kB       0  [emitted]  [big]  main
./dist/algbrt.js.map  1.31 MB       0  [emitted]         main
   [0] ./~/big-integer/BigInteger.js 43.3 kB {0} [built]
   [1] ./dist/algebrite.js 427 kB {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]