Update components compilation to use pnpm

[zorkow]

PR updates the pack script to use pnpm instead of npx.

Secondly, I set the shell option to false as this was giving me security complains during web packing. I don't think we need it, as we do not do anything we need the shell for, like piping etc.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.51%. Comparing base (a9f3bf1) to head (84f6319).
⚠️ Report is 16 commits behind head on develop.

Additional details and impacted files

@@            Coverage Diff             @@
##           develop    #1413     +/-   ##
==========================================
  Coverage    86.51%   86.51%             
==========================================
  Files          340      340             
  Lines        85987    85992      +5     
  Branches      4825     3184   -1641     
==========================================
+ Hits         74392    74397      +5     
- Misses       11572    11595     +23     
+ Partials        23        0     -23     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[dpvc]

Actually, both these changes are problematic.

The shell setting is required in Windows. I guess one could use

   shell: process.platform === 'Win32'

As for npx vs pnpm, these don't seem to handle locating the needed webpack command the same way, and while pnpm works within the MathJax-src repository to build MathJax itself, the pack command is used for building other things, like the fonts or third-party extensions or custom MathJax builds, and it doesn't seem to work for those. I remember trying to figure that out some time ago, and not being able to get it to work with pnpm. I can try again, if you think it is necessary, but npx works, so I kept it.

[zorkow]

Actually, both these changes are problematic.

The shell setting is required in Windows. I guess one could use

   shell: process.platform === 'Win32'

That would at least help with the annoying security complaints in between the webpack output.

As for npx vs pnpm, these don't seem to handle locating the needed webpack command the same way, and while pnpm works within the MathJax-src repository to build MathJax itself, the pack command is used for building other things, like the fonts or third-party extensions or custom MathJax builds, and it doesn't seem to work for those. I remember trying to figure that out some time ago, and not being able to get it to work with pnpm. I can try again, if you think it is necessary, but npx works, so I kept it.

The main reason for replacing this was that I got annoying output along the line of:

npm warn Unknown env config "reporter". This will stop working in the next major version of npm.

and I could not find any of these in my local configuration.Do you get similar output or, if it is just me, it might be that I have neglected my npm setup as I am usually only using pnpm these days.

[dpvc]

Do you get similar output or, if it is just me

This output apparently was introduced in npm v11.2, and I was running v10.8 so didn't get it, but when I update to the latest npm, I do. It is due to the fact that npx is being called from within a script that was run by pnpm, and it is actually pnpm that has set those variables. So the warning message is a bit misleading in this case.

The difficulty with switching npx to pnpm is that pnpm does not look in parent node_modules for webpack (while npx does), so for things like the fonts, where the top-level directory has node_modules, but the individual font directories have their own package.json scripts for building the individual fonts, but don't have their own node_modules, the pack script doesn't find webpack in the parent directory's node_modules when pnpm is used in place of npx.

Here is one possible solution:

diff --git a/components/bin/pack b/components/bin/pack
index 4a91ab5de..22236ed7d 100755
--- a/components/bin/pack
+++ b/components/bin/pack
@@ -74,9 +74,9 @@ async function readJSON(dir) {
   return new Promise((ok, fail) => {
     const buffer = [];
     const child = spawn(
-      'npx',
+      'node',
       [
-        'webpack',
+        require.resolve(path.join('webpack', 'bin', 'webpack.js')),
         '--env', `dir=${path.relative(packDir, path.resolve(dir))}`,
         '--env', `bundle=${bundle}`,
         '--json',
@@ -84,7 +84,7 @@ async function readJSON(dir) {
       ],
       {
         cwd: packDir,
-        shell: true,
+        shell: process.platform === 'Win32',
       }
     );
     child.stdout.on('data', (data) => buffer.push(String(data)));

This looks up the webpack executable by hand and uses node to execute it directly. Not ideal, but it works in the font cases, and I have also tested on Windows, so it works there, too. In any case, it avoids npx and its warnings.

Is that acceptable?

[dpvc]

lgtm.