Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue 3 + Vite migration #211

Open
wants to merge 118 commits into
base: main
Choose a base branch
from
Open

Vue 3 + Vite migration #211

wants to merge 118 commits into from

Conversation

skylermcnamee-hibc
Copy link
Collaborator

@skylermcnamee-hibc skylermcnamee-hibc commented Aug 22, 2024

Please check if the PR fulfills these requirements:

  • After these changes, the app was run and still works as expected
  • Tests for these changes were added (if applicable)
  • npm audit was checked, applicable vulnerabilities were updated
  • npm run build passes
  • npm run storybook still works (storybook as a whole still runs, individual components should have the same functionality as in Vue 2)
  • npm run lint has no unexpected errors
  • npm run format was run on changed files
  • All existing unit tests were run and still pass
  • End-to-end tests were run and still pass in Chrome, Firefox, and Edge without unexpected console errors (npm run test:e2e) (everything passed in Chrome 126, Edge 126, Firefox 129, and Electron 118)

Please specify the type of change this PR introduces (Bug fix, feature addition, content update, chore, etc.):

Migrates from Vue CLI/Webpack to Vue 3 + Vite. This requires some heavy-duty changes to package dependencies, configuration files, and component code. To expedite this development as well as increase ease of maintenance later, it also adds some quality-of-life tools like Husky and Prettier.

Breaking changes:

  • Vue 2 no longer supported
  • Vue CLI/Webpack no longer supported
  • Update FileUploader component to use the latest version of the pdf-js package. This fixes a vulnerability in it, but the component as a whole now requires Node 22 in order to work. More info in the documentation
  • Node <18 no longer supported for the other components (required by Vite)
  • CurrencyInput and DistributionBar were updated to use {{ mustache brackets }} instead of the v-html directive, since the v-html directive can be insecure. This changes how the components render slightly, so they should be passed UTF-8 characters instead of entity references moving forward (eg. pass down the ∞ character instead of typing out &infin;)
  • Rename Button to ButtonComponent (Single word component names are discouraged by eslint)
  • Rename Captcha to CaptchaComponent
  • Rename Checkbox to CheckboxComponent
  • Rename Footer to FooterComponent
  • Rename Header to HeaderComponent
  • Rename Input to InputComponent
  • Rename Loader to LoaderComponent
  • Rename Radio to RadioComponent
  • Rename Select to SelectComponent
  • Rename Textarea to TextareaComponent

Other changes:

  • lots of formatting/linting changes from eslint, prettier
  • delete babel.config.js that was previously used with webpack
  • delete jest.config.js file that was previously used with Jest/Webpack
  • delete vue.config.js that was previously used with Vue CLI
  • delete older .eslintrc.cjs, replace with newer "flat config" eslint.config.js file
  • delete old bundle.js files and other files from the docs folder, where they don't belong
  • delete unused VueCountrySelect and VueRegionSelect components
  • install cypress
  • install husky, lint-staged, associated files
  • update storybook/story folder structure to match modern conventions (eg. rename/relocate)
  • update component syntax for use with Vue 3 (eg. value => modelValue, destroyed() -> unmounted() )
  • update package.json with module syntax/specifications, scripts, engine, browserslist
  • update package dependencies
  • update .storybook/main.js to use newer ESM module syntax
  • update pull_request_template
  • update node version in Github workflows
  • update .gitignore with additional entries
  • update README
  • fix previous bug in FileUploader component (the ZoomPortal inside it is now updated to work with Vue 3 and has accompanying e2e tests to detect this bug in the future)

Additional Notes:

This PR shouldn't be merged into main until after all DE applications have been migrated to Vue 3/Vite-- this way if a critical vulnerability is discovered in the Vue 2 version of the package, the Vue 2 code will still be there in main, ready to patch and publish. However, we do need a Vue 3/Vite version of this package available for future applications, where Vue 2 support is not expected or required. My intention is to publish an alpha/pre-release version with this support to NPM in the interim period.

@skylermcnamee-hibc skylermcnamee-hibc marked this pull request as ready for review August 23, 2024 23:00
Copy link
Collaborator

@cyrilbravo cyrilbravo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good to me. Nothing major that I see that could break the common-lib-vue. One thing I would suggest after merging this to main is to test our DE Apps that uses common-lib-vue to verify that everything is working fine. Nice work :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants