That keyword doesn’t seem like it could possibly work

I think you might want [motion/div {:animate (clj->js {:scale 0.5})} "Hello"] or even [motion/motion.div {:animate (clj->js {:scale 0.5})} "Hello"]

But not having the setup in front of me makes it difficult

One thing you can try is to inspect the object motion in the browser console and see what attributes are on there to call into

in addition to @royalaid answer, there’s a good summary of programmatic vs data field access by David Nolen

@grav turn on externs inference and add ^js tags for things it warns about. see https://shadow-cljs.github.io/docs/UsersGuide.html#infer-externs

@bravilogy reagent interop with JS component is done via [:> (. motion -div) ...]. the slash notation (eg. motion/div) only works for actual namespace aliases, so things using :as in :require (eg. (:require ["thing" :as alias])) not :refer

I’d like to try out the Patching Libraries feature mentioned here: https://shadow-cljs.github.io/docs/UsersGuide.html#_patching_libraries But I don’t see an example of how to do it. I’d like to patch com.fulcrologic.fulcro-native.alpha.components.

My current src looks like

src
  main
    app
      ...

Would I put com/fulcrologic/fulcro_native/alpha/components next to main or app?

you put it so it matches the filename on the classpath

so assuming your source path is src/main then src/main/com/fulcro....

Okay, makes sense! I’ll try that out. Thanks

A great feature btw

I was so confused on how to do something like yarn link in the CLJS world

Works! Thanks again

Hi! We might have run into a dashes-vs-underscores bug. The documentation states that we can access CLJS ns's on consumed JS files using a goog: prefix (i.e. import something from "goog:namespace") When we use such a JS file from Shadow and the CLJS ns contains dashes, things break.

;;;;;;;;;;;
;; company/name_with_dashes.cljs

(ns company.name-with-dashes)
(def ^:export Thing '...)

;;;;;;;;;;;
;; company/folder-with-dashes/helper.js
import {Thing} from 'goog:company.name-with-dashes'

;;;;;;;;;;;
;; company/component.cljs

(ns company.component
  (:require ["company/folder-with-dashes/helper.js" :as helper]))

shadow-cljs - failed to load module$node_modules$company$folder_with_dashes$helper
shadow.js.jsRequire @ js.js:71

failed to load company.component.js ReferenceError: with is not defined
    at Object.shadow$provide.module$node_modules$company$folder_with_dashes$helper (helper.js:xx)
    at Object.shadow.js.jsRequire (js.js:63)
    at Object.shadow.js.require (js.js:97)
    at eval (/js/cljs-runtime/company.component.js:xx)
    at eval (<anonymous>)
    at Object.goog.globalEval (test.js:827)
    at Object.env.evalLoad (test.js:2174)
    at test.js:2373
env.evalLoad @ test.js:2176

...
var _immutable = require("module$node_modules$immutable$dist$immutable"),
_googCompany = global.company.name-with-dashes
                              ;; ^ can't have dashes on JS symbol, right?

maybe try _ instead of -? otherwise rename ...

Is it expected that when I reload a ReactNative app in the emulator while connected to the app's repl that the repl will lose connection to the app and an npx react-native run-android will be required to get the repl back? Here's the workflow that I'm using.

bash$ npx react-native run-android
emacsλ (inf-clojure-connect "localhost" 5555)
shadow.cljs => (shadow/repl :app)
cljs.user => (+ 2 2)
4
;; Make some code changes and reload the app in the emulator to render them.
cljs.user => (+ 2 2)
;; Long delay
Timeout while waiting for REPL result.

its a bug in react-native android. it keeps the old websocket connections open so shadow-cljs can't tell that they are gone

you can try (shadow/repl-runtime-clear) in the CLJ REPL

and then (shadow/repl :app) again

(shadow/repl-runtimes) should list all connected runtimes

why are you reloading the app though?

:thumbsup: That worked. Thanks. Saved me a lot of time troubleshooting.

hot-reload should take care of things?

Would hot-reload make a difference? Wouldn't that cause me to get into this disconnected state every time I save a file rather than just when I manually reload?

not the react-native hot-reload or live-reload

the one shadow-cljs provides

https://github.com/PEZ/rn-rf-shadow

or do you want an actual app reload?

Maybe I don't need to reload as often as I was. Most of my reloads are when I get a runtime error and the screen pops up that says "esc to dismiss" and "rr to reload" and I just hit "rr" to reload.

But with shadow's autobuilding/live-reloading maybe I could just make the code change, save the file, and hit "esc"?

hmm I actually don't know

I don't do react-native development myself

no idea if it can recover from errors

Looks like it theoretically might be able to, but it's not working for me. https://facebook.github.io/react-native/docs/fast-refresh If you edit a module that only exports React component(s), Fast Refresh will update the code only for that module, and re-render your component. You can edit anything in that file, including styles, rendering logic, event handlers, or effects.

@thheller how should a build hook print to stdout? This appears to print nothing, but works!

(defn exec [cmd]
  (let [{:keys [exit out err]} (apply sh cmd)]
    (if (zero? exit)
      (when-not (str/blank? out)
        (println out))
      (println err))))

(defn nexe
  {:shadow.build/stage :flush}
  [state src dest]
  (case (:shadow.build/mode state)
    :release
    (let [cmd ["nexe" "--output" dest src]]
      (print (fmt "Executing: %s" cmd))
      (exec cmd))

    true)
  state)

Nevermind, it does print... Needed to restart the shadow-cljs server

@ericihli fast-refresh doesn't work for CLJS. if you've never seen the hot-reload from CLJS in action I'd suggest looking at an example that has it built-in

Thanks. I'm trying to spin up the app from the link you pasted above right now. I'll dig through that code before going back to my own project again.

https://github.com/thheller/reagent-react-native

another example I made with just react-native, no expo

I'm trying to do the bare minimum to run some CLJS code in a REPL for a library I'm developing. Is there a good example project I can crib from for configuring using deps.edn and Atom/chlorine?

@dave.dixon shadow-cljs node-repl or shadow-cljs browser-repl

no clue how to connect to those using atom/chlorine though

regular nrepl should work. when in CLJ you can select them via :node-repl or :browser-repl build ids

however that works in atom ..

Ah hah. Zeroing in on my hot-reload/repl disconnect woes. I see in your example app you have a way of storing a reference to the root and you just swap it out in the after-load handler.

(defonce root-ref (atom nil))
(defonce root-component-ref (atom nil))
(defn render-root [root]
  (let [first-call? (nil? @root-ref)]
    (reset! root-ref root)
    ;; ...

(def cnt (r/atom 0))
(defn reloader [] @cnt [core/app-root])
;; Do not delete, root-el is used by the figwheel-bridge.js
(def root-el (r/as-element [reloader]))