Upgrade-to-vite

[mayank1513]

• Replace react-scripts with vite for better build and live reload speed
  • better dx
  • modern tooling
• Set up vitest for unit testing
• Updated dependencies to latest
• Setup ESLint as per vite
• Set up prettier for consistent code formatting
• Refactor for better readability and maintainability
• Fix lint issues

[CLAassistant]

All committers have signed the CLA.

[lucas-koehler]

Hi @mayank1513 ,

thanks for this contribution ❤️ . Upgrading the seed app from CRA to ViteJS is certainly a good idea 👍

I have two remarks inline and noticed three further things:

• Linting no longer works. The whole "eslintConfig" property in the package.json is invalid as the referenced configs are part of CRA and, thus, no longer present. This should be removed. With this, there is no more lint config. I suppose it would make sense to use a vitejs default lint setup for typescript. Could you add this?
• For me the tests (via npm run test) cannot be executed because a dependency for jsdom is missing. We should add it as a dev dependency
• Optional: The build complains that the deprecated CJS (common js) build is used. We could adapt the package.json and tsconfig.json to use ESM.

[mayank1513]

Hi @mayank1513 ,

thanks for this contribution ❤️ . Upgrading the seed app from CRA to ViteJS is certainly a good idea 👍

I have two remarks inline and noticed three further things:

* Linting no longer works. The whole `"eslintConfig"` property in the package.json is invalid as the referenced configs are part of CRA and, thus, no longer present. This should be removed. With this, there is no more lint config. I suppose it would make sense to use a vitejs default lint setup for typescript. Could you add this?

* For me the tests (via `npm run test`) cannot be executed because a dependency for `jsdom` is missing. We should add it as a dev dependency

* Optional: The build complains that the deprecated CJS (common js) build is used. We could adapt the package.json and tsconfig.json to use ESM.

Thank you for your observations. Probably I did not notice these as I was using yarn and pnpm locally. I have fixed the issues you observed.

[lucas-koehler]

Hi @mayank1513, thanks for the updates!

I only have a few minor comments inline. I also noticed that npm run cypress:ci does not seem to work and the tests fail. do the cypress tests work for you?

[mayank1513]

Initially there was issue with even launching the Cypress test. I fixed that. However the tests were not passing in the GitHub action - it was throwing timeout error. Can you help debug and fix this?

…

On Mon, 10 Jun, 2024, 8:52 pm Lucas Koehler, ***@***.***> wrote: ***@***.**** requested changes on this pull request. Hi @mayank1513 <https://github.com/mayank1513>, thanks for the updates! I only have a few minor comments inline. I also noticed that npm run cypress:ci does not seem to work and the tests fail. do the cypress tests work for you? ------------------------------ On .tkb <#119 (comment)> : i think this was commited by mistake? ------------------------------ In .vscode/extensions.json <#119 (comment)> : > @@ -5,7 +5,7 @@ // List of extensions which should be recommended for users of this workspace. "recommendations": [ "esbenp.prettier-vscode", - "ms-vscode.vscode-typescript-tslint-plugin" + "mayank1513.trello-kanban-task-board" this should not be added here. ------------------------------ In .vscode/settings.json <#119 (comment)> : > \ No newline at end of file + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "prettier.jsxSingleQuote": true, + "prettier.singleQuote": true, + "mayank1513.trello-kanban.Workspace.filePath": ".tkb" we should not need this. please remove :) ------------------------------ On src/components/schema.json <#119 (comment)> : The schema.json is not a component and, thus, should not be moved to the components directory. The old location directly in src was fine. This makes it also slightly easier to find for playing around ------------------------------ On src/components/uischema.json <#119 (comment)> : Same as for schema.json. This should stay in src ------------------------------ On package.json <#119 (comment)> : As the starter is now built and implemented as ESM, we should add "type": "module". — Reply to this email directly, view it on GitHub <#119 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGCR4VN6OYH6NF24G22DQ6DZGXACBAVCNFSM6AAAAABI5SOJY6VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDCMBYGA2TOMRVGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[mayank1513]

Cypress is failing because this element does not exist in the DOM - [id="#/properties/recurrence"] > div

[mayank1513]

Fixed Cypress tests...

[lucas-koehler]

Hi @mayank1513 , thank you very much for the updates and the whole rework! Changes LGTM now ✨

I added commits for three small changes:

• Fix one lint error in the cypress config
• Execute CI in pull requests and add linting to CI
• Regenerate the package-lock.json: We always do that for external/unknown contributors as a general security precaution.