search

callstack / super-app-showcase

Monorepository template for super app development with React Native and Re.Pack
MIT License
382 stars 63 forks source link

How to shared function instead of component between each app #61

Open kiethuynh0904 opened 10 months ago

kiethuynh0904 commented 10 months ago

Ask your Question

First of all, thanks for all your efforts in this package. I have a question. what best way to share functions between each app?

example: for this repo, we have Auth module to provide authentication UI, but I just want to share functions like signIn and signout instead of Account & SignInScreen. So how to do that?

anhtuank7c commented 10 months ago

@kiethuynh0904 I haven't run the code but I believe that you're free to expose AuthContext so you can useContext everywhere by your needs.

// AuthContext https://github.com/callstack/super-app-showcase/blob/main/packages/auth/src/contexts/AuthContext.ts

// Expose one more module in here https://github.com/callstack/super-app-showcase/blob/main/packages/auth/webpack.config.mjs#L245

// And then import federated module from your package https://github.com/callstack/super-app-showcase/blob/main/packages/booking/src/App.tsx#L8

Ensure you always useContext within the AuthProvider. It's pseudo code only, you got the spirit to implement it yourself. A bit challenge in import federated module but it'll not going to be a bottleneck that prevent you from sharing functions between packages.

anhtuank7c commented 10 months ago

Notice: You will soon have problem since this is not recommended way to share the functions. You should share the state instead. All the state must be maintained within its package only. ie: All the auth functions must belong to Auth package only. Booking should contains all the booking functions, its dry and clean, easier to maintain. I don't recommend you to share the functions between packages.

kiethuynh0904 commented 10 months ago

@kiethuynh0904 I haven't run the code but I believe that you're free to expose AuthContext so you can useContext everywhere by your needs.

// AuthContext https://github.com/callstack/super-app-showcase/blob/main/packages/auth/src/contexts/AuthContext.ts

// Expose one more module in here https://github.com/callstack/super-app-showcase/blob/main/packages/auth/webpack.config.mjs#L245

// And then import federated module from your package https://github.com/callstack/super-app-showcase/blob/main/packages/booking/src/App.tsx#L8

Ensure you always useContext within the AuthProvider. It's pseudo code only, you got the spirit to implement it yourself. A bit challenge in import federated module but it'll not going to be a bottleneck that prevent you from sharing functions between packages.

Thanks for your answer. Yeah It's worked fine with context, but sometimes I have an utils function and want to share it to MiniApp

// The same example: https://github.com/callstack/repack-examples/tree/main/module-federation For this work only between mini-app, not work for host & mini-app. So my question is how I shared an utils function from host to mini-app

anhtuank7c commented 10 months ago

Why don't you make an independent npm package for utils functions that you can install to any project that you want to use? I believe that is a pretty simple solution for your need.

kiethuynh0904 commented 9 months ago

Yeah, I know what you mean but my project does not wanna have an independent npm package