Fork me on GitHub
#shadow-cljs
<
2018-09-11
>
royalaid00:09:31

Does anyone have experience using https://github.com/vvvvalvalval/scope-capture with shadow?

royalaid00:09:04

I am looking into using it and seems that the way shadow does things might not work with what scope-capture wants to do

royalaid00:09:47

because it seems like there are separate processes for the build and repl

ghiden04:09:06

I'm trying to use this cljs wrapper for React. https://github.com/dmohs/react-cljs And, when I publish as npm, I get an error "ReferenceError: createReactClass is not defined". Maybe this library is not a good one to use with shadow-cljs but does anyone have experience with this library? or any good React wrapper that works with shadow-cljs?

thheller07:09:02

which version do you use? the bundled version should work

ghiden08:09:36

is there any way to export from shadow-cljs?

thheller08:09:37

why did do you not use the bundled version?

thheller08:09:01

yes there are ways. I'm just trying to understand why you are not using the default way.

ghiden08:09:24

if i use the bundled version, I have to shim cljsjs, right?

thheller08:09:07

it'll include this shim automatically

thheller08:09:21

which is also the example of how to export the global

thheller08:09:52

so either YOU can include cljsjs.create-react-class OR let the library do that

thheller08:09:18

if you do it you must ensure that you do it before including it before any of the library code since it may try to access it directly

ghiden08:09:33

but this library depends on 'creatReactClass', how do i export this variable?

thheller08:09:05

the code above does that

thheller08:09:13

(js/goog.exportSymbol "createReactClass" create-react-class)

ghiden08:09:36

ok, i'll try

ghiden08:09:44

thanks for your help

ghiden08:09:53

you are always helpful!

thheller08:09:54

but it'll probably not work if you publish to npm

ghiden08:09:09

i thought so

thheller08:09:15

npm doesn't like exporting to global

ghiden08:09:51

what's the best way to create a react component?

thheller08:09:52

so thats a limitation of the library. since it shouldn't use the global in the first place

thheller08:09:02

just use create-react-class directly

ghiden08:09:23

from react?

thheller08:09:24

(create-react-class #js {:render (fn [] (this-as this ...))})

ghiden08:09:50

then you can't use hiccup style and have to fill lots of gaps

ghiden08:09:06

i guess that's the price you have to pay?

thheller08:09:32

if you want hiccup style my not use reagent?

ghiden08:09:00

i tried reagent but couldn't export as react component

thheller08:09:28

and did you ask them?

ghiden08:09:33

react didn't see it as a react component

ghiden08:09:48

no i didn't

ghiden08:09:03

i guess no one is trying to do such things

ghiden08:09:29

it's a very niche needs that i have to achieve

thheller08:09:11

well its a self imposed problem due to hiccup-style which I personally got rid off for the most part due to overhead

thheller08:09:21

but as I understand it

thheller08:09:55

you can call (reagent.core/as-element [your {:hiccup "stuff"}]) and that will return a react element

thheller08:09:21

so if you need a "component" (defn ^:export my-component [props] (r/as-element [...]))

ghiden08:09:17

as-element works

thheller08:09:30

there is also

ghiden08:09:20

tried that one too and react didn't recognize as component

thheller08:09:20

is that not recognized by react?

ghiden08:09:35

i used "render" not reagent-render

thheller08:09:55

yeah dunno. as-element should be fine for whatever

ghiden08:09:01

it seems that deref is not working

ghiden08:09:28

as-element works but you can't retain local state

thheller08:09:25

I got absolutely no clue about reagent. go ask in #reagent

ghiden08:09:36

yep, thank you

ghiden08:09:55

that function I haven't tried so i will check it out

ghiden08:09:06

by the way, so you write everything manually?

ghiden08:09:21

render and stuff?

thheller08:09:11

if you upgrade to 2.6.7 and run shadow-cljs server and open you can see the shadow-cljs UI preview I'm working on

thheller08:09:01

this is a preview though so the UI is pretty darn ugly

ghiden08:09:27

shadow-client

ghiden08:09:49

is this production ready?

thheller08:09:31

I use it in production yes. I doubt that anyone else does though. 😉

thheller08:09:37

never talked about it much

ghiden08:09:05

definitely i'll check it out

ghiden08:09:01

danke schoen

😎 4
ghiden09:09:28

reactify-component is working! thanks!

hlolli09:09:30

Is there a way to set goog.global to empty js-object at compile time. I'm trying to compile advanced and my regex replace hook won't cut it then.

thheller09:09:02

that will break many things. why would you though?

thheller09:09:10

ie. it will break core.async

thheller09:09:24

closure uses goog.global.setTimeout etc

hlolli09:09:25

it's again this worklet environment I'm working with.

hlolli09:09:39

well, didn't break anything the regex replace.

hlolli09:09:56

not using any setTimeout, it's not allowed to be used there

thheller09:09:04

yeah if you use no code that uses it then yes that won't break

thheller09:09:08

but still .. its dangerous

thheller09:09:13

why is it important?

thheller09:09:38

just don't use goog.global and there should be no problem?

hlolli09:09:44

it won't find process or window. it tries to assign the variable still

thheller09:09:04

goog.global = this is the default

hlolli09:09:10

I think shadow or something uses it to write to it, it if's just an empty object it will work.

thheller09:09:14

so it just will be nil?

hlolli09:09:21

yes it will be nil

hlolli09:09:28

would prefer it to be #js {}

hlolli09:09:08

this is my hook (string/replace slur "goog.global=this" "goog.global={}")

thheller09:09:09

well did you figure out what it writing to it?

hlolli09:09:31

hmm I did figure it out and forgot hehe, I can look

thheller09:09:53

so the hook you are probably just calling in the wrong place

thheller09:09:02

ie. after optimizations it won't be called that

hlolli09:09:09

ah! good point

hlolli09:09:14

I could call it earlier

hlolli09:09:30

I tought maybe there was some option I could use for this

thheller09:09:51

there is not no

thheller09:09:16

I hacked that once or twice before though

thheller09:09:48

still do I guess

thheller09:09:35

you can do it in a hook although it won't be pretty (as there is no official API for this yet)

hlolli09:09:52

If I regex replace before optimization, should I spit the result to a disk or change the build-state object that I return?

thheller09:09:32

(update-in build-state [:output [:shadow.build.classpath/resource "goog/base.js"] :js] str/replace ... ...)

hlolli09:09:09

bingo, thanks for posting the *-in path, saves me time 🙂

thheller09:09:28

call that in a build hook in :compile-finish stage

thheller09:09:05

may need to adjust you regex though since I think it has spaces by default

hlolli09:09:45

yupyup, thanks!

hlolli09:09:59

4wiw, this is a snippet that calls goog.global for example

//iter.js
goog.iter.StopIteration = ('StopIteration' in goog.global) ?
    // For script engines that support legacy iterators.
    goog.global['StopIteration'] :
    {message: 'StopIteration', stack: ''};

Hukka12:09:03

@thheller Is it possible to use the :closure package provider for only some of the npm dependencies, that are known to survive advanced compilation?

thheller12:09:36

say react is compatible but some react-lib you are using is not. react-lib would call the non-optimized react and go boom

thheller12:09:50

making it a per-module setting would be a nightmare to configure

thheller13:09:39

I made a short video preview for the UI work I've been doing recently if someone is interested https://www.youtube.com/watch?v=gyqzLE1VU0s

thheller13:09:50

feedback very welcome. I'll post it to the forums soon I guess.

👍 52
codonovan16:09:26

Does shadow-cljs support anything like Leins checkout dependencies? https://goo.gl/UajWqf

thheller16:09:37

@codonovan you can just add the :source-paths to your config manually. otherwise no.

codonovan16:09:37

Cheers. I'll have a look at doing that

thheller16:09:45

if you just add the usual dependency but also add the source path the files from the source-path will be used over the files in the jar

thheller16:09:11

otherwise using lein or deps.edn works too

codonovan16:09:44

I'd totally missed the Leiningen integration part in the docs, reading through that now 🙂

Pontus17:09:41

Hello, I'm using shadow-cljs with fulcro for my app. I've started experimenting with Gatsby (https://www.gatsbyjs.org/) to generate the static pages for my app (login/registration/landing-page/pricing etc), which I write in JavaScript. The idea is to have a static page as the entry point to the application, instead of the server rendered html I currently have. I thought perhaps I could just build my clojurescript app as an npm module (like described here: https://shadow-cljs.github.io/docs/UsersGuide.html#_convenience_mode) and it does seem to almost work, I can import it from node_modules in gatsby -- but when I try to mount it I just see the application for a brief instant and then it disappears -- and then I get a bunch of errors in the console: Uncaught ReferenceError: clojure is not defined in var G__15382__$1 = (((G__15382 == null))?null:clojure.string.replace(G__15382,/[#\*_^\-\\[\]=>~]/,""));` and similar errors. Could someone point me in the right direction from here to make it work? Also, I don't know if building an npm module is even the right approach here, I'm just experimenting a bit.

thheller18:09:52

@pontus.colliander can you tell which file fails? the file may just be missing the require for clojure.string

thheller18:09:25

which works ok in the browser but not for npm

thheller18:09:03

ie. is the file calling (clojure.string/replace ...) directly or (str/replace ...) via an alias

Pontus18:09:48

yeah it's calling clojure.string/replace directly, I didn't require it

thheller18:09:11

adding a proper require should fix that then

Pontus18:09:20

cool, I'll try that, thanks!

Pontus18:09:27

yep it worked

wilkerlucio19:09:52

@codonovan another way is using deps.edn, you can use :local/root and point directly to the folder, this way you get source paths and depencies

wilkerlucio20:09:11

IME lein checkouts + cljs don't play nice together

thheller20:09:34

@wilkerlucio how come? I have been using checkouts with cljs code since basically the beginning of my cljs work?

wilkerlucio20:09:32

you did? every time I tried that it always got the wrong deps, but I'm talking about figwheel times, I guessed that since the classpath calculation is the same (from lein) it would be the same results, but maybe shadow does something different?

thheller20:09:14

no idea about figwheel but yeah shadow may handle this differently

wilkerlucio20:09:03

glad to hear it works on shadow, I might try again sometime 🙂

royalaid15:09:37
replied to a thread:

@thheller Hey, I tried out these recommendations and it didn’t seem to work still, same problem highlighted here https://github.com/vvvvalvalval/scope-capture/wiki/Pitfalls-with-(browser-connected)-ClojureScript-REPLs#constraints-to-abide-by, no codesite, I will try to push a clean template that replicates the issue soon.