feat: export svgs from ui for mobile

[fbwoolf]

I tried to put together a simple example of what should work to export svgs from the ui library to consume in mobile, but the svg path isn't resolved when running the mobile app. Am I missing something simple here with the tsconfig for native? I added the index.d.ts directly to the includes array, but I don't see the types being included. Is that why we have a separate global.d.ts in a types folder? 🤔

Questions I have:

• How is the metro.config.cjs being used in the ui library?
• Why won't the custom type declarations for svgs be recognized by mobile?

I also attempted to build the native code with tsup using the svgr plugin with the native flag set to true, but I ran into open discussions/issues:
egoist/tsup#811
egoist/tsup#570

I tried using @svgr/cli to auto gen icons just to confirm svgr was working, but ran into issues with our prettier config ...so maybe that is why the tsup plugin wasn't ultimately working:
https://react-svgr.com/docs/cli/

[fbwoolf]

One suggestion I still have to try is to use a post build script to copy the types file, something like:

"postbuild": "copyfiles -u 1 'src/types/*.d.ts' dist/"

EDIT: Adding this to assets:native worked:

&& cp index.d.ts ./dist-native/src/

...but, I still get this in the built files:

[fbwoolf]

I think I got it to work finally...

[fbwoolf]

I am going to close this bc I got it working for mobile. I need to do a bit more work/refactoring to share the svgs b/w web and mobile. I just wanted to get this first step working before moving fwd.

[kyranjamie]

@fbwoolf wonder if we can move this asset moving from package.json to the build tool itself, be in metro or tsup

[fbwoolf]

It wasn't working for me using either until I added this. There seems to be issues (listed in description) open with tsup and loading svgs. The svgr plugin hits errors but I can try again for mobile. We aren't currently using tsup to build for native. Right now, I'm running into issue using tsup for the web build. I'm also unclear as to why we have a dist-all and a dist-web?

We are using the metro config in the UI lib, but I'm unclear how/if it is used?

[kyranjamie]

@edgarkhanzadian set this up. I'm not sure if we need dist-all or if this is required for publication purposes.

Either way, wouldn't concern yourself with current set up. Delete it and start again if this helps you solve problems.

[kyranjamie]

@edgarkhanzadian any reason we need to use metro for native bundling? Couldn't we use tsup for this as well, and metro in mobile will handle RN specific bundling concerns?

[fbwoolf]

dist-all is being used as the package export for web atm. I'm actually not sure if dist-web is being used or can just replace dist-all? I'm currently working through changes for web to get the svg export working for the extension, so @edgarkhanzadian any feedback you can provide will be helpful. I'm making changes but don't want to overlook issues you've already confronted.

[edgarkhanzadian]

I used dist-all before to just be able to compile all of the files in one folder, but i think it's pretty much redundant now. We just need 2 separate build folders for web and mobile.

[edgarkhanzadian]

@kyranjamie yea i think that's how it's setup in ui library now, we don't use metro there. It's only setup for the mobile storybook

[fbwoolf]

Anyone know why the index.d.ts wouldn't be compiled with tsup if in the tsconfig includes array? I had to add it to the script or it was always missing and the svg type couldn't be resolved in the consuming package.

[fbwoolf]

@kyranjamie it appears there is a slightly problematic lib being used in tsup that is used to gen types when dts is true:
egoist/tsup#993
Swatinem/rollup-plugin-dts#277

In docs, there is an experimental option I am going to try using:
https://tsup.egoist.dev/#generate-declaration-file