https://www.youtube.com/watch?v=wc8A0woo0X4

features retained-mode objects (dom) and system of constraints (cells)

i think "interactors" are analagous to browser events

we have this initialization code for an external library:

function __ldinsp() {
        var insp = document.createElement('script');
        insp.type = 'text/javascript';
        insp.async = true;
        insp.id = "inspsync";
        insp.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://cdn.inspectlet.com/inspectlet.js';
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(insp, x);
    };
    document.readyState != "complete"
      ? (window.attachEvent
           ? window.attachEvent('onload', __ldinsp)
           : window.addEventListener('load', __ldinsp, false))
      : __ldinsp();

it is doing this doc readyStater complete check and attaching onload/load events.

i haven't really found anything in hoplon source which does anything like that

i was wondering what's the "correct way" to integrate with such a libarary

wow, inspectlet looks great!

@onetom: dunno if it's "correct", but i'd probably port ldinsp to cljs and then call it via with-init

i believe with-init is what the last 5 lines of that snippet are roughly doing

alandipert: micha just said the other day that with-init is probably not even necessary anymore in hoplon6

we can just use a (timeout ...) instead, but that doesnt really work

the function defined by this snippet is not defined yet when we are trying to call it from the (timeout #(...))

why are we so behind on jquery versions, btw?

they changed some things in the 2.0 versions

the snippet you show will have issues with the parent.insertBefore business

does it need to create the script tag that way by fishing around in the dom?

can you just make the script tag yourself?

(defn load-inspectlet! []
  (let [insp (script :id "inspsync"
                     :type "text/javascript"
                     :src (str "http"
                               (if (= (-> js/document .-location .-protocol) "https:") "s")
                               "://cdn.inspectlet.com/inspectlet.js"))]
    (js* "window.__insp = {loaded: null}")
    (.appendChild (aget (.getElementsByTagName js/document "head") 0) insp)))

(js/jQuery load-inspectlet!)

i'm not sure about the browser support of adding stuff to head, works in chrome for me tho

@alandipert: in hoplon app?

yeah

sweet, unexpected

i haven't implemented insertBefore yet

dom + jquery, it's convenient we have script

ah i see what you did

appendChild we have

lol

dude that's a nice lil ditty there

load-script! might be a handy thing to have

ty, i computed it just now

they tried to load it as async as possible, that's why they have all that funkiness, imho

here is where i took the snippet from: https://www.inspectlet.com/dashboard/embedcode/1724490325

@alandipert: and yes, inspectlet works really well. it's also a bit spooky at the same time because u can see users dumbness or hesitation or any small thing they do

seems crucial to have that visibility though

i would love to have it for our UI

so the snippet u made i would just chuck in to the top level of my code?

before (html ...) and that's it?

that's what i did

it complained about not having an ID, i suppose you need to set is somehow

did u leave out the async attribute on purpose?

yes, i will add the id

i'm not sure it does anything considering this is called after dom load

but my understanding of async is hazy

hmm... might behave differently on different browsers, that's why they made it explicite

i also see u did that loaded: null

where did u get that from? the source if the library?

the top of inspectlet.js

according to the snippet u r supposed to do a window.__insp = window.__insp || []; first

also not sure of significance

similarly to how google analytics works

oh ok, that would be the thing to do in js*

ok, i will try

it feels like this inspectlet lib actually includes a jquery, no?

maybe i should message them to just open source it

so we can integrate more directly...

i saw what looked like code taht tests for it

their core tech really is to collect scalably, retrieve and present nicely the recorded info...

haha you mean "computing"

we are still getting a

Uncaught TypeError: Cannot read property 'scrollHeight' of null

hm, that's coming from somewhere in inspectlet?

yes, from inside. u dont get that error?

we forgot to restart boot after we took out this inspectlet snippet from the cljs {:foreign-lib ...} config

im also not sure about the purpose of

(str "http"
                         (when (= (-> js/document .-location .-protocol) "https:") "s")
                         "://cdn.inspectlet.com/inspectlet.js")

"//cdn.inspectlet.com/inspectlet.js"

i think the idea is, bring in the script with https if the page is https, so as not to pop browser warnings about "insecure content"

and how saying //.... would be different?

also @peterromfeld just said this should also work:

(str (-> js/document .-location .-protocol)
                         "//cdn.inspectlet.com/inspectlet.js")

that would work, but not for file:// prefix

ah, i see

maybe irreleavnt, i needed it as my test hoplon project was not running a server

@micha: inspectlet gets fckd with alpha5 but works with alpha2

we did a quick skim through of https://github.com/tailrecursion/hoplon/compare/6.0.0-alpha2...6.0.0-alpha5 but nothing jumped out at us obviously, since you changed the "rendering" logic fundamentally. BUT we also tried the "DOM Breakpoint" feature of Chrome to catch when the HMTL element is mutated and when inspectlet kicked in and we stepped thru the code, we saw that the merge-kids function was blowing away the head and the body elements, and thats why inspectlet couldn't hook it's scrollHeight attribute onto the document.body

we also saw that merge-kids was removing the head first and that's when the content went back to being unstyled

we could observe this when inspectlet.js kicked. the observation was made possibly by adding a little delay:

(defn inspect [field details]
  (.push js/__insp (clj->js [field details])))

(js* "window.__insp = window.__insp || [];")
(inspect "wid" (inspectlet-wid))

(with-init!
  (with-timeout
    2000
    (let [inspectlet-script
          (script :id "inspsync" :type "text/javascript" :src "/inspectlet.js")
          head-elem
          (aget (.getElementsByTagName js/document "head") 0)]
      (.appendChild head-elem inspectlet-script))))

(html ...)