This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-12-09
Channels
- # adventofcode (132)
- # announcements (19)
- # babashka (7)
- # babashka-sci-dev (6)
- # beginners (46)
- # calva (25)
- # chlorine-clover (5)
- # cider (2)
- # clara (17)
- # clj-kondo (93)
- # clojure (2)
- # clojure-dev (4)
- # clojure-europe (12)
- # clojure-losangeles (3)
- # clojure-nl (7)
- # clojure-uk (4)
- # clojurescript (29)
- # conjure (6)
- # core-async (8)
- # cursive (16)
- # data-science (7)
- # datomic (1)
- # exercism (4)
- # figwheel-main (8)
- # fulcro (9)
- # graphql (2)
- # helix (1)
- # introduce-yourself (3)
- # jobs (3)
- # lsp (4)
- # malli (20)
- # minecraft (3)
- # nextjournal (62)
- # off-topic (16)
- # overtone (34)
- # pathom (5)
- # polylith (10)
- # portal (1)
- # re-frame (104)
- # reagent (29)
- # reitit (1)
- # remote-jobs (2)
- # rum (3)
- # shadow-cljs (22)
- # spacemacs (2)
- # sql (10)
- # tools-deps (17)
- # vim (13)
I hope any bulma expert is here because after a few days struggeling I do not see why this is not showing what its supposed to do
(defn main-panel []
[:section.hero.is-fullheight
[:div.hero-body.has-text-centered
[:div.container
[:div.box
[:div.columns
[:div.columns.is-four-fifths
[:textarea.textarea]]
[:div.columns.is-one-fifths]
[:div.columns.is-one-fiths]]]]]])
and that is to show the text-area in a part of 4/5 of the container@roelof I don't have a clue about bulma but guessing from the naming conventions I would expect :div.column
elements to be nested in :div.columns
. right now you have :div.columns
in :div.columns
. There is also a is-four-fifths
and then two is-one-fifths
(although one has a typo) which would make it 6/5
?
(defn main-panel []
[:section.hero.is-fullheight
[:div.hero-body.has-text-centered
[:div.container
[:div.box
[:div.columns
[:div.column.is-two-fifths
[:textarea.textarea]]
[:div.column.is-one-fifths]
[:div.column.is-two-fiths
[:textarea.textarea]]]]]]])
next challenge, find out how I can add what I added in the first text-area to the atom
and another problem I wanted to add 10x to the mix and now I have this
:builds
{:app {:target :browser
:output-dir "resources/public/js/compiled"
:asset-path "js/compiled"
:modules
:devtools
{:pre-loads [day8.re-frame-10x.preload]}
:dev
{:compiler-options
{:closure-defines
{re-frame.trace.trace-enabled? true
day8.re-frame.tracing.trace-enabled true}}}
:relaase
{:build-options
{:ns-aliases
{day8.re-frame.tracing day8.re-frame-tracing-stubs}}}
{:app {:init-fn toy-project1.core/init}}}}
:nrepl {:port 8777}}
but when I want to run it I see this error message
[:app] Build failure:
Invalid configuration
-- Spec failed --------------------
{:target ...,
:output-dir ...,
:asset-path ...,
:modules :devtools,
^^^^^^^^^
{:pre-loads [day8.re-frame-10x.preload]} ...,
{:compiler-options
{:closure-defines
{re-frame.trace.trace-enabled? true,
day8.re-frame.tracing.trace-enabled true}}}
...,
{:build-options
{:ns-aliases {day8.re-frame.tracing day8.re-frame-tracing-stubs}}}
...,
:build-id ...}
should satisfy
map?
and this one compiles
:builds
{:app {:target :browser
:output-dir "resources/public/js/compiled"
:asset-path "js/compiled"
:modules
{:app {:init-fn toy-project1.core/init}}}}
:devtools
{:pre-loads [day8.re-frame-10x.preload]}
:dev
{:compiler-options
{:closure-defines
{re-frame.trace.trace-enabled? true
day8.re-frame.tracing.trace-enabled true}}}
:relaase
{:build-options
{:ns-aliases
{day8.re-frame.tracing day8.re-frame-tracing-stubs}}}
:nrepl {:port 8777}}
but I do not see 10x appear 😢also the :nrepl
seems to have gotten into the build. it belongs at the top level, otherwise it'll have no effect
Can someone help me figure out why I do not see 10x appear
;; shadow-cljs configuration
{:source-paths
["src"]
:dependencies
[
[reagent "1.1.0"]
[re-frame "1.2.0"]
[day8.re-frame/re-frame-10x "1.0.2"]
]
:dev-http {8280 "resources/public"}
:builds
{:app {:target :browser
:output-dir "resources/public/js/compiled"
:asset-path "js/compiled"
:modules
{:app {:init-fn toy-project1.core/init}}}}
:devtools
{:preloads [day8.re-frame-10x.preload]}
:dev
{:compiler-options
{:closure-defines
{re-frame.trace.trace-enabled? true
day8.re-frame.tracing.trace-enabled true}}}
:release
{:build-options
{:ns-aliases
{day8.re-frame.tracing day8.re-frame-tracing-stubs}}}
:nrepl {:port 8777}}
@roelof did you press ctrl-h
as mentioned in https://github.com/day8/re-frame-10x#usage? And if you did and the trace panel doesn’t show maybe this will help you: https://github.com/day8/re-frame-10x#if-the-re-frame-10x-window-wont-show-up-when-pressing-ctrl-h
You’re pretty close @roelof
1. Pull out :nrepl
to top level of the config map
2. Remove the 2 extra curly braces around init-fn
3. trace-enabled?
(note missing ?
)
4. re-frame.tracing-stubs
(`.` not -
)
Is there some way to hide the re-frame-10x inspector other than ^H on the keyboard? I’m trying to debug on my iPad and can’t find a way to hide the inspector? Thanks!
No, there are issues about that: • https://github.com/day8/re-frame-10x/issues/314 • https://github.com/day8/re-frame-10x/issues/238
Cool - thanks 👍
I see that there’s a (rather old!) pull request for one of those issues? Is there a reason why it wasn’t applied?
Why is my db not updated after I enters 1 char
(def default-db
{:text ""})
views :
(defn main-panel []
[:section.hero.is-fullheight
[:div.hero-body.has-text-centered
[:div.container
[:div.box
[:div.columns
[:div.column.is-two-fifths
[:textarea.textarea {:on-change #(re-frame/dispatch [::events/update-text (-> % .-target .-value)])}]]
[:div.column.is-one-fifths]
[:div.column.is-two-fifths
[:textarea.textarea]]]]]]])
Hard to say without having all of the code. But your re-frame-10x panel shows that there was no event other than ::initialize-db
. So it narrows it down.
Check the browser's JS console and see if there are any errors/warning. Replace that :on-change
with a logging function and see if it logs anything. Log the body of the event handler and see if that works. It's all standard debugging procedure - you have a set of premises and a set of observations, and all you have to do is keep on making hypotheses and testing them, starting from the most obvious to the least obvious ones.
Two things:
• CLJS strings must be in double quotes
• You can write (js/console.log ...)
instead of (.log js/console ...)
, makes it a tad easier
oke, when I do this :
[:textarea.textarea {:on-change #(.log js/console "this is working")}]]
I see the output in the consoleWell, there was a hypothesis that :on-change
wasn't triggering, and now you refuted it. Now make a new hypothesis and check it. :)
(re-frame/reg-event-db
::update-text
(fn [db [_ v]]
(.log js/console "this is working")
(assoc db :text v)))
I see sometimes the text and sometimes notAre you sure that your code is the one running on that web page? Meaning, if your hot code reloading not working properly, you might make a change and not see it until you reload the page or maybe fix something else somewhere.
You don't need to restart anything UI-related if you properly set up your CLJS development environment. Shadow-cljs has documentation on that. And even if you simply reload something, sometimes browsers cache stuff.
Given that now seemingly everything works, my hypothesis is that your development environment is not set up properly to work with hot reloading and to handle browser caching.
could be a reason because after the 1 press I see the contents of the default-db method
this is my shadow-cls.edn file
;; shadow-cljs configuration
{:source-paths
["src"]
:dependencies
[
[reagent "1.1.0"]
[re-frame "1.2.0"]
[day8.re-frame/re-frame-10x "1.0.2"]
]
:dev-http {8280 "resources/public"}
:builds
{:app {:target :browser
:output-dir "resources/public/js/compiled"
:asset-path "js/compiled"
:modules
{:app {:init-fn toy-project1.core/init}}
:devtools
{:preloads [day8.re-frame-10x.preload]}
:dev
{:compiler-options
{:closure-defines
{re-frame.trace.trace-enabled? true
day8.re-frame.tracing.trace-enabled? true}}}
:release
{:build-options
{:ns-aliases
{day8.re-frame.tracing day8.re-frame-tracing-stubs}}}}}}
The environment is not just that shadow-cljs.edn
file. In this case, the second most important part is the actual code since it has to specify what to do upon code reloading. Shadow-cljs has documentation on that, re-frame has documentation on re-frame-specific parts.
Let's confirm this - when you e.g. add a [:span "hello"]
somewhere in your code where it's supposed to make it to the HTML, do you actually see that hello
on the page after you simply save that CLJS file?
I think the x10 part is messing things up , I did a very easy one before without x10 and then everything was working fine
Well, then you have a pretty good lead - try to follow it. Disable re-frame-10x completely, see how that works out. Enable it again, compare. Document your findings.
I have no idea what you want to achieve with that, but that's not valid CLJS. Or rather, it is valid code but it's guaranteed to fail at run time.
back to the books to look if there is a way I can print the contents of the db without using x10
You really gotta get your basics correct.
#(...)
creates a function, a lambda. It's a CLJS thing - CLJ, even. You don't need that, you need a value from your app-db. Re-frame has numerous examples in its documentation.
call a subscriiption and then in subs,clj do this
(re-frame/reg-sub
:read-text
(fn [db]
(db :text)))
Yes, that's how you register it, but using it is a different deal.
Also, replace (db :text)
with (:text db)
. This way, it will work even if db
is nil
, which happens before the initialization is done.
or do youy mean this :
[:pre (with-out-str (pprint (:part @re-frame.db/app-db)))] ;; see a part of it!
I would recommend resting for a bit and going through re-frame documentation while jotting down things you didn't know of things you find useful but can't implement immediately. Like in this case - you don't know how to use a subscription, so when you find the relevant documentation, just write it down and refer back to it when in doubt.
You can use (fn [db _] db)
as your subscription handler to see the whole db. After registering that handler with some ID, you can subscribe to that ID in a view and get the full value.
hmm, I found that in de re-frame docs here : https://github.com/day8/re-frame/blob/master/docs/FAQs/Inspecting-app-db.md
It can be a quick and dirty way to inspect the value for the development purposes - sure. But you must not refer to re-frame.db
in actual production code.
change
events fire on "commit" (eg. blur)
you perhaps want input
.
:on-change
events on :textarea
fire right then and there, without having to blur anything.