Razzle plugins + razzle-typescript-plugin (#605)

lucasterra · jaredpalmer · commit 3789295effe5 · 2018-05-30T13:16:23.000-04:00
* Add a plugin system

* Add razzle-typescript-plugin

* Change TypeScript example to use razzle-typescript-plugin

* Small refactor to helpers

* Add myself to contributors

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

* Make useBabel false by default

* Add esModuleInterop, remove console tslint rules

* Improve README

* Moved loaderFinder to razzle-dev-utils
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -65,6 +65,17 @@
       "contributions": [
         "example"
       ]
+    },
+    {
+      "login": "lucasterra",
+      "name": "Lucas Terra",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/441058?v=4",
+      "profile": "https://www.linkedin.com/in/lucasterra7/",
+      "contributions": [
+        "code",
+        "example",
+        "plugin"
+      ]
     }
   ]
-}
+}
diff --git a/examples/with-typescript/package.json b/examples/with-typescript/package.json
@@ -18,15 +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",
-    "ts-jest": "^22.4.4",
-    "ts-loader": "^4.2.0",
-    "tslint": "^5.9.1",
-    "tslint-loader": "^4.2.0",
+    "razzle-plugin-typescript": "^2.0.0-alpha.12",
+    "ts-jest": "^22.4.5",
+    "tslint": "^5.10.0",
     "tslint-react": "^3.5.1",
     "typescript": "^2.8.3"
   },
diff --git a/examples/with-typescript/razzle.config.js b/examples/with-typescript/razzle.config.js
@@ -1,71 +1,5 @@
 'use strict';
 
 module.exports = {
-  modify(baseConfig, { target, dev }, webpack) {
-    const config = Object.assign({}, baseConfig);
-
-    config.resolve.extensions = config.resolve.extensions.concat([
-      '.ts',
-      '.tsx',
-    ]);
- 
-
-
-    // Locate eslint-loader and remove it (we're using tslint instead)
-    config.module.rules = config.module.rules.filter(
-      rule =>
-        !(
-          Array.isArray(rule.use) &&
-          rule.use.length > 0 &&
-          rule.use[0].options &&
-          'useEslintrc' in rule.use[0].options
-        )
-    );
-    // Add tslint-loader
-    config.module.rules.push({
-      include,
-      enforce: 'pre',
-      test: /\.tsx?$/,
-      loader: 'tslint-loader',
-      options: {
-        emitErrors: true,
-        configFile: './tslint.json',
-      },
-    });
-
-    // Safely locate Babel-Loader in Razzle's webpack internals
-    const babelLoader = config.module.rules.findIndex(
-      rule => rule.use[1].options && rule.use[1].options.babelrc
-    );
-
-    // Get the correct `include` option, since that hasn't changed.
-    // This tells Razzle which directories to transform.
-    const { include } = config.module.rules[babelLoader];
-
-    // Declare our TypeScript loader configuration
-    const tsLoader = {
-      include,
-      test: /\.tsx?$/,
-      loader: 'ts-loader',
-      options: {
-        transpileOnly: true,
-      },
-    };
-    // Add loader
-    config.module.rules.push(tsLoader)
-    
-    // Additional options found at https://github.com/TypeStrong/ts-loader#faster-builds
-    // Add async typechecking errors
-    // config.plugins.push(new require('fork-ts-checker-webpack-plugin')())
- 
-    // If you want to replace Babel with typescript to fully speed up build
-    // then do the following:
-    //
-    // - COMMENT out line 55
-    // - UNCOMMENT line 67
-    //
-    // config.module.rules[babelLoader] = tsLoader;
-
-    return config;
-  },
+  plugins: ['typescript'],
 };
diff --git a/examples/with-typescript/src/App.test.tsx b/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>,
diff --git a/examples/with-typescript/src/App.tsx b/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';
 
diff --git a/examples/with-typescript/src/Home.tsx b/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';
diff --git a/examples/with-typescript/src/client.tsx b/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>,
diff --git a/examples/with-typescript/src/index.ts b/examples/with-typescript/src/index.ts
@@ -2,7 +2,7 @@ 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 +11,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;
diff --git a/examples/with-typescript/src/server.tsx b/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,13 +8,11 @@ import App from './App';
 let assets: any;
 
 const syncLoadAssets = () => {
-    assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);
+  assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);
 };
 syncLoadAssets();
 
-const server = express();
-
-server
+const server = express()
   .disable('x-powered-by')
   .use(express.static(process.env.RAZZLE_PUBLIC_DIR!))
   .get('/*', (req: express.Request, res: express.Response) => {
diff --git a/examples/with-typescript/tsconfig.json b/examples/with-typescript/tsconfig.json
@@ -5,6 +5,7 @@
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
     "downlevelIteration": true,
+    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "lib": ["es6", "es2015", "es2017", "dom"],
diff --git a/lerna.json b/lerna.json
@@ -5,6 +5,7 @@
     "packages/babel-preset-razzle",
     "packages/create-razzle-app",
     "packages/razzle-dev-utils",
+    "packages/razzle-plugin-*",
     "examples/*"
   ],
   "useWorkspaces": true,
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "packages/babel-preset-razzle",
     "packages/create-razzle-app",
     "packages/razzle-dev-utils",
+    "packages/razzle-plugin-*",
     "examples/*"
   ]
 }
diff --git a/packages/razzle-dev-utils/README.md b/packages/razzle-dev-utils/README.md
@@ -58,4 +58,27 @@ try {
 } catch (e) {
   printErrors('Failed to compile.', [e]);
 }
+```
+
+`makeLoaderFinder(loaderName: string): (rule: WebPackRule) => boolean;`
+
+Helper function to find a loader in the webpack config object. Used for writing Razzle Plugins, or razzle modify functions.
+
+Example:
+```js
+// razzle.config.js
+const loaderFinder = require('razzle-dev-utils/makeLoaderFinder');
+
+module.exports = {
+  modify(config) {
+    // Makes a finder function, to search for babel-loader
+    const babelLoaderFinder = makeLoaderFinder('babel-loader');
+
+    // Finds the JS rule containing babel-loader using our function
+    const jsRule = config.module.rules.find(babelLoaderFinder);
+
+    // Set cacheDirectory to true in our babel-loader
+    jsRule.use.find(babelLoaderFinder).options.cacheDirectory = true;
+  }
+}
 ```
diff --git a/packages/razzle-dev-utils/makeLoaderFinder.js b/packages/razzle-dev-utils/makeLoaderFinder.js
@@ -0,0 +1,22 @@
+'use strict';
+
+const makeLoaderFinder = 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
+  const inUseArray =
+    Array.isArray(rule.use) &&
+    rule.use.find(
+      loader =>
+        typeof loader.loader === 'string' && loader.loader.match(loaderRegex)
+    );
+
+  return inUseArray || inLoaderString;
+};
+
+module.exports = makeLoaderFinder;
diff --git a/packages/razzle-dev-utils/package.json b/packages/razzle-dev-utils/package.json
@@ -10,7 +10,8 @@
     "printErrors.js",
     "FriendlyErrorsPlugin.js",
     "webpackHotDevClient.js",
-    "setPorts.js"
+    "setPorts.js",
+    "makeLoaderFinder.js"
   ],
   "dependencies": {
     "chalk": "1.1.3",
diff --git a/packages/razzle-plugin-typescript/.eslintrc b/packages/razzle-plugin-typescript/.eslintrc
@@ -0,0 +1,6 @@
+{
+  "env": {
+    "jest": true,
+    "node": true
+  }
+}
diff --git a/packages/razzle-plugin-typescript/README.md b/packages/razzle-plugin-typescript/README.md
@@ -0,0 +1,62 @@
+# razzle-plugin-typescript
+
+This package contains a plugin for using TypeScript with Razzle
+
+## Usage in Razzle Projects
+
+```
+yarn add razzle-plugin-typescript
+```
+
+Using the plugin with the default options
+
+```js
+// razzle.config.js
+
+module.exports = {
+  plugins: [
+    'typescript'
+  ],
+};
+```
+
+### With custom options:
+
+```js
+// razzle.config.js
+
+module.exports = {
+  plugins: [
+    {
+      name: 'typescript',
+      options: {
+        useBabel: false,
+        tsLoader: {
+          transpileOnly: true,
+          experimentalWatchApi: true,
+        },
+        forkTsChecker: {
+          tsconfig: './tsconfig.json',
+          tslint: './tslint.json',
+          watch: './src',
+          typeCheck: true,
+        }
+      },
+    },
+  ],
+};
+```
+
+## Options
+
+__useBabel: _boolean___ (defaults: false)
+
+Set `useBabel` to `true` if you want to keep using `babel` for _JS_/_TS_ interoperability, or if you want to apply any babel transforms to typescript files. (i.e.: [`babel-plugin-styled-components`](https://github.com/styled-components/babel-plugin-styled-components)).
+
+__tsLoader: _TSLoaderOptions___ (defaults: { transpileOnly: true, experimentalWatchApi: true })
+
+Use this to override [`ts-loader`](https://github.com/TypeStrong/ts-loader) options. Check all the options here: [ts-loader options](https://github.com/TypeStrong/ts-loader#loader-options).
+
+__forkTsChecker: _TSCheckerOptions___ (defaults: { tsconfig: './tsconfig.json', tslint: './tslint.json', watch: './src',           typeCheck: true })
+
+Use this to override [`fork-ts-checker-webpack-plugin`](https://github.com/Realytics/fork-ts-checker-webpack-plugin) options. Check all the options here: [fork-ts-checker-webpack-plugin options](https://github.com/Realytics/fork-ts-checker-webpack-plugin#options).
diff --git a/packages/razzle-plugin-typescript/helpers.js b/packages/razzle-plugin-typescript/helpers.js
@@ -0,0 +1,12 @@
+'use strict';
+const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
+
+const babelLoaderFinder = makeLoaderFinder('babel-loader');
+const tsLoaderFinder = makeLoaderFinder('ts-loader');
+const eslintLoaderFinder = makeLoaderFinder('eslint-loader');
+
+module.exports = {
+  eslintLoaderFinder,
+  babelLoaderFinder,
+  tsLoaderFinder,
+};
diff --git a/packages/razzle-plugin-typescript/index.js b/packages/razzle-plugin-typescript/index.js
diff --git a/packages/razzle-plugin-typescript/package.json b/packages/razzle-plugin-typescript/package.json
diff --git a/packages/razzle-plugin-typescript/tests/index.test.js b/packages/razzle-plugin-typescript/tests/index.test.js
diff --git a/packages/razzle/config/createConfig.js b/packages/razzle/config/createConfig.js
diff --git a/packages/razzle/config/runPlugin.js b/packages/razzle/config/runPlugin.js
diff --git a/packages/razzle/scripts/build.js b/packages/razzle/scripts/build.js
diff --git a/packages/razzle/scripts/start.js b/packages/razzle/scripts/start.js

Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,17 @@`
`65`	`65`	`"contributions": [`
`66`	`66`	`"example"`
`67`	`67`	`]`
	`68`	`+ },`
	`69`	`+ {`
	`70`	`+ "login": "lucasterra",`
	`71`	`+ "name": "Lucas Terra",`
	`72`	`+ "avatar_url": "https://avatars2.githubusercontent.com/u/441058?v=4",`
	`73`	`+ "profile": "https://www.linkedin.com/in/lucasterra7/",`
	`74`	`+ "contributions": [`
	`75`	`+ "code",`
	`76`	`+ "example",`
	`77`	`+ "plugin"`
	`78`	`+ ]`
`68`	`79`	`}`
`69`	`80`	`]`
`70`		`-}`
	`81`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import * as React from 'react';`
	`1`	`+import React from 'react';`
`2`	`2`	`import { Route, Switch } from 'react-router-dom';`
`3`	`3`	`import Home from './Home';`
`4`	`4`