if you suspect an issue in electric-dom with these events you can drop down to m/observe and manage the event directly

I am not yet skilled enough in Missionary to know how to drop-in to it from Electric. Is there an example somewhere for a different event plz?

Ah, my mistake: I was not calling (.preventDefault e) on "drop" and "dragover" events.

Javascript ecosystems have it covered - https://day.js.org/docs/en/display/from-now

if you want to stay in cljc land you could probably use https://github.com/clj-commons/humanize#datetime

I'm trying to deploy to production and I have issues. One of these issues is that this property isn't set. I set it manually and now I suspect the other issues may be related to not setting it properly (?) I just set it to my commit hash because I have no idea what it should be.

I'm deploying to an internal env and version is not set and the docker cmd is:

"Cmd": [
  "/bin/sh",
  "-c",
  "java -DHYPERFIDDLE_ELECTRIC_SERVER_VERSION=$VERSION -jar app.jar"
]

for now it's set to my commit hash and I get these errors 😞 :

in ( .render js/mermaid dummy  )
 in ( .then (.render js/mermaid "dummy" mmd) #object[ja] )
 in reactive (fn [] ...)
 in reactive (fn [] ...)
 in reactive (defn Mermaid [] ...) in app/observer.cljc line 233
 in reactive (fn [] ...)
 in reactive (fn [] ...)
 in reactive (defn Observer [] ...) in app/observer.cljc line 264
 in (try ...) 

 TypeError:  is not a function

the starter app has a working configuration out of the box, are you having trouble with that?

the version used to cachebust stale clients when you deploy and the server changed

it should be set by the build, i think in the dockerfile

see build.clj and the readme

I'm not deploying to that fly platform thing. But I don't think it's the version. I think it's because I set a callback on a promise using (fn [arg] ..) and it doesn't recognize it as a function. But I'm still investigating

this is my clue:

in ( .then (.render js/mermaid "dummy" mmd) #object[ja] )
 in reactive (fn [] ...)
 in reactive (fn [] ...)
 in reactive (defn Mermaid [] ...) in app/observer.cljc line 233
 in reactive (fn [] ...)
 in reactive (fn [] ...)
 in reactive (defn Observer [] ...) in app/observer.cljc line 264
 in (try ...) 

 TypeError:  is not a function
    at Function.<anonymous> (main.BC569D98165855497A21AC1C8BE1718D.js:1623:185)

what commands did you type? where is the error coming from?

It's my app running and trying to update some svg. The library that generates the svg is using async/away (so a promise) and my line that probably fails is:

(.then
                        (.render js/mermaid "dummy" mmd)
                        set-mm-svg)

release build? dev build?

release (prod)

I also tried e/fn and it failed so I am now trying #?(:cljs (defn ...))

ok, i think it’s an advanced mode problem, i think you don’t want to access mermaid from the js global. how is mermaid loaded?

index html script tag

I have very little front end experience 😄

It's available on the webpage (I checked in console)

that is the problem

well after 3 hours that is nice to hear 🙂

get mermaid from NPM and then :require it so that shadow-cljs can see it

yeah I wanted to do it but idk how require works in clojurescript. I guess I'll have to do that

it's just adding to the shadow under :dependencies, right?

idk off hand and am on mobile

no problem, let me try. Thanks Dustin!

you’re definitely going to need to have working knowledge of clojurescript toolchain

well I'm stubborn so I'll definitely learn /something/

btw why does the deployment care, does it modify index.html? If there is a link where I should have found out I'd like to read. Thanks.

clojurescript prod builds perform dead code elimination and code minification which mangles the names

you can also turn it off

I wanted to. I only found optimizations and turned them off

(It didn't work so they're on now).

I couldn't get it to work because shadow seems to not support "lazy loading" which is probably when you require something conditionally and I end up with some missing modules after compilation. I think it's best if I can add the html "script" tag and not mangle anything because performance is not an issue for me. Is turning off "optimizations" enough to do that or do I need to take care of other things? If it's too much work, how can I include a library with lazy loading (in this case mermaid) and use it in production? It works locally so there must be a difference in that aspect between production and local build but I've yet to find it. I figured it's around the src-build and client build (there is a comment about it in the code) but I didn't find how to make it work. Performance is not an issue because it's a demo I want to show my peers.

i don’t understand fully yet, please add me to your github repo

I'll try and create one with a minimal example later. I can't add to my repo since it includes some private stuff.

(I don't think it's related to hyperfiddle at this point, I'm posting here to leverage slack search which indexes these messages and can maybe help someone from the future with similar problems)

ok so it turns out optimizations :none is not an option. You have to use optimizations :simple . The code even suggests that (setting optimizations in build-client to false, I hard coded the compiler option to :none) This enables to requires through script tag without breaking anything. @U09K620SG now it works and my diagrams are generated. Optimizations are not a concern for my demo. Thank you so much for your help and patience!

for reference this is the error optimizations :none generates:

optimizations set to :none, can't optimize
{}
ExceptionInfo: optimizations set to :none, can't optimize
	shadow.build.closure/optimize (closure.clj:1308)
	shadow.build.closure/optimize (closure.clj:1301)
	shadow.build.api/optimize (api.clj:273)
	shadow.build.api/optimize (api.clj:267)
	shadow.build/optimize (build.clj:525)
	shadow.build/optimize (build.clj:517)
	shadow.cljs.devtools.api/release* (api.clj:339)
	shadow.cljs.devtools.api/release* (api.clj:324)
	shadow.cljs.devtools.api/release/body-fn--19691--auto----19795 (api.clj:358)
	shadow.cljs.devtools.api/release (api.clj:356)
	shadow.cljs.devtools.api/release (api.clj:351)
	build/build-client (build.clj:32)
	build/build-client (build.clj:22)
	build/uberjar (build.clj:49)
	build/uberjar (build.clj:38)
	clojure.lang.Var.invoke (Var.java:384)
	clojure.run.exec/exec (exec.clj:89)
	clojure.run.exec/exec (exec.clj:78)
	clojure.run.exec/-main/fn--237 (exec.clj:228)
	clojure.run.exec/-main (exec.clj:224)
	clojure.run.exec/-main (exec.clj:192)
	clojure.lang.Var.applyTo (Var.java:705)
	clojure.core/apply (core.clj:667)
	clojure.main/main-opt (main.clj:514)
	clojure.main/main-opt (main.clj:510)
	clojure.main/main (main.clj:664)
	clojure.main/main (main.clj:616)
	clojure.lang.Var.applyTo (Var.java:705)
	clojure.main.main (main.java:40)

My best guess is that shadow-api/release is intended to build a single .js file artifact and therefore an optimization strategy is required

https://github.com/hyperfiddle/electric-starter-app/blob/16fff5da32b0a1f50d221cba56c872632ee10d2d/src-build/build.clj#L30C4-L30C22

i think you'd write shadow-api/compile for a dev build iirc

So when you want to include something that has lazy-loaded libraries internally, or that you can't npm-install for some other reason, you probably want to use :simple optimizations. Otherwise shadow messes with js in some way that breaks script tags (probably doesn't compile them alongside the npm_modules and whatever else).

If you must, you can access the global by string, i.e. js.window["mermaid"] to bypass the name mangling

(def mermaid (aget js/window "mermaid")) ; something like this

I'm focused on other things but I'll keep that in mind

it's a shadow issue anyway so I'm sure other devs just know how it works