Clojurians Log v2

@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

oh that's nice!

:shadow.build/build-info is the key of the data that the clients will get

it has a nested :sources and those have :warnings

Hi gals and guys, I'm having an issue with a NPM dependency I am using: react-color (https://www.npmjs.com/package/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 <http://localhost:9876/>
10 03 2021 16:57:08.973:INFO [karma-server]: Karma v5.2.3 server started at <http://localhost:9876/>
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

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

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?

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

Thank you @thheller

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

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.

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.

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?

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}

@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

did you go through https://github.com/thheller/shadow-cljs#quick-start?

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 <http://acme.frontend.app|acme.frontend.app> 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

:builds
{:frontend
 ...

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 <http://acme.frontend.app|acme.frontend.app> 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

src\main\exfn\app.cljs

(ns <http://exfn.app|exfn.app>)

{...
 :builds
 {:???
  {:target :browser
   :modules {:main {:init-fn <http://exfn.app/init|exfn.app/init>}}}}}

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!