This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-10-02
Channels
- # beginners (98)
- # bigdata (1)
- # bitcoin (1)
- # boot (32)
- # cider (20)
- # cljs-dev (57)
- # cljsrn (130)
- # clojure (93)
- # clojure-dusseldorf (1)
- # clojure-germany (1)
- # clojure-greece (3)
- # clojure-italy (2)
- # clojure-russia (203)
- # clojure-spec (14)
- # clojure-uk (50)
- # clojurescript (127)
- # css (7)
- # cursive (6)
- # data-science (1)
- # datomic (4)
- # emacs (1)
- # events (1)
- # fulcro (8)
- # funcool (12)
- # graphql (7)
- # jobs (1)
- # lein-figwheel (2)
- # luminus (2)
- # off-topic (7)
- # om (16)
- # onyx (4)
- # parinfer (17)
- # pedestal (6)
- # portkey (36)
- # proton (3)
- # re-frame (10)
- # shadow-cljs (140)
- # spacemacs (12)
- # specter (1)
- # sql (1)
- # vim (10)
- # yada (10)
I’m making a Chrome extension, and came across the following error when trying to use some third part libraries (https://github.com/roman01la/cljss, https://github.com/r0man/cljs-http, …): Could not load file 'bookmark.js' for content script. It isn't UTF-8 encoded.
This error appears when trying to load the script.
After ripping stuff out piece by piece, I’ve managed to trigger it with a simple (:import [
.
So apparently, when Closure stuff is included, something is produced that Chrome interprets as “not UTF-8” (although the file itself is certifiably UTF-8 encoded). This is on whitespace
optimization and cljs 1.9.908
.
I found the offending character. The [weird character here]
in /\uffff/.test("[weird character here]")
below. If I remove it from the compiled JS, the script loads.
goog.json.Serializer.charToJsonCharCache_ = {'"':'\\"', "\\":"\\\\", "/":"\\/", "\b":"\\b", "\f":"\\f", "\n":"\\n", "\r":"\\r", "\t":"\\t", "\x0B":"\\u000b"};
goog.json.Serializer.charsToReplace_ = /\uffff/.test("[weird character here]") ? /[\\\"\x00-\x1f\x7f-\uffff]/g : /[\\\"\x00-\x1f\x7f-\xff]/g;
goog.json.Serializer.prototype.serializeString_ = function(s, sb) {
sb.push('"', s.replace(goog.json.Serializer.charsToReplace_, function(c) {
var rv = goog.json.Serializer.charToJsonCharCache_[c];
if (!rv) {
rv = "\\u" + (c.charCodeAt(0) | 65536).toString(16).substr(1);
goog.json.Serializer.charToJsonCharCache_[c] = rv;
}
return rv;
}), '"');
};
(Edit: Slack strips out the offending character. Replaced it’s location with [weird character here]
. It’s this one: http://www.fileformat.info/info/unicode/char/ffff/index.htm)
Is this a problem with Chrome or with the compiler?hello, can anyone help me ? I'm getting Duplicate extern input: when trying to build my cljs app
Hi. Just starting out with clojurescript and I have a weird problem. If I add a cljc file to my project and DON'T require it from my main.cljs file (so it's just a file, sitting alone), I get "goog.require could not find: cljs.core" if I call (weasel.repl/connect "...")
in my main.cljs. If I require the other file from my main.cljs
, the error goes away, if I comment out the connect, the error goes away. I'm using lein-cljsbuild
to compile and totally confused, seems to be some closure library issue that I don't understand. The error appears spurious- things actually work, and weirdly goog.require("cljs.core") has been invoked perfectly fine previously, so something seems to be toasting it in weasel.repl/connect or such?
with sablono, what’s the best way to return a react element that contains a list of elements?
i’ve got (list [:div "1"] [:div "2"])
there must be a way to return that, without wrapping with a higher div
@biscuitpants try making it a vector
@henrik It would be interesting to know if you actually have two bytes FF
FF
in your file. That would be encoded as UTF-8 as the three bytes EF
BF
BF
. If instead the file literally has FF
FF
in it, then that wouldn't be UTF-8 encoded.
Master @mfikes cracked the Chrome Extension case.
For posterity: when Chrome tells you that it wants your files to be UTF-8
, it’s lying. It wants them to be ASCII
. The solution is to set :closure-output-charset "us-ascii"
in compiler options, and Chrome stops whining.
(My hunch is that Chrome has a bug interpreting UTF-8, and that by using "us-ascii"
output encoding, you get \u
-escaped JavaScript where needed, thus working around the Chrome bug.)
The root problem is that the '\uffff'
JavaScript string here https://github.com/google/closure-library/blob/master/closure/goog/json/json.js#L305 gets emitted as well-formed UTF-8 (three characters EF
BF
BF
), but evidently misinterpreted by Chrome. Using :closure-output-charset "us-ascii"
causes "\uffff"
to appear in the output instead.
I find the penultimate paragraph here of relevant historical interest https://groups.google.com/forum/#!topic/clojure/ZhP88akSnDo
Yes @darwin looks like the same sort of stuff. The open question in my mind is "Isn't this properly UTF-8 encoded anyway? Why would Chrome complain about the three-byte sequence EF
BF
BF
?"
Don't know. I'm no UTF-8 expert. In my issue. Closure compiler was provably spitting invalid UTF-8 output.
in the original closure library code, there is a regex string encoded with hex escape literal "\xFF.."whatever
In the particular case @henrik encountered, the emitted file is valid UTF-8, as far as I can tell. I'm of the mind that it is Chrome that is wrong, given my limited understanding.
btw. when hunting down this bug, I had to compile Chrome from sources in debug mode and then debug it reading the source, that is how I figured it out, because some other UTF-8 validation tools I tried they didn't see anything wrong with the file
I was suspicious, because I didn't believe it was UTF-8 thing, I thought it was just wrong error report
(This is potentially relevant to ClojureScript users because that particular character is in Closure library.)
While perhaps not authoritative, there is an example at the bottom of http://www.fileformat.info/info/unicode/utf8.htm that argues that it is correct UTF-8.
No, Chrome claims the file is not encoded as UTF-8. If you delete those three bytes and replace them with \uFFFF
, Chrome is then happy.
@henrik how are you loading the files into the chrome extension? I'm wondering because I had to do some hacking on this the other day.
AFAIK chrome extension script loading goes through a different code-path which is more strict at validating, that UTF-8 validation was extension code specific in my case, it was related to content script specified in chrome extension's manifest json
BTW for folks wanting to do optimizations: none and/or figwheel aided development inside of a chrome extension its all about writing a script to load the opt none compiled files.
and the reason you would want to do optimizations: none based development for a chrome extension is so that you get speedy incremental compiles and reloading with figwheel as well
@bhauman this is for content scripts, right? background-pages and popup-pages can work with normal Figwheel, AFAICT
well, in chromex-sample, I have working figwheel setup for both background/popup code: https://github.com/binaryage/chromex-sample/blob/master/project.clj#L30
and I'm afraid content script cannot do eval
under normal circumstances, where does this fn come from? https://gist.github.com/bhauman/8af183a13e4446d45bdfe2b285a976df#file-clojurescriptloader-js-L60
btw. there was some prior work: https://medium.com/@wilkerlucio/setting-up-figwheel-for-chrome-extensions-content-scripts-f1631d8e782a
@darwin thanks! I forgot about that. I made some changes to figwheel so that you can override how it imports a script so that it is now possible to use figwheel
"content_security_policy": "script-src 'self' http://localhost:3449 'unsafe-eval'; object-src 'self'",
alternative 'hacky' approach would be to keep content script code running in the context of the page itself and move it into content-script context only for advanced/production build
Also just so you know I just added a figwheel.preload
namespace that pulls its config from :external-config
> :figwheel/config
btw. when you finish this content-script support I will be happy to test it and add it to chromex-sample
@bhauman just looking at your preload config code, not sure what protect-reload-hooks exactly does, but maybe consider quoting config data which will appear in generated cljs, this is what I had to do, when I wanted macro-emitted cljs config data be properly emitted: https://github.com/binaryage/dirac/commit/444cc1f37aa1d41bd5c6a2c1640007326bf3fac5
I mean this needs similar reasoning: https://github.com/bhauman/lein-figwheel/blob/master/support/src/figwheel/env_config.clj#L40
let me make sure that quoting is working correctly, it was originally but I'll check again
I'm sure this has been asked before and forgive my failure at searching: what is the best tutorial for getting up to speed on Clojurescript?
@thaddeus.aid https://clojurescript.org/guides/quick-start, for proper basics
thanks!
the project I am joining already has that implemented but I will look it up to get a better understanding of it 🙂
@thaddeus.aid ah you’re joining an existing project? Are you familiar with Clojure?
vaguely, I've used it before but I would still classify myself as a noob
I've also worked in other functional languages
briefly
fighwheel is only logging the file name in which i have changed code and it shows the logo but nothing changes
@thaddeus.aid you might want to focus on Clojure and whatever framework the project is using then
the Quick Start makes very few assumptions about what you’ll be doing with ClojureScript
I guess what I am more looking at is presentation on the front end. The back end is set up to deliver the data I need in json/transit+json and that is all fine. But I need to totally rework the presentation on the webpage itself.
looks like goog.dom and om.dom
cool, thanks for the help!
seems like a typo in latest changelog good.object/getKeys
-> goog.object/getKeys
if the new clojurescript release is required for compatibility with clojure 1.9 it may be good to note that in the changelog
hi all, I have a question related to discovering resource paths in an SPA: what's the normal way to ... I guess "re-root-url" the resource paths in a WAR file?
I'm using XHR after app boot (using re-frame) to pull some CSV hosted statically in /resources/public/csv/my.csv
. In dev, using the string /csv/my.csv
for the XHR uri works fine, but I want to put a war up on tomcat. In this case, the relative uri ends up as something like /my-war-file/csv/my.csv
. I'm having trouble finding the right words to express this re-root-url'ing to find the right place in the docs. my ring handler seems OK (ie. a curl to
feeds out the CSV as expected, but using something like csv/my.csv
(no leading slash) seems to fail for the XHR call.
Where to check when compilation outputs the following error Duplicate input goog/base.js
?
nvm, it was a require [goog :as goog]
Guys I created Clojurecademy I hope you like it, feel free to provide feedback
A question about mocking functions that are referenced in other namespaces:
Say that I have the functions test.core/foo
and test.helper/bar
. test.core/foo
is referencing test.helper/bar
in its body. Then I want to test test.core
. But I would like to mock out test.helper/bar
to be something else. I can’t get with-redefs
to work for this use case. It will only work for things I reference explicitly in the test file, the only way I got it working is to use set! test.helper/bar ...
which is ugly and permanent for all the other tests. So my question is: Can I achieve the same effect as set!
but without changing the global scope (like with-redefs
)?
@vikeri maybe I’m misunderstanding, but shouldn’t (with-redefs [test.helper/bar ...] ...)
work?
cljs.user=> (in-ns 'test.helper)
nil
test.helper=> (defn bar [] "test.helper/bar")
#'test.helper/bar
test.helper=> (in-ns 'test.core)
nil
test.core=> (defn foo [s] (str (test.helper/bar) s))
#'test.core/foo
test.core=> (foo " in foo")
"test.helper/bar in foo"
test.core=> (test.core/foo " testing")
"test.helper/bar testing"
test.core=> (with-redefs [test.helper/bar (fn [] "mocked")] (test.core/foo " testing"))
"mocked testing"
:thinking_face:
@bostonaholic Hmm, I wonder if it has to do with my tests being async.
very well could be
Then probably the with-redef
is redefining back the values before the async is completed.
Found this: https://nvbn.github.io/2014/11/05/protocols-for-testing/ It almost made it work…
does anyone know how using cljsjs
to create a package that can be required like this:
(require '[cljsjs.foo :as foo])
(foo.bar)
instead of:
(require '[cljsjs.foo])
(js/foo.bar)
@ag use :global-exports
, available since 1.9.854
maybe 1.9.908 actually
@anmonteiro some libs e.g. airbnb/enzyme cannot be consumed for browser directly from node_modules
, they need to be bundled via webpack. So cljsjs in some cases still relevant
yes, that’s what :global-exports
is for
wait, so, how do I turn this es6:
import * as enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
enzyme.configure({ adapter: new Adapter() });
to something that would work in browser and can be used as
(require '[enzyme :as enzyme])
in a browser repl?depends what global variables the webpack build exports
you just said you were going to bundle the package you want to use via webpack
I’m asking which global variables that bundle exports
you wanna set {:global-exports '{cljsjs.enzyme enzyme}}
or something
so that js/Enzyme
can be used as cljsjs.enzyme
here's the cljsjs package I made https://github.com/cljsjs/packages/compare/master...agzam:enzyme