drop flow, use typescript (#57)

* drop flow, use typescript

* several fixes

* smallish fixes

* added dependency-graph gimmick

Author: manuelbieh

.circleci/config.yml

@@ -0,0 +1,31 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: circleci/node:10.15
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      # run tests!
+      - run: yarn lint
+
+      - run: yarn tsc
+
+      - run: yarn test

.dependency-cruiser.js

@@ -79,6 +79,9 @@ module.exports = {
         },
     ],
     options: {
+        tsConfig: {
+            fileName: 'tsconfig.json',
+        },
         /* conditions specifying which files not to follow further when encountered:
            - path: a regular expression to match
            - dependencyTypes: see https://github.com/sverweij/dependency-cruiser/blob/develop/doc/rules-reference.md#dependencytypes
@@ -99,7 +102,7 @@ module.exports = {
         /* pattern specifying which files to exclude (regular expression) */
         // , exclude : ''
 
-        /* pattern specifying which files to include (regular expression) 
+        /* pattern specifying which files to include (regular expression)
            dependency-cruiser will skip everything not matching this pattern
         */
         // , includeOnly : ''

.eslintignore

@@ -1,4 +1,5 @@
 **/node_modules
 **/public
 src/frontend/config/env.js
-**/build
+**/build
+*.d.ts

.eslintrc.js

@@ -1,36 +1,26 @@
 const paths = require('./config/paths');
 
 module.exports = {
-    extends: [
-        'wiremore',
-        'wiremore/react',
-        'prettier',
-        'prettier/react',
-        'plugin:flowtype/recommended',
-        'plugin:import/errors',
-        'plugin:import/warnings',
-        'plugin:prettier/recommended',
-        'plugin:security/recommended',
-    ],
+    extends: ['wiremore', 'wiremore/react', 'wiremore/typescript'],
     globals: {
         __BROWSER__: true,
         __SERVER__: true,
     },
-    plugins: ['babel', 'import', 'prettier', 'flowtype', 'security'],
     settings: {
         'import/resolver': {
             node: {
                 paths: paths.resolveModules,
+                extensions: ['.js', '.jsx', '.ts', '.tsx'],
             },
         },
         react: {
             version: 'detect',
         },
     },
     rules: {
-        'import/named': 0,
         'import/no-unassigned-import': 0,
         'import/no-named-as-default-member': 0,
         'prettier/prettier': 'error',
     },
+    // overrides: [{ files: ['*.tsx'], rules: { 'import/named': 0 } }],
 };

.flowconfig

@@ -15,3 +15,4 @@ yarn-error.log
 tmp
 bundle-stats.json
 .vscode
+/dependency-graph.svg

.gitignore

@@ -1,15 +1,15 @@
 {
   "linters": {
-    "*.{js,jsx,css}": [
+    "*.{js,jsx,ts,tsx,css}": [
       "prettier --write",
       "git add"
     ],
-    "*.{js,jsx}": [
-      "eslint src --fix",
+    "*.{js,jsx,ts,tsx}": [
+      "yarn lint:js --fix",
       "git add"
     ],
     "*.css": [
-      "stylelint src/**/*.css --fix",
+      "yarn lint:css --fix",
       "git add"
     ]
   }

.lintstagedrc

@@ -9,3 +9,6 @@ overrides:
   - files: "*.json"
     options:
       tabWidth: 2
+  - files: "*.yml"
+    options:
+      tabWidth: 2

.prettierrc

@@ -6,6 +6,16 @@
   "extends": ["stylelint-prettier/recommended"],
   "rules": {
     "declaration-block-no-shorthand-property-overrides": [true, { "severity": "warning" } ],
-    "order/properties-alphabetical-order": true
+    "order/properties-alphabetical-order": true,
+    "color-no-invalid-hex": true,
+    "font-family-no-duplicate-names": true,
+    "function-calc-no-invalid": true,
+    "function-calc-no-unspaced-operator": true,
+    "unit-no-unknown": true,
+    "property-no-unknown": [true, { "severity": "warning" }],
+    "block-no-empty": true,
+    "no-duplicate-at-import-rules": true,
+    "no-extra-semicolons": true,
+    "no-invalid-double-slash-comments": true
   }
 }

.stylelintrc

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.0-beta.0 (2019-05-02)
+
+-   Dropped Flow Type in favor of TypeScript (sorry Flow, but the battle is lost)
+
 ## 2.9.0 (2019-04-28)
 
 -   Experimentally added dependency-cruiser

CHANGELOG.md

@@ -1,12 +1,12 @@
-# ⚛ React + Express – SSR Setup
+# ⚛ React + Express – SSR Setup with TypeScript
 
 [![Maintainability](https://api.codeclimate.com/v1/badges/085d871cd62fe4435865/maintainability)](https://codeclimate.com/github/manuelbieh/react-ssr-setup/maintainability)
 [![dependencies Status](https://david-dm.org/manuelbieh/react-ssr-setup/status.svg)](https://david-dm.org/manuelbieh/react-ssr-setup)
 [![Known Vulnerabilities](https://snyk.io/test/github/manuelbieh/react-ssr-setup/badge.svg)](https://snyk.io/test/github/manuelbieh/react-ssr-setup)
 [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 
 **Advertising**: I wrote a book about React. If you speak German, buy it here: [https://leanpub.com/react-lernen](https://leanpub.com/react-lernen)!
-  
+
 [![](./src/shared/assets/book-cover-small.png)](https://leanpub.com/react-lernen)
 
 ## TOC
@@ -24,6 +24,7 @@
     -   [Avoid source map generation for faster builds](#avoid-source-map-generation-for-faster-builds)
     -   [Change the port of the dev environment](#change-the-port-of-the-dev-environment)
     -   [Import SVGs as ReactComponent](#import-svgs-as-reactcomponent)
+    -   [Use plain JavaScript instead of TypeScript](#use-plain-javascript-instead-of-typescript)
 -   [Caveats](#caveats)
 -   [Todo](#todo)
 -   [Changelog](#changelog)
@@ -50,9 +51,9 @@ This project has out-of-the-box support for the following things:
 
 -   General Setup
     -   🔥 Babel 7
-    -   🔥 Webpack 4
+    -   📦 Webpack 4
     -   🔥 ESLint 5 (with a set of custom rules which may be mostly identical to AirBnB with some personal flavor added)
-    -   🔥 Flow Type
+    -   🔥 TypeScript (via Babel)
     -   🔥 Prettier
     -   🔥 Jest 24
     -   ✅ Server Side Rendering with Express
@@ -168,6 +169,18 @@ Then you can use it in JSX like `<div><Logo /></div>`.
 
 [Here is a video](https://egghead.io/lessons/react-add-svgs-as-react-components-with-create-react-app-2-0) that explains that a bit more.
 
+### Use plain JavaScript instead of TypeScript
+
+You can just do it‬™. Really. Name your files `.js` instead of `.ts`/`.tsx` and you should not be bothered by TypeScript anymore. If you want to _fully_ remove TypeScript:
+
+-   remove the `@babel/typescript` preset from `babel.config.js`
+-   uninstall TypeScript: `yarn remove typescript @babel/preset-typescript`
+-   uninstall all dependencies beginning with `@types/`
+-   delete `tsconfig.json` and `src/global.d.ts`
+-   remove `wiremore/typescript` from the `extends` section in `.eslintrc.js`
+-   remove all types from all files if there still are any
+-   remove `tsConfig` option from `.dependency-cruiser.js`
+
 ## Caveats
 
 -   ~~[1] MiniCSSExtractPlugin doesn't play nicely with consecutive builds in Webpack's watchmode yet ([Github issue here](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/23)). So I'm using ExtractTextWebpackPlugin until this is fixed~~ Fixed! [490e6e9](https://github.com/manuelbieh/react-ssr-setup/commit/490e6e95fc811b0ce42d1bbc1252d3f26c4bd1ab)
@@ -184,7 +197,7 @@ Then you can use it in JSX like `<div><Logo /></div>`.
 -   [x] ~~Add `react-loadable` or `react-universal-component` (or both, still investigating what makes most sense). **Update:** `react-loadable` is out due to [questionable license change](https://github.com/jamiebuilds/react-loadable/commit/c3272b3132e4fe25937c3610b7cd0dd2da48c5e9)~~ Just use React.lazy which was introduced in React 16.6.
 -   [x] Improve server side template
 -   [x] Add (and use) `react-helmet`
--   [ ] Add/improve server side chunk loading
+-   [ ] ~~Add/improve server side chunk loading~~ - Wait for the new React Fizz Renderer to land
 -   [x] Add test setup using Jest
 -   [ ] Add `optimize-css-assets-webpack-plugin` and `postcss-safe-parser` similar to how CRA 2 is doing it
 -   [x] Modify ~~`svg-loader`~~ `babel-loader` so SVGs can be imported as React component (see CRA 2)

README.md

@@ -11,7 +11,7 @@ module.exports = {
             },
         ],
         '@babel/react',
-        '@babel/flow',
+        '@babel/typescript',
     ],
     plugins: [
         '@babel/proposal-object-rest-spread',

babel.config.js

@@ -0,0 +1 @@
+module.exports = ['js', 'jsx', 'ts', 'tsx', 'mjs'];

config/filetypes.js

@@ -13,6 +13,7 @@ const paths = {
     srcClient: resolveApp('src/client'),
     srcServer: resolveApp('src/server'),
     srcShared: resolveApp('src/shared'),
+    types: resolveApp('node_modules/@types'),
     publicPath: '/static/',
 };
 

config/paths.js

@@ -1,12 +1,6 @@
-{{#if useFlow}}// @flow
-import * as React from 'react';
-
-type PropsT = {};
-{{else}}
 import React from 'react';
-{{/if}}
 
-const {{pascalCase componentName}} = (props{{#if useFlow}}: PropsT{{/if}}) => {
+const {{pascalCase componentName}} = (props) => {
     return <div />;
 };
 

config/plop/component/component.js.plop

@@ -1,6 +1,3 @@
-// @flow
-// import type { Dispatch } from 'redux';
-
 export const ActionTypes = {
     {{upperCase (snakeCase reducerName) }}_REQUEST: '{{pkg 'name'}}/{{dashCase reducerName}}/request',
     {{upperCase (snakeCase reducerName) }}_SUCCESS: '{{pkg 'name'}}/{{dashCase reducerName}}/success',
@@ -12,7 +9,7 @@ export const {{pascalCase reducerName}}Request = () => ({
     type: ActionTypes.{{upperCase (snakeCase reducerName)}}_REQUEST,
 });
 
-export const {{pascalCase reducerName}}Success = (items: {{pascalCase reducerName}}T[]) => ({
+export const {{pascalCase reducerName}}Success = (items: {{pascalCase reducerName}}[]) => ({
     type: ActionTypes.{{upperCase (snakeCase reducerName)}}_SUCCESS,
     payload: {
         items,

config/plop/reducer/actions.js.plop

@@ -1,15 +1,14 @@
-// @flow
 import { ActionTypes } from './actions';
-import type { ActionT, {{pascalCase reducerName}}StateT } from './types';
+import { Action, {{pascalCase reducerName}}State } from './types';
 
-export const initialState: {{pascalCase reducerName}}StateT = Object.freeze({
+export const initialState: {{pascalCase reducerName}}State = Object.freeze({
     didInvalidate: false,
     isLoading: false,
     items: [],
     updatedAt: null,
 });
 
-export default (state: {{pascalCase reducerName}}StateT = initialState, action: ActionT) => {
+export default (state: {{pascalCase reducerName}}State = initialState, action: Action) => {
     switch (action.type) {
         case ActionTypes.{{upperCase (snakeCase reducerName)}}_REQUEST:
             return {

config/plop/reducer/reducer.js.plop

@@ -1,20 +1,19 @@
-// @flow
 import { createSelector } from 'reselect';
-import type { {{pascalCase reducerName}}StateT } from './types';
+import { {{pascalCase reducerName}}State } from './types';
 
 // Cache TTL in Milliseconds
 const CACHE_TTL = 60 * 1000;
 
-export const get{{pascalCase reducerName}} = (state: { {{camelCase reducerName}}: {{pascalCase reducerName}}StateT }) => state.{{camelCase reducerName}} || {};
+export const get{{pascalCase reducerName}} = (state: { {{camelCase reducerName}}: {{pascalCase reducerName}}State }) => state.{{camelCase reducerName}} || {};
 
 export const get{{pascalCase reducerName}}Items = createSelector(
     [get{{pascalCase reducerName}}],
-    ({{camelCase reducerName}}): Array<*> => {
+    ({{camelCase reducerName}}): Array<any> => {
         return {{camelCase reducerName}}.items;
     }
 );
 
-export const isExpired = (state: { {{camelCase reducerName}}: {{pascalCase reducerName}}StateT }): boolean => {
+export const isExpired = (state: { {{camelCase reducerName}}: {{pascalCase reducerName}}State }): boolean => {
     const { updatedAt, didInvalidate } = get{{pascalCase reducerName}}(state);
     if (didInvalidate === true || !updatedAt || Date.now() - updatedAt > CACHE_TTL) {
         return true;

config/plop/reducer/selectors.js.plop

@@ -1,15 +1,14 @@
-// @flow
-export type {{pascalCase reducerName}}StateT = {
+export {{pascalCase reducerName}}State = {
     didInvalidate: boolean,
     isLoading: boolean,
-    items: {{pascalCase reducerName}}T[],
-    updatedAt: ?number,
+    items: {{pascalCase reducerName}}[],
+    updatedAt: number | null,
 };
 
-export type {{pascalCase reducerName}}T = {};
+export type {{pascalCase reducerName}} = {};
 
-export type GenericActionT = {
+export type GenericAction = {
     type: '{{pkg 'name'}}/{{dashCase reducerName}}/request' | '{{pkg 'name'}}/{{dashCase reducerName}}/invalidate',
 };
 
-export type ActionT = GenericActionT;
+export type Action = GenericAction;

config/plop/reducer/types.js.plop

@@ -1,9 +1,9 @@
 const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
 const paths = require('../paths');
 const { client: clientLoaders } = require('./loaders');
 const resolvers = require('./resolvers');
 const plugins = require('./plugins');
-const TerserPlugin = require('terser-webpack-plugin');
 const generateSourceMap = process.env.OMIT_SOURCEMAP === 'true' ? false : true;
 
 module.exports = {
@@ -13,7 +13,7 @@ module.exports = {
         bundle: [
             require.resolve('core-js/stable'),
             require.resolve('regenerator-runtime/runtime'),
-            `${paths.srcClient}/index.js`,
+            paths.srcClient,
         ],
     },
     output: {