Skip to content
This repository has been archived by the owner on Jul 12, 2023. It is now read-only.

Use Vite for speed and simplicity #609

Merged
merged 10 commits into from
Oct 25, 2022
Merged

Use Vite for speed and simplicity #609

merged 10 commits into from
Oct 25, 2022

Conversation

mxdvl
Copy link
Contributor

@mxdvl mxdvl commented Oct 21, 2022

What does this change?

Use Vite for building everything:

  • Storybook: yarn storybook & yarn build-storybook
  • Development: yarn dev
  • Package build: yarn build

Instead of having Webpack for Storybook and two Rollup configs for bundling the package, use Vite for everything.

The Rollup builds are performed in a similar time. The Storybook build takes about half the time on my machine, at about 35 seconds for build-storybook.

Why?

Makes things faster and simpler, with a lot less tooling to maintain.

Hopefully this will help our CI tests to pass again, so we can start bumping dependencies. Dependabot seems to be unable to trigget chromatic, and trying to upgrade Source has been impossible with the current setup.

Helps move the needle on guardian/dotcom-rendering#6264

@mxdvl mxdvl requested a review from a team as a code owner October 21, 2022 18:29
@changeset-bot
Copy link

changeset-bot bot commented Oct 21, 2022

🦋 Changeset detected

Latest commit: 9679bb7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@guardian/discussion-rendering Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@mxdvl mxdvl force-pushed the mxdvl/vite-loader branch 2 times, most recently from 46f0127 to 805709a Compare October 21, 2022 18:49
@mxdvl mxdvl added the enhancement New feature or request label Oct 24, 2022
@mxdvl mxdvl force-pushed the mxdvl/vite-loader branch 4 times, most recently from 32121aa to a20362f Compare October 24, 2022 11:50
@mxdvl mxdvl mentioned this pull request Oct 24, 2022
@mxdvl mxdvl changed the base branch from main to mxdvl/fix-build October 24, 2022 12:18
@github-actions
Copy link
Contributor

github-actions bot commented Oct 24, 2022

Size Change: -349 kB (-84%) 🏆

Total Size: 65 kB

Filename Size Change
build/App.esm.js 34.7 kB -172 kB (-83%) 🏆
build/App.js 30.3 kB -177 kB (-85%) 🏆

compressed-size-action

Base automatically changed from mxdvl/fix-build to main October 24, 2022 14:26
@mxdvl mxdvl mentioned this pull request Oct 24, 2022
@mxdvl mxdvl changed the title Use Vite Use Vite for speed and simplicity Oct 24, 2022
@mxdvl mxdvl added help wanted Extra attention is needed dependencies Pull requests that update a dependency file labels Oct 24, 2022
@mxdvl mxdvl mentioned this pull request Oct 24, 2022
Copy link
Member

@AshCorr AshCorr left a comment

Choose a reason for hiding this comment

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

Don't know too much about Vite and its configuration but I also don't to gatekeep this PR!

As far as I understand this should affect how DCR uses discussion-rendering right? Just the bundling process for Storybook? With that in mind I'd quite like to see how it goes!

@@ -0,0 +1,3 @@
<script>
window.global = window;
Copy link
Contributor

Choose a reason for hiding this comment

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

What does this do?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@@ -0,0 +1 @@
/// <reference types="vite/client" />
Copy link
Contributor

Choose a reason for hiding this comment

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

What does this mean?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

entry: "./src/App.tsx",
formats: ["cjs","es"],
fileName: (format) => {
const path = format === "es" ? pkg.module : pkg.main
Copy link
Contributor

@OllysCoding OllysCoding Oct 25, 2022

Choose a reason for hiding this comment

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

I'm not entirely sure I understand what's going on here? Could we add a comment, or could it be better for these values to be hardcoded?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This ensures that the file name is coming from the package.json, rather than having a loose contract between it and the build config.

Added a comment in 9679bb7.

Copy link
Contributor

@OllysCoding OllysCoding left a comment

Choose a reason for hiding this comment

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

+1 A few questions to benefit my own understanding, but this looks good!

@mxdvl mxdvl merged commit fb44baf into main Oct 25, 2022
@mxdvl mxdvl deleted the mxdvl/vite-loader branch October 25, 2022 10:10
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
dependencies Pull requests that update a dependency file enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants