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

build using webpack #1828

Open
wants to merge 148 commits into
base: master
Choose a base branch
from
Open

build using webpack #1828

wants to merge 148 commits into from

Conversation

tophf
Copy link
Member

@tophf tophf commented Oct 9, 2024 •
edited
Loading

Seems to work, but I didn't test everything, so I plan to publish it only into beta for a while. Editor/manager now open slightly faster, as expected, due to bundling and minifying dozens of scripts.

Todo:

  • MV3 build
  • MV2 builds + zips for web stores
  • tests
  • (eventually) actions to upload build artifacts
  • (eventually) actions to publish in the web stores

@eight04, now the source code is using modern conventions (more or less), so it's easier to work with, especially in nontrivial ways. I'll be primarily working on MV3 (arguably using conditional compilation, I don't know yet), so maybe you could take a look at this PR as a whole and advise or participate. Since I don't have a lot of experience in tooling, there's probably a lot to improve. BTW I've tried rollup and although it produced nice ES modules, I still switched to webpack because it's much more flexible at about the same speed. Regarding all those WIP commits, I won't merge them, I'll rebase/regroup everything or just squash it in one commit later.

@tophf
Copy link
Member Author

tophf commented Oct 9, 2024 •
edited
Loading

Here's the diff after moving to src which makes more sense for online browsing: https://github.com/openstyles/stylus/pull/1828/files/b4aa1c4d4a2b13ff778dcf16f7b1e57591787394..HEAD

@eight04
Copy link
Collaborator

eight04 commented Oct 10, 2024

I have never used webpack either so I can only tell from my rollup experience:

  1. It seems that library/content scripts are built separatedly. IDK how webpack handles multiple configs. Does it generate duplicated code when both of them import the same module?
  2. comlink may make it easier to work with workers.
  3. I noticed that there is a src/package.json. Is that how babel config works?
  4. Put static files in a static folder to simplify the config for CopyPlugin.
  5. Some pre-built IIFE libraries are also copied. I think it is possible to import them with a custom loader simply prepending export to the source.
  6. Now we can switch to a component system supporting templates. It will be way more readable than createElement and addEventListener.
  7. My browser freezes when navigating to https://github.com/openstyles/stylus/pull/1828/files so I can only view the code from my editor.

Here are some examples using rollup:

@tophf
Copy link
Member Author

tophf commented Oct 10, 2024

Great stuff, thanks.

duplicated code

I had to split the worker scripts manually into separate compilation items in webpack (previously did the same in rollup) to reuse the code, but comlink should greatly simplify it, thanks.

The content script is intentionally a single bundle because only ~600 bytes for msg-base are duplicated, which isn't worth extracting.

src/package.json

Dunno yet, I forgot to finish my investigation about it. I'll probably remove it, if the extra re plugin doesn't break node_modules and doesn't slow down compilation.

@tophf
Copy link
Member Author

tophf commented Nov 5, 2024 •
edited
Loading

stylus-mv3-test-42278e61.zip

@tophf tophf marked this pull request as ready for review November 5, 2024 21:39
@tophf
Copy link
Member Author

tophf commented Nov 6, 2024

stylus-mv3-test-cc965cef.zip

@tophf
Copy link
Member Author

tophf commented Nov 7, 2024

stylus-mv3-test-7c205b95.zip

@tophf
Copy link
Member Author

tophf commented Nov 8, 2024

stylus-mv3-test-b32a8a99.zip

@tophf
Copy link
Member Author

tophf commented Nov 13, 2024

stylus-chrome-beta-3.0.1.zip

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add build system Move extension content to a subfolder?
2 participants
@tophf @eight04