Config boilerplate (#12)

* Setup eslint

* Fix ts typings

* Add prettier config export

* Fix eslint config

* Bump version

* Document the extension of the config

* Add note to disable source maps

* Fix formatting

* Improve readme

README.md

@@ -38,6 +38,10 @@ In order to integrate this package into your project there are some extra change
 
 - Install all the [required packages](https://github.com/PaackEng/frontend-elm-kit/blob/main/example/elm.json) with exception of `elm/html`
 - Make sure that the modules `Data.Environment`, `Main.Model`, `Main.Msg`, `Main.Update`, `Effects.Local` and `Effects.Performer` all exist. Look at the example folder for a minimal setup
+- If you're using parcel v1 disable sourcemaps with `--no-source-maps`
+
+### Auth0
+
 - Ensure that the ports `checkSession`, `login` and `logout` are all present
 - Provide all the four seeds (`randomSeed1`, 2, 3 and 4) in the app's `Flags`
 - Install the [Auth0 SPA SDK](https://github.com/auth0/auth0-spa-js)
@@ -48,6 +52,36 @@ In order to integrate this package into your project there are some extra change
 - Make sure your model includes `appConfig.environment`. `codeVersion`, `rollbarToken` and `url`;
 - You'll need a message for receiving feedback, see [how the example performs the effect](https://github.com/PaackEng/frontend-elm-kit/blob/main/example/src/Effects/LocalPerformer.elm);
 
+### Extending configuration
+
+This package provides default configuration for Eslint, Prettier and TypeScript. Here's how to extend the config:
+
+**.eslintrc.json**
+
+```diff
+{
++  "extends": "./node_modules/@PaackEng/frontend-elm-kit/eslintconfig.json"
+}
+```
+
+**package.json**
+
+```diff
+  "name": "lmo-web",
+  "version": "1.0.0",
+  "description": "Last-Mile Operations",
++ "prettier": "@PaackEng/frontend-elm-kit/prettier",
+```
+
+**tsconfig.json**
+
+```diff
+{
++  "extends": "@PaackEng/frontend-elm-kit/tsconfig.json",
++  "include": ["web/ts"]
+}
+```
+
 ## Suggestions
 
 ### Rollbar

auth0/auth.ts

@@ -1,5 +1,9 @@
-type AuthError = { error: string; errorDescription: string };
-type AuthSuccess = { token: string; userData: User | undefined };
+import createAuth0Client, {
+  AuthenticationError,
+  Auth0Client,
+} from '@auth0/auth0-spa-js';
+
+import { AuthSuccess, AuthError } from './types';
 
 function isSuccessUrl(searchParams: URLSearchParams): boolean {
   return searchParams.has('code') && searchParams.has('state');

auth0/connect.ts

@@ -1,6 +1,6 @@
 import { Auth0Client } from '@auth0/auth0-spa-js';
 import * as auth from './auth';
-import { AuthPorts } from './elm';
+import { AuthPorts } from './types';
 
 export function connectAppToAuth(
   app: ElmApp<AuthPorts>,

auth0/global.d.ts

@@ -0,0 +1,3 @@
+interface NavigatorLanguage {
+  userLanguage?: string;
+}

auth0/types.ts

@@ -0,0 +1,12 @@
+import { User } from '@auth0/auth0-spa-js';
+
+export type AuthPorts = {
+  checkSession: PortFromElm<void>;
+  login: PortFromElm<void>;
+  logout: PortFromElm<void>;
+  authResult: PortToElm<AuthResult>;
+};
+
+export type AuthError = { error: string; errorDescription: string };
+export type AuthSuccess = { token: string; userData: User | undefined };
+export type AuthResult = AuthError | AuthSuccess;

eslintconfig.json

@@ -0,0 +1,13 @@
+{
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 11
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {}
+}

example/index.ts

@@ -1,3 +1,4 @@
+import 'regenerator-runtime/runtime';
 import { Elm } from './src/Main.elm';
 import { connectAppToAuth } from '../auth0/connect';
 

example/package.json

@@ -9,11 +9,11 @@
   ],
   "main": "index.ts",
   "scripts": {
-    "start": "parcel serve ./index.html",
+    "start": "parcel serve --no-source-maps ./index.html",
     "review": "yarn run review:prettier && yarn run review:elm",
     "review:elm": "elm-review",
     "review:prettier": "prettier --check .",
-    "build": "parcel build ./index.html --out-dir ./dist/",
+    "build": "parcel build ./index.html --out-dir ./dist/ --no-source-maps",
     "test": "elm-test"
   },
   "author": "",

package.json

@@ -1,14 +1,22 @@
 {
   "name": "@PaackEng/frontend-elm-kit",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "",
   "main": "",
   "private": false,
+  "files": [
+    "elm",
+    "prettier",
+    "auth0",
+    "eslintconfig.json",
+    "tsconfig.json"
+  ],
   "publishConfig": {
     "registry": "https://npm.pkg.github.com"
   },
   "scripts": {
-    "postinstall": ""
+    "lint": "eslint auth0/**/*.ts --config eslintconfig.json",
+    "tsc": "tsc --noEmit -p . --pretty"
   },
   "repository": {
     "type": "git",
@@ -28,6 +36,9 @@
     "elm": "^0.19.1-5"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.24.0",
+    "@typescript-eslint/parser": "^4.24.0",
+    "eslint": "^7.26.0",
     "typescript": "^4.2.4"
   },
   "prettier": {

prettier/index.json

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "include": ["auth0/*"],
+  "compilerOptions": {
+    "lib": ["es2020", "dom"],
+    "module": "commonjs",
+    "target": "es2020",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}