Clojurians Log v2

@darwin: is there an easy way to steal the cljs-devtools pretty printer to use it in an actual webpage instead of just the console? or are you using console specific functionality? [I want to visualize my datascript db, and I'd prefer to steal your cljs-devtools pretty printer instead of writing my own]

@qqq I think daniel compton wanted to do something like this

cljs-devtools generates JSONML representation of the data structures

you would need to implement actual renderer

and that would require some work

the code in DevTools which is rendering it in the console is not easily portable IMO

alright; I'll roll my own in svg then, thanks for the info! @darwin

there is another project which renders data structures in page, but I forgot its name

it uses reagent

https://github.com/flexsurfer/re-frisk ?

yep, that’s the one

I will probably extract some devtools consolee code into a standalone “iframe” app, and provide something like firebug lite (https://getfirebug.com/firebuglite)

this will give up a console which could be embedded in any html app

but again, this is not on my priority list right now

If people kickstarted together 500k, would that be enough for you to build a 'barebones' emacs like ide? Where you provide some minimal core, and scripting in cljs, and people ahck on their own modules?

Considering all the companies using cljs, 500k is not too high a number.

I think this already exists, it is called LightTable 🙂

kickstarted on 300k or so 🙂

haven't they moved on to 'Eve' ?

and had to promise everyone everything 🙂

How much money would we (as cljs community) need to raise to get you to hack full time on cljs-ide ?

I wrote this 2 years back: https://gist.github.com/darwin/d8fc8556e6fbdc7dee11

but I’m not that radical anymore, Cursive works pretty well for me now

before I made the switch to IntelliJ it was a PITA

I’m not an emacs user - not yet 🙂

Was unaware OSX 10.11 screwed over your two apps.

I was asking for a trouble, it was a hack from day-1 🙂

I don’t believe it is viable to run a kickstarter-like campaign for cljs-ide, the community is still too small

maybe in a few years

in a typical browser repl, it's connected to "webpage I'm debugging", and I can execute arbitrary js/cljs code against that page is it possible to have a "dirac-devtools-repl" where it's connected to "actual devtools", and I can execute arbitrary js/cljs code, and program dirac devtools at the repl?

suppose hypotehticaly, I got some rich people to support this (I have not asked them yet, and this is a moonshot), how much would it take to get you started?

hard to tell, if it was a really good idea, it can be as low as zero 🙂

I have my own ideas, so you would have to convince me that yours are dramatically better 🙂

it's in my selfish best interest that someone is paid to work full time on dirac-cljs-ide

the idea is the "make dirac ide a full blown ide scriptable in cljs"

frankly, I don’t need money at this point, I have pretty long runway from TotalFinder and some other work

that is why I could play with cljs for almost 2 years now

just for fun

I think turning DevTools into a full-blown ide is really difficult task

it definitely has a “cool” factor, but how it will be dramatically better than what we already have?

I agree, I don't think it's a hobby project, I think it needs to be funded for people to ahck on it full time.

I've always had this fantansy of emacs - elisp + clojure

and dirac devtools seems the perfect platform to build this tool on

I wanted to experiment with that lighttable fork (which later turned into the plastic project), but I haven’t discovered anything significant

and then parinfer came out, and I decided to wait and never came back to the project again

but this allowed dirac to be created, I focused on something new 🙂

we need someone to do some research project or some discovery not necessarily in Clojure/Lisp/Emacs space, it could be any language/ide and when they prove the idea, we could jump on implementing it for Clojure ecosystem

I’m not going to jump into another project where there is no clear goal, at least not at this point

you're clearly put more thought into this than I have

what about "a cljs repl attached to diract devtools itself"? This would allow all users of dirac dev tools to start expertimenting with wirintg their own mini extensions

there is no API

and it is open-source, so you can hack on it directly, why do you need a REPL?

interactive vs slow developmnet

also you would be doing interop all the time, because devtools is in javascript

it'd be nice, if, for the last feature request, I could just open a up a dirac dev tools repl and starting playing with it / hacking on it myself instead of having you be the only person able to implement it

REPL is not a magical enabler here, yes, it improves productivity and dev cycle, but it does not teach you internals of devtools and how to interface with them

any non-trivial “extension” would need some cooperation with existing code

perhaps this is just me, but interactivity / immedaite feedback / ease of exploration has definitely helped me learn APIs faster

btw. you can open internal devtools on Dirac DevTools window, and you get javascript console there, which is almost what you want

what?

how do I open devtoosl on devtools?

https://github.com/binaryage/dirac/blob/master/docs/faq.md#something-broke-how-do-i-debug-dirac-devtools-frontend

read the FAQ 🙂

a new window popped up

my key setting is wonked; how do I know if this is a "level2 repl" or a "level 1 repl" ?

dirac has green menu highlight

standard devtools blue-ish

it is like inception 🙂

http://imgur.com/a/9UTEs

is that a level 2 repl, or is that still a level 1 repl?

not sure what do you mean

http://imgur.com/a/KJG6e <-- is this repl connected to my webpage, or connectd to dirac dev tools?

in that popup you have just normal javascript console

it says Dirac.Implant, so I'm thinking level 2

and what? Dirac implant is just a piece of cljs code running inside devtools code

so I don't ahve dirac on dirac yet

no

it is possible but you would have to have dirac1 connected to another chrome instance

a web page(running inside chrome1) <- dirac1 (running inside chrome2) <- dirac2 (running inside chrome3)

normal scenario right now is: chrome1 (web page) <- dirac1 (running inside chrome1)

in other words dirac1 connects back to the same chrome it is running in (debugger protocol)

can you give me a screenshot of what your "dirac debugging dirac" looks like? so I know what to aim for?

no

that would be a lot of work to setup

but it is possible in theory, dirac does not have to connect back to the same chrome

you can tweak the chrome debugging port in dirac extension options

err, I thought the FAQ says it's just " CMD+OPT+I " -- are we talking the same thing?

cmd+opt+i does the same thing as clicking the dirac button

when clicking the dirac button a new window opens with dirac devtools app, which uses websockets to connect to some debugger protocol (server)

normally it is running on localhost on port 9222

and it happens to be the same chrome instance, because you launched it with that —remote-debugging-port=9222 parameter

@darwin I can’t understand what the checkouts profile is used for in the sample project

it’s failing when I try to do lein dev in the sample project

@baptiste-from-paris https://github.com/technomancy/leiningen/blob/master/doc/TUTORIAL.md#checkout-dependencies

you should not use lein dev under normal circumstances

I am trying/struggling to install dirac based on the sample project with figwheel template

that’s why I was checking dev profile

the dirac-sample’s project.clj is quite complex because I also use it for some debugging / development / testing tasks

but you should focus only on profiles which are mentioned in the readme (e.g. lein demo and lein repl)

ok

Managed to make it work but with 2 repl...

figwheel with =>

{:id "dev"
                :source-paths ["src"]

                ;; the presence of a :figwheel configuration here
                ;; will cause figwheel to inject the figwheel client
                ;; into your build
                :figwheel {:on-jsload "dirac-figwheel.core/on-js-reload"
                           ;; :open-urls will pop open your application
                           ;; in the default browser once Figwheel has
                           ;; started and complied your application.
                           ;; Comment this out once it no longer serves you.
                           :open-urls ["<http://localhost:3449/index.html>"]}

                :compiler {:main dirac-figwheel.core
                           :asset-path "js/compiled/out"
                           :output-to "resources/public/js/compiled/dirac_figwheel.js"
                           :output-dir "resources/public/js/compiled/out"
                           :source-map-timestamp true
                           ;; To console.log CLJS data-structures make sure you enable devtools in Chrome
                           ;; <https://github.com/binaryage/cljs-devtools>
                           :preloads [devtools.preload dirac.runtime.preload]}}

:repl {:repl-options {:port             8230
                                   :nrepl-middleware [dirac.nrepl/middleware]
                                   :init             (do
                                                       (require 'dirac.agent)
                                                       (dirac.agent/boot!))}}

Hello darwin 🙂 Sorry to report a bug (Dirac is so a very great tool!) bug since the last release methinks that Dirac devtools sometimes crashes when asked to evaluate something in console whilst it's paused the world at a debug breakpoint. When I say it crashes I means chrome extension crashes and chrome offer to reload it. Here is the tool stack I currently use: Dirac v1.2.0 | Chrome/59.0.3035.0 | Mac/10.12.3. If you confirm this bug and need more detailed data I can try to watch out next time.

osx needs to add a "dev mode" where it auto screen records your last 10 minutes; then you can save it at will as a 'bug report' 🙂

Well, I’ll wait a bit and if I can find enough to fill a proper bug report I’ll do so.

in the sample project, how do you launch figwheel ?

some of you have a project.clj template working with dirac/figwheel ; I am starting to be nuts trying to make it work

@baptiste-from-paris if you want me to help you in a meaningful way, please share your project as a git repo, so I can clone it and test it on my machine

snippets of project.clj are not easy to troubleshoot

ok ok. 5min

@piotr2b I’ve seen canaray stopping in debugger or exception “chrome is going to crash due to low memory” or something similar

it never crashed on me, I just continued

but it was annoying and I don’t know why is it happening

@darwin: this is a pure hypothetical; but if all the js parts of Chrome were written in cljs, pretty much everything we discussed would be much much much easier right?

iirc, on top of the v8 core, most of the chrome code is in js

and if it was in cljs, with an attached repl isntead, scripting devtools would be trivially easy

devtools is a non-trivial application, scripting it will require understanding it, no matter in which language it is written in

since you actually scripted devtools: if devtoosl was in cljs instead of js, how much of your development time of dirac would have been shaved off?

@darwin I started from scratch => https://github.com/dupuchba/dirac-figwheel

@qqq I don’t know this is really hard to tell. DevTools being written in js wasn’t a big obstacle.

I would guess DevTools has been developed over last 10+ years in team of 10+ people (started in webkit, then safari, then chrome). So you can imagine how much effort went into it.

of course, writing it from scratch would be faster, for people who know what they are doing

btw. are you aware of devtools extension APIs? https://developer.chrome.com/extensions/devtools

you can write a chrome extension which can hook into specific devtools places and provide some functionality there

unfortunately the extension points are quite limited, that is why I had to fork devtools, this extension api wasn’t powerful enough

oh man, by 'forking devtools + maintain patches" you literally mean you forked the devtools code and now have to maintain patches whenever devtools is updated

yes

crazy lol

how much time did you spend ?

so hypothetically, if (1) you got hit by a bus, and (2) chrome auto updates a few times -- does dirac become broken / unuseable ?

@qqq absolutely

lol 2nd time I see you write something like that @qqq

the first was om/next ?

yep

@baptiste-from-paris : it's a legit variatn of "what happens to Linux if Linus gets hit by a bus"

it’s killing our industry to be afraid of the bus

in my opinion 😉

btw. not sure if you noticed, but I maintain filtered chromium branch containing only devtools: https://github.com/binaryage/dirac/tree/devtools and here you have a diff between dirac’s version and oficial version: https://github.com/binaryage/dirac/tree/devtools-diff

the top commit in the devtools-diff branch shows you that rolling patch

it is not that scary afterall, I tried to minimize places where I needed to touch their code

somewhat related: you used to build stuff on firefox right? if the chrome devtools api is so bad that you had to fork it -- how is it still better than firefox api ?

cannot tell

I never used firefox api in a holistic way, always needed some hooks here and there, so I googled them and used them

and I was interacting with firebug most of the time (writing extensions to firebug, not firefox)

this is so absolutely insane

so is https://github.com/binaryage/dirac/commit/299e976205f9ba52790de721ff1c3f2b6ae04bfc a diff between "chrome devtools" and "dirac devtools" ?

yes

so dirac consists of (1) dirac/src/.cljs <-- actual dirac functionality and (2) a "rolling diff" vs chrome devtools <-- extra api end points that part [1] needs

no, it is not complete dirac code, because this is just the javascript part, I don’t include cljs sources in this diff

sorry

yes, you are right

didn’t read your message correctly

specifically “implant” is the cljs code which gets injected into devtools javascript contex, other folders in dirac/src are not related to it: https://github.com/binaryage/dirac/tree/master/src/implant/dirac

implant adds this api to be used from javascript side: https://github.com/binaryage/dirac/blob/master/src/implant/dirac/implant.cljs#L132

there's really only one dirac feature I use: on assert false, let me walk up/down the stack frame and looko at local vars now, for the name unmangling part, it's some cljs stuff we don't care about for now however, to (1) hook into the V8 so we get called on exception and (2) get the entire stackframe as an object is this something I can do with plain devtools, or something I need dirac for?

technically, anything you can do with dirac, you can do with devtools alone (by re-implementing dirac code on your own)

I just stumbled across https://news.ycombinator.com/item?id=10400800 -- you started using CLJS in Jan 2015, and wrote Dirac in < 2 years ?

afaik, assert just throws, and devtools already know how to stop on exceptions, at that point you are able to inspect callstack

this is even possible from your normal javascript code, you don’t need devtools for it, are you familiar with js/Error.stack ?

I started hacking on Dirac in Dec 2015, first release in Jan 2016

no, clearly not, googlign now

so basically, anywhere in my cljs code, I can do a throw/catch + inspect https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack and get the entire stack frame at run time ?

yes

you can write your own version of assert which will do that

it will throw and immediately catch, then you can inspect the callstack

unfortunately the callstack won’t be source-mapped, so you would have to do it yourself

this would be an advantage of doing something like this in devtools, because they have pretty complex machinery to do source-mapping

anyways, I still don’t understand what is your end goal

@baptiste-from-paris looking at your example

right now there's no end goal, it's just "learn how this works"

@darwin thanks a lot for your time that’s really cool !

devtools used to be this blackbox that I couldn't look into, and now it's a murky box I can sorta look into

I think I am a little short on nREPL; I’ve read lambda island tuto and clojure.tools.repl but it is still blur for me

1st problem, you have typo in js script file, so your javascript simply does not load

2nd problem you set wrong :agent :port in configuration

normally you should not mess with it,

will send you a diff

let me see

@baptiste-from-paris this is a diff of working config for me: https://gist.github.com/darwin/01da7a2a795ff887b127b63a2817e7c0

dirac middleware cannot work with piggieback middleware, you have to pick only one of them

reasons are described here: https://github.com/binaryage/dirac/blob/master/docs/about-repls.md#piggieback--weasel and here: https://github.com/binaryage/dirac/blob/master/docs/about-repls.md#dirac

if you want to use CIDER, you should do it as next step when you get basic dirac+figwheel setup working, you will need a separate nREPL server and connect to it with your CIDER

cursive for me 🙂

this is considered a super-advanced topic and I don’t use CIDER myself so I cannot help much here

ok, so you can have a look here (after you get the basic setup working): https://github.com/binaryage/dirac/blob/master/docs/integration.md

@baptiste-from-paris : I stopped using cider; the loss was barely noticable

for whatever reason, darwin decided to fork the entire cljs toolchain, but so far it appears to be worth the tradeoff

right the (dirac! :help)

1) Launch Chrome 2) lein repl 3) start script/dev-server.sh

got this

and I renamed index.html

did you apply my diff?

I still see that your page didn’t load your own javascript file

it is not on_remote.js but on-remote.js

I did, don’t get it

the compiled javascript contains dirac.runtime, without dirac runtime, dirac devtools is not able to talk to your page

oh, or you don’t get my changes in the diff?

slack is doing something “smart" here and does not allow me to post specific url: <https://gist.github.com/darwin/01da7a2a795ff887b127b63a2817e7c0#file-dirac-figwheel-diff-L41-L42>

@darwin do you see the automplete input field or not ?

no I don't

ok

I see "Figwheel template Checkout your developer console."

the chrome has trouble parsing the compiled code, you tossed js-debugger in some wrong place

remove all js-debugger for now

ok

but that is not related to the dirac configuration issue

ok ok

dirac runtime was properly initialized in my case

what is you workflow ? launch chrome then the server then the repl then the dirac devtool ?

yes

chrome must be running before you open dirac devtool 🙂

other than that I run them in arbitrary order

and figwheel for hot reloading ? how do you launch it ?

or use lein-cooper to wrap all this into a single command

lein figwheel dev

ok figwheel load the form right

but not my server

you did not apply my diff correctly, I deleted your bogus :agent-port

or a browser cache is in play

or you need to clean whole project via lein clean

maybe the files were generated and lein didn’t reflect your changes

did all that but I am gonna remove chrome user-data-dir

you can try, but I doubt this would be the issue

I’m now referring that red message in dirac devtools console, it is simply trying to connect to a wrong port

the port should be 9222

9977 is there because originally you tried to override this setting via :agent-port config in your project.clj

ok

working but when I modify the name of my h1this is what I got :

but the rest is workign so THANKS A LOT 🙂 !

those are most likely issues with your figweel configuration or project configuration in general

I’m sorry, I’m here to help with dirac only

I think you are trying to do too many things at once

lol, that’s right ^^

I would recommend: first get familiar with cljs development with lein, second with figwheel, and when you feel comfortable add dirac into the mix 🙂

thank’s a lot for you time !

np, good luck

you might try #lein-figwheel channel as well

it looks like misconfiguration of compilation paths in your project

or your dev server is somehow misconfigured

yes I know, I am close !

I used a lot figwhhel with devtools but when I saw dirac yersterday it blew my mind !

@darwin i did not realized that you were the maker of Total*

💪👏👏👏👏

How did you get into clojure ?

@baptiste-from-paris well, I used to be a web developer before I started some objective-c hacks

and when apple killed my business with System Integrity Protection, I played with some webdev and discovered cljs

and from there clojure

Where do you come from ?!

I’m rather rare example of a person going from js -> cljs, not from java -> clj and then cljs

I have to check this System Integrity Protection thing

I’m from Czech Rep.

what about you? what are you trying to build with clojure?

I am a freelance contractor in France, started clojure 6 months ago

Did only 1 contract here in clojure

The market is really small but I just love the langage

I am trying to reduce the cost of making "simple" native app with react-native + cljs

yeah, react-native is very promising

Yes impressive, coupled with om/cljs, it'a an awesome experience

when you’re using debugger, what info in devtool are you usually looking to ?

Scopes ? callstack ?

both

depends on situation

but most of the time I use just REPL and I don’t do classic-style debugging

mostly when exploring foreign code and need to break somewhere and explore surrounding state

ok; discovered some om.next internals with dirac

really nice