search

jspm / jspm-vscode

VSCode Plugin for JSPM Generator
MIT License
17 stars 3 forks source link

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

Closed JayaKrishnaNamburu closed 11 months ago

JayaKrishnaNamburu commented 11 months ago

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 https://github.com/jspm/jspm-vscode/commit/8c4aa6d96d1dd8a7416afd27d3ccbd1606df2cad. 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/helper-module-transforms@7.21.4 and failing when it uses the latest version of the package @babel/helper-module-transforms@7.23.2. 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/helper-module-transforms@7.23.2 which is expected as it falls into the @babel/core range of the @jspm/generator.

Then i updated the map using to use @babel/helper-module-transforms@7.21.4 using 

jspm install -r @babel/helper-module-transforms=@babel/helper-module-transforms@7.21.2

Which gives us the current map in the PR

{
  "env": [
    "browser",
    "module",
    "production"
  ],
  "imports": {
    "@jspm/generator": "https://ga.jspm.io/npm:@jspm/generator@1.1.12/dist/generator.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "#fetch": "https://ga.jspm.io/npm:@jspm/generator@1.1.12/dist/fetch-native.js",
      "#lib/config/files/index.js": "https://ga.jspm.io/npm:@babel/core@7.23.5/lib/config/files/index-browser.js",
      "#lib/config/resolve-targets.js": "https://ga.jspm.io/npm:@babel/core@7.23.5/lib/config/resolve-targets-browser.js",
      "#lib/transform-file.js": "https://ga.jspm.io/npm:@babel/core@7.23.5/lib/transform-file-browser.js",
      "#node.js": "https://ga.jspm.io/npm:browserslist@4.22.2/browser.js",
      "@ampproject/remapping": "https://ga.jspm.io/npm:@ampproject/remapping@2.2.1/dist/remapping.umd.js",
      "@babel/code-frame": "https://ga.jspm.io/npm:@babel/code-frame@7.23.5/lib/index.js",
      "@babel/compat-data/native-modules": "https://ga.jspm.io/npm:@babel/compat-data@7.23.5/native-modules.js",
      "@babel/compat-data/plugins": "https://ga.jspm.io/npm:@babel/compat-data@7.23.5/plugins.js",
      "@babel/core": "https://ga.jspm.io/npm:@babel/core@7.23.5/lib/index.js",
      "@babel/generator": "https://ga.jspm.io/npm:@babel/generator@7.23.5/lib/index.js",
      "@babel/helper-annotate-as-pure": "https://ga.jspm.io/npm:@babel/helper-annotate-as-pure@7.22.5/lib/index.js",
      "@babel/helper-compilation-targets": "https://ga.jspm.io/npm:@babel/helper-compilation-targets@7.22.15/lib/index.js",
      "@babel/helper-create-class-features-plugin": "https://ga.jspm.io/npm:@babel/helper-create-class-features-plugin@7.23.5/lib/index.js",
      "@babel/helper-environment-visitor": "https://ga.jspm.io/npm:@babel/helper-environment-visitor@7.22.20/lib/index.js",
      "@babel/helper-function-name": "https://ga.jspm.io/npm:@babel/helper-function-name@7.23.0/lib/index.js",
      "@babel/helper-hoist-variables": "https://ga.jspm.io/npm:@babel/helper-hoist-variables@7.22.5/lib/index.js",
      "@babel/helper-member-expression-to-functions": "https://ga.jspm.io/npm:@babel/helper-member-expression-to-functions@7.23.0/lib/index.js",
      "@babel/helper-module-imports": "https://ga.jspm.io/npm:@babel/helper-module-imports@7.22.15/lib/index.js",
      "@babel/helper-module-transforms": "https://ga.jspm.io/npm:@babel/helper-module-transforms@7.21.2/lib/index.js",
      "@babel/helper-optimise-call-expression": "https://ga.jspm.io/npm:@babel/helper-optimise-call-expression@7.22.5/lib/index.js",
      "@babel/helper-plugin-utils": "https://ga.jspm.io/npm:@babel/helper-plugin-utils@7.22.5/lib/index.js",
      "@babel/helper-replace-supers": "https://ga.jspm.io/npm:@babel/helper-replace-supers@7.22.20/lib/index.js",
      "@babel/helper-simple-access": "https://ga.jspm.io/npm:@babel/helper-simple-access@7.22.5/lib/index.js",
      "@babel/helper-skip-transparent-expression-wrappers": "https://ga.jspm.io/npm:@babel/helper-skip-transparent-expression-wrappers@7.22.5/lib/index.js",
      "@babel/helper-split-export-declaration": "https://ga.jspm.io/npm:@babel/helper-split-export-declaration@7.22.6/lib/index.js",
      "@babel/helper-string-parser": "https://ga.jspm.io/npm:@babel/helper-string-parser@7.23.4/lib/index.js",
      "@babel/helper-validator-identifier": "https://ga.jspm.io/npm:@babel/helper-validator-identifier@7.22.20/lib/index.js",
      "@babel/helper-validator-option": "https://ga.jspm.io/npm:@babel/helper-validator-option@7.23.5/lib/index.js",
      "@babel/helpers": "https://ga.jspm.io/npm:@babel/helpers@7.23.5/lib/index.js",
      "@babel/highlight": "https://ga.jspm.io/npm:@babel/highlight@7.23.4/lib/index.js",
      "@babel/parser": "https://ga.jspm.io/npm:@babel/parser@7.23.5/lib/index.js",
      "@babel/plugin-syntax-import-assertions": "https://ga.jspm.io/npm:@babel/plugin-syntax-import-assertions@7.23.3/lib/index.js",
      "@babel/plugin-syntax-jsx": "https://ga.jspm.io/npm:@babel/plugin-syntax-jsx@7.23.3/lib/index.js",
      "@babel/plugin-syntax-typescript": "https://ga.jspm.io/npm:@babel/plugin-syntax-typescript@7.23.3/lib/index.js",
      "@babel/plugin-transform-modules-commonjs": "https://ga.jspm.io/npm:@babel/plugin-transform-modules-commonjs@7.23.3/lib/index.js",
      "@babel/plugin-transform-typescript": "https://ga.jspm.io/npm:@babel/plugin-transform-typescript@7.23.5/lib/index.js",
      "@babel/preset-typescript": "https://ga.jspm.io/npm:@babel/preset-typescript@7.23.3/lib/index.js",
      "@babel/template": "https://ga.jspm.io/npm:@babel/template@7.22.15/lib/index.js",
      "@babel/traverse": "https://ga.jspm.io/npm:@babel/traverse@7.23.5/lib/index.js",
      "@babel/types": "https://ga.jspm.io/npm:@babel/types@7.23.5/lib/index.js",
      "@jridgewell/gen-mapping": "https://ga.jspm.io/npm:@jridgewell/gen-mapping@0.3.3/dist/gen-mapping.umd.js",
      "@jridgewell/resolve-uri": "https://ga.jspm.io/npm:@jridgewell/resolve-uri@3.1.1/dist/resolve-uri.umd.js",
      "@jridgewell/set-array": "https://ga.jspm.io/npm:@jridgewell/set-array@1.1.2/dist/set-array.umd.js",
      "@jridgewell/sourcemap-codec": "https://ga.jspm.io/npm:@jridgewell/sourcemap-codec@1.4.15/dist/sourcemap-codec.umd.js",
      "@jridgewell/trace-mapping": "https://ga.jspm.io/npm:@jridgewell/trace-mapping@0.3.20/dist/trace-mapping.umd.js",
      "@jspm/import-map": "https://ga.jspm.io/npm:@jspm/import-map@1.0.7/dist/map.js",
      "ansi-styles": "https://ga.jspm.io/npm:ansi-styles@3.2.1/index.js",
      "assert": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/assert.js",
      "browserslist": "https://ga.jspm.io/npm:browserslist@4.22.2/index.js",
      "buffer": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/buffer.js",
      "caniuse-lite/dist/unpacker/agents": "https://ga.jspm.io/npm:caniuse-lite@1.0.30001566/dist/unpacker/agents.js",
      "chalk": "https://ga.jspm.io/npm:chalk@2.4.2/index.js",
      "color-convert": "https://ga.jspm.io/npm:color-convert@1.9.3/index.js",
      "color-name": "https://ga.jspm.io/npm:color-name@1.1.3/index.js",
      "convert-source-map": "https://ga.jspm.io/npm:convert-source-map@2.0.0/index.js",
      "crypto": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/crypto.js",
      "debug": "https://ga.jspm.io/npm:debug@4.3.4/src/browser.js",
      "electron-to-chromium/versions": "https://ga.jspm.io/npm:electron-to-chromium@1.4.608/versions.js",
      "es-module-lexer/js": "https://ga.jspm.io/npm:es-module-lexer@1.4.1/dist/lexer.asm.js",
      "escape-string-regexp": "https://ga.jspm.io/npm:escape-string-regexp@1.0.5/index.js",
      "fs": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/fs.js",
      "gensync": "https://ga.jspm.io/npm:gensync@1.0.0-beta.2/index.js",
      "globals": "https://ga.jspm.io/npm:globals@11.12.0/index.js",
      "js-tokens": "https://ga.jspm.io/npm:js-tokens@4.0.0/index.js",
      "jsesc": "https://ga.jspm.io/npm:jsesc@2.5.2/jsesc.js",
      "lru-cache": "https://ga.jspm.io/npm:lru-cache@5.1.1/index.js",
      "ms": "https://ga.jspm.io/npm:ms@2.1.2/index.js",
      "node-releases/data/processed/envs.json": "https://ga.jspm.io/npm:node-releases@2.0.14/data/processed/envs.json.js",
      "node-releases/data/release-schedule/release-schedule.json": "https://ga.jspm.io/npm:node-releases@2.0.14/data/release-schedule/release-schedule.json.js",
      "path": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/path.js",
      "process": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/process-production.js",
      "semver": "https://ga.jspm.io/npm:semver@6.3.1/semver.js",
      "supports-color": "https://ga.jspm.io/npm:supports-color@5.5.0/browser.js",
      "sver": "https://ga.jspm.io/npm:sver@1.8.4/sver.js",
      "sver/convert-range.js": "https://ga.jspm.io/npm:sver@1.8.4/convert-range.js",
      "to-fast-properties": "https://ga.jspm.io/npm:to-fast-properties@2.0.0/index.js",
      "url": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/url.js",
      "yallist": "https://ga.jspm.io/npm:yallist@3.1.1/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. https://github.com/jspm/jspm-cli/pull/2556

So, the new build command becomes 

jspm build -r @babel/helper-module-transforms=@babel/helper-module-transforms@7.21.2 --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 commented 11 months ago

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 commented 11 months ago

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

JayaKrishnaNamburu commented 11 months ago

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 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 👍 https://github.com/jspm/jspm-vscode/pull/20