Fork me on GitHub
#shadow-cljs
<
2020-01-21
>
Eric Ihli02:01:41

How would I delete something from the require cache in shadow-cljs/react native? Trying to time how long it takes to require a really big json object.

delete require.cache[require.resolve('./b.js')]

thheller08:01:57

@ericihli I doubt react-native can do that. shadow-cljs is not part of that loading process once metro is done

Filipe Silva14:01:50

I have a codebase that I am updating from shadow-cljs 2.8.67 to 2.8.83 (latest)

Filipe Silva14:01:27

when this codebase is compiled in release mode, it shows an error at runtime that seems related to module loading

Filipe Silva14:01:58

(this log is obtained with :pseudo-names true :pretty-print true on the compiler options)

Filipe Silva14:01:28

main.js:158 Error: 1
    at main.js:3498
    at $goog$module$ModuleLoadCallback$$.execute (main.js:17943)
    at $JSCompiler_StaticMethods_callCallbacks_$$ (main.js:3444)
    at $goog$module$ModuleInfo$$.$APP.$JSCompiler_prototypeAlias$$.onError (main.js:17977)
    at $JSCompiler_StaticMethods_dispatchModuleLoadFailed_$$ (main.js:3613)
    at $JSCompiler_StaticMethods_requeueBatchOrDispatchFailure_$$ (main.js:3579)
    at $goog$module$ModuleManager$$.$APP.$JSCompiler_prototypeAlias$$.$handleLoadError_$ (main.js:18099)
    at $JSCompiler_StaticMethods_evaluateCode_$$ (main.js:4227)
    at $goog$module$ModuleLoader$$.$APP.$JSCompiler_prototypeAlias$$.$handleSuccess_$ (main.js:18605)
    at $JSCompiler_StaticMethods_fireListeners$$ (main.js:3882)

Filipe Silva14:01:25

it's not super clear to me how to proceed in debugging it, or what might have changed between these versions of shadow-cljs

Filipe Silva14:01:03

does anyone know what it might relate to, or how I can discover what it relates to?

thheller14:01:09

BTW you can run shadow-cljs release app --pseudo-names to set those options. don't need to actually put them into the config

❤️ 8
thheller14:01:16

but no I don't know what that is

thheller14:01:47

the closure-library/compiler were updated inbetween those versions so maybe the affects things

thheller14:01:16

just open chrome, check the "pause on exception" thing and try to figure out whats wrong from there

Filipe Silva14:01:54

will do, thank you

Filipe Silva14:01:04

hm yeah, I found something that might make sense

Filipe Silva14:01:05

$APP.$cljs$spec$alpha$t_cljs$0spec$0alpha62946$$.prototype.$cljs$spec$alpha$Spec$gen_STAR_$arity$4$ = $JSCompiler_unstubMethod$$(6, function($_$jscomp$256$$, $overrides$jscomp$11$$, $path$jscomp$62$$, $rmap$jscomp$11$$) {
  return $APP.$cljs$core$truth_$$(this.$gfn$) ? this.$gfn$.$cljs$core$IFn$_invoke$arity$0$ ? this.$gfn$.$cljs$core$IFn$_invoke$arity$0$() : this.$gfn$.call(null) : $APP.$cljs$spec$alpha$re_gen$$(this.$re$, $overrides$jscomp$11$$, $path$jscomp$62$$, $rmap$jscomp$11$$, $APP.$cljs$spec$alpha$op_describe$$(this.$re$));
});

Filipe Silva14:01:32

TypeError: Cannot read property 'prototype' of ...

Filipe Silva14:01:58

updating shadow-cljs probably brough a new version of spec (because we didn't pin it)

Filipe Silva14:01:12

and spec might have change alpha changes

Filipe Silva15:01:36

yeah it seems to break when going from 2.8.71 to 2.8.72, which is when shadow updated cljs to 1.10.597

thheller16:01:31

@filipematossilva maybe try setting :compiler-options {:output-wrapper false} in case you are using multiple :modules

👍 4
thheller16:01:58

that default changed to true as well (which is where the $APP comes from

Filipe Silva16:01:52

hmm doesn't seem to make a difference

Filipe Silva16:01:01

the code changes, but the error is still the same

Filipe Silva16:01:04

$cljs$spec$alpha$t_cljs$0spec$0alpha28640$$.prototype.$cljs$spec$alpha$Spec$gen_STAR_$arity$4$ = $JSCompiler_unstubMethod$$(6, function($_$jscomp$322$$, $overrides$jscomp$11$$, $path$jscomp$62$$, $rmap$jscomp$11$$) {
  return $cljs$core$truth_$$(this.$gfn$) ? this.$gfn$.$cljs$core$IFn$_invoke$arity$0$ ? this.$gfn$.$cljs$core$IFn$_invoke$arity$0$() : this.$gfn$.call(null) : $cljs$spec$alpha$re_gen$$(this.$re$, $overrides$jscomp$11$$, $path$jscomp$62$$, $rmap$jscomp$11$$, $cljs$spec$alpha$op_describe$$(this.$re$));
});

include17:01:55

Hi. Can someone point me a simple tutorial on how to spin-up a new shadow-cljs project with +re-frame dep? I was flowing http://shadow-cljs.org but now success... thanks :)

include17:01:53

hi @thheller thanks fro your reply 🙂 So I saw that repo and I can run lein new re-frame foobar so the process to integrade shadow-cljs comes next?

thheller17:01:00

no the template already has everything setup

include17:01:54

arrrggg... you are super right... I miss the "The base template includes..." text... arrgggg

thheller17:01:58

just run cd foobar and npm install npx shadow-cljs watch app

include17:01:02

@thheller yes got it 🙂 let me see if I can repl this

include18:01:40

running npm install (I am behind a mad proxy that blcoks me everything suspicious... lets see if i can get it here)

thheller18:01:40

I think there is also lein dev but you are going to need npm for react/react-dom anyways so ... 😛

include18:01:40

I see some of them being installed 🙂 hope it works... I really need to start learning cljs 😄

include18:01:08

(I am running this under a very old WSL setup with linuxbrew ... /me cuts wrists

include18:01:02

Hello from re-frame

include18:01:46

@thheller thanks. it's working. Yes lein dev does the trick also.

Aleed19:01:03

does shadow-cljs only have built in support for expo? (not react native itself, once you eject)

darwin19:01:50

just wondering if there is any way how to affect convert-sources-simple* to not remove names from “anonymous” functions, e,g, when passing function myName(…) {} as a callback parameter, google closure rewrites it into function (...) {}, I understand that the name is not needed, but I have a special case where I need it, react devtools use that name for display in component tree

lilactown19:01:50

@darwin it should only do that rewriting when using optimizations. presumably you would want to use React devtools during dev, when you aren’t using optimizations?

lilactown19:01:19

(clarified message above)

darwin19:01:36

@lilactown I looked through the shadow-cljs code and it seems that shadow is using closure compiler in :simple mode to transform all stuff required via npm - that is also reason why it is minified (speaking about dev mode)

thheller19:01:49

@alidcastano shadow-cljs doesn't care at all. both expo and react-native work fine. I made some demos a while ago https://github.com/thheller/reagent-react-native or https://github.com/thheller/reagent-expo

Aleed20:01:16

ah interesting. I couldn't get hot reloading to work when using bare react native, but will make sure to look at example and try again. thanks!

thheller20:01:48

yeah you need some kind of helper since react-native doesn't allow switching the root component

👍 4
thheller20:01:43

others have written other implementations, don't know where they are though

thheller20:01:56

I don't use react-native so there may be other/better ways

🆗 4
Eric Ihli21:01:49

Here's my implementation, heavy with comments (not necessarily all correct). https://github.com/eihli/cljs-react-native-starter/blob/master/src/example/core.cljs

Eric Ihli21:01:05

I also refer to this repo on occasion https://github.com/status-im/status-react It's a good example of a quite large app. Good ideas for structuring as you grow.

Aleed21:01:16

great, thanks for the examples

darwin19:01:36

maybe I could use :js-options :resolve in this special case and point to raw sources I see in the npm package, but I’m not sure how to specify path in :resolve

darwin19:01:46

and even when using :resolve it would still use closure?

lilactown19:01:01

here’s an example of a reagent component, and then two components imported from NPM. the names are maintained

thheller19:01:47

@darwin :js-options takes all the regular :compiler-options. don't know why it removes names, are you sure they aren't already gone when using the npm package? maybe that has minified sources?

darwin19:01:09

@lilactown most names are maintained because those are class names or function components referenced elsewhere in the code

thheller19:01:16

:resolve only affects where the source comes from, it does not change how it is processed

darwin19:01:49

@lilactown but some (small) number of componentc coud be implemented as “anonymous” functions with this name being stripped

darwin20:01:58

@thheller ok, thanks for answers, I saw that in the code that it merges :js-options without :resolve key, I tried :optimizations :none as my first step and it seems to not affect the output

darwin20:01:23

I’m 100% sure that the raw package tar does not contain the minified soures and the names I care about are present there

darwin20:01:47

what about the babel? is it applied in this case? or it is applied only when requiring direct js files?

darwin20:01:55

maybe babel is responsible for this

thheller20:01:16

it is applied to ESM modules in node_modules only

thheller20:01:44

maybe try :js-options {:variable-renaming :off}, defaults to :local in :simple

darwin20:01:49

@lilactown just FYI, this is the issue I’m after: https://github.com/react-spring/react-three-fiber/pull/284/files#diff-d81b214c993ae261a5867e92ef560fa8R44 they merged my requests, but I’m unable to get it through shadow, because something (closure-or-babel) is stripping those names even in dev mode

thheller20:01:42

maybe that does something?

darwin20:01:43

hmm :variable-renaming :off didn’t help, it was a good try btw. I’m always deleting both .shadow-cljs and out directory, just to be sure no caches confuse my results

thheller20:01:13

doubtful that matters .. cache invalidated if you change options

thheller20:01:56

maybe the closure CompilerOptions has a setting thats just not exposed from the config

thheller20:01:25

it has like a million settings. if you find one that applies I can easily add it

darwin20:01:53

ok, thanks, I will tinker with it, there must be a way

darwin20:01:14

:js-options {:anon-fn-naming-policy :unmapped} helpful, it gives all anonymous functions names of variables/keys which appear immediately before such anon function, in my case it gives them the exact names I want but I’d like to have option to keep original names and maybe generate a new one only when there is no name in the first place

thheller21:01:29

and that would suggest that :anon-fn-naming-policy :mapped or :unmapped should prevent the renaming?

thheller21:01:47

I'd expect it to keep the original name if it exists?

darwin21:01:44

I think that anon-fn-naming policy would preserve the names, but some other previous pass removes them, so it sees no names and generates its own

darwin21:01:49

but maybe I’m wrong, I have to test it

darwin21:01:00

btw. https://gist.github.com/darwin/c75123726c56e965623eba07aa660e1b did what I wanted, but you might be right that that disables a lot of other stuff I would rather don’t touch

thheller21:01:25

did you try :optimizations :whitespace?

thheller21:01:49

:simple is kind of required but if you don't care about loading extra deps in dev it should be fine

darwin21:01:51

I tried :js-options :optimizations :none and that did nothing

thheller21:01:27

what is it supposed to do? :none is not a thing in the closure compiler world

thheller21:01:42

its a CLJS only setting to literally not invoke the closure compiler at all

thheller21:01:59

so it'll end up using whatever defaults the closure compiler has

thheller21:01:18

no clue what those are but its not a reliable setting to use

darwin21:01:56

I’m a bit puzzled, now I’m trying to modify raw sources in node_modules, just to test different scenarios and it looks like my changes are not being picked up

darwin21:01:03

maybe it is time to go to bed 🙂

darwin21:01:38

optimizations whitespace are not allowed

thheller21:01:53

oh hehe right

thheller21:01:06

I disabled it because :simlpe is required for things like react

thheller21:01:15

otherwise it'll load both the dev and production variants

darwin21:01:07

could you confirm that shadow feeds closure with raw files from node_modules? or where is the source?

darwin21:01:21

it looks like my changes in node_modules have no effect, maybe I’m touching wrong files, but that is unlikely, I don’t see anything similar around

thheller21:01:02

it wraps the sources

thheller21:01:08

which file did you touch?

thheller21:01:27

quick look suggests it only includes the web.cjs.js file

darwin21:01:58

examples/node_modules/react-three-fiber/web.js and examples/node_modules/react-three-fiber/web.cjs.js

darwin21:01:21

the generated output from shadow looks like it took web.js

darwin21:01:43

because web.cljs.js has some transformations which are not present in shadow’s output

thheller21:01:27

only if you configured it to use the module entry then it'd use web.js

thheller21:01:33

otherwise it'll default to web.cjs.js

thheller21:01:35

"main": "web.cjs.js",
  "module": "web.js"

thheller21:01:42

by default it uses main

thheller21:01:58

unless you directly include react-three-fiber/web (or any lib)

darwin21:01:53

ah, my bad, there are two places with similar code, I was dancing at the wrong location

darwin21:01:28

now it makes sense, let me do another round of tests to confirm if :anon-fn-naming-policy respects original names

darwin21:01:24

ok, confirmed, case closed :anon-fn-naming-policy :unmapped assings names to anon functions only if there is no previous name

darwin21:01:00

so original names are kept and some new might get generated based on original sources which doesn’t hurt

darwin21:01:19

thanks a lot for the help