feat(projects): 左侧项目菜单。

feat: tailwindcss + mobx + apollo.

.eslintignore

@@ -0,0 +1,5 @@
+preact.config.js
+src/generated/**/*
+postcss.js
+*.config.js
+tests/**/*

.eslintrc.js

@@ -2,40 +2,44 @@ module.exports = {
   env: {
     browser: true
   },
-    plugins: ["@typescript-eslint"],
+  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"
+    '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",
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
       jsx: true
     },
-        project: "./tsconfig.eslint.json",
+    project: './tsconfig.eslint.json'
   },
   rules: {
-        "react/no-unknown-property": ["error", { ignore: ["class"] }],
+    'react/no-unknown-property': ['error', { ignore: ['class'] }],
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    quotes: ['error', 'single'],
+    'prettier/prettier': ['error', { singleQuote: true }]
   },
   settings: {
     react: {
-            pragma: "h",
-            version: "detect"
-        },
+      pragma: 'h',
+      version: 'detect'
+    }
   },
   overrides: [
     {
-            files: ["*.js"],
+      files: ['*.js', '*.ts', '*.tsx'],
       rules: {
-                "@typescript-eslint/explicit-function-return-type": "off",
-            }
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/interface-name-prefix': 'off'
       }
+    },
   ]
 };

.prettierignore

@@ -2,3 +2,4 @@ package.json
 package-lock.json
 yarn.lock
 build
+preact.config.js

.prettierrc

@@ -1 +1,4 @@
-tabWidth: 4
+{
+  "tabWidth": 2,
+  "singleQuote": true
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "css.validate": false,
+  "scss.validate": false,
+  "editor.quickSuggestions": {
+    "strings": true,
+    "other": true,
+  }
+}

apollo.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  client: {
+    service: {
+      name: 'fennec-be',
+      url: 'http://localhost:7122/graphql'
+    }
+  }
+};

codegen.yml

@@ -0,0 +1,12 @@
+overwrite: true
+schema: "http://localhost:7122/graphql"
+# documents: "src/**/*.graphql"
+generates:
+  src/generated/graphql.tsx:
+    plugins:
+      - "typescript"
+      - "typescript-operations"
+      - "typescript-react-apollo"
+  ./graphql.schema.json:
+    plugins:
+      - "introspection"

jest.config.js

@@ -1,11 +1,12 @@
 module.exports = {
-    preset: "jest-preset-preact",
+  preset: 'jest-preset-preact',
   setupFiles: [
-        "<rootDir>/src/tests/__mocks__/setupTests.js",
-        "<rootDir>/src/tests/__mocks__/browserMocks.js"
+    '<rootDir>/tests/__mocks__/setupTests.js',
+    '<rootDir>/tests/__mocks__/browserMocks.js'
   ],
-    testURL: "http://localhost:8080",
+  testURL: 'http://localhost:7123',
   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",
-    }
+    '\\.(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

@@ -5,8 +5,10 @@
   "license": "MIT",
   "scripts": {
     "build": "preact build",
-    "serve": "sirv build --port 8080 --cors --single",
-    "dev": "preact watch",
+    "serve": "sirv build --port 7123 --cors --single",
+    "dev": "preact watch --port 7123",
+    "predev": "npm run graphql",
+    "graphql": "graphql-codegen --config codegen.yml",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "test": "jest ./tests"
   },
@@ -23,13 +25,25 @@
     "build/*"
   ],
   "dependencies": {
+    "@apollo/client": "^3.3.7",
+    "@tailwindcss/postcss7-compat": "^2.0.2",
+    "autoprefixer": "^9.8.6",
+    "graphql": "^15.5.0",
+    "mobx": "^6.1.4",
+    "mobx-react": "^7.1.0",
+    "postcss": "^7.0.35",
     "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"
+    "preact-router": "^3.2.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2"
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "^1.20.1",
+    "@graphql-codegen/introspection": "^1.18.1",
+    "@graphql-codegen/typescript-operations": "^1.17.14",
+    "@graphql-codegen/typescript-react-apollo": "^2.2.1",
     "@teamsupercell/typings-for-css-modules-loader": "^2.2.0",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^26.0.8",
@@ -50,6 +64,8 @@
     "lint-staged": "^10.0.7",
     "preact-cli": "^3.0.0",
     "prettier": "^1.19.1",
+    "sass": "^1.32.5",
+    "sass-loader": "^10.1.1",
     "sirv-cli": "^1.0.0-next.3",
     "typescript": "^3.7.5"
   }

postcss.js

@@ -0,0 +1,4 @@
+module.exports = {
+  modules: true,
+  plugins: [require('tailwindcss'), require('autoprefixer')]
+};

preact.config.js

@@ -1,4 +1,4 @@
-import { resolve } from "path";
+import { resolve } from 'path';
 
 export default {
   /**
@@ -12,19 +12,26 @@ export default {
    **/
   webpack(config, env, helpers, options) {
     config.module.rules[4].use.splice(1, 0, {
-            loader: "@teamsupercell/typings-for-css-modules-loader",
+      loader: '@teamsupercell/typings-for-css-modules-loader',
       options: {
         banner:
-                    "// This file is automatically generated from your CSS. Any edits will be overwritten.",
+          '// 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(
+    config.resolve.alias['preact-cli-entrypoint'] = resolve(
       process.cwd(),
-            "src",
-            "index"
+      'src',
+      'index'
     );
+
+    const postCssLoaders = helpers.getLoadersByName(config, 'postcss-loader');
+    postCssLoaders.forEach(({ loader }) => {
+      const plugins = loader.options.plugins;
+      // Add tailwind css at the top.
+      plugins.unshift(require('tailwindcss'));
+    });
   }
 };

src/components/app.scss

@@ -0,0 +1,7 @@
+.projectPanel {
+  @apply w-1/6;
+}
+
+.app {
+  @apply flex bg-red-50;
+}

src/components/app.scss.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+declare namespace AppScssNamespace {
+  export interface IAppScss {
+    app: string;
+    projectPanel: string;
+  }
+}
+
+declare const AppScssModule: AppScssNamespace.IAppScss;
+
+export = AppScssModule;

src/components/app.tsx

@@ -1,28 +1,49 @@
-import { FunctionalComponent, h } from "preact";
-import { Route, Router, RouterOnChangeArgs } from "preact-router";
+import {
+  ApolloClient,
+  ApolloProvider,
+  gql,
+  InMemoryCache,
+  useQuery
+} from '@apollo/client';
+import { FunctionalComponent, FunctionComponent, h } from 'preact';
+import { globalState } from '../global.state';
+import { ProjectPanel } from './projects/project-panel';
+import * as styles from './app.scss';
 
-import Home from "../routes/home";
-import Profile from "../routes/profile";
-import NotFoundPage from "../routes/notfound";
-import Header from "./header";
+const LIST_PROJECT = gql`
+  query listProject {
+    findProjects {
+      id
+      name
+      sshUrl
+      comment
+      webUrl
+    }
+  }
+`;
+
+const client = new ApolloClient({
+  uri: '/api/graphql',
+  cache: new InMemoryCache()
+});
 
 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>
+    <ApolloProvider client={client}>
+      <div id="app" class={styles.app}>
+        <Content />
       </div>
+    </ApolloProvider>
   );
 };
 
+const Content: FunctionComponent = () => {
+  const { loading, data } = useQuery(LIST_PROJECT);
+  globalState.projects = data?.findProjects;
+  console.log(globalState.projects);
+  const Loading: FunctionComponent = () => <div>Loading...</div>;
+  const Board: FunctionComponent = () => <ProjectPanel />;
+  return loading ? <Loading /> : <Board />;
+};
+
 export default App;

src/components/header/index.tsx

@@ -1,24 +0,0 @@
-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

@@ -1,48 +0,0 @@
-.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

@@ -1,11 +0,0 @@
-// 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/components/projects/project-panel.scss

@@ -0,0 +1,29 @@
+.panel {
+  @apply h-full overflow-auto;
+
+  h1 {
+    @apply bg-red-400 text-white text-lg text-center p-2;
+  }
+}
+.list {
+  @apply bg-red-200;
+}
+.item {
+  @apply block bg-gray-50 text-red-400 py-2 px-4 my-px cursor-pointer transition-colors;
+  @apply hover:bg-red-50;
+
+  h3 {
+  }
+  small {
+    @apply text-sm text-red-300;
+  }
+}
+
+.itemActive {
+  @apply text-white bg-red-400;
+  @apply hover:bg-red-400;
+
+  small {
+    @apply text-red-100;
+  }
+}

src/components/projects/project-panel.scss.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+declare namespace ProjectPanelScssNamespace {
+  export interface IProjectPanelScss {
+    item: string;
+    itemActive: string;
+    list: string;
+    panel: string;
+  }
+}
+
+declare const ProjectPanelScssModule: ProjectPanelScssNamespace.IProjectPanelScss;
+
+export = ProjectPanelScssModule;

src/components/projects/project-panel.tsx

@@ -0,0 +1,37 @@
+import { observer } from 'mobx-react';
+import { FunctionComponent, h } from 'preact';
+import { Project } from '../../generated/graphql';
+import { GlobalState, globalState } from '../../global.state';
+import * as styles from './project-panel.scss';
+
+export function ProjectPanel() {
+  return (
+    <section class={styles.panel}>
+      <h1>Fennec</h1>
+      <List globalState={globalState} />
+    </section>
+  );
+}
+
+const List: FunctionComponent<{ globalState: GlobalState }> = observer(
+  ({ globalState }) => {
+    const setCurrProejct = (project: Project) => {
+      globalState.setCurrentProject(project);
+    };
+    console.log('change');
+
+    const list = globalState.projects?.map(item => (
+      <li
+        class={`${styles.item} ${
+          item === globalState.currentProject ? styles.itemActive : ''
+        }`}
+        key={item.id}
+        onClick={() => setCurrProejct(item)}
+      >
+        <h3>{item.name}</h3>
+        <small>{item.comment}</small>
+      </li>
+    ));
+    return <ol class={styles.list}>{list}</ol>;
+  }
+);

src/generated/graphql.tsx

@@ -0,0 +1,82 @@
+import { gql } from '@apollo/client';
+export type Maybe<T> = T | null;
+export type Exact<T extends { [key: string]: unknown }> = {
+  [K in keyof T]: T[K];
+};
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> &
+  { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> &
+  { [SubKey in K]: Maybe<T[SubKey]> };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+  /** A date-time string at UTC, such as 2019-12-03T09:54:33Z, compliant with the date-time format. */
+  DateTime: any;
+};
+
+export type Hello = {
+  __typename?: 'Hello';
+  message: Scalars['String'];
+};
+
+export type Project = {
+  __typename?: 'Project';
+  id: Scalars['ID'];
+  name: Scalars['String'];
+  comment: Scalars['String'];
+  sshUrl: Scalars['String'];
+  webUrl?: Maybe<Scalars['String']>;
+  webHookSecret?: Maybe<Scalars['String']>;
+  deletedAt?: Maybe<Scalars['DateTime']>;
+};
+
+export type Query = {
+  __typename?: 'Query';
+  hello: Hello;
+  findProjects: Array<Project>;
+  findProject: Project;
+};
+
+export type QueryFindProjectArgs = {
+  id: Scalars['String'];
+};
+
+export type Mutation = {
+  __typename?: 'Mutation';
+  createProject: Project;
+  modifyProject: Scalars['Boolean'];
+  deleteProject: Scalars['Float'];
+};
+
+export type MutationCreateProjectArgs = {
+  project: CreateProjectInput;
+};
+
+export type MutationModifyProjectArgs = {
+  project: UpdateProjectInput;
+  id: Scalars['String'];
+};
+
+export type MutationDeleteProjectArgs = {
+  id: Scalars['String'];
+};
+
+export type CreateProjectInput = {
+  name: Scalars['String'];
+  comment: Scalars['String'];
+  sshUrl: Scalars['String'];
+  webUrl?: Maybe<Scalars['String']>;
+  webHookSecret?: Maybe<Scalars['String']>;
+};
+
+export type UpdateProjectInput = {
+  name: Scalars['String'];
+  comment: Scalars['String'];
+  sshUrl: Scalars['String'];
+  webUrl?: Maybe<Scalars['String']>;
+  webHookSecret?: Maybe<Scalars['String']>;
+};

src/global.state.ts

@@ -0,0 +1,18 @@
+import { action, makeAutoObservable, observable } from 'mobx';
+import { Project } from './generated/graphql';
+
+export class GlobalState {
+  @observable projects?: Project[];
+  @observable currentProject?: Project;
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  @action
+  setCurrentProject(project: Project) {
+    this.currentProject = project;
+  }
+}
+
+export const globalState = new GlobalState();

src/index.js

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

src/routes/home/index.tsx

@@ -1,13 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-// 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

@@ -1,17 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-// 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

@@ -1,44 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-// 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

@@ -1,9 +1,14 @@
-html, body {
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
   height: 100%;
   width: 100%;
   padding: 0;
   margin: 0;
-	background: #FAFAFA;
+  background: #fafafa;
   font-family: 'Helvetica Neue', arial, sans-serif;
   font-weight: 400;
   color: #444;

src/template.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-Hans-CN">
 	<head>
 		<meta charset="utf-8">
 		<title><% preact.title %></title>

src/tests/__mocks__/setupTests.js

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

src/tests/header.test.tsx

@@ -1,12 +0,0 @@
-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);
-    });
-});

stylelint.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  rules: {
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen']
+      }
+    ],
+    'declaration-block-trailing-semicolon': null,
+    'no-descending-specificity': null
+  }
+};

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: [],
+  darkMode: 'class', // or 'media' or 'class'
+  theme: {
+    extend: {}
+  },
+  variants: {
+    extend: {}
+  },
+  plugins: []
+};

tests/__mocks__/fileMocks.js

@@ -1,3 +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";
+export default 'test-file-stub';

tests/__mocks__/setupTests.js

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

tests/header.test.tsx

@@ -0,0 +1,13 @@
+/* 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.json

@@ -1,26 +1,26 @@
 {
   "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'. */
+    "target": "ES6" /* 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. */
+    "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. */
+    "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. */
+    "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. */
+    "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. */
@@ -33,7 +33,7 @@
     // "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). */
+    "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. */
@@ -49,9 +49,11 @@
     // "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
+    "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
+    "emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */,
+    "esModuleInterop": true,
+    
+    "useDefineForClassFields": true
   },
   "include": ["src/**/*.tsx", "src/**/*.ts"]
 }