Clojurians Log v2
shadow-cljs
what’s the recommended way to include vendor css with shadow?
whatever you prefer using to handle css. shadow-cljs provides nothing css related.
If you use emotion, it would get bundled with the js assets. 0 configuration there.
I use node-sass for older sass projects and postcss for tailwind projects
but with it being a build tool, is there a recommended approach to pulling in those files to the scope of the build?
even something like tailwind would require a build tool to move it from node_modules to public or am i thinking about this all wrong?
there are far too many options that cover this. I have a rather basic bash script that does the copying or in even older projects I just copied things once myself and never touched it again
you can also use something like ant, gulp, make, ....
Q: when building nodejs tests, I generally use the shadow auto-run feature. When (is (= foo bar)) fails, and foo is a (nested) map, the expected vs actual are quite difficult to read in the output. Is there a better technique (some kind of pprint or diff) for this?
What I do today is pprint both values and eyeball them. I’m about to try adding a diff printing lib to this but was wondering if anyone else has any other tricks?
That would be great, I've also noticed test runs are hard to follow. I've added a junit xml export - but tha is not for console.
btw, do you have an example on how to use node fs api in a test? I'm trying to load some test resource files and I'm failing. The reports above are for browser tests with karma
1. [“fs” :as fs]
2.
(when-not (fs/existsSync out-dir)
(fs/mkdirSync out-dir))3. (fs/readFileSync “test-resources/images/hobbit-house-original.jpg”)
hopefully that gets you moving 🙂
re: test output diffs. there are quite a few options these days. all of them good…
thanks, it worked ( I had something similar but it failed to work before)
1. rebl 2. reveal 3. shadown inspect
but none of them provide a nice diff out of the box
glad it worked for you
comming from a java background, regarding test vizualization in cljs, the setup I have now is very simplistic and not very usefull. I've started with clojure/clojurescript recently.
I know it's not diff related, but is this usefull: https://github.com/usrz/javascript-karma-verbose-reporter ?
@steveb8n diff is actually kinda hard to do properly. I want to eventually add it to inspect but that will likely take a while.
thanks everyone. I’ll try and use https://github.com/lambdaisland/deep-diff2 for now. that should do the job
I’ve started using deep diff and the diff fn works well but it’s pretty-print fn does not display well in auto-run output. just providing the info for anyone that sees this
how does one troubleshoot the ChromeHeadless browser not launching when running karma start --single-run for the tests?
shadow-cljs 2.11.4 seems to continuously crash my Chrome tabs. I don't have a minimal repro yet but perhaps this is a known issue already. We have two http servers running. One is for our main application and it runs on port 3000 (is is configured at [:builds :app :devtools :http-port]). The other is for our devcards setup. It's running on port 3001 and is configured via [:dev-http 3001]. The 3001 server has two :roots ["resources-devcards/public" "resources/public"] and has the push-state/index set to "devcards.html".
To repro the problem, I start shadow-cljs up fresh. I navigate to http://localhost:3001/devcards.html and make a change to my css file. shadow-cljs will reload the css. In the console, I see "shadow-cljs: load CSS /css/main.css" printed exactly one time for each css change. This is the expected behavior. Now I open a second tab with my main app at http://localhost:3000/. I now make a single CSS change and see the "load CSS" message printed 3 times in the main app's console. If I make another change, I get the the load CSS message printed 6 times in the main app console. The next single change results in 12 load CSS. The whole time, the devtools console at 3001 is also printing out exponentially more load CSS messages. I also notice that even when I'm not making any changes to the CSS, the head element is continuously flashing in the Elements tab. This indicates that the head element is changing frequently. This pattern will continue until both tabs crash completely. The Chrome message is "Error code: SIGILL".
This issue is quite disruptive to our workflow. I'm on Ubuntu 20.04 but we have other devs on Mac that have been experiencing this as well. Chrome 85.0.4183.102. This has popped up fairly recently so rolling back to an earlier version may be a good solution for the time being.
The devcards.html file relies on two css files:
<link rel="stylesheet" type="text/css" media="screen,projection" href="/css/main.css">
<link rel="stylesheet" type="text/css" media="screen,projection" href="/css/devcards.css"><link rel="stylesheet" type="text/css" media="screen,projection" href="/css/main.css">@kenny I cannot reproduce this. it is working completely fine and as expected for me
I have not tried to create minimal repro but it is definitely happening continuously and is a new behavior.
To be completely clear, as long as only one build is open (3000 or 3001), it will always work as expected.
CLJS reloads do not appear to be affected. Seems to be CSS related only.
Problem is present in 2.10.22 and not in 2.9.10. Have not tested anything in-between.
In 2.9.10, I get 2 "load CSS" message printed in each tab for each CSS file change I make. It does not get exponentially larger though.
Okay, I have gone through many versions now 🙂 From my findings, it appears the issue was introduced in v2.10.22. 2.10.0 - no issue, 2 load css msgs on change 2.10.6 - no issue, 2 load css msgs on change 2.10.16 - no issue, 2 load css msgs on change 2.10.21 - no issue, 2 load css msgs on change 2.10.22 - 2^(number of css changes) load css msgs printed on change 2.11.4 - same as 2.10.22
fyi, created an issue here that includes all of the Slack info: https://github.com/thheller/shadow-cljs/issues/789
Some very odd behavior when I watch the head element in the Elements tab in Chrome. After making a CSS change, I observe 2^(number of css changes) <link> elements added. It will then slowly start removing some number of those. This is with 2.10.22.
Hi, trying to import DayjsUtils from @date-io/dayjs and it does not want to work. Here is the link to its code: https://github.com/dmtrKovalenko/date-io/blob/master/packages/dayjs/src/dayjs-utils.ts#L62 and here is my code:
(:require ["@date-io/dayjs" :default DayjsUtils]
["@material-ui/pickers" :refer (DatePicker MuiPickersUtilsProvider)]
[orgpad.client.util.date :as date])
I'm trying to get the https://www.11ty.dev static site generator to work with shadow-cljs. I expect Eleventy to read my shadow-cljs .js output files and produce HTML files. Eleventy does its thing with a command line utility, so I've got a build hook setup with shadow-cljs to call node node_modules/.bin/eleventy on the :flush event.
Eleventy needs a module.exports = my_render_func in the JS module that it reads, so I'm using the :esm target in my shadow-cljs.edn. As Eleventy expects CommonJS, I'm using the NodeJS esm library to make my shadow-cljs output compatible. This means that in my :flush build hook, I'm calling (sh "node" "-r" "esm" "node_modules/.bin/eleventy").
So far, this is working perfectly with shadow-cljs compile site. Eleventy produces all the expected HTML files. The problem comes when I run shadow-cljs watch site. Shadow-cljs gets stuck at the "compiling..." stage and never finishes. Do you have any suggestions for a workaround? Eleventy seems to be a good fit so far for shadow-cljs, and I feel like I'm really close to a smooth workflow. I'd love to write up a blog post to help others with shadow-cljs + Eleventy, but this part has me stumped.
@thheller I hope you can give me some guidance! Here's my build config, as well as the :flush hook.
:builds
{:site
{:target :esm
:output-dir ".shadow-cljs-cache"
:build-hooks
[(build.hooks/eleventy)]
:modules {:index.11ty {:exports
{default pages.index/default}}}}}}(defn eleventy
{:shadow.build/stage :flush}
[build-state & args]
(let [output (sh "node" "-r" "esm" "node_modules/.bin/eleventy")]
(when-not (empty? (:err output))
(println (:err output)))
(println (:out output)))
build-state)What error are you getting?
DayjsUtils is nil
the rest of code looks like this:
[:> MuiPickersUtilsProvider {:utils DayjsUtils}
[:> DatePicker {:value (date/parse "2020-06-18" true)
:on-change #(js/console.log %)}]]react_devtools_backend.js:2273 Warning: Failed prop type: The prop `utils` is marked as required in `MuiPickersUtilsProvider`, but its value is `undefined`.
in MuiPickersUtilsProvider (created by orgpad.client.views.widgets.date_picker.date_picker)
in orgpad.client.views.widgets.date_picker.date_picker (created by orgpad.client.views.widgets.grid.item)
in div (created by ForwardRef)
in ForwardRef (created by WithStyles(ForwardRef))
in WithStyles(ForwardRef) (created by orgpad.client.views.widgets.grid.item)
in orgpad.client.views.widgets.grid.item (created by orgpad.client.views.widgets.grid.grid)
in div (created by ForwardRef)
in ForwardRef (created by WithStyles(ForwardRef))
in WithStyles(ForwardRef) (created by orgpad.client.views.widgets.grid.grid)
in orgpad.client.views.widgets.grid.grid (created by orgpad.client.views.widgets.paper.paper)
in div (created by ForwardRef)
in ForwardRef (created by WithStyles(ForwardRef))
in WithStyles(ForwardRef) (created by orgpad.client.views.widgets.paper.paper)
in orgpad.client.views.widgets.paper.paper (created by orgpad.client.views.administration.users.user_filter)
in orgpad.client.views.administration.users.user_filter (created by orgpad.client.views.widgets.grid.item)
in div (created by ForwardRef)
in ForwardRef (created by WithStyles(ForwardRef))
in WithStyles(ForwardRef) (created by orgpad.client.views.widgets.grid.item)
in orgpad.client.views.widgets.grid.item (created by orgpad.client.views.widgets.grid.grid)
in div (created by ForwardRef)
in ForwardRef (created by WithStyles(ForwardRef))
in WithStyles(ForwardRef) (created by orgpad.client.views.widgets.grid.grid)
in orgpad.client.views.widgets.grid.grid (created by orgpad.client.views.administration.users.users)
in orgpad.client.views.administration.users.users (created by function orgpad$client$views$administration$core$administration(){
return reagent.core.create_class(new cljs.core.PersistentArrayMap(null, 4, [new cljs.core.Keyword(null,"component-did-mount","component-did-mount",-1126910518),orgpad.client.views.administration.core.load_administration_data,new cljs.core.Keyword(null,"component-did-update","component-did-update",-1468549173),orgpad.client.views.administration.core.load_administration_data,new cljs.core.Keyword(null,"display-name","display-name",694513143),orgpad.client.views.administration.core.administration,new cljs.core.Keyword(null,"reagent-render","reagent-render",-985383853),orgpad.client.views.administration.core.render_administration], null));
})
in div (created by function orgpad$client$views$administration$core$administration(){
return reagent.core.create_class(new cljs.core.PersistentArrayMap(null, 4, [new cljs.core.Keyword(null,"component-did-mount","component-did-mount",-1126910518),orgpad.client.views.administration.core.load_administration_data,new cljs.core.Keyword(null,"component-did-update","component-did-update",-1468549173),orgpad.client.views.administration.core.load_administration_data,new cljs.core.Keyword(null,"display-name","display-name",694513143),orgpad.client.views.administration.core.administration,new cljs.core.Keyword(null,"reagent-render","reagent-render",-985383853),orgpad.client.views.administration.core.render_administration], null));
})
in div (created by function orgpad$client$views$administration$core$administration(){
return reagent.core.create_class(new cljs.core.PersistentArrayMap(null, 4, [new cljs.core.Keyword(null,"component-did-mount","component-did-mount",-1126910518),orgpad.client.views.administration.core.load_administration_data,new cljs.core.Keyword(null,"component-did-update","component-did-update",-1468549173),orgpad.client.views.administration.core.load_administration_data,new cljs.core.Keyword(null,"display-name","display-name",694513143),orgpad.client.views.administration.core.administration,new cljs.core.Keyword(null,"reagent-render","reagent-render",-985383853),orgpad.client.views.administration.core.render_administration], null));
})
in div (created by function orgpad$client$views$administration$core$administration(){
return reagent.core.create_class(new cljs.core.PersistentArrayMap(null, 4, [new cljs.core.Keyword(null,"component-did-mount","component-did-mount",-1126910518),orgpad.client.views.administration.core.load_administration_data,new cljs.core.Keyword(null,"component-did-update","component-did-update",-1468549173),orgpad.client.views.administration.core.load_administration_data,new cljs.core.Keyword(null,"display-name","display-name",694513143),orgpad.client.views.administration.core.administration,new cljs.core.Keyword(null,"reagent-render","reagent-render",-985383853),orgpad.client.views.administration.core.render_administration], null));
})
in function orgpad$client$views$administration$core$administration(){
return reagent.core.create_class(new cljs.core.PersistentArrayMap(null, 4, [new cljs.core.Keyword(null,"component-did-mount","component-did-mount",-1126910518),orgpad.client.views.administration.core.load_administration_data,new cljs.core.Keyword(null,"component-did-update","component-did-update",-1468549173),orgpad.client.views.administration.core.load_administration_data,new cljs.core.Keyword(null,"display-name","display-name",694513143),orgpad.client.views.administration.core.administration,new cljs.core.Keyword(null,"reagent-render","reagent-render",-985383853),orgpad.client.views.administration.core.render_administration], null));
} (created by orgpad.client.views.administration.core.administration)
in orgpad.client.views.administration.core.administration (created by reagent4)
in reagent4 (created by orgpad.client.views.widgets.lazy.lazy)
in Suspense (created by orgpad.client.views.widgets.lazy.lazy)
in orgpad.client.views.widgets.lazy.lazy (created by root-component)
in div (created by root-component)
in div (created by root-component)
in root-component (created by orgpad.client.views.root.root)
in orgpad.client.views.root.root
overrideMethod @ react_devtools_backend.js:2273
printWarning @ checkPropTypes.js:21
checkPropTypes @ checkPropTypes.js:83
validatePropTypes @ react.development.js:1715
createElementWithValidation @ react.development.js:1814
reagent$impl$template$make_element @ template.cljs:422
reagent$impl$template$native_element @ template.cljs:334
reagent$impl$template$vec_to_elem @ template.cljs:366
reagent$impl$template$as_element @ template.cljs:385
reagent$impl$component$wrap_render @ component.cljs:114
reagent$impl$component$do_render @ component.cljs:141
(anonymous) @ component.cljs:164
reagent$ratom$in_context @ ratom.cljs:42
reagent$ratom$deref_capture @ ratom.cljs:55
reagent$ratom$run_in_reaction @ ratom.cljs:537
reagent$impl$component$render @ component.cljs:164
finishClassComponent @ react-dom.development.js:17161
updateClassComponent @ react-dom.development.js:17111
beginWork @ react-dom.development.js:18621
beginWork$1 @ react-dom.development.js:23180
performUnitOfWork @ react-dom.development.js:22155
workLoopSync @ react-dom.development.js:22131
performSyncWorkOnRoot @ react-dom.development.js:21757
(anonymous) @ react-dom.development.js:11090
exports.unstable_runWithPriority @ scheduler.development.js:654
runWithPriority$1 @ react-dom.development.js:11040
flushSyncCallbackQueueImpl @ react-dom.development.js:11085
flushWork @ scheduler.development.js:598
channel.port1.onmessage @ scheduler.development.js:165
material-ui-pickers.js:48 Uncaught TypeError: Utils is not a constructor
at eval (material-ui-pickers.js:48)
at mountMemo (react-dom.development.js:15443)
at Object.useMemo (react-dom.development.js:15739)
at Object.exports.useMemo (react.development.js:1522)
at MuiPickersUtilsProvider (material-ui-pickers.js:47)
at renderWithHooks (react-dom.development.js:14804)
at beginWork (react-dom.development.js:17483)
at HTMLUnknownElement.callCallback (react-dom.development.js:189)
at Object.invokeGuardedCallbackImpl (react-dom.development.js:238)
at invokeGuardedCallback (react-dom.development.js:293)Ok, so requiring it like this fixed the problem:
(ns orgpad.client.views.widgets.date-picker
(:require ["@date-io/dayjs" :as dayjs]
["@material-ui/pickers" :refer (DatePicker MuiPickersUtilsProvider)]
[orgpad.client.util.date :as date]))
(defn date-picker
[]
[:> MuiPickersUtilsProvider {:utils dayjs}
[:> DatePicker {:value (date/parse "2020-06-18" true)
:on-change #(js/console.log %)}]])I just tried it out and got this same thing, it imports as nil.
Glad you sorted it out! I know it's confusing, I've been studying ClojureScript/shadow-cljs for three months and I'm just barely starting to get productive.
Clojure(Script) itself is great, I am rarely strugling with anything, mostly I can just concentrate on my business problems, but including JS libraries is sometimes tricky and much more annoying. The hardest part is that you will get example code in JS which you have to translate into CLJS and it is often try and guess for me, plus dealing with mutability is annoying 🙂
But the language is superb compared to anything else, due to REPL, hot code reloading, simplicity, data orientation, ... I would never change it for anything.
hmm that is indeed the version where the logic for this changed
but not a clue how it would get to that behavior
@neil.hansen.31 not a clue. looks fine but I don't have a clue what eleventy even is or does. does it not have a watch command itself that you can run separately and skip the hook altogether?
@thheller thanks for the response. I know it's tough to answer questions like this about an external tool... Eleventy does have its own watch command, but there's a few details that prevent it from working well with shadow-cljs compile.
Right now my build is producing index.11ty.js, which exports.default a function that calls reagent's render-to-static-markup and returns an HTML string. Eleventy is basically running index.11ty.js, taking the HTML string, and creating the resulting HTML file (with some templating that it takes care of).
I diff'd two versions of index.11ty.js, one created by shadow-cljs compile and one created by shadow-cljs watch. I noticed that there's a bunch of extra shadow.* namespaces that are imported in the version created by shadow-cljs watch, I figure some of these for hot-reloading functionality in the browser and providing the ability to connect to a REPL. I suspect that when Eleventy evaluates index.11ty.js, it's getting stuck somewhere on this REPL/hot-reload code.
if you don't need hot-reload or REPL you can set :devtools {:enabled false} in your build config
why are you not using :node-library though?
:esm seems like a weird choice if you actually want commonjs?
this never directly runs in the browser right?
I tried :node-library a while, but I got the same error as in https://github.com/thheller/shadow-cljs/issues/304.
No protocol method ISwap.-swap! defined for type cljs.core...And I don't seem to be able to do a module.exports = my_render_func with the :npm-module target, which is mentioned later in that issue.
you could just create a foo.js yourself that just has module.exports = require("./path-to-npm-module-output/your.ns").the_export;
with (defn ^:export the-export [foo bar] ...) in that ns
but I still don't have a clue what you are doing ... so good luck with boot 😉
how are you running into the issue you linked? do you have two builds loading in the script?
I assume its just running node to do stuff and generate HTML?
I don't know enough about eleventy so I can't really help and linked issues that you guess might be related but also might not be doesn't let me help you
the issue that is immediately suspicious to me is the build hook
Which part?
Also, if this can be helpful at all, here's a GIF of what I'm seeing in the REPL on shadow-cljs watch. It's hanging on Compiling ..., and after I ctrl-c to exit, I'm getting a successful message Eleventy saying Copied 9 files / Wrote 1 file in 0.94 seconds, followed by shadow-cljs - #3 ready!. The HTML generation does in fact work perfectly after I ctrl-c to get out of the Compiling... message.
Update: I can confirm that adding {:devtools {:enabled false}} as you suggested fixes the hanging problem. It no longer gets stuck on Compiling.... I feel even closer to the solution now, but Hot Reload really seems important to the workflow. Fingers crossed you have an idea for me!
Wanted to address this question of yours. I'm running into this issue when I use Eleventy's --watch command, as you suggested in your first response. With this alternative workflow, I set Eleventy up to call shadow-cljs compile site every time it reloads.
It actually works the first time, as soon as I start Eleventy, but as soon as I make a change to a file, the reload errors with No protocol method ISwap.-swap! defined for type cljs.core/Atom: [object Object].
No idea either. Behavior is very odd. Would you like me to file an issue for this?
Would be interesting to try a patched version of shadow-cljs that reverts that change to see if that was really it.
Stared at it for a few mins and couldn't think of any reason why. Don't know if relevant but cloneNode will copy inline listeners.
I still don't have the slightest clue about what you are actually trying to do here sorry
my assumption would be that you'd just have a regular generate HTML page and include the JS afterwards
including the JS to build the thing in the first place is something entirely different and I've never done that using react (ie. SSR)
hmm that might be relevant but then this should always be a problem?
Presumably. Perhaps most people don't set inline listeners on their links.
Still don't have an explanation for why the copying of inline listeners would exhibit this behavior. I suspect it would require deeper knowledge than just this function.
Primarily wrt the problem only occurring when more than 1 tab is open.
do you have other stuff going on in the page? maybe browser extensions?
Definitely have some extensions. Can in an incognito browser.
Same issue in an incognito browser.
Another thing to note is if I have two tabs both pointed to localhost:3000, I do not have the issue. It only occurs when I have 1 tab of localhost:3000 and 1 tab of localhost:3001
Same thing for two tabs with localhost:3001.
The moment I open a tab on a different port than the one I started on, every CSS change from that point forward will have the issue.