Fork me on GitHub
#clojurescript
<
2021-04-07
>
dsp10:04:03

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"]}})

dsp10:04:46

❯ 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 
[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 

dsp10:04:15

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.")

thheller10:04:02

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

thheller10:04:18

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

dsp10:04:21

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

thheller10:04:50

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

dsp10:04:21

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

pinkfrog11:04:08

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

pinkfrog11:04:41

When clicked, it becomes:

p-himik11:04:02

Sente uses Timbre for logging.

p-himik11:04:18

What Timbre ends up using in RN - no idea.

p-himik11:04:48

Have you tried the default js/console?

pinkfrog11:04:54

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

thheller11:04:10

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

👍 3
pinkfrog11:04:42

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?

thheller11:04:00

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

pinkfrog12:04:19

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

pinkfrog14:04:40

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

pinkfrog14:04:11

(defmacro info [& args]
  `(timbre/info ~@args))
(info “xxx”) gives (taoensso.timbre/info) and no output.

pinkfrog14:04:27

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

lilactown15:04:26

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

raspasov15:04:06

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

lilactown15:04:48

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

raspasov15:04:33

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

lilactown15:04:05

it is an unfortunate collision in terms 😄

lilactown15:04:37

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

raspasov15:04:48

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

lilactown15:04:01

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

`Hello, ${user}!
` CLJS
(str "Hello, " user "!")

raspasov15:04:30

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

lilactown15:04:35

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

lilactown15:04:04

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

raspasov15:04:47

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

lilactown15:04:17

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

raspasov15:04:18

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

raspasov15:04:07

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

lilactown15:04:53

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

lilactown15:04:05

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

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

raspasov15:04:46

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

lilactown15:04:54

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

nilern15:04:01

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

lilactown15:04:19

I guess I'll do that then

lilactown15:04:39

@U050KSS8M 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

raspasov15:04:00

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

raspasov15:04:59

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.

lilactown15:04:52

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

lilactown15:04:17

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

raspasov16:04:23

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

lilactown16:04:12

Nice. that looks exactly what I was looking for 😄

lilactown16:04:08

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

lilactown16:04:13

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

thheller16:04:33

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

😱 3
thheller16:04:57

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

thheller16:04:11

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

thheller16:04:29

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

lilactown16:04:00

wait so

html`<div>${bar}</div>
` returns the same strings array on subsequent invocations?!

lilactown16:04:34

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

lilactown16:04:39

thanks! this has been very helpful

nilern16:04:41

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

thheller16:04:06

you can do that but it gets kinda annoying

nilern17:04:06

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

lambduhhh18:04:44

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?

p-himik18:04:35

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

👍 3
lambduhhh18:04:04

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)

thheller18:04:35

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

thheller18:04:35

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

👍 3