Introduce vite

[Nalgritz]

Resolve #384

Context: Vite introduction is a big task. It requires big change in client folder on adapting vite ecosystem with minimal changes to js source files to preserve similar feature in development experience & building.

Things to consider:

• After vite introduction, eslint plugins are unsupported due to old Node version declared in v18.14.0. Should test whether this app still work at the latest lts node version v18.20.5. This version is proposed in file diff. This proposed change can be made in a separate PR. [Chore] Upgrade node version to support vite eslint packages #391
• Vite uses esbuild for performant bundler. However babel is used in legacy client app to preserve bundling work below. Should consider if it's a big needs in the future. UPDATE: We can gradually phase out babel with findings in brackets
  • transforming styled-component with css namespace (phasing out styled-components in issue Move from styled-components to tailwind #383 )
  • custom js to trim data-testid attribute (Can be achieved by introducing plugins mentioned in vite discussion remove data-attribute in production vitejs/vite#10408)
• jest is migrated with minimal changes. Thoughts about jest or migrate to vitest can be discussed.

[Nalgritz]

Mark this PR to draft to let PRs #389 and #391 merge first

[Nalgritz]

Works ready to review after PRs #389 and #391 merged

[Cybertron01Z]

question:
all that rules from webpack works with vite out of the box?

[Nalgritz]

Good question. Some rules were migrated/not migrated by the considerations below.

1. Focus on the migration to make the client app work just right (without losing developing experience and breaking the app)
2. Some are not migrated since webpack rules has less benefits than vite default configuration
3. For some rules require more efforts whilst produce little benefits, they are decided not to migrate

I've worked a few crucial steps during vite migration:

1. Define __POINZ_CONFIG__ as global variable based on development or production build.
2. Copy dev server proxy paths to vite config.
3. Change dev server default port to 9000 to make sure development experience unchanged.

Rules were not migrated:

1. Production build analysis is removed. Do we ever use this analysis regularly or as metrics before deployment? If yes I can introduce a vite alternative of analyzer.
2. polyfill to fetch whatwg-fetch is removed. Personally I don't think we should still support IE. What do you think?
3. webpack url-loader transforms images less than limit to base64 otherwise leaves as plain url. With vite, it packs files to assets anyway. I don't think it's a big difference since we have fixed numbers of assets anyway.

6. The bundled assets are hashed in different way (See legacy-deploy as build with webpack and deploy folder using vite). Personally I think vite has more benefits with file names and hash than fully hashed.