shadow-cljs-with-react-native-note's Introduction

Use shadow-cljs with React Native

Brief

Thanks to @thheller (author of shadow-cljs), just got it to work with React Native. Comparing to re-natal or expo-cljs-template, we now can use the built-in HMR. It’s faster and don’t need heavy shim work. e.g. figwheel-bridge.js. Also we have a REPL :)

Source map seems still not work.

Followings is the steps to make they work. Currently, this is not a good solution, the steps are complex. But if all this work can be done with shadow-cljs automatically, that will be awesome.

How

Install react-native command-line tools with npm i -g react-native-cli.

Install shadow-cljs command-line tools with npm i -g shadow-cljs.

create the project with react-native init Hello.

cd Hello.

Initialize a shadow-cljs config file with shadow-cljs init.

edit shadow-cljs.edn.

{:source-paths
 ["src"]

 :dependencies
 []

 :builds
 {:app {:target :npm-module
        :output-dir "js/"
        :runtime :browser
        :devtools {:devtools-url "http://<host-ip>:9630"}}}}  ;; This will let client connect our machine, so that we can have a repl.

create a cljs file, src/hello/core.cljs.

(ns hello.core)

(defn foo []
  (js/alert "Hello from CLJS!"))

start repl client in index.cljs.

import './js/shadow.cljs.devtools.client.browser';

Using foo will like this:

import { foo } from './js/hello.core';

foo();

Start shadow-cljs, I use shadow-cljs clj-repl. Then we can start the build:

shadow.user => (shadow/watch :app)
shadow.user => (shadow/repl :app)

react-native run-ios!

At end, after client loaded, you will see an error for document is not defined. since shadow-cljs support A good way to hack, we can fix like this:

mkdir -p src/shadow/cljs/devtools/client

wget https://github.com/thheller/shadow-cljs/blob/master/src/main/shadow/cljs/devtools/client/browser.cljs src/shadow/cljs/devtools/client/browser.cljs

we edit this file, modify script-eval function to