Razzle plugins + razzle-typescript-plugin

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.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,
 };

packages/razzle-plugin-typescript/index.js

@@ -1,21 +1,23 @@
 'use strict';
 
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const { babelLoaderFinder, eslintLoaderFinder } = require('./helpers');
 
 const defaultOptions = {
   useBabel: true,
   tsLoader: {
     transpileOnly: true,
+    experimentalWatchApi: true,
   },
-  tslintLoader: {
-    emitErrors: true,
-    configFile: './tslint.json',
+  forkTsChecker: {
+    tsconfig: './tsconfig.json',
+    tslint: './tslint.json',
+    watch: ['./src'],
     typeCheck: true,
-    tsConfigFile: './tsconfig.json',
   },
 };
 
-function modify(baseConfig, configOptions, webpack, userOptions = {}) {
+function modify(baseConfig, { target }, webpack, userOptions = {}) {
   const options = Object.assign({}, defaultOptions, userOptions);
   const config = Object.assign({}, baseConfig);
 
@@ -32,32 +34,14 @@ function modify(baseConfig, configOptions, webpack, userOptions = {}) {
   const babelLoader = config.module.rules.find(babelLoaderFinder);
   if (!babelLoader) {
     throw new Error(
-      `'babel-loader' was erased from config, we need it to define 'include' option`
+      `'babel-loader' was erased from config, we need it to define 'include' option for 'ts-loader'`
     );
   }
 
   // Get the correct `include` option, since that hasn't changed.
   // This tells Razzle which directories to transform.
   const { include } = babelLoader;
 
-  // Configure tslint-loader
-  const tslintLoader = {
-    include,
-    enforce: 'pre',
-    test: /\.tsx?$/,
-    use: [
-      {
-        loader: require.resolve('tslint-loader'),
-        options: Object.assign(
-          {},
-          defaultOptions.tslintLoader,
-          options.tslintLoader
-        ),
-      },
-    ],
-  };
-  config.module.rules.push(tslintLoader);
-
   // Configure ts-loader
   const tsLoader = {
     include,
@@ -83,6 +67,16 @@ function modify(baseConfig, configOptions, webpack, userOptions = {}) {
 
   config.module.rules.push(tsLoader);
 
+  // Do typechecking in a separate process,
+  // We can run it only in client builds.
+  if (target === 'web') {
+    config.plugins.push(
+      new ForkTsCheckerWebpackPlugin(
+        Object.assign({}, defaultOptions.forkTsChecker, options.forkTsChecker)
+      )
+    );
+  }
+
   return config;
 }
 

packages/razzle-plugin-typescript/package.json

@@ -11,14 +11,13 @@
   },
   "dependencies": {
     "ts-loader": "^4.2.0",
-    "tslint-loader": "^3.6.0"
+    "fork-ts-checker-webpack-plugin": "^0.4.1"
   },
   "devDependencies": {
     "razzle": "^2.0.0-alpha.12",
     "jest": "20.0.4"
   },
   "peerDependencies": {
-    "tslint": "*",
     "typescript": ">=2.4.1"
   }
 }

packages/razzle-plugin-typescript/tests/index.test.js

@@ -1,10 +1,10 @@
 'use strict';
 
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const createConfig = require('razzle/config/createConfig');
 const pluginFunc = require('../index');
 const {
   eslintLoaderFinder,
-  tslintLoaderFinder,
   babelLoaderFinder,
   tsLoaderFinder,
 } = require('../helpers');
@@ -21,9 +21,12 @@ describe('razzle-typescript-plugin', () => {
       expect(config.resolve.extensions).toContain('.tsx');
     });
 
-    it('should add tslint-loader', () => {
-      const rule = config.module.rules.find(tslintLoaderFinder);
-      expect(rule).not.toBeUndefined();
+    it('should add fork-ts-checker-webpack-plugin', () => {
+      const tsCheckerPlugin = config.plugins.find(
+        plugin => plugin instanceof ForkTsCheckerWebpackPlugin
+      );
+
+      expect(tsCheckerPlugin).not.toBeUndefined();
     });
 
     it('should add ts-loader', () => {
@@ -55,4 +58,21 @@ describe('razzle-typescript-plugin', () => {
       expect(rule).toBeUndefined();
     });
   });
+
+  describe('when creating a server config', () => {
+    let config;
+    beforeAll(() => {
+      config = createConfig('node', 'dev', {
+        plugins: [{ func: pluginFunc }],
+      });
+    });
+
+    it('should not add fork-ts-checker-webpack-plugin', () => {
+      const tsCheckerPlugin = config.plugins.find(
+        plugin => plugin instanceof ForkTsCheckerWebpackPlugin
+      );
+
+      expect(tsCheckerPlugin).toBeUndefined();
+    });
+  });
 });