Search code examples
electronclojurescriptre-frame

Trying to use re-frame-10x (was re-frame-trace) with descjop (electron) project


I'm trying to set up a project using a combination of re-frame and electron and I woud like to install re-frame-10x so I can easily watch certain parts of the app-db. I have used it before with a regular clojurescript/re-frame project accessed via google chrome, but not yet using electron. I'm hopeful, as I believe electron uses basically the same code as chrome under the hood.

I followed the setup instructions on the re-frame-10x github page and all seems to be ok. However I'm not able to call up the 10x window.

This is part of my project.clj file, notably the clojurescript dev builds:

  :cljsbuild
  {:builds
   {:dev-main {:source-paths ["src"]
               :incremental true
               :jar true
               :assert true
               :compiler {:output-to "app/dev/js/cljsbuild-main.js"
                          :externs ["app/dev/js/externs.js"
                                    "node_modules/closurecompiler-externs/path.js"
                                    "node_modules/closurecompiler-externs/process.js"]
                          :warnings true
                          :elide-asserts true
                          :target :nodejs
                          :output-dir "app/dev/js/out_main"
                          :optimizations :simple
                          :pretty-print true
                          :output-wrapper true
                          :closure-defines      {"re_frame.trace.trace_enabled_QMARK_" true}
                          :preloads             [day8.re-frame-10x.preload]
                          :main "anh.core" }}

    :dev-front {:source-paths ["src_front" "src_front_profile/anh_front/dev"]
                :incremental true
                :jar true
                :assert true
                :compiler {:output-to "app/dev/js/front.js"
                           :externs ["app/dev/js/externs_front.js"]
                           :warnings true
                           :elide-asserts true
                           :optimizations :none
                           :output-dir "app/dev/js/out_front"
                           :pretty-print true
                           :output-wrapper true }}

Note that there are 2 builds. (figwheel-status) tells me it is watching and recompiling dev-front. dev-main contains the pointer to main that re-frame-10x needs.

Clojurescript has been upgraded to the latest version "1.10.64" and everything looks fine, no error messages as the repl starts (using jack-in from emacs) or as the clojurescript repl starts.

There is still no sign of the re-frame-10x window. It should appear when I hit ctrl-h in the app window.

Below this line is things I tried on the way. Probably irrelevant.


Scrolling back through the clojure repl messages I see that it hit some kind of problem with re-frame-10x during the startup of the cljs repl:

user> Figwheel: Starting server at http://0.0.0.0:3441
Figwheel: Watching build - dev-front
Figwheel: Cleaning build - dev-front
Compiling "app/dev/js/front.js" from ["src_front" "src_front_profile/anh_front/dev"]...
Failed to compile "app/dev/js/front.js" in 10.853 seconds.
----  Could not Analyze  app/dev/js/out_front/day8/re_frame_10x/subs.cljs  ----

  No such namespace: cljs.spec.alpha, could not locate cljs/spec/alpha.cljs, cljs/spec/alpha.cljc, or Closure namespace "cljs.spec.alpha"

----  Analysis Error : Please see app/dev/js/out_front/day8/re_frame_10x/subs.cljs  ----
Launching ClojureScript REPL for build: dev-front

Any idea what this means? I'm not using cljs.spec (yet) but it seems like the compiler is looking for it.

This is a section of the project.clj file, with the modifications asked for by re-frame-10x, notably the closure-defines, preload and link to main in the compiler section of the relevant cljsbuild section:

:dev-front {:source-paths ["src_front" "src_front_profile/anh_front/dev"]
            :incremental true
            :jar true
            :assert true
            :compiler {:output-to "app/dev/js/front.js"
                       :externs ["app/dev/js/externs_front.js"]
                       :warnings true
                       :elide-asserts true

                       :optimizations :none
                       :output-dir "app/dev/js/out_front"

                       :pretty-print true
                       :output-wrapper true
                       :closure-defines      {"re_frame.trace.trace_enabled_QMARK_" true}
                       :preloads             [day8.re-frame-10x.preload]
                       :main "anh.core"
                       }}

Update:

this helped: No such namespace: clojure.spec.alpha in clojurescript project setup Following the suggestion, I upgraded the clojurescript to the latest version which has the spec stuff needed and the repl shows a different error when the cljs repl is started:

Failed to load resource: net::ERR_FILE_NOT_FOUND
cljs_deps.js Failed to load resource: net::ERR_FILE_NOT_FOUND
base.js:677 goog.require could not find: day8.re_frame_10x.preload
goog.logToConsole_ @ base.js:677
base.js:711 Uncaught Error: goog.require could not find: day8.re_frame_10x.preload
    at Object.goog.require (base.js:711)
    at index.html:11
base.js:677 goog.require could not find: anh.core
goog.logToConsole_ @ base.js:677
base.js:711 Uncaught Error: goog.require could not find: anh.core
    at Object.goog.require (base.js:711)
    at index.html:11
base.js:677 goog.require could not find: anh_front.init
goog.logToConsole_ @ base.js:677
base.js:711 Uncaught Error: goog.require could not find: anh_front.init
    at Object.goog.require (base.js:711)
    at index.html:12

This is just the main function not being found. The project.clj file specifies 2 dev builds, dev-front and dev-main. I had the clojurescript compiler options in the wrong section. Moving them to the correct section gets rid of the errors but the re-frame-10x window still won't appear when I hit ctrl-h.


Solution

  • The key to fixing this was putting it in the right build. Descjop has 2 dev builds, one for the app itself (dev-main) and one for the window (dev-front). Dev-main can, and probably should, be left alone. The changes need to go in the dev-front build.

    Step 1

    Convert the dev-front build to :optimizations none. This is one of the requirements for re-frame-10x. To do this the following needs to be added to the cljsbuild section of profile.clj under the :dev-front :compiler section:

    :main "setup-front.init"
    :asset-path "js/out_front"
    

    The html file can then be simplified as "setup-front.init" will load the necessary stuff for you. Something like this:

    <body>
    
      <div id="app">
        <p>Minimum app does not work.</p>
      </div>
    
      <script type="text/javascript" src="js/front.js" charset="utf-8"></script>
    
    </body>
    

    Step 2

    Upgrade! Descjop by default uses an older version of clojurescript that doesn't provide some of the functions re-frame-10x uses. org.clojure/clojurescript "1.10.64" works for me.

    After that the re-frame-10x instructions can be followed and it should just work. In short, add the following to the cljsbuild section right next to where you put the :main statement

    :closure-defines      {"re_frame.trace.trace_enabled_QMARK_" true}
    :preloads             [day8.re-frame-10x.preload]
    

    and add this to the dependencies. Probably best to go in the :profiles :dev section. Check the instructions or clojars for the most up to date version though:

    [day8.re-frame/re-frame-10x "0.2.1-SNAPSHOT"]
    

    The source of a very basic hello-world using these changes is available on github

    Thanks to Mike Callahan for the gist of this solution.