STRWEB-69: Add support for transpilation

[mkuklis]

https://issues.folio.org/browse/STRWEB-69

This PR introduces support for transpilation of individual modules. This feature can be accessed via the new transpile command which is now available in stripes-cli (refer to folio-org/stripes-cli#295). Users can now transpile individual modules by running:

yarn stripes transpile.

The transpilation has been set up for all stripes modules:

• stripes-components STCOM-991 Add transpilation stripes-components#1855
• stripes-connect STCON-140 Add support for transpilation stripes-connect#195
• stripes-core STCOR-682 Setup transpilation stripes-core#1240
• stripes-final-form STRIPESFF-23 Add ability to transpile stripes-final-form#85
• stripes-form STFORM-32 Add ability to transpile stripes-form#166
• stripes-smart-components STSMACOM-725 Add transpilation stripes-smart-components#1282
• stripes-util STUTL-27 Add ability to transpile stripes-util#61

How to test it

Please copy and run the script below:

mkdir -p transpilation && cd transpilation

# checkout all stripes modules
stripes_modules=(
  components
  connect
  core
  final-form
  form
  smart-components
  util
  webpack
  cli
)

for m in "${stripes_modules[@]}"; do
  git clone "https://github.com/folio-org/stripes-$m.git" --branch transpile &
done

wait

# create workspace via package.json
cat > package.json <<EOF
{
  "private": true,
  "workspaces": [
    "*"
  ],
  "dependencies": {
    "@folio/stripes": "^8.0.0",
    "@folio/users": ">=2.17.0"
  }
}
EOF

# create stripes.config
cat > stripes.config.js <<EOF
module.exports = {
  okapi: {
    url: 'https://folio-snapshot-okapi.dev.folio.org',
    tenant: 'diku',
  },
  config: {
    logCategories: 'core,path,action,xhr',
    logPrefix: '--',
    showPerms: false,
    hasAllPerms: false,
    languages: ['en'],
    suppressIntlErrors: true,
  },
  modules: {
    '@folio/users' : {}
  }
};
EOF

# install dependencies
yarn

modules_to_transpile=(
  "components"
  "smart-components"
  "core"
  "connect"
  "form"
  "final-form"
  "util"
)

for m in "${modules_to_transpile[@]}"; do
  (cd stripes-$m; rm -rf ./dist; yarn transpile) &
done

wait

# start app
yarn stripes serve ./stripes.config.js

[github-actions]

Jest Unit Test Statistics

0 tests  ±0   0 ✔️ ±0   0s ⏱️ ±0s
0 suites ±0   0 💤 ±0 
0 files   ±0   0 ❌ ±0 

Results for commit 1dcc971. ± Comparison against base commit 94a13cf.

♻️ This comment has been updated with latest results.

[github-actions]

BigTest Unit Test Statistics

73 tests  ±0   73 ✔️ ±0   0s ⏱️ ±0s
39 suites ±0     0 💤 ±0 
  1 files   ±0     0 ❌ ±0 

Results for commit 1dcc971. ± Comparison against base commit 94a13cf.

♻️ This comment has been updated with latest results.

[zburke]

omit .only

[mkuklis]

@zburke thank you for catching this!

[zburke]

IIUC, consts.js::defaultExternals needs to be kept in sync with a platform's direct-deps in order to avoid extern'ed things from being duped across UI modules. That feels risky.

Can/should defaultExternals be imported directly from a platform? It bugs me that we have it in two totally separate repos. Maybe having platform-whatever/package.json and platform-whatever/src/consts.js is just as bad. Dunno. Just thinkin'.

[zburke]

moment-timezone isn't currently provided by the platform for apps use as a peer-dep but I think it needs to be for this to work correctly. After this PR, it would be extern'ed in apps but also never pulled in by the platform, and thus absent in the final bundle. (Right?)

[zburke]

Same as moment-timezone; does this need to be added to the platform's direct-deps?

[zburke]

Should we add react-router-dom, react-titled, redux-observable, rxjs, zustand?

[mkuklis]

@zburke the reason we are listing these externals is to make sure they are not included in the transpiled version of any bundle. These are third party dependencies and somehow they need to be included in the bundle by being listed as a dependency of the consumer app (either single ui module or a platform).

I don't think that list belongs to the platform because how would stripes-webpack get access to it? But perhaps this could be extracted to some other place as you suggested.

Some of these libraries (like moment-timezone) are listed as a dependency by the UI modules:

https://github.com/folio-org/ui-users/blob/master/package.json#L911

so that's how they will get fulfilled for now but what happens when all ui modules are also transpiled (with excluded moment-timezone)?

Somehow they will have to be fulfilled by the higher level consumer (in this case the platform).

So I think in short term we should be ok but in long term I think the answer is "yes" the platform will need to list them which I think is actually maybe a good thing? It pushes us to do more cleanup for these 3rd party deps.

[zburke]

🎉 🎉 🎉 👏 👏 👏