Stuck trying to build and test

[yozlet]

When trying to get a basic build and test environment running for the extension, I ran into a bunch of problems that I don't know the answer to. Some of are due to missing instructions in the README, but others may show a different kind of brokenness. Either way, I've hit a wall. I'm happy to do a PR to fix up the README once I have answers.

Missing yarn install

Apparently this is a yarn repo? (Clue: #491) Everything in the Contributing section says npm, but npm install fails due to Typescript version conflicts. But yarn install works.

Need to do npm run test:e2e before npm run dev

... so that test-e2e/fixtures/vendor/preact can be populated with 33MB of Preact versions. Looks like most of these can be deleted and it'll still work OK, there just has to be at least one. Would be good to have a getting-started command that just downloads the latest.

However...

npm run test:e2e fails

I've been trying to knock down errors one by one:

Need to npx playwright install

Fortunately this advice is clearly output by the first run.

Needs preact repo as sibling dir

The test scripts want a preact repo in the same dir as preact-devtools for some reason, even though they already have loads of Preact tgz distributions in the fixtures/ dir. Also, need to run builds within the preact repo to populate preact/dist/

Missing mjs.map files

This is where I'm stuck – the test script is missing these files:

• ../preact/devtools/dist/devtools.mjs.map
• ../preact/dist/preact.mjs.map
• ../preact/hooks/dist/hooks.mjs.map

... and I don't know how to generate them. All the other dist/ artefacts have .map files, it's just the .mjs ones that are missing. I'm guessing this is a microbuild thing?

[marvinhagemeister]

Apparently this is a yarn repo? (Clue: #491) Everything in the Contributing section says npm, but npm install fails due to Typescript version conflicts. But yarn install works.

Yeah, when I created the extension 6 years ago yarn was very popular and back than everyone knew to look for yarn.lock to know which package manager to use. This should probably be updated, and maybe even switch the project to npm as the benefits of yarn have since been integrated into npm as well.

The test scripts want a preact repo in the same dir as preact-devtools for some reason, even though they already have loads of Preact tgz distributions in the fixtures/ dir. Also, need to run builds within the preact repo to populate preact/dist/

Looks like I should've checked for that back when I wrote that a couple of years back. The reason it pulls in a bunch of different preact versions is that devtools has to work with all of them. You cannot assume that all users are on latest preact. The local repo link was used to test against upcoming preact versions that hadn't been released yet to ensure that new/upcoming releases work out of the box with devtools.

[yozlet]

@marvinhagemeister Thanks for the explanations. I may be able to help with some of this effort – at the very least, documenting it – once I get test:e2e working. Any idea why the .mjs.map files are missing? Or should the tests be somehow configured to not need them?

[yozlet]

slaps forehead

OK, got them running by just following the GitHub workflow file. I'll do a PR for the README later.

[rschristian]

Any idea why the .mjs.map files are missing?

(Just ran into this myslef)

Preact doesn't output .mjs.map files -- we actually copy the .module.js files to .mjs and don't bother with the source map as the source map comment within preact.mjs still points at preact.module.js.map. It looks like tooling here (might be Playwright rather than anything we've written) naively assumes the map file matches the file name though which isn't the case in reality, hence why the source map comment is a standard.