Fork me on GitHub
#shadow-cljs
<
2023-03-11
>
p-himik00:03:54

An unrelated question - have you ever tried making build report into a visual graph? Feels like it would be useful to figure out not only where something came from (which I already can do, but in a somewhat tedious way), but also what something brings with it. Handy when you're trying to decide how to split your sources into modules.

thheller06:03:54

I have tried, but didn't find anything useful at all. just visual mess. the table just ended up the cleanest and most useful

thheller06:03:50

and this radial thing

thheller06:03:00

> but in a somewhat tedious way

thheller06:03:05

whats tedious about it?

thheller06:03:12

I'm open to suggestions or examples, just didn't find anything that wasn't completely useless yet

thheller06:03:09

which was the closest to useful, but still overall less useful than just a table

p-himik08:03:16

The first and the second links wouldn't work for what I'm describing because they show only the "contains" relationship, without "requires". And the third one... I don't even know. Why would laying a graph on a flat line be more useful than just showing the graph? Of course, I might be overly optimistic, but I think there should be a set of parameters that would allow for a neat and useful layout of such a graph. Pretty sure I've seen things like it before, although can't remember exactly. > whats tedious about it? Compared to a clean visualization, table data containing relationships is harder to read. Might be a personal thing, of course, and it assumes a clean visualization, which might not be possible here. Is there a public project where, you think, having a clean diagram would be a proper showcase that such a feature is useful? If I end up experimenting, don't wanna deal with synthetic or private projects.

thheller10:03:35

the shadow-cljs ui itself comes to mind, not very large but public 😉

thheller10:03:49

thats the data the report is generated from, if you want to experiment I'd start there.

thheller10:03:00

otherwise larger public projects would be logseq and penpot, both use shadow-cljs already

thheller10:03:17

I have never seen a good visualization for dependency graph for ANY system/language that scales properly, ie. doesn't become incomprehensible in larger projects. I assume if it was easy there'd be more examples online.

thheller10:03:04

totally curious to see what you come up with though. Table for me just was the "good enough" compromise and I don't particularly like frontend work, so I stopped there.

hifumi12303:03:10

Is it possible to import a class from a js file? More concretely the JS file has something like

export default class Foo {
  // ...
};
I seem to be able to import the class from CLJS but I simply get an empty object returned, and (new Foo) returns an exception

thheller06:03:34

you are likely just not accessing the default export properly

thheller06:03:45

otherwise yes, you can access JS classes like that

hifumi12307:03:03

Okay, it looks like I’ve narrowed down my problems further. It seems that shadow-cljs has trouble with some auto-generated JS files from ANTLR v4, but I’m not sure why. There is an antlr4 module that has named exported and default exports. In particular, there is an atn symbol exported from antlr4 . In a REPL, I can see it just fine:

cljs.user> antlr4/atn
{"ATN" #object[t$jscomp$0],
 "ATNDeserializer" #object[t$jscomp$1],
 ...}
The auto-generated JS file I am requiring from CLJS starts with something like this
import antlr4 from 'antlr4';
// ...
const atn = new antlr4.atn.ATNDeserializer().deserialize(serializedATN);
and for some reason antlr4.atn is undefined in the JS file. Yet in CLJS when I (require '["antlr4$default" :as antlr4]), I can access atn just fine.

thheller07:03:58

I do not follow

thheller07:03:41

please provide the full error you get, and the code that code you there. those snippets mean nothing without context

thheller07:03:10

an example repo would help

thheller07:03:07

are you trying to include the generated JS file via https://shadow-cljs.github.io/docs/UsersGuide.html#classpath-js?

hifumi12307:03:41

That is correct. I’ll create a tiny repo with an example soon

thheller07:03:38

note that this is still a rather experimental feature and has a gazillion issues when trying to interface with npm packages directly, especially if its ESM code. if you can convert that code to commonjs you might have more luck

hifumi12308:03:36

Here is the example — it has some auto-generated JS and a very tiny CLJS namespace. Also tried keeping the shadow-cljs.edn as small as possible

thheller08:03:57

what am I supposed to see? I only see a hello world in the console?

hifumi12308:03:07

Uncomment the require s in

hifumi12308:03:16

The first commented require is sufficient to uncomment. It will demonstrate the error I described above

thheller08:03:40

yeah, this is what I mean. the trouble is that commonjs/esm interop

thheller08:03:47

can you tell antlr to generate commonjs code?

hifumi12308:03:09

I’ll try looking into that. Otherwise, I will attempt using webpack to output CJS code. I know one CLJS library does this (parcera)

thheller08:03:15

in general it doesn't look like you are going to need access to CLJS code from these generated files

thheller08:03:22

so I suggest a different strategy

thheller08:03:54

create a packages/my-generated-code directory. put all generated code there, also create a package.json there. just npm init -y is fine

thheller08:03:24

then in your build config :js-options {:js-package-dirs ["node_modules" "packages"]}}

thheller08:03:41

in cljs then just (:require ["my-generated-code/theFile" :as x])

thheller08:03:05

this basically sets the code up to be treated like any other npm package

thheller08:03:15

and won't keep into in the advanced compiled parts of the build

hifumi12308:03:58

I’ve just tried your suggestions and they work flawlessly. Thank you so much!

hifumi12308:03:38

Hours of debugging alone did nothing and now everything works perfectly. I’m okay with lack of advanced optimization because all of the auto-generated files are being used and there is nothing to tree-shake out of them 🙂