look! playing with parinfer in my devtools console 😝 https://dl.dropboxusercontent.com/u/559047/poc-parinfer-prompt-in-devtools-01.png

my god, that’s cool

i was just reading your email

it’s been a while since I’ve seen cljs-devtools, looks like it’s come really far since then

I just discovered this channel after sending the email

we can communicate here in the open

I just want to add few bits into devtools, to improve cljs experience a bit more with chrome

nothing big, just few tweaks here and there, for example using custom formatters for inline values in source code view

yeah, that’s a big deal

the local scope view is especially nice

yeah, speaking about local scope, I will sort local scope view to put nice variables at the top, and macro generated below

you know, all the garbage with underscores and dollars

https://dl.dropboxusercontent.com/u/559047/cljs-devtools-scope.png

yeah, that’s a good idea, I guess they all end with #

not really, pounds are cljs names, they get mangled into underscores

double underscores

ah

there will have to be some heuristics, but is is proabably doable

things with underscore+number are also candidates

this will be just sorting and maybe applying some opacity, so no big deal

there can be some mistakes

right

would be nice to get auto-completions from REPL, but that looks like a bigger project

figwheel does not offer this in its REPL

for this proof-of-concept I want to just talk to figwheel, I don’t want to invest time into making it more general (nREPL compatible)

I’m looking at the first example https://github.com/binaryage/cljs-devtools/wiki/Figwheel-REPL-plugin

does evaluating an expression in figwheel’s repl usually result in it being logged to chrome’s devconsole?

or is this leveraging something new in figwheel

i think I’m missing something here with how the two are interacting

normal scenario: you type someting into REPL, figwheel wraps it into (pr-str (your-code)), figwheel compiles it from cljs into js,, then sends it into chrome, there it gets exectuted as javascript, result is string, which gets delivered back to figwheel repl where it gets printed

this plugin, removes pr-str wrapping and prints the javascript result into devtools console as well

cljs-devtools kicks in and shows cljs-related results in a friendly way

so this is just one way REPL -> devtools, with my devtools fork, I will close the loop: you type something into devtools console, it gets sent to figwheel server, which treats it as it was entered in REPL directly, rest it normal scenario

oh wow

parinfer will help with that devtools clojure prompt, so great, like in planck

ok, I think I understand now. figwheel is the compiler, and cljs-devtools is adding a normal view over its values

right

and soon we won’t even have to look at figwheel’s terminal, since you’ll allow normal input straight from the devconsole

exactly

and we can integrate more stuff into that devtools window

so the repl experience will be what JS developers already do in the console

there can be test runner, there can be figwheel hud, or even cuttle

yeah, this is going to be a big UX win for cljs

could be really good improvement

wow, cljs test results, figwheel hud, and build options straight from chrome devtools

I want it for my own dev workflow, iTerm2 + figwheel repl is not bad, but I’m staring on devtools most of the time

so why not having it integrated together

yeah

i don’t know much about react and redux devtools, but I think they’re tightly integrated like that

and nice part is that most of this can be implemented in cljs, it is not a big problem to combine devtools javascript code and our custom cljs pieces

yes, react devtools is actually a devtools extension, not a fork, they use extension points provided by devtools guys

mostly adding new panels into the UI

so you’re forking

recently I realized I don’t want to wait for them

I can package whole thing as a chrome extension (which will include my fork), so people can have easy path for consuming it

but you could also run a local server with the fork, devtools are just a SPA, communicating with chrome using websockets

the only drawback will be keeping the fork up-to-date with upstream changes, and fixing conflictsw

very cool

I hope it won’t be so bad

do you have a fork on github?

kinda wanna see what changes require the fork

will give you access, it is just a private repo at this point

cool thanks

I’m kind of in awe that you integrated the codemirror stuff for parinfer straight into the console, with all the highlighting stuff

like wtf

@shaunlebron: it wasn’t hard, devtools use codemirror for source code view already, and codemirror is beautifully designed

and parinfer as well

you know I thought that about codemirror

idk about parinfer… haha

I’ve never seen beautiful JS before reading codemirror’s source

but I did have to modify codemirror in one spot, with the +indenthack and some other places to allow visual selections to not disappear when losing focus (just for playback of the demos)

Marijn is/was a scheme guy

oh cool

it took me some time to realize that bracket matching has some parinfer-related tweaks

anyway, I think all the edits have to do with playback features that you won’t care about

you should pull that file out of codemirror directory, to make it more obvious

yeah, that too

yeah, not a bad idea, I think I might’ve thought it had to be in that directory

ah, ok, I’m not sure

yeah, I never really intended for the codemirror stuff to be used external to this site demo since it was getting hacky in places

hence my surprise

sure, I understand, it was easier than expected, maybe I will bend it to my needs in the future, but it was a good starting point

btw. one discovery, "Shift-Tab" “indentLess” can be put into extraKeys

you don’t have to alter global default keyMap

but this is not really issue for your use case

I should isolate my CodeMirror interactions from devtools guys, we share one js/CodeMirror

oh, nice

maybe later we can extract independent parinfer+codemirror code, for other people to use

I think someone was working on a proper codemirror addon

not a big priority, this all is just proof-of-concept code, it can be ugly

I mean the parinfer integration on my side

oh, @hmadelaine said he might look at creating a proper codemirror addon, so you might be able to use that

cool

alright, I gotta head out for the night

but yeah, great stuff, excited to see cljs tooling move into the devtools space

like i said, it’ll be a huge ux win to have a default-feel for cljs in browser dev

cool, thanks for all your hard work on parinfer and other projects

talk later

you too man, later

@shaunlebron: spent a bunch of time looking at this line https://github.com/shaunlebron/parinfer/blob/master/lib/src/parinfer/reader.cljc#L95

@shaunlebron: when you have time, can you explain why you’d call `(select-keys state [:x-pos :ch])’?

state doesn’t have keys :x-pos and :ch

hmm

@dongcarl the whole indent mode “state” is passed to push-char as the first argument

right

which is then passed to push-char*

right, so x-pos is the column number, and ch is the current character we are on

these are set at process-char

https://github.com/shaunlebron/parinfer/blob/a7e0dba4e5389795eed4133a15e3f541f0a1b65d/lib/src/parinfer/indent_mode.cljc#L286

okay, so you added things onto the map that was originally initial-state?

select-keys just creates a new map from the given keys, a subset

yes, the process functions assoc the given state with new information

okay so let me get this right

there are :x-pos :ch :indent-delta keys in the large state

but those keys are also in each element of the :stack key in the large state?

exists, I mean, values aren’t the same obviously

and the :x-pos :ch :indent-delta keys were added to the large state in process functions

so the large state has a lot of things, from initial-state

the stack needs to pull information from the current character to track them

so pushing a character involves pushing some info about that character (`x-pos`, ch and sometimes indent-delta)

okay. Was what I said above correct though? Are there misconceptions?

yes

correct

Awesome. Thanks for the help

shaunlebron: also I’ll have the repo set up sometime so you can keep your list updated

cool, feel free to call me on goog hangout for questions like this

though here on slack is fine too for public record

i usually find communication on these kinds of things easier through voice though

shaunlebron: one more quick question

is conj the same as merge?

it can be, that’s kind of confusing

conj means to add an element to a collection

merge merges two collections

in what context

https://github.com/shaunlebron/parinfer/blob/master/lib/src/parinfer/reader.cljc#L95

same line

[ {} {} {} {} ]

so the stack is just a vector of maps

right

(conj [] {})

=> [{}]

okay and it puts it at the front?

conj chooses the operation most efficient for the collection type

for vectors it is added to the end

okay does it matter for our case if it’s at the front or the back?

the stack is a vector, so conj adds to the end, and pops from the end

(conj [a] b) => [a b]

(pop [a b]) => [a]

I thought you said it pops from the end?

yeah

does the example contradict that

oh

(peek [a b]) => b

ah! I see!

yeah, pop returns the new stack

awesome thanks!

yeah, I hope the push-char* makes sense

it’s reacting to different characters in different ways, hence the different defmethods

yeah clojure provides some powerful syntax

anything returned from the push-char* is merged back into the state

that’s what push-char is essentially doing, without the asterisk

awesome awesome

thanks again for playing with this

good luck on finals!

Hi @shaunlebron @darwin ! I have read you conversation, it was very interesting. I begun to isolate code-mirror related code from Parinfer-site. There is two roadblocks at the moment : First, the codeMirror patch for +identhack. @shaunlebron, do you think it could be merged into CodeMirror.js directly ? The second is the question to extract the VCR from the editor. I have to dig a little deeper to better understand Parinfer and CodeMirror.

@hmadelaine the +indenthack may be an unnecessary workaround

@shaunlebron: OK, it should simplify the dependency on codemirror

sorry, I’m having to look back at it

it’s only necessary for paren-mode

so if you type character, it preserves the indentation of the line below if the typed character shifts an open-paren after it

(foo (bar
       baz))

(food (bar
        baz))

so inserting the d will cause the second line to move forward one space to preserve the original relative indentation

but yeah, this is the use-case, but I can look at how codemirror batches changes, it drove me crazy for a little while. there may be another way

re: the vcr

@shaunlebron: thanks for the explanation

the vcr could be completely removed right?

Yes at first look

we only care about the editing, not recording

@shaunlebron: I will do a first try tomorrow morning

I think the only thing in editor.cljs that needs to be preserved is on-change and on-cursor-activity

@shaunlebron: you do not edit this code on Parinfer-site ?

sorry I don’t understand the question

@shaunlebron: I will put a first draft on github. What would be a great name ? The hardest part

ha

https://github.com/codemirror/CodeMirror/wiki/CodeMirror-addons

codemirror-parinfer probably

judging from the existing addon names

Deal

thanks!

@shaunlebron: Thanks to you !

got that repl thing working: https://dl.dropboxusercontent.com/u/559047/cljs-devtools-figwheel-repl-connection.png

everything was entered from devtools (with parinfer assitance), commands are simply echoed into figwheel REPL, @shaunlebron ^