Skip to content

Commit 50076fc

Browse files
ChristianEdwardPadillaChristianEdwardPadilla
committed
Merge branch 'development' of https://github.com/team-reactype/ReacType into development
2 parents 2dafabc + bc92e8d commit 50076fc

File tree

4 files changed

+272
-89
lines changed

4 files changed

+272
-89
lines changed

‎src/actions/components.js

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -145,13 +145,15 @@ export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch
145145
});
146146
};
147147

148-
export const exportFiles = ({ components, path }) => (dispatch) => {
148+
export const exportFiles = ({
149+
components, path, appName, exportAppBool,
150+
}) => (dispatch) => {
149151
// this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
150152
dispatch({
151153
type: EXPORT_FILES,
152154
});
153155

154-
createFiles(components, path)
156+
createFiles(components, path, appName, exportAppBool)
155157
.then(dir => dispatch({
156158
type: EXPORT_FILES_SUCCESS,
157159
payload: { status: true, dir: dir[0] },
@@ -186,23 +188,41 @@ export const createApplication = ({
186188
components = [],
187189
genOption,
188190
appName = 'reactype_app',
191+
exportAppBool,
189192
}) => (dispatch) => {
190193
if (genOption === 0) {
191-
dispatch(exportFiles({ path, components }));
194+
exportAppBool = false;
195+
dispatch(
196+
exportFiles({
197+
appName,
198+
path,
199+
components,
200+
exportAppBool,
201+
}),
202+
);
192203
} else if (genOption) {
204+
exportAppBool = true;
193205
dispatch({
194206
type: CREATE_APPLICATION,
195207
});
196208
createApplicationUtil({
197209
path,
198210
appName,
199211
genOption,
212+
exportAppBool,
200213
})
201214
.then(() => {
202215
dispatch({
203216
type: CREATE_APPLICATION_SUCCESS,
204217
});
205-
dispatch(exportFiles({ path: `${path}/${appName}`, components }));
218+
dispatch(
219+
exportFiles({
220+
appName,
221+
path,
222+
components,
223+
exportAppBool,
224+
}),
225+
);
206226
})
207227
.catch(err => dispatch({
208228
type: CREATE_APPLICATION_ERROR,

‎src/containers/MainContainer.jsx

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
deleteChild,
1616
deleteComponent,
1717
createApplication,
18-
changeImagePath,
1918
} from '../actions/components';
2019
import KonvaStage from '../components/KonvaStage.jsx';
2120
import MainContainerHeader from '../components/MainContainerHeader.jsx';
@@ -114,6 +113,23 @@ class MainContainer extends Component {
114113
// IPC.send('update-file');
115114
// };
116115

116+
// deleteImage = () => {
117+
// this.props.changeImagePath('');
118+
// this.setState({ image: '' });
119+
// };
120+
121+
closeModal = () => this.setState({ modal: null });
122+
123+
chooseAppDir = () => IPC.send('choose_app_dir');
124+
125+
// toggleDrag = () => {
126+
// this.props.toggleComponetDragging(this.state.draggable);
127+
// this.setState({
128+
// toggleClass: !this.state.toggleClass,
129+
// draggable: !this.state.draggable,
130+
// });
131+
// };
132+
117133
// showImageDeleteModal = () => {
118134
// const { closeModal, deleteImage } = this;
119135
// this.setState({
@@ -129,15 +145,6 @@ class MainContainer extends Component {
129145
// });
130146
// };
131147

132-
// deleteImage = () => {
133-
// this.props.changeImagePath('');
134-
// this.setState({ image: '' });
135-
// };
136-
137-
closeModal = () => this.setState({ modal: null });
138-
139-
chooseAppDir = () => IPC.send('choose_app_dir');
140-
141148
chooseGenOptions = (genOption) => {
142149
// set option
143150
this.setState({ genOption });
@@ -189,7 +196,7 @@ class MainContainer extends Component {
189196
deleteComponent,
190197
stateComponents,
191198
} = this.props;
192-
const { main, showImageDeleteModal, showGenerateAppModal } = this;
199+
const { main, showGenerateAppModal } = this;
193200
const cursor = this.state.draggable ? 'move' : 'default';
194201

195202
// show a string of all direct parents. SO the user can gaze at it.

‎src/utils/createApplication.util.js

Lines changed: 189 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -9,82 +9,204 @@
99

1010
import fs from 'fs';
1111
import { format } from 'prettier';
12+
import componentRender from './componentRender.util';
1213

13-
function createIndexHtml() {
14-
const fileName = 'index.html';
14+
function createIndexHtml(path, appName) {
15+
let dir = path;
16+
let dirSrc;
17+
let dirComponent;
18+
if (!dir.match(/`${appName}`|\*$/)) {
19+
dir = `${dir}/${appName}`;
20+
if (!fs.existsSync(dir)) {
21+
fs.mkdirSync(dir);
22+
dirSrc = `${dir}/src`;
23+
fs.mkdirSync(dirSrc);
24+
dirComponent = `${dirSrc}/components`;
25+
fs.mkdirSync(dirComponent);
26+
}
27+
}
28+
29+
const filePath = `${dir}/index.html`;
1530
const data = `
16-
<!DOCTYPE html>
17-
<html lang="en">
18-
<head>
19-
<meta charset="UTF-8">
20-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
21-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
22-
<title>Document</title>
23-
</head>
24-
<body>
25-
<div id='root'></div>
26-
<script src='bundle.js'></script>
27-
</body>
28-
</html>
31+
<!DOCTYPE html>
32+
<html lang="en">
33+
<head>
34+
<meta charset="UTF-8">
35+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
36+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
37+
<title>Document</title>
38+
</head>
39+
<body>
40+
<div id='root'></div>
41+
<script src='bundle.js'></script>
42+
</body>
43+
</html>
2944
`;
30-
fs.writeFile(
31-
fileName,
32-
format(data, {
33-
singleQuote: true,
34-
trailingComma: 'es5',
35-
bracketSpacing: true,
36-
jsxBracketSameLine: true,
37-
parser: 'babel',
38-
}),
39-
(err) => {
40-
if (err) {
41-
console.log('index.html error:', err.message);
42-
} else {
43-
console.log('index.html written successfully');
44-
}
45-
},
46-
);
45+
fs.writeFileSync(filePath, data, (err) => {
46+
if (err) {
47+
console.log('index.html error:', err.message);
48+
} else {
49+
console.log('index.html written successfully');
50+
}
51+
});
4752
}
4853

49-
async function createApplicationUtil({ path, appName, genOption }) {
50-
if (genOption === 1) {
51-
await createIndexHtml();
54+
export const createIndexTsx = (path, appName) => {
55+
const filePath = `${path}/${appName}/index.tsx`;
56+
const data = `
57+
import React from 'react';
58+
import ReactDOM form 'react-dom'
59+
60+
export default function App(): JSX.Element {
61+
const greeting = (a: string, b: string): string => a + b;
62+
return (
63+
<h1>{greeting('hello ', 'world')}</h1>
64+
)
5265
}
53-
}
54-
export default createApplicationUtil;
5566
56-
// async function createApplicationUtil({
57-
// path, appName, genOption
58-
// }) {
59-
// if (genOption === 1) {
60-
// return [
61-
// await execFile('npm', ['init', '-y'], { cwd: path }),
62-
// await execFile('touch', 'index.tsx', { cwd: path }),
63-
// await execFile('touch', 'index.html', { cwd: path }),
64-
// await execFile('touch', 'webpack.config.js', { cwd: path }),
65-
// await execFile('touch', '.babelrc', { cwd: path }),
66-
// ];
67-
// }
68-
// }
67+
const root = document.getElementById('root')
68+
69+
ReactDOM.render(<App />, root)
70+
`;
71+
fs.writeFile(filePath, data, (err) => {
72+
if (err) {
73+
console.log('index.tsx error:', err.message);
74+
} else {
75+
console.log('index.tsx written successfully');
76+
}
77+
});
78+
};
6979

70-
// import util from 'util';
80+
export const createPackage = (path, appName) => {
81+
const filePath = `${path}/${appName}/package.json`;
82+
const data = `
83+
{
84+
"name": "reacType-boiler-plate",
85+
"version": "1.0.0",
86+
"description": "",
87+
"main": "index.tsx",
88+
"scripts": {
89+
"start": "webpack-dev-server --open",
90+
"build": "webpack"
91+
},
92+
"keywords": [],
93+
"author": "",
94+
"license": "ISC",
95+
"depenencies": {
96+
"react": "^16.4.1",
97+
"react-dom": "^16.4.1",
98+
},
99+
"devDependencies": {
100+
"@babel/preset-typescript": "^7.3.3",
101+
"@types/react": "^16.8.14",
102+
"@types/react-dom": "^16.8.4",
103+
"babel-core": "^6.26.3",
104+
"babel-eslint": "^8.2.6",
105+
"babel-loader": "^7.1.4",
106+
"babel-preset-env": "^1.6.1",
107+
"babel-preset-react": "^6.24.1",
108+
"typescript": "^3.4.4",
109+
"webpack": "^4.4.0",
110+
"webpack-cli": "^3.3.0",
111+
"webpack-dev-server": "^3.3.1"
112+
}
113+
}
114+
`;
115+
fs.writeFile(filePath, data, (err) => {
116+
if (err) {
117+
console.log('package.json error:', err.message);
118+
} else {
119+
console.log('package.json written successfully');
120+
}
121+
});
122+
};
71123

72-
// const execFile = util.promisify(require('child_process').execFile);
124+
export const createWebpack = (path, appName) => {
125+
const filePath = `${path}/${appName}/webpack.config.js`;
126+
const data = `
127+
const path = require('path');
128+
const rules = [
129+
{
130+
test: /\.tsx?/,
131+
exclude: /node_modules/,
132+
loader: 'babel-loader'
133+
}
134+
]
73135
74-
// Application generation options
75-
// cosnt genOptions = [
76-
// 'Export into existing project.', 'Export with starter repo', 'Export with create-react-app.'
77-
// ];
136+
module.exports = {
137+
target: 'web',
138+
mode: 'development',
139+
entry: './index.tsx',
140+
output: {
141+
path: path.resolve(__dirname, 'build'),
142+
filename: 'bundle.js'
143+
},
144+
module: { rules },
145+
resolve: {extensions: ['.ts', '.txs', '.js', 'jsx.']},
146+
devServer: {
147+
contentBase: './',
148+
port: 5000
149+
}
150+
}
151+
`;
152+
fs.writeFile(filePath, data, (err) => {
153+
if (err) {
154+
console.log('webpack error:', err.message);
155+
} else {
156+
console.log('webpack written successfully');
157+
}
158+
});
159+
};
160+
161+
export const createBabel = (path, appName) => {
162+
const filePath = `${path}/${appName}/.babelrc`;
163+
const data = `
164+
{
165+
"presets": ["@babel/env", "@babel/react", "@babel/typescript"]
166+
}
167+
`;
168+
fs.writeFile(filePath, data, (err) => {
169+
if (err) {
170+
console.log('babelrc error:', err.message);
171+
} else {
172+
console.log('babelrc written successfully');
173+
}
174+
});
175+
};
78176

79-
// async function createApplicationUtil({
80-
// path, appName, genOption
81-
// }) {
82-
// if (genOption === 2) {
83-
// return [
84-
// await execFile('npm', ['i', '-g', 'create-react-app'], { cwd: path }),
85-
// await execFile('create-react-app', [appName], { cwd: path }),
86-
// ];
87-
// }
88-
// }
177+
export const createTsConfig = (path, appName) => {
178+
const filePath = `${path}/${appName}/tsconfig.json`;
179+
const data = `
180+
{
181+
"compilerOptions": {
182+
"outDir": "./build/",
183+
"sourceMap": true,
184+
"noImplicitAny": true,
185+
"module": "commonjs",
186+
"target": "es6",
187+
"jsx": "react"
188+
},
189+
"include": ["**/*.ts", "**/*.tsx"],
190+
"exclude": ["node_modules"]
191+
}
192+
`;
193+
fs.writeFile(filePath, data, (err) => {
194+
if (err) {
195+
console.log('TSConfig error:', err.message);
196+
} else {
197+
console.log('TSConfig written successfully');
198+
}
199+
});
200+
};
89201

90-
// export default createApplicationUtil;
202+
async function createApplicationUtil({ path, appName, genOption }) {
203+
if (genOption === 1) {
204+
await createIndexHtml(path, appName);
205+
await createIndexTsx(path, appName);
206+
await createPackage(path, appName);
207+
await createWebpack(path, appName);
208+
await createBabel(path, appName);
209+
await createTsConfig(path, appName);
210+
}
211+
}
212+
export default createApplicationUtil;

0 commit comments

Comments
 (0)