Export functionality in place for components separately or components and application config files

src/actions/components.js

@@ -145,13 +145,15 @@ export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch
   });
 };
 
-export const exportFiles = ({ components, path }) => (dispatch) => {
+export const exportFiles = ({
+  components, path, appName, exportAppBool,
+}) => (dispatch) => {
   // this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
   dispatch({
     type: EXPORT_FILES,
   });
 
-  createFiles(components, path)
+  createFiles(components, path, appName, exportAppBool)
     .then(dir => dispatch({
       type: EXPORT_FILES_SUCCESS,
       payload: { status: true, dir: dir[0] },
@@ -186,23 +188,41 @@ export const createApplication = ({
   components = [],
   genOption,
   appName = 'reactype_app',
+  exportAppBool,
 }) => (dispatch) => {
   if (genOption === 0) {
-    dispatch(exportFiles({ path, components }));
+    exportAppBool = false;
+    dispatch(
+      exportFiles({
+        appName,
+        path,
+        components,
+        exportAppBool,
+      }),
+    );
   } else if (genOption) {
+    exportAppBool = true;
     dispatch({
       type: CREATE_APPLICATION,
     });
     createApplicationUtil({
       path,
       appName,
       genOption,
+      exportAppBool,
     })
       .then(() => {
         dispatch({
           type: CREATE_APPLICATION_SUCCESS,
         });
-        dispatch(exportFiles({ path: `${path}/${appName}`, components }));
+        dispatch(
+          exportFiles({
+            appName,
+            path,
+            components,
+            exportAppBool,
+          }),
+        );
       })
       .catch(err => dispatch({
         type: CREATE_APPLICATION_ERROR,

src/containers/MainContainer.jsx

@@ -15,7 +15,6 @@ import {
   deleteChild,
   deleteComponent,
   createApplication,
-  changeImagePath,
 } from '../actions/components';
 import KonvaStage from '../components/KonvaStage.jsx';
 import MainContainerHeader from '../components/MainContainerHeader.jsx';
@@ -114,6 +113,23 @@ class MainContainer extends Component {
   //   IPC.send('update-file');
   // };
 
+  // deleteImage = () => {
+  //   this.props.changeImagePath('');
+  //   this.setState({ image: '' });
+  // };
+
+  closeModal = () => this.setState({ modal: null });
+
+  chooseAppDir = () => IPC.send('choose_app_dir');
+
+  // toggleDrag = () => {
+  //   this.props.toggleComponetDragging(this.state.draggable);
+  //   this.setState({
+  //     toggleClass: !this.state.toggleClass,
+  //     draggable: !this.state.draggable,
+  //   });
+  // };
+
   // showImageDeleteModal = () => {
   //   const { closeModal, deleteImage } = this;
   //   this.setState({
@@ -129,15 +145,6 @@ class MainContainer extends Component {
   //   });
   // };
 
-  // deleteImage = () => {
-  //   this.props.changeImagePath('');
-  //   this.setState({ image: '' });
-  // };
-
-  closeModal = () => this.setState({ modal: null });
-
-  chooseAppDir = () => IPC.send('choose_app_dir');
-
   chooseGenOptions = (genOption) => {
     // set option
     this.setState({ genOption });
@@ -189,7 +196,7 @@ class MainContainer extends Component {
       deleteComponent,
       stateComponents,
     } = this.props;
-    const { main, showImageDeleteModal, showGenerateAppModal } = this;
+    const { main, showGenerateAppModal } = this;
     const cursor = this.state.draggable ? 'move' : 'default';
 
     // show a string of all direct parents. SO the user can gaze at it.

src/utils/createApplication.util.js

@@ -9,82 +9,204 @@
 
 import fs from 'fs';
 import { format } from 'prettier';
+import componentRender from './componentRender.util';
 
-function createIndexHtml() {
-  const fileName = 'index.html';
+function createIndexHtml(path, appName) {
+  let dir = path;
+  let dirSrc;
+  let dirComponent;
+  if (!dir.match(/`${appName}`|\*$/)) {
+    dir = `${dir}/${appName}`;
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir);
+      dirSrc = `${dir}/src`;
+      fs.mkdirSync(dirSrc);
+      dirComponent = `${dirSrc}/components`;
+      fs.mkdirSync(dirComponent);
+    }
+  }
+
+  const filePath = `${dir}/index.html`;
   const data = `
-  <!DOCTYPE html>
-  <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-  </head>
-  <body>
-    <div id='root'></div>
-    <script src='bundle.js'></script>
-  </body>
-  </html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+  <div id='root'></div>
+  <script src='bundle.js'></script>
+</body>
+</html>
   `;
-  fs.writeFile(
-    fileName,
-    format(data, {
-      singleQuote: true,
-      trailingComma: 'es5',
-      bracketSpacing: true,
-      jsxBracketSameLine: true,
-      parser: 'babel',
-    }),
-    (err) => {
-      if (err) {
-        console.log('index.html error:', err.message);
-      } else {
-        console.log('index.html written successfully');
-      }
-    },
-  );
+  fs.writeFileSync(filePath, data, (err) => {
+    if (err) {
+      console.log('index.html error:', err.message);
+    } else {
+      console.log('index.html written successfully');
+    }
+  });
 }
 
-async function createApplicationUtil({ path, appName, genOption }) {
-  if (genOption === 1) {
-    await createIndexHtml();
+export const createIndexTsx = (path, appName) => {
+  const filePath = `${path}/${appName}/index.tsx`;
+  const data = `
+import React from 'react';
+import ReactDOM form 'react-dom'
+
+export default function App(): JSX.Element {
+  const greeting = (a: string, b: string): string => a + b;
+  return (
+    <h1>{greeting('hello ', 'world')}</h1>
+    )
   }
-}
-export default createApplicationUtil;
 
-// async function createApplicationUtil({
-//   path, appName, genOption
-// }) {
-//   if (genOption === 1) {
-//     return [
-//       await execFile('npm', ['init', '-y'], { cwd: path }),
-//       await execFile('touch', 'index.tsx', { cwd: path }),
-//       await execFile('touch', 'index.html', { cwd: path }),
-//       await execFile('touch', 'webpack.config.js', { cwd: path }),
-//       await execFile('touch', '.babelrc', { cwd: path }),
-//     ];
-//   }
-// }
+const root = document.getElementById('root')
+
+ReactDOM.render(<App />, root)
+  `;
+  fs.writeFile(filePath, data, (err) => {
+    if (err) {
+      console.log('index.tsx error:', err.message);
+    } else {
+      console.log('index.tsx written successfully');
+    }
+  });
+};
 
-// import util from 'util';
+export const createPackage = (path, appName) => {
+  const filePath = `${path}/${appName}/package.json`;
+  const data = `
+{
+  "name": "reacType-boiler-plate",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.tsx",
+  "scripts": {
+    "start": "webpack-dev-server --open",
+    "build": "webpack"
+},
+"keywords": [],
+"author": "",
+"license": "ISC",
+"depenencies": {
+  "react": "^16.4.1",
+  "react-dom": "^16.4.1",
+},
+"devDependencies": {
+  "@babel/preset-typescript": "^7.3.3",
+  "@types/react": "^16.8.14",
+  "@types/react-dom": "^16.8.4",
+  "babel-core": "^6.26.3",
+  "babel-eslint": "^8.2.6",
+  "babel-loader": "^7.1.4",
+  "babel-preset-env": "^1.6.1",
+  "babel-preset-react": "^6.24.1",
+  "typescript": "^3.4.4",
+  "webpack": "^4.4.0",
+  "webpack-cli": "^3.3.0",
+  "webpack-dev-server": "^3.3.1"
+  } 
+}
+  `;
+  fs.writeFile(filePath, data, (err) => {
+    if (err) {
+      console.log('package.json error:', err.message);
+    } else {
+      console.log('package.json written successfully');
+    }
+  });
+};
 
-// const execFile = util.promisify(require('child_process').execFile);
+export const createWebpack = (path, appName) => {
+  const filePath = `${path}/${appName}/webpack.config.js`;
+  const data = `
+const path = require('path');
+const rules = [
+  {
+    test: /\.tsx?/,
+    exclude: /node_modules/,
+    loader: 'babel-loader'
+  }
+]
 
-// Application generation options
-// cosnt genOptions = [
-//   'Export into existing project.', 'Export with starter repo', 'Export with create-react-app.'
-// ];
+module.exports = {
+  target: 'web',
+  mode: 'development',
+  entry: './index.tsx',
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: 'bundle.js'
+  },
+  module: { rules },
+  resolve: {extensions: ['.ts', '.txs', '.js', 'jsx.']},
+  devServer: {
+    contentBase: './',
+    port: 5000
+  }
+}
+  `;
+  fs.writeFile(filePath, data, (err) => {
+    if (err) {
+      console.log('webpack error:', err.message);
+    } else {
+      console.log('webpack written successfully');
+    }
+  });
+};
+
+export const createBabel = (path, appName) => {
+  const filePath = `${path}/${appName}/.babelrc`;
+  const data = `
+{
+  "presets": ["@babel/env", "@babel/react", "@babel/typescript"]
+}
+`;
+  fs.writeFile(filePath, data, (err) => {
+    if (err) {
+      console.log('babelrc error:', err.message);
+    } else {
+      console.log('babelrc written successfully');
+    }
+  });
+};
 
-// async function createApplicationUtil({
-//   path, appName, genOption
-// }) {
-//   if (genOption === 2) {
-//     return [
-//       await execFile('npm', ['i', '-g', 'create-react-app'], { cwd: path }),
-//       await execFile('create-react-app', [appName], { cwd: path }),
-//     ];
-//   }
-// }
+export const createTsConfig = (path, appName) => {
+  const filePath = `${path}/${appName}/tsconfig.json`;
+  const data = `
+{
+  "compilerOptions": {
+    "outDir": "./build/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es6",
+    "jsx": "react"
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
+`;
+  fs.writeFile(filePath, data, (err) => {
+    if (err) {
+      console.log('TSConfig error:', err.message);
+    } else {
+      console.log('TSConfig written successfully');
+    }
+  });
+};
 
-// export default createApplicationUtil;
+async function createApplicationUtil({ path, appName, genOption }) {
+  if (genOption === 1) {
+    await createIndexHtml(path, appName);
+    await createIndexTsx(path, appName);
+    await createPackage(path, appName);
+    await createWebpack(path, appName);
+    await createBabel(path, appName);
+    await createTsConfig(path, appName);
+  }
+}
+export default createApplicationUtil;