clojurescript 2019-07-07

manandearth14:07:42

Trying to get my head around this... I am missing some understanding: I have an app with Pedestal managing the routes. all routes are hiccup to html via ring (no JS) but one which is a cljs dashboard, so I have in my project.clj(lein) cljsbuild and figwheel configured just for that one page. Now I'd like to add some js in a couple of divs in the other routes. Can I compile more than just the app.js so as to require a second and third unique .getElementById...? What is the right way to build this?

aisamu00:07:07

IIUC, you need builds with different main functions/entrypoints. In the old figwheel/lein-cljsbuild/shadow-cljs, you need one build for each entrypoint. With fighweel-main you can use extra-mains

manandearth06:07:58

That looks like it could work @U1UQEM078! thanks.

manandearth14:07:15

please tell me if this is more of a lein or something else question.

oconn16:07:14

Wondering if someone could help identify an issue I’m having with advanced compilation and foreign-libs. I’m using webpack to bundle my deps together and it’s working in development. When I compile the production build (advanced or simple) - 3 of the 5 deps are undefined when logging them in devtools. I created a gist with the relevant config files. https://gist.github.com/oconn/797dd0b8510fd543b652ce778c1dd7ec The three deps that are returning undefined are jss, jss-preset-default, and react-transition-group. When running cat prod-main.js | grep ReactTransitionGroup the following is output;

var $demo$containers$demos$messaging_demo$global$0module$0react_transition_group$$ = $goog$global$$.ReactTransitionGroup;
console.log($goog$global$$.React, $demo$core$global$0module$0react_dom$$, $goog$global$$.jss, $goog$global$$.jssPresetDefault, $goog$global$$.ReactTransitionGroup);

And then cat prod-main.js | grep ReactTransitionGroup

var $demo$containers$demos$messaging_demo$global$0module$0react_transition_group$$ = $goog$global$$.ReactTransitionGroup;
console.log($goog$global$$.React, $demo$core$global$0module$0react_dom$$, $goog$global$$.jss, $goog$global$$.jssPresetDefault, $goog$global$$.ReactTransitionGroup);

Any helpful tips tracking down the issue would be much appreciated.

lilactown16:07:33

I’m not as familiar with how foreign-libs works, but could you look for how e.g. $goog$global$$.jss is defined in each bundle?

oconn16:07:26

So cat prod-main.js | grep $goog$global$$.jss does not match anything is that to be expected? I’m not very familiar with how the closure compiler works

lilactown16:07:10

do you see it in dev-main.js?

oconn16:07:22

I do not

oconn16:07:43

But it is present on the window

lilactown16:07:09

do you see your webpack bundled code getting loaded at all?

oconn16:07:16

So cat target/public/cljs-out/dev/cljs_deps.js| grep jss shows

goog.addDependency("../dist/index.bundle.js", ['jss', 'jss_preset_default', 'react', 'react_dom', 'react_transition_group'], [], {'foreign-lib': true});
goog.addDependency("../hx_comp/core.js", ['hx_comp.core'], ['hx_comp.styles.shadows', 'goog.color', 'jss', 'cljs.core', 'jss_preset_default', 'goog.object', 'hx_comp.styles.resets', 'hx_comp.styles.typography', 'hx_comp.styles.media_queries', 'hx_comp.styles.borders', 'hx_comp.styles.radius', 'hx_comp.styles.spacing']);
goog.addDependency("../demo/core.js", ['demo.core'], ['demo.events.core', 'jss', 'react', 'cljs.core', 'demo.router.core', 'jss_preset_default', 'demo.components.navbar', 'hx_comp.core', 'demo.constants', 'hx_frame.core', 'react_transition_group', 'demo.subscriptions.core', 'demo.db.core', 'hx.react', 'react_dom', 'demo.styles.core']);

oconn16:07:46

index.bundle.js is the generated file output by webpack

lilactown16:07:27

yeah. I’m actually unsurprised that it’s not in your dev main

lilactown16:07:51

I guess CLJS / figwheel would load it separately

lilactown16:07:57

it’s strange that it’s not in your prod build

lilactown16:07:00

strange ask, but could you try setting :inferred-externs to true?

lilactown16:07:18

I can’t imagine that’s the issue, but it does align with the instructions here: https://clojurescript.org/guides/webpack#using-your-foreign-lib