scripts/make-example

#!/bin/bash

readonly MODULE="examples/$1"
readonly AUTHOR="Karsten Schmidt"
readonly EMAIL="k+npm@thi.ng"

echo "generating module: $MODULE"
mkdir -p "$MODULE"

echo "creating /src folder..."
mkdir -p "$MODULE"/src
cat << EOF > "$MODULE"/src/index.ts
import { } from "@thi.ng/hdom";

if (process.env.NODE_ENV !== "production") {
    const hot = (<any>module).hot;
    hot && hot.dispose(() => {});
}
EOF

cat << EOF > "$MODULE"/src/webpack.d.ts
declare module "*.jpg";
declare module "*.png";
declare module "*.svg";
declare module "*.json";
EOF

echo "writing package.json..."
cat << EOF > "$MODULE"/package.json
{
    "name": "$1",
    "version": "0.0.1",
    "description": "TODO",
    "repository": "https://github.com/thi-ng/umbrella",
    "author": "$AUTHOR <$EMAIL>",
    "license": "Apache-2.0",
    "scripts": {
        "clean": "rm -rf .cache build out",
        "build": "yarn clean && parcel build index.html -d out --public-url ./ --no-source-maps --no-cache --detailed-report --experimental-scope-hoisting",
        "build:webpack": "../../node_modules/.bin/webpack --mode production",
        "start": "parcel index.html -p 8080 --open --no-cache"
    },
    "devDependencies": {
        "parcel-bundler": "^1.12.4",
        "terser": "^5.1.0",
        "typescript": "^3.9.7"
    },
    "dependencies": {
        "@thi.ng/api": "latest"
    },
    "browserslist": [
        "last 3 Chrome versions"
    ],
    "browser": {
        "process": false
    },
    "thi.ng": {
        "skip": true,
        "readme": false,
        "screenshot": "examples/"
    }
}
EOF

echo "writing tsconfig.json..."
cat << EOF > "$MODULE"/tsconfig.json
{
    "extends": "../../tsconfig.json",
    "compilerOptions": {
        "outDir": ".",
        "target": "es2017",
        "sourceMap": true
    },
    "include": [
        "./src/**/*.ts"
    ]
}
EOF

echo "writing .gitignore..."
cat << EOF > "$MODULE"/.gitignore
.cache
out
node_modules
yarn.lock
*.js
*.map
!src/*.d.ts
!*.config.js
EOF

echo "writing index.html..."
cat << EOF > "$MODULE"/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>$1</title>
    <link href="https://unpkg.com/tachyons@4/css/tachyons.min.css" rel="stylesheet">
    <style>
    </style>
    <script async defer data-domain="demo.thi.ng" src="https://plausible.io/js/plausible.js"></script>
</head>
<body class="sans-serif">
    <div id="app"></div>
    <div><a class="link" href="https://github.com/thi-ng/umbrella/tree/develop/examples/$1">Source code</a></div>
    <script type="text/javascript" src="./src/index.ts"></script>
</body>
</html>
EOF

echo "writing README.md..."
cat << EOF > "$MODULE"/README.md
# $1

[Live demo](http://demo.thi.ng/umbrella/$1/)

Please refer to the [example build instructions](https://github.com/thi-ng/umbrella/wiki/Example-build-instructions) on the wiki.

## Authors

- $AUTHOR

## License

&copy; 2020 $AUTHOR // Apache Software License 2.0
EOF

echo "writing webpack.config.js..."
cat << EOF > "$MODULE"/webpack.config.js
module.exports = {
    entry: "./src/index.ts",
    output: {
        filename: "bundle.[hash].js",
        path: __dirname + "/out"
    },
    resolve: {
        extensions: [".ts", ".js"]
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                loader: "file-loader",
                options: { name: "[path][hash].[ext]" }
            },
            { test: /\.ts$/, use: "ts-loader" }
        ]
    },
    node: {
        process: false
    }
};
EOF