Create LitElement app

create-lit-app

#!/bin/bash

if [ "$1" == "" ]; then
  echo "Syntax: create-lit-element <folder>"
  exit
fi

if [ -x git ]; then
  echo "Command git not found. Install with sudo apt-get install git"
  exit
fi

if [ -x npm ]; then
  echo "Command npm not found. Install NodeJS (or update to latest version)"
  exit
fi

if [ -x sponge ]; then
  echo "Command sponge not found. Install with sudo apt-get install moreutils"
  exit
fi

if [ -x jq ]; then
  echo "Command jq not found. Install with sudo apt-get install jq"
  exit
fi

mkdir -p $1/src/{components,assets}
cd $1
touch src/index.{html,css,js}
git init

cat <<EOF >.gitignore
node_modules/
.cache/
.parcel-cache/
dist/
build/
EOF

npm init -y >/dev/null

if [ -x parcel ]; then
  echo "Command parcel not found. Installing into project...";
  npm install -D --loglevel=error parcel-bundler
fi

npm install -D --loglevel=error \
               eslint eslint-config-standard eslint-config-prettier eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise \
               stylelint stylelint-config-standard stylelint-config-prettier \
               gh-pages cssnano \
               @babel/core babel-plugin-postcss-template-literals \
               postcss-nesting autoprefixer
npm install --save --loglevel=error lit-element

$(jq -r '.main = "src/index.html"' package.json | sponge package.json)
$(jq -r '.scripts.start = "parcel serve src/index.html"' package.json | sponge package.json)
$(jq -r '.scripts.build = "parcel build src/index.html -d build --public-url /$npm_package_name/ && gh-pages -d build"' package.json | sponge package.json)
$(jq -r 'del(.scripts.test)' package.json | sponge package.json)

cat <<EOF | jq -M . > .stylelintrc
{
  "extends": [ "stylelint-config-standard", "stylelint-config-prettier" ],
  "rules": {
    "indentation": 2,
    "selector-nested-pattern": "^&",
    "declaration-colon-newline-after": "always-multi-line",
    "value-list-comma-newline-after": "always-multi-line",
    "value-list-comma-space-after": "always-single-line",
    "value-list-comma-space-before": "never"
  }
}
EOF

cat <<EOF | jq -M . >.postcssrc.json
{
  "plugins": ["postcss-nesting", "autoprefixer"]
}
EOF

cat <<EOF >.babelrc.js
const postcssOptions = require("./.postcssrc.json");

module.exports = {
  plugins: [["postcss-template-literals", { tag: "css", ...postcssOptions }]],
};
EOF

cat <<EOF | jq -M . > .eslintrc
{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": ["standard", "prettier"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
    "semi": ["error", "always"]
  }
}
EOF

echo "Finished."