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

New: Add hot module reloading for theme and styles #1489

Merged
merged 79 commits into from
Jan 13, 2020

Conversation

elevatebart
Copy link
Collaborator

@elevatebart elevatebart commented Dec 5, 2019

closes #1475

This Pull Request allows users of react-styleguidist to iterate faster with the styling of their guides.
It avoids having to stop and restart the webpack-dev-server every time a change is made to the theme or the styles.

To achieve this goal, I allow the styles and theme parameters to be passed as File paths instead of an object. Webpack can then use the new files as modules and hot replace them.

  • create a themed example
  • adapt the schema/config.ts
  • Add documentation about new feature
  • change styleguide-loader.ts to resolve the style files using requireIt and set them up for hmr using adddependency and the hmrStyles flag
    • add tests
  • update client/index.ts to resolve es6 & es5 exports of style files and pass them on to renderStyleguide
  • add a key to Styleguide on account of the calculated cssRevision to force its refresh and recalc the styles
  • use the new context to cache-bust createStyleSheet memoization when styles have
    changed
    • add tests

@elevatebart elevatebart changed the title Feature: hmr theme [WIP] Feature: hot module reloading for theme and styles Dec 6, 2019
@elevatebart
Copy link
Collaborator Author

elevatebart commented Dec 9, 2019

I thought that I could find a simple way to decouple components from the styles and themes object. I could not without big changes to the rsg-components files.

To have Webpack recompile each component's style independently (and therefore hot replace only the components impacted) the requests to the Styled component would have to be different per component.

This is too big of a change for what I want for this PR. I will come up with another one.

This one is ready for review.

Copy link
Member

@sapegin sapegin left a comment

Choose a reason for hiding this comment

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

👾

.eslintrc Outdated Show resolved Hide resolved
docs/Configuration.md Outdated Show resolved Hide resolved
docs/Configuration.md Outdated Show resolved Hide resolved
docs/Cookbook.md Outdated Show resolved Hide resolved
examples/themed/styleguide.config.js Outdated Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
src/client/styles/__tests__/createStyleSheet.spec.ts Outdated Show resolved Hide resolved
@elevatebart elevatebart changed the title Feature: hot module reloading for theme and styles New: Add hot module reloading for theme and styles Dec 10, 2019
Copy link
Member

@sapegin sapegin left a comment

Choose a reason for hiding this comment

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

And there are a few unresolved comments from the previous iteration.

src/client/utils/renderStyleguide.tsx Outdated Show resolved Hide resolved
src/loaders/utils/__tests__/resolveES6.spec.ts Outdated Show resolved Hide resolved
@elevatebart
Copy link
Collaborator Author

Finally done all the last fixes, we should be closer to the finish line

Copy link
Member

@sapegin sapegin left a comment

Choose a reason for hiding this comment

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

There are still couple of open comments in styleguide-loader.ts, the rest looks good!

src/client/utils/renderStyleguide.tsx Outdated Show resolved Hide resolved
@elevatebart
Copy link
Collaborator Author

@sapegin I did it all now, finally, I am open to questions.

Copy link
Collaborator Author

@elevatebart elevatebart left a comment

Choose a reason for hiding this comment

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

@sapegin is this comment better ?

@elevatebart
Copy link
Collaborator Author

@sapegin do you think I can merge this one?

@sapegin
Copy link
Member

sapegin commented Jan 13, 2020

Yup, go for it!

@elevatebart elevatebart merged commit f96137c into master Jan 13, 2020
@elevatebart elevatebart deleted the feature-hmr-theme branch January 13, 2020 14:29
@styleguidist-bot
Copy link
Collaborator

🎉 This PR is included in version 10.5.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.

Hot Module Reloading for theme and styles
3 participants