Skip to content

Commit 241d0c5

Browse files
samerbunasamerbuna
committed
Make it work with latest Babel and Webpack
1 parent 4af1e29 commit 241d0c5

File tree

14 files changed

+130
-138
lines changed

14 files changed

+130
-138
lines changed

‎packages/reactful-commands/lib/text.js‎

Lines changed: 1 addition & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -27,29 +27,13 @@ export default class ${componentName} extends React.PureComponent {
2727
exports.rfc = (componentName) =>
2828
`import React from 'react';
2929
30-
export default const ${componentName} = (props) => {
30+
export default const ${componentName} = ({}) => {
3131
return (
3232
<div>
3333
</div>
3434
);
3535
};`;
3636

37-
exports.rsc = (componentName) =>
38-
`import React from 'react';
39-
import { ConnectedComponent } from 'state-components';
40-
41-
export default class ${componentName} extends ConnectedComponent {
42-
static stateMap = [];
43-
static actionsMap = {};
44-
45-
render() {
46-
return (
47-
<div>
48-
</div>
49-
);
50-
}
51-
}`;
52-
5337
exports.jest = {};
5438

5539
exports.jest.default = (componentName) =>
@@ -69,20 +53,3 @@ describe('${componentName}', () => {
6953
});
7054
7155
});`;
72-
73-
exports.jest.rsc = (componentName) =>
74-
`import React from 'react';
75-
import { shallowRender } from 'immutable-state-components/helpers';
76-
77-
import ${componentName} from './${componentName}';
78-
79-
describe('${componentName}', () => {
80-
it('renders correctly', () => {
81-
const wrapper = shallowRender(<${componentName} />, {
82-
initialData: {},
83-
initialState: {},
84-
});
85-
86-
expect(wrapper).toMatchSnapshot();
87-
});
88-
});`;

‎packages/reactful-main/README.md‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,73 @@
11
## Reactful
22

3-
A very opinionated React CLI. You can use it to generate an independent full-stack react application that's fully-configured to render on both client and server.
3+
A very opinionated React CLI. You can use it to generate an independent
4+
full-stack react application that's fully-configured to render on both client
5+
and server.
46

57
[![npm version](https://badge.fury.io/js/reactful.svg)](https://badge.fury.io/js/reactful)
68

7-
This CLI requires Node 8.0 or greater, and it would work better if you have [Yarn](https://yarnpkg.com/en/) and [Git](https://git-scm.com/) on the machine.
9+
This CLI requires Node 8.0 or greater, and it would work better if you have
10+
[Yarn](https://yarnpkg.com/en/) and [Git](https://git-scm.com/) on the machine.
811

912
### Install
1013

1114
npm i -g reactful
1215

13-
Once installed, the package will have a global ```react``` command.
16+
Once installed, the package will have a global `reactful` command.
1417

1518
### Create New React App
1619

17-
react new my-awesome-react-app-name
20+
reactful new my-awesome-react-app-name
1821

1922
Once created, you'll see instructions on how to start it:
2023

2124
cd my-awesome-react-app-name
2225

2326
### To start the app (for development):
24-
react start
27+
reactful start
2528

2629
# The start command starts a watcher process
2730
# which will restart node/webpack on save
2831

2932
### Open the app in browser:
30-
react open
33+
reactful open
3134

3235
# The app will be running on localhost:4242 by default
3336

3437
### To run tests:
35-
react test
38+
reactful test
3639

3740
### To build for production:
38-
react build
41+
reactful build
3942

4043
### To start the app for production:
41-
react prod
44+
reactful prod
4245

43-
The generated app is completely independent from the reactful package. At this point you can part ways with the reactful package and do your own thing, but if you follow the patterns initialized by the package, you can use a few handy commands from the global react command.
46+
The generated app is completely independent from the reactful package. At this
47+
point you can part ways with the reactful package and do your own thing, but if
48+
you follow the patterns initialized by the package, you can use a few handy
49+
commands from the global react command.
4450

4551
### Update Existing React App
4652

47-
While in a React application that's created with this tool, you can always revert things back the default configurations with the init command. You can also use this command in an empty directory.
53+
While in a React application that's created with this tool, you can always
54+
revert things back the default configurations with the init command. You can
55+
also use this command in an empty directory.
4856

4957
cd my-awesome-react-app-name
50-
react init
58+
reactful init
5159

52-
If that directory already has files, reactful will ask you if you want to override them.
60+
If that directory already has files, reactful will ask you if you want to
61+
override them.
5362

5463
### Creating Components
5564

56-
- Create a New Component: ```react c ComponentName```
57-
- Create a New Pure Component: ```react pc ComponentName```
58-
- Create a New Function Component: ```react fc ComponentName```
59-
60-
All of these commands will also create a jest snapshot test for the generated component.
65+
- Create a New Component: `reactful c ComponentName`
66+
- Create a New Pure Component: `reactful pc ComponentName`
67+
- Create a New Function Component: `reactful fc ComponentName`
6168

69+
All of these commands will also create a jest snapshot test for the generated
70+
component.
6271

6372
### License
6473

‎packages/reactful-main/bin/reactful.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,10 @@ async function main() {
5050

5151
const [firstArg, secondArg] = process.argv.slice(2);
5252

53-
if (firstArg === 'jt') {
54-
console.info(`Testing - ${new Date()}`);
55-
return;
56-
}
53+
// if (firstArg === 'jt') {
54+
// console.info(`Testing - ${new Date()}`);
55+
// return;
56+
// }
5757

5858
if (firstArg === 'init') {
5959
config.appPath = '.';

‎packages/reactful-main/lib/dependencies.json‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,42 @@
11
{
22
"main": [
3-
"babel-cli",
3+
"@babel/cli",
4+
"@babel/core",
5+
"@babel/plugin-proposal-class-properties",
6+
"@babel/preset-env",
7+
"@babel/preset-react",
48
"babel-loader",
5-
"babel-polyfill",
6-
"babel-preset-env",
7-
"babel-preset-react",
8-
"babel-preset-stage-2",
99
"body-parser",
10-
"css-loader",
1110
"cross-env",
11+
"css-loader",
1212
"ejs",
13-
"express",
13+
"express@4",
14+
"mini-css-extract-plugin",
1415
"morgan",
16+
"node-sass",
1517
"pm2",
16-
"react",
17-
"react-dom",
18+
"react@16",
19+
"react-dom@16",
20+
"regenerator-runtime",
21+
"sass-loader",
1822
"serialize-javascript",
1923
"style-loader",
20-
"sass-loader",
21-
"node-sass",
22-
"webpack",
24+
"webpack@4",
2325
"webpack-chunk-hash",
24-
"extract-text-webpack-plugin"
26+
"webpack-cli"
2527
],
2628
"dev": [
29+
"@babel/node",
30+
"babel-core@^7.0.0-bridge",
31+
"babel-jest",
2732
"babel-eslint",
28-
"babel-watch",
2933
"concurrently",
3034
"eslint",
3135
"eslint-plugin-react",
3236
"jest",
37+
"nodemon",
38+
"prettier-eslint-cli",
3339
"react-test-renderer",
34-
"reactful-commands",
35-
"prettier-eslint-cli"
40+
"reactful-commands"
3641
]
3742
}

‎packages/reactful-main/lib/init.js‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,39 @@ module.exports = function reactfulInit(config) {
88
const {appName, appPath} = config;
99
const packageJson = {
1010
name: appName,
11-
version: '0.1.0',
11+
version: '1.0.0',
1212
private: true,
1313
scripts: {
1414
eslint: 'eslint "src/**/*.js"',
15-
format:
16-
'prettier-eslint "src/**/*.js" "src/**/*.scss" --write --trailing-comma es5',
15+
format: 'prettier-eslint "src/**/*.js" "src/**/*.scss" --write',
1716
dev:
18-
'cross-env NODE_PATH=./src babel-watch src/server/server.js -x .reactful.json',
17+
'cross-env NODE_PATH=./src nodemon --exec "babel-node src/server/server.js" --ignore .reactful.json --ignore public/',
1918
webpack: 'webpack -wd',
2019
start: `concurrently "${pmCommand} run webpack" "${pmCommand} run dev"`,
2120
test: 'jest',
2221
'verify-tests': 'jest --coverage',
2322
'build-react': 'cross-env NODE_ENV=production webpack --progress -p',
24-
'build-node': 'babel src -d build --copy-files',
23+
'build-node':
24+
'babel src -d build --config-file ./.babelrc.node --copy-files',
2525
build: `${pmCommand} install && ${pmCommand} run build-react && ${pmCommand} run build-node`,
26-
prod: `cross-env NODE_ENV=production NODE_PATH=./build pm2 start -i max build/server/server.js --update-env --name ${appName}Prod`,
26+
'prod-start': `cross-env NODE_ENV=production NODE_PATH=./build pm2 start -i max build/server/server.js --update-env --name ${appName}Prod`,
2727
'prod-stop': `pm2 stop ${appName}Prod`,
2828
'prod-reload': `pm2 reload --update-env ${appName}Prod`,
29-
'prod-logs': `pm2 logs ${appName}Prod`,
30-
_reactful_commands: '_reactful_commands'
31-
},
32-
babel: {
33-
presets: ['react', ['env', {targets: {node: 'current'}}], 'stage-2']
29+
'prod-logs': `pm2 logs --update-env ${appName}Prod`,
30+
_reactful_commands: '_reactful_commands',
3431
},
3532
jest: {
3633
modulePaths: ['./src'],
37-
testPathIgnorePatterns: ['/node_modules/']
38-
}
34+
testPathIgnorePatterns: ['/node_modules/'],
35+
},
3936
};
4037

38+
const reactfulJson = {
39+
main: ['main.css', 'main.js'],
40+
vendor: 'vendor.js',
41+
};
42+
43+
// TODO: Use promise.all for file writes
4144
fs.writeFileSync(
4245
path.resolve(appPath, 'package.json'),
4346
JSON.stringify(packageJson, null, 2)
@@ -48,12 +51,7 @@ module.exports = function reactfulInit(config) {
4851
'node_modules/\npublic/bundles/\nbuild/\ncoverage/\n.reactful.json\n.env\n.vscode/'
4952
);
5053

51-
const reactfulJson = {
52-
main: 'main.js',
53-
styles: 'styles.js',
54-
vendor: 'vendor.js'
55-
};
56-
54+
// TODO: fix race condition
5755
fs.writeFileSync(
5856
path.resolve(appPath, '.reactful.json'),
5957
JSON.stringify(reactfulJson, null, 2)
@@ -75,7 +73,7 @@ module.exports = function reactfulInit(config) {
7573
{
7674
shell: true,
7775
stdio: 'inherit',
78-
cwd: path.resolve(appPath)
76+
cwd: path.resolve(appPath),
7977
}
8078
);
8179

‎packages/reactful-main/template/.babelrc‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"presets": [
3+
"@babel/react",
4+
[
5+
"@babel/env",
6+
{
7+
"targets": "> 0.25%, not dead"
8+
}
9+
]
10+
],
11+
"plugins": [["@babel/plugin-proposal-class-properties", {"loose": true}]]
12+
}

‎packages/reactful-main/template/.babelrc.node‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"presets": [
3+
"@babel/react",
4+
[
5+
"@babel/env",
6+
{
7+
"targets": {
8+
"node": "current"
9+
}
10+
}
11+
]
12+
],
13+
"plugins": [["@babel/plugin-proposal-class-properties", {"loose": true}]]
14+
}

‎packages/reactful-main/template/.prettierrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"bracketSpacing": false,
3+
"singleQuote": true,
4+
"jsxBracketSameLine": true,
5+
"trailingComma": "es5",
6+
"printWidth": 80,
7+
"proseWrap": "always"
8+
}

‎packages/reactful-main/template/src/components/__snapshots__/App.test.js.snap‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
exports[`App renders correctly 1`] = `
44
<div>
5-
<h1>TEST</h1>
5+
<h1>
6+
TEST
7+
</h1>
68
Awesome App Here...
79
</div>
810
`;

‎packages/reactful-main/template/src/renderers/dom.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1+
import 'regenerator-runtime/runtime';
12
import React from 'react';
23
import ReactDOM from 'react-dom';
34

45
import App from 'components/App';
56

6-
if (process.env.NODE_ENV !== 'production') {
7-
require('../styles/index.scss');
8-
}
7+
require('../styles/index.scss');
98

109
ReactDOM.hydrate(
1110
<App initialData={window.__R_DATA.initialData} />,

0 commit comments

Comments
 (0)