babel-plugin-assign-directive

Because in ClojureScript you cannot assign function directive, this babel plugin will assign them for you.

Add this babel plugin to your babel.config.js as a first entry:

  module.exports = {
      ...
      plugins: [
          'babel-plugin-assign-directive',
          ...
      ],
  };

React Native with ClojureScript

NOTE: does not work with shadow-cljs because of the shadow approach for evaluating code in the running environment.

Use js/worklet-directive as a first block of your function.

(defn i-use-worklet []
  (js/worklet-directive)
  (js/console.log "Hey I'm running on the UI thread"))

This will be compiled into following code:

user.i_use_worklet=function user$i_use_worklet(){worklet_directive();return console.log("Hey I'm running on the UI thread");};

Now using this babel plugin the code will be transformed into:

user.i_use_worklet=function(){"worklet";return console.log("Hey I'm running on the UI thread");};

Finnally appling the react-native-reanimated/plugin will result into:

user.i_use_worklet=function(){var _f=function _f(){return console.log("Hey I'm running on the UI thread");};_f._closure={console:console};_f.asString="function(){const{console}=this._closure;{return console.log(\"Hey I'm running on the UI thread\");}}";global.__reanimatedWorkletInit(_f);return _f;}();