Benchmarking + some perf. improvements

[splashdust]

This PR adds a new app to the monorepo, core-lib-benchmark. It is a simple web app and a script to collect and compare Chrome traces using Puppeteer. The app is just a simple web app with a router, where each route can contain a set of components or layout that should be tested.

Benchmarks can be run like this:

$ nx run core-lib-benchmark:collect-trace decl-layout-1

This will fire up a dev server, and point the headless Chrome instance to the /decl-layout-1 route. The trace will be outputted as JSON to the ./trace-snapshots dir. The trace can be used as comparison in future runs, or opened and inspected in DevTools.

This PR also adds a caching optimization for constructed stylesheets, and replaces the use of the watch decorator with a setter in the @styleExpressionProperty decorator.

Example output, comparing difference between using cached stylesheets, versus no caching:

Scripting: 843.55ms
Rendering: 504.05ms
Painting: 4.93ms
-------------------
Total: 1352.53ms

Compared to snapshot-decl-layout-1-m3pro:

Scripting: 82.70%
Rendering: 577.22%
Painting: 10.27%
-------------------
Overall: 150.19%

Other minor things: Remove dyanmic line-height from input, since that is a textarea feature Remove inline-size style from badge, since it overrode width and caused broken layout.

[green-design-system-bot[bot]]

🦋 Changeset status

Based on the included changeset, the following releases will be published as a result of this PR:

• @sebgroup/green-core: 1.43.2 → 1.43.3 (patch bump)

Note: If unpublished changesets where merged to main after the first commit of this PR, this list will include those changes in addition to the ones specific to this PR.

[green-design-system-bot[bot]]

👋 Thanks for creating a pull request!

🚀 Checkout the storybooks we've created for it:

• angular
• angular-charts
• chlorophyll
• core
• react
• react-charts

[vsjolander]

Amazing work like always 👌