Fork me on GitHub
#shadow-cljs
<
2022-10-30
>
shawn20:10:20

hello. Is there a way to apply a babel transform plugin directly to shadow-cljs rather than trying to solve it by applying it post-js compilation? The one I had in mind is https://www.npmjs.com/package/babel-plugin-relay . I've seen a few ways that this had been used for vite and esbuild as well. Thank you

thheller20:10:15

no, since shadow-cljs doesn't use babel for most code

shawn20:10:51

thank you. would a good option be to work with https://code.thheller.com/blog/shadow-cljs/2020/05/08/how-about-webpack-now.html#option-2-js-provider-external and then use the build tool of choice to complete the process? If so, would there be a way to feed it back into shadow-cljs such that it can be served through clojure instead of a js-server?

thheller20:10:12

that depends on the build tool you use

thheller20:10:23

if it outputs a regular .js file then yes

thheller20:10:37

if it requires running the server during dev (eg. vite) then it won't

shawn20:10:07

wonderful. thank you very much for shadow-cljs and for your help! I'll try this out now

shawn22:10:50

hi again. I tried the following and seem to be stuck with trying to split up the build process between shadow-cljs and babel. The following is the cleanest path I could think of: 1. run shadow-cljs compile app using this edn:

{:lein         {:profile "+shadow-cljs"}
 :builds       {:app {:target     :browser
                      :output-dir "resources/public/js"
                      :asset-path "/js"
                      :modules    {:app {:init-fn reagent-project.core/init!}}
                      :js-options
                      {:js-provider :external
                       :external-index "target/index.js"}}}
 :dev-http     {3000 {:root    "resources/public"
                      :handler reagent-project.handler/app}}}
2. run babel target/index.js --out-file resources/public/js/libs.js 3. run shadow-cljs watch app I noticed that the intermediate compiled file at target/index.js is as shown:
// WARNING: DO NOT EDIT!
// THIS FILE WAS GENERATED BY SHADOW-CLJS AND WILL BE OVERWRITTEN!

var ALL = {};
ALL["relay-runtime"] = require("relay-runtime");
ALL["react-dom/client"] = require("react-dom/client");
ALL["react-relay"] = require("react-relay");
ALL["react"] = require("react");
global.shadow$bridge = function shadow$bridge(name) {
  var ret = ALL[name];

  if (ret === undefined) {
     throw new Error("Dependency: " + name + " not provided by external JS. Do you maybe need a recompile?");
  }

  return ret;
};

shadow$bridge.ALL = ALL;
and as such, the final build file /resources/public/js/libs.js shows the same. I was wondering if there's an obvious or few obvious things that I'm missing from this. I also tried to follow the guidance on https://code.thheller.com/blog/shadow-cljs/2020/05/08/how-about-webpack-now.html#option-2-js-provider-external , but realized that I don't have an index.html file. I'm not exactly sure what the entry point is for an app. I apologize for the noob-ness of this question as I'm new to ClojureScript. Thank you!