joshuamiller / react-native-template-cljs-krell-storybook

A React Native Template for installing a working ClojureScript, Krell, and Storybook environment

A React Native Template for ClojureScript, Krell, and Storybook

Getting Started

npx react-native init YourProjectName --template react-native-template-cljs-krell-storybook

bundle && npx pod-install # For iOS

Usage

yarn cljs:build

yarn start

Apple Silicon Note

If you run into compatibility trouble on Apple Silicon, dependencies can be installed by running arch -x86_64 pod install inside /ios folder.

Workflow

JavaScript components and Storybook tests are in js/, named Component.js and Component.stories.js respectively. Run yarn storybook:run for an interactive environment showing the look and feel of your components; they will live-reload when edited. (Note that yarn storybook:run will overwrite the Krell-generated index.js, you will need to run yarn cljs:build or yarn cljs:repl before running yarn start again to get back to your app).

You can require your JS components in your ClojureScript views with

(def component-name
  (r/adapt-react-class
    (.-default (js/require "../js/ComponentName.js"))))

Note the path is just ../, regardless of where in your ClojureScript directory hierarchy you are working from.

Rationale

Clojure, with its functional core and immutable data structures, is ideally suited to managing state in user applications. ClojureScript extends this reach anywhere JavaScript can go, and React Native puts a performant, well-supported, JS environment on mobile and desktop devices with a deep ecosystem of usable libraries.

When it comes to building ClojureScript apps on React Native, the majority of the benefit comes from lifting state out of the land of JavaScript and into a functional library like Reagent. Design of components can be left to JavaScript, functioning essentially as markup, with tools like Storybook providing quick feedback on layout. This template provides the dependencies and plumbing to connect these three main tools.

Contributing

Bug reports, pull requests, and additions to the wiki are all extremely welcome. The biggest hurdle to getting started with ClojureScript on React Native is "it works on my machine." Eliminating these issues and documenting the solutions will help everyone get on with writing useful code.

References

• ClojureScript in the Age of Typescript -- David Nolen
• CLJSRN.org
• Krell
• Storybook

react-native-template-cljs-krell-storybook's Issues

Running this plugin results in a massive **BUILD FAILED** error

Steps to reproduce:

1. run this plugin by copy-pasting the command from the README
2. Build the project using the command in package.json (cljs:build)
3. Install the Podfile stuff (using the command for Apple Silicon in my case)
4. Run the ios command

I get a massive error message that's bigger than my terminal history. Here's the end of it:

2023-08-02 00:25:04.405 xcodebuild[50429:9987236] DVTCoreDeviceEnabledState: DVTCoreDeviceEnabledState_Disabled set via user default (DVTEnableCoreDevice=disabled)
--- xcodebuild: WARNING: Using the first of multiple matching destinations:
{ platform:iOS Simulator, id:0C5EB4F3-6C28-4027-8D46-EE67499B8710, OS:16.4, name:iPhone 14 Pro Max }
{ platform:iOS Simulator, id:0C5EB4F3-6C28-4027-8D46-EE67499B8710, OS:16.4, name:iPhone 14 Pro Max }
** BUILD FAILED **


The following build commands failed:
	CompileC /Users/nsadeh/Library/Developer/Xcode/DerivedData/ThirdPlaceTemplate-crvyzunmwzctzncahvsbeuugajsr/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build/Objects-normal/arm64/FBReactNativeSpec-generated.o /Users/nsadeh/Desktop/clj-projects/ThirdPlaceTemplate/ios/build/generated/ios/FBReactNativeSpec/FBReactNativeSpec-generated.mm normal arm64 objective-c++ com.apple.compilers.llvm.clang.1_0.compiler (in target 'React-Codegen' from project 'Pods')
(1 failure)

post-install script runs and fails every time `yarn add` is run

It's ultimately a non-issue, since yarn add still does its job, but now the operation throws an error code due to post_install.cljs failing.

From a fresh project:

$ npx react-native init myproj --template react-native-template-cljs-krell-storybook
$ cd myproj
$ yarn add react-native-vector-icons # or any other package
<various yarn warnings, as usual>
$ nbb post_install.cljs
----- Error --------------------------------------
Message:  ENOENT: no such file or directory, open 'src/project_name/core.cljs'
Location: /Users/logan/src/test/myproj/post_install.cljs:9:8

----- Context ------------------------------------
5:             [clojure.string :as str]))
6: 
7: (defn file->str
8:   [filename]
9:   (str (readFileSync filename)))
           ^--- ENOENT: no such file or directory, open 'src/project_name/core.cljs'
10: 
11: (def project-name
12:   (->> (file->str "app.json")
13:        (.parse js/JSON)
14:        (.-name)

----- Stack trace --------------------------------
post-install           - /Users/logan/src/test/myproj/post_install.cljs:9:8 
clojure.core/str       - <built-in> 
post-install/file->str - /Users/logan/src/test/myproj/post_install.cljs:9:3 
post-install/file->str - /Users/logan/src/test/myproj/post_install.cljs:7:1 
post-install           - /Users/logan/src/test/myproj/post_install.cljs:27:7 
clojure.string/replace - <built-in> 
post-install           - /Users/logan/src/test/myproj/post_install.cljs:28:7 

error Command failed with exit code 1.

I assume that the post_install.cljs script is meant to be run only after the initial template is set up, but for some reason is running after every yarn add, which subsequently throws an error because post_install.cljs is trying to do folder renaming that has already been performed.

Let me know if you need any more information!

Adding a new JS component and restarting the REPL leads to: Can't find variable: cljs

Steps

1. Add a new component in js/.

2. Require the component in cljs file:

   (def foo (r/adapt-react-class (.-default (js/require "../js/Foo.js"))))

3. Restart the REPL:

   clj -M -m krell.main -co build.edn -c -r

4. Refresh Metro.

Result

Leads to this:

info Reloading app...
 BUNDLE  ./index.js 

 LOG  Running "AProject" with {"rootTag":11}
 WARN  `new NativeEventEmitter()` was called with a non-null argument without the required `addListener` method. 
KrellRoot@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.aproject&modulesOnly=false&runModule=true:1389:36
RCTView
View
RCTView
View
AppContainer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.aproject&modulesOnly=false&runModule=true:79807:36
AProject(RootComponent)@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.aproject&modulesOnly=false&runModule=true:86187:28
 WARN  `new NativeEventEmitter()` was called with a non-null argument without the required `removeListeners` method. 
KrellRoot@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.aproject&modulesOnly=false&runModule=true:1389:36
RCTView
View
RCTView
View
AppContainer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.aproject&modulesOnly=false&runModule=true:79807:36
AProject(RootComponent)@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.aproject&modulesOnly=false&runModule=true:86187:28
 LOG  Krell sez howdy, Device ID: msmnile
 LOG  Connected to Krell REPL Server
 ERROR  Could not evaluate form: (cljs.core._STAR_print_namespace_maps_STAR_ = true) [ReferenceError: Can't find variable: cljs]
 LOG  Closed connection with {"address": "10.0.0.2", "family": "IPv4", "port": 38771}

And this, in the REPL window:

zeniten@ztn2:~/repositories/AProject$ yarn cljs:repl
yarn run v1.22.4
$ clj -M -m krell.main -co build.edn -c -r
SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
SLF4J: Defaulting to no-operation (NOP) logger implementation
SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.

Waiting for device connection on port 5001
ClojureScript 1.10.844
cljs.user=> clojure.lang.ExceptionInfo: Unexpected error during REPL initialization #:cljs.repl{:error :init-failed}
  at cljs.repl$repl_STAR_.invokeStatic(repl.cljc:1220)
  at cljs.repl$repl_STAR_.invoke(repl.cljc:1033)
  at cljs.cli$repl_opt.invokeStatic(cli.clj:325)
  at cljs.cli$repl_opt.invoke(cli.clj:312)
  at cljs.cli$default_compile.invokeStatic(cli.clj:534)
  at cljs.cli$default_compile.invoke(cli.clj:486)
  at krell.repl$krell_compile.invokeStatic(repl.clj:243)
  at krell.repl$krell_compile.invoke(repl.clj:233)
  at cljs.cli$compile_opt.invokeStatic(cli.clj:542)
  at cljs.cli$compile_opt.invoke(cli.clj:540)
  at cljs.cli$main.invokeStatic(cli.clj:703)
  at cljs.cli$main.doInvoke(cli.clj:692)
  at clojure.lang.RestFn.applyTo(RestFn.java:139)
  at clojure.core$apply.invokeStatic(core.clj:669)
  at clojure.core$apply.invoke(core.clj:662)
  at cljs.main$_main.invokeStatic(main.clj:65)
  at cljs.main$_main.doInvoke(main.clj:56)
  at clojure.lang.RestFn.applyTo(RestFn.java:137)
  at clojure.core$apply.invokeStatic(core.clj:667)
  at clojure.core$apply.invoke(core.clj:662)
  at krell.main$_main.invokeStatic(main.clj:9)
  at krell.main$_main.doInvoke(main.clj:7)
  at clojure.lang.RestFn.applyTo(RestFn.java:137)
  at clojure.lang.Var.applyTo(Var.java:705)
  at clojure.core$apply.invokeStatic(core.clj:667)
  at clojure.main$main_opt.invokeStatic(main.clj:514)
  at clojure.main$main_opt.invoke(main.clj:510)
  at clojure.main$main.invokeStatic(main.clj:664)
  at clojure.main$main.doInvoke(main.clj:616)
  at clojure.lang.RestFn.applyTo(RestFn.java:137)
  at clojure.lang.Var.applyTo(Var.java:705)
  at clojure.main.main(main.java:40)
Caused by: clojure.lang.ExceptionInfo: ReferenceError: Can't find variable: cljs {:type :js-eval-exception, :error {:status :exception, :value "ReferenceError: Can't find variable: cljs"}, :repl-env #krell.repl.KrellEnv{:options {:port 5001, :watch-dirs ["src"], :connect-timeout 30000, :eval-timeout 30000, :recompile :direct, :main aproject.core, :output-dir "target"}, :file-index #object[clojure.lang.Atom 0x77a14911 {:status :ready, :val {#object[java.io.File 0x541c76fd "/home/zeniten/repositories/AProject/src"] 1654452681422, #object[java.io.File 0x1142843c "/home/zeniten/repositories/AProject/src/aproject"] 1654507507401, #object[java.io.File 0x3993cecb "/home/zeniten/repositories/AProject/src/aproject/core.cljs"] 1654507507389}}], :socket #object[clojure.lang.Atom 0x4407f129 {:status :ready, :val {:socket #object[java.net.Socket 0x731bdcca "Socket[addr=/10.0.0.2,port=38771,localport=5001]"], :in #object[java.io.BufferedReader 0x76fdd5f1 "java.io.BufferedReader@76fdd5f1"], :out #object[java.io.BufferedWriter 0x513fb873 "java.io.BufferedWriter@513fb873"]}}], :state #object[clojure.lang.Atom 0x2a4a95c4 {:status :ready, :val {:watcher #object[io.methvin.watcher.DirectoryWatcher 0x71ae1cb "io.methvin.watcher.DirectoryWatcher@71ae1cb"], :done true}}]}, :form (set! cljs.core/*print-namespace-maps* true), :js "(cljs.core._STAR_print_namespace_maps_STAR_ = true)"}
  at cljs.repl$evaluate_form.invokeStatic(repl.cljc:577)
  at cljs.repl$evaluate_form.invoke(repl.cljc:498)
  at cljs.repl$repl_STAR_.invokeStatic(repl.cljc:1129)
  ... 31 more
Done in 142.00s.

Other information

OS: Ubuntu 20.04
Target: Android (physical device)

Prefixes of dependencies in package.json are missing in fresh install

Steps

1. Follow "Getting Started":

   npx react-native init Krelly --template react-native-template-cljs-krell-storybook
   

2. Go to the new project.

3. Look at package.json.

Result

package.json

{
  "name": "projectname",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "ios": "react-native run-ios",
    "storybook": "start-storybook -p 6006",
    "start": "react-native start",
    "android": "react-native run-android",
    "lint": "eslint .",
    "cljs:repl": "clj -M -m krell.main -co build.edn -c -r",
    "build-storybook": "build-storybook",
    "cljs:build": "clj -M -m krell.main -co build.edn -c",
    "test": "jest"
  },
  "dependencies": {
    "module-deps": "^1.1.1",
    "react": "18.1.0",
    "react-native": "0.68.2",
    "react-native-device-info": "8.1.2",
    "react-native-tcp-socket": "5.2.0"
  },
  "devDependencies": {
    "core": "^7.12.9",
    "metro-react-native-babel-preset": "^0.67.0",
    "react": "^6.5.6",
    "addon-interactions": "^6.5.6",
    "eslint-config": "^2.0.0",
    "react-test-renderer": "17.0.2",
    "addon-essentials": "^6.5.6",
    "babel-jest": "^26.6.3",
    "dashify": "^2.0.0",
    "testing-library": "^0.0.11",
    "runtime": "^7.12.5",
    "babel-plugin-react-native-web": "^0.17.7",
    "addon-actions": "^6.5.6",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "react-dom": "^18.1.0",
    "react-native-web": "^0.17.7",
    "nbb": "0.5.103",
    "addon-links": "^6.5.6",
    "addon-react-native-web": "^0.0.18"
  },
  "jest": {
    "preset": "react-native"
  }
}

Question

Shouldn't "core" under "devDependencies" actually be "@babel/core", etc.?

If I try to run yarn, I get the following:

zeniten@ztn2:~/repositories/Krelly$ yarn
yarn install v1.22.4
warning package.json: "dependencies" has dependency "react" with range "18.1.0" that collides with a dependency in "devDependencies" of the same name with version "^6.5.6"
warning [email protected]: "dependencies" has dependency "react" with range "18.1.0" that collides with a dependency in "devDependencies" of the same name with version "^6.5.6"
[1/4] Resolving packages...
Couldn't find any versions for "core" that matches "^7.12.9"
? Please choose a version of "core" from this list: (Use arrow keys)
❯ 2.0.14 
  2.0.13 
  2.0.12 
  2.0.11 
  2.0.9 
  2.0.8 
  2.0.6 
  2.0.5 
  2.0.4 
  2.0.2 
  2.0.1 
  1.0.113 
  1.0.112 
  1.0.111 
  1.0.110 
  1.0.109 
  1.0.108 
  1.0.107 
  1.0.106 
  1.0.105 
  1.0.104 
  1.0.103 
  1.0.102 
  1.0.101 
  1.0.100 
  1.0.99 
  1.0.98 
  1.0.97 
  1.0.96 
  1.0.95 
  1.0.94 
  1.0.93 
  1.0.92 
  1.0.91 
  1.0.89 
  1.0.88 
(Move up and down to reveal more choices)