Fork me on GitHub
#shadow-cljs
<
2018-10-10
>
sb07:10:44

If somebody created shadow-cljs with xterm, what is the experience, what is the best approach?

thheller07:10:45

some of the shadow-cljs UI uses xterm.js but I'm not actually sure about the best approach yet. it doesn't fit well into the react model

sb07:10:59

Yes, I see too.

sb07:10:20

Thanks the answer!

romdoq12:10:06

Is there a better dev workflow for working on an :npm-module than to have a separate stand-alone :browser target build for development? I currently have my project successfully imported as a module into our website, but hot-reloading doesn't seem to work out of the box that way (unless I've messed something up).

thheller13:10:19

@mel.collins hot reloading with npm-module is tricky since shadow-cljs is not in charge of the final bundle. so it is not super reliable

thheller13:10:27

but you can set :runtime :browser in your config

thheller13:10:47

and then require("shadow-cljs/shadow.cljs.devtools.client.browser") somewhere in your JS

thheller13:10:54

that may or may not make the live-reloading work

thheller13:10:05

depends on what webpack does with the code and stuff

romdoq14:10:06

Hmm, well that require() did the trick when I embedded it in the code of the website itself, but I'd prefer to keep the cljs stuff limited to my cljs module so I guess I need to keep poking at this tomorrow.

thheller14:10:45

@mel.collins unfortunately due to the way :npm-module works there is no easy way to do this outside of doing it via the JS

thheller14:10:17

but typically you can just wrap it in if (process.env.NODE_ENV == "development") { ... } and you are set

romdoq15:10:25

aha! I got it working a with a (defonce _hack (js/require "...")) in my main cljs file.

romdoq15:10:53

that feels really dirty though ๐Ÿ˜„

romdoq15:10:37

guess the next task is to make it only do that for the dev build

thheller15:10:43

@mel.collins yeah thats a bit dirty ๐Ÿ˜›

thheller15:10:09

you can wrap it in (when ^boolean js/goog.DEBUG ...) that should remove it from production

thheller15:10:21

doesn't make it cleaner though ๐Ÿ˜›

romdoq15:10:46

fantastic! That worked perfectly. ๐Ÿ˜„ You're a hero @thheller.

romdoq15:10:22

I think our codebase is already somewhat dirty, so I should be able to get away with it!

๐Ÿ˜‚ 4
lilactown21:10:50

when I connect to shadow-cljs via nREPL, I get a message "version-to-list: Version must be a string" and I'm not able to send forms to it from a file / get any sort of autocomplete

lilactown21:10:55

all of this via CIDER

lilactown21:10:10

evaluating directly in CIDER buffer works, just no autocomplete

thheller21:10:23

@lilactown that message is not from shadow-cljs so no idea whats happening

lilactown22:10:23

heh, I guess I accidentally removed cider-nrepl from my deps :face_with_rolling_eyes:

eoliphant22:10:23

quick question, I'm trying to make sure I'm doing the best I can to help shadow optimize the size of the build. This is in a reagent project, that's using semantic ui react. I'd previously created a helper namespace that aliased the semantic ui react namespace, and had def's of all the components with adapt-react-class applied. I figured that since that was a 'use' of the react class, I was effectively pulling everything in. I've since setup another experiment, where I'm just pulling in a few classes for a small page. However, when I run the build report, I'm still seeing roughly the same 'optimized' size

thheller22:10:59

@eoliphant make sure what you are not somehow including the main semantic-ui-react package directly as that it itself will pull everything in (regardless of use)

thheller22:10:52

there is no :advanced compilation for node_modules so it doesn't do full dead code removal

thheller22:10:02

so just including something usually means that is all included

eoliphant22:10:10

yeah that's exactly what i'm doing

thheller22:10:01

do you actually include only what you need though? the webpack instructions do not apply here

eoliphant22:10:58

yeah in my test code, i :refer'ed just the components I wanted, but to your point I did it from the top level package

thheller22:10:10

no that is not how it works

thheller22:10:34

assuming that you mean (:require ["semantic-ui-react" :refer (Thing)])

thheller22:10:42

that will include everything

thheller22:10:48

this does not work

eoliphant22:10:06

right so I need

thheller22:10:08

instead you must (:require ["semantic-ui-react/dist/es/views/Card" :as Card])

thheller22:10:15

for example ..

eoliphant22:10:35

that's what I'm doing now

eoliphant22:10:49

so now i'm thinking, a nice 'wrapper' would be maybe a macro or something that hides all the pathing

thheller22:10:15

not possible via macro

eoliphant22:10:30

ah ok, that's no fun lol

thheller22:10:29

yeah I have no solution right now since I do not think that using :refer to eliminate code is a useful thing to do in the first place

thheller22:10:08

and the way the JS world structures code is just messy and every projects does its own thing

eoliphant22:10:21

gotcha, so its ultimately back to externs + the JS insanity

eoliphant22:10:37

yeah you obviously deal with this more than the rest of us

eoliphant22:10:45

but just the few times I've pinged you about stuff

thheller22:10:47

well ... IMHO just importing what you need is not really all that bad

eoliphant22:10:03

and went into the offending package

eoliphant22:10:10

yeah literally each case was different

eoliphant22:10:51

Yeah I don't mind it too much, but it also goes back to your point about everyone doing their own thing

eoliphant22:10:12

so I just fixed my example per your advice

eoliphant22:10:41

this works ["semantic-ui-react/dist/es/collections/Menu" :refer (Menu MenuItem Image MenuMenu) ] just fine and now there's 73 vs 400+ kb of stuff

eoliphant22:10:08

but that directory is potentially a brittle reference

eoliphant22:10:32

if they decide to muck around with the distro, etc

eoliphant22:10:46

but in any case problem solved for now ๐Ÿ™‚

thheller22:10:51

yeah its annoying

thheller22:10:19

but at this point I'm very doubtful the JS world is every gonna adopt a clean namespacing scheme ๐Ÿ˜›

thheller22:10:30

some packages at least try to have nicer paths

eoliphant22:10:31

holding one's breath

eoliphant22:10:38

is probably not adviseable

thheller22:10:16

I could add some special magic that could maybe shorten this somehow to at least get rid of the dist/es but thats just not gonna be reliable again

eoliphant22:10:26

though I had a moment of extreme gratification yesterday. finally got the go ahead to do the "2.0" of a pretty large project in clojure(script)/datomic cloud etc

thheller22:10:27

given the amount of random shit the packages do

eoliphant22:10:55

been focusing on the backend, but just had one of the ui devs come up and say 'this is all you have to do???'

eoliphant22:10:04

he's apparently not a big fan of webpack lol

thheller22:10:26

we should just write our own cljs-react-ui so we can get rid of the messy JS packages ๐Ÿ˜‰

eoliphant22:10:31

ironically i didn't realize just how insane it is. I focus more on architecture, and far more hands-on on server side stuff, so when ever I did UI stuff, i'd just do a create-react-app etc

eoliphant22:10:38

had no friggin idea

eoliphant22:10:43

how much insanity it hides

thheller22:10:53

hehe yeah its a complete mess

thheller22:10:09

I'm always amazed it works at all ๐Ÿ™‚

๐Ÿ‘ 8
eoliphant22:10:12

we just need to get the rest of the world to drink the kool aid

eoliphant22:10:51

well yeah a while back I think i bugged you about trying to get this Material UI framework working

eoliphant22:10:13

and that's what prompted me to learn more about all the frigging magic that's going on

Nolan22:10:35

may have come up before, but i get an issue with the stream dependency when trying to (require '["sjcl" :as sjcl]). may be an easy fix, still havent gotten to the point where i can grok these types of issues quickly

eoliphant22:10:46

because they were using plugins to inmport images, css, etc etc. That 'look like' imports. ugh..

thheller22:10:48

@nolan what is the problem?

Nolan22:10:57

just get โ€œโ€ฆprobably need to run npm install streamโ€ even after npm installing stream.

Nolan22:10:21

so likely with the way stream is written or bundled

thheller22:10:30

ah you are probably missing the shadow-cljs install in your actual project?

Nolan22:10:52

ah, ill try that

thheller22:10:55

stream is one of those node native packages that is emulated for the browser

thheller22:10:40

the first one is installed automatically when you install shadow-cljs in the project

thheller22:10:55

so shadow-cljs should always be in your package.json devDependencies (or dependencies)

Nolan22:10:46

that makes a bunch of sense. working beautifully. thanks for the quick help @thheller.

Nolan22:10:40

totally agree with @eoliphant, shadow takes so much friction out of working with js deps. really appreciate everything!

8
๐Ÿ˜Ž 4