Initial commit

.env

@@ -0,0 +1,2 @@
+IS_PRODUCTION=true
+FOO=bar

.env.development

@@ -0,0 +1,2 @@
+IS_PRODUCTION=false
+FOO=bar

.eslintignore

@@ -0,0 +1,31 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    "max-len": ["error", {"code": 120, "ignoreComments": true, "ignoreTemplateLiterals": true}],
+    "no-console": "error",
+    "semi": [ "error", "always" ],
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": false,
+        "ignoreDeclarationSort": false,
+        "ignoreMemberSort": false,
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
+        "allowSeparatedGroups": false
+      }
+    ]
+  }
+}

.eslintrc

@@ -0,0 +1,31 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    "max-len": ["error", {"code": 120, "ignoreComments": true, "ignoreTemplateLiterals": true}],
+    "no-console": "error",
+    "semi": [ "error", "always" ],
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": false,
+        "ignoreDeclarationSort": false,
+        "ignoreMemberSort": false,
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
+        "allowSeparatedGroups": false
+      }
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.parcel-cache

.parcelrc

@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
+  }
+}

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none",
+  "endOfLine": "auto",
+  "semi": true,
+  "printWidth": 120
+}

@types/process.d.ts

@@ -0,0 +1,6 @@
+declare const process: {
+    env: {
+        ENV: string;
+        URL: string;
+    }
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2023 Michal Szczepanski (michal@vane.pl)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,17 @@
+# Typescript parceljs html page template
+* parceljs
+* typescript  
+* linter - eslint with @typescript-eslint
+* prettier
+* pre-commit hook for lint
+* reading .env files
+* simple HMR using `window.location.reload()`
+
+### Development
+```npm run dev```
+
+starts server hosted on port
+```localhost:1234```
+
+### Production
+``npm run prod``

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "typescript-parcel-base",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "parcel src/index.html",
+    "prod": "parcel build src/index.html",
+    "lint": "eslint --ext .ts  src/",
+    "lint:fix": "eslint --ext .ts,.tsx  src/ --fix"
+  },
+  "pre-commit": [
+    "lint"
+  ],
+  "devDependencies": {
+    "@parcel/transformer-typescript-tsc": "^2.8.3",
+    "@types/node": "^18.11.18",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
+    "eslint": "^8.32.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "parcel": "^2.8.3",
+    "pre-commit": "^1.2.2",
+    "typescript": "^4.9.4"
+  }
+}

src/config.ts

@@ -0,0 +1,4 @@
+export const Config = {
+  isProduction: process.env.IS_PRODUCTION === 'true',
+  foo: process.env.FOO
+};

src/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World</title>
+</head>
+<body>
+<script type="module" src="index.ts"></script>
+</body>
+</html>

src/index.ts

@@ -0,0 +1,12 @@
+import { Config } from './config';
+const h1 = document.createElement('h1');
+document.body.appendChild(h1);
+h1.innerText = `is production ${Config.isProduction.toString()}, foo value from .env: ${Config.foo || ''}`;
+
+// Hot reloading
+if (!Config.isProduction) {
+  const ws = new WebSocket('ws://localhost:1234');
+  ws.onmessage = () => {
+    window.location.reload();
+  };
+}

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "target": "es2021",
+    "strict": true,
+    "typeRoots": ["node_modules/@types", "@types"]
+  }
+}