Upgrade typescript example

.all-contributorsrc

@@ -56,6 +56,15 @@
         "code",
         "ideas"
       ]
+    },
+    {
+      "login": "HofmannZ",
+      "name": "Zino Hofmann",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/17142193?v=4",
+      "profile": "https://www.linkedin.com/in/zinohofmann/",
+      "contributions": [
+        "example"
+      ]
     }
   ]
 }

examples/with-typescript/package.json

@@ -9,27 +9,27 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "express": "^4.15.3",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "express": "^4.16.3",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "react-router-dom": "^4.2.2"
   },
   "devDependencies": {
-    "@types/express": "^4.0.35",
-    "@types/jest": "^20.0.1",
-    "@types/node": "8.0.53",
-    "@types/react": "^16.0.9",
-    "@types/react-dom": "^16.0.0",
-    "@types/react-router-dom": "^4.2.3",
-    "@types/webpack-env": "^1.13.2",
+    "@types/express": "^4.11.1",
+    "@types/jest": "^22.2.3",
+    "@types/node": "9.6.6",
+    "@types/react": "^16.3.12",
+    "@types/react-dom": "^16.0.5",
+    "@types/react-router-dom": "^4.2.6",
+    "@types/webpack-env": "^1.13.6",
     "raf": "^3.4.0",
     "razzle": "^2.0.0-alpha.12",
-    "ts-jest": "20.0.6",
-    "ts-loader": "^4.1.0",
-    "tslint": "5.9.1",
-    "tslint-loader": "wbuchwalter/tslint-loader",
-    "tslint-react": "^3.2.0",
-    "typescript": "2.5.1"
+    "ts-jest": "^22.4.4",
+    "ts-loader": "^4.2.0",
+    "tslint": "^5.9.1",
+    "tslint-loader": "^4.2.0",
+    "tslint-react": "^3.5.1",
+    "typescript": "^2.8.3"
   },
   "jest": {
     "transform": {

examples/with-typescript/razzle.config.js

@@ -35,14 +35,17 @@ module.exports = {
     const tsLoader = {
       include,
       test: /\.tsx?$/,
-      loader: require.resolve('ts-loader'),
+      loader: 'ts-loader',
+      options: {
+        transpileOnly: true,
+      },
     };
 
     const tslintLoader = {
       include,
       enforce: 'pre',
       test: /\.tsx?$/,
-      loader: require.resolve('tslint-loader'),
+      loader: 'tslint-loader',
       options: {
         emitErrors: true,
         configFile: './tslint.json',

examples/with-typescript/src/Home.tsx

@@ -13,7 +13,7 @@ class Home extends React.Component<{}, {}> {
         </div>
         <p className="Home-intro">
           To get started, edit <code>src/App.tsx</code> or{' '}
-          <code>src/Home.tsx</code> and save asdasdfto reload.
+          <code>src/Home.tsx</code> and save to reload.
         </p>
         <ul className="Home-resources">
           <li>

package.json

@@ -18,12 +18,14 @@
     "e2e": "jest --config ./test/jest.config.json --verbose --no-cache ",
     "clean": "lerna clean --yes && node ./scripts/clean.js",
     "changelog": "lerna-changelog",
-    "format":
-      "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'",
+    "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'",
     "precommit": "lint-staged"
   },
   "lint-staged": {
-    "*.js": ["prettier --trailing-comma es5 --single-quote --write", "git add"]
+    "*.js": [
+      "prettier --trailing-comma es5 --single-quote --write",
+      "git add"
+    ]
   },
   "resolutions": {
     "file-loader": "1.1.11"
@@ -35,7 +37,9 @@
       "<rootDir>/node_modules/",
       "<rootDir>/examples/"
     ],
-    "collectCoverageFrom": ["**/*.js"],
+    "collectCoverageFrom": [
+      "**/*.js"
+    ],
     "coveragePathIgnorePatterns": [
       "<rootDir>/node_modules/",
       "<rootDir>/packages/*/node_modules/",

packages/create-razzle-app/templates/default/src/server.js

@@ -29,12 +29,16 @@ server
         <meta charset="utf-8" />
         <title>Welcome to Razzle</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        ${assets.client.css
-          ? `<link rel="stylesheet" href="${assets.client.css}">`
-          : ''}
-        ${process.env.NODE_ENV === 'production'
-          ? `<script src="${assets.client.js}" defer></script>`
-          : `<script src="${assets.client.js}" defer crossorigin></script>`}
+        ${
+          assets.client.css
+            ? `<link rel="stylesheet" href="${assets.client.css}">`
+            : ''
+        }
+        ${
+          process.env.NODE_ENV === 'production'
+            ? `<script src="${assets.client.js}" defer></script>`
+            : `<script src="${assets.client.js}" defer crossorigin></script>`
+        }
     </head>
     <body>
         <div id="root">${markup}</div>

packages/razzle-dev-utils/FriendlyErrorsPlugin.js

@@ -50,8 +50,9 @@ class WebpackErrorsPlugin {
       ) {
         messages.errors.forEach(e => {
           logger.error(
-            `Failed to compile ${this.target} with ${messages.errors
-              .length} errors`,
+            `Failed to compile ${this.target} with ${
+              messages.errors.length
+            } errors`,
             e
           );
         });

packages/razzle-dev-utils/printErrors.js

@@ -4,7 +4,7 @@ const chalk = require('chalk');
 
 /**
  * Print an array of errors to console.
- * 
+ *
  * @param {string} summary Summary of error
  * @param {Array<Error>} errors Array of Errors
  */