preact + typescript

.eslintrc.js

@@ -0,0 +1,41 @@
+module.exports = {
+    env: {
+        browser: true
+    },
+    plugins: ["@typescript-eslint"],
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "plugin:react/recommended",
+        "plugin:react-hooks/recommended",
+        "plugin:prettier/recommended",
+        "prettier/@typescript-eslint",
+        "prettier/react"
+    ],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true
+        },
+        project: "./tsconfig.eslint.json",
+    },
+    rules: {
+        "react/no-unknown-property": ["error", { ignore: ["class"] }],
+    },
+    settings: {
+        react: {
+            pragma: "h",
+            version: "detect"
+        },
+    },
+    overrides: [
+        {
+            files: ["*.js"],
+            rules: {
+                "@typescript-eslint/explicit-function-return-type": "off",
+            }
+        }
+    ]
+};

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+/build
+/*.log

.prettierignore

@@ -0,0 +1,4 @@
+package.json
+package-lock.json
+yarn.lock
+build

.prettierrc

@@ -0,0 +1 @@
+tabWidth: 4

README.md

@@ -0,0 +1,19 @@
+# fennec-fe
+
+## CLI Commands
+*   `npm install`: Installs dependencies
+
+*   `npm run dev`: Run a development, HMR server
+
+*   `npm run serve`: Run a production-like server
+
+*   `npm run build`: Production-ready build
+
+*   `npm run lint`: Pass TypeScript files using ESLint
+
+*   `npm run test`: Run Jest and Enzyme with
+    [`enzyme-adapter-preact-pure`](https://github.com/preactjs/enzyme-adapter-preact-pure) for
+    your tests
+
+
+For detailed explanation on how things work, checkout the [CLI Readme](https://github.com/developit/preact-cli/blob/master/README.md).

jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+    preset: "jest-preset-preact",
+    setupFiles: [
+        "<rootDir>/src/tests/__mocks__/setupTests.js",
+        "<rootDir>/src/tests/__mocks__/browserMocks.js"
+    ],
+    testURL: "http://localhost:8080",
+    moduleNameMapper: {
+        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMocks.js",
+    }
+}

package.json

@@ -0,0 +1,56 @@
+{
+  "private": true,
+  "name": "fennec-fe",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "build": "preact build",
+    "serve": "sirv build --port 8080 --cors --single",
+    "dev": "preact watch",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+    "test": "jest ./tests"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{css,md,scss}": "prettier --write",
+    "*.{js,jsx,ts,tsx}": "eslint --fix"
+  },
+  "eslintIgnore": [
+    "build/*"
+  ],
+  "dependencies": {
+    "preact": "^10.3.1",
+    "preact-jsx-chai": "^3.0.0",
+    "preact-markup": "^2.0.0",
+    "preact-render-to-string": "^5.1.4",
+    "preact-router": "^3.2.1"
+  },
+  "devDependencies": {
+    "@teamsupercell/typings-for-css-modules-loader": "^2.2.0",
+    "@types/enzyme": "^3.10.5",
+    "@types/jest": "^26.0.8",
+    "@types/webpack-env": "^1.15.1",
+    "@typescript-eslint/eslint-plugin": "^2.25.0",
+    "@typescript-eslint/parser": "^2.25.0",
+    "css-loader": "^3.5.3",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-preact-pure": "^2.2.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
+    "husky": "^4.2.1",
+    "jest": "^26.2.2",
+    "jest-preset-preact": "^4.0.2",
+    "lint-staged": "^10.0.7",
+    "preact-cli": "^3.0.0",
+    "prettier": "^1.19.1",
+    "sirv-cli": "^1.0.0-next.3",
+    "typescript": "^3.7.5"
+  }
+}

preact.config.js

@@ -0,0 +1,30 @@
+import { resolve } from "path";
+
+export default {
+    /**
+     * Function that mutates the original webpack config.
+     * Supports asynchronous changes when a promise is returned (or it's an async function).
+     *
+     * @param {object} config - original webpack config.
+     * @param {object} env - options passed to the CLI.
+     * @param {WebpackConfigHelpers} helpers - object with useful helpers for working with the webpack config.
+     * @param {object} options - this is mainly relevant for plugins (will always be empty in the config), default to an empty object
+     **/
+    webpack(config, env, helpers, options) {
+        config.module.rules[4].use.splice(1, 0, {
+            loader: "@teamsupercell/typings-for-css-modules-loader",
+            options: {
+                banner:
+                    "// This file is automatically generated from your CSS. Any edits will be overwritten.",
+                disableLocalsExport: true
+            }
+        });
+
+        // Use any `index` file, not just index.js
+        config.resolve.alias["preact-cli-entrypoint"] = resolve(
+            process.cwd(),
+            "src",
+            "index"
+        );
+    }
+};

src/.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": [ 
+        "preact-cli/babel"
+    ]
+}

src/components/app.tsx

@@ -0,0 +1,28 @@
+import { FunctionalComponent, h } from "preact";
+import { Route, Router, RouterOnChangeArgs } from "preact-router";
+
+import Home from "../routes/home";
+import Profile from "../routes/profile";
+import NotFoundPage from "../routes/notfound";
+import Header from "./header";
+
+const App: FunctionalComponent = () => {
+    let currentUrl: string;
+    const handleRoute = (e: RouterOnChangeArgs) => {
+        currentUrl = e.url;
+    };
+
+    return (
+        <div id="app">
+            <Header />
+            <Router onChange={handleRoute}>
+                <Route path="/" component={Home} />
+                <Route path="/profile/" component={Profile} user="me" />
+                <Route path="/profile/:user" component={Profile} />
+                <NotFoundPage default />
+            </Router>
+        </div>
+    );
+};
+
+export default App;

src/components/header/index.tsx

@@ -0,0 +1,24 @@
+import { FunctionalComponent, h } from "preact";
+import { Link } from "preact-router/match";
+import * as style from "./style.css";
+
+const Header: FunctionalComponent = () => {
+    return (
+        <header class={style.header}>
+            <h1>Preact App</h1>
+            <nav>
+                <Link activeClassName={style.active} href="/">
+                    Home
+                </Link>
+                <Link activeClassName={style.active} href="/profile">
+                    Me
+                </Link>
+                <Link activeClassName={style.active} href="/profile/john">
+                    John
+                </Link>
+            </nav>
+        </header>
+    );
+};
+
+export default Header;

src/components/header/style.css

@@ -0,0 +1,48 @@
+.header {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 56px;
+	padding: 0;
+	background: #673AB7;
+	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+	z-index: 50;
+}
+
+.header h1 {
+	float: left;
+	margin: 0;
+	padding: 0 15px;
+	font-size: 24px;
+	line-height: 56px;
+	font-weight: 400;
+	color: #FFF;
+}
+
+.header nav {
+	float: right;
+	font-size: 100%;
+}
+
+.header nav a {
+	display: inline-block;
+	height: 56px;
+	line-height: 56px;
+	padding: 0 15px;
+	min-width: 50px;
+	text-align: center;
+	background: rgba(255,255,255,0);
+	text-decoration: none;
+	color: #FFF;
+	will-change: background-color;
+}
+
+.header nav a:hover,
+.header nav a:active {
+	background: rgba(0,0,0,0.2);
+}
+
+.header nav a.active {
+	background: rgba(0,0,0,0.4);
+}

src/components/header/style.css.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+declare namespace StyleCssNamespace {
+    export interface IStyleCss {
+        active: string;
+        header: string;
+    }
+}
+
+declare const StyleCssModule: StyleCssNamespace.IStyleCss;
+
+export = StyleCssModule;

src/index.js

@@ -0,0 +1,4 @@
+import "./style/index.css";
+import App from "./components/app.tsx";
+
+export default App;

src/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "fennec-fe",
+  "short_name": "fennec-fe",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#fff",
+  "theme_color": "#673ab8",
+  "icons": [
+    {
+      "src": "/assets/icons/android-chrome-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/assets/icons/android-chrome-512x512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ]
+}

src/routes/home/index.tsx

@@ -0,0 +1,13 @@
+import { FunctionalComponent, h } from "preact";
+import * as style from "./style.css";
+
+const Home: FunctionalComponent = () => {
+    return (
+        <div class={style.home}>
+            <h1>Home</h1>
+            <p>This is the Home component.</p>
+        </div>
+    );
+};
+
+export default Home;

src/routes/home/style.css

@@ -0,0 +1,5 @@
+.home {
+	padding: 56px 20px;
+	min-height: 100%;
+	width: 100%;
+}

src/routes/home/style.css.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+declare namespace StyleCssNamespace {
+    export interface IStyleCss {
+        home: string;
+    }
+}
+
+declare const StyleCssModule: StyleCssNamespace.IStyleCss;
+
+export = StyleCssModule;

src/routes/notfound/index.tsx

@@ -0,0 +1,17 @@
+import { FunctionalComponent, h } from "preact";
+import { Link } from "preact-router/match";
+import * as style from "./style.css";
+
+const Notfound: FunctionalComponent = () => {
+    return (
+        <div class={style.notfound}>
+            <h1>Error 404</h1>
+            <p>That page doesn&apos;t exist.</p>
+            <Link href="/">
+                <h4>Back to Home</h4>
+            </Link>
+        </div>
+    );
+};
+
+export default Notfound;

src/routes/notfound/style.css

@@ -0,0 +1,4 @@
+.notfound {
+    padding: 0 5%;
+    margin: 100px 0;
+}

src/routes/notfound/style.css.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+declare namespace StyleCssNamespace {
+    export interface IStyleCss {
+        notfound: string;
+    }
+}
+
+declare const StyleCssModule: StyleCssNamespace.IStyleCss;
+
+export = StyleCssModule;

src/routes/profile/index.tsx

@@ -0,0 +1,44 @@
+import { FunctionalComponent, h } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import * as style from "./style.css";
+
+interface Props {
+    user: string;
+}
+
+const Profile: FunctionalComponent<Props> = (props: Props) => {
+    const { user } = props;
+    const [time, setTime] = useState<number>(Date.now());
+    const [count, setCount] = useState<number>(0);
+
+    // gets called when this route is navigated to
+    useEffect(() => {
+        const timer = window.setInterval(() => setTime(Date.now()), 1000);
+
+        // gets called just before navigating away from the route
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+
+    // update the current time
+    const increment = () => {
+        setCount(count + 1);
+    };
+
+    return (
+        <div class={style.profile}>
+            <h1>Profile: {user}</h1>
+            <p>This is the user profile for a user named {user}.</p>
+
+            <div>Current time: {new Date(time).toLocaleString()}</div>
+
+            <p>
+                <button onClick={increment}>Click Me</button> Clicked {count}{" "}
+                times.
+            </p>
+        </div>
+    );
+};
+
+export default Profile;

src/routes/profile/style.css

@@ -0,0 +1,5 @@
+.profile {
+	padding: 56px 20px;
+	min-height: 100%;
+	width: 100%;
+}

src/routes/profile/style.css.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+declare namespace StyleCssNamespace {
+    export interface IStyleCss {
+        profile: string;
+    }
+}
+
+declare const StyleCssModule: StyleCssNamespace.IStyleCss;
+
+export = StyleCssModule;

src/style/index.css

@@ -0,0 +1,20 @@
+html, body {
+	height: 100%;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+	background: #FAFAFA;
+	font-family: 'Helvetica Neue', arial, sans-serif;
+	font-weight: 400;
+	color: #444;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+#app {
+	height: 100%;
+}

src/sw.js

@@ -0,0 +1,4 @@
+import { getFiles, setupPrecaching, setupRouting } from 'preact-cli/sw/';
+
+setupRouting();
+setupPrecaching(getFiles());

src/template.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title><% preact.title %></title>
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<meta name="mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+		<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png">
+		<% preact.headEnd %>
+	</head>
+	<body>
+		<% preact.bodyEnd %>
+	</body>
+</html>

src/tests/__mocks__/browserMocks.js

@@ -0,0 +1,21 @@
+// Mock Browser API's which are not supported by JSDOM, e.g. ServiceWorker, LocalStorage
+/**
+ * An example how to mock localStorage is given below 👇
+ */
+
+/* 
+// Mocks localStorage
+const localStorageMock = (function() {
+	let store = {};
+
+	return {
+		getItem: (key) => store[key] || null,
+		setItem: (key, value) => store[key] = value.toString(),
+		clear: () => store = {}
+	};
+
+})();
+
+Object.defineProperty(window, 'localStorage', {
+	value: localStorageMock
+}); */

src/tests/__mocks__/fileMocks.js

@@ -0,0 +1,3 @@
+// This fixed an error related to the CSS and loading gif breaking my Jest test
+// See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets
+export default "test-file-stub";

src/tests/__mocks__/setupTests.js

@@ -0,0 +1,6 @@
+import { configure } from "enzyme";
+import Adapter from "enzyme-adapter-preact-pure";
+
+configure({
+    adapter: new Adapter()
+});

src/tests/declarations.d.ts

@@ -0,0 +1,3 @@
+// Enable enzyme adapter's integration with TypeScript
+// See: https://github.com/preactjs/enzyme-adapter-preact-pure#usage-with-typescript
+/// <reference types="enzyme-adapter-preact-pure" />

src/tests/header.test.tsx

@@ -0,0 +1,12 @@
+import { h } from "preact";
+// See: https://github.com/preactjs/enzyme-adapter-preact-pure
+import { shallow } from "enzyme";
+import Header from "../components/header";
+
+describe("Initial Test of the Header", () => {
+    test("Header renders 3 nav items", () => {
+        const context = shallow(<Header />);
+        expect(context.find("h1").text()).toBe("Preact App");
+        expect(context.find("Link").length).toBe(3);
+    });
+});

tsconfig.eslint.json

@@ -0,0 +1,5 @@
+// see https://github.com/typescript-eslint/typescript-eslint/issues/890
+{
+    "extends": "./tsconfig.json",
+    "include": ["*.config.js", "src/**/*"]
+}

tsconfig.json

@@ -0,0 +1,57 @@
+{
+    "compilerOptions": {
+        /* Basic Options */
+        "target": "ES5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
+        "module": "ESNext",                       /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+        // "lib": [],                             /* Specify library files to be included in the compilation:  */
+        "allowJs": true,                          /* Allow javascript files to be compiled. */
+        // "checkJs": true,                       /* Report errors in .js files. */
+        "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+        "jsxFactory": "h",                        /* Specify the JSX factory function to use when targeting react JSX emit, e.g. React.createElement or h. */
+        // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+        // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+        // "outFile": "./",                       /* Concatenate and emit output to single file. */
+        // "outDir": "./",                        /* Redirect output structure to the directory. */
+        // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+        // "removeComments": true,                /* Do not emit comments to output. */
+        "noEmit": true,                           /* Do not emit outputs. */
+        // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+        // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+        // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+        /* Strict Type-Checking Options */
+        "strict": true,                           /* Enable all strict type-checking options. */
+        // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+        // "strictNullChecks": true,              /* Enable strict null checks. */
+        // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+        // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+        /* Additional Checks */
+        // "noUnusedLocals": true,                /* Report errors on unused locals. */
+        // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+        // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+        // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+        /* Module Resolution Options */
+        "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+        // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+        // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+        // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+        // "typeRoots": [],                       /* List of folders to include type definitions from. */
+        // "types": [],                           /* Type declaration files to be included in compilation. */
+        // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+        // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+        /* Source Map Options */
+        // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+        // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+        // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+        // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+        /* Experimental Options */
+        // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+        // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+        "esModuleInterop": true
+    },
+    "include": ["src/**/*.tsx", "src/**/*.ts"]
+}