refactor: Update the build workflow of the extensions using the inbuilt jspm build command.

[JayaKrishnaNamburu]

The issue for the failing build is, because of a version bump that happened for @babel/helper-module-transforms package after the last release of jspm-vscode plugin which is 0.2.1 8c4aa6d. All the maps i created started failing, so took the pacakge-lock.json from the 0.2.1 version of the vs-code plugin and matched those versions to make things work and fix next.

The build goes well when we are using @babel/[email protected] and failing when it uses the latest version of the package @babel/[email protected]. I haven't looked deeply on what's changed between the two versions of this package.

I created a new map using

jspm install @jspm/generator -e browser,production

it created a map using @babel/[email protected] which is expected as it falls into the @babel/core range of the @jspm/generator.

Then i updated the map using to use @babel/[email protected] using

jspm install -r @babel/helper-module-transforms=@babel/[email protected]

Which gives us the current map in the PR

{
  "env": [
    "browser",
    "module",
    "production"
  ],
  "imports": {
    "@jspm/generator": "https://ga.jspm.io/npm:@jspm/[email protected]/dist/generator.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "#fetch": "https://ga.jspm.io/npm:@jspm/[email protected]/dist/fetch-native.js",
      "#lib/config/files/index.js": "https://ga.jspm.io/npm:@babel/[email protected]/lib/config/files/index-browser.js",
      "#lib/config/resolve-targets.js": "https://ga.jspm.io/npm:@babel/[email protected]/lib/config/resolve-targets-browser.js",
      "#lib/transform-file.js": "https://ga.jspm.io/npm:@babel/[email protected]/lib/transform-file-browser.js",
      "#node.js": "https://ga.jspm.io/npm:[email protected]/browser.js",
      "@ampproject/remapping": "https://ga.jspm.io/npm:@ampproject/[email protected]/dist/remapping.umd.js",
      "@babel/code-frame": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/compat-data/native-modules": "https://ga.jspm.io/npm:@babel/[email protected]/native-modules.js",
      "@babel/compat-data/plugins": "https://ga.jspm.io/npm:@babel/[email protected]/plugins.js",
      "@babel/core": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/generator": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-annotate-as-pure": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-compilation-targets": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-create-class-features-plugin": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-environment-visitor": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-function-name": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-hoist-variables": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-member-expression-to-functions": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-module-imports": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-module-transforms": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-optimise-call-expression": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-plugin-utils": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-replace-supers": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-simple-access": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-skip-transparent-expression-wrappers": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-split-export-declaration": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-string-parser": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-validator-identifier": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helper-validator-option": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/helpers": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/highlight": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/parser": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/plugin-syntax-import-assertions": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/plugin-syntax-jsx": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/plugin-syntax-typescript": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/plugin-transform-modules-commonjs": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/plugin-transform-typescript": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/preset-typescript": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/template": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/traverse": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@babel/types": "https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js",
      "@jridgewell/gen-mapping": "https://ga.jspm.io/npm:@jridgewell/[email protected]/dist/gen-mapping.umd.js",
      "@jridgewell/resolve-uri": "https://ga.jspm.io/npm:@jridgewell/[email protected]/dist/resolve-uri.umd.js",
      "@jridgewell/set-array": "https://ga.jspm.io/npm:@jridgewell/[email protected]/dist/set-array.umd.js",
      "@jridgewell/sourcemap-codec": "https://ga.jspm.io/npm:@jridgewell/[email protected]/dist/sourcemap-codec.umd.js",
      "@jridgewell/trace-mapping": "https://ga.jspm.io/npm:@jridgewell/[email protected]/dist/trace-mapping.umd.js",
      "@jspm/import-map": "https://ga.jspm.io/npm:@jspm/[email protected]/dist/map.js",
      "ansi-styles": "https://ga.jspm.io/npm:[email protected]/index.js",
      "assert": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/assert.js",
      "browserslist": "https://ga.jspm.io/npm:[email protected]/index.js",
      "buffer": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/buffer.js",
      "caniuse-lite/dist/unpacker/agents": "https://ga.jspm.io/npm:[email protected]/dist/unpacker/agents.js",
      "chalk": "https://ga.jspm.io/npm:[email protected]/index.js",
      "color-convert": "https://ga.jspm.io/npm:[email protected]/index.js",
      "color-name": "https://ga.jspm.io/npm:[email protected]/index.js",
      "convert-source-map": "https://ga.jspm.io/npm:[email protected]/index.js",
      "crypto": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/crypto.js",
      "debug": "https://ga.jspm.io/npm:[email protected]/src/browser.js",
      "electron-to-chromium/versions": "https://ga.jspm.io/npm:[email protected]/versions.js",
      "es-module-lexer/js": "https://ga.jspm.io/npm:[email protected]/dist/lexer.asm.js",
      "escape-string-regexp": "https://ga.jspm.io/npm:[email protected]/index.js",
      "fs": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/fs.js",
      "gensync": "https://ga.jspm.io/npm:[email protected]/index.js",
      "globals": "https://ga.jspm.io/npm:[email protected]/index.js",
      "js-tokens": "https://ga.jspm.io/npm:[email protected]/index.js",
      "jsesc": "https://ga.jspm.io/npm:[email protected]/jsesc.js",
      "lru-cache": "https://ga.jspm.io/npm:[email protected]/index.js",
      "ms": "https://ga.jspm.io/npm:[email protected]/index.js",
      "node-releases/data/processed/envs.json": "https://ga.jspm.io/npm:[email protected]/data/processed/envs.json.js",
      "node-releases/data/release-schedule/release-schedule.json": "https://ga.jspm.io/npm:[email protected]/data/release-schedule/release-schedule.json.js",
      "path": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/path.js",
      "process": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/process-production.js",
      "semver": "https://ga.jspm.io/npm:[email protected]/semver.js",
      "supports-color": "https://ga.jspm.io/npm:[email protected]/browser.js",
      "sver": "https://ga.jspm.io/npm:[email protected]/sver.js",
      "sver/convert-range.js": "https://ga.jspm.io/npm:[email protected]/convert-range.js",
      "to-fast-properties": "https://ga.jspm.io/npm:[email protected]/index.js",
      "url": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/url.js",
      "yallist": "https://ga.jspm.io/npm:[email protected]/yallist.js"
    }
  }
}

https://github.com/jspm/jspm-vscode/blob/c5136a0b87181fde37533149b6bbcc628def550a/importmap.json

Now i just used the build command to generate the build.

jspm build --config rollup-config.mjs

Which should work without any issues as we already stated the version to be 7.21.2. But it fails again, turns out
The step where we load the importmap from the file into the generator and install it for the build to continue. Is updating everything again
See it here in the jspm cli
https://github.com/jspm/jspm-cli/blob/main/src/build/rollup-importmap-plugin.ts#L18-L23

I am not sure if the freeze shouldn't even update the minor and patch versions too. But, it's happening right now.

So, i opened a new PR on the cli to make sure we pass resolutions and use them again at the step of installation.
jspm/jspm-cli#2556

So, the new build command becomes

jspm build -r @babel/helper-module-transforms=@babel/[email protected] --config rollup-config.mjs

Which enforce the resolutions when using the existing map without updating the minor and patch for the package.

Steps, we first need to release the cli and use it here and we are all good.
First implementation of the jspm build command in real time 😄

fixes #17

[guybedford]

I think that line in the build system should be .link() and not .install(). Install acts like npm install, which does do updates. Note freeze has been deprecated for instead having different commands which are sometimes mutating and sometimes not. install is always mutating. link is like the old freeze.

Perhaps this is confusing - we should verify before the next generator major as this is what we implemented with @Bubblyworld based on various discussions about aligning the CLI behaviours.

[guybedford]

Phenomental work tracing this down and building out the workflow on this. So amazing to see it coming together.

[JayaKrishnaNamburu]

I think that line in the build system should be .link() and not .install(). Install acts like npm install, which does do updates. Note freeze has been deprecated for instead having different commands which are sometimes mutating and sometimes not. install is always mutating. link is like the old freeze.

Got it, but the link still needs a specifier to manually link them. The flow there is little bit confusing. Can we open a discussion on that on the cli repository ?

• Should we run install after passing a inputMap ? ( We should't as it is updating the dependencies)
• Should we use generator.link ? (But the link is expecting individual specifiers, so not sure how to use that)
• Is the generator going to provider something like called lock files now ? If so, the cli should preserve those lock files from the generator and write them to local. And read them again when loading the generator right ?

Should i create a discussion thread on the cli repo to discuss all these with examples would be very great 😄

So for now, i released the -r and -m support for the build in cli
https://github.com/jspm/jspm-cli/releases/tag/3.1.2

So the vs-code can use them and start working. Here is a PR for the upgrade. Merging it, will unlock the build failure issue on the vs-code plugin 👍
#20