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

chore: Use vite #208

Merged
merged 9 commits into from
Jul 6, 2022
Merged

chore: Use vite #208

merged 9 commits into from
Jul 6, 2022

Conversation

jonathonherbert
Copy link
Contributor

@jonathonherbert jonathonherbert commented Jun 29, 2022

NB: depends on #209 – please review that first πŸ™

What does this change?

Swaps out rollup in favour of vite to handle our dev and production builds. (Vite uses rollup under the hood for the build process.)

Why?

Working with this library locally, the current, rollup-based workflow takes a very long time to reflect your changes in a development environment (between 10-20s) Once the build is ready, you must refresh your browser to see changes.

Vite's built to improve that experience:

  • the build system uses ESM directly, rebuilding single files on the fly and serving them directly to the browser
  • Vite will swap out the smallest portion of code possible when changes are made, statelessly altering your app on the fly to reflect changes to your app:

hmr

Vite doesn't provide on-the-fly typechecking out of the box, so we've added it by forking the server process and running tsc in watch mode in parallel via run-p.

How to test

NB: As our dev-nginx config has had to change to enable Vite to talk to the site over websockets, I've taken the opportunity to change the local domain for consistency with other services. Update your dev-nginx configuration with dev-nginx setup-app ./nginx/nginx-mapping.yaml before running these changes. The app now runs at https://prosemirror-typerighter.local.dev-gutools.co.uk.

  • Run the application locally and make a few changes to exercise the HMR and typechecking. Does the application behave as expected?
  • Build prosemirror-typerighter locally, and use it in a consuming project, e.g. flexible-content, linking it via yalc (or similar).. It should continue to work as normal. (Very happy to pair on this!)
  • Todo: I'll issue a beta release for this build to verify this over npm, too.

@jonathonherbert jonathonherbert force-pushed the jsh/use-vite branch 3 times, most recently from e9dda68 to d9a4e18 Compare June 29, 2022 16:08
@jonathonherbert jonathonherbert changed the base branch from main to jsh/bump-dependencies June 30, 2022 12:42
@jonathonherbert jonathonherbert force-pushed the jsh/use-vite branch 2 times, most recently from a710e67 to ab4ebdf Compare June 30, 2022 13:51
Base automatically changed from jsh/bump-dependencies to main July 4, 2022 09:42
@rhystmills
Copy link
Contributor

N.b. I had to increase my dev-nginx hash bucket size for the new URL to work, following the instructions here.

Copy link
Contributor

@rhystmills rhystmills left a comment

Choose a reason for hiding this comment

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

Have run locally - builds are dreamily fast (feels instant) - I'd be keen to use vite in other projects having seen it in action here.

Have run in Composer and all is working as expected, though we'll need to update the expected name of the stylesheet which is now style.css rather than index.css.

@jonathonherbert jonathonherbert merged commit af470ec into main Jul 6, 2022
@jonathonherbert jonathonherbert deleted the jsh/use-vite branch July 6, 2022 08:55
@github-actions
Copy link

πŸŽ‰ This PR is included in version 5.13.0 πŸŽ‰

The release is available on:

Your semantic-release bot πŸ“¦πŸš€

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

Successfully merging this pull request may close these issues.

None yet

2 participants