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

docs(webpack): add webpack3 boilerplate with theming #2371

Merged
merged 2 commits into from
Feb 14, 2018

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Dec 10, 2017

Rel #1636.

This PR adds the missed information about theming and adds the real boilerplate 😺

Boilerplate features

  • preconfigured theming
  • CSS modules for user components
  • hot module reload
  • optimized build (automatic direct imports, proptypes removal)

### [webpack2][29]
Our example project right [here][29] in this repo.
### [webpack][28]
Our example project right [here][28] in this repo. Includes theming examples.
Copy link
Member Author

Choose a reason for hiding this comment

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

Webpack 1&2 is outdated, we need only one boilerplate for latest version.

@@ -199,12 +196,11 @@ Big thanks to our [contributors][20], especially:
[21]: /~https://github.com/Semantic-Org/Semantic-UI-React/labels/good%20first%20issue
[22]: /~https://github.com/Semantic-Org/Semantic-UI-React/edit/master/README.md
[23]: https://react.semantic-ui.com/usage#css
[24]: https://github.com/Semantic-Org/Semantic-UI-React/issues/802#issuecomment-258990274
[24]: https://medium.com/webmonkeys/webpack-2-semantic-ui-theming-a216ddf60daf
Copy link
Member Author

Choose a reason for hiding this comment

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

I've updated link as information there has more value for our users.

@layershifter
Copy link
Member Author

@brianespinosa @levithomason It will be awesome to get feedback from you there. Grammar fixes is much appreciated 😸

@codecov-io
Copy link

codecov-io commented Dec 10, 2017

Codecov Report

Merging #2371 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master    #2371   +/-   ##
=======================================
  Coverage   99.73%   99.73%           
=======================================
  Files         152      152           
  Lines        2661     2661           
=======================================
  Hits         2654     2654           
  Misses          7        7

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 36fd4a7...50e1043. Read the comment docs.

@levithomason
Copy link
Member

Very cool, thanks for this! I'm just wrapping my session for today. I want to give this PR the attention it deserves, so that may come at a later date. ❤️

Copy link
Member

@brianespinosa brianespinosa left a comment

Choose a reason for hiding this comment

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

Everything else looks good. Just a few grammar and copy changes I am suggesting.

I saw that we are also using the beta version of babel-loader and @babel. Is this for JSX fragments? I try to stay away from beta releases on packages if I can avoid it.

<Header as='h2' content='Preface' dividing />
<p>
Semantic UI React does not have own styling system and fully relies on the theming of Semantic UI. It's really
powerfull, you don't need to know LESS or CSS you can simply update values of variables or use styles from
Copy link
Member

Choose a reason for hiding this comment

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

powerfull > powerful


<Header as='h2' content='Quick start' dividing />
<p>
Semantic UI offers own build system that uses Gulp and produces prepared CSS files. It makes sence to use it
Copy link
Member

Choose a reason for hiding this comment

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

"Semantic UI offers its own build system..."

sence > sense


<Header as='h2' content='Boilerplate' dividing />
<p>
If you are looking a boilerplate, we prepared it. It powered by latest Webpack and includes the all required
Copy link
Member

Choose a reason for hiding this comment

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

"The boilerplate we prepared is powered by the latest Webpack and includes the all required things for quick start like preconfigured theming and hot module reload."

@layershifter
Copy link
Member Author

I saw that we are also using the beta version of babel-loader and @babel. Is this for JSX fragments? I try to stay away from beta releases on packages if I can avoid it.

Babel 7 is much faster and enough stable now. I'm use it in my project last few weeks and I really like it.

I almost sure that it will be released soon as stable and it makes no sence to make bet on Babel 6 now to me.

@levithomason
Copy link
Member

Looks like we have approvals here. In the future @layershifter, if you get multiple approvals and are confident, please feel free to merge without me. I don't want to hinder progress and I have trust for everyone we're adding to the team.

/cc @brianespinosa @fracmak

Note, @layershifter has been here a long time and has master merge rights. I control releases, but anything that makes it to master will make the next release cycle.

@levithomason levithomason merged commit 96ad076 into master Feb 14, 2018
@levithomason levithomason deleted the docs/webpack-style branch February 14, 2018 07:14
@levithomason
Copy link
Member

Looks a bad merge on this guy. Build is failing. Might need to roll it back, or make a fix PR. See master on CircleCI.

@layershifter
Copy link
Member Author

layershifter commented Feb 14, 2018

It's a long term problem with tests:

FAILED TESTS:
✖ "after each" hook
HeadlessChrome 0.0.0 (Linux 0.0.0)
Error: Uncaught RangeError: Maximum call stack size exceeded (src/lib/index.js?504b:178:0

I can't to find out the reason locally, very strange issue. Last build was successed.

@levithomason
Copy link
Member

Random intermittent failure I suppose. Thanks.

@levithomason
Copy link
Member

Released in semantic-ui-react@0.78.3.

Brantron pushed a commit to Brantron/Semantic-UI-React that referenced this pull request Mar 14, 2018
* docs(webpack): add webpack3 boilerplate with theming

* docs(webpack): fix grammar
@tim-soft
Copy link

tim-soft commented Apr 4, 2018

@levithomason is there much to change in order to responsibly load SUIR in Webpack v4, seeing how tree shaking/code splitting actually works in this version?

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

Successfully merging this pull request may close these issues.

6 participants