This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-08-14
Channels
- # aws (1)
- # beginners (52)
- # boot (1)
- # cider (9)
- # clara (4)
- # cljs-dev (40)
- # cljsrn (2)
- # clojure (166)
- # clojure-dusseldorf (1)
- # clojure-italy (38)
- # clojure-spec (13)
- # clojure-uk (32)
- # clojurescript (337)
- # cursive (11)
- # data-science (47)
- # datomic (11)
- # emacs (3)
- # events (1)
- # fulcro (57)
- # hoplon (16)
- # jobs-discuss (1)
- # juxt (11)
- # keechma (21)
- # mount (2)
- # off-topic (44)
- # onyx (9)
- # re-frame (33)
- # reagent (1)
- # ring-swagger (3)
- # specter (2)
- # test-check (37)
- # vim (30)
Not saying it isn’t possibly a hard problem. What if I only use L (implicitly) from one of my modules, and the dep graph for splitting decides to place it in that module because it is the only place it is used?
well, actually, I’m still OK. Because then the module info would show it in that module, and that module writer would properly call set-loaded!
when it was loaded.
The error is also a bit misleading, because there are chained assertions. The call to loaded?
here https://github.com/clojure/clojurescript/blob/master/src/main/cljs/cljs/loader.cljs#L66 is actually what is throwing the error (because loader
is nil).
the error message on line 65 is the same text as that of line 50…so it is easy to get a little confused about which thing is broken.
Getting an error on my Windows 10 computer trying out https://ajpierce.github.io/posts/react-figwheel-npm-2/
Stacktrace java.lang.IllegalArgumentException: c:\dev\splort\node_modules\react-dom\index.js is not a relative path at http://clojure.java.io$as_relative_path.invokeStatic (io.clj:414) http://clojure.java.io$file.invokeStatic (io.clj:426) http://clojure.java.io$file.invoke (io.clj:418) cljs.closure$write_javascript.invokeStatic (closure.clj:1698) cljs.closure$write_javascript.invoke (closure.clj:1691) cljs.closure$process_js_modules$fn__15415.invoke (closure.clj:2348)
Hi, I've wrote a this app: https://calm-wildwood-56255.herokuapp.com/#/chart , using CSS transitions. But those transitions does not work correctly in some of the components. In my app, only the components who are moving upwards works well, those who are moving downwards moves instantly without animation. (I want them both moves with animation.) CSS is here:
div.canvas {
position: absolute;
top: 90px;
left: 60px;
width: 640px;
height: 480px;
border: 1px solid #999;
background: white;
}
div.canvas-rect {
position: relative;
margin-left: 20px;
margin-top: 10px;
height: 20px;
background: green;
transition: all 1s linear;
-moz-transition: all 1s linear; /* Firefox 4 */
-webkit-transition: all 1s linear; /* Safari 和 Chrome */
-o-transition: all 1s linear; /* Opera */
}
(defn rank-rects []
(let [rank (rf/subscribe [:rank])]
[:div.canvas-inner
(doall (for [i (range (count @rank))
:let [r (get @rank i)]]
^{:key r}
[:div.canvas-rect
{:style {:width (str (* 20 (inc r)) "px")
:top (str (* i 30) "px")}}
]))]))
@cmal CSS transitions work only when updating existing elements, not when creating them from scratch. It looks to me, that you don’t have stable keys for .canvas-rect
list of elements, so React might re-render them from scratch, because there is no good mapping between existing elements in the DOM and elements you want to render. Just a wild guess
Anyways, you should be able to debug this in Chrome DevTools. This should be unrelated to ClojureScript.
Sorry @darwin, it seems the same problem: https://calm-wildwood-56255.herokuapp.com/#/chart
(defn dynamic-rank [time]
(fn []
[:div.canvas-inner
(doall
(let [rank (shuffle (range 5))]
(for [r rank
:let [i (.indexOf rank r)]]
^{:key r}
[:div.canvas-rect
{:style {:width (str (* 20 (inc r)) "px")
:top (str (* i 30) "px")}}
])))]))
if you open in in the devtools and observe changes, you must see that the divs are not being re-created, just updated in-place
devtools highlights DOM changes in the Elements
panel, either it highlights only changed attrs in purple or element tag in purple (that means the whole element was re-created)
but I’m sorry, I’m not going to follow with you on this, I’m not very familiar with react
how do integrate email in my cljs project
@tony.kay try master when you can, I reverted the loader validation stuff - I was on the fence about that anyway
@dnolen Hm. That doesn’t give me an assertion error, but the module loading is failing. I’m not sure why. It pulls the js file for the module. Possible an exception is getting thrown from within my namespace before set-loaded!
is reached? I also see a lot more network traffic on the load than I did before.
I’m calling it for the entry point on application start, and at the bottom of the loaded module.
well, it did last night. I have not tried that on this version, cause I thought you were indicating it would not be necessary
https://github.com/fulcrologic/fulcro/blob/develop/src/demos/recipes/dynamic_ui_main.cljs
given that it calls load after someone called set-loaded!
, base is definitely already marked as loaded
so, when I pin it, I only see the load of the module. When I don’t, it triggers a bunch of loads
it didn’t seem right to me either, but I am doing the things I said. I can check that the common ns is in base
going to have to restart…give me a min. I was manually compiling to get other variables out of the way. Don’t have a repl
yeah, just a sec. The project was configured for figwheel, but I removed it to prevent side-effects from that. Adding REPL support via cljs
it does not, really. It is loading stuff that would have needed to be there for it to get where it already was
haven’t seen anything like that nor how to reproduce it - so I would think something else is still wrong
yeah, something is strange. It is loading now, and loaded?
reports true for the module. But the callback didn’t seem to fire, either, and there are all the extra loads.
yeah, it was retrying earlier…but now it reports success. The callback may have fired and I’m just not seeing what I expect
[111.927s] [goog.net.BulkLoader] All uris loaded.
console.js:203 [111.928s] [goog.module.ModuleLoader] Code loaded for module(s): main
console.js:203 [111.929s] [goog.module.ModuleLoader] evaluateCode ids:main
console.js:203 [112.032s] [goog.module.ModuleManager] Module loaded: cljs_base
console.js:203 [112.034s] [goog.module.ModuleManager] Module loaded: main
shows, but I have a debug message in my callback that is not showing.This is the start of the messages when triggering load for the module:
[111.787s] [goog.module.ModuleManager] Registering callback for module: main
console.js:203 [111.788s] [goog.module.ModuleManager] Initiating module load: main
console.js:203 [111.789s] [goog.module.ModuleManager] Loading module(s): main
console.js:203 [111.789s] [goog.module.ModuleLoader] downloadModules ids:main uris:js/demos/goog/json/hybrid.js,js/demos/goog/net/xmlhttpfactory.js,js/demos/goog/module/moduleinfo.js,js/demos/goog/html/legacyconversions.js,js/demos/goog/useragent/product.js,js/demos/goog/module/abstractmoduleloader.js,js/demos/goog/structs/simplepool.js,js/demos/goog/net/wrapperxmlhttpfactory.js,js/demos/goog/net/eventtype.js,js/demos/goog/module/module.js,js/demos/goog/module/moduleloader.js,js/demos/goog/module/basemodule.js,js/demos/goog/net/xhrlike.js,js/demos/goog/net/bulkloaderhelper.js,js/demos/goog/module/moduleloadcallback.js,js/demos/goog/net/bulkloader.js,js/demos/goog/net/errorcode.js,js/demos/goog/net/httpstatus.js,js/demos/src/main/yahoo/intl-messageformat-with-locales.js,js/demos/goog/debug/tracer.js,js/demos/om/dom.js,js/demos/clojure/walk.js,js/demos/cljs/spec/gen/alpha.js,js/demos/cljs/spec/alpha.js,js/demos/fulcro/client/util.js,js/demos/fulcro/i18n.js,js/demos/fulcro/client/mutations.js,js/demos/fulcro/client/impl/om_plumbing.js,js/demos/fulcro/client/impl/data_fetch.js,js/demos/fulcro/client/network.js,js/demos/fulcro/client/impl/application.js,js/demos/fulcro/client/core.js,js/demos/cljs/loader.js,js/demos/fulcro/client/routing.js,js/demos/recipes/dynamic_ui_main.js
console.js:203 [111.790s] [goog.net.BulkLoader] Starting load of code with 35 uris.
it’s telling us that the ns itself doesn’t have syntax errors that are killing eval 🙂
@tony.kay yeah I think we should understand why stuff is loading multiple times when you don’t pin
Are there documented differences between js-this
and this-as
behaviour under advanced compilation? I am switching a bunch of uses of aget
to goog.object/get
and found cases where (gobj/get (js-this) "someProperty")
returns nil, while (aget (js-this) "someProperty")
and (this-as this (gobj/get this "someProperty"))
both return the correct value
it does seem that way. The namespaces in question already have defs at the js console, at least
@mhuebert ClojureScript compiler may introduce closures, this-as
captures this
and creates scope
I just rebuilt with the common lib ns pinned to the entry point module, and it only triggers a load for the one new ns.
the only way for this to happen (w/o finding some other bug) is if what you said just isn’t true
ok, answer this: is it only requires that generate the dep graph, or is something else involved?
(.call (fn []
(prn 1 (aget (js-this) "greeting"))
(prn 2 (gobj/get (js-this) "greeting"))
(this-as this
(prn 3 (aget this "greeting")))
(this-as this
(prn 4 (gobj/get this "greeting"))))
#js {:greeting "Hello"})
^^ #2 above prints nil
, the rest print "Hello"
:compiler {:devcards true
:output-dir "resources/public/js/demos"
:asset-path "js/demos"
:preloads [devtools.preload]
:modules {:entry-point {:output-to "resources/public/js/demos/demos.js"
:entries #{cards.card-ui }}
:main {:output-to "resources/public/js/demos/main-ui.js"
:entries #{recipes.dynamic-ui-main}}}
:optimizations :none}}
@tony.kay the other thing is at the JS console you should look at goog.dependencies_.nameToPath
one problem I saw until I made some fixes is that goog/base.js
would be loaded multiple times - that breaks everything
OK, here’s some info: The diff between base and deps on the pinned vs non-pinned js files are identical. The only difference is that when I pin the common lib ns, the diff of the entry point module now includes it in a goog.require (where it didn’t before).
@mfikes ok you’re correct, with :static-fns false
it works, :static-fns true
it’s nil
For reference here is the JavaScript generated for each: https://gist.github.com/mfikes/da1d13186cb6f8ff38689c8791306fa3
@mfikes thanks for that gist! seems odd that it is creating a new anonymous function there
@mhuebert My initial reaction is that your 4th form is correct, and the 2nd isn’t (additionally the 2nd is using a private macro)
@dnolen So, without the explicit pin, I am getting a load of basemodule.js: [ 12.734s] [goog.net.BulkLoader] Received event “complete” for id 11 with uri js/demos/goog/module/basemodule.js
[ 12.741s] [goog.net.BulkLoader] Received event “complete” for id 15 with uri js/demos/goog/net/bulkloader.js
not sure what you want me to look at in nameToPath…it has a lot of stuff. I take it this is just the way it knows a module name’s path
@mfikes yeah, the generated code for the 2nd looks right. it seems strange that the :static-fns option would wrap a call to gobj/get in an anonymous fn
@tony.kay what you are saying though it sounds like you have a module graph with dupes
@mhuebert My guess, is that, since you used (js-this)
you are referring to something in a larger scope, forcing it to essentially treat it like a let
binding. Just like the code you get for
(let [k "hello"]
(gobj/get #js {:greeting "hello"} k))
which is
(function (){var k = "hello";
return goog.object.get(({"greeting": "hello"}),k);
})()
Perhaps the aget
avoids the issue given that it itself is a macro. Dunno (haven’t looked into it deeply)
Yes, I can verify that things appear in cljs_base also appear in the module to load. ok, why would I have dupes?
I just eyeballed it…for the three files involved, I don’t. But there are a lot of files in the project.
yes. The user interaction happens on entry point, but entry point runs a mutation that triggers code in a diff ns that does the load
let me make sure something stupid like tools ns refresh isn’t getting hit during compile. I’ve had problems there before.
@tony.kay if you use :verbose
with higher optimization setting you will see output info about :modules
and where entries are assigned
Building module :main
adding entry (recipes.dynamic-ui-main)
module :main depends on :cljs-base
is exactly what I’d expect. But without pinning the library ns to the entry point, I get a bunch of stuff that makes no sense
also you wouldn’t see this under :optimizations
since you probably have a different build sans devcards
yeah, I moved the app out of a card and mounted directly on DOM. But that also changed by dep graph
Does this ring any bells?
Uncaught TypeError: Cannot read property 'isValidElement' of undefined
at Object.r.23.112 (cljs_base.js:sourcemap:12)
at o (cljs_base.js:sourcemap:12)
at cljs_base.js:sourcemap:12
at Object.r.38.112 (cljs_base.js:sourcemap:13)
at o (cljs_base.js:sourcemap:12)
at cljs_base.js:sourcemap:12
at Object.r.31.10 (cljs_base.js:sourcemap:13)
at o (cljs_base.js:sourcemap:12)
at cljs_base.js:sourcemap:12
at Object.r.47.1 (cljs_base.js:sourcemap:14)
So, not a very good result overall 😕 Seems there are ways of making it lose its mind that remain a bit of a mystery
@tony.kay gotta step away for a bit, but will be back online later to look at this issue
https://github.com/clojure/clojurescript/commit/190f3fa6bcad8f78edba2d4f509f665902c88e0f
@mfikes so the act of calling (js-this)
ends up generating a closure around its parent form which has a new this
context
so generally, if we need to use this
inside a function, we should wrap the interior of the function with (this-as <some-sym>)
and use <some-sym>
, because at any other point inside the function, the compiler may create closures which change what this
points to, and these closures aren’t represented lexically, nor are they predictable across different compile options
intuitively I would expect the compiler to munge the arg to this-as
, even if it was named this
in my code
@noisesmith yeah in the example that mfikes made (https://gist.github.com/mfikes/da1d13186cb6f8ff38689c8791306fa3) we see the compiler generating code like this$ = this
and this_22 = this
oh, cool
You can get functions being generated for let
forms. What’s odd in this case is there is no let
form, but perhaps it is the same in the end: perhaps the compiler is generating a closure in order to access it. It is an interesting case.
Also, @mhuebert, it isn’t clear to me that js-this
is meant for use in application code (it is marked as private)
@dnolen So, I can verify that with a very bare-bones example that module loading works as expected now. Both with none and advanced optimizations.
Next, in a more complex project, it works fine with no optimizations. However, all other optimization levels in my project seem broken. Won’t even start. Without modules, the program works fine (including all optimization levels). Not sure how to narrow that down. It seems to be React-related in at least a few of the levels (e.g. functions get renamed erratically or removed when they shouldn’t).
That repo has three branches of interest: master
is the minimum example, which works fine. The other two are minimal examples that leverage Om Next with Fulcro. The one without modules works for all opt levels. The one with modules works, but only for optimization none. They use a simple Python web server, and a shell script for build.
Hm. it is possible I did something wrong with respect to my i18n code…I use a raw js file and I didn’t configure it as a foreign lib
Hey y'all. I've been scratching my head for a few hours now trying to figure out an issue I'm having with compiling my project in development (`:optimizations :none`). I get an error that doesn't point to a line, just the file:
---- Could not Compile /Users/lambdahands/<truncated>/db.cljs ----
failed compiling file:/Users/lambdahands/<truncated>/db.cljs
---- Compiler Error : Please see /Users/lambdahands/<truncated>/db.cljs ----
Mind you, I don't see this issue in advanced compilation, and the file isn't doing anything special, simply a few spec definitions and an initial UI data structure. Running it through planck
doesn't show any errors either. I'm running this through boot and compiling with Figwheel 0.5.12
and the latest ClojureScript 1.9.854
. Here's a gist of the file I'm attempting to compile: https://gist.github.com/lambdahands/6e1bded0fafa316c709dd5acfd83108cAlso, I did recently upgrade to 1.9.854
- this file hasn't changed in our codebase since April or so
(on a side note I upgraded our entire application to the Clojure 1.9 alpha in a debugging hail mary, and it was super painless! 😄)
Aha! This is a classic "post your problem to Slack and the find the line that's causing it five minutes later" - so the following compiles:
#(re-matches #"[email protected]+\..+" %)
The following does not:
(s/def ::email #(re-matches #"[email protected]+\..+" %))
@lambdahands I can't repro:
$ java -cp ~/Downloads/cljs.jar:src clojure.main -m cljs.repl.node
ClojureScript Node.js REPL server listening on 50587
To quit, type: :cljs/quit
cljs.user=> *clojurescript-version*
"1.9.854"
cljs.user=> (require 'wont-compile)
WARNING: wont-compile is a single segment namespace at line 1 /Users/mfikes/Desktop/src/wont_compile.cljs
nil
cljs.user=> (dir wont-compile)
accounts-form
default-state
form-specs
users-form
nil
cljs.user=> (require '[clojure.spec.alpha :as s])
nil
cljs.user=> (s/def ::email #(re-matches #"[email protected]+\..+" %))
:cljs.user/email
cljs.user=> (s/valid? ::email "")
true
Hmm, interesting - I wonder if there's a dependency causing this?
What error do you get when evaluating (s/def ::email #(re-matches #"[email protected]+\..+" %))
?
I actually don't get an error unless I uncomment that line in my project file and run through Figwheel - plank seems to accept my file OK
But the project compilation fails with this:
---- Could not Compile /Users/lambdahands/<truncated>/db.cljs ----
failed compiling file:/Users/lambdahands/<truncated>/db.cljs
---- Compiler Error : Please see /Users/lambdahands/<truncated>/db.cljs ----
If you have a REPL, perhaps you can try (require 'wont-compile :reload)
to see if you get any error reported back that way
Hrm, just tried and I get the same error in my REPL
Even stranger, I can compile that code running in the browser REPL
I get nil
after a (pst)
If you evaluate a require
form, I wouldn't expect Figwheel to be involved (presuming Figwheel is the thing indicating the compiler errors you pasted above)
That's a good point - maybe I should investigate in #lein-figwheel ?
Ah, I see - a REPL special?
Yep, it returns a macro
I have a feeling this could have something to do with some code on my classpath, but even after wiping it clean I still get the error
Oh, interesting
Well, perhaps check to see what is in db.cljs
, since it seems to be complaining about that namespace 🙂
Is there any chance that the def
macro in spec thinks my regex is a Java regex?
It has to be temporarily read in as a Java value, and then later the JavaScript equivalent is emitted
(This differs from self-hosted, where the reader reads regex's in as JavaScript regexs.)
At a certain point recently ClojureScript started using tools.reader
so you may be on to something
I'll see if I can find a way to reproduce then!
@lambdahands If it really turns out to be an issue with it temporarily being read in as a Java regex, I suppose you could work around it by having the reader only read symbols and strings via (js/RegExp. "[email protected]+\\..+")