From c3add4bfa6c66a2fd4e52c9988ff796fb399de81 Mon Sep 17 00:00:00 2001 From: piglovesyou Date: Wed, 3 Apr 2019 16:17:49 +0900 Subject: [PATCH 01/28] install necessary packages --- package.json | 1 + yarn.lock | 13 +++++++++++++ 2 files changed, 14 insertions(+) diff --git a/package.json b/package.json index 5bdf6caae..5e082ca57 100644 --- a/package.json +++ b/package.json @@ -86,6 +86,7 @@ "file-loader": "^3.0.1", "flow-bin": "^0.88.0", "flow-typed": "^2.5.1", + "fork-ts-checker-webpack-plugin": "^1.0.1", "front-matter": "^3.0.1", "glob": "^7.1.3", "husky": "^1.3.1", diff --git a/yarn.lock b/yarn.lock index 67534d291..2782d2fe2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5768,6 +5768,19 @@ fork-ts-checker-webpack-plugin@1.0.0-alpha.6: semver "^5.6.0" tapable "^1.0.0" +fork-ts-checker-webpack-plugin@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.0.1.tgz#140453c4dc3dc35937034b7416b66a3bacfbc3a8" + integrity sha512-RrVxSiNtngsFDLQpP2QlrVaJK1zqRdwhtwslmDUWQTg3t3GW8QN7D3EpW/EAI+oqTqL0dGvLyluyYQ/eIrIHvQ== + dependencies: + babel-code-frame "^6.22.0" + chalk "^2.4.1" + chokidar "^2.0.4" + micromatch "^3.1.10" + minimatch "^3.0.4" + semver "^5.6.0" + tapable "^1.0.0" + form-data@~2.3.1, form-data@~2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.2.tgz#4970498be604c20c005d4f5c23aecd21d6b49099" From 3d9d28f396ce586e011aa7043a3d195d08431264 Mon Sep 17 00:00:00 2001 From: piglovesyou Date: Wed, 3 Apr 2019 16:20:05 +0900 Subject: [PATCH 02/28] default tsconfig.json --- tsconfig.json | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 tsconfig.json diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 000000000..c05067924 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,54 @@ +{ + "compilerOptions": { + /* Basic Options */ + "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */, + "module": "commonjs" /* 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": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ + // "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. */ + } +} From 5e11a4eedd19d6e5696be0b8f321f8f6302582d5 Mon Sep 17 00:00:00 2001 From: piglovesyou Date: Wed, 3 Apr 2019 16:27:10 +0900 Subject: [PATCH 03/28] broken: setup babel/preset-typescript --- babel.config.js | 2 +- tools/webpack.config.js | 6 +++--- tsconfig.json | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/babel.config.js b/babel.config.js index fdbbc882a..3966d79a3 100644 --- a/babel.config.js +++ b/babel.config.js @@ -19,8 +19,8 @@ module.exports = { }, }, ], - '@babel/preset-flow', '@babel/preset-react', + '@babel/preset-typescript', ], plugins: [ '@babel/plugin-proposal-class-properties', diff --git a/tools/webpack.config.js b/tools/webpack.config.js index 905200b7c..1088cf7d8 100644 --- a/tools/webpack.config.js +++ b/tools/webpack.config.js @@ -91,12 +91,12 @@ const config = { debug: false, }, ], - // Flow - // https://github.com/babel/babel/tree/master/packages/babel-preset-flow - '@babel/preset-flow', // JSX // https://github.com/babel/babel/tree/master/packages/babel-preset-react ['@babel/preset-react', { development: isDebug }], + + // TypeScript + '@babel/preset-typescript', ], plugins: [ // Experimental ECMAScript proposals diff --git a/tsconfig.json b/tsconfig.json index c05067924..d701f7251 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,10 +1,10 @@ { "compilerOptions": { /* Basic Options */ - "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */, - "module": "commonjs" /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */, + "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */, + // "module": "commonjs" /* 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": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ // "declaration": true, /* Generates corresponding '.d.ts' file. */ @@ -13,7 +13,7 @@ // "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'). */ From 417e3ac713704bcb5df919f8a98b6eca3b09f63e Mon Sep 17 00:00:00 2001 From: piglovesyou Date: Wed, 3 Apr 2019 16:30:11 +0900 Subject: [PATCH 04/28] m --- tools/webpack.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tools/webpack.config.js b/tools/webpack.config.js index 1088cf7d8..bae0fbec0 100644 --- a/tools/webpack.config.js +++ b/tools/webpack.config.js @@ -284,6 +284,10 @@ const config = { ], }, + resolve: { + extensions: ['.ts', '.tsx', '.js', '.json'], + }, + // Don't attempt to continue if there are any errors. bail: !isDebug, From bbd0527c23571c374dec457f0e9930997910d84a Mon Sep 17 00:00:00 2001 From: piglovesyou Date: Wed, 3 Apr 2019 22:04:07 +0900 Subject: [PATCH 05/28] broken: but it launches --- package.json | 21 +++ src/components/App.js | 1 - src/components/App.tsx | 34 ++++ src/components/Html.js | 1 - src/components/Html.tsx | 70 ++++++++ src/components/Layout/Layout.js | 1 - src/components/Layout/Layout.test.js | 1 - src/components/Layout/Layout.test.tsx | 41 +++++ src/components/Layout/Layout.tsx | 34 ++++ src/components/Layout/package.json | 2 +- src/components/Link/Link.js | 1 - src/components/Link/package.json | 2 +- src/components/Navigation/Navigation.js | 1 - src/components/Navigation/Navigation.tsx | 35 ++++ src/components/Navigation/package.json | 2 +- src/components/Page/Page.js | 1 - src/components/Page/Page.tsx | 31 ++++ src/components/Page/package.json | 2 +- src/context.ts | 13 ++ src/core/createApolloClient/createCache.ts | 18 ++ src/routes/admin/Admin.tsx | 28 +++ src/routes/contact/Contact.tsx | 28 +++ src/routes/error/ErrorPage.tsx | 42 +++++ src/routes/home/Home.tsx | 55 ++++++ src/routes/login/Login.tsx | 99 +++++++++++ src/routes/not-found/NotFound.tsx | 27 +++ src/routes/register/Register.tsx | 28 +++ src/server.js | 2 +- tools/codegen.js | 2 +- tsconfig.json | 2 +- yarn.lock | 195 ++++++++++++++++++++- 31 files changed, 803 insertions(+), 17 deletions(-) create mode 100644 src/components/App.tsx create mode 100644 src/components/Html.tsx create mode 100644 src/components/Layout/Layout.test.tsx create mode 100644 src/components/Layout/Layout.tsx create mode 100644 src/components/Navigation/Navigation.tsx create mode 100644 src/components/Page/Page.tsx create mode 100644 src/context.ts create mode 100644 src/core/createApolloClient/createCache.ts create mode 100644 src/routes/admin/Admin.tsx create mode 100644 src/routes/contact/Contact.tsx create mode 100644 src/routes/error/ErrorPage.tsx create mode 100644 src/routes/home/Home.tsx create mode 100644 src/routes/login/Login.tsx create mode 100644 src/routes/not-found/NotFound.tsx create mode 100644 src/routes/register/Register.tsx diff --git a/package.json b/package.json index 5e082ca57..47878a410 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,27 @@ "@babel/preset-env": "^7.4.1", "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", + "@types/body-parser": "^1.17.0", + "@types/classnames": "^2.2.7", + "@types/cookie-parser": "^1.4.1", + "@types/express": "^4.16.1", + "@types/express-jwt": "^0.0.42", + "@types/graphql": "^14.2.0", + "@types/history": "^4.7.2", + "@types/jsonwebtoken": "^8.3.2", + "@types/lodash.merge": "^4.6.6", + "@types/node-fetch": "^2.1.7", + "@types/passport": "^1.0.0", + "@types/passport-facebook": "^2.1.8", + "@types/query-string": "^6.3.0", + "@types/react": "^16.8.10", + "@types/react-dom": "^16.8.3", + "@types/sequelize": "^4.27.46", + "@types/serialize-javascript": "^1.5.0", + "@types/source-map-support": "^0.5.0", + "@types/sqlite3": "^3.1.5", + "@types/universal-router": "^8.0.0", + "@types/whatwg-fetch": "^0.0.33", "apollo": "^2.6.2", "autoprefixer": "^9.5.0", "babel-core": "^7.0.0-bridge.0", diff --git a/src/components/App.js b/src/components/App.js index 2f8a529c4..4c9b7473b 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -7,7 +7,6 @@ * LICENSE.txt file in the root directory of this source tree. */ -// @flow import React from 'react'; import type { Node } from 'react'; diff --git a/src/components/App.tsx b/src/components/App.tsx new file mode 100644 index 000000000..0bf1d5260 --- /dev/null +++ b/src/components/App.tsx @@ -0,0 +1,34 @@ +/** + * React Starter Kit (https://www.reactstarterkit.com/) + * + * Copyright © 2014-present Kriasoft, LLC. All rights reserved. + * + * This source code is licensed under the MIT license found in the + * LICENSE.txt file in the root directory of this source tree. + */ + +import React from 'react'; +import { Node } from 'react'; +import { ApolloProvider } from 'react-apollo'; +import StyleContext from 'isomorphic-style-loader/StyleContext'; +import { AppContextTypes } from '../context'; +import { AppContext } from '../context'; + +interface Props { + insertCss: Function; + client: any; + context: AppContextTypes; + children: Node; +} + +const App = ({ client, insertCss, context, children }: Props) => ( + // NOTE: If you need to add or modify header, footer etc. of the app, + // please do that inside the Layout component. + + + {children} + + +); + +export default App; diff --git a/src/components/Html.js b/src/components/Html.js index 5d24a53be..7998a0365 100644 --- a/src/components/Html.js +++ b/src/components/Html.js @@ -7,7 +7,6 @@ * LICENSE.txt file in the root directory of this source tree. */ -// @flow import React from 'react'; import serialize from 'serialize-javascript'; diff --git a/src/components/Html.tsx b/src/components/Html.tsx new file mode 100644 index 000000000..17f8a5022 --- /dev/null +++ b/src/components/Html.tsx @@ -0,0 +1,70 @@ +/** + * React Starter Kit (https://www.reactstarterkit.com/) + * + * Copyright © 2014-present Kriasoft, LLC. All rights reserved. + * + * This source code is licensed under the MIT license found in the + * LICENSE.txt file in the root directory of this source tree. + */ + +import React from 'react'; +import serialize from 'serialize-javascript'; +import { config } from '../config'; + +/* eslint-disable react/no-danger */ + +interface PropTypes { + title: string; + description: string; + styles?: Array<{ + id: string; + cssText: string; + }>; + + scripts?: string[]; + app: any; + children: string; +} + +const Html = ({ title, description, styles = [], scripts = [], app, children }: PropTypes) => ( + + + + + {title} + + + {scripts.map((script) => ( + + ))} + + + + {styles.map((style) => ( +