Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2023-01-06

Channels

#cljsrn
<
2023-01-06
>
lepistane11:01:47

Hey everyone, this maybe stupid question but i can't crack it. I'd like to try an JS example without translating it to CLJS. https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/new_api/reanimated/index.tsx I can't seem to import it properly and even when i do 

(def worklets (js/require "../worklets.js"))
(def ball (r/adapt-react-class (goog-obj/get worklets #js ["default"])))
and use it later i lose 1. hot reloading (worklet is static) this is because i disabled hot refresh in emulator 2. react native gesture doesn't work, view is static and nothing gets triggered. 3. or i get Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object How do i include custom made components so that i can work with them easily?

lepistane11:01:51

for transparency full code /react-native/custom_modules 

package.json

{
  "name": "my-components",
  "version": "1.0.0",
  "description": "",
  "main": "worklets.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

worklet.js
app.clj 
require ["my-components" :as my-comp]

usage
[:> my-comp/Example]
shadow-clj 
{:js-package-dirs ["react-native/node_modules"
                                          "react-native/custom_modules"]}
i am getting 
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

thheller13:01:23

shadow-cljs only supports JS, it does not support .tsx files. so you should let metro process these files

thheller13:01:58

say you are writing the CLJS output to :output-dir "app"

thheller13:01:28

then you put the .tsx file someplace else, gonna use tsx here at the same level as app. so there is an tsx folder next to app

thheller13:01:45

in CLJS then like you have (js/require "../tsx/that_file.tsx")

thheller13:01:55

your code is fine except for this line (goog-obj/get worklets #js ["default"])

thheller13:01:05

gobj/get doesn't take an array argument there

thheller13:01:34

so its either just (.-default worklets) (unchecked-get worklets "default") or (goog-obj/get worksets "default")

thheller13:01:00

shadow-cljs doesn't need to know about the files you are including this way. so remove the extra js-package-dirs

👍 2
lepistane13:01:50

just me doing the (js/require "../tsx/that_file.tsx") metro will be able to process it?

lepistane13:01:44

i will adjust and come back to you. Thank you for the response and time

thheller13:01:48

yes, shadow-cljs does not process js/require files

lepistane13:01:38

made adjustments. 

(def ts-file (js/require "../tsx/index.tsx"))
(def ball (goog-obj/get ts-file "default"))
[:> ball]
the component is useless. It does nothing. Is it possible that react native gesture handler and reanimated aren't configured properly ?

lepistane14:01:08

this doesn't work either. Same result. 

(def ts-file (js/require "../tsx/index.tsx"))
(def ball (r/adapt-react-class (.-default ts-file)))

...
[ball]
i am running in circles

lepistane14:01:46

i tried regular js file with export - i can trigger function call no problem. I tried tsx - it works no problem This component however doesnt

lepistane15:01:25

Solved (finally, total hours spent 4) Please let me know if there is alternative to developing cross platform apps. solution tldr 1. read documentation very carefully https://docs.swmansion.com/react-native-gesture-handler/docs/installation/ 

After installation, wrap your entry point with <GestureHandlerRootView> or gestureHandlerRootHOC.

so

[:> gesture/GestureHandlerRootView {:style {:flex 1}}
   [:> rn/View....)}]]]
` 2. implement worklets in JS and require them in code as described by thheller 3. dont get frustrated 🙂 Thanks for the help @U05224H0W ❤️ 🙇

lepistane11:01:51
replied to a thread:Hey everyone, this maybe stupid question but i can't crack it. I'd like to try an JS example without translating it to CLJS. https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/new_api/reanimated/index.tsx I can't seem to import it properly and even when i do (def worklets (js/require "../worklets.js")) (def ball (r/adapt-react-class (goog-obj/get worklets #js ["default"]))) and use it later i lose 1. ~hot reloading (worklet is static)~ this is because i disabled hot refresh in emulator 2. react native gesture doesn't work, view is static and nothing gets triggered. 3. or i get `Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object` How do i include custom made components so that i can work with them easily?

for transparency full code /react-native/custom_modules 

package.json

{
  "name": "my-components",
  "version": "1.0.0",
  "description": "",
  "main": "worklets.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

worklet.js
app.clj 
require ["my-components" :as my-comp]

usage
[:> my-comp/Example]
shadow-clj 
{:js-package-dirs ["react-native/node_modules"
                                          "react-native/custom_modules"]}
i am getting 
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

lepistane12:01:23

How do i make javascript components and require them to be used in cljs ?

lepistane12:01:10

Btw i came back after a pause to react native and it blew my mind how 'ok' community is with breaking changes. I had very nice animated app made few months ago, i changed the system and have the latest versions of the tools and code doesn't work. That code worked only at those specific versions of node, react, reanimated, gesture handler, emulator api... React makes you dependent on them and they break API all the time and then all the 3rd party libs/packages that depend on it well good luck on that. They may have different ideas on how to do things. Any time i come back to older project to update something i don't think it's worth it. Starting new project on every version release is not an option and/or adjusting more than half of the project. I am looking for a way to use javascript from clojurescript now and will have code base half and half. If i fail to find solution for this and i find it painful i will just seriously looking for alternative to develop apps. This is too painful to deal with. Every time i look at JS ecosystem i get overwhelmed by gratitude of stability of clojure ecosystem.

kennytilton13:01:32

Anyone know if Flutter is any more stable? You would think I would know, right? https://github.com/kennytilton/flutter-mx But that is just a wrapper I knocked off last year, so I have not lived with the beast for a number of iterations. 🤷 ClojureDart hit the ground running, quite solid I mean. https://github.com/Tensegritics/ClojureDart They have their own syntactic niceties for Flutter.

kennytilton13:01:32
replied to a thread:Btw i came back after a pause to react native and it blew my mind how 'ok' community is with breaking changes. I had very nice animated app made few months ago, i changed the system and have the latest versions of the tools and code doesn't work. That code worked only at those specific versions of node, react, reanimated, gesture handler, emulator api... React makes you dependent on them and they break API all the time and then all the 3rd party libs/packages that depend on it well good luck on that. They may have different ideas on how to do things. Any time i come back to older project to update something i don't think it's worth it. Starting new project on every version release is not an option and/or adjusting more than half of the project. I am looking for a way to use javascript from clojurescript now and will have code base half and half. If i fail to find solution for this and i find it painful i will just seriously looking for alternative to develop apps. This is too painful to deal with. Every time i look at JS ecosystem i get overwhelmed by gratitude of stability of clojure ecosystem.

Anyone know if Flutter is any more stable? You would think I would know, right? https://github.com/kennytilton/flutter-mx But that is just a wrapper I knocked off last year, so I have not lived with the beast for a number of iterations. 🤷 ClojureDart hit the ground running, quite solid I mean. https://github.com/Tensegritics/ClojureDart They have their own syntactic niceties for Flutter.

joshmiller18:01:46

On the topic of breaking changes, I don’t have any experience with Flutter, but one thing to think about is that the whole ecosystem there, down to the language, can have huge breaking changes, e.g. the Dart 1->2 transition: https://dart.dev/dart-2

👍 4
joshmiller18:01:38

The best way to cope I’ve found is to separate your ClojureScript/business logic from your “screens” as much as possible. It was literally easier for me to reimplement the UI and plug it into my beautiful, stable re-frame cocoon than it was to migrate my app across React Native “minor versions” (e.g., 0.64 -> 0.70)

joshmiller18:01:40

I now write most of my components as plain, dumb JSX that receive all their logic/state from CLJS above, and that reduces the surface area of breaking changes.

👍 4
lepistane20:01:16

This is the way i am actually going right now. Will see how it goes

👍 2
joshmiller18:01:44

Unfortunately, Clojure and the JVM are the exceptions, not the rule, and everywhere I need to interact with other ecosystems you find this total disregard for the pain of breaking changes every time someone gets a bright idea about how a total rewrite might get you a 10% speed bump or something.

👍 2
UlisesMAC19:01:18

@lepistane Totally agree! I recently updated a project I wrote 8 months ago and it was just not working, it took me a lot of time to realize that a parameter previously used to create icons, if given, crashed the app 😞 Also React Native is not on its 1.x.x version yet, I hope when they reach it, they make it more stable.

👍 2
lepistane20:01:21

i seriously doubt they will do that. react native gesture handler went from 2.0 to 2.8 making at least 3 big changes 🙂 I don't think stability means anything to them sadly

😞 2
kennytilton19:01:47

Wow, now Flutter is up to 3.3. https://docs.flutter.dev/release/breaking-changes Well, they are clearly investing/evolving Flutter in rapid fashion. Not sure if that is the same as the React variability, though. 🤷