Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

First attempt at adopting Parcel #1186

Merged
merged 25 commits into from
Jan 20, 2023
Merged

First attempt at adopting Parcel #1186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
9b3ed70
Upgrade sharp
captbaritone Jan 3, 2023
16e6ff3
First attempt at adopting Parcel
captbaritone Sep 28, 2022
fc20c7b
Get multiple targets working for Parcel
captbaritone Sep 29, 2022
72124c6
Use lts node for Netlify deploy
captbaritone Sep 29, 2022
70af734
Update deploy script to reflect new demo site dir
captbaritone Sep 29, 2022
fe98ed2
Inline css into library bundles
captbaritone Sep 29, 2022
c5bc16e
More updates
captbaritone Oct 1, 2022
a916afa
Remove uri optimization
captbaritone Dec 31, 2022
cb24615
Upgrade parcel
captbaritone Jan 2, 2023
4aff8fa
Fix butterchurn logo import for Parcel
captbaritone Jan 2, 2023
5bb82df
Add browser build
captbaritone Jan 3, 2023
b42ee3d
List browser build
captbaritone Jan 3, 2023
55dadd1
Prefer jest-swc to babel
captbaritone Jan 3, 2023
f4fbd80
Preserve old build artifact location
captbaritone Jan 3, 2023
b5a5e0b
Ignore dist
captbaritone Jan 8, 2023
cb3ee6b
Minify library bundles
captbaritone Jan 8, 2023
f9f6990
Switch to postcss to use uri optimization plugin
captbaritone Jan 9, 2023
47d815a
Serve from the correct location
captbaritone Jan 9, 2023
a285465
Clarifying comments
captbaritone Jan 9, 2023
7c935b9
Ignore bundle reports in git
captbaritone Jan 9, 2023
3c3bdb0
Refine Parcel builds
captbaritone Jan 9, 2023
88c36ba
Try to be more explicit with port
captbaritone Jan 13, 2023
281b10c
Use relative path to create build dir
captbaritone Jan 13, 2023
46a809b
Try to force supporting chrome 76
captbaritone Jan 13, 2023
c9a8651
Update the location of the test skin in integration test to work with…
captbaritone Jan 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ jobs:
yarn workspace ani-cursor build
yarn workspace webamp build
yarn workspace webamp build-library
yarn workspace webamp move-library
- name: Lint
run: |
yarn lint
Expand Down
5 changes: 4 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
node_modules
.vscode
.vscode
.parcel-cache
dist
parcel-bundle-reports
3 changes: 3 additions & 0 deletions .parcelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "@parcel/config-default"
}
1 change: 1 addition & 0 deletions .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@

packages/webamp/demo/built/
packages/webamp/built/
packages/webamp/dist/
packages/webamp-modern/build/
packages/webamp-modern/tools/eslint-rules/dist/
6 changes: 0 additions & 6 deletions babel.config.js
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions config/jest.unit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,7 @@ module.exports = {
],
testEnvironment: "jsdom",
setupFiles: ["<rootDir>/packages/skin-database/jest-setup.js"],
transform: {
"^.+\\.(t|j)sx?$": ["@swc/jest"],
},
};
2 changes: 1 addition & 1 deletion deploy.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ yarn workspace ani-cursor build
yarn workspace webamp build
yarn workspace webamp build-library
yarn workspace webamp-modern build
mv packages/webamp-modern/build packages/webamp/demo/built/modern
mv packages/webamp-modern/build packages/webamp/dist/demo-site/modern
4 changes: 2 additions & 2 deletions netlify.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[build]
command = "yarn deploy"
publish = "packages/webamp/demo/built"
publish = "packages/webamp/dist/demo-site/"

# A short URL for listeners of https://changelog.com/podcast/291
[[redirects]]
Expand Down Expand Up @@ -36,4 +36,4 @@
force = true

[build.environment]
NODE_VERSION = "12"
NODE_VERSION = "16"
12 changes: 10 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,19 @@
},
"devDependencies": {
"@babel/preset-typescript": "^7.16.7",
"@parcel/optimizer-data-url": "2.7.0",
"@parcel/transformer-inline-string": "^2.8.2",
"@swc/core": "^1.3.24",
"@swc/jest": "^0.2.24",
"@typescript-eslint/parser": "^5.13.0",
"assert": "^2.0.0",
"eslint": "^8.14.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-prettier": "^4.0.0",
"events": "^3.3.0",
"jest": "^27.5.1",
"prettier": "^2.3.2"
"prettier": "^2.3.2",
"stream-browserify": "^3.0.0"
Copy link
Owner Author

Choose a reason for hiding this comment

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

Where did all of these changes come from?

Copy link

Choose a reason for hiding this comment

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

If there is some import to a Node builtin modul (e.g. stream), Parcel autoinstalls the corresponding polyfill.

Copy link

Choose a reason for hiding this comment

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

(And same goes for the two Parcel plugins listed in here, which are installed on demand. And in this case, you forgot the bump them when upgrading to "parcel": "^2.8.2")

Copy link
Owner Author

Choose a reason for hiding this comment

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

Oh awesome! I assumed it was something like this, thanks for commenting.

BTW, shipping this is currently blocked on some significant size regressions. Webamp lazy is the simpler case to debug since it doesn't pull in some of the heavy dependencies like JSZip.

Using the bundle analyzer reporter gives a nice looking report, but it's dominated by "code from unknown sources". So my next step is to try to figure out what's contributing to this regression.

https://enchanting-khapse-0a90c1.netlify.app/webamp-lazy.html

If you happen to have any tips on how to diagnose, that'd be super helpful!

Copy link

Choose a reason for hiding this comment

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

"isLibrary": true makes the default "optimize": false, because you usually don't want published libraries to be minified. But you can override that of course (I assume you want minification as they're called *.min.js?):

--- packages/webamp/package.json
+++ packages/webamp/package.json
@@ -15,7 +15,8 @@
     "webamp": {
       "source": "js/webamp.js",
       "outputFormat": "esmodule",
-      "isLibrary": true
+      "isLibrary": true,
+      "optimize": true
     },
     "webamp-browser": {
       "source": "js/webampBrowser.js",
@@ -24,7 +25,8 @@
     "webamp-lazy": {
       "source": "js/webampLazy.tsx",
       "outputFormat": "esmodule",
-      "isLibrary": true
+      "isLibrary": true,
+      "optimize": true
     },
     "demo-site": {
       "source": "demo/index.html"
@@ -36,7 +38,7 @@

Copy link
Owner Author

Choose a reason for hiding this comment

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

Okay. It looks like the remaining difference for the lazy version is entirely attributable to the fact that I haven't yet ported my image optimization to Parcel.

I tried manually checking the optimized version of the CSS into the repo and we are now at ~3% reduction in bundle size!

Reading the Parcel docs it implies that png images are automatically optimized. It looks like that does not apply to png images that exist as data uris in CSS files (that's what my custom Webpack loader does). Is that an optimization that Parcel could/should apply? It seems in keeping with Parcel's approach of automatically applying optimizations where it can, but I also get that this is quite an edge case.

Copy link

Choose a reason for hiding this comment

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

🎉

Is that an optimization that Parcel could/should apply? I also get that this is quite an edge case.

Yeah, but it should be possible to support in Parcel.

An alternative here (and this might even be preferable just from a code authoring perspective) is putting these inline PNGs into separate files and then using Parcel's feature to inline it as a data-url: https://parceljs.org/features/bundle-inlining/#inlining-as-a-data-url

Copy link
Owner Author

Choose a reason for hiding this comment

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

Yeah, I think a "normal" app would work this way, but Webamp has built in support for loading custom "skins", which means it converts the zip file into CSS (with embedded data uris) in the browser. The way I generate the default skin CSS file is I load the custom skin and copy out the generated CSS. This means there's not a reasonable way to get those (probably hundreds) of png files as actual files on the file system.

Copy link
Owner Author

Choose a reason for hiding this comment

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

As you saw, I raised the issue on the Parcel repo: parcel-bundler/parcel#8758 (comment)

I'll probably just keep my existing setup unless that feature looks appealing to someone to implement.

Copy link

Choose a reason for hiding this comment

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

I'll see if I can fix that parcel issue you mentioned -- I'll recomment here if I get to it.

},
"prettier": {
"trailingComma": "es5"
Expand All @@ -30,5 +37,6 @@
"projects": [
"config/jest.*.js"
]
}
},
"dependencies": {}
}
2 changes: 1 addition & 1 deletion packages/skin-database/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
"node-fetch": "^2.6.7",
"polygon-clipping": "^0.15.3",
"puppeteer": "^13.3.2",
"sharp": "^0.28.3",
"sharp": "^0.31.3",
"sqlite3": "^5.1.2",
"temp": "^0.9.0",
"ts-node": "^10.5.0",
Expand Down
Loading