Use fork-ts-checker-webpack-plugin instead of tslint-loader

Author: lucasterra

examples/with-typescript/package.json

@@ -18,14 +18,14 @@
     "@types/express": "^4.11.1",
     "@types/jest": "^22.2.3",
     "@types/node": "9.6.6",
-    "@types/react": "^16.3.12",
+    "@types/react": "^16.3.13",
     "@types/react-dom": "^16.0.5",
     "@types/react-router-dom": "^4.2.6",
     "@types/webpack-env": "^1.13.6",
     "razzle": "^2.0.0-alpha.12",
     "razzle-plugin-typescript": "^2.0.0-alpha.12",
-    "ts-jest": "^22.4.4",
-    "tslint": "^5.9.1",
+    "ts-jest": "^22.4.5",
+    "tslint": "^5.10.0",
     "tslint-react": "^3.5.1",
     "typescript": "^2.8.3"
   },

examples/with-typescript/src/App.test.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import { render } from 'react-dom';
 
 import App from './App';
 
@@ -8,7 +8,7 @@ import { MemoryRouter } from 'react-router-dom';
 describe('<App />', () => {
   test('renders without exploding', () => {
     const div = document.createElement('div');
-    ReactDOM.render(
+    render(
       <MemoryRouter>
         <App />
       </MemoryRouter>,

examples/with-typescript/src/App.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import Home from './Home';
 

examples/with-typescript/src/Home.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import logo from './react.svg';
 
 import './Home.css';

examples/with-typescript/src/client.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import { hydrate } from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 
 import App from './App';
 
-ReactDOM.hydrate(
+hydrate(
   <BrowserRouter>
     <App />
   </BrowserRouter>,

examples/with-typescript/src/index.js examples/with-typescript/src/index.tsexamples/with-typescript/src/index.js renamed to examples/with-typescript/src/index.ts

@@ -1,8 +1,9 @@
+/* tslint:disable:no-console */
 import express from 'express';
 import app from './server';
 
 if (module.hot) {
-  module.hot.accept('./server', function() {
+  module.hot.accept('./server', () => {
     console.log('🔁  HMR Reloading `./server`...');
   });
   console.info('✅  Server-side HMR Enabled!');
@@ -11,8 +12,8 @@ if (module.hot) {
 const port = process.env.PORT || 3000;
 
 export default express()
-  .use((req, res) => app.handle(req, res))
-  .listen(port, function(err) {
+  .use(app)
+  .listen(port, (err: Error) => {
     if (err) {
       console.error(err);
       return;

examples/with-typescript/src/server.tsx

@@ -1,5 +1,5 @@
-import * as express from 'express';
-import * as React from 'react';
+import express from 'express';
+import React from 'react';
 import { renderToString } from 'react-dom/server';
 import { StaticRouter } from 'react-router-dom';
 
@@ -8,7 +8,7 @@ import App from './App';
 let assets: any;
 
 const syncLoadAssets = () => {
-    assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);
+  assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);
 };
 syncLoadAssets();
 

examples/with-typescript/tslint.json

@@ -26,7 +26,7 @@
     "no-arg": true,
     "no-bitwise": true,
     "no-consecutive-blank-lines": true,
-    "no-console": false,
+    "no-console": true,
     "no-construct": true,
     "no-debugger": true,
     "no-duplicate-variable": true,

packages/razzle-plugin-typescript/README.md

@@ -10,7 +10,6 @@ npm install --save razzle-plugin-typescript
 
 Using the plugin with the default options
 
-
 ```js
 // razzle.config.js
 
@@ -38,18 +37,19 @@ module.exports = {
         // any babel transforms
         useBabel: true,
 
-        // Any option you want to pass to tslint-loader: https://github.com/wbuchwalter/tslint-loader
-        tslintLoader: {
+        // Any option you want to pass to ts-loader: https://github.com/TypeStrong/ts-loader
+        tsLoader: {
           transpileOnly: true,
+          experimentalWatchApi: true,
         },
 
-        // Any option you want to pass to ts-loader: https://github.com/TypeStrong/ts-loader
-        tsLoader: {          
-          emitErrors: true,
+        // Any option you want to pass to fork-ts-checker-webpack-plugin: https://github.com/Realytics/fork-ts-checker-webpack-plugin
+        forkTsChecker: {
+          tsconfig: './tsconfig.json',
+          tslint: './tslint.json',
+          watch: './src',
           typeCheck: true,
-          configFile: './tslint.json',
-          tsConfigFile: './tsconfig.json',
-        },
+        }
       },
     },
   ],

packages/razzle-plugin-typescript/helpers.js

@@ -4,26 +4,27 @@ const loaderFinder = loaderName => rule => {
   // i.e.: /eslint-loader/
   const loaderRegex = new RegExp(`[/\\\\]${loaderName}[/\\\\]`);
 
+  // Checks if there's a loader string in rule.loader matching loaderRegex.
+  const inLoaderString =
+    typeof rule.loader === 'string' && rule.loader.match(loaderRegex);
+
   // Checks if there is an object inside rule.use with loader matching loaderRegex, OR
-  // If there's a loader string in rule.loader matching loaderRegex.
-  return (
-    (Array.isArray(rule.use) &&
-      rule.use.find(
-        loader =>
-          typeof loader.loader === 'string' && loader.loader.match(loaderRegex)
-      )) ||
-    (typeof rule.loader === 'string' && rule.loader.match(loaderRegex))
-  );
+  const inUseArray =
+    Array.isArray(rule.use) &&
+    rule.use.find(
+      loader =>
+        typeof loader.loader === 'string' && loader.loader.match(loaderRegex)
+    );
+
+  return inUseArray || inLoaderString;
 };
 
-const eslintLoaderFinder = loaderFinder('eslint-loader');
 const babelLoaderFinder = loaderFinder('babel-loader');
-const tslintLoaderFinder = loaderFinder('tslint-loader');
 const tsLoaderFinder = loaderFinder('ts-loader');
+const eslintLoaderFinder = loaderFinder('eslint-loader');
 
 module.exports = {
   eslintLoaderFinder,
   babelLoaderFinder,
-  tslintLoaderFinder,
   tsLoaderFinder,
 };