Clojurians Log v2

Hi. I am experimenting with figwheel-main. I am unable to connect to the REPL, and get the following error in the browser (see image). Am using lein, project.clj is as follows:

(defproject drp "0.1.0-SNAPSHOT"
  :description ""
  :license {:name "ISC"}
  :min-lein-version "2.7.1"
  :dependencies [[org.clojure/clojure "1.10.1"]
                 [org.clojure/clojurescript "1.10.844"]]
  :source-paths ["src"]
  :resource-paths ["target" "resources"]
  :clean-targets ^{:protect false} ["target/public"]
  :aliases {"fig"       ["trampoline" "run" "-m" "figwheel.main"]
            "fig:build" ["trampoline" "run" "-m" "figwheel.main" "-b" "dev" "-r"]
            "fig:min"   ["run" "-m" "figwheel.main" "-O" "advanced" "-bo" "dev"]
            "fig:test"  ["run" "-m" "figwheel.main" "-co" "test.cljs.edn" "-m" "drp.test-runner"]}
  :profiles {:dev {:dependencies [[com.bhauman/figwheel-main "0.2.12"]]
                   :resource-paths ["target"]
                   ;; need to add the compiled assets to the :clean-targets
                   :clean-targets ^{:protect false} ["target"]}})

❯ lein fig
OpenJDK 64-Bit Server VM warning: Options -Xverify:none and -noverify were deprecated in JDK 13 and will likely be removed in a future release.
2021-04-07 12:26:53.252:INFO::main: Logging initialized @2632ms to org.eclipse.jetty.util.log.StdErrLog
[Figwheel] Compiling build figwheel-default-repl-build to "target/public/cljs-out/figwheel-default-repl-build-main.js"
[Figwheel] Successfully compiled build figwheel-default-repl-build to "target/public/cljs-out/figwheel-default-repl-build-main.js" in 0.937 seconds.
[Figwheel] Starting Server at <http://localhost:9500>
[Figwheel] Starting REPL
Prompt will show when REPL connects to evaluation environment (i.e. a REPL hosting webpage)
Figwheel Main Controls:
          (figwheel.main/stop-builds id ...)  ;; stops Figwheel autobuilder for ids
          (figwheel.main/start-builds id ...) ;; starts autobuilder focused on ids
          (figwheel.main/reset)               ;; stops, cleans, reloads config, and starts autobuilder
          (figwheel.main/build-once id ...)   ;; builds source one time
          (figwheel.main/clean id ...)        ;; deletes compiled cljs target files
          (figwheel.main/status)              ;; displays current state of system
Figwheel REPL Controls:
          (figwheel.repl/conns)               ;; displays the current connections
          (figwheel.repl/focus session-name)  ;; choose which session name to focus on
In the cljs.user ns, controls can be called without ns ie. (conns) instead of (figwheel.repl/conns)
    Docs: (doc function-name-here)
    Exit: :cljs/quit
 Results: Stored in vars *1, *2, *3, *e holds last exception object
Opening URL <http://localhost:9500>

hangs here indefinitely. the only other file in the project is src/drp/core.cljs:

(ns ^:figwheel-hooks drp.core)

(println "This text is printed from src/drp/core.cljs. Go ahead and edit it and see reloading in action.")

the closure-library update coming with CLJS 1.10.844 changed a bunch of stuff and figwheel will need to be adjusted first

until then you should probably stick with the previous CLJS 1.10.773 version

ah, I suspected it was version related. I'll downgrade for now, thanks!

or you can try the latest CLJS with a previous closure-library version. maybe that works too

773 works a charm. no reason i version-bumped other than out of habit.

A most rn related question. I see some log messages (see pic). Is that generated by calling some rn function ?

When clicked, it becomes:

Sente uses Timbre for logging.

What Timbre ends up using in RN - no idea.

Have you tried the default js/console?

(js/console.log) logs to the terminal where metro runs.

(js/console.warn "foo") might end up as such a popup?

right.

I think (js/console) is a rather primitive functionality of the underlying js runtime. How does RN differentiate the output from log and warn? Does it monkey-patch console.warn to another function?

console is functionality they provide. it is not part of the runtime, or rather THEY made it part of the runtime

i see.

For re-frame-10x and re-frisk, is there any difference? Seems functionality-wise equal.

Just found out the popup is the logbox: https://reactnative.dev/docs/debugging#logbox

What to wrap/alias the timbre/info macro. But with the following output’s nothing.

(defmacro info [& args]
  `(timbre/info ~@args))

I see. macro shouldn’t occur in cljs file.

does anyone know of a library that makes using JS tag templates easier to use in CLJS?

Not exactly JS tags but makes using vectors, for example, much more performant: https://github.com/mfikes/cljs-bean

yeah i'm familiar. doesn't help with tagged template strings

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates

Ah, ok; I misunderstood, I thought the #js {} stuff.

it is an unfortunate collision in terms 😄

I think that tagged templates in JS even serve similar purposes as reader tags in CLJS

How can one use Template Strings from CLJS at the moment? (I’ve never used them)

in the basic case you can't and don't really need them; they can be trivially written using str: JS

`Hello, ${user}!

(str "Hello, " user "!")

Right; so why are you asking? 🙂 Is there some perf. gain there?

however, template tags can be useful in CLJS - see https://lit-html.polymer-project.org/

there are some useful JS libraries that only expose their functionality via these tag templates

My default is to be very skeptical of most JS libraries 🙂 (I know, I am biased)

I'm personally not in the business of rewriting production ready DOM libs

But perhaps, there’s some reason for the bias! 😄

Sure;

What’s the main use case for libs like those in CLJS? Poor man’s React?

lit-html is a library for declaratively constructing DOM that doesn't involve a VDOM

The tag is just a function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates

right, the way you would write them in CLJS would be something like:

(lit/TemplateResult. ["Hello, " "!"] user)

I see, so basically a simpler, less powerful React, if I understand correctly. With all the benefits and drawbacks of that.

hence why I'm wondering if someone has already written a library for conveniently using them before I go publish one

Don't know but making a (tstr tag "Hello, " user "!") macro should be pretty easy

I guess I'll do that then

@raspasov right, lit-html has different tradeoffs; ostensibly it can be faster in what React calls the "commit phase," and doesn't bring with it a render/reconciliation mechanism. so if you're building your own way of handling state, composition and tracking changes, it can be lighter and easier to work with than React

@lilactown Got it, makes sense; Looks simple enough on the surface.

I assume it’s DOM specific? (as in, no chance it will “easily work” on other platforms) I am aware that React needed a lot of platform specific work to make that happen, ofc.

I'm not aware of anything that would allow lit templates to build UIs on e.g. native mobile. I think that the VDOM is a key ingredient to providing that generality

although I think I remember hearing Svelte (which has no VDOM) could be used to build native UIs, so what do I know?

Cool, I am not familiar either; just curious. Thanks for the discussion 👍

@lilactown https://clojureverse.org/t/modern-js-with-cljs-class-and-template-literals/7450 ?

Nice. that looks exactly what I was looking for 😄

here's what I came up with: https://gist.github.com/lilactown/d4f87bad50a81384eb9fe609cfad60ef

is there a difference between emitting an actual tagged template string like yours does vs. constructing the call to the template function via macro?

i imagine the base case is faster (mine uses apply str on a lazy seq) but in the case when I'm calling e.g. lit's html tag I wasn't sure if there was a difference

the problem is getting the semantics of the template right. they have identity semantics for example, so each call to the tagged template will guarantee that the template is identical. it is not a new instance of some array

many library such das lit-html rely on that to work since they need to associate some state with the template so they use it as the map key

if you just construct the array manually every time you break that

also there is this weird .raw property that some libs use

wait so

html`<div>${bar}</div>

yes

wow gotcha. yeah then you do really need to emit the template string, no real good way to get the interning behavior otherwise

thanks! this has been very helpful

I think you could get the interning with some macro and global variable trickery

you can do that but it gets kinda annoying

Of course it would be better not to replicate badly what Closure already implements

The context: Trying to overwrite carousel arrows with Fa-icons and the react bootstrap carousel API wants a DOM node as an argument to (prevIcon/nextIcon). Thankfully it is wrapped in a nice abstraction layer where one of the following will take place. Currently using hiccup to render the html. The question: Should I do this using interop, https://github.com/jeluard/hipo or https://github.com/plumatic/dommy ? I have some experience with dommy/interop but was wondering what yall think?

FWIW, I would definitely use interop or, maybe, something from goog, if it exists.

OK cool. I kinda knew in my heart prob what I should do for a lil one off like this. Thx for the push to not be a wuss 😂 (interop=grumble grumble lol)

I don't think it wants an actual DOM node? pretty sure it wants a react element?

https://react-bootstrap.github.io/components/carousel/#carousel-props this is what you are asking about right?

for reagent that would be [:> Carousel {:nextIcon (reagent/as-element [:span "next"]) ...} ...]