ref(ui): use vite instead of webpack

[sbdchd]

Basically:

• Replace web pack setup with vite and upgrade various dependencies and cull unnecessary ones.
• Also remove TSLint. Will replace with typescript-eslint rules eventually.
• Got rid of the hacky landing page static generation.

Various road bumps along the way:

• https://javascript.plainenglish.io/how-to-set-up-path-resolving-in-vite-ad284e0d9eae
• fix sass imports Error: Can't find stylesheet to import. vitejs/vite#5764 (comment)
• Then needed to rewrite the alias for typescript again to match the types
• Replace process. With the import.meta.env thing
• https://stackoverflow.com/questions/64677212/how-to-configure-proxy-in-vite
• Fix imports for static files from requires()
• Had to fix proxying for /avatar and /api in dev
• Ran into Uncaught ReferenceError: process is not defined remarkjs/react-markdown#339 (comment)
  • Upgrade markdown react to fix
• Migrate from react-helmet to fix some deprecation warnings
• Vite has a different jsx config, so no need to import React
  • Missing "'React' is declared but its value is never read" error when using tsconfig.json jsx setting with react-jsx value microsoft/TypeScript#41882
• Vitest issue:
  • https://github.com/vitest-dev/vitest/blob/57c2367196b3fd978a04fa38ebdac7a5b6ef9b16/packages/vite-node/src/client.ts#L178-L179
• Couldn’t import react-dnd, upgraded
  • ERR_UNSUPPORTED_DIR_IMPORT when trying to use react-dnd with Next.js app.  react-dnd/react-dnd#3368
• import { isUndefined } from "util" didn’t work
• Favicon via https://github.com/darkobits/vite-plugin-favicons to replace web pack equivalent
• Issue with React router browser history in vitest, it exploded until jsdom was setup
• Question: https://stackoverflow.com/questions/71703933/what-is-the-difference-between-vite-and-vite-preview
• Vitest vscode integration broken :/
  • Not working on macOS vitest-dev/vscode#44
• Tried happy-dom but it doesn’t work, lots of issues, supposed to be faster
• Took a while to get MSW in a good place, had to write some stuff so missing endpoint mocks fail the test
  • I think there's room for improvement here in terms of developer experience
  • Test with react testing library and API calls
    • https://www.npmjs.com/package/nock
      • Doesn’t fail test on unknown mock
      • https://stackoverflow.com/questions/69430232/jest-nock-how-to-fail-a-test-if-a-non-mocked-request-is-made
    • MSW
      • Doesn’t fail test on unknown mock
      • Using "onUnhandledRequest": "error" does not fail tests mswjs/msw#946
    • Relay’s mockEnvironment
      • couldn't easily find thorough examples
    • Apollo mock provider
      • Doesn’t fail test on unknown mock
• Added a visualize plugin similar to a web pack analyzer thing, but it’s slightly off with the numbers it gives for sizes:
  • Reportes sizes don't match reality btd/rollup-plugin-visualizer#96
• TODO:
  • ESLINT rules, replace what tslint provided, eslint-cake anyone?
    • https://typescript-eslint.io/rules/no-floating-promises/
    • And more!!!
  • Replace lodash with lodash-es
    • Or maybe: https://github.com/onebay/vite-plugin-imp
    • Although lodash-es seems cleaner
  • SSR for landing page?

[sbdchd]

@chdsbd fyi, netlify node version is out of date, needs to be updated:

11:00:39 PM: error @darkobits/vite-plugin-favicons@0.1.7: The engine "node" is incompatible with this module. Expected version ">=14". Got "12.18.0"

https://app.netlify.com/sites/recipeyak/deploys/62e7418a2c8029000984c21a