This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-07-27
Channels
- # beginners (43)
- # boot (1)
- # cider (7)
- # cljdoc (10)
- # clojure (110)
- # clojure-boston (1)
- # clojure-finland (2)
- # clojure-italy (19)
- # clojure-losangeles (1)
- # clojure-new-zealand (1)
- # clojure-nl (4)
- # clojure-spec (34)
- # clojure-uk (163)
- # clojurescript (136)
- # code-reviews (1)
- # component (13)
- # cursive (18)
- # datomic (99)
- # emacs (14)
- # events (4)
- # fulcro (14)
- # hoplon (15)
- # hyperfiddle (3)
- # jobs (3)
- # jobs-discuss (1)
- # lein-figwheel (10)
- # onyx (1)
- # pedestal (8)
- # re-frame (5)
- # reitit (4)
- # rum (1)
- # shadow-cljs (317)
- # spacemacs (24)
- # specter (9)
- # sql (2)
- # tools-deps (6)
- # yada (3)
looks like this react-scripts
command does bunch of that stuff, delegates out to webpack etc
so you have a commercial library that assumes you’re running on c-r-a? wonders never cease
so.. at this point i should be able to drop the .js in my source and (require) stuff from it?
i wonder if the intermediate compiled files can be picked up before they’ve been bundled
ugh this is truly in the weeds now. since that’s essentially an ‘app’… yeah it’s gonna have react
ugh.. lol, plus not even sure how the (require) is supposed to work. I have this main.js now, with all the components I want. But if I’m doing (require “a/b” :default c) presumably shadow is going to expect to see that in node_modules, etc
@eoliphant the code you posted seems to be very webpack specific and its going to be hard to port this to shadow-cljs. you could instead use :target :npm-module
and continue using the existing build system to create the final bundle
I have .sol
files in project, which are files in different language to compile. I would like to do shadow-cljs watch tests
and re-run tests if this file will change. At that moment shadow-cljs doesn’t detect this change.
1) How to re-run tests when .sol
files change?
2) How to compile .sol
files if they change. I have to run code (probably the best lein command) each time when files in /src/contracts
change.
It could be done in 2 separated steps.
1) shadow-cljs watch app
to watch changes including change of compiled files .abi
in some directory,
2) watcher to track /src/contracts
to compile them when source changed.
.sol
are compiled to .abi
and .bin
files. These files are used by module in javascript later.
at that moment by this https://github.com/district0x/lein-solc
touch
will cause the compiler to trigger a recompile, which will then trigger re-running the tests.
there are plenty of options. they are all just a lot more complicated than the above
are the .abi
files actually consumed via some macro or such or are they just loaded via the node fs
package?
hmm or maybe this .abi and .bin files are needed to update in blockchain, not in js… not sure, I am doing it first time. However I need: 1) detect change in directory and run code 2) re-run tests after files changed / blockchain update <- this one I have to check to be sure
I'm asking because its important to know if you actually need to recompile the code or just re-run the test
hmm and actually I am not using project.clj
here, so I am not sure about lein solc
. I am trying to move solution into shadow-cljs from standard lein cljs compiler
1) when change .sol files I have to re-compile them to .abi and .bin files. <- this one for sure 2) when step 1) finish I have to update blockchain and I think use this files in javascript module too <- not 100% sure. cljs files don’t need to be re-compile. 3) re-run tests
so you can shadow-cljs compile tests
once (no watch). update the .sol
files and compile those
but while develop .sol code I will have to write tests in cljs to check them. So I have to use fresh tests.
I don’t need to compile cljs files after change .sol files. But I will edit .sol and .cljs files step by step
yes. I'm just trying to be sure that you do not need to recompile the CLJS when you edit .sol
files
but maybe I need third party solution to watch .sol files and run shell command then. Maybe it is not something to do in shadow-cljs
ok. then I would recommend using chokidar
. disable :autorun
in the shadow-cljs build config. then let chokidar
watch the :output-to
file and in addition to that the .sol
files.
because there is no option in shadow-cljs to watch directory and then do something while I am doing shadow-cljs watch ...
?
you can also use the https://www.npmjs.com/package/chokidar directly and create a small watch.js
@kwladyka you can use shadow-cljs
to watch the directory and make it do all of it BUT that is not documented at all and a little more complex than just using chokidar
the problem with doing it in shadow-cljs is that you must be very careful of not leaking data. ie. watching a file and then not closing it
you don't really have to deal with that when you just a node
process that you can kill at any time
so I will compile .sol files with chokdiar
. It will detect changes in files and run commands for me. But how to tell shadow-cljs watch tests
to re-run? by touch
?
well can't comment on the karma part but for :node-test
I would recommend simply dropping :autorun true
from your build config and letting your chokidar
thing run the tests whenever either the .sol
files change or the :output-to
changes
ie. shadow-cljs watch tests
just watches and compiles the .cljs
files but does not run the tests
> ie. shadow-cljs watch tests
just watches and compiles the .cljs
files but does not run the tests
does this error look familiar to anyone? running shadow-cljs watch from the CLI works, but using the library i get this exception
i have a feeling its something to do with dependencies clashing
@biscuitpants yes. incompatible closure compiler version
yes to start the process
then make sure you have the correct CLJS 1.10.339
and no manual closure-compiler-unshaded
depdencency
thank you! that was it. i’ve got another problem with Transit, but that’s the same issue 🙂
i fixed that one yesterday actually (big thanks to shadow too)
with figwheel we just could not get a cljs repl to work. always a problem about cljs.core.async.macros
using shadow and the repl works with no problem
is it possible to start a repl from the library, without stdin then waiting for input?
@kwladyka i’m pretty sure he doesn’t sleep haha
haha I just see this joke in that context > How long will take to rewrite 3 years old CSS + HTML 3 years
@biscuitpants what do you mean? non-nrepl repl?
so when i do shadow/repl :app
my repl process expects input and hangs until i give input
this is from running a lein repl
and then using the api to setup my builds and CLJS repl
Can you tell a little your personal story how did you start shadow-cljs, how did you get money to not work in that time etc. You did so good job. I am curious your story how did you achieve it having life in the same time (this is my assumption :P).
@kwladyka I started using CLJS about 5 years ago. the tools sucked so I started building my own. so I built it mostly on weekends over 5 years and used it for my projects.
ah thank @thheller - just saw that now 🙂 i see the server starts an nREPL automatically too
haven't got any money to work on shadow-cljs yet. took some time off work last year to work and docs and such
thinking about doing this a bit more seriously in the future. there is so much more I want to do but just can't justify doing
seriously wish I didn't have to do these annoying work projects anymore. they pay well but totally suck. 😛
when i do shadow/nrepl-select :build
i get Can't change/establish root binding of: *nrepl-cljs* with set
oh i see. it looks like i need to set up the nrepl middleware?
🙂 thank you
Maybe you could apply to the clojurists together? https://www.clojuriststogether.org/
thanks @thheller You mean this from the guide?
:js-options
{:resolve {"d3" {:target :npm
:require "d3/build/d3.js"}}}
And the code I posted was perhaps a bad example it’s from a sample page, I’m mainly after the components, thought they certainly also have the style imports.. Here’s an example from their custom button
import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
// material-ui components
import withStyles from "@material-ui/core/styles/withStyles";
import Button from "@material-ui/core/Button";
import buttonStyle from "assets/jss/material-dashboard-pro-react/components/buttonStyle.jsx";
So to your point, I’d build this to say my-mui-lib.js
Then do something like the following? But isn’t the :require going to look in node_modules
?
:js-options
{:resolve {"my-mui-lib" {:target :npm
:require "my-mui-lib.js"}}}
I'm guessing its the pro version of this https://github.com/creativetimofficial/material-dashboard-react?
@eoliphant I'm using material-ui with shadow-cljs. I'm re-using some of the experiments done by @thheller earlier.
https://github.com/bbss/cljsc2/blob/master/src/cljsc2/clj/trashdrawer/material_ui_interop.clj to generate a cljs file with factories for each component: https://github.com/bbss/cljsc2/blob/master/src/cljsc2/cljs/material_ui.cljs
just uploaded a screen shot of the layout.. which you apparently cant see because we’re on the free plan lol
@eoliphant we can still see it, confusing slack message is confusing
This is by no means the "correct way". Meaning I haven't tested it with advanced compilation, and it might import everything so no tree shaking.
Yeah, and shadow-cljs helps a ton 🙂 I really hope shadow-cljs get the clojurists together help.
@eoliphant that library is an absolute nightmare
ok, so yes based on @lee.justin.m’s advice, I did the babel thing
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
// material-ui components
import withStyles from "@material-ui/core/styles/withStyles";
import Button from "@material-ui/core/Button";
import buttonStyle from "assets/jss/material-dashboard-pro-react/components/buttonStyle.jsx";
whereas the example compoents obvioully still have css, etc imports
// creates a beautiful scrollbar
import PerfectScrollbar from "perfect-scrollbar";
import "perfect-scrollbar/css/perfect-scrollbar.css";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
// core components
import Header from "components/Header/Header.jsx";
import Footer from "components/Footer/Footer.jsx";
import Sidebar from "components/Sidebar/Sidebar.jsx";
import dashboardRoutes from "routes/dashboard.jsx";
import appStyle from "assets/jss/material-dashboard-pro-react/layouts/dashboardStyle.jsx";
import image from "assets/img/sidebar-2.jpg";
import logo from "assets/img/logo-white.svg";
the problem is import buttonStyle from "assets/jss/material-dashboard-pro-react/components/buttonStyle.jsx";
now if I do the ‘src/gen’ dir per your .jsx example, and all that stuff is in there
ok, but in that case, wasn’t sure how I’d require a given component. I say stick ‘irritating-mui-lib.js’ in my src. and I want to do the equivalent of (require ["components/CustomButton/Button" :default Button])
if this was working normally
and the .js should be just included in the .html, as opposed to trying to (require [“irritating.js”….])
alright this looks promising https://www.npmjs.com/package/babel-plugin-transform-import-paths
yeah again, this is where i’m getting a headache. lol. They’re using the stock create-react-app stuff. So that build creating an ‘app’ that’s probably had its tree shaken lol, etc.
yeah its rewritten to var _cardStyle = require("../../assets/jss/material-dashboard-react/components/cardStyle");
for me
in CLJS then (:require ["/material-dashboard-react/components/whatever/andSoOn" :as x])
Ok ok. That's great. But will still need something to strip out the css, etc refs like webpack does right?
it won't be fun but probably easier than trying to get all the webpack specific stuff out
Fortunately i think most of the image refs are in the examples, not the components. But will need to verify
https://clojurians.slack.com/archives/C6N245JGG/p1532689094000283 hmm so you read the file as a text and parse it to generate cljs ? @bbss
So, @thheller, when you’re back around, I read over the :npm_module target. If I’m understanding this correctly it allows me to call my cljs code from js, and plays nicely with a webpack, etc toolchain. But am I correct in that I wont be able to grab say these components in my CLJS code?
@kwladyka I run the clojure file which checks the dirs in node_modules and filters some dirs to get the names of what the material-ui exports. Write that to the cljs file which can then be used by other cljs.
But you parse the code, not use cljs to “read” the code. Parse string, not load the code to read something from namespace etc.
But is sounds too complex and hard, so I resigned and I am using material-ui as normal node_module require
shadow-cljs relaease your-build --source-maps
or :compiler-options {:source-map true}
@thheller with shadow-cljs 2.4.24 I'm getting this error using a release build with :node-script
TypeError: (intermediate value)(intermediate value)(intermediate value).Dg is not a function
at a8 (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:1694:329)
at lh (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:1710:27)
at jh (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:249:291)
at Function.<anonymous> (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:1712:156)
at Function.y.b (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:212:112)
at /Users/r627543/Code/fido/packages/web/app/target/out/server.js:1711:103
at Object.<anonymous> (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:1713:3)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Function.Module.runMain (module.js:684:10)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
looks like this commit introduced this: https://github.com/thheller/shadow-cljs/commit/7f3c7cadd9c78d9dd5e923c4d2fa795bd53d84b6
@lilactown that commit made :advanced
the default and the above error is most likely externs
TypeError: (intermediate value)(intermediate value)(intermediate value).$createServer$ is not a function
at $macchiato$server$start$$ (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:33718:362)
changing to :simple
gives me:
Users/r627543/Code/fido/packages/web/app/target/out/server.js:22985
return $keyword_fn$$.cljs$core$IFn$_invoke$arity$1 ? $keyword_fn$$.cljs$core$IFn$_invoke$arity$1($x$$) : $keyword_fn$$.call(null, $x$$);
^
TypeError: Cannot read property 'cljs$core$IFn$_invoke$arity$1' of undefined
at $cljs$core$thisfn$$ (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:22985:30)
at Function.cljs.core.key__GT_js.cljs$core$IFn$_invoke$arity$2 (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:22957:19)
at /Users/r627543/Code/fido/packages/web/app/target/out/server.js:22974:35
at $cljs$core$thisfn$$ (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:23003:465)
at Function.cljs.core.clj__GT_js.cljs$core$IFn$_invoke$arity$variadic (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:23032:10)
at cljs.core.clj__GT_js (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:22969:31)
at /Users/r627543/Code/fido/packages/web/app/target/out/server.js:14078:104
at /Users/r627543/Code/fido/packages/web/app/target/out/server.js:14079:8
at cljs.core.LazySeq.sval (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:10219:122)
at cljs.core.LazySeq.cljs$core$ISeqable$_seq$arity$1 (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:10295:8)
:whitespace
/Users/r627543/Code/fido/packages/web/app/target/out/server.js:1016
goog.debug.Error = function(opt_msg) {
^
TypeError: Cannot set property 'Error' of undefined
at /Users/r627543/Code/fido/packages/web/app/target/out/server.js:1016:18
at Object.<anonymous> (/Users/r627543/Code/fido/packages/web/app/target/out/server.js:118841:3)
at Module._compile (internal/modules/cjs/loader.js:654:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
at Module.load (internal/modules/cjs/loader.js:566:32)
at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
at Function.Module._load (internal/modules/cjs/loader.js:498:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:695:10)
at startup (internal/bootstrap/node.js:201:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:516:3)
okay, apparently I needed to restart my shadow-cljs server because now :simple
is working
@lilactown :whitespace
is not compatible with node
. the :simple
error was actually an :advanced
build with pseudo names active