This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-05-31
Channels
- # aws (2)
- # beginners (101)
- # cider (8)
- # clara (8)
- # cljs-dev (3)
- # cljsrn (17)
- # clojars (2)
- # clojure (67)
- # clojure-austin (2)
- # clojure-finland (1)
- # clojure-france (5)
- # clojure-italy (3)
- # clojure-nl (3)
- # clojure-russia (2)
- # clojure-serbia (1)
- # clojure-spec (72)
- # clojure-uk (112)
- # clojurescript (92)
- # core-async (74)
- # core-typed (2)
- # cursive (8)
- # datomic (2)
- # duct (5)
- # emacs (35)
- # events (11)
- # fulcro (32)
- # instaparse (9)
- # jobs (1)
- # luminus (1)
- # lumo (3)
- # off-topic (118)
- # om (2)
- # onyx (10)
- # pedestal (5)
- # re-frame (21)
- # reagent (48)
- # reitit (40)
- # ring (12)
- # shadow-cljs (113)
- # spacemacs (21)
- # tools-deps (47)
@mhuebert try :web-worker true
for the module but I think service workers should probably be their own build.
can the cljs-repl of shadow-cljs keep history, similar to the way lein does? (e.g. .lein-repl-history)
@thheller sounds good. I was following the example and thought maybe there was a reason to keep it all in the same build, but separating it out makes it easy to change the output-dir without affecting the main build, which is better anyway.
@mhuebert yeah I'm unsure about service workers. they are sort of standalone so making them part of a build is not ideal. including an extra cljs.core however makes it extra large which is also not ideal. just sticking with something like workbox.js might be an option though
yeah, i was thinking of avoiding cljs altogether but didn’t find a library I liked yet, workbox.js looks good, thanks for the tip
@samuel.wagen I have not done any work on that yet
open a ticket otherwise I'll just forget again. I only use the REPL from cursive and that keeps track of history and stuff
Is there a way to inject different env settings into a system based on dev vs release?
To clarify, I mean settings that I can use within my code, not just for the build itself?
Actually, I could have different source paths for each env, and pull in an ‘env’ namespace for each. Like Luminus sets up….
Or is there a better way?
@jmckitrick you might use: https://shadow-cljs.github.io/docs/UsersGuide.html#closure-defines
You’re right! I read over that too quickly. Thanks!
I thought they were just for the compiler settings.
for people who use cursive and shadow, is there a way to automate the process of “select cljs repl and then issue the nrepl-select
command”?
do you mean the clj/cljs select box? that should switch automatically when you nrepl-select
?
i’m being super lazy. i just want to avoid opening up the file that contains the nrepl-select
magic and pasting into the repl
yea, in order to get to my app’s repl (which is the only repl I ever use) I cut-n-paste
(require '[shadow.cljs.devtools.api :as shadow])
(shadow/nrepl-select :app)
every timewait how do you make a repl command? i think that’s what I want. i’m trying to search for it but failing
@wilkerlucio https://github.com/thheller/shadow-cljs/issues/279#issuecomment-393607869 regarding the config reload you asked about
> You may also now put the :shadow/outputs config into the build config instead under the :outputs key since we don't need to namespace here.
very nice 🙂
------ ERROR -------------------------------------------------------------------
File: C:\Users\thheller\code\shadow-cljs\src\dev\demo\es6.js:15:16
--------------------------------------------------------------------------------
12 | console.log("await value", value);
13 | }
14 |
15 | var obj = {hello-World: 1};
----------------------^---------------------------------------------------------
'}' expected
--------------------------------------------------------------------------------
16 |
17 | export { foo, someAsyncFn };
18 | export default "defaultExport";
--------------------------------------------------------------------------------
hey thheller, do you have any advice on how to go about scaffolding projects that are meant to be consumed as libraries?
I'm kind of struggling with deciding if I should put everything in project.clj and use lein integration, or if I should use shadow-cljs.edn
and just put runtime deps in project.clj... plus there's also npm deps...
yeah. unfortunately adding shadow-cljs deploy
involves a lot of work so thats still ways off
I'm having the react-flatpickr
component and I'm trying to do this: https://flatpickr.js.org/plugins/#weekselect
Everything else seems to work, but adding a plugin seems to fail... Here's some relevant code:
(ns ...
(:require ...
["react-flatpickr" :default Flatpickr]
["flatpickr/dist/l10n/nl.js" :refer [Dutch]]
["flatpickr/dist/plugins/weekSelect/weekSelect" :default weekSelectPlugin]))
(defn week-picker [...]
[...
[:> Flatpickr {:options (clj->js {:locale Dutch
:defaultDate (coerce/to-date selected-calendar-date)
:plugins [(weekSelectPlugin. {})]
:weekNumbers true})
:onChange (fn [selected-dates _ _ ] (js/console.log "--" selected-dates))}]
...
I'm getting this error:
Uncaught TypeError: module$node_modules$flatpickr$dist$plugins$weekSelect$weekSelect.default is not a constructor
I have the feeling I'm missing something... but I fail to see what 🙂. All other imports seem to work fine, but this plugin-thing doesn't work
@kurt-o-sys unfortunately some packages include ES6 example but actually ship CommonJS
ok... which means they can't be imported?
try this in the REPL (require '["flatpickr/dist/plugins/weekSelect/weekSelect" :as x])
then (js/console.log x)
ok, let me check 🙂
ok, thx
otherwise you are calling (weekSelectPlugin. {})
maybe you are supposed to call (weekSelectPlugin {})
?
yeah, well... I'm trying to fin dout 🙂
well, the js/console.log
gives me:
ƒ (){return function(a){function b(b){var c=b.target;if(c.classList.contains("flatpickr-day")){b=a.days.childNodes;var d=c.$i/7;c=b[7*Math.floor(d)].dateObj;d=b[7*Math.ceil(d+.01)-1].dateObj;for(var h=…
[1:1]~cljs.user=> (require '["flatpickr/dist/plugins/weekSelect/weekSelect" :as x])
nil
[1:1]~cljs.user=> (x. #js {})
#object[Function]
right. nice.
niiice! thx a lot!
another question @thheller: I'm having a https://github.com/Day8/re-frame app and when I start it using shadow-cljs watch app
, hot reload doesn't seem to work as expected. I have a page with a menu, let's say page1 and page2. When I'm on page1, the content of page1 is shown, obviously. However, when I update that page (the content of page1), it is not updated in the browser. When I click in the menu page2 and page1 again, the update is there...
this is the config:
{:lein true
:jvm-opts ["--add-modules" "java.xml.bind"]
:nrepl {:port 3333}
:builds {:app {:target :browser
:output-dir "resources/public/js"
:asset-path "/js"
:modules {:main {:entries [ui-app.core]}}
:compiler-options {:closure-warnings {:global-this :off}
:closure-defines {"re_frame.trace.trace_enabled_QMARK_" true
"day8.re_frame.tracing.trace_enabled_QMARK_" true}}
:devtools {:http-root "resources/public"
:http-port 3449
:preloads [shadow.cljs.devtools.client.hud
devtools.preload
day8.re-frame-10x.preload]}}}}
@kurt-o-sys there is no :after-load
callback. do you have one configured in the code? using ^:dev/after-load
somewhere in the code?
the update is not there since you need to trigger a re-render after the code was loaded somehow
yeah, I had a template from somewhere... and no, I have no ^:dev/after-load
anywhere 🙂. I'm still new to shadow-cljs 🙂
right...
get it 🙂
if you have a (defn render [] ...)
in your ui-app.core
just add (defn ^:dev/after-load render [] ..)
ok, makes sense! will do.
well, I pass config to that render (which comes from the index.html), but that shouldn't be an issue, should it?
https://github.com/shadow-cljs/quickstart-browser/blob/master/src/starter/browser.cljs
you call init
from the HTML. if you pass config into that method you add a (defonce config-ref (atom nil))
and then (reset! config-ref the-config)
in init
not using atom
now, but I already kept it in the re-frame app state (db). I'm just reading it from there. Thx a lot! Love shadow-cljs more and more.
anyone using shadow-cljs with react 16? I’m getting React not defined errors on release builds
That is weird, it works for us. Maybe you could try deleting the .shadow-cljs
folder and then do a clean npm install
Yeah, I've tried all of that. A vanilla Fulcro template with React 16 is fine. Something weird is hosed.
Have you double checked package.json
so that it contains:
"react": "16.3.2",
"react-dom": "16.3.2",
I know I am asking dumb questions but I a am trying to get to the root cause
You could also check package-lock.json
which should get generated
Do you have:
(ns cljsjs.react
(:require ["react" :as react]))
(js/goog.exportSymbol "React" react)
Not sure if that is still necessary with the newest shadow-cljsI didn't try it via an export...I'll try that. Why would Fulcro template work without that (and this one as well for months), and suddenly need it?
if it were a new project, I'd suspect those kinds of things. With this one I suspect that some dependency loop or something in npm deps is confusing things.
but I tried backing out the one I know was added recently and that didn't seem to help. The upgrade to React 16 was the other one...and it is wanting core-js at 1.x and something else wants 2.x, so not sure if that could hose things.
Oh dear, which version of shadow are you using though? And are they the same in package.json and project.clj?
Oh you found it
(ns cm.core
(:require [reagent.core :as reagent]
[re-frame.core :as re-frame]
[cm.events :as events]
[cm.views :as views]
[cm.config :as config]
[bidi.bidi :as bidi]
[goog.events :as goog-events]
[goog.history.EventType :as EventType]
[taoensso.timbre :as l])
(:import goog.History))
(def route ["/" {"log-in" :log-in
"log-out" :log-out
"sign-up" :sign-up}])
(defmulti handler #(:handler %))
(defmethod handler :default [request]
(l/info "page" request)
(re-frame/dispatch [:handler (:handler request)]))
(defn hook-browser-navigation! []
(doto (History.)
(goog-events/listen
EventType/NAVIGATE
(fn [event]
(->> (.-token event)
(bidi/match-route route)
(handler))))
(.setEnabled true)))
(defn dev-setup []
(when config/debug?
(enable-console-print!)
(println "dev mode")))
(defn ^:dev/after-load mount-root []
(re-frame/clear-subscription-cache!)
(reagent/render [views/page]
(.getElementById js/document "app"))
(hook-browser-navigation!)) ;; <<<<<<<< this line
(defn ^:export init []
(re-frame/dispatch-sync [::events/initialize-db])
(dev-setup)
(mount-root))
After reload page in web browser without any change of code (like add enter on the end of file) I get this HTML in page:
<html><head></head><body><input type="text" name="history_state1" id="history_state1" style="display:none"></body></html>
So I end with this error:
env.cljs:168 error when calling lifecycle function cm.core/mount-root Error: Target container is not a DOM element.
at h.exports (invariant.js:43)
at sa (react-dom.development.js:17117)
at Object.render (react-dom.development.js:17196)
at Object.reagent$dom$render_comp [as render_comp] (dom.cljs:20)
at Function.reagent.dom.render.cljs$core$IFn$_invoke$arity$3 (dom.cljs:44)
at Function.reagent.dom.render.cljs$core$IFn$_invoke$arity$2 (dom.cljs:39)
at Function.reagent.core.render.cljs$core$IFn$_invoke$arity$2 (core.cljs:74)
at cm$core$mount_root (core.cljs:51)
at shadow.cljs.devtools.client.env.make_task_fn (env.cljs:165)
at shadow$cljs$devtools$client$env$do_js_reload_STAR_ (env.cljs:173)
Why? How to fix it?
What I want to achieve: URL navigation like url#/log-in
. That is why I added (hook-browser-navigation!)
but in some magic way it has conflict with shadow-cljs
during development.