Skip to content

Commit c4389d4

Browse files
birdofpreyrubirdofpreyru
committed
Initial commit
Our journey starts here: - Basic structure of the repo; - Standard Babel configurations (for Webpack and for Node with SSR support).
0 parents  commit c4389d4

File tree

12 files changed

+2773
-0
lines changed

12 files changed

+2773
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v8.9.4

‎AUTHORS.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Topcoder React Utils Authors
2+
3+
### Topcoder Community Members
4+
5+
Dr. Sergey Pogodin aka *birdofpreyru*, <[email protected]>

‎CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Topcoder React Utils Changelog
2+
3+
### v0.0.x
4+
Intial version of the package. A big journey starts here.
5+
- Standard Babel configurations for JS/JSX modules compilation during Webpack build, and for code execution in Node environment with support of server-side rendering.

‎CONTRIBUTING.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
TO BE WRITTEN

‎LICENSE.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# MIT License
2+
3+
Copyright (c) 2018, Topcoder
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Topcoder React Utils
2+
[Topcoder](https://www.topcoder.com) collection of generic ReactJS configurations, components and utilities to be shared between all internal and external ReactJS projects developed by Topcoder community.
3+
4+
### Documentation
5+
This package provides: various configuration files that helps to unify configuration of various applications created at Topcoder, ReactJS components and utilities (non-react classes and functions) that help to solve various typical problems in the same pattern accross all our apps.
6+
7+
#### Configurations
8+
- [**Babel Configurations**](docs/babel-config.md) &mdash; Standard configurations for [Babel](https://babeljs.io/)
9+
10+
#### Components
11+
*To be added*
12+
13+
#### Utilities
14+
*To be added*
15+
16+
### Development
17+
*To be written*
18+
19+
### License
20+
Topcoder React Utils is [MIT Licensed](LICENSE.md)

‎config/babel/node-ssr.json

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"extends": "topcoder-react-utils/config/babel/webpack.json",
3+
"env": {
4+
"development": {
5+
"plugins": [
6+
["css-modules-transform", {
7+
"extensions": [".css", ".scss"],
8+
"generateScopedName": "[path][name]___[local]"
9+
}],
10+
["react-hot-loader/babel", false]
11+
]
12+
},
13+
"production": {
14+
"plugins": [
15+
["css-modules-transform", {
16+
"extensions": [".css", ".scss"],
17+
"generateScopedName": "[hash:base64:6]"
18+
}]
19+
]
20+
},
21+
"test": {
22+
"plugins": [
23+
["css-modules-transform", {
24+
"extensions": [".css", ".scss"],
25+
"generateScopedName": "[path]___[name]__[local]___[hash:base64:5]"
26+
}],
27+
["react-css-modules", {
28+
"filetypes": {
29+
".scss": {
30+
"syntax": "postcss-scss"
31+
}
32+
}
33+
}]
34+
]
35+
}
36+
},
37+
"plugins": [
38+
"dynamic-import-node",
39+
["module-resolver", {
40+
"transformFunctions": ["resolveWeak"]
41+
}],
42+
["transform-assets", {
43+
"extensions": ["gif", "jpeg", "jpg", "png"],
44+
"name": "/images/[hash].[ext]"
45+
}]
46+
]
47+
}

‎config/babel/webpack.json

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"presets": ["env", "react", "stage-2"],
3+
"env": {
4+
"development": {
5+
"presets": [["env", { "modules": false }]],
6+
"plugins": [
7+
["react-css-modules", {
8+
"filetypes": {
9+
".scss": {
10+
"syntax": "postcss-scss"
11+
}
12+
},
13+
"generateScopedName": "[path][name]___[local]"
14+
}],
15+
"react-hot-loader/babel"
16+
]
17+
},
18+
"production": {
19+
"plugins": [
20+
["react-css-modules", {
21+
"filetypes": {
22+
".scss": {
23+
"syntax": "postcss-scss"
24+
}
25+
},
26+
"generateScopedName": "[hash:base64:6]"
27+
}]
28+
]
29+
}
30+
},
31+
"plugins": [
32+
"inline-react-svg",
33+
["module-resolver", {
34+
"extensions": [".js", ".jsx"],
35+
"root": [
36+
"./src/shared",
37+
"./src"
38+
]
39+
}],
40+
"transform-runtime"
41+
]
42+
}

‎docs/babel-config.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Babel Configurations
2+
Standard configurations for [Babel](https://babeljs.io/).
3+
4+
**Why?** &mdash; We use Babel to support latest JavaScript specifications in our projects, and to allow for some fancy features in our code. The standard Babel configurations help to ensure that selected code patterns are supported in all of our apps.
5+
6+
Several Babel configurations are provided by this package:
7+
8+
[**config/babel/webpack.json**](#webpack) &mdash; Babel config to use for JS and JSX files compilation during the Webpack build process;
9+
10+
[**config/babel/node-ssr.json**](#node-ssr) &mdash; Server-side configuration with support of server-side rendering;
11+
12+
To use any of these configurations in your code use `extend` Babel option in your `.babelrc` file, or whenever you need it, e.g.
13+
```json
14+
{
15+
"extend": "topcoder-react-utils/config/babel/node-ssr.json"
16+
}
17+
```
18+
This way you can also easily tune some of Babel options in the way specific to your project; however if you feel that an option change you need is necessary for any generic react-based project, consider to submit an update to the configuration provided by `topcoder-react-utils`.
19+
20+
### Configuration Details
21+
22+
- <a name="webpack">**`config/babel/webpack.json`**</a> &mdash; Babel config to use for JS and JSX files compilation during the Webpack build process;
23+
24+
- Presets: [env](https://www.npmjs.com/package/babel-preset-env), [react](https://www.npmjs.com/package/babel-preset-react), [stage-2](https://www.npmjs.com/package/babel-preset-stage-2);
25+
26+
- Uses [`babel-plugin-react-css-modules`](https://www.npmjs.com/package/babel-plugin-react-css-modules) to transform `styleName` props of ReactJS components into `className` props. A style name is transformed into: (i) `.path-to-the-stylesheet-and-stylesheet-file-name___original-style-name` class in the *development* Babel environment; (ii) `.6-symbols-hash-of-the-style` in the *production* environment. The class names generated in the first cases are verbose, thus good for debugging; and in the second case they are compact which results in smaller size of JS and CSS bundles.
27+
28+
- Uses [`babel-plugin-inline-react-svg`](https://www.npmjs.com/package/babel-plugin-inline-react-svg) to embed imported SVG files into complied JS code;
29+
30+
- Uses [`babel-plugin-transform-runtime`](https://ww.npmjs.com/package/babel-plugin-transform-runtime) to generate more optimal JS bundles;
31+
32+
- Uses [`babel-plugin-module-resolver`](https://www.npmjs.com/package/babel-plugin-module-resolver) to setup the following paths as the roots for resolution of relative imports: `./src/shared`, `./src`;
33+
34+
- Uses [`react-hot-loader/babel`](https://www.npmjs.com/package/react-hot-loader) to support hot module reloading in *development* environment.
35+
36+
- <a name="node-ssr">**`config/babel/node-ssr.json`**</a> &mdash; Server-side configuration with support of server-side rendering. It extends [`config/babel/webpack.json`](#webpack) configuration with the following:
37+
38+
- In the *test* Babel environment [`babel-plugin-react-css-modules`](https://www.npmjs.com/package/babel-plugin-react-css-modules) transforms a style name into `.path-to-the-stylesheet-___stylesheet-file-name__origina-style-name___5-symbols-hash-of-the-style` class. Resuling class names are verbose and good for debugging, the difference from *development* environment is for historic reasons.
39+
40+
- Uses [`babel-plugin-css-modules-transform`](https://www.npmjs.com/package/babel-plugin-css-modules-transform) to convert CSS and SCSS imports into objects with keys and values being the original and generated class names. The class names are generated by the same rules being used to transform style names into classes;
41+
42+
- Uses [`babel-plugin-tranform-assets`](https://www.npmjs.com/package/babel-plugin-transform-assets) to convert GIF, JPEG, JPG, and PNG imports into URL strings like `/images/hash-of-the-asset-file.original-file-extension`, where `/images/` is a fixed path prefix;
43+
44+
- Uses [`babel-plugin-dynamic-import-node`](https://www.npmjs.com/package/babel-plugin-dynamic-import-node) to support dynamic `import(..)` statement;
45+
46+
- Avoids using [`react-hot-loader/babel`](https://www.npmjs.com/package/react-hot-loader) in the *development* Babel environment.

0 commit comments

Comments
 (0)