This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-06-10
Channels
- # announcements (1)
- # babashka (178)
- # beginners (216)
- # bootstrapped-cljs (1)
- # brompton (5)
- # calva (3)
- # chlorine-clover (1)
- # clj-kondo (2)
- # cljdoc (37)
- # cljfx (4)
- # cljs-dev (2)
- # clojure (360)
- # clojure-chile (8)
- # clojure-europe (3)
- # clojure-italy (5)
- # clojure-nl (9)
- # clojure-spec (2)
- # clojure-sweden (1)
- # clojure-uk (61)
- # clojuredesign-podcast (1)
- # clojurescript (83)
- # clr (2)
- # conjure (4)
- # core-async (14)
- # cursive (20)
- # data-science (2)
- # datomic (15)
- # docker (11)
- # emotion-cljs (1)
- # figwheel-main (28)
- # find-my-lib (1)
- # fulcro (46)
- # helix (16)
- # honeysql (14)
- # jobs (10)
- # jobs-discuss (17)
- # joker (1)
- # juxt (9)
- # kaocha (8)
- # leiningen (3)
- # meander (3)
- # news-and-articles (1)
- # off-topic (110)
- # pathom (7)
- # pedestal (4)
- # protojure (2)
- # re-frame (12)
- # reagent (25)
- # ring (4)
- # shadow-cljs (109)
- # spacemacs (9)
- # specter (1)
- # sql (3)
- # tools-deps (23)
@jonas I haven't done any testing at all - but in theory it should work. You would have to run the bundler on your splits
7 years later, this runs great on a mobile device! 😃 (http://swannodette.github.io/2013/08/02/100000-dom-updates/)
I could use a regular map with the values at the key and the count (as I insert them) as the value
If your use-case doesn't require frequent iteration over the collection in the insertion order, then it should be fine.
Alternatively, you could port something like https://github.com/clj-commons/ordered/blob/master/src/flatland/ordered/set.clj to ClojureScript.
You can also take a look at https://github.com/tonsky/persistent-sorted-set - it was written for DataScript
this may not be the best channel, but I wanted to kick this off as a starting point. I've been looking at https://svelte.dev and found it pretty interesting to potentially kick the tires with. digging deeper, I found https://www.reddit.com/r/Clojure/comments/bqh0z4/virtual_dom_is_pure_overhead/ with a nice discussion that @yogthos and @thheller had. this is a fairly old thread now - is there any interesting work going on in the space of Svelte's goals?
FWIW I wrote https://clojureverse.org/t/shadow-arborist-exploring-a-cljs-world-without-react-preview/4278
which now lives in https://github.com/thheller/shadow-experiments and is used by the shadow-cljs UI
I’ve been working on a library called https://github.com/phronmophobic/membrane. Similar to svelte, the ui framework reads your code(via macros) and can figure out how a child component’s properties depend on their parent’s component properties. It’s still experimental, but feels pretty good. Your code ends up being fairly terse. Here’s a simple todo app:
;; Display a single todo item
(defui todo-item [ & {:keys [todo]}]
(horizontal-layout
(translate 5 5
(on
:mouse-down
(fn [[mx my]]
[[:delete $todo]])
(delete-X)))
(translate 10 4
(basic/checkbox :checked? (:complete? todo)))
(spacer 10 0)
(basic/textarea :text (:description todo))))
(comment
(run-ui #'todo-item {:todo
{:complete? false
:description "fix me"}}))
(defeffect ::add-todo [$todos next-todo-text]
(dispatch! :update $todos #(conj % {:description next-todo-text
:complete? false})))
;; Display a list of `todo-item`s stacked vertically
;; Add 5px of spacing between `todo-item`s
(defui todo-list [ & {:keys [todos next-todo-text]}]
(apply
vertical-layout
(horizontal-layout
(basic/button :text "Add Todo"
:on-click (fn []
[[::add-todo $todos next-todo-text]
[:set $next-todo-text ""]]))
(translate 10 10
(basic/textarea :text next-todo-text)))
(interpose
(spacer 0 5)
(for [todo todos]
(todo-item :todo todo)))))
(comment
(run-ui #'todo-list {:todos
[{:complete? false
:description "first"}
{:complete? false
:description "second"}
{:complete? true
:description "third"}]}))
I wonder if we can toying with CLJS and Svelte with Svelte-preprocess https://github.com/sveltejs/svelte-preprocess
I'm sure @thheller is going to find something mindblowing again 🙂
happy to look at other things for inspiration but I have no intention of actually using svelte 😉
Yes, I remember read you about Svelte on some Clojureverse post.
membrane looks cool. Yeah, I don't have any intention of using it either - I think we're mostly already there with cljs and existing libraries, and by mostly I mean all the way except for getting a satisfying user experience around it, everything tied together - work like membrane and arborist
I think there’s still a huge amount of improvement available in the UI library design space.
Yeah. I'm working on a direct port of tailwind (given another convo) to cljc to start helping improve the availability of this type of tooling.
I’ve recently learned that input type=number
has some odd behaviour that does not gel well with e.g. Reagent. For example, since 42e3
is a valid js number, you are free to enter that into your input. However, even if e4e2e3e
is not a valid js number, you are allowed to put it into your input field. Since it’s not a valid js number, the on-change
function that you are normally relying on won’t fire, so you’ll end up with a browser state that has e4e2e3e
and an atom state that doesn’t. (That’s my own reasoning, based on what I’ve witnessed.)
Is there some general wisdom somewhere about using input type=number
regarding such gotchas as the above somewhere on the internet? I tried googling for it, but didn’t find what I was looking for.
Specifically, it seems to me that using input type=text
instead and rolling your own validation (and whatever else behavior you need) seems to be the more appropriate solution in general, as you’ll be more in control of what happens and how it should look.
(I prefer using whatever is provided directly by HTML for a number of reasons, such as A11Y, hand-rolled solutions not covering corner cases that the HTML implementers already took care of, the extra upkeep that comes with rolling your own solution and so on. So I’m kind of sad about my current conclusion.)
Number inputs are tricky also across different browsers and mobile. I remember a recent article that advocated type=text and using a pattern to do things like bringing up the number keyboard on mobile.
input type=number also takes you to even deeper levels of hell when you need to support multiple locales. Maybe the situation has improved since 3-4 years ago, but back then, we 100% punted on this, and we implemented our own numeric-entry UI. We did this in html/JS and never looked back. (we didn't implement custom mobile-OS keyboards, which I suppose is possible, but we have a html/JS app and use Cordova to run it on multiple mobile OSs)
The locale problem was something goofy like... say you were in a locale that uses a comma ,
to be a decimal separator instead of the .
When you pre-populated an <input type="number"
with a number like 1,23
and you were in such a locale, this was fine... BUT after a user manipulates the value and you need to pull it out of the <input
, it would get a non-locale copy of the value (like, it'd convert it to 1.23
even though).
Note: I might have this description exactly backwards... like, maybe it was you had to always SET the value with a non-locale-specific version (like 1.23
) but when you would take the value out, then it'd be formatted 1,23
Anyhoo --- it was utter madness. And it was not always consistent across iOS, Android, and Chrome.
BTW - with our approach, we didn't even use ANY html input box. We just styled up something that looks like a textbox using plain old divs, and then pull up a keypad entry widget (of our own creation) elsewhere on the screen.
@U7PBP4UVA Maybe we read the same article(s)? https://css-tricks.com/what-to-use-instead-of-number-inputs/ / https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/ 🙂
@UHL84CDTP crikey, that’s some endeavour you went through! I wasn’t aware of the decimal issue, that sounds horrible.
It’s too bad that things are not more stable and standardized in the world of HTML. Yet, at least. We can hope for a better future 🙂
Thanks for sharing your tale!
I wonder if we can toying with CLJS and Svelte with Svelte-preprocess https://github.com/sveltejs/svelte-preprocess
I'mhaving a problem getting a very basic reagent app to work. My deps.edn
{:deps {com.bhauman/figwheel-main {:mvn/version "0.2.8"}
com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}
reagent {:mvn/version "1.0.0-alpha2"}}
:paths ["src" "target" "resources"]}
My demo.cljs.edn
^{:css-dirs ["resources/public/css"]}
{:main todo-demo.main}
My folder structure looks like this:
.
├── demo.cljs.edn
├── deps.edn
├── resources
│ └── public
│ └── index.html
├── src
│ └── todo_demo
│ └── main.cljs
My main.cljs:
(ns todo-demo.main
(:require [reagent.core :as r]
[reagent.dom :as rdom]))
(defn title []
[:div
[:p "Hello, World"]])
(defn app []
[:div
[title]])
(defn main []
(rdom/render [app] (js/document.getElementById "app")))
I run it with
$ clj -m figwheel.main -m --build demo --repl
But I can't get it to display Hello World
in a div
.
My index.html:
<html>
<head>
<!-- this refers to resources/public/css/style.css -->
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<!-- this refers to target/public/cljs-out/cruel-main.js -->
<script src="cljs-out/demo-main.js"></script>
</body>
</html>
Have I maybe missed what I need to call the main function for it to be called?
I can do this at the repl from the docs:
(def app-element (js/document.getElementById "app"))
(set! (.-innerHTML app-element) "Hello, World!")
And I get Hello, World on the page.@qmstuart you are not calling the main
fn anywhere. add <script>todo_demo.main.main();</script>
in your html
it seems to be missing from https://figwheel.org/tutorial#indexhtml
<html>
<head>
<!-- this refers to resources/public/css/style.css -->
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<!-- this refers to target/public/cljs-out/cruel-main.js -->
<script src="cljs-out/cruel-main.js"></script>
</body>
</html>
Is there a way to read the cljs compiler options during macro expansion?
yes. see https://github.com/binaryage/cljs-devtools/blob/master/src/lib/devtools/prefs.clj#L11-L12
thanks!
@thheller I don't think my dependencies are getting minified depending on my clojurescript version but I'll try to reproduce it in a clean repo
in the file you'll see function ha(a){const b=[];let c=0;for(const d in a)b[c++]=d;return b}
run it with :pretty-print true :pseudo-names true
in your compiler options to see where that is coming from
What's my option(s) for REBL (or alike) in ClojureScript? Does the official cognitect REBL work with Cljs?
I think a remote REBL makes a lot of sense. if I ever take a sabbatical it will be one of the projects I try and work on 😄