This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-12-22
Channels
- # adventofcode (21)
- # announcements (2)
- # babashka (35)
- # beginners (45)
- # calva (22)
- # cider (28)
- # clj-kondo (39)
- # clj-on-windows (69)
- # clojure (28)
- # clojure-europe (15)
- # clojure-nl (7)
- # clojure-uk (24)
- # clojurescript (95)
- # cursive (9)
- # data-science (3)
- # datalevin (2)
- # emacs (11)
- # etaoin (9)
- # fulcro (1)
- # graphql (4)
- # jobs (8)
- # lsp (66)
- # malli (10)
- # missionary (3)
- # pathom (4)
- # polylith (67)
- # releases (3)
- # reveal (2)
- # shadow-cljs (53)
- # spacemacs (2)
- # specter (1)
- # sql (1)
- # tools-deps (6)
- # vim (4)
- # xtdb (16)
@jhacks :asset-path
controls that. you can set it to a full domain. there is also :compiler-options {:source-map-inline true}
, so they'll become part of the file itself with no extra request. makes the files rather huge though.
I am importing some javascript ui-component code (`CardACollection.js`) that was generated from Amplify Studio (it was actually JSX code that was processed by babel into JS code) and it has this import:
import React from "react";
import { Rental } from "../models";
I set things up as per https://shadow-cljs.github.io/docs/UsersGuide.html#_javascript_dialects with this layout:
.
├── package.json
├── shadow-cljs.edn
└── src
└── main
└── amplify_rental_reagent_app
└── core.cljs
└── js
├── .babelrc
└── ui-components
└── CardACollection.jsx
└── gen
├── models
└── index.js
└── index.d.ts
└── ui-components
└── CardACollection.js
Also have set up to use the webpack build as described in https://code.thheller.com/blog/shadow-cljs/2020/05/08/how-about-webpack-now.html#option-2-js-provider-external
:js-options {:js-provider :external
:external-index "target/index.js"}
The problem is that the import statement in the ui-component code is causing shadow-cljs to error out with:
[:app] Build failure:
FileNotFoundException: /Users/rberger/work/aws/amplify-rental-reagent-app/src/gen/models (Is a directory)
Is there a way to make that not happen? This JSX/JS code is all being generated by Amplify Studio and would prefer not to have to manually change that code… The repo with all this is at https://github.com/rberger/amplify-rental-reagent-app@rberger including classpath JS is much stricter than regular npm resolve so you'd need to rewrite import { Rental } from "../models";
to import { Rental } from "../models/index.js";
@thheller That works (though it will be painful to do, since the JS code is auto-generated from an upstream process not under my control, but I’ll deal with that for now). But that seemed to just lead to another issue:
It looks like this code which, is pulled in as JS files in the CLJS repo, needs to be part of the :js-provider :js-external
mechanism. Is there a way to tell shadow-cljs to include a tree of JS code in the :externa-index
in addition to the npm modules to be processed by the external webpack process?
At least I think that is what would fix it. The actual issue is that import { Rental } from "../models/index.js";
has the file parsed, but Rental
is not set properly.
I logged when Rental is set in `models/index.js
const { Rental } = initSchema(schema);
console.log("index.js Rental: ", Rental);
export { Rental };
and after the import in CardACollection.js
import { Rental } from "../models/index.js";
console.log("Rental: ", Rental);
And I see in the console:
index.js Rental: ƒ Model(init) {
var instance = (0,immer__WEBPACK_IMPORTED_MODULE_1__.produce)(this, function (draft) {
initializeInstance(init, modelDefinition, draft);
var …
main.js:1455 ReferenceError: Rental$$module$models$index is not defined
at eval (CardACollection.js:27)
at eval (<anonymous>)
at Object.goog.globalEval (main.js:488)
at Object.env.evalLoad (main.js:1563)
at main.js:1744
Its also possible I’m not doing the JSX -> JS conversion right to generate this JS code. I am following the procedure in https://shadow-cljs.github.io/docs/UsersGuide.html#_javascript_dialects. Might there be more configuration I should do to the .babelrc
to make this work better?
Only the ui-components
are being processed by babel. The models
code is vanilla from what is pulled in with amplify pull
I think what I need to do is actually learn how to use webpack, add another entry to have it put the models
stuff into the bundle.js
all classpath js will be processed by shadow-cljs regardless of :js-provider
since no other JS tool will have access to your classpath https://shadow-cljs.github.io/docs/UsersGuide.html#classpath-js
however if you create a custom npm package and require it like that from CLJS you can setup webpack to do whatever you need
ie. (:require ["my-models" :as foo])
will end up emitting require("my-models")
in the JS file processed by webpack
Yeah, I’m thinking that, but don’t know off hand how to create a npm package from a couple of trees of javascript code. Was starting to look into that
in webpack you can then configure my-models
to resolve wherever you put it. eg. via alias https://webpack.js.org/configuration/resolve/#resolvealias
Right, is there a way to do do the webpack and not create an npm package, if I just put the jsx/js code in a tree outside of the classpath?
"package` basically only means directory. nothing more. it doesn't need to be published to npm or whatever
Ok, I didn’t realize that is what you meant. Checking that and also potentially found a way to make a tree into a local npm module https://dev.to/tomiiide/import-subfolder-modules-in-javascript-like-a-boss-15f7
yeah basically the resolve rules of "npm" (including shadow-cljs or webpack) are that anything starting with a ./
or ../
is looked up on the "filesystem" (classpath in shadow-cljs)
Thanks, the resolve alias (with a few other tweaks) got it to basically work! It also means I can have the Amplify studio generated code flow in with no changes. Now I just have to figure out how to have webpack do the babel JSX->JS instead of me doing that manually with babel.
Is it possible to merge shadow-cljs.edn with config defined in another edn file? I would like to have some local config which can override stuff in shadow-cljs.edn which is not commited into git.
In particular, we have :ssl defined in shadow-cljs and I want to turn it off for testing on mobile.
Unfortunately no. :ssl
cannot be overwritten easily since it is only setup when shadow-cljs is started
Is it possible to override it on the start. That would not be a problem for us.
For instance for lein, we have project.clj shared in Git and individual profiles.clj which can be used to locally modify settings in project.clj
Ok, this is actually addressed in Shadow-cljs user guide: https://shadow-cljs.github.io/docs/UsersGuide.html#config-merge
But it just allows to override individual builds, not the entire configuration.
(-> (shadow.cljs.devtools.config/load-cljs-edn) (dissoc :ssl) (shadow.cljs.devtools.server/start!))
of course properly required and aliased but start!
with no args will just load shadow-cljs.edn
and call the 1-arity start!
. so you could load the config yourself and modify it however you want
Is it possible in some build hook to correct the output of js/import.meta.url
from import$.meta.url
to import.meta.url
?
import.meta.url
is not supported by the closure compiler so it won't work either way
maybe this is a case of an X-Y problem. I would like to print the version of the package.json
of my library when people call it with nbb --version
. of course I could keep the version in some different file/namespace
I solved it with a macro. That seems the most robust solution, just do it at compile time without any doubts.
(ns nbb.macros
(:require [clojure.data.json :as json]))
(defmacro get-in-package-json [k]
(get (json/read-str (slurp "package.json") :key-fn keyword) k))
(ns nbb.core (:require-macros [nbb.macros :as macros]))
(defn version [] (macros/get-in-package-json :version))
Hi all. Curious if anyone has experience using the latest @mui/material lib with shadow. I can install and import components individually but what I would like to do is use the index import for all components (`(:require ["@mui/material" :as mui])`). When I try this though I get an error: Cannot redefine property: unstable_ClassNameGenerator
. This comes from the index.js
where it seems to be doing some treeshaking, importing, stuff. (I say stuff cause I'm not super familar with all the different approaches to this in JS world).
I would suggest to check out the reagent-mui library, a Reagent wrapper for Material UI. For me, it has simplified things a lot, when dealing with the JavaScript/React specific features: https://github.com/arttuka/reagent-material-ui