plugma icon indicating copy to clipboard operation
plugma copied to clipboard

Option to change build target for build of main

Open thomasaull opened this issue 11 months ago • 8 comments

I'm trying to use the json-rpc-2.0 library in my plugin’s main script, however I'm getting a build error:

main.js:6141:13: ERROR: Big integer literals are not available in the configured target environment ("chrome58" + 2 overrides)

I looked in the source code of plugma and it seems like the vite settings for the main build are hardcoded here: https://github.com/gavinmcfarland/plugma/blob/main/packages/plugma/scripts/utils.js#L152

  • Is there any specific reason to use a build target this old? Chrome 58 is 7 years old already
  • Can I somehow change the vite settings used for the build of the main part of the plugin?

thomasaull avatar Jan 25 '25 22:01 thomasaull

Hi 👋, thanks so much for raising the issue.

The reason for targeting Chrome 58 is that the Figma main thread has specific limitations regarding the syntax it supports, which can be quite restrictive. In my experience, experimenting with higher build targets often caused compatibility issues with Figma's environment. That said, I'll investigate whether a more modern target can work reliably without introducing problems.

In the meantime, you you should be able to override the build target in your plugin by modifying your vite.config.js. The Plugma documentation on bundling with Vite should guide you through the process. Specifically, you can add or adjust the build.target field in your vite.config.js to specify a more recent target.

Please let me know how this works for you!

gavinmcfarland avatar Jan 26 '25 13:01 gavinmcfarland

I've just thought, the challenge you might have is only configuring it for main and not the ui. I'll have a think of how I can enable this.

gavinmcfarland avatar Jan 26 '25 13:01 gavinmcfarland

In the meantime, you you should be able to override the build target in your plugin by modifying your vite.config.js

I think I tried this without success, I‘m away from the computer right now, so can‘t verifiy. However from reading the source code it didn‘t look like the vite.config.js is actually used? Vite might use it automatically though or I‘m missing something. Sharing the build target between main and ui would probably not ne a problem for me. However if the vite config was used a custom mode can be utilized to differentiate between the two with a conditional config: https://vite.dev/config/#conditional-config

thomasaull avatar Jan 26 '25 16:01 thomasaull

That's right, Vite automatically loads any configs in the root of the project. It should work but I haven't tested it with your specific use case.

I plan to offer a custom option that will allow conditional config for main and ui in the next release.

gavinmcfarland avatar Jan 26 '25 16:01 gavinmcfarland

I just tested it, and I see what you mean. Something funky is going on. I'll investigate it. Sorry for the inconvenience.

gavinmcfarland avatar Jan 26 '25 20:01 gavinmcfarland

It seems that any options passed programmatically are overriding those in the vite.config.js file. I recall encountering similar issues before, but I must have either thought it was resolved or inadvertently caused it to break again.

I plan to implement unit tests soon to catch issues like this before they go live. My apologies for any inconvenience caused, and I appreciate your patience while I work on a fix. In the meantime, you could create a fork as a temporary solution. I'll update this ticket as soon as it's resolved. Thanks again!

gavinmcfarland avatar Jan 26 '25 20:01 gavinmcfarland

Don’t worry about it, I don’t need a solution right away since it’s for a side project only. Will create a local fork I think. Thanks for all the work on plugma :)

thomasaull avatar Jan 26 '25 21:01 thomasaull

Hi @thomasaull, I'm working on the next Plugma release, which includes changes that should resolve this issue. If you have time, I'd love for you to test it.

  1. The user’s Vite config file now takes precedence over the hardcoded config.
  2. You can now configure Vite settings specifically for the main code by creating a vite.config.main.js file.

You can try the next version by updating Plugma using npm install plugma@next.

There are some tips on moving from v1 of Plugma to v2 here: https://github.com/gavinmcfarland/plugma/blob/refactor/version-2-beta/packages/plugma/migration/v2/README.md

gavinmcfarland avatar Mar 24 '25 23:03 gavinmcfarland

@gavinmcfarland Sorry for my late answer. I have implemented a custom solution for my plugin, however for the next one I’ll make sure to check it out. I would do it now anway, but I'm a bit short on time 🫠

thomasaull avatar Jun 12 '25 06:06 thomasaull

No worries. Thanks for letting me know!

gavinmcfarland avatar Jun 12 '25 13:06 gavinmcfarland