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 { \$compile } from "@thi.ng/rdom";

\$compile(["div", {}, "hello"]).mount(document.getElementById("app")!);
EOF

cat << EOF > "$MODULE"/src/static.d.ts
/* Use this file to declare any custom file extensions for importing */
/* Use this folder to also add/extend a package d.ts file, if needed. */

/* CSS MODULES */
declare module "*.module.css" {
    const classes: { [key: string]: string };
    export default classes;
}
declare module "*.module.scss" {
    const classes: { [key: string]: string };
    export default classes;
}
declare module "*.module.sass" {
    const classes: { [key: string]: string };
    export default classes;
}
declare module "*.module.less" {
    const classes: { [key: string]: string };
    export default classes;
}
declare module "*.module.styl" {
    const classes: { [key: string]: string };
    export default classes;
}

/* CSS */
declare module "*.css";
declare module "*.scss";
declare module "*.sass";
declare module "*.less";
declare module "*.styl";

/* IMAGES */
declare module "*.svg" {
    const ref: string;
    export default ref;
}
declare module "*.gif" {
    const ref: string;
    export default ref;
}
declare module "*.jpg" {
    const ref: string;
    export default ref;
}
declare module "*.png" {
    const ref: string;
    export default ref;
}

/* CUSTOM: ADD YOUR OWN HERE */
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": "../../node_modules/.bin/rimraf build node_modules/.cache",
        "start": "../../node_modules/.bin/snowpack dev",
        "build": "../../node_modules/.bin/snowpack build"
    },
    "devDependencies": {
        "@thi.ng/snowpack-env": "^2.3.3"
    },
    "dependencies": {
        "@thi.ng/api": "latest",
        "@thi.ng/rdom": "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",
    "include": ["src"],
    "compilerOptions": {
        "baseUrl": "./",
        "paths": { "*": ["web_modules/.types/*"] }
    }
}
EOF

echo "writing snowpack.config.js..."
cat << EOF > "$MODULE"/snowpack.config.js
/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
    mount: {
        public: "/",
        src: "/_dist_",
    },
    plugins: [
        "@snowpack/plugin-typescript",
        [
            "@snowpack/plugin-webpack",
            {
                extendConfig: (config) => {
                    config.node = {
                        process: false,
                        setImmediate: false,
                        util: "empty",
                    };
                    return config;
                },
            },
        ],
    ],
    installOptions: {
        installTypes: true,
    },
    buildOptions: {
        baseUrl: "/umbrella/$1",
    },
};
EOF

echo "writing .gitignore..."
cat << EOF > "$MODULE"/.gitignore
build
dev
node_modules
yarn.lock
!snowpack.config.js
!*.d.ts
EOF

echo "writing index.html..."
mkdir -p "$MODULE"/public
cat << EOF > "$MODULE"/public/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="module" src="/_dist_/index.js"></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