Fork me on GitHub
Roman Liutikov14:03:59

@thheller Is there an API to trigger heads up display so that a warning from a build hook running in flush stage could be visible in a browser?


@roman01la no API but you can just put a warning into the build-state

Roman Liutikov15:03:05

oh that's nice!

thheller15:03:19 is the key of the data that the clients will get


it has a nested :sources and those have :warnings

👍 3
Clément Ronzon17:03:34

Hi gals and guys, I'm having an issue with a NPM dependency I am using: react-color ( I get a couple of errors and warnings when running karma on the produced code (`:karma-coverage`):

# karma start
10 03 2021 16:57:08.655:INFO [preprocessor.coverage]: coverage not included in reporters dots,progress
10 03 2021 16:57:08.881:WARN [karma]: No captured browser, open 
10 03 2021 16:57:08.973:INFO [karma-server]: Karma v5.2.3 server started at 
10 03 2021 16:57:08.973:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited
10 03 2021 16:57:08.976:INFO [launcher]: Starting browser ChromeHeadless
10 03 2021 16:57:10.131:INFO [Chrome Headless 88.0.4324.182 (Linux x86_64)]: Connected on socket pvu_uV4i-0kufk6WAAAA with id 85631944
10 03 2021 16:57:10.581:WARN [web-server]: 404: /base/target/cljs-runtime/module$node_modules$icons$material$UnfoldMoreHorizontalIcon.js?80c4489cd485acfeed1e160ad69825303e4ee8e4
10 03 2021 16:57:10.595:WARN [web-server]: 404: /base/target/cljs-runtime/module$node_modules$icons$material$CheckIcon.js?3b1f8ad831751a7b84b35493627cc64278e2c8c7
10 03 2021 16:57:10.765:WARN [web-server]: 404: /base/target/cljs-runtime/module$node_modules$icons$material$UnfoldMoreHorizontalIcon.js?80c4489cd485acfeed1e160ad69825303e4ee8e4
10 03 2021 16:57:10.800:WARN [web-server]: 404: /base/target/cljs-runtime/module$node_modules$icons$material$CheckIcon.js?3b1f8ad831751a7b84b35493627cc64278e2c8c7
Chrome Headless 88.0.4324.182 (Linux x86_64) WARN: 'shadow-cljs - failed to load', 'module$node_modules$react_color$lib$components$chrome$ChromeFields'
Chrome Headless 88.0.4324.182 (Linux x86_64) WARN: 'shadow-cljs - failed to load', 'module$node_modules$react_color$lib$components$chrome$ChromeFields'

Chrome Headless 88.0.4324.182 (Linux x86_64) WARN: 'shadow-cljs - failed to load', 'module$node_modules$react_color$lib$components$chrome$Chrome'
Chrome Headless 88.0.4324.182 (Linux x86_64) WARN: 'shadow-cljs - failed to load', 'module$node_modules$react_color$lib$components$chrome$Chrome'

Chrome Headless 88.0.4324.182 (Linux x86_64) WARN: 'shadow-cljs - failed to load', 'module$node_modules$react_color$lib$index'
Chrome Headless 88.0.4324.182 (Linux x86_64) WARN: 'shadow-cljs - failed to load', 'module$node_modules$react_color$lib$index'

Chrome Headless 88.0.4324.182 (Linux x86_64) ERROR
  Uncaught Module not provided: module$node_modules$$icons$material$UnfoldMoreHorizontalIcon
  at target/cljs-runtime/shadow.js.js:37:9
Chrome Headless 88.0.4324.182 (Linux x86_64) ERROR
  Uncaught Module not provided: module$node_modules$$icons$material$UnfoldMoreHorizontalIcon
  at target/cljs-runtime/shadow.js.js:37:9
I read some passed discussions on this channel, about adding :js-options {:ignore-asset-requires true}, others about adding :compiler-options {:output-feature-set :es8} but none solved my issue.


why do you get 404s? do the files exist on disk?

Clément Ronzon17:03:57

There are those: module$node_modules$$icons$material$UnfoldMoreHorizontalIcon.js module$node_modules$$icons$material$CheckIcon.js ...with that double $ which doesn't match the ones indicated in the 404 warnings.


the extra $$ are the replacements for the /@ in actual source path (which aren't valid in JS identifiers)


something in karma must be replacing $$ in $ for some reason?

Clément Ronzon17:03:58

Yeah, that must be it. I'm using a custom :karma-coverage target. With :karma it works just fine.


I'm trying to upgrade from shadow-cljs 2.10.6 to 2.11.22, and I see a number of warnings about not being able to infer the type of things. I've gone though and manually hinted most them as ^js , but I'm getting warnings that I don't know how to hint everytime I use a deftype that implements reagent.ratom.IReactiveAtom.

387 | 
388 | (deftype Foo [^:mutable amdoc ^:mutable clj-value ^:mutable snapshot meta validator ^:mutable watches ^:mutable callback]
        Cannot infer target type in expression (. (. Foo -prototype) -reagent$ratom$IReactiveAtom$)
 389 |   IAtom
 390 |   reagent.ratom.IReactiveAtom
 391 | 
 392 |   FooClassification
Any insight as to why this is happening now, and more importantly, how to resolve it?


As to "why now" I understand that at some point some defaults regarding inference changed, but I have no idea how to hint that deftype to make it leave me alone.


reagent.ratom.IReactiveAtom should be reagent.ratom/IReactiveAtom I think


you silence externs inference in that file by setting (set! *warn-on-infer* false)


or reverting the old behavior by setting :compiler-options {:infer-extern true}


Thank you @thheller! I in fact turned the warnings off, but I will see if fixing my reference resolves the error ... thanks again ! 🙂


Changing it to / instead of . didn't change anything ...


But I can just leave the warnings disabled, worst-case.


I think this particular warning will be fixed with the next CLJS release anyways. It originates from deep inside the compiler that shadow-cljs cannot easily modify.


Thank you for your assistance in any case!


is their a clj template for creating a shadow-cljs project targetting the browser? Just to give all the basics to get started, so I can get up and running with hot-reload, dev and test src paths, reloading css, a public folder for the html/css etc ? I'm trying to go through the docs but its so complicated and feels pretty impenetrable without an example to follow along with that I can see works and I can change and mess with.


it only handles basic project setup though. if you want more specific templates you need to select one for the libs you want to use


Its the paths and naming thats confusing me. From the quick start you called the project acme-app, but then the namespace is How did we end up with a frontend between acme and app ? The dots become slashes in the expected directory structure? Then in the edn you have

What happened to acme and app here? There just seems to be an awful lot of magic happening here based on strings and names that I'm not understanding. I think I just need to create a few examples using the npx create-cljs-project with different names and see what gets created. Thanks!


the project is called acme-app. that is literally only the directory name the files are in. it has nothing to do with what the project does. The name I picked because naming is hard but I tried to explain why I did


in many other CLJS examples you'll see a bunch of foo.core namespaces. I personally don't like .core names so I used something else. its just a name, use what makes sense for you.


So I've created a project called learn-reframe in a learn-reframe folder.

├── learn-reframe.iml
├── node_modules
├── package.json
├── package-lock.json
├── pom.xml
├── shadow-cljs.edn
└── src
    └─ main
    └─ test
For now I don't care about names so a random prefix will do, exfn So I create
With namespace
(ns )
So I my edn should look like this:
  {:target :browser
   :modules {:main {:init-fn }}}}}
I'm not sure what my :??? would be :exfn or :app?


Just :app I think?


also just a name. up to you. :app is fine


that is the build-id used later in the shadow-cljs watch app etc commands


ok, think i get it now! Thank you for your help. I really appreciate it!

👍 3

if i'm using :npm-module and bundling that into a webpack frontend, is it possible to get a cljs repl connected to the webpacked build? Does shadow emit all of the necessary bridge stuff during a watch such that this is a reasonable thing to expect?


@dpsutton yes but you need to manually require the shadow.cljs.devtools.client.browser ns from the JS side of things. so if (process.env.NODE_ENV === "development") { require("wherever/shadow.cljs.devtools.client.browser.js") }


heh, and can't put that behind a flag in a cljs file and sneak it in that way?


but the REPL has some limits in what it can do since webpack post-processes the code normally but not the code loaded over the REPL


you can try 😉


oh, where should that live? process.env.NODE_ENV? I'm quite the beginner with webpack stuff. presumably that's in the webpack config? i'm surprised to see a require that uses that


well its a pattern that is commonly setup in webpack


its that not already configured then that wouldn't work either


well it might actually be included by default nowadays. not actually sure.


i see. i'll give that a shot. thanks so much @thheller


FWIW (when (identical? js/process.env.NODE_ENV "development") (js/require "./shadow.cljs.devtools.client.browser.js")) should work


the trouble is that shadow-cljs doesn't have a clearly defined entry namespace for :npm-module. so it cannot inject that for you before loading that ns