Skip to content

Use Parcel instead of Webpack - #6597

Closed
fregante wants to merge 16 commits into
mainfrom
parcel-16
Closed

Use Parcel instead of Webpack#6597
fregante wants to merge 16 commits into
mainfrom
parcel-16

Conversation

@fregante

@fregante fregante commented May 1, 2023

Copy link
Copy Markdown
Member

It builds.

Screenshot 4

Screenshot 5

Screenshot 6

@fregante fregante added the meta Related to Refined GitHub itself label May 1, 2023
@fregante
fregante marked this pull request as draft May 1, 2023 14:43
@fregante

fregante commented May 1, 2023

Copy link
Copy Markdown
Member Author

It's very very likely I'm setting myself up for future pain with Parcel, but every time I do this I'm able to extract something good out of it anyway.

Advantages of Parcel are a more inclusive pipeline, which enables things like validating the manifest (Parcel native) and adding CSS transforms. Our build has also for a long time suffered when adding new features: a restart was necessary or else the feature would just not appear in the browser.

Past:

Next:

  • Try to move all the generated files into a directory so that Safari can build regardless of dynamic filenames
  • Fix Safari project
  • Update verify-features
  • Allow file: in CI Security
  • Drop Webpack completely
  • Remove inline sourcemaps
  • Improve minification
  • Restore CSS cascade
  • Avoid recoursive refined-github.css import
  • Wait for next parcel release? chrome_style missing here
  • A bit more testing

Future:

Its Happening Ron Paul - 5mBE2MiMVFITS

@fregante
fregante marked this pull request as ready for review May 1, 2023 17:11
uses: relative-ci/agent-action@v2
with:
webpackStatsFile: ./webpack-stats.json
key: ${{ secrets.RELATIVE_CI_KEY }}

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We lose relative-ci though 🥲 It'll come "soon"

Comment thread .terserrc
@@ -0,0 +1,7 @@
{
"mangle": false,

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

false ironically triggers "obfucation" warning in the Chrome store, so I'll have to undo it

async transform({asset}) {
const code = `
module.exports.importedFeatures = ${JSON.stringify(getImportedFeatures())};
module.exports.featuresMeta = ${JSON.stringify(getFeaturesMeta())};

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't ask me why export const importedFeatures doesn't work. It says it's "not exported".

"main": "dist/index.js",
"source": "index.ts",
"scripts": {
"prepare": "esbuild ./index.ts --bundle --outdir=dist --platform=node"

@fregante fregante May 1, 2023

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤫 I'm using esbuild to build a Parcel plugin because Parcel breaks things (ERR_REQUIRE_ESM and all that jazz, including issues if I try to make it bundle Node modules 🤷‍♂️)

Maybe it'll be fixed in the next version

Comment thread manifest.json
"128": "source/icon.png"
},
"options_ui": {
"chrome_style": true,

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might have to wait for the next version before shipping because this should be undone. See:

Comment thread manifest.json
"persistent": false,
"scripts": [
"background.js"
"npm:webextension-polyfill-global",

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I ended up publishing https://github.com/fregante/webextension-polyfill-global because Mozilla keeps dragging their feet…

Comment thread manifest.json
],
"browser_action": {
"default_icon": "icon.png"
"default_icon": "source/icon.png"

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I moved manifest.json out of source because it's the only way to create an extension that looks like:

  • ./manifest.json
  • ./assets/*

Due to dynamic filenames and the lack of their support by Xcode, we needed a way just have 2/3 static entry points.

Comment thread source/refined-github.css
@@ -1,3 +1,26 @@
@import './refined-github.css';

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops. Recursive import

I also need to think of a way to extract the raw CSS below into another file because this change changes the cascade order.

@fregante fregante changed the title ZOMG Parcel Use Parcel instead of Webpack May 2, 2023
@fregante

fregante commented May 4, 2023

Copy link
Copy Markdown
Member Author

This isn't a big deal to Parcel devs, but it renders our builds unreadable. The solution is to either disable scope hosting, which balloons the bundle to 1.2MB or to mangle the names, which means our clean addConversationBanner becomes a, an issue also visible in error stacks. We can't ship sourcemaps.

I can try again in 2024, but at this point the output is subpar. I'll extract some improvements from this PR though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

meta Related to Refined GitHub itself

Development

Successfully merging this pull request may close these issues.

1 participant