Fork me on GitHub
#figwheel-main
<
2018-08-28
>
onetom06:08:49

@bhauman i was trying to use background builds before but then u just came out with the extra mains feature, so i switched quickly.

henryw37411:08:12

Hi, I can't work out how to use devcards with figwheel-main... Please post some config if you have it. Thanks

henryw37412:08:44

It's ok, I've figured it out.

onetom12:08:10

what was the issue?

henryw37406:08:53

Just needed an all the bits in place, thanks for the demo

onetom12:08:48

I've put together an example repo and documented the assembly process

onetom12:08:09

The very last step when I'm adding devcards to the mix is not complete, but I had it working in other repos so I will finish it up in the following few hours.

👍 4
henryw37406:08:42

I thought /start-devcard-ui! Is a macro

pesterhazy13:08:24

New demo app for Reagent SPAs based on fighwheel.main: https://github.com/pesterhazy/cljs-spa-example - comments welcome

3
onetom14:08:18

Skimmed thru the readme. It's very exciting already to see a properly documented rationale! I will definitely dive deeper into it.

bhauman15:08:33

@pesterhazy the new :npm feature could get rid of your need to do :foreign-libs

bhauman15:08:21

the assignment syntax in your library.js would have to change from window["React"] = to window.React =

bhauman15:08:51

fantastic writeup though!!

pesterhazy15:08:57

thanks! 🙂

bhauman15:08:44

would love to here about how it works for you 🙂

pesterhazy15:08:54

Re: the dot syntax, given that many (most?) npm deps have dashes in their names, like react-select, how does this work with the npm config option?

bhauman15:08:42

I change things to CamelCase

bhauman15:08:11

I rely on the convention of kebab-case getting changed to camel case

bhauman15:08:39

Ie “react-dom” => window.ReactDom

pesterhazy15:08:24

Right, I guess that ought to work in most cases

pesterhazy15:08:38

I'll give it a try

pesterhazy16:08:01

@bhauman Trying it now. One problem is that Reagent 0.8+ expects a dependency named "create-react-class", hence this line in the global-exports: https://github.com/pesterhazy/cljs-spa-example/blob/master/dev.cljs.edn#L7

pesterhazy16:08:41

Also the npm options seems to override rather than complement an existing :foreign-libs key. I tried to fix the "No such namespace: create-react-class" error like this:

:foreign-libs [{:file "doublebundle/empty.js",
                 :provides ["empty.empty"]
                 :global-exports {create-react-class createReactClass}}]
but that doesn't seem to have any effect

bhauman16:08:55

oh that’s not good

bhauman16:08:02

lemme check

bhauman16:08:03

@pesterhazy it doesn’t override the other foreign-libs but the ClojureScript compiler might

bhauman16:08:13

@pesterhazy I think the solution to this is simple

bhauman16:08:33

I should support the window["create-react-class"] syntax as well

bhauman16:08:23

@pesterhazy if you look at the result of -pc it should list both foreign libs entries

pesterhazy16:08:21

Hm... clojure -m figwheel.main -pc doesn't take dev.cljs.edn into account, and clojure -m figwheel.main -b dev -pc is invalid

bhauman16:08:48

sorry the -pc comes before -b

bhauman16:08:03

its an init opt and -b is a main opt

bhauman16:08:07

I’m fixing the npm option right now to handle the window.[“create-react-class”] case

pesterhazy16:08:41

(the distinction between different classes of options is pretty subtle though, I guess inherited from cljs.main)

bhauman16:08:00

inherited from clojure.main

bhauman16:08:37

the problem being that we need to accept arbitrary args after the main arg

bhauman16:08:57

or the script arg

bhauman16:08:30

thanks for looking at this I wanted to talk to you about it sooner

pesterhazy16:08:06

I had a typo before

bhauman16:08:01

and I’m now supporting the other syntax

pesterhazy16:08:16

the npm option creates these provides

{react React,
    react-dom ReactDOM,
    create-react-class createReactClass,
    router5 Router5,
    router5browser-plugin Router5BrowserPlugin,
    noty Noty}

pesterhazy16:08:30

router5browser-plugin is a bit surprising

bhauman16:08:01

ahh handn’t acounted for numbers

bhauman16:08:24

try 0.1.9-SNAPSHOT

bhauman16:08:01

and you should be able to use the window["asdf"] syntax

bhauman16:08:34

I’ll look at router5 in your example

pesterhazy16:08:56

not sure if there's a better way to mangle that name

bhauman16:08:36

I just fixed that number case but it shouldn’t matter, if you go back to the window["asdf"] syntax

bhauman16:08:57

as it will just use that explicitly

bhauman16:08:09

@pesterhazy well that’s a little scary 🙂

pesterhazy16:08:03

great, I'll merge the PR once 0.1.9 gets released so people don't have to deal with SNAPSHOT versions

bhauman16:08:37

I just deployed the kebab-case number fix

bhauman16:08:19

Also in 1.9 is another cool feature

bhauman16:08:50

you can use clj -m figwheel.main -m example.tests as a test runner

bhauman16:08:05

that will exit with a failure

bhauman16:08:51

and it supports async execution

bhauman16:08:26

so if you (defn -main [& args] (run-async-tests 5000)) it will find and run all your tests

bhauman16:08:07

and exit with a failure

bhauman16:08:55

the only problem I have ot fix for this to be sweet is to allow you to launch whatever environment you want to run the tests in

bhauman16:08:16

I’m thinking about having a --launch-script cli and figwheel option that can take the name of any script and it will receive either the url or path to the js to run

bhauman16:08:48

there are just way to many ways to run javascript headless

bhauman16:08:07

and each of those ways has soooo many options

bhauman16:08:11

I could support one good option like chrome headless, but even then it takes a bunch of flags

bhauman17:08:15

but it would be great to just be able to run your tests without needing to start up node as an managing environment

pesterhazy17:08:48

yes that would be great

pesterhazy17:08:18

lein doo is quite fickle in my experience — I expect that there's a lot of complexity behind the scenes

pesterhazy18:08:17

@bhauman I created a branch for prod builds using figwheel main, seems to work great. See https://github.com/pesterhazy/cljs-spa-example/pull/6/files - curious if there's anything you'd do differently

bhauman18:08:36

I’d use -bo prod

bhauman18:08:20

and I’m wondering why you added the :output-to to dev

pesterhazy18:08:04

because I wanted to use the same index.html for prod and dev builds

pesterhazy18:08:27

and output-to defaults to cljs-out/dev-main.js

pesterhazy18:08:40

good point about -bo, I thought I'd tried that but apparently not, it works now

pesterhazy18:08:28

is there a way to avoid duplicating keys like :foreign-libs in prod.cljs.edn and dev.cljs.edn?

pesterhazy18:08:03

i know this will go away when the npm branch is merged, but this is just an example

bhauman18:08:53

I’m going to have an :extra-foreign-libs that will work the way you want it

bhauman18:08:13

the codes already written I just need to integrate it

bhauman18:08:24

oh wait 🙂

pesterhazy18:08:29

I think I won't need that necessarily (the npm option seems to work fine)

bhauman18:08:48

you can to this now -bo dev:prod

pesterhazy18:08:50

my question was about duplication configuration in two .cljs.edn files

bhauman18:08:56

to merge cljs.edn files

pesterhazy18:08:25

oh yeah? *tries it*

bhauman18:08:02

and you can do that with -b as well

bhauman18:08:37

and that’s why there will be :extra- config options

pesterhazy18:08:47

I could even have -b common:dev and -bo common:prod

pesterhazy18:08:27

nice, works like a charm

bhauman18:08:48

and remember the -pc option is there to validate it

bhauman18:08:27

I’m sooo much happier with this tooling

pesterhazy18:08:59

yeah me too. Visibility makes things much smoother

bhauman18:08:00

being able to express your needs better through the CLI is key

bhauman18:08:09

absolutely

bhauman18:08:57

I’ve got tons more docs to write

bhauman18:08:22

also I’m going to need a designer for the figwheel landing page

pesterhazy18:08:18

I'm convinced that fighweel main will be the best choice for most CLJS projects (browser, node, electron or RN) within the year

bhauman18:08:39

I’d love to have first class react native support

pesterhazy18:08:12

re-natal is basically Figwheel plus a small customization to the figwheel bridge

pesterhazy18:08:26

all the heavy lifting is done by Figwheel

pesterhazy18:08:51

so it should be relatively easy to port to figwheel main (famous last words)

bhauman18:08:26

yeah its the other stuff, the file generation and other bits that are kinda nasty

lxsameer18:08:37

hey @bhauman, It's silly question but what's the key name for figwheel configuration on lein ?

bhauman18:08:01

:figwheel ?

pesterhazy18:08:19

re-natal's file generation honestly I think I could live without. I'm not sure why it duplicated lein new

bhauman18:08:21

and for builds it goes in :cljsbuild

bhauman18:08:49

Here’s a React Native tool that looks very promising

pesterhazy18:08:10

ah nice, I didn't know about that

lxsameer18:08:22

I'm a bit confused. should I pass :output-to to :cljsbuild like lein-figwheel or to :figwheel ?

bhauman18:08:47

oh your using figwheel main?

bhauman18:08:14

there is no configuration in the project.clj for figwheel.main

bhauman18:08:00

and :output-to always goes in the dev.cljs.edn

lxsameer18:08:49

cool thanks, It's seems that I didn't use cljs for a long time 😞

👍 1
dnolen20:08:43

:watch-dirs behavior - I’m assuming figwheel doesn’t want js files changes by default?

bhauman20:08:30

@dnolen it should respond to changes to js files

bhauman20:08:43

if they are being watched

bhauman20:08:51

and if they have a provide

bhauman20:08:11

let me check

dnolen20:08:22

you can’t run a shell script before the build starts right?

bhauman20:08:06

each build or the first build?

dnolen20:08:21

hrm actually never mind

dnolen20:08:43

I just want to see if I could trigger the webpack dev bundle

dnolen20:08:53

but that takes ~800ms itself, not worth it

bhauman20:08:26

that may be an interesting background process

bhauman20:08:47

does webpack have a watcher?

dnolen20:08:41

hrm, it probably does

bhauman20:08:25

otherwise you could add an --init that watches and bundles

bhauman20:08:38

or some such thing

lxsameer21:08:23

hey folks, when i run lein trampoline run -m figwheel.main -b dev -r i get this error:

lxsameer21:08:30

[Figwheel] Compiling build dev to "resources/public/js/compiled/app.js"
[Figwheel] Failed to compile build dev in 0.499 seconds.
[Figwheel] Compile Exception: com.cognitect.transit.TransitFactory.writer(Lcom/cognitect/transit/TransitFactory$Format;Ljava/io/OutputStream;Ljava/util/Map;Lcom/cognitect/transit/WriteHandler;Ljava/util/function/Function;)Lcom/cognitect/transit/Writer;
[Figwheel:SEVERE] java.lang.NoSuchMethodError: com.cognitect.transit.TransitFactory.writer(Lcom/cognitect/transit/TransitFactory$Format;Ljava/io/OutputStream;Ljava/util/Map;Lcom/cognitect/transit/WriteHandler;Ljava/util/function/Function;)Lcom/cognitect/transit/Writer;
[Figwheel] Starting Server at 

lxsameer21:08:51

but the server is spinning and i can connect to figwheel server

lxsameer21:08:02

my build configuration is like:

lxsameer21:08:17

^{:watch-dirs ["src/cljs"]
  :css-dirs ["resources/public/css"]}
{:main ocean.core
 :output-to "resources/public/js/compiled/app.js"
 :output-dir "resources/public/js/compiled/output"}

bhauman21:08:29

@lxsameer this is a dependency conflict problem

bhauman21:08:47

make sure you are using the latest version of clojurescript

bhauman21:08:56

and that you are using clojure 1.9

lxsameer21:08:10

I'm using 1.10.339

lxsameer21:08:27

and clojure 1.10.0-alpha6

lxsameer21:08:45

let me switch back to 1.9

bhauman21:08:47

yeah so not sure about what’s causing the problem

bhauman21:08:09

but there is obviously a conflict in transit dependencies

lxsameer21:08:47

hmmm cool, I'll find it then

lxsameer21:08:47

is there any way to limit the jetty logs to errors only ? I used :log-level in figwheel.main configuration but it doesn't work