Components test and storybook build with vite

[rajsite]

Pull Request

Draft pending merge of #1000

🤨 Rationale

This PR changes the storybook and karma test builds up quite a bit. It substitutes in Vite for parts that significantly improve the dev experience.

Before

Karma tests

Used the output of typescript compile to webpack 5 bundle the output and run tests. Devs need to compile with typescript and run the karma tests which on the fly ran a webpack 5 build.

Could be confusing to edit a test and run just the karma-test without the full typescript build and fail to see the new test behavior. Cycle time slow.

Storybook

The dev builds when running storybook and the static builds of build-storybook would run a full typescript compile and webpack 5 compile to start. The dev builds are pretty good for incremental compilation.

After

Karma tests

The karma tests use vite to build and run. They do not require a typescript compiler. Vite uses esbuild which on the fly compiles typescript files without typechecking, essentially just strips types. So for dev builds this is really fast. karma test starts very quickly and starts running without doing a full ts compile. Makes iterative testing very easy but does not enforce typescript correctness during test execution. IDE support during dev would be used for type checking. The full build will still do a typescript compile.

Storybook

Similar to the above the vite plugin will run during dev time. Storybook starts instantly (in 2-3 seconds), but first page load will do on the fly compilation and caching (maybe 30s till page load). Refreshes of the page hit cache and are fast. Iterative dev is fast. Cache preserved between command runs.

The storybook vite plugin for storybook 6.4 necessitates webpack 4 for building the static site. So webpack 4 is used (internally) compared to Angular (and our old components config) which was webpack 5. Storybook 7 completely removes the webpack dependency and is only Vite based.

👩‍💻 Implementation

Switched to karma-vite and storypack vite and deleted many webpack components and config settings.

🧪 Testing

Tried out debug experience locally.

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.

[rajsite]

Abandoning for now as it didn't seem like the team was overly concerned with our karma test execution performance and storybook build performance to warrant the significance of this change, i.e. tests and storybook running on the very different vite output compared to webpack.

We can revisit after Storybook 7 migration to vite. Split-off the test clean-up into a different PR: #1021