shadow-cljs 2017-11-15 | Slack Archive

cool! thanks!

I wonder why the devtools reloaded my code but my page function was not applied. I did almostly the same as in a figwheel project. The only difference is that, after adding the compiled js file as a <script> tag, I add another <script> tag, in which the app.core.some_init() function is called. It seems the core.cljs file re-runs after shadow-cljs watch app tells the page(because a (.log js/console "ddd") runs), but I doubt the page does not know the app.core.some_init() function was called, so everything under the some_init function is not applied. Is that right? If so, how to make things under some_init function applied?

thheller07:11:57

@cmal I recommend this kind of setup: https://github.com/shadow-cljs/quickstart-browser/blob/master/src/starter/browser.cljs

thheller07:11:22

init is the fn called from HTML. it is only called ONCE ever.

cmal07:11:25

Morning @thheller. You are here.

thheller07:11:50

then :before-load will call stop, then load the code and :after-load call the start

thheller07:11:00

so if you need code to run after ever reload put it in start

thheller07:11:35

morning 😉

cmal07:11:45

Must I use exactly the name init as the function exported?

thheller07:11:58

no, the names are all up to you

thheller07:11:09

https://github.com/shadow-cljs/quickstart-browser/blob/master/public/index.html#L9

thheller07:11:55

I just use this setup because sometimes you have code that can’t be live reloaded

thheller07:11:04

that is done in init, so its only done once

thheller07:11:17

https://github.com/shadow-cljs/quickstart-browser/blob/master/shadow-cljs.edn#L18-L21

thheller07:11:45

don’t need to use both callbacks. :after-load is enough if you just want something to run after loading code

thheller07:11:56

I think thats on-jsreload in figwheel

thheller07:11:51

you can skip init as well if you don’t need it

thheller07:11:55

just call start directly

cmal07:11:23

I found if I change the function page, the figwheel project get reloaded well, but the shadow-cljs project also reloaded, but new page function not applied.

thheller07:11:52

you need to call it somewhere?

cmal07:11:20

yes, I add the js to a <script> tag and called app.core.init()

cmal07:11:43

if I add a (.log js/console "bla") that runs.

cmal07:11:56

But If I change page function, no effect.

thheller07:11:59

so init is the fn that should run after loading code?

thheller07:11:04

:after-load app.core/init

cmal07:11:10

Ahh

cmal07:11:25

Maybe that is the reason.

thheller07:11:58

dunno what is different in your figwheel code, if you have an example I can take a look what it does differently

cmal07:11:15

I run lein new luminus app +http-kit +re-frame to create a figwheel project.

cmal07:11:29

But my project is a require.js project.

cmal07:11:08

the luminus project just {% script "/js/app.js" %} in html template to apply the compiled code.

thheller07:11:29

> :figwheel {:on-jsload "app.core/mount-components"}

cmal07:11:30

In my project, just did this:

cmal07:11:35

<!DOCTYPE html>
<html>
    <head>
        <% include ../common/meta.ejs %>
        <link href="/css/icomoon/style.css" rel="stylesheet">
        <% include ../common/autoRem.min.ejs %>
        <% include ../common/zhugeio.ejs %>
        <title><%- title %></title>
    </head>
    <body>

        <div id="app"></div>
        <script src="/doumi/js/doumi.js"></script>
        <script>
         doumi.core.annc_init();
        </script>
    </body>
</html>

cmal07:11:46

Wahh.

cmal07:11:01

Got it.

thheller07:11:13

so :after-load app.core/mount-components

cmal07:11:24

OK. Thank you very much!

tiensonqin10:11:30

Hi, guys I created a shadow-cljs template to make beginners easier. https://github.com/tiensonqin/shadow-cljs-template

thheller11:11:10

@tiensonqin cool!

thheller11:11:05

@tiensonqin how come you removed the :before-load stop call?

tiensonqin11:11:13

@thheller I don't mean to, will add it later.

thheller11:11:42

made a PR with some other tweaks

Jon15:11:31

:builds {:browser {:target :browser
                    :output-dir "target/browser"
                    :asset-path "/browser"
                    :modules {:main {:entries [app.main]
                                     :depends-on #{:lib}}
                              :lib {:entries [respo.core respo.macros
                                              respo.comp.inspect]}}
                    :devtools {:after-load app.main/reload!
                               :preloads [shadow.cljs.devtools.client.hud]
                               :http-root "target"
                               :http-port 8080}
                    :release {:output-dir "dist/"
                              :module-hash-names 8
                              :build-options {:manifest-name "cljs-manifest.json"}}}
          :bootstrap-support {:target :bootstrap
                              :output-dir "target/browser/bootstrap"
                              :entries [cljs.js]
                              :macros []}

thheller15:11:54

thheller15:11:17

thought I fixed that

thheller15:11:40

the :main module must have shadow.cljs.bootstrap.env in the :entries

thheller15:11:08

it is supposed to add that automatically though

Jon15:11:12

[:bootstrap-support] Build failure:
The required namespace "cljs.env.macros" is not available, it was required by "cljs/js$macros.cljc".

Jon15:11:19

is it related?

thheller15:11:12

yeah you can’t bootstrap that

thheller15:11:26

:entries [cljs.js] thats not how this works

thheller15:11:07

cljs.js you use in the :browser build, the :boostrap build only includes namespaces that you want to use with the self-hosted compiler

Jon15:11:25

I think it's working after I added shadow.cljs.bootstrap.env manually

Jon15:11:39

my mistake, it should be in :exclude...

thheller16:11:28

:entries should be something like reagent.core or so. namespaces you are going to need when evaling code

thheller16:11:44

cljs.core is enough if you don’t want any other libraries

thheller16:11:41

https://github.com/mhuebert/shadow-bootstrap-example

thheller16:11:52

you can include cljs.js with the proper exclude yes

Jon16:11:20

what does cljs.js do?

thheller16:11:18

its what you use to use the bootstrapped compiler

Jon16:11:06

wow

Jon16:11:19

didn't notice from the name

thheller16:11:04

https://github.com/thheller/shadow-cljs/blob/master/src/dev/demo/selfhost/simple.cljs might help

Jon16:11:46

I read the you blog about bootstrap

Jon16:11:15

cljs.core.apply.cljs$core$IFn$_invoke$arity$2(app.render.main_BANG_, process.argv.slice(2));

Jon16:11:27

{ env: { NODE_ENV: 'development' }, browser: false }

Jon16:11:02

=>> node target/ssr.js
Reading from entry/main.css
{ env: { NODE_ENV: 'development' }, browser: false }
SHADOW import error /Users/chen/repo/cirru/cirru.org/target/shadow-cljs/builds/ssr/dev/out/cljs-runtime/shadow.module.main.append.js

/Users/chen/repo/cirru/cirru.org/target/shadow-cljs/builds/ssr/dev/out/cljs-runtime/shadow.module.main.append.js:3
cljs.core.apply.cljs$core$IFn$_invoke$arity$2(app.render.main_BANG_, process.argv.slice(2));
                                                                                  ^
TypeError: Cannot read property 'slice' of undefined
    at Object.<anonymous> (/Users/chen/repo/cirru/cirru.org/target/shadow-cljs/builds/ssr/dev/out/cljs-runtime/shadow.module.main.append.js:3:83)

Jon16:11:27

any clue how process is overwritten?

thheller16:11:28

hmm

thheller16:11:38

https://github.com/thheller/shadow-cljs/blob/master/src/main/shadow/js.js does this

thheller16:11:53

but it isn’t supposed to overwrite anything, just add

thheller16:11:45

hmm no wait .. its not even supposed to be included for node builds?

thheller16:11:04

wonder how it gets included