How to shared function instead of component between each app

[kiethuynh0904]

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]

@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]

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]

@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]

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]

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