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.

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

Move to an es6 module system where possible, using webpack to package files. #1578

Merged
merged 3 commits into from
Jan 1, 2021

Conversation

Standard8
Copy link
Collaborator

I think I've figured out a reasonable way to make most of the stub files be modules. The basic idea is to move the import code into a separate file that's loaded as a normal javascript file (stubGlobals.js) - with defined globals. The rest of the files can then be loaded as modules, and access the globals as needed. I've made stub.js, reducer.js and reducer-deps.js into modules so far.

I'm thinking we can possibly switch to minifying all of the includes as well, which would mean that we could hopefully include react/redux/etc as normal imports as well.

Whilst this isn't 100% perfect, I think it should help with getting most of this running as modules, and making the test hacks simpler or non-existent.

@siefkenj I'm going to review your PR next (and get that landed), and then continue work on this. Hence there may be a few big changes coming. In the meantime, if you see any big issues in the idea here, let me know.

addon/content/stubGlobals.js Outdated Show resolved Hide resolved
addon/experiment-api/msgWindowApi.js Outdated Show resolved Hide resolved
@siefkenj
Copy link
Collaborator

This looks great. We should be able to move tons of stuff to modules with this change.

Are you thinking of bundling in addition to minification? If webpack bundled stuff for us, it would remove a lot of pain points (especially ongoing troubles with Node not supporting es modules correctly. Though, maybe the newer versions of node work better?).

@Standard8
Copy link
Collaborator Author

This looks great. We should be able to move tons of stuff to modules with this change.

Are you thinking of bundling in addition to minification? If webpack bundled stuff for us, it would remove a lot of pain points (especially ongoing troubles with Node not supporting es modules correctly. Though, maybe the newer versions of node work better?).

Not sure yet, I was mainly thinking about bundling rather than minification. Though I'd like to play around a bit first and see what we need to do vs might like to do.

@Standard8 Standard8 force-pushed the modules branch 2 times, most recently from 8aa5d5d to 620586d Compare December 29, 2020 12:16
@Standard8
Copy link
Collaborator Author

Big update here, this switches to webpack for bundling the files for most of the various pages.

I think the add-on is working if it is built, though tests are still failing - I haven't yet worked out what is the right magic for webpack + jest + babel.

Also probably need to do some more re-arranging of some of the files, so that we can make the build script simpler (and also do things like remove redundant files/modules, and stop manually copying things).

addon/content/attachments.jsx Show resolved Hide resolved
addon/content/es-modules/ui.js Outdated Show resolved Hide resolved
@siefkenj
Copy link
Collaborator

I haven't ever set up babel with jest directly (I use create-react-app), but maybe this is what we're looking for https://www.npmjs.com/package/babel-jest ? I think all the file extensions should be removed from imports, since it will likely get confusing about whether we're importing jsx directly or the pre-transpiled js.

@Standard8
Copy link
Collaborator Author

I haven't ever set up babel with jest directly (I use create-react-app), but maybe this is what we're looking for https://www.npmjs.com/package/babel-jest ? I think all the file extensions should be removed from imports, since it will likely get confusing about whether we're importing jsx directly or the pre-transpiled js.

Thanks, I'll take a look either later or tomorrow.

@Standard8
Copy link
Collaborator Author

I think that it is all working now with the latest updates. I'll go through the diffs again tomorrow or over the weekend and then probably merge.

… files.

This switches over to using es6 for most of stub.html. Some parts still require the legacy style imports and these are contained within stubGlobals.js.

Webpack is used to package the javascript and support files, avoiding the need to manually copy vendor files.
@Standard8 Standard8 changed the title WIP: Move most of stub files to be modules Move to an es6 module system where possible, using webpack to package files. Jan 1, 2021
@Standard8 Standard8 merged commit 0fe28f6 into thunderbird-conversations:master Jan 1, 2021
@Standard8 Standard8 deleted the modules branch January 1, 2021 15:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants