Fork me on GitHub
#shadow-cljs
<
2018-02-26
>
sparkofreason02:02:31

Just getting started taking shadow-cljs for a test spin. Hot reload doesn't seem to be working, though the when I change the code it does recompile and show a warning on the HUD. Any thoughts on how to diagnose the issue? I'm guessing I just misconfigured something.

tianshu02:02:47

which :target you use?

tianshu02:02:58

@dave.dixon I think you need to provide a function for :after-load and :preloads [shadow.cljs.devtools.client.hud] in :devtools.

tianshu02:02:06

{:source-paths ["src"]
 :dependencies []
 :builds {:browser {:target :browser
                    :output-dir "target/browser"
                    :modules {:main {:entries [app.main]}}

                    :devtools {:after-load app.main/reload!
                               :preloads [shadow.cljs.devtools.client.hud]
                               :http-root "public"
                               :http-port 8080}}}}
I use this as minimal setup and it works

sparkofreason02:02:55

Yep. that did it, thanks. Not sure why that should be, seems like it should hot reload regardless whether I specify an explicit :after-reload, but whatever, it works.

justinlee03:02:07

I think shadow has a kind of bias against magic automatic stuff.

sparkofreason14:02:36

Thanks. I managed to read everything but the "TIP" at the end of section 5.2.3 it seems. Maybe consider moving that to the beginning, because I read 5.2.2 as "shadow-cljs watch build-id" was all you needed to do to enable hot reload.

thheller09:02:50

@dave.dixon hot-reload must be enabled by either a callback or :autoload true.

tianshu09:02:39

@thheller is it possible to use repl with :npm-module ?

thheller09:02:49

I guess it could be enabled by default though

thheller09:02:06

@doglooksgood yes and no. depends on the kind of post-processing that is done

thheller09:02:11

when just running in node yes

thheller09:02:24

when running in some other packager ... maybe but unlikely

tianshu09:02:25

I want to use repl with react-native, how can I investigate what's going wrong?

thheller09:02:02

with :npm-module there is no cleary defined entry namespace

thheller09:02:10

so you must manually load the repl code

thheller09:02:00

can you show me the react-native code?

thheller09:02:07

then I can tell you how to load the repl code

thheller09:02:45

I forgot how the non create-react-native-app stuff looks

tianshu09:02:50

my step is create project with react-native init Hello then cd Hello, run shadow-cljs init. edit shadow-cljs.edn to

...
:builds 
{:app {:target :npm-module
      :output-dir "js/"}}
And require js/hello.core.js in App.js.

tianshu09:02:19

I can make a repo later

thheller09:02:29

try import "js/shadow.cljs.devtools.client.node" in App.js

thheller09:02:38

ah no wait its not node

thheller09:02:50

import "js/shadow.cljs.devtools.client.browser"

thheller09:02:05

might need to set :runtime :browser in your build config

tianshu09:02:47

how can I specify where it connect to? I think JS runtime(on mobile) and shadow-cljs(on MBP) run on different IPs.

tianshu09:02:57

is it a problem?

thheller09:02:49

doesn't have to be a proxy, can just be your machine

tianshu09:02:27

okay, I'll have a try tonight

tianshu09:02:32

if my ip is 192.168.1.151, what is the :devtools-url?

tianshu10:02:36

@thheller It works, expect one problem. since there's no document in react native, there will be a error for Can't find variable: document. But after I dismiss this error, it works.

tianshu10:02:00

comment the body of script-eval it works and no error

tianshu11:02:21

I want to make :react-native an :target 🙃

thheller12:02:07

the most helpful thing at this point would be a basic demo project for react-native

thheller12:02:28

ie. not create-react-native-app

thheller12:02:49

but yes there should be a :target :react-native

thheller12:02:13

just thinking that the best way about this would be to completely bypass the react-native packager

thheller12:02:40

but I don't know how possible that is

thheller12:02:56

https://github.com/callstack/haul seems to do it but I haven't looked into how

tianshu12:02:35

@thheller I think the hmr works as expectef without any problem, and the next two things are source map and repl. by tweak a little the repl works, there's no need to introduce additional tools.

thheller12:02:22

well. source maps probably do not work because files are processed by the react packager

thheller12:02:52

I don't want to introduce haul. I want to do what haul does.

thheller12:02:11

so we don't need the react packager at all

thheller12:02:31

it will most likely just get in the way

tianshu12:02:51

that will be a huge work to do. i think we can do now is just having a condition to ensure no error when there's no js/document.

tianshu12:02:57

it's pretty simple to do.

thheller12:02:30

the point is that shadow.cljs.devtools.client.browser is meant for the browser. react-native is not a browser.

thheller12:02:28

I will not start adding some conditional hacks to make it work but then having to think about every potential future change because it might not work

thheller12:02:00

I much rather write a shadow.cljs.devtools.client.react-native version. that uses every capability react-native has.

thheller12:02:14

these things are super simple to write so its not a big deal at all.

tianshu12:02:41

add a new client is good idea

tianshu12:02:42

another thing is auto set :devtools-url

thheller12:02:10

yeah :target :react-native could do that

tianshu12:02:21

I saw there's a path like hello/core.cljs in source map, is that a relative path? in chrome, the src is not include in souces, there're node_modules and js(output dir). do you have any thought on this?

thheller12:02:13

source maps include sourcesContent so they don't need to look at other files

thheller12:02:36

don't know what you mean by not included in chrome?

tianshu13:02:42

i mean my source path is src, but in chrome Sources section, there're only two folder: node_modules and js.

tianshu13:02:00

i want to create a repo for this.

thheller13:02:14

you mean this?

tianshu13:02:53

yes, there's no cljs file in my case

tianshu13:02:34

i think the path in source path may be wrong, in my case it is hello/core.cljs, i think it shoud be ../src/hello/core.cljs

thheller13:02:04

the path does not map to a filesystem

thheller13:02:21

../src/.. would definitely be incorrect

thheller13:02:52

what are you using the Sources panel for?

tianshu13:02:35

I think source map is not necessary

tianshu13:02:27

repl + hmr is enough

tianshu13:02:57

I want to introduce react-native + shadow-cljs to my workmates. I think this is a awesome solution. the re-natal is really complex, at least it looks complex.

thheller13:02:45

never used re-natal but I think its the most commonly used tool for cljs+react-native

thheller13:02:51

so it probably does a bunch of other useful stuff

tianshu13:02:05

it does a lot of shim job, because you can't use figwheel with react-native in a trivial way.

tianshu13:02:55

source map + repl + hot load, re-natal provide these

lilactown17:02:19

I opened up an issue w.r.t. windows + docker + volumes 😬

thheller17:02:07

just answered

kenny19:02:37

Trying out shadow-cljs for the first time and really loving it over Boot's CLJS stuff. Running into a warning using re-frame-10x:

11:41:42 CLJS | ------ WARNING #1 --------------------------------------------------------------
11:41:42 CLJS |  File: day8/re_frame_10x/view/parts.cljs:26:28
11:41:42 CLJS | --------------------------------------------------------------------------------
11:41:42 CLJS |   23 |    :children [[:h1 "Events"]
11:41:42 CLJS |   24 |               (render-registered re-frame.events/kind)
11:41:42 CLJS |   25 |               [:h1 "Subscriptions"]
11:41:42 CLJS |   26 |               (render-subs re-frame.subs/kind)
11:41:42 CLJS | ----------------------------------^---------------------------------------------
11:41:42 CLJS |  Use of undeclared Var re-frame.subs/kind
Has anyone else ran into this? It doesn't make sense given re-frame is in my :dependencies.

kenny19:02:12

Only happens on initial compile.

kenny19:02:30

Everything works as expected after though.

lilactown20:02:07

:thinking_face: that is strange. I wonder if it's a compilation order thing

thheller21:02:33

nah shadow-cljs is just stricter than other tools and the file has no require for re-frame.subs so it complains

thheller21:02:44

guess I shouldn't be so strict for library code that you can't fix

thheller21:02:28

without the require it might break due to parallel compilation though

kenny22:02:32

I'll submit a PR to fix the issue.

kenny22:02:55

(in re-frame-10x)

kenny22:02:53

Is anyone using devcards with shadow-cljs? I can't get any of my cards to appear until I load the namespace in the REPL. I am requiring me devcards namespace and have set :devcards to true in my :dev :compiler-options.

kenny23:02:56

Eh, just realized all we were using devcards for was card styling to demo our components. I just rolled our own version instead.

mjmeintjes23:02:55

I've used devcards successfully with shadow-cljs. I just created a separate build config for devcards, and a separate entrypoint namespace, and it worked pretty well.