Fork me on GitHub
#shadow-cljs
<
2019-08-29
>
Karol Wójcik00:08:49

I'm trying to connect to the repl in react-native-runtime. The tool I'm using is react-native-cli. Here is the shadow-cljs.edn:

;; shadow-cljs configuration
{:source-paths
 ["src"]

 :dependencies
 [[binaryage/devtools "0.9.10" :scope "test"]]

 :builds
 {:app
  {:target     :npm-module
   :runtime    :react-native
   :output-dir "target"
   :compiler-options {:infer-externs :auto}
   :devtools {:autoload true
              :async-require true}}}}
index.js
/**
 * @format
 */

if (__DEV__) {
    require('./target/shadow.cljs.devtools.client.react_native');
    require('./target/forg.dev.devtools').install();
}

import { AppRegistry } from 'react-native';
import { Application } from './target/forg.root';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => Application);

Karol Wójcik00:08:52

Anyone a clue how to fix this?

thheller07:08:26

@karol.wojcik don't use :npm-module. use :react-native

Karol Wójcik07:08:58

@thheller Thank you very much. I think I'm very close to the working solution. Here is the list of steps I'm doing to have REPL/Hot module reloading enabled. Ok I'll post the update since i found partially working solution. 1. git clone https://github.com/FieryCod/forg 2. yarn shadow-cljs watch app 3. ln target/index.js index.js 4. Run emulator 5. jack-in & run yarn start What partially works: REPL - successfully connected but every command results in timeout What does not work at all: Hot reloading - change in cljs file indeed refreshes the application but content remains the same

Karol Wójcik09:08:05

You are a god! Indeed after using this snippet the hot-reloading works like a charm ❤️ Thank you @thheller. What about the REPL? is it doable?

thheller11:08:30

should just work?

thheller11:08:46

just some limitations in adding new JS requires and so on

Karol Wójcik11:08:59

Ok I found an issue. I had nrepl port setup in .edn. @thheller I know that you hear it almost everyday, but I want to thank you for all your effort you put in development & maintenance & support of shadow-cljs. It's pleasure to use it!! You did great job!!

thheller11:08:15

thanks 🙂

thheller07:08:20

need this pattern to have live-reload

vinurs07:08:33

i use shadow-cljs check app, this result the following warning,

vinurs07:08:43

and require [“react-native-navigation” :as RNN :refer [Navigation]]

vinurs07:08:54

what’s the warning meaning?

thheller07:08:24

that check isn't very reliable 😉

thheller07:08:45

it can't properly work with code it doesn't see

vinurs07:08:04

i meet with a problem, when i run shadow-cljs compile app, the my app works ok, but if i use shadow-cljs release app, it outputs error

thheller07:08:06

yeah sounds like an externs problem

thheller07:08:14

try running shadow-cljs release app --pseudo-names

thheller07:08:49

definitely enable :compiler-options {:infer-externs :auto}

vinurs07:08:44

shadow-cljs release app --pseudo-names, another error

thheller07:08:29

@haiyuan.vinurs yes that means that you need externs for .props since it is getting renamed to .$props$ or .Ad in actual release

thheller07:08:41

so you create externs/app.txt and add one line with props

vinurs07:08:10

(defn register
  ([key]
   (register key nil))
  ([key options]
   (let [get-props
         (fn [this]
           {::key key
            ::id (-> this .-state .-id)
            :component-id (-> this .-props .-componentId)})

         wrapper
         (crc #js
              {:displayName
                (str key "Wrapper")

                :getInitialState
                (let [id (swap! id-seq-ref inc)]
                  (fn [] #js {:key key
                              :id id}))

                :componentDidMount
                (fn []
                  (this-as
                   ^js this

                   (bind-component this)
                   (swap! mounted-ref
                          assoc-in [key (-> this .-state .-id)] this)))

                :componentWillUnmount
                (fn []
                  (this-as
                   ^js this

                   (swap! mounted-ref update key dissoc (-> this .-state .-id))))


                ;; FIXME: forward other lifecycles the same way
                :navigationButtonPressed
                (fn [params]
                  (this-as
                   ^js this

                   (let [{:keys [navigation-button-pressed]}
                         (get @screens-ref key)

                         props
                         (get-props this)]

                     (js/console.log "navigationButtonPressed"
                                     key
                                     (boolean navigation-button-pressed)
                                     (pr-str props))
                     (when navigation-button-pressed
                       (navigation-button-pressed
                        (js->clj params :keywordize-keys true)
                        props)))))

                :componentDidAppear
                (fn []
                  (this-as
                   ^js this

                   (js/console.log "componentDidAppear" key)))

                :componentDidDisappear
                (fn []
                  (this-as
                   ^js this

                   (js/console.log "componentDidDisappear" key)))

                :render
                (fn []
                  (this-as
                   ^js this

                   (let [{:keys [render]}
                         (get @screens-ref key)

                         props
                         (get-props this)]

                     (js/console.log "render" key (pr-str props))
                     (-> (render props)
                         (r/as-element)))))})]

     (when (not (nil? options))
       (set! (.-options wrapper)
             (fn [passProps] (clj->js options))))
     (register-component key (fn [] wrapper)))))

vinurs07:08:28

this is a function for wix react-native-navigation

vinurs07:08:14

i should modify this function?

vinurs07:08:11

--------------------------------------------------------------------------------
  27 |          (fn [this]
  28 |            {::key key
  29 |             ::id (-> this .-state .-id)
  30 |             :component-id (-> this .-props .-componentId)})
---------------------------------^----------------------------------------------
 Cannot infer target type in expression (. (.-props this) -componentId)
--------------------------------------------------------------------------------
  31 |
  32 |          wrapper
  33 |          (crc #js
  34 |               {:displayName
--------------------------------------------------------------------------------

vinurs07:08:20

check shows this

thheller07:08:41

yeah that is missing a hint

thheller07:08:46

(fn [^js this]

joshkh10:08:14

i recently migrated a reagent based figwheel project to shadow-cljs. shadow-cljs is definitely watching my src directory, recompiling my code, popping up syntax errors in the browser etc. but for some reason my ^:dev/after-load fn isn't being called, and so my reagent/react components aren't reloaded. any hints for debugging?

(defn ^:dev/after-load re-render
  "Re-render the app when figwheel reloads"
  []
  (mount-root))
i've also tried explicitly setting {:devtools {:after-load myapp.re-render in my shadow-cljs.edn file with no luck.

thheller11:08:45

@joshkh what does the browser console say?

joshkh17:08:14

apologies for my late reply. i ended up clearing my .shadow-cljs folder when switching some local branches around and then it worked? 🙂

jiangts22:08:00

are there any examples of how to use shadow for a chrome extension? Couldn’t seem to find it in the docs

jiangts22:08:13

particularly, looking for an example for content scripts, since they cannot load more scripts

hlolli22:08:36

some time ago I did chrome extension target, but I doubt it still works haven't worked with chrome-extensions for a while now. https://gist.github.com/hlolli/265b9183566a4c5829d7ee355e3d0998