https://github.com/doglooksgood/shadow-cljs-with-react-native-note
[DEPRECATED]A note for how to use shadow-cljs with react-native
https://github.com/doglooksgood/shadow-cljs-with-react-native-note
Last synced: 4 months ago
JSON representation
[DEPRECATED]A note for how to use shadow-cljs with react-native
- Host: GitHub
- URL: https://github.com/doglooksgood/shadow-cljs-with-react-native-note
- Owner: DogLooksGood
- Created: 2018-02-27T06:04:44.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-27T06:41:35.000Z (over 8 years ago)
- Last Synced: 2025-06-20T10:09:38.225Z (12 months ago)
- Homepage:
- Size: 2.93 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.org
Awesome Lists containing this project
README
#+TITLE: Use shadow-cljs with React Native
* Brief
Thanks to [[https://github.com/thheller][@thheller]] (author of [[https://github.com/thheller/shadow-cljs][shadow-cljs]]), just got it to work with [[https://github.com/facebook/react-native][React Native]].
Comparing to [[https://github.com/drapanjanas/re-natal][re-natal]] or [[https://github.com/seantempesta/expo-cljs-template][expo-cljs-template]], we now can use the built-in ~HMR~.
It's faster and don't need heavy shim work. e.g. [[https://github.com/drapanjanas/re-natal/blob/master/resources/figwheel-bridge.js][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~.
#+BEGIN_SRC clojure
{:source-paths
["src"]
:dependencies
[]
:builds
{:app {:target :npm-module
:output-dir "js/"
:runtime :browser
:devtools {:devtools-url "http://:9630"}}}} ;; This will let client connect our machine, so that we can have a repl.
#+END_SRC
create a cljs file, ~src/hello/core.cljs~.
#+BEGIN_SRC clojure
(ns hello.core)
(defn foo []
(js/alert "Hello from CLJS!"))
#+END_SRC
start repl client in ~index.cljs~.
#+BEGIN_SRC javascript
import './js/shadow.cljs.devtools.client.browser';
#+END_SRC
Using ~foo~ will like this:
#+BEGIN_SRC javascript
import { foo } from './js/hello.core';
foo();
#+END_SRC
Start ~shadow-cljs~, I use ~shadow-cljs clj-repl~. Then we can start the build:
#+BEGIN_SRC clojure
shadow.user => (shadow/watch :app)
shadow.user => (shadow/repl :app)
#+END_SRC
~react-native run-ios~!
At end, after client loaded, you will see an error for ~document~ is not defined.
since ~shadow-cljs~ support [[https://shadow-cljs.github.io/docs/UsersGuide.html#_patching_libraries][A good way to hack]], we can fix like this:
#+BEGIN_SRC shell
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
#+END_SRC
we edit this file, modify ~script-eval~ function to
#+BEGIN_SRC clojure
(defn script-eval
[code])
#+END_SRC
Now you try on REPL and HMR.