js: Add Shims option

[bep]

This is meant to improve the situation as described in https://gohugo.io/hugo-pipes/js#shimming-a-js-library

The above works, but it

1. Requires you to edit package.json
2. It only works from the project (i.e. it's not practical to do this in a theme/module)

I have invested some time today looking for a better way, and to cut a very long story short:

I suggest we add add a shims config option that works similar to the browser element in package.json, but resolves files inside the composite assets. So you would do:

{{ $shims := dict "react" "js/shims/react.js"  "react-dom" "js/shims/react-dom.js" }}
{{ $js = $js | js.Build dict "shims" $shims }}

You obviously still needs to create the shim files, but that is simple enough. Thoughts?

I have tested the above, and it works.

/cc @chrischute @richtera

[chrischute]

This sounds like a worthwhile improvement. It felt heavy to edit package.json and force the shims to be a project-wide setting.

Is this enabled by a new feature in ESBuild? I remember this issue where the ESBuild creator recommended the package.json browser approach.

[bep]

Is this enabled by a new feature in ESBuild?

It's the "import resolver" plugin feature. Not very new.

Note that my main problem isn't the package.json editing -- it's the project relative (or absolute) file paths.

[chrischute]

Got it. Well I support the change, happy to review or update documentation when it's time.

[richtera]

I think it would be a good idea. I don't understand how the compiled shims' <script> tags would be configured and output (i.e. fingerprint, Integrity and sourcemaps)?

[bep]

I don't understand how the compiled shims' <script> tags would be configured and output (i.e. fingerprint, Integrity and sourcemaps)?

In my head, this should just work.

[bep]

But, @chrischute -- a question: Given that you have React/ReactDOM included from CDN, what are the scenarios where you need to do an import? I can understand third-party apps, but in your own files?

I'm trying to come up with a failing example, but now all my earlier test setups seems to work fine without any react imports, even though I swear they didn't before...

[chrischute]

Given that you have React/ReactDOM included from CDN, what are the scenarios where you need to do an import? I can understand third-party apps, but in your own files?

I might be misunderstanding the question, but the main reason I import React is to make the IDE happy. I.e., I want to locally have React in my package for code completion, but want to use the CDN in production. Does that answer your question?

[bep]

Does that answer your question?

It does; I have, however, not looked at this problem with those eyes.

[chrischute]

OK great, maybe you can see an easier solution given this info.

[richtera]

This is very similar to using jsconfig or tsconfig files. ESBuild still does read those to resolve import and require. Using a shims variable is probably more elegant although jsconfig and tsconfig are read and understood by visual studio and adding production version of jsconfig or tsconfig is possible. Adding shims is definitely more elegant.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.