Fork me on GitHub
#clojurescript
<
2020-10-30
>
nezaj05:10:43

Does someone here have a working set-up of vim-fireplace + Piggieback for clojurescript? Spent a couple hours trying to get this to work with no luck. Would love some help! I can get a cljs repl working via

lein repl
(cider.piggieback/cljs-repl (cljs.repl.node/repl-env)) 
But can't get vim-fireplace to connect to it. Similarly in vim if I run :Piggieback (cider.piggieback/cljs-repl (cljs.repl.node/repl-env)) I'll see To quit, type: :cljs/quit which makes me think it worked but trying to execute a form gives me an error like
Unexpected error (ExceptionInfo) compiling at (REPL:1).
No such namespace: guestbook.core, could not locate guestbook/core.cljs, guestbook/core.
cljc, or JavaScript source providing "guestbook.core" in file <cljs repl>
I also tried using weasel. I have a function to fire-up a browser repl
(defn repl-env  []
  (cljs.repl/repl
   (weasel.repl.websocket/repl-env :ip  "0.0.0.0" :port 9001)))
After which I do lein repl and (repl-env) to start a weasel server. My logic in core.cljs for connecting to it when opening my app in the browser
(when-not (weasel.repl/alive?)
  (weasel.repl/connect ""))
With this I have a cljs repl as well. Sending commands like (.log js/console "Hello World") works and I can see the log in my chrome inspector. However still cannot get vim-fireplace/piggieback to connect to it.

victorb09:10:55

Hey! Yeah, I did have vim-fireplace + clojurescript working with piggieback before. Now I'm using conjure instead of vim-fireplace, but when I was using vim-fireplace + figwheel, I found this guide to be the most helpful: https://figwheel.org/docs/vim.html Are you using figwheel/shadow-cljs or something else?

nezaj18:10:10

@UEJ5FMR6K I'm using neither figwheel or shadow-cljs (using lein-cljsbuild atm for building cljs resources). I've been working through Web Development with Clojure (from Pragmatic bookshelf) when I hit this snag with with vim-fireplace/cljs. I do see a chapter or so later in the book there is some set up for shadow-cljs and from looking at some online articles may find luck there

nezaj18:10:42

Thanks for this figwheel resource too 🙂 Will report back on progress

❤️ 3
miikka11:10:15

tried to upgrade from ClojureScript 1.10.520 to 1.10.773 and our code doesn't work anymore in IE11 with advanced optimizations 😞 Closure is generating for (const d in a) and IE says SCRIPT1053: Const must be initialized.

miikka11:10:29

Previous versions generated var d; for (d in a) which was fine

miikka11:10:18

maybe :language-out will help...

miikka11:10:30

right! :language-out :es5 solves the problem

Calum Boal11:10:17

Hey, so i'm learning re-frame and trying to make a subscription which depends on two pieces of data from the database. For this im trying to use two subscriptions, but i get an error that the second arg should be the subscription function. How do i do this?

Calum Boal11:10:21

(rf/reg-sub
 :active-server
 :<- [:active-server-id]
 :<- [:servers]
 (fn [active-server-id servers _]
   (first (filter #(= active-server-id (:_id %1)) servers))))

Calum Boal12:10:06

Ah figured it out. For reference it needs to be this:

(rf/reg-sub
 :active-server
 :<- [:active-server-id]
 :<- [:servers]
 (fn [[active-server-id servers] _]
   (first (filter #(= active-server-id (:_id %1)) servers))))

Calum Boal12:10:15

If i call a component within another componenet, will it still be treated as a component and rerender when dereffed values change?

Calum Boal12:10:24

Because right now my nested components which deref things aren't being rerendered when the values in app-db change

Calum Boal12:10:24

(defn server-page []
  [:section.section>div.container>div.content
   (when-let [server @(rf/subscribe [:active-server])]
     (server-widget server server-clients-partial))])

(defn server-widget [server partial]
  [:div.card.bg-light {:style {:margin-bottom "2em"}}
   [:div.card-header.container-fluid
    [:div.row.w-100
     [:div.col-md-8
      [:h5.card-title (str "Server: " (:public-ip server))]
      [:h6.card-subtitle (str "Pubkey: "(asset/interface-pubkey server))]
      [:h6.card-subtitle (str "Allowed IPs: " (asset/interface-allowed-ips server))]]
     [:div.col
      [:button.btn.btn-primary.float-right "Generate Config"]]]]
   [:div.card-body.container-fluid
    [:div.row.w-100
    (peers-table server)]
    (partial server)
    ]])

(defn peers-table [server]
  (when-let [server-peers @(rf/subscribe [:server-peers server])]
    [:table.table.bg-light
     [:thead.thead-dark
      [:tr
       [:th {:scope "col"} "Pubkey"]
       [:th {:scope "col"} "Peer IP"]
       [:th {:scope "col"} "State"]
     [:th {:scope "col"} "Action"]]
      ]
     [:tbody
    (for [peer server-peers]
      [:tr
       [:td (asset/interface-pubkey peer)]
       [:td (asset/interface-allowed-ips peer)]
       [:td (asset/interface-state peer)]
       [:td
        [:button.btn.btn-primary {:on-click (fn [e]
                                              (.preventDefault e)
                                             (rf/dispatch [:unlink-assets peer server]))} "Remove"]]])

    ]]
   ))

(defn available-clients-table [server]
  (when-let [available-clients @(rf/subscribe [:available-clients])]
    [:table.table.bg-light
     [:thead.thead-dark
      [:th {:scope "col"} "Pubkey"]
      [:th {:scope "col"} "LAN IP"]
      [:th {:scope "col"} "Action"]
      ]
     [:tbody
      (for [client available-clients]
        [:tr
         [:td (asset/interface-pubkey client)]
         [:td (:lan-ip client)]
         [:td
          [:button.btn.btn-primary {:on-click (fn [e]
                                                (.preventDefault e )
                                                (rf/dispatch [:link-assets client server]))} "Add"]]
         ])
      ]]
    ))

p-himik13:10:58

use [...] instead of (...) when working with components.

Calum Boal13:10:57

Okay, done that, not solved the issue though 😞

Calum Boal13:10:13

Can post my subs if thhat helps

Calum Boal13:10:28

Done, thanks for your help

p-himik13:10:21

You mean, you fixed the issue?

p-himik13:10:41

Ah, I see. Should've posted them in the thread.

p-himik13:10:51

I can't see anything obviously wrong. At this point, unless someone else sees something, I need a proper minimal reproducible example.

Calum Boal13:10:58

Nah not fixed the issue, and i thought the thread window might be too small. I can move them

p-himik13:10:32

Better move them, yeah. The thread can be expanded to the full width.

Calum Boal13:10:20

(rf/reg-sub
 :assets
 (fn [db _]
   (:assets db)))

(rf/reg-sub
 :active-server-id
 (fn [db _]
   (:active-server-id db)))

(rf/reg-sub
 :servers
 :<- [:assets]
 (fn [assets _]
   (filter asset/server? assets)))

(rf/reg-sub
 :clients
 :<- [:assets]
 (fn [assets _]
   (filter asset/client? assets)))

(rf/reg-sub
 :active-server
 :<- [:active-server-id]
 :<- [:servers]
 (fn [[active-server-id servers] _]
   (first (filter #(= active-server-id (:_id %1)) servers))))

(rf/reg-sub
 :available-clients
 :<- [:clients]
 (fn [clients _]
   (filter #(=(count (:peers %1)) 0) clients)))

(rf/reg-sub
 :server-peers
 :<- [:clients]
 (fn [clients [_ server]]
   (filter #(asset/has-peer? server %1) clients)))

Calum Boal13:10:17

If i linked all the code would that help? If that's too much work to look through then no worries

p-himik13:10:23

Just create a small GitHub repo that I can clone and then run with a single command.

Calum Boal13:10:30

Okay will try add some data seeding

Calum Boal14:10:00

You'll need mongo db but it'll seed itself

Calum Boal14:10:15

docker run --name=WirerunnerMongo -v /var/lib/WirerunnerMongo:/data/db -p 27017:27017 -d mongo

Calum Boal14:10:32

then just lein run and lein figwheel

Calum Boal14:10:28

Go onto the web app, click add peer, select one from the available clients, it adds on the backend, the app-db updates, but the tables don't get re-rendered

p-himik14:10:43

Well, that's not exactly minimal. :) But either way, I cannot run MongoDB: "Error: error checking path "/var/lib/WirerunnerMongo": stat /var/lib/WirerunnerMongo: no such file or directory" I'm using podman instead of docker, but that shouldn't matter.

Calum Boal14:10:25

You can get rid of that argument if you like, it's just for container persistence

Calum Boal14:10:30

Which you wont need, just pasted the docker cmd i used to start it

p-himik14:10:14

Don't get me wrong - I want to help, but I really don't want to figure out how to run your project that's very far from a minimal reproducible example. Now I'm getting HTTP 404.

p-himik14:10:42

Figwheel: Starting server at

Calum Boal14:10:16

Did you do lein run, if so, it's 127.0.0.1:3000

p-himik14:10:54

OK, that seems to work.

Calum Boal14:10:25

Nice one, thank you for taking the time to help

p-himik14:10:17

There's a bunch of JS errors. Potentially, then can be the ones that cause your issues. Have you tried fixing them?

Calum Boal14:10:57

Only ones i was getting was Warning: Each child in a list should have a unique "key" prop.

Calum Boal14:10:34

You mean that?

p-himik14:10:56

And <th> cannot appear as a child of <thead>.

Calum Boal14:10:46

Fixed that in one place but missed the other, done that now, not affecting it, will look at the warning

Calum Boal14:10:46

Docs say the warning just pertains to performance of updates

p-himik14:10:04

Not sure what docs you're looking at, but that's not correct.

p-himik14:10:27

Ah, wait - I'm probably mixing it up with index keys.

Calum Boal15:10:23

Fixed the keys issue, problem persists

Calum Boal15:10:02

It was re-rendering properly before i added the subscription to peers-table

Calum Boal15:10:14

Fixed it. This was the solution

(rf/reg-event-db
 :swap-asset
 (fn [db [_ asset]]
   (update-in db [:assets]
          (fn [assets asset]
            (conj
             (filter #(not= (:_id asset) (:_id %)) assets)
             asset))
          asset)))
Before it was:
(rf/reg-event-db
 :swap-asset
 (fn [db [_ asset]]
   (update-in db [:assets]
          (fn [db asset]
            (conj
             (filter #(not= (:_id asset) (:_id %)) (:assets db))
             asset))
          asset)))

Calum Boal15:10:39

Thank you for helping me narrow down the issue, so many moving parts and i wasn't sure which bit i could have been fucking up

Calum Boal13:10:16

Basically when there's a change, available-clients-table and peers-table doesn't re-render until i refresh the page

Markus Str14:10:20

hey guys, I'm observing some strange behavior. It seems there is some bugs importing a namespace with :as vs :refer. I have a clojurescript REPL running with #cursive and I'm testing out the new #malli lib (which looks awesome)

(ns scify.spectest
  (:require
    [malli.core :as m]
  [clojure.walk :refer [postwalk prewalk keywordize-keys]]
))
When I do as above it cannot find m and the linter puts it as grey (unused); also the REPL says Use of undeclared Var scify.spectest/m BUT m/validate is found as an object (?) Then if i do
[malli.core :refer [validate]]
It can find validate Also when I put malli.core into the REPL, it finds it It seems that I don't understand namespaces, but I'd assume that malli.core and m become equivalent once I do malli.core :as m (at least that works for most imports) Anybody know what I'm doing wrong? It's very confusing

hipster coder14:10:25

quick question… is there a CLJS way to run code on the server or the client? if I wanted to distribute some computation over a group of users/clients?

hipster coder14:10:44

I remember reading about Clojure being able to do something like that

hipster coder14:10:05

I am using the actor model, for distributed computing

dpsutton14:10:23

if i'm reading you right, you're trying to use a var called m as if this is an object which contains functions. that's not the case. it's just introducing an alias so it can understand things like m/validate it knows that m is an alias for malli.core. There is no "thing" called m, its just a context to understand symbols

👍 6
Markus Str14:10:14

mhh interesting. I thought it would be something like a reference

Kristian15:10:49

Hey, I am trying to run a simple clojurescript program but I am getting hit with:

goog.addDependency("base.js", ['goog'], []);
^

ReferenceError: goog is not defined
When running node main.js after compiling my sources with lein cljsbuild once:
7   :cljsbuild {¬
  6               :builds [{:id "main"¬
  5                         :source-paths ["src"]¬
  4                         :compiler {¬
  3                                    :output-to "main.js"¬
  2                                    :output-dir "out"¬
  1                                    :optimizations :none¬
20                                     :source-map true}}]}¬
Does anyone see the obvious mistake I am making?

Kristian15:10:44

FWIW: I am trying to use leiningen for dep management instead of the deps.edn that the Getting Started suggests

hipster coder15:10:11

I remember running into problems with dependencies

hipster coder15:10:27

because node versions changed how commonJS works, to incude outside modules

hipster coder15:10:43

so first, you might want to look at your node version, and commonJS version

Kristian15:10:50

I just upgraded to latest node LTS. Is commonJS a part of node?

hipster coder15:10:49

it’s a dependency module library, node sucked at including outside js, in the early days

hipster coder15:10:20

can you verify that you have commonJS in your package.json?

Kristian15:10:27

hm fair, fwiw it works to use deps.edn and the getting started launching with clj

Kristian15:10:08

I don’t even have a package.json 😅

hipster coder15:10:26

really? this is a node project? you are compiling to CLJS?

Kristian15:10:54

my understanding was that cljsbuild would compile my .cljs to a .js which I could then serve directly with node. I might be completely off though

hipster coder15:10:17

cljs, will convert to js, yes

hipster coder15:10:36

but I really think you need your commonJS, package.json, 90% sure

hipster coder15:10:49

or you can’t include dependencies

hipster coder15:10:58

it’s an educated guess

hipster coder15:10:03

it really looks like ‘goog’ isn’t made available inside the base.js module

hipster coder15:10:09

goog is the google-clojure library… it looks like

hipster coder15:10:11

npm install google-closure-library

hipster coder15:10:23

I think you are missing it… and base.js wants it installed

Kristian15:10:50

I did npm install goog earlier as well

hipster coder15:10:05

ok, then you should have a package.json file

hipster coder15:10:27

I would def stick to how node setups the project. with package.json

Kristian15:10:44

I just got the package-lock.json, but I now created a node project as well

Kristian15:10:02

the weird thing is that I know have a frankenstein of a leiningen and node project in the same folder

hipster coder15:10:20

yep… I can screen share… if you want

Kristian15:10:48

ah no need. But thanks:) I will poke a bit more.

hipster coder15:10:58

things are bit more calm on Fridays

Lone Ranger22:10:03

if it's calling goog it's not compiling to node, it's compiling to the browser

Markus Str17:10:23

Anybody know the canonical way to test browser events in cljs? I couldn't find a way to have a fixture of an js event that I can use as a variable (to test destructuring of a #js event for example)

fabrao22:10:31

hello all, I don´t know if it is a strange question, but I´m planning to make some compoments to PCF (Powerapps Component Framework) using Clojurescript and it works with, until now, with typescript. Is there any typescript mode output to use with Clojurescript?

p-himik08:10:39

I don't know for sure but I really doubt that. TS can consume JS and CLJS produces JS - there should be no problems.