Switch to ESModule

[Jack-Works]

⚠⚠⚠ I've decided not to merge this due to bad DX ⚠⚠⚠

⚠⚠⚠ Don't delete this branch ⚠⚠⚠

close #221

The new architecture of Maskbook

TL;DR

With our new architecture, you can...

1. ✔️ use import.meta
2. ✔️ use dynamic import import() in any way you want
3. ✔️ still use process.env.*
4. ✔️ only start the minimal build tasks you need (e.g. gulp watch-esm or gulp watch-assets).
5. ✔️ easily to debug in the Chrome Devtools.
6. ✔️ use Hot Module Reload for React Components (experimental!!)
7. ✔️ still support webext toolchain
8. ❌ use require()
9. ❌ use all Webpack variables like __webpack_public_path__
10. ❌ tree shaking based on process.env.NODE_ENV

Caution about these things!

1. ⚠️ import a JSON file is supported, but not encouraged, please load the JSON file by fetch when possible.
2. ⚠️ When you change a JSON file that imported by example.ts, you need to change example.ts to recompile it because the JSON files are inlined to example.ts.
3. ⚠️ DO NOT publish the build on your machine to the store unless you remove the temp folder before the build because old files are not removed.
4. ⚠️ NEVER run tsc in this project! Run ttsc instead!
5. ⚠️ webext toolchain is not migrated to the new toolchain yet! That means you cannot automatically install this on Android. I'll try to add it later.

Under the hood

Compile time

• We now use gulp as our build tool. Use gulp --tasks to see what tasks are available.

  Don't think gulp is an outdated tool! I deliberately select the correct tool based on the situation. For unbundled development, gulp is the best tool in the old days to handle multiple files without bundling them into a single file.

• Source codes (./src/) are compiled by the TypeScript compiler directly to emit ES Module files.

• All dependencies (./node_modules/) are compiled by Webpack and served as a global variable __deps__. (In future we will migrate some to rollup and snowpack).

• Web Workers are compiled by Webpack.

• The injected script is compiled by Webpack.

• We use TypeScript incremental build to speed up build time.

Runtime

• In Chrome, everything is running in ES Module (besides injected script).
• In Firefox, basically the same as Chrome besides content script. Content scripts are running in the System JS format.

  Due to the bug "Dynamic module import doesn't work in webextension content scripts", it is impossible to use ES Module in the content script in Firefox.

• In iOS, the webextension polyfill for iOS will provide the ability to load ES Module.

To land this...

• Test it on Chrome
• Test it on Firefox
• Test it on Firefox for Android
• Test it on iOS
• Test it on GeckoView

What's next?

• Support React Dev tools
• Better dependencies splitting
• Investigate ES Module hot reload to improve DX.
• Deprecates JSON import
• Switch to rollup and Snowpack when possible
• Move all image assets in the ./public/ folder to where they are be used and load them by import.meta

[Jack-Works]

@guanbinrui hi! can you help me to find why the E2E test failed?

[guanbinrui]

@guanbinrui hi! can you help me to find why the E2E test failed?

Failed to open the browser. I think the build/ folder which generated by build:e2e is absent.

[Jack-Works]

@guanbinrui it's moved to temp/extension

[Jack-Works]

This PR is ready for review! @guanbinrui please help me to fix the E2E test thanks!

Also, please run this branch in the watch mode and try to modify src/components/InjectedComponents/DecryptedPost/DecryptedPost.tsx this component to see if Hot Module Reloading is looking good.

[septs]

the task not migrate?

[septs]

extract to a common library?

@dimensiondev/types