bloadvenro/create-parcel-boilerplate

## create-parcel-boilerplate
#!/bin/bash

script_dir=$(pwd)
project_home=$1

isEmpty() { [ -z $1 ] ; }
isCliFlag() { [[ $1 == --* ]] ; }

if isEmpty $project_home || isCliFlag $project_home
then
  echo 'Project home must be set!'
  exit 1
fi

shift

while [[ "$#" -gt 0 ]]; do case $1 in
  --typescript)    typescript=1;;
  --react)         react=1;;
  *) echo "Unknown parameter passed: $1"; exit 1;;
esac; shift; done

shouldInstallReact() { [ -v react ] ; }
shouldInstallTypescript() { [ -v typescript ] ; }

get_entry_script_extention() {
  shouldInstallReact && shouldInstallTypescript && echo tsx && return
  shouldInstallTypescript && echo ts || echo js
}

echo ===========================================================================
echo CREATE BASIC FILE STRUCTURE
echo ===========================================================================

echo "create project in $project_home"

mkdir -p $project_home && cd $project_home
mkdir src

echo 'create package.json'

cat <<END >> package.json
{
  "name": "boilerplate",
  "version": "0.0.0",
  "author": "",
  "description": "",
  "scripts": {
    "start": "parcel index.html --open"
  },
  "license": "UNLICENSED",
  "private": true
}
END

echo 'create index.html'

cat <<END >> index.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="src/index.$(get_entry_script_extention)"></script>
</body>
</html>
END

echo 'create prettier.config.js'

cat <<END >> prettier.config.js
module.exports = {
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
};
END

entry_script_file=src/index.$(get_entry_script_extention)

echo "create $entry_script_file"

shouldInstallReact &&
cat <<END >> $entry_script_file
import * as React from 'react';
import { render } from 'react-dom';
END

cat <<END >> $entry_script_file
const root = document.getElementById('root');
const libs = [];
END

shouldInstallReact &&
cat <<END >> $entry_script_file
libs.push('react');
END

shouldInstallTypescript &&
cat <<END >> $entry_script_file
libs.push('typescript');
END

cat <<END >> $entry_script_file
const libsStr = libs.join('/');
END

if shouldInstallReact
then
cat <<END >> $entry_script_file
const Component = () => <div>Welcome to the parcel {libsStr} boilerplate!</div>;
render(<Component />, root);
END
else
cat <<END >> $entry_script_file
root.innerText = 'Welcome to the parcel ' + libsStr + ' boilerplate!';
END
fi

echo ===========================================================================
echo INSTALL DEPENDENCIES
echo ===========================================================================

yarn add --silent -D \
parcel-bundler \
prettier

shouldInstallTypescript &&
yarn add --silent -D \
typescript

shouldInstallReact &&
yarn add --silent \
react \
react-dom

shouldInstallReact && shouldInstallTypescript &&
yarn add --silent -D \
@types/react \
@types/react-dom

yarn start

# LINKS:
# - parse CLI args: https://stackoverflow.com/a/33826763
# - example of file content generation with interpolation: http://linuxcommand.org/lc3_wss0120.php
# - functional predicates: https://stackoverflow.com/a/24896617
# - bash functions man: https://linuxize.com/post/bash-functions/
# - the difference between [] and [[]]: https://serverfault.com/questions/52034/what-is-the-difference-between-double-and-single-square-brackets-in-bash
# - bach "unary operator expected" condition error: https://stackoverflow.com/a/42637311
	#!/bin/bash

	script_dir=$(pwd)
	project_home=$1

	isEmpty() { [ -z $1 ] ; }
	isCliFlag() { [[ $1 == --* ]] ; }

	if isEmpty $project_home \|\| isCliFlag $project_home
	then
	echo 'Project home must be set!'
	exit 1
	fi

	shift

	while [[ "$#" -gt 0 ]]; do case $1 in
	--typescript) typescript=1;;
	--react) react=1;;
	*) echo "Unknown parameter passed: $1"; exit 1;;
	esac; shift; done

	shouldInstallReact() { [ -v react ] ; }
	shouldInstallTypescript() { [ -v typescript ] ; }

	get_entry_script_extention() {
	shouldInstallReact && shouldInstallTypescript && echo tsx && return
	shouldInstallTypescript && echo ts \|\| echo js
	}

	echo ===========================================================================
	echo CREATE BASIC FILE STRUCTURE
	echo ===========================================================================

	echo "create project in $project_home"

	mkdir -p $project_home && cd $project_home
	mkdir src

	echo 'create package.json'

	cat <<END >> package.json
	{
	"name": "boilerplate",
	"version": "0.0.0",
	"author": "",
	"description": "",
	"scripts": {
	"start": "parcel index.html --open"
	},
	"license": "UNLICENSED",
	"private": true
	}
	END

	echo 'create index.html'

	cat <<END >> index.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="src/index.$(get_entry_script_extention)"></script>
	</body>
	</html>
	END

	echo 'create prettier.config.js'

	cat <<END >> prettier.config.js
	module.exports = {
	semi: true,
	singleQuote: true,
	tabWidth: 2,
	trailingComma: 'all',
	};
	END

	entry_script_file=src/index.$(get_entry_script_extention)

	echo "create $entry_script_file"

	shouldInstallReact &&
	cat <<END >> $entry_script_file
	import * as React from 'react';
	import { render } from 'react-dom';
	END

	cat <<END >> $entry_script_file
	const root = document.getElementById('root');
	const libs = [];
	END

	shouldInstallReact &&
	cat <<END >> $entry_script_file
	libs.push('react');
	END

	shouldInstallTypescript &&
	cat <<END >> $entry_script_file
	libs.push('typescript');
	END

	cat <<END >> $entry_script_file
	const libsStr = libs.join('/');
	END

	if shouldInstallReact
	then
	cat <<END >> $entry_script_file
	const Component = () => <div>Welcome to the parcel {libsStr} boilerplate!</div>;
	render(<Component />, root);
	END
	else
	cat <<END >> $entry_script_file
	root.innerText = 'Welcome to the parcel ' + libsStr + ' boilerplate!';
	END
	fi

	echo ===========================================================================
	echo INSTALL DEPENDENCIES
	echo ===========================================================================

	yarn add --silent -D \
	parcel-bundler \
	prettier

	shouldInstallTypescript &&
	yarn add --silent -D \
	typescript

	shouldInstallReact &&
	yarn add --silent \
	react \
	react-dom

	shouldInstallReact && shouldInstallTypescript &&
	yarn add --silent -D \
	@types/react \
	@types/react-dom

	yarn start

	# LINKS:
	# - parse CLI args: https://stackoverflow.com/a/33826763
	# - example of file content generation with interpolation: http://linuxcommand.org/lc3_wss0120.php
	# - functional predicates: https://stackoverflow.com/a/24896617
	# - bash functions man: https://linuxize.com/post/bash-functions/
	# - the difference between [] and [[]]: https://serverfault.com/questions/52034/what-is-the-difference-between-double-and-single-square-brackets-in-bash
	# - bach "unary operator expected" condition error: https://stackoverflow.com/a/42637311