Clojurians Log v2

For JS libraries (e.g. https://github.com/Microsoft/monaco-editor) that offer multiple approaches to modules (AMD, ESM + Webpack, ESM + Parcel, …), which one should I go with if I’m using shadow-cljs?

IIRC the last time I tried to use that package myself it tried to do a bunch of dynamic import which shadow-cljs doesn't support

but that has been at least a year so no idea what the current state is

looks like it still does that crap when it even requires custom webpack config/plugin to use https://github.com/microsoft/monaco-editor/blob/master/docs/integrate-esm.md

you can just use the AMD version and manually embed it in the page and not in the actual CLJS build

or use webpack

Phew, that was quick 🙂

Anyway great advice, thanks… any reason to pick AMD over webpack or vice versa?

Actually I think I’ll just bite thee bullet and set up webpack as described in https://code.thheller.com/blog/shadow-cljs/2020/05/08/how-about-webpack-now.html

did you try it without?

I mean it might work? I don't have a clue

if you just want an editor in a html page try codemirror. that one works and is used by many people.

from the looks of the ESM docs it seems like it might work

I did try codemirror already actually, but I like the look of monaco so I want to see if I can get that one working instead

I didn’t try it with shadow-cljs yet, but okay. I’ll see if I can get ESM to work with shadow-cljs and fall back to whichever of ASM and webpack I can get working first 😉

getting the worker stuff to work will be the tricky part

but other than that it seems fine

Alright.. out of curiousity, why would the worker stuff be tricky? Because of something the workers do?

ok nevermind it is not going to work. I did a quick test and it is importing css. so webpack it is

worker stuff just needs to be configured, so it just doesn't work out of the box

Okay then 🙂

AMD also works. then you don't even have to setup webpack.

BTW, you wouldn’t happen to have a recommended way of running webpack --watch and shadow-cljs watch? Curious if there’s a way to have both without running two terminal windows

plenty of ways to do that

I have used https://github.com/strongloop/node-foreman, https://github.com/mysticatea/npm-run-all and a few others in the past

nowadays I prefer separate terminals for stuff

Got it

So I got AMD working, but I decided to see if I could go with https://www.npmjs.com/package/@monaco-editor/react instead to save myself from having to write a bunch of glue code. However, when I try to load that, shadow-cljs gives me the following error: browser.cljs:38 Failed to load my-project/monaco.cljs TypeError: Cannot redefine property: DiffEditor. Do you think there’s a way around this, or should I give up? 🙂

(sorry for all these questions BTW, I’m new to the JS ecosystem and it’s absolutely bewildering to me)

its bewildering for everyone 😉

don't know what that error is. don't know what you are doing in your code

I’m doing (ns my-project.monaco (:require ["@monaco-editor/react" :refer [Editor]])) and then nothing else

don't know what the react package is doing either

it likely just wraps the ESM package no?

it seems to use AMD: https://www.npmjs.com/package/@monaco-editor/react#config

Perhaps there’s some sort of conflict happening with some other JS lib I’ve previously run? I’ll see if I can reproduce from a clean slate

it likely isn't worth using the react wrapper

just write the 5 lines to do that yourself and save the headache of making that lib work

Okay 🙂

how can I troubleshoot shadow giving me a stale output error? I see my build running in the web console, with warnings. But when I connect to my app shdow-cljs gives me a stale output error, though the app runs. I cleared my js, and the .shadow-cljs folder and restarted my watch but it still says stale output even though it was forced to recompile everything from complete scratch.

just make sure you are loading the correct file

could be loading an old one from a different path or so

frequently happens if you change you :modules config or :output-dir

or can happen if you have 2 shadow-cljs instances running for your project competing with each other

make sure there is only one running