Hello, if I would like to add for tailwind css a custom parameter, how can I do? `

[:span {:className (str "absolute top-0 right-0 block h-3 w-3 transform -translate-y-1/2 translate-x-1/2 rounded-full ring-2 ring-white" color)}]

I don't understand the question? Assuming color is just a regular string it should be detected as a tailwind class

I’m trying to use a js component, compiled from a local .jsx file to .js as specified https://shadow-cljs.github.io/docs/UsersGuide.html#_javascript_dialects, the only difference being I am using the react-native target. I get the following error when requiring my generated js file:

Uncaught Module not provided: shadow.js.shim.module$$babel$runtime$helpers$interopRequireDefault

should be supported but had issues some versions ago. which version do you use? also did you attempt to load the file over the REPL or was it part of the initial load?

cannot load new npm dependencies over the REPL, need to be loaded by the app (rn metro) first

namespaces starting with shadow.js.shim.module are the npm requires that are added

Part of the initial load, using shadow 2.15.1

It does occur to me though that I’m going from jsx to js to cljs to js again

maybe there is a better way?

don't know what you mean by that. don't know anything about what you are doing in general so only wild guesses here.

I saw this when googling

thheller18:01:52
but you are using react-native anyways so you should figure out a way to let react-native compile the js files and not shadow-cljs

but maybe I misunderstood

I’ll try and make a minimal reproducible example

the essence of "Module not provided" errors is that shadow-cljs generates a shadow$provide object entry to each npm dependency. under normal circumstances that is populated before the depdencny is actually accessed

but if its not provided it was accessed before that

which in react-native can happen if you do not reload the entire app and just load stuff over the REPL

since in react-native metro needs to provide those deps and shadow-cljs can't

and it can only provide them on the initial app load

you can access JS dependencies directly using js/require but not via ns

well technically you can also load them via the ns but then you'd need to make a node_modules package for those, which might be fine. don't know what kind of files you are trying to load

ie. assuming you have :output-dir "app" you can (js/require "../js/some.jsx") to access the js file directly. again same limitations though, only on initial load

I have a standard react app which imports the generated js files via ns like ["../gen/TaskList.js" :refer (TaskList)] , I’ve tried to replicate the same setup in my react native project but actually the generated file is different, even with exactly the same babel command and source file

I’m fine with it being on inital load, I’m just trying to import some react components which are written in jsx

why not generate them into a node_modules package and load via ["your-package/TaskList" :refer (TaskList)]"?

Sure I’ll try that

But the shadow guide does suggest the other approach (generate into src/gen and import that in ns )

might even be possible to just ust jsx directly without the manual conversion, given thats its react-native

react-native is sort of a special case because you have to deal with metro

Yeah thats what I was thinking earlier, ok I’ll try that first, so make a package containing the jsx files and import it like any other npm module

this is what babel generates btw, just incase there is a bug somewhere

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.TaskList = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _this = this,
    _jsxFileName = "/src/stories/TaskList.tsx";
var TaskList = function TaskList() {
    return _react.default.createElement(_reactNative.View, {
        __self: _this,
        __source: {
            fileName: _jsxFileName,
            lineNumber: 6,
            columnNumber: 5
        }
    }, _react.default.createElement(_reactNative.Text, {
        __self: _this,
        __source: {
            fileName: _jsxFileName,
            lineNumber: 12,
            columnNumber: 7
        }
    }, "Hello, world!"));
};
exports.TaskList = TaskList;

I definitely have @babel/runtime/helpers/interopRequireDefault in node_modules

Ok I got it to work using (def TaskList (.-TaskList (js/require "../src/gen/TaskList.js"))) with the babel approach, still going to try the npm package way but that at least confirms theres nothing wrong with shadow

Thanks for the help, I’m slowly learning how this stuff works…

that can likely direclty load the jsx too

Yep it can, nice

Would that work in a standard react project?

Or does it only work because of the metro bundler

I guess the latter, because browsers can’t understand the jsx

yeah, metro. basically you are using two separate bundlers

Yeah, its got its downsides for sure but I guess not having another babel process is nice, probably will give nicer errors than doing the jsx -> js conversion pre cljs too