Add support for Angular 17

[yjaaidi]

@edbzn and I upgraded @playwright/experimental-angular-ct to fix the items below and make it work with the latest version of Playwright.

(the PR looks big because we updated it with playwright's main branch. Updating the target branch should make it more readable 😉)

• Replace slots with template rendering to simplify implementation and usage while sticking to Angular paradigm (the other reason is that WrapperComponent makes it harder to set the child inputs properly using ComponentRef)
• Set signal inputs
• Restructure NPM (peer)dependencies: feat(ct): angular component testing #27783 (comment)
• Remove typeof plugin.default check: https://github.com/microsoft/playwright/pull/27783/files#diff-4592ac823d44ec894c518ba459cfab4bd544056a674739fda5fc145cdc596923R28
• Do not handle routing and let users use router testing harness: feat(ct): angular component testing #27783 (comment)
• Update tests to use Angular 17 feat(ct): angular component testing #27783 (comment)
• Remove @analogjs/vite-plugin-angular and related code and move it to create-playwright feat(ct): angular component testing #27783 (comment)

[yjaaidi]

@sand4rt I fixed everything yesterday.
What do you think of the changes?

One last thing is that package.json and package-lock.json are the exact same ones as microsoft/playwright#main so if you update again, there shouldn't be any changes.

[brandonroberts]

There is also a problem when loading the analog plugin in the playwright config. The config is compiled to CJS so the import is transformed into a "require" which fails because the analog plugin is ESM.

Setting package type to "module" works but I'd love to find another solution as some users might not be able to switch their package type to "module".

(I'll copy the error here later as I am on my phone)

You can rename the vite.config.ts to vite.config.mts. This way it will use Vite in ESM-mode, you can keep the package.json without the type: "module", and your tools like Playwright can still use CJS-mode.

[yjaaidi]

You can rename the vite.config.ts to vite.config.mts. This way it will use Vite in ESM-mode, you can keep the package.json without the type: "module", and your tools like Playwright can still use CJS-mode.

Thanks @brandonroberts!
That is what we did as we renamed the playwright.config.ts to playwright.config.mts (where the vite config is inlined)
The problem is that once the plugin is ready we will want to update create-playwright to add the plugin for Angular. (Cf. microsoft/create-playwright#106)

The thing is that it generates playwright.config.js or playwright.config.ts. Making it generate playwright.config.mts or forcing users to have package type "module" would be too intrusive.

We'll probably have to move this to an issue on the analog repo.
Do you really want to avoid producing cjs too?

[brandonroberts]

You can rename the vite.config.ts to vite.config.mts. This way it will use Vite in ESM-mode, you can keep the package.json without the type: "module", and your tools like Playwright can still use CJS-mode.

Thanks @brandonroberts! That is what we did as we renamed the playwright.config.ts to playwright.config.mts (where the vite config is inlined) The problem is that once the plugin is ready we will want to update create-playwright to add the plugin for Angular. (Cf. microsoft/create-playwright#106)

The thing is that it generates playwright.config.js or playwright.config.ts. Making it generate playwright.config.mts or forcing users to have package type "module" would be too intrusive.

We'll probably have to move this to an issue on the analog repo. Do you really want to avoid producing cjs too?

Yes, Vite is moving away from CJS altogether. There are deprecation warnings from Vite when its CJS APIs are used. We can discuss options in the Analog repo if needed.

[AbdealiLoKo]

Hi ! Can I help move this forward ?
While I have never delved into the internals of playwright - I am happy to test if that helps !

I have a large project where I was hoping I could start using this - which uses standalone components with angular 17.3.1