POC: Use Parcel

[fregante]

Annual attempt at migrating to Parcel

• Use Parcel instead of Webpack #2983
• Parcel test (needs extra work) #3620

Blocked by:

• Use package.json#exports map parcel-bundler/parcel#4155
• Bundles must have unique names has no context, like many other errors parcel-bundler/parcel#7255

---

• Depends on and closes Write Webpack loader for readme.md  #4320

Missing (help wanted)

• Parcel transformer to be able to import the readme
  • discussed in Write Webpack loader for readme.md  #4320
  • documentation in https://parceljs.org/plugin-system/transformer/
  • usage in Issue with Parcel 2 alpha and custom transformer parcel-bundler/parcel#4105
• Tiny function like getFeatureName(import.meta.url) to replace __basefilename
• verify-features.ts needs to be updated to look for CSS features in refined-github.css instead

[fregante]

I'm not sure why this isn't being followed, I think it worked in previous Parcel betas. Not fundamental though.

• Docs: https://parceljs.org/languages/javascript/#minification
• Previously used in Replace webpack with Parcel fregante/browser-extension-template#44

[cheap-glitch]

Out of curiosity, what are the advantages of using Parcel over Webpack in our case?

[fregante]

No config. We also have a dependency that we can't update because it's broken (size-plugin)

[fregante]

Maybe for Parcel 3

[fregante]

Latest error:

Error: Cannot use import statement outside a module

  ./build/parcel-transformer-rgh/index.ts:1
  import {Transformer} from '@parcel/plugin';
  ^^^^^^
  
  SyntaxError: Cannot use import statement outside a module
  at Object.compileFunction (node:vm:352:18)
  at wrapSafe (node:internal/modules/cjs/loader:1025:15)
  at Module._compile (node:internal/modules/cjs/loader:1059:27)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
  at Module.load (node:internal/modules/cjs/loader:975:32)
  at NodePackageManager.load (./node_modules/@parcel/package-manager/lib/NodePackageManager.js:165:9)
  at NodePackageManager.require (./node_modules/@parcel/package-manager/lib/NodePackageManager.js:121:17)
  at async loadPlugin (./node_modules/@parcel/core/lib/loadParcelPlugin.js:185:16)
  at async ParcelConfig.loadPlugin (./node_modules/@parcel/core/lib/ParcelConfig.js:117:18)
  at async Promise.all (index 0)

which basically means Parcel is not loading it as a module after transpiling it.

[mischnic]

Sounds like you expect that Parcel transpiles plugins automatically/transparently? It doesn't. You have to ensure yourself that require("parcel-transformer-rgh") work correctly in Node.

[fregante]

Thanks for the comment! Indeed that's the issue. Maybe as a quick patch (without adding a whole build to this transformer) I can find an import() function that supports TS files, because that seems to be the last issue.

const {getFeatures, getFeaturesMeta} = await import("../../build/readme-parser.ts");

[fregante]

Still blocked by

• Bundles must have unique names has no context, like many other errors parcel-bundler/parcel#7255

Will pick it up again once that's resolved somehow