Fork me on GitHub
#shadow-cljs
<
2021-03-10
>
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?

thheller15:03:12

@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

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

thheller15:03:40

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 (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 
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.

thheller17:03:26

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.

thheller17:03:35

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

thheller17:03:00

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.

pmooser18:03:58

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?

pmooser18:03:42

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.

thheller21:03:56

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

thheller21:03:20

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

thheller21:03:53

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

pmooser08:03:00

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

pmooser08:03:18

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

pmooser08:03:29

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

thheller08:03:55

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.

pmooser08:03:28

Thank you for your assistance in any case!

Stuart19:03:48

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.

thheller22:03:36

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

Stuart23:03:38

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

:builds
{:frontend
 ...
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!

thheller23:03:57

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

thheller23:03:37

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.

Stuart23:03:36

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
src\main\exfn\app.cljs
With namespace
(ns )
So I my edn should look like this:
{...
 :builds
 {:???
  {:target :browser
   :modules {:main {:init-fn }}}}}
I'm not sure what my :??? would be :exfn or :app?

Stuart23:03:08

Just :app I think?

thheller23:03:28

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

thheller23:03:31

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

Stuart23:03:19

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

👍 3
dpsutton20:03:07

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?

thheller21:03:54

@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") }

dpsutton21:03:45

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

thheller21:03:50

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

thheller21:03:26

you can try 😉

dpsutton21:03:00

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

thheller21:03:31

well its a pattern that is commonly setup in webpack

thheller21:03:42

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

thheller21:03:35

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

dpsutton21:03:50

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

thheller21:03:19

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

thheller21:03:52

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