Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2023-01-20

Channels

#clojurescript
<
2023-01-20
>
slk50010:01:34

hiccup for loop. How to add :when modifier? in eg. :when (even? n) & is it a good place? Or I should filter elements before hiccup ? (defn lister [items] [:ul (for [item items] [:li item])])

p-himik10:01:47

The for loop has nothing to do with Hiccup - it's a Clojure[Script] construct. So use :when exactly in the same way you'd use it without Hiccup.

👍 2
slk50010:01:04

btw. I just started rewriting my project from Angular to ClojureScript. So probably I would have a lot of n00b question like prev. Is it a good place? Or maybe 'beginners' channel fit better?

thomas10:01:44

I'd say if it is ClojureScript/html specific here is fine.. if more generic Clojure there is a #C053AK3F9 channel. And if you are not sure try this one. Just my 2ct.

👍 2
slk50016:01:54

how to configure initial namespace for figwheel repl? I have found only this https://github.com/bhauman/lein-figwheel/issues/614

p-himik16:01:58

Figwheel is quite old and Figwheel Main is the replacement. Not sure which one you're using exactly, but there are also #C1A38UB5X and #CALJ3BFLP.

slk50016:01:42

it's com.bhauman/figwheel-main {:mvn/version "0.2.17"}}

slk50016:01:31

does it change anything? I haven't seen anything about initial namespace in docs

p-himik16:01:30

No, sorry - I'm using a very different setup from yours so can't really help here.

p-himik16:01:07

But usually a REPL is integrated with your IDE, and there changing the namespace to whichever you want (the current one, some predefined one, maybe something else) is usually a single keystroke away.

Viktor Karsakov16:01:32

Hey guys, would love some help on the following issue - I am trying to use "react-router" to add routing to my single page application (SPA) I've followed the example on the official page of react-router (https://v5.reactrouter.com/web/guides/quick-start) combined with the following github repo example project (https://github.com/thheller/react-router-cljs/blob/master/src/main/demo/app.cljs) and this is the code I came up with after examining both links - 

(ns business.main
  (:require
    [reagent.core :as r]
    [reagent.dom :as rdom]
    #_["react-router-dom" :refer (Route Link) :rename {BrowserRouter Router}]
    ["react-router-dom" :refer [Route Link Switch] :rename {BrowserRouter Router}]))

(defn index []
  [:h2 "Home"])

(defn about []
  [:h2 "About"])

(def Index (r/reactify-component index))
(def About (r/reactify-component about))

(defn root []
  [:> Router
   [:> Switch
    [:> Route {:path "/"}
     [:> Index]]
    [:> Route {:path "/about"}
     [:> About]]]])

(defn ^:dev/after-load start []
  (rdom/render [root] (js/document.getElementById "app")))

(defn init []
  (start))
but it doesn't seem to work, as I just get an empty web-page when trying to run it I am using shadow-cljs + reagent does somebody know what is the issue, and maybe I am missing something? thanks!

p-himik16:01:23

> an empty web-page Have you checked the JS console? Are there any exception in there?

Viktor Karsakov17:01:40

actually yes - I get several, I am also getting a warning saying 'react 18 is no longer supporting ReactDOM.render, use createRoot instead' - might that be it? I also get the following errors- 

module$node_modules$react_dom$cjs$react_dom_development.js:654 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `business.main.root`.
    at createFiberFromTypeAndProps (module$node_modules$react_dom$cjs$react_dom_development.js:654:102)
    at createFiberFromElement (module$node_modules$react_dom$cjs$react_dom_development.js:654:477)
    at reconcileChildFibers (module$node_modules$react_dom$cjs$react_dom_development.js:272:347)
    at reconcileChildren (module$node_modules$react_dom$cjs$react_dom_development.js:338:50)
    at beginWork (module$node_modules$react_dom$cjs$react_dom_development.js:430:115)
    at HTMLUnknownElement.callCallback (module$node_modules$react_dom$cjs$react_dom_development.js:738:342)
    at Object.invokeGuardedCallbackImpl (module$node_modules$react_dom$cjs$react_dom_development.js:740:442)
    at invokeGuardedCallback (module$node_modules$react_dom$cjs$react_dom_development.js:57:120)
    at beginWork$1 (module$node_modules$react_dom$cjs$react_dom_development.js:870:129)
    at performUnitOfWork (module$node_modules$react_dom$cjs$react_dom_development.js:601:389)
The above error occurred in the <Location.Provider> component:

    at Router ()
    at exports.BrowserRouter ()
    at business.main.root ()

Consider adding an error boundary to your tree to customize error handling behavior.
Visit  to learn more about error boundaries.
main.js:1426 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `business.main.root`.
    at createFiberFromTypeAndProps (module$node_modules$react_dom$cjs$react_dom_development.js:654:102)
    at createFiberFromElement (module$node_modules$react_dom$cjs$react_dom_development.js:654:477)
    at reconcileChildFibers (module$node_modules$react_dom$cjs$react_dom_development.js:272:347)
    at reconcileChildren (module$node_modules$react_dom$cjs$react_dom_development.js:338:50)
    at beginWork (module$node_modules$react_dom$cjs$react_dom_development.js:430:115)
    at beginWork$1 (module$node_modules$react_dom$cjs$react_dom_development.js:869:190)
    at performUnitOfWork (module$node_modules$react_dom$cjs$react_dom_development.js:601:389)
    at workLoopSync (module$node_modules$react_dom$cjs$react_dom_development.js:600:507)
    at renderRootSync (module$node_modules$react_dom$cjs$react_dom_development.js:600:8)
    at performSyncWorkOnRoot (module$node_modules$react_dom$cjs$react_dom_development.js:582:274)

Viktor Karsakov17:01:34

@U2FRKM4TW I've fixed the warning and now using "createRoot" instead - but the other errors seem to persist maybe I am calling react components in the wrong way? I assumed calling react components is being done in the following way - 

[:> Router]
but maybe I am wrong?

isak20:01:22

Yea calling reactify doesn't sound right. Have you tried adapt-react-class, then just call them like another reagent component?

mattly19:01:51

I’ve been out of things with ClojureScript for a while but am looking to start a new frontend project with it; Are there any frontend library projects in cljs-land that aren’t wrapping React? I worked with Svelte and WebComponents directly on recent projects and have been quite impressed, to the point of wanting to avoid React-based libraries if possible

phronmophobic19:01:10

There are a number of libraries also trying a react-less approach. Here's a few: • #C08BDAPRA • #CKCBP3QF9 • https://github.com/thheller/shadow-grove • https://github.com/green-coder/vrac (WIP) • #C013Y4VG20J (I believe biff is serverside using htmx)

👍 2
phronmophobic19:01:23

I think there's more, but those are the ones I can remember from the top of my head

kennytilton04:01:56

#matrix has three UI implementations, more or less mature, working directly on the metals: CLJS, ClojureDart, and JS. Each thinly wraps either HTML/CSS or Flutter. I call it the Un-framework, mostly for the amusement of others old enough to remember a certain soda pop advertising theme. https://tilton.medium.com/simplejx-aweb-un-framework-e9b59c12dcff Flutter wrapper: https://github.com/kennytilton/flutter-mx Web wrapper: https://github.com/kennytilton/matrix/tree/main/cljc/mxweb

👍 2
zeitstein10:01:51

A vote for #C03NTBBSF46.