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

Related tags

Spring Boot react-native-template-cljs-krell-storybook
Overview

A React Native Template for ClojureScript, Krell, and Storybook

Getting Started

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

Usage

yarn cljs:build

yarn run ios # or android

Workflow

JavaScript components and Storybook tests are in js/, named Component.js and Component.stories.js respectively. Run yarn storybook for an interactive environment showing the look and feel of your components; they will live-reload when edited.

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

You might also like...

Served as the team leader to collaborate with another intern for a project and drew up our working schedule

Served as the team leader to collaborate with another intern for a project and drew up our working schedule

Served as the team leader to collaborate with another intern for a project and drew up our working schedule, risk management plan, quality control plan, configuration management plan, etc Compiled codes for the front end and back end, composed the development documentation and explored SSM structure and MyBatis structure.

Jan 17, 2022

A React Native project starter with Typescript, a theme provider with hook to easy styling component, a folder architecture ready and some configs to keep a codebase clean.

React Native Boilerplate Folder structure : src ├── assets │   ├── audios │   ├── fonts │   ├── icons │   └── images ├── components │   ├── Layout.tsx

Sep 1, 2022

Admob for React Native with powerful hooks and components

React Native Admob ⚠️ Please note, this package is under active development, which means it may be not stable to apply on production. Please use this

Jan 6, 2023

React Native wrapper around Indy SDK Java and Objective-C wrappers.

React Native Indy SDK React Native Indy SDK wrapper. Installation with npm: $ npm install indy-sdk-react-native --save with Yarn: $ yarn add indy-sdk-

Dec 5, 2022

This project is a simple messaging application made using React-Native framework, Gifted-Chat library and Firebase database

This project is a simple messaging application made using React-Native framework, Gifted-Chat library and Firebase database. The example that will be shown here focuses on the ability of two people to message each other in a chat room.

Jan 30, 2022

WebRTC for React-Native. Allows camera to zoom on the fly while streaming and change max bitrate.

WebRTC for React-Native. Allows camera to zoom on the fly while streaming and change max bitrate.

rn-webrtc This repo is forked from react-native-webrtc. A WebRTC module for React Native. Support iOS / macOS / Android. Support Video / Audio / Data

Aug 7, 2022

In this course, we will learn how to build a complete full-stack web application using Spring boot as backend and React (React Hooks) as frontend

In this course, we will learn how to build a complete full-stack web application using Spring boot as backend and React (React Hooks) as frontend. We will use MySQL database to store and retrieve the data.

Dec 22, 2022

A Jenkins plugin for inserting the commits changelog into the jenkins build environment.

commits-changelog-env-plugin A Jenkins plugin for inserting the commits changelog into the jenkins build environment. Jenkins插件, 在构建时通过将提交的更新列表插入 Jenk

Feb 16, 2022

The project is a simple vulnerability Demo environment written by SpringBoot

The project is a simple vulnerability Demo environment written by SpringBoot

The project is a simple vulnerability Demo environment written by SpringBoot. Here, I deliberately wrote a vulnerability environment where there are arbitrary file uploads, and then use the `scan` attribute in the loghack configuration file to cooperate with the logback vulnerability to implement RCE.

Dec 14, 2022
Comments
  • Prefixes of dependencies in package.json are missing in fresh install

    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)
    opened by Zeniten 2
  • post-install script runs and fails every time `yarn add` is run

    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!

    opened by loganrios 1
  • Adding a new JS component and restarting the REPL leads to: Can't find variable: cljs

    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)

    opened by Zeniten 0
Releases(v-0.2.1)
Owner
Joshua Miller
Joshua Miller
GitHub
With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any other file server

React Native In-App update With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any o

Nepein Andrey 7 Dec 21, 2022
Template to speed up your development in React Native projects.

React Native SpaceShip I created this template with the purpose of leaving the development environment already configured for use. ?? How to use it in

Lucas Augusto 3 Mar 23, 2022
This bare project template includes a minimal setup for using unimodules with React Native tvOS.

What This is a clone of expo's bare minimal template which includes a minimal setup for using unimodules with React Native. Additionally, this templat

Abdullah Musab Ceylan 4 Dec 25, 2022
React native wrapper for Jitsi Meet SDK Library that rely on the native view (Activity / ViewController)

react-native-jitsi-meet-sdk React native wrapper for Jitsi Meet SDK Library. This Library implements the Jitsi SDK with a native activity on the Andro

null 7 May 2, 2022
An awesome native wheel picker component for React Native.

⛏️ react-native-picky An awesome native wheel picker component for react-native. Features Supports multiple columns ✅ Supports looping ✅ Native Androi

null 28 Dec 4, 2022
JavaFX or Swing + jpackage + Maven template project for generating native desktop applications.

Java + Maven + GitHub Actions = Native Desktop Apps JavaFX or Swing + jpackage + Maven template project for generating native desktop applications. Go

Will Iverson 243 Dec 24, 2022
Render After Effects animations natively on Android and iOS, Web, and React Native

Lottie for Android, iOS, React Native, Web, and Windows Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations expo

Airbnb 33.5k Jan 3, 2023
Google App Engine Standard Environment Source Code for Java 8 and Java11

Google App Engine Standard Environment Source Code for Java 8 and Java11. This is a repository that contains the Java Source Code for Google App Engin

Google Cloud Platform 167 Jan 2, 2023
Implementation of Greedy Particle Swarm Optimization, HSGA and Hybrid(GA+PSO) for the purpose of Task Scheduling in cloud computing environment using CloudSim

Implementation of Greedy Particle Swarm Optimization, HSGA and Hybrid(GA+PSO) for the purpose of Task Scheduling in cloud computing environment using CloudSim

Yash Jain 5 Dec 18, 2022
[WIP] Springram is uber library for working with Telegram using Spring Framework and Spring Boot.

Springram Springram is a library for working with telegram using the spring framework and spring boot. This library gives you the ability to use contr

Max 6 Nov 1, 2022