Hi, I try to use re-frame-trace. I found the re_frame.trace.is_trace_enabled_QMARK_() returns true in browser, but in the window nothing shows when I hit C-h . Is there a way to start it by code? Thanks!

@cmal make sure you've got selection focus in the browser viewport, but not selected on a text box, i.e. just click on the background

@danielcompton Still not opened. This is my page which has re-frame-trace installed: https://m.beta.joudou.com/wx/doumi

How to determine whether the :preloads were run?

@cmal re-frame-trace available only on dev mode, use lein figwheel dev to start up your app, you should be able to see the expected trace panel

What's the best way to disable re-frisk in production profile? Now I just comment/uncomment it)

not sure what you mean @ilevd re-frisk too is enabled only on dev mode

@lovuikeng how to determine the :preloads were run? I use shadow-cljs to generate .js files and sure I use the dev mode.

I tried to add a (.log js/console "blabla") into the preload.cljs after the (trace/init-tracing!) and lein install to install re-frame.trace in local repo. and then I shadow-cljs compile app but no console log were printed in the chrome console.

using the +re-frisk with re-frame-template the project file is configured only for dev mode

:profiles
  {:dev
   {:dependencies [[binaryage/devtools "0.9.4"]
                   [re-frisk "0.5.0"]]

  :cljsbuild
  {:builds
   [{:id           "dev"
     :source-paths ["src/cljs"]
     :figwheel     {:on-jsload "rfrisk.core/mount-root"}

sorry @cmal I don't know shadow-cljs

Thanks. I 'll try to ask the author of shadow-cljs about :preloads.

please use re-frame-template artifacts as reference for project configuration

Nice, it seems re-frisk docs has been updated, last time I read it, it was (re-frisk/enable-re-frisk!)

WARNING: :preloads should only be specified with :none optimizations when adding re-frisk within preloads

@cmal I've made a small shadow-cljs + re-frame-trace example: https://github.com/mhuebert/shadow-re-frame

@mhuebert Do you use project.clj or shadow-cljs.edn to provide :preloads key?

It uses React 16 so I had to include my own fork of re-frame-trace for compatibility

shadow-cljs, and keep in mind shadow puts preloaded in the :devtools options

*preloads

Ahh, I'll try to dive into where :devtools should be. Thanks!

Must I add this?

:js-options       {:resolve {"d3" {:target      :npm
                                                             :require     "d3/build/d3.js"
                                                             :require-min "d3/build/d3.min.js"}}}

@mhuebert and where the d3/build/d3.js should be? Can I use cljsjs.d3 as the compiling error tells: The required namespace "cljsjs.d3" is not available, it was required by "day8/re_frame/trace/subvis.cljs".?

@cmal ah yes, this is a bit awkward at the moment. shadow-cljs does not directly support cljsjs (explanation: https://code.thheller.com/blog/shadow-cljs/2017/09/15/js-dependencies-going-forward.html). What we do in the example: 1) require d3 via npm (see :npm-deps in src/deps.cljs) so that you could (:require ["d3" …]), 2) in order to support libraries that still use cljsjs, we create boilerplate cljsjs namespaces (see the src/cljsjs directory in my example) for d3, react, and react-dom, which both provide the cljsjs.* namespaces and also write these libs from npm into the expected global variables like d3, React, ReactDOM 3) but, Google Closure has a bug where it does not allow certain TypeScript-specific keywords to be used in non-typescript files, and that is why we need that extra :require because the normal d3 module build can’t be processed by Closure i worked through this yesterday with @thheller, I think it’s still not entirely clear what the ideal path forward is for something like this, but the config in my example is at least a temporary workaround

Thanks for your code. I can see the re-frame-trace panel now. 😄

@mhuebert Why the events count keeps growing fastly? I found this in my project, and I cloned your project, it is the same.

@danielcompton Yeah, it works now.

Thanks to mhuebert.

Why re-frame-trace over re-frisk?

So the events count growing fastly is normal? I found it grows in your browser, too. @danielcompton

Not normal, not sure why that's happening

It's doing lots of rendering

Are you using React 16?

YES, In my and in @mhuebert 's

"react": "^16.0.0", "react-dom": "^16.0.0"

It doesn't support React 16 yet, I've seen there's a PR, I'll take a look on Tuesday (Monday is a public holiday)

OK, I'll try to use react 15 instead. Thank you!

@cmal that is a good question

it should be fixed with my fork

I’m not sure why it isn’t. maybe I deployed the wrong version

I’ll check!

hi @mhuebert ! @danielcompton says try to use react 15 instead.

I am trying

@cmal the problem is that requires changing a bunch of dependencies including using an older version of re-frame I think

not sure

i was playing with that yesterday

@mhuebert yes. 😢

I will change back to 16..

maybe re-frisk works?

is day8.re_frame.trace.fiber_component_path defined?

i mean in console.log does it exist

undefined

I switched back to react 16.0.0, and undefined in my project.

@cmal can you git pull the latest shadow-re-frame example and try

or update version: [braintripping/re-frame-trace "0.1.9"]

sure

the underlying problem is that re-frame-trace has to prevent itself from monitoring its own activities, otherwise it gets into an infinite loop of render -> show render in trace -> render -> show render in trace etc.

re-frame-trace relies on some React internals (not part of public API, but unavoidable for this kind of thing) which changed in 15->16 and broke the way it detects these ‘self renders’

@mhuebert Hi， if I git pull and then lein install in re-frame-trace. How to use this installed version in shadow compile app ?

@cmal so you shouldn’t need to use lein install if you are using shadow-cljs

but instead of requiring [day8.re-frame/trace ...] you would require [braintripping/re-frame-trace "0.1.9"]

in whatever app you are using. but again with the caveat that there is no clean way to resolve the d3 dependency yet.

when you use the most recent versions of shadow-cljs it will automatically install the npm deps (ie. add the correct versions of react, react-dom and d3 to node_modules), as well as all the non-js deps listed in :dependencies

OK. it seems not growing events count again.

so working correctly?

It seems so.

I wish this window can be departed from the document so that I can debug it while keeping the window a mobile view.

It is hard to use in a mobile window

true. can you use a larger window while debugging?

No, that is a developer tool of wechat. Oauth login needed to debug. Only in this tool can I debug this app. And this tools provide only mobile views.

May be rare people need it to be departed.

But fine. I can search the event in the dom tree. 😂

@cmal does the app still let you have multiple windows open somehow?

Not sure.😢

How to test that?

I'll try to add re-frisk and see.

i have no idea

@mhuebert Can only work in this way. But no departed window allowed. 😢

Maybe the re-frame-trace can add a switch to attach to the bottom of page, from the right.

have not used re-frisk. do you know how it differs/compares with re-frame-trace?

looking for some advice. I have a component showing a list of things, and after clicking on a list-item, the item dissapears from the list. The parent div, the list-container, has CSS: overflow-y: scroll. If I scroll down, click on a list item, the thing gets re-rendered, and the scrolling restores to top. Which I do not want

Is there any kind of idiomatic/reactive way of doing this, or should i go to manipulating the DOM myself? (which would be my last resort)

Any pointers would be appreciated 🙂

@kah0ona do you use meta ^{:key ...} ?

yeah

is the idea that doing that well it would solve the problem by itself?

aaah i think that might give a good clue

i use a non-constant there (ie. a map-indexed counter)

thanks

i’ll try to change that and see what’s what

@kah0ona usually it's something like this:

(for [item items]
     ^{:key item} [:li "Item " item])

the problem appeared to be an overlay popup that said ‘item saved’. Removing that popup fixed it. I suspect it is because of it being a position: fixed element, containing an fade-in animation.

but i can live without the popup for now; no time to figure that out more. it’s way too much in the land of mutating dom and css3 intricacies 😉