react-ts-app - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

bin/react-ts-app.js

 #!/usr/bin/env node
 
-const fs = require('fs-extra');
-const path = require('path');
-const { exec } = require('child_process');
+const buildPackageJson = require('./utils/buildPackageJson');
+const copyAppFolders = require('./utils/copyAppFolders');
+const executeCommand = require('./utils/executeCommand');
+const writeAppFiles = require('./utils/writeAppFiles');
+const writePackageJson = require('./utils/writePackageJson');
 
-const packageJson = require('../package.json');
-const filesToCopy = ['.babelrc', 'index.tsx', 'tsconfig.json'];
-const foldersToCopy = ['configs', 'public', 'src'];
+const targetFolder = process.argv[2];
 
-// create folder and initialize npm
-exec(`mkdir ${process.argv[2]} && cd ${process.argv[2]}`,
-  (initErr, initStdout, initStderr) => {
-    if (initErr) {
-      console.error(`Everything was fine, then it wasn't: ${initErr}`);
-      return;
-    }
+const folderInitCommand = `mkdir ${targetFolder} && cd ${targetFolder}`;
+const npmInitCommand = `cd ${targetFolder} && npm install`;
 
+executeCommand(folderInitCommand, 'folder')
+  .then(() => {
     // replace the default scripts, with the webpack scripts in package.json
-    let newPckJson = {...packageJson};
-    newPckJson.name = process.argv[2];
-    newPckJson.version = "1.0.0";
-    delete newPckJson.homepage;
-    delete newPckJson.repository;
-    delete newPckJson.keywords;
-    delete newPckJson.author;
-    delete newPckJson.license;
-    delete newPckJson.bugs;
-    delete newPckJson.bin;
-    delete newPckJson.dependencies["fs-extra"];
-    const data = JSON.stringify(newPckJson, null, "\t");
-    fs.writeFile(`${process.argv[2]}/package.json`, data, err2 => err2 || true);
+    const packageJson = buildPackageJson();
+    writePackageJson(packageJson);
 
-    // Create .gitignore
-    fs.writeFile(`${process.argv[2]}/.gitignore`, 'node_modules', err2 => err2 || true)
+    writeAppFiles();
+    copyAppFolders();
 
-    for (let i = 0; i < filesToCopy.length; i += 1) {
-      fs.createReadStream(path.join(__dirname, `../${filesToCopy[i]}`))
-        .pipe(fs.createWriteStream(`${process.argv[2]}/${filesToCopy[i]}`));
-    }
-    for (let i = 0; i < foldersToCopy.length; i++) {
-      fs.copy(path.join(__dirname, '../' + foldersToCopy[i]), `${process.argv[2]}/${foldersToCopy[i]}`)
-        .then(() => console.log(`${foldersToCopy[i]} copied ${process.argv[2]} folder`))
-        .catch(err => console.error(err));
-    }
-  
     // installing dependencies
-    exec(`cd ${process.argv[2]} && npm install`,
-      (npmErr, npmStdout, npmStderr) => {
-        if (npmErr) {
-          console.error(`it's always npm, ain't it? ${npmErr}`);
-          return;
-        }
-        console.log("Everything ok");
-      },
-    );
-  },
-);
+    return executeCommand(npmInitCommand, 'npm');
+  })
+  .then(() => {
+    console.log('Everything ok');
+  })
+  .catch((err) => {
+    console.error(`Everything was fine, then it wasn't: ${err}`);
+  });

configs/webpack/common.js

 // shared config (dev and prod)
-const {resolve} = require('path');
-const {CheckerPlugin} = require('awesome-typescript-loader');
+const { resolve } = require('path');
+const { CheckerPlugin } = require('awesome-typescript-loader');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
@@ -9,3 +9,3 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
   resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    extensions: ['.ts', '.tsx', '.js', '.jsx']
   },
@@ -18,11 +18,14 @@ context: resolve(__dirname, '../../'),
         use: ['babel-loader', 'source-map-loader'],
-        exclude: /node_modules/,
+        exclude: /node_modules/
       },
       {
         test: /\.tsx?$/,
-        use: ['babel-loader', 'awesome-typescript-loader'],
+        use: ['babel-loader', 'awesome-typescript-loader']
       },
       {
         test: /\.css$/,
-        use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }],
+        use: [
+          'style-loader',
+          { loader: 'css-loader', options: { importLoaders: 1 } }
+        ]
       },
@@ -34,4 +37,4 @@ {
           { loader: 'css-loader', options: { importLoaders: 1 } },
-          'sass-loader',
-        ],
+          'sass-loader'
+        ]
       },
@@ -42,6 +45,6 @@ {
           'file-loader?hash=sha512&digest=hex&name=img/[hash].[ext]',
-          'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
-        ],
-      },
-    ],
+          'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false'
+        ]
+      }
+    ]
   },
@@ -51,11 +54,11 @@ plugins: [
     new StyleLintPlugin(),
-    new HtmlWebpackPlugin({template: './public/index.html',}),
+    new HtmlWebpackPlugin({ template: './public/index.html' })
   ],
   externals: {
-    'react': 'React',
-    'react-dom': 'ReactDOM',
+    react: 'React',
+    'react-dom': 'ReactDOM'
   },
   performance: {
-    hints: false,
-  },
-};
+    hints: false
+  }
+};

configs/webpack/dev.js

@@ -10,3 +10,3 @@ // development config
     'react-hot-loader/patch', // activate HMR for React
-    'webpack-dev-server/client?http://localhost:8080',// bundle the client for webpack-dev-server and connect to the provided endpoint
+    'webpack-dev-server/client?http://localhost:8080', // bundle the client for webpack-dev-server and connect to the provided endpoint
     'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
@@ -16,3 +16,3 @@ './index.tsx' // the entry point of our app
   devServer: {
-    hot: true, // enable HMR on the server
+    hot: true // enable HMR on the server
   },
@@ -22,4 +22,4 @@ devtool: 'cheap-module-eval-source-map',
     new webpack.HotModuleReplacementPlugin(), // enable HMR globally
-    new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates
-  ],
-});
+    new webpack.NamedModulesPlugin() // prints more readable module names in the browser console on HMR updates
+  ]
+});

configs/webpack/prod.js

 // production config
 const merge = require('webpack-merge');
-const {resolve} = require('path');
+const { resolve } = require('path');
 
@@ -13,6 +13,6 @@ const commonConfig = require('./common');
     path: resolve(__dirname, '../../dist'),
-    publicPath: '/',
+    publicPath: '/'
   },
   devtool: 'source-map',
-  plugins: [],
-});
+  plugins: []
+});

package.json

 {
   "name": "react-ts-app",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/mbrn/react-ts-app#readme",

No alert changes

Improved metrics

Total package byte prevSize

12219

increased by7.52%

Number of package files

19

increased by35.71%

Lines of code

232

increased by23.4%

Worsened metrics

Number of low supply chain risk alerts

3

increased by200%

No dependency changes