Explore build process for ECMAscript

[SebastianZimmeck]

As I said in #375:

Build process: Our build process with webpack is the major obstacle of a pure ECMAscript solution for our extension. Our extension is based on ECMAscript except for webpack, which makes use of CommonJS. We would like to continue using ECMAscript as that is the future. Going back to CommonJS does not make much sense. So, the questions is whether we can change the build process with webpack such that it makes use of or is compatible with ECMAscript. If that is not possible, are there other build tools that we can use instead of webpack to move towards ECMAscript?

Creating a separate issue here to discuss.

[sophieeng]

I've been reading on this issue and the general consensus is that it is possible to use webpack for ECMAscript modules. The oldest answers generally say that Babel and webpack 4 are needed, but a newer answer says that I just need to change the syntax of the file. I'm currently trying to do that. This GitHub issue was linked.

[SebastianZimmeck]

Perfect! Let's do it!

[SebastianZimmeck]

@sophieeng is aiming to finish this issue by next week.

[sophieeng]

With the new change to the package.json, when writing import statements we have to make sure to address the type of the file we are importing from. Always add the .js.

For example:
This will cause an error
import { stores, storage } from "../background/storage";
This is the correct syntax
import { stores, storage } from "../background/storage.js";

[SebastianZimmeck]

Great! Thanks, @sophieeng, can you add a section to the readme explaining the big build points that you found out, i.e., "We are using webpack for building OptMeowt ... ". You can also refer to this issue (or others).

[sophieeng]

The appropriate format changes were merged. I still need to add to the readme the big build points.

[sophieeng]

Below is my first draft for @katehausladen of my ReadMe update. Looking briefly at the code I think the function pruneCookieIAB located in .../gpc-optmeowt/src/background/cookiesIAB.js should be relatively simple to write a test for.

Still to do:

• Any revisions for ReadMe
• I realize I have not created folder corresponding to the src architecture to put the tests in which I will need to do when I create a more comprehensive test suite.

---

OptMeowt uses the Mocha framework to execute its testing and continuous integration.

Running tests:
Locally:

1. Clone this repo locally or download a zipped copy and unzip it.
2. Make sure npm is up to date.
3. Run tests with ‘npm test’
   No other installations are needed.

Continuous Integration:

• The continuous integration is built into the Opt Meowt repo with Github Actions, therefore no changes to the extension architecture are needed to test new changes.

Creating a new test:

1. Navigate to .../gpc-optmeowt/test/. Then navigate to the folder corresponding to the tested function’s place in the architecture of .../gpc-optmeowt/src/.
2. Create a new file in the matching folder. Name the file with the format function.test.js.
3. Write test using ECMAscript formatting.

[SebastianZimmeck]

Thanks, @sophieeng!

A few suggestions:

Running tests

Running unit tests

Make sure npm is up to date.

Make sure npm is up to date by running <add command> and updating with <add command>, as necessary.

Opt Meowt

OptMeowt

no changes to the extension architecture are needed to test new changes

no changes to the extension environment are needed to run new tests

Navigate to .../gpc-optmeowt/test/. Then navigate to the folder corresponding to the tested function’s place in the architecture of .../gpc-optmeowt/src/.
Create a new file in the matching folder.

This is not clear to me. I first navigate to .../gpc-optmeowt/test/ then I navigate to the src folder? What is the reason for that. I create a new file in the source or test folder or in both?

Name the file with the format function.test.js

The naming convention is not clear to me. I create a file with this exact name above, or do I need to change, add, ... anything? Maybe, give an example to make it clear.

Write test using ECMAscript formatting.

Include a link.

[sophieeng]

Here's my document so as to not clog the issue with drafts.

[sophieeng]

The ReadMe is updated and we are fully switched to ECMAscript