Introduce "output" directory flag

Author: scriptex

.codebeatsettings

@@ -0,0 +1,18 @@
+{
+	"JAVASCRIPT": {
+		"ARITY": [
+			8,
+			10,
+			14,
+			20
+		]
+	},
+	"TYPESCRIPT": {
+		"ARITY": [
+			8,
+			10,
+			14,
+			20
+		]
+	}
+}

.github/workflows/test.yml

@@ -8,7 +8,7 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [14.x, 16.x]
+                node-version: [18.x]
 
         steps:
             - uses: actions/checkout@v3

.npmignore

@@ -21,6 +21,7 @@ Thumbs.db
 .github
 _config.yml
 _.config.yml
+.codebeatsettings
 .editorconfig
 .gitattributes
 .gitignore

README.md

@@ -73,6 +73,14 @@ This path is relative to the folder you are located in. It is recommended that t
 
 If the `launch` argument is not provided, the [default launch screen](https://github.com/scriptex/create-pwa/blob/master/launch.png) is used.
 
+3. `output`: Specifies a relative path to the output directory.
+
+This path is relative to the folder you are located in.
+
+**The `output` argument is not required.**
+
+If the `output` argument is not provided, the default value for it is empty string (the root of your project or the location of your `package.json` file).
+
 ## Usage
 
 If you want to use if from the command line, you should first install Create PWA globally:
@@ -122,15 +130,15 @@ When the files(`manifest.json` and `service-worker.js`) are ready for production
 
 Feel adviced to edit the content of the `<TileColor>` tag in the `config.xml` file as it matches the color of your application's status bar on Chrome (found in the `<meta name="color" />` tag);
 
-1.  Add the following to the `head` of your HTML file(s):
+1. Add the following to the `head` of your HTML file(s):
 
 ```html
 <link rel="manifest" href="manifest.json" />
 ```
 
 You can read more about the Web App Manifest [here](https://developers.google.com/web/fundamentals/web-app-manifest/).
 
-2.  Add the following snippet to your application's JavaScript bundle or place it in a `script` tag just before the closing `</body>` tag in your HTML file(s):
+2. Add the following snippet to your application's JavaScript bundle or place it in a `script` tag just before the closing `</body>` tag in your HTML file(s):
 
 ```javascript
 if ('serviceWorker' in navigator) {
@@ -477,8 +485,9 @@ You can generate each of the components above separately using the Create PWA AP
 ```javascript
 const { setAppCache } = require('create-pwa');
 const appName = 'Your application name';
+const distFolder = 'dist';
 
-setAppCache(appName);
+setAppCache(appName, distFolder);
 ```
 
 **The generated `appcache` file contains references to the application icons and application launch screens. You must have these already generated otherwise you must edit your `appcache` file and remove them.**
@@ -488,8 +497,9 @@ setAppCache(appName);
 ```javascript
 const { setIcons } = require('create-pwa');
 const appIcon = require('fs').resolve(__dirname, './your_icon.png');
+const distFolder = 'dist';
 
-setIcons(appIcon);
+setIcons(appIcon, distFolder);
 ```
 
 **The generated icons are located in the `/icons` folder.**
@@ -499,8 +509,9 @@ setIcons(appIcon);
 ```javascript
 const { setLaunchScreens } = require('create-pwa');
 const launchScreen = require('fs').resolve(__dirname, './your_launch_screen.png');
+const distFolder = 'dist';
 
-setLaunchScreens(launchScreen);
+setLaunchScreens(launchScreen, distFolder);
 ```
 
 **The generated files are located in the `/launch-screens` folder.**
@@ -510,8 +521,9 @@ setLaunchScreens(launchScreen);
 ```javascript
 const { setManifest } = require('create-pwa');
 const appName = 'Your application name';
+const distFolder = 'dist';
 
-setManifest(appName);
+setManifest(appName, distFolder);
 ```
 
 **The generated `manifest.json` file contains references to the application icons. You must have these already generated otherwise you must edit your `manifest.json` file and remove them.**
@@ -521,8 +533,9 @@ setManifest(appName);
 ```javascript
 const { setFavicons } = require('create-pwa');
 const appIcon = require('fs').resolve(__dirname, './your_icon.png');
+const distFolder = 'dist';
 
-setFavicons(appIcon);
+setFavicons(appIcon, distFolder);
 ```
 
 **The generated files are located in the `/favicons` folder.**
@@ -532,8 +545,9 @@ setFavicons(appIcon);
 ```javascript
 const { setServiceWorker } = require('create-pwa');
 const appName = 'Your application name';
+const distFolder = 'dist';
 
-setServiceWorker(appName);
+setServiceWorker(appName, distFolder);
 ```
 
 **The generated `service-worker.js` file contains references to the application icons and application launch screens. You must have these already generated otherwise you must edit your `service-worker.js` file and remove them.**

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-pwa",
-	"version": "2.6.1",
+	"version": "2.7.0",
 	"description": "Easily create a progressive web app",
 	"keywords": [
 		"PWA",
@@ -27,7 +27,7 @@
 		"url": "github:scriptex/create-pwa"
 	},
 	"scripts": {
-		"pwa": "src/index.js --icon=\"./icon.png\" --launch=\"./launch.png\" --icons=false --app-cache=false --manifest=false --favicons=false --service-worker=false --launch-screens=false",
+		"pwa": "rm -rf dist && node src/index.js --icon=./icon.png --launch=./launch.png --output=dist --icons=true --app-cache=true --manifest=true --favicons=true --service-worker=true --launch-screens=true",
 		"test": "tape test.js"
 	},
 	"dependencies": {

src/index.js

@@ -9,7 +9,7 @@ const { existsSync, writeFileSync, mkdirSync } = require('fs');
 const DEFAULTS = {
 	icon: './icon.png',
 	launch: './launch.png',
-	output: './'
+	output: ''
 };
 
 const argv = require('yargs').options({
@@ -64,6 +64,21 @@ const serviceWorkerTemplate = require('./sw');
  */
 const pwd = process.cwd();
 
+/**
+ * Create a directory if one doesn't exist
+ * @param {string} dist Path to a folder inside the project's directory
+ * @param {string} name Name of the new folder to be created
+ */
+const createDirIfNotExists = (dist, name) => {
+	const dir = resolve(pwd, dist, name);
+
+	if (!existsSync(dir)) {
+		mkdirSync(dir, { recursive: true });
+	}
+
+	return dir;
+};
+
 /**
  * Get application's name
  */
@@ -79,107 +94,121 @@ const getAppName = () => {
 
 /**
  * Create app's manifest.json file
- * @param {string} name
+ * @param {string} name Name of the application
+ * @param {string} dist Path to a folder inside the project's directory
  */
-const setManifest = name => {
-	writeFileSync(resolve(pwd, 'manifest.json'), manifestTemplate(name));
+const setManifest = (name, dist) => {
+	const dir = createDirIfNotExists(dist, '');
+
+	writeFileSync(resolve(dir, 'manifest.json'), manifestTemplate(name));
 };
 
 /**
  * Create app's service worker file
- * @param {string} name
+ * @param {string} name Name of the application
+ * @param {string} dist Path to a folder inside the project's directory
  */
-const setServiceWorker = name => {
-	writeFileSync(resolve(pwd, 'service-worker.js'), serviceWorkerTemplate(name));
+const setServiceWorker = (name, dist) => {
+	const dir = createDirIfNotExists(dist, '');
+
+	writeFileSync(resolve(dir, 'service-worker.js'), serviceWorkerTemplate(name));
 };
 
 /**
  * Create images with `sharp`
- * @param {string} file
- * @param {string} folder
+ * @param {string} file Path to the image file
+ * @param {string} dist Path to a folder inside the project's directory
+ * @param {string} name Name of the new folder to be created
  * @param {Function} callback
  */
-const generateImages = (file, folder, callback) => {
+const generateImages = (file, dist, name, callback) => {
 	if (!file) {
 		return;
 	}
 
-	const dir = resolve(pwd, folder);
+	const dir = createDirIfNotExists(dist, name);
 	const image = resolve(pwd, file);
 
-	if (!existsSync(dir)) {
-		mkdirSync(dir);
-	}
-
 	callback(image, dir);
 };
 
 /**
  * Create app's icons
- * @param {string} icon
+ * @param {string} file Path to the image file
+ * @param {string} dist Path to a folder inside the project's directory
  */
-const setIcons = icon => generateImages(icon, 'icons', generateIcons);
+const setIcons = (file, dist) => generateImages(file, dist, 'icons', generateIcons);
 
 /**
  * Create app's cache manifest
- * @param {string} name
+ * @param {string} name Name of the application
+ * @param {string} dist Path to a folder inside the project's directory
  */
-const setAppCache = name => {
-	writeFileSync(resolve(pwd, `${name}.appcache`), appCacheTemplate());
+const setAppCache = (name, dist) => {
+	const dir = createDirIfNotExists(dist, '');
+
+	writeFileSync(resolve(dir, `${name}.appcache`), appCacheTemplate());
 };
 
 /**
  * Create app's launch screens
- * @param {string} launchScreen
+ * @param {string} file Path to the image file
+ * @param {string} dist Path to a folder inside the project's directory
  */
-const setLaunchScreens = launchScreen => generateImages(launchScreen, 'launch-screens', generateLaunchScreens);
+const setLaunchScreens = (file, dist) => {
+	generateImages(file, dist, 'launch-screens', generateLaunchScreens);
+};
 
 /**
  * Create app's config for Microsoft browsers
+ * @param {string} dist Path to a folder inside the project's directory
  */
-const setMsTileConfig = () => {
-	writeFileSync(resolve(pwd, 'config.xml'), msTileConfigTemplate());
+const setMsTileConfig = dist => {
+	const dir = createDirIfNotExists(dist, '');
+
+	writeFileSync(resolve(dir, 'config.xml'), msTileConfigTemplate());
 };
 
 /**
  * Create app's favicons
- * @param {string} icon
+ * @param {string} file Path to the image file
+ * @param {string} dist Path to a folder inside the project's directory
  */
-const setFavicons = icon => generateImages(icon, 'favicons', generateFavicons);
+const setFavicons = (file, dist) => generateImages(file, dist, 'favicons', generateFavicons);
 
 /**
  * Create all PWA required files
  */
 const create = async () => {
 	const name = getAppName();
 
-	const { icon, launch, icons, manifest, favicons, appCache, serviceWorker, launchScreens } = await argv;
+	const { icon, launch, output, icons, manifest, favicons, appCache, serviceWorker, launchScreens } = await argv;
 	const iconToUse = icon || DEFAULTS.icon;
 	const launchToUse = launch || DEFAULTS.launch;
 
 	if (icons) {
-		setIcons(iconToUse);
+		setIcons(iconToUse, output);
 	}
 
 	if (manifest) {
-		setManifest(name);
+		setManifest(name, output);
 	}
 
 	if (appCache) {
-		setAppCache(name);
+		setAppCache(name, output);
 	}
 
 	if (favicons) {
-		setFavicons(iconToUse);
-		setMsTileConfig();
+		setFavicons(iconToUse, output);
+		setMsTileConfig(output);
 	}
 
 	if (serviceWorker) {
-		setServiceWorker(name);
+		setServiceWorker(name, output);
 	}
 
 	if (launchScreens) {
-		setLaunchScreens(launchToUse);
+		setLaunchScreens(launchToUse, output);
 	}
 };