Razzle plugins + razzle-typescript-plugin #605

lucasterra · 2018-05-05T23:58:17Z

gatsby-like plugin system (RFC: Gatsby-like Plugin System #437).
razzle-plugin-typescript (tests included)
Change TypeScript example to use the newly created plugin

It works like this:

Using the plugin with the default options

// razzle.config.js

module.exports = {
  plugins: [
    'typescript'
  ],
};

Passing custom options to the plugin:

// razzle.config.js

module.exports = {
  plugins: [
    {
      name: 'typescript',
      options: {
        useBabel: true,
        tsLoader: {
          transpileOnly: true,
          experimentalWatchApi: true,
        },
        forkTsChecker: {
          tsconfig: './tsconfig.json',
          tslint: './tslint.json',
          watch: './src',
          typeCheck: true,
        }
      },
    },
  ],
};

lucasterra · 2018-05-05T23:59:23Z

Ideally, a plugin should also be able to change the createJestConfig(...), but I will leave it for another PR.

jaredpalmer · 2018-05-06T00:46:15Z

This looks epic. On my phone right meow, but will dig into the code tomorrow. I have some ideas about the TypeScript plugin (and different default optimizations) which i’ll tack on. I agree about jest config, we def need a modifyJest() and the TypeScript plugin should have ts-jest setup.

cc @jorilallo

jaredpalmer · 2018-05-06T00:47:48Z

As for the official TS plugin, lets get rid of tslintloader. We should put tsloader into transpile only and experimentalWatchApi. Then add fork-ts-checker-webpack-plugin

lucasterra · 2018-05-06T22:25:53Z

Removed tslint-loader.
Added experimentalWatchApi, transpileOnly and fork-ts-checker-webpack-plugin.

Should we add thread-loader/cache-loader to ts-loader too?

chaffeqa · 2018-05-07T19:49:55Z

I have been brooding on this subject the last week, I'd like to offer this alternative idea:

Babel 7 has added babel/preset-typescript. Basically it just strips the typescript while compiling down.

With that in mind, I really like the idea of giving full compile control back to babel, and use typescript for linting / DX.

FYI the issues I've been running into include:

Trying to run 1-off scripts locally (needs something like: "repl": "node -r esm --require ts-node/register/transpile-only ./bin/repl")
Trying to run 1-off scripts on server (same file, but don't want to add typescript to dependencies and have to bundle it in a deploy 👎 )
Fix jest to support after.js dynamic imports (bombs out due to something with typescript --> babel)
Issues with .mjs (may not be related, but the fact that I'm using x2 compilers just complicates so much as far as possible issues introduced)

I'm hoping to fork razzle at some point to attempt to try the idea (need to fork to update the babel razzle preset) and will get back to you about the experiment. Just thought I'd add it here FYI.

jaredpalmer · 2018-05-07T19:51:20Z

I actually found perf degradations when using thread and cache loader with the changes. So my gut says to leave them out.

jaredpalmer · 2018-05-07T19:52:21Z

We need a full typescript plugin. We may also do a babel-typescript plugin for Babel 7 TS. As you may or may not know, not all features of TS are supported in Babel TS. So it makes sense to split them I think.

jaredpalmer · 2018-05-07T19:52:55Z

examples/with-typescript/src/App.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';


Put this back?

Why use import * as React when we have esModuleInterop?

You right sorry. I got confused for a sec

jaredpalmer · 2018-05-07T19:53:08Z

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';


Fix react imports

jaredpalmer · 2018-05-07T19:53:32Z

examples/with-typescript/src/server.tsx

@@ -1,5 +1,5 @@
-import * as express from 'express';
-import * as React from 'react';
+import express from 'express';


turn on esModuleInterop flag

jaredpalmer · 2018-05-07T19:54:02Z

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,


This makes developing tough. We can keep this relaxed.

jaredpalmer · 2018-05-07T19:54:41Z

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,


Use babel should be false by default

jaredpalmer · 2018-05-07T21:13:40Z

packages/razzle-plugin-typescript/.eslintrc

+    "jest": true,
+    "node": true
+  }
+}


I think we should actually move eslint out of here. I think we ought to move it of the core as well, making a razzle-plugin-eslint.

Oh, this was just to make linting work on the code and test files. It won't be used by plugin users.

But yeah. I agree with removing eslint from the default webpack config.

Ahh sorry I just looked at the filename

jaredpalmer · 2018-05-07T21:14:00Z

packages/razzle-plugin-typescript/README.md

@@ -0,0 +1,56 @@
+# razzle-dev-utils


Change title to Razzle Plugin TypeScript

Copy/paste really is evil. 😈

jaredpalmer · 2018-05-07T21:14:18Z

packages/razzle-plugin-typescript/README.md

+## Usage in Razzle Projects
+
+```
+npm install --save razzle-plugin-typescript


jaredpalmer · 2018-05-07T21:14:41Z

packages/razzle-plugin-typescript/README.md

+};
+```
+
+Passing custom options to the plugin:


Make h2 called Options

jaredpalmer · 2018-05-07T21:15:54Z

packages/razzle-plugin-typescript/helpers.js

@@ -0,0 +1,30 @@
+'use strict';
+


Let's move this whole file to razzle-dev-utils/pluginHelpers because we'll probably reuse this all over the place

Yeah. Good point. 👍

jaredpalmer · 2018-05-07T21:18:10Z

This is looking sweeeet

lucasterra · 2018-05-07T22:00:33Z

All done, I guess.

suciuvlad · 2018-05-17T06:58:27Z

Looking forward to the merge 👍

romainquellec · 2018-05-23T16:08:18Z

Nice work ! 👍

@todo

* Webpack v4 (#525) * (feat) Adds webpack v4, removes CommonsChunkPlugin and sets mode * (feat) Yarn locks * (feat) Removes NamedModulesPlugin and NoEmitOnErrorsPlugin * (feat) Upgrades eslint-loader and replaces setup for before (devServer) * (feat) Updates some loaders to work with webpack v4 * Add thread-loader, extract-text-webpack-plugin@beta.0 Adds thread-loader and extract-text-webpack-plugin beta. * Remove automatic vendor bundling, add @todo * Remove lock * (fix) Fixes Inferno, JSXstyle, Reason, Typescript and WithVendor * Fix TS HMR * Bump to latest webpack * Update README.md * Move to Yarn Workspaces, fix tests * Remove unused scripts for bootstrap and clean * v2.0.0-alpha.1 * v2.0.0-alpha.2 * v2.0.0-alpha.3 * Drop extract-text for mini-css. Bump start-server (no more refreshes) * Update docs with new hot restart behavior * Make `rs` an h3 in docs * v2.0.0-alpha.4 * Update package descriptions * Bump mini-css-extract-plugin to 0.3.0 (#559) * Add Multistep true so webpack 4 HMR can work (#558) * Bump deps, fix TS example * v2.0.0-alpha.5 * Changed name of the about page component: Home -> About (#561) * chore(package): update lerna to version 2.9.1 (#560) * including polyfills in production build (#562) * Fix logic on polyfill inclusion * v2.0.0-alpha.6 * Fix boolean * v2.0.0-alpha.7 * s/your/you (#566) * Replace clientCompiler before serverCompiler (#569) * Update README.md (#564) Fixed links to Node Inspector docs * Add an example with Hyperapp (#549) * Setup Hyperapp example Enable HMR Don't touch the yarn lock Cleanup Keep naming convention Don't touch preact Reverse formatting on the preact example * Undo formatting something in the preact example Fix formatting Fix formatting Fix formatting Fix format * 2.0.0-alpha.7 * Bump hyperapp version * Add Koa usage example (#533) * Add Koa usage example * Extend Koa example documentation * Make app use default koa styles and logo * Correct Koa URL on doc * Add webpack bar (#563) * Remove yarn.lock from Koa example * Bump deps * v2.0.0-alpha.8 * add emitFile in url-loader options (#576) * Add elm-package post on circleci * Move elm install to dependencies.pre * Use npm to install elm globally * Install elm not elm-package. lol. * Bump deps * v2.0.0-y.0 * Update readme * v2.0.0-alpha.9 * Limiting HMR to App (#577) * #fix starting server code after compile assets (sync) (#575) * Use webpack-dev-server-speedy for perf boost! * v2.0.0-alpha.10 * Bump Webpack to 4.6.0 * v2.0.0-alpha.11 * Fix uglify options * v2.0.0-alpha.12 * Update ESLint (#588) * Upgrade typescript example (#589) * ♻️ Cleanup random keystrokes in Home component * ✨ Upgrade deps and TypeScript. Now supports the new fragment syntax<></> * 👨🏼‍🎨 Add myself to the contributers list * 📏 Prietier linting fixes * Update README.md * Update README.md * Better defaults for Typescript example (#593) * Better defaults for Typescript example After running into multiple bugs having to deal with whether typescript was precompiling the same way that the babel version was (some include: jest testing, repl loading, mjs support) I realized that the big issue is that razzle had figured out solutions for each env based on webpack, so instead of having the added complexity of not knowing if I had proper typescript parody, I figured just remove that layer and use typescript for the one thing I wanted: type checking. Happy to go into detail on those bugs, but I think the main point is this approach seems a better DX experiance out of the box, while offering more heavy solutions as comments. * Update razzle.config.js * Remove raf from examples (#601) * Remove raf from all examples * Add package-lock and yarn-lock to .gitignore in examples. * Change env stringify so it doesn't overwrite process.env (#611) * Razzle plugins + razzle-typescript-plugin (#605) * 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 * Remove -- from circle.yml * Fix start test now that logger has changed * Fix shell output * Don't silence razzle build test * Teardown beforeAll * Remove 'use strict' from build fixtures

@todo

* v2 (#630) * Webpack v4 (#525) * (feat) Adds webpack v4, removes CommonsChunkPlugin and sets mode * (feat) Yarn locks * (feat) Removes NamedModulesPlugin and NoEmitOnErrorsPlugin * (feat) Upgrades eslint-loader and replaces setup for before (devServer) * (feat) Updates some loaders to work with webpack v4 * Add thread-loader, extract-text-webpack-plugin@beta.0 Adds thread-loader and extract-text-webpack-plugin beta. * Remove automatic vendor bundling, add @todo * Remove lock * (fix) Fixes Inferno, JSXstyle, Reason, Typescript and WithVendor * Fix TS HMR * Bump to latest webpack * Update README.md * Move to Yarn Workspaces, fix tests * Remove unused scripts for bootstrap and clean * v2.0.0-alpha.1 * v2.0.0-alpha.2 * v2.0.0-alpha.3 * Drop extract-text for mini-css. Bump start-server (no more refreshes) * Update docs with new hot restart behavior * Make `rs` an h3 in docs * v2.0.0-alpha.4 * Update package descriptions * Bump mini-css-extract-plugin to 0.3.0 (#559) * Add Multistep true so webpack 4 HMR can work (#558) * Bump deps, fix TS example * v2.0.0-alpha.5 * Changed name of the about page component: Home -> About (#561) * chore(package): update lerna to version 2.9.1 (#560) * including polyfills in production build (#562) * Fix logic on polyfill inclusion * v2.0.0-alpha.6 * Fix boolean * v2.0.0-alpha.7 * s/your/you (#566) * Replace clientCompiler before serverCompiler (#569) * Update README.md (#564) Fixed links to Node Inspector docs * Add an example with Hyperapp (#549) * Setup Hyperapp example Enable HMR Don't touch the yarn lock Cleanup Keep naming convention Don't touch preact Reverse formatting on the preact example * Undo formatting something in the preact example Fix formatting Fix formatting Fix formatting Fix format * 2.0.0-alpha.7 * Bump hyperapp version * Add Koa usage example (#533) * Add Koa usage example * Extend Koa example documentation * Make app use default koa styles and logo * Correct Koa URL on doc * Add webpack bar (#563) * Remove yarn.lock from Koa example * Bump deps * v2.0.0-alpha.8 * add emitFile in url-loader options (#576) * Add elm-package post on circleci * Move elm install to dependencies.pre * Use npm to install elm globally * Install elm not elm-package. lol. * Bump deps * v2.0.0-y.0 * Update readme * v2.0.0-alpha.9 * Limiting HMR to App (#577) * #fix starting server code after compile assets (sync) (#575) * Use webpack-dev-server-speedy for perf boost! * v2.0.0-alpha.10 * Bump Webpack to 4.6.0 * v2.0.0-alpha.11 * Fix uglify options * v2.0.0-alpha.12 * Update ESLint (#588) * Upgrade typescript example (#589) * ♻️ Cleanup random keystrokes in Home component * ✨ Upgrade deps and TypeScript. Now supports the new fragment syntax<></> * 👨🏼‍🎨 Add myself to the contributers list * 📏 Prietier linting fixes * Update README.md * Update README.md * Better defaults for Typescript example (#593) * Better defaults for Typescript example After running into multiple bugs having to deal with whether typescript was precompiling the same way that the babel version was (some include: jest testing, repl loading, mjs support) I realized that the big issue is that razzle had figured out solutions for each env based on webpack, so instead of having the added complexity of not knowing if I had proper typescript parody, I figured just remove that layer and use typescript for the one thing I wanted: type checking. Happy to go into detail on those bugs, but I think the main point is this approach seems a better DX experiance out of the box, while offering more heavy solutions as comments. * Update razzle.config.js * Remove raf from examples (#601) * Remove raf from all examples * Add package-lock and yarn-lock to .gitignore in examples. * Change env stringify so it doesn't overwrite process.env (#611) * Razzle plugins + razzle-typescript-plugin (#605) * 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 * Remove -- from circle.yml * Fix start test now that logger has changed * Fix shell output * Don't silence razzle build test * Teardown beforeAll * Remove 'use strict' from build fixtures * Update README for v2 * v2.0.0 * Fix #632. Pass webpack to config in build.js * v2.0.1 * 👨🏻‍💻 Include all contributors (#631) * Removing thread-loader (#634) * v2.0.2 * Include the crossorigin attribute link updated (#635) reason: It seems that the content is moved since to this new URL. * Adding server source map support (#516) * Bump deps * Boost perf of TS plugin during dev with suggested Outlook optimizations * v2.0.3 * Fix useBabel use option in razzzle-plugin-typescript (#639) * Add useEslint option to razzle-plugin-typescript (#640) Useful if you wish to use babel, without eslint * Update readme's * v2.0.4 * Upgrade razzle package - jest ^22.4.3 (#648) * Upgrade razzle package - jest ^22.4.3 * Revert version no change * Close #653. Use correct Snyk badges * Update babel-eslint to 8.x so that decorators will work using babel-plugin-transform-decorators-legacy. See: babel/babel-eslint#275 (#649) * Add carrot to babel-eslint * Remove consola (redundant) * v2.1.0 * Add WebpackConfigHelpers + Vue, Elm plugins (#655) * Add WebpackConfigHelpers + Vue, Elm plugins * Fix elm plugin * Add razzle-plugin-php * Add disclaimer about php plugin * More patches * fix elm plugin * Update elm * Add info about razzle-plugin-elm * Update docs * v2.1.1 * Fix package names * Fix 'server' typo (#658) * latest jest (#656) * Bump deps * Squat on more potential plugins * v2.2.0 * Bump babel-loader to remove incompatibility warning with Webpack 4. (#659) * Fix Elm example (#661) * preserve the full --inspect= flag as passed to yarn start (#660) * preserve the full --inspect= flag as passed to yarn start instead of treating it as a boolean * update --inspect docs & comments * added example razzle + react router 3 (#539) * added example razzle + react router 3 * Remove yarn.lock * Fix pkg.json * Add polka example (#520) * Add polka example Serves as a generic express middleware-compatible server example. (related to jaredpalmer/after.js#77) * Remove with-polka/setupTests.js * Remove yarn.lock * Adding testEnvironmentOptions to supportedKeys for Jest (#678) * fix koa hmr (#693) * Add pretty node errors (#691) * Ignore column from source map and only use pretty errors if file is read (#696) * Add documentation for CSS Modules (#694) * Erik Engi added to the contributors section (#700) * Update README.md * Introduce config.modifyBabelOptions (#702) I’ve found that the babel configuration is important to modify in my environment. Specifically in my env, I’d like to set `babelrc: false` so that the .babelrc file is ignored, and a custom babel configuration could be provided in the `razzle.config.js`. * add support for function as plugin (#704) * add mdx loader (#711) * Mdx improve (#712) * add peer dependency, ipdate install instruction * update readme * Fix .mjs issue with GraphQL 0.13.2 (#715) * Fix .mjs issue with GraphQL 0.13.2 graphql/graphql-js#1272 (comment) * Fix .mjs still referencing "require" aws-amplify/amplify-js#686 (comment) * remove package-lock.json * Make readme's match * v2.3.0 * Revert "v2.3.0" This reverts commit 361bb0c. * v2.4.0 * Fix production sourcemaps (#717) * Create stale.yml * Add loadable-components example (#598) * Update createJestConfig.js (#719) Add globals to the allowable jest config overrides * Use the correct port when PORT is not set (#723) * Add Now deployment example (#728) * Duplicated basic example * Renamed package name * Updated readme for Now * Added post Now build process hook * Tweaked README format and content * Add Heroku deployment example (#727) * Duplicated basic exmaple * Updated readme with Heroku instructions * Renamed package name * added Heroku post-build command in Procfile * Updated package.json: - added post pre-start hook to trigger build on Heroku - moved razzle to main deps for Heroku build process * Consistent reference to Heroku app name * Update README.md * Update package.json * Update README.md * Fix for '[HMR] You need to restart the application!' on server sided err * Mdx plugin improvements (#732) * resolving path to @mdx-js/tag, fix loader options * del peerDep, improve readme * add example * Change import to require * cleanup: remove .js extensions from require * React Loadable example: add css chunks (#746) * point people looking at CHANGELOG.md to the release notes page (#747) * Update css chunks: use [name] instead of [id] (#750) * Fix HMR : client was not working + mismatch between server/client (#749) * remove mention of extract text plugin from react native web example (#752) * Update examples to recover from HMR error (#763) * add CLIENT_PUBLIC_PATH env var for local dev environments that don't use localhost (e.g. VMs, Docker) (#761) * Set template package version back to 0.1.0 (#760) * CLIENT_PUBLIC_PATH default was being set in two places that computed different values. Remove the erroneous one. (#779) * Correct example name in curl (#772) * Feature/scss plugin (#786) * add scss plugin and fixes to makeLoaderFinder * add readme for scss plugin * fix test regex for including .css * remove jest forceExit * add contributors * refactor tests * add plugin options * edit readme for better options knowledge * change node-sass to node-sass-chokidar * Use npx (#783)

lucasterra added 3 commits May 5, 2018 20:30

Add a plugin system

5ac85e7

Add razzle-typescript-plugin

bd93f70

Change TypeScript example to use razzle-typescript-plugin

e97cd40

lucasterra force-pushed the razzle-plugins branch from 569fa6f to ad464c2 Compare May 6, 2018 00:01

Small refactor to helpers

3e1df87

lucasterra force-pushed the razzle-plugins branch from ad464c2 to 3e1df87 Compare May 6, 2018 00:02

Add myself to contributors

c7e09cb

jaredpalmer closed this May 6, 2018

jaredpalmer reopened this May 6, 2018

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

f511a75

lucasterra force-pushed the razzle-plugins branch from 7ecc57a to f511a75 Compare May 6, 2018 23:22

jaredpalmer requested changes May 7, 2018

View reviewed changes

Make useBabel false by default

dc172d6

jaredpalmer reviewed May 7, 2018

View reviewed changes

lucasterra changed the title ~~Razzle plugins~~ Razzle plugins + razzle-typescript-plugin May 7, 2018

jaredpalmer requested changes May 7, 2018

View reviewed changes

Add esModuleInterop, remove console tslint rules

8a92ab8

lucasterra force-pushed the razzle-plugins branch from b5bb5ab to 8a92ab8 Compare May 7, 2018 21:21

lucasterra added 2 commits May 7, 2018 18:44

Improve README

4c27e1c

Moved loaderFinder to razzle-dev-utils

38b0a1d

jaredpalmer mentioned this pull request May 30, 2018

Add very basic hooks before and after compile, allow paths to be modified #457

Closed

jaredpalmer approved these changes May 30, 2018

View reviewed changes

jaredpalmer merged commit 3789295 into jaredpalmer:next May 30, 2018

lucasterra deleted the razzle-plugins branch May 31, 2018 14:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Razzle plugins + razzle-typescript-plugin #605

Razzle plugins + razzle-typescript-plugin #605

lucasterra commented May 5, 2018 •

edited

Loading

lucasterra commented May 5, 2018

jaredpalmer commented May 6, 2018

jaredpalmer commented May 6, 2018 •

edited

Loading

lucasterra commented May 6, 2018 •

edited

Loading

chaffeqa commented May 7, 2018

jaredpalmer commented May 7, 2018

jaredpalmer commented May 7, 2018

jaredpalmer May 7, 2018

lucasterra May 7, 2018

jaredpalmer May 7, 2018

jaredpalmer May 7, 2018

jaredpalmer May 7, 2018

jaredpalmer May 7, 2018

jaredpalmer May 7, 2018

jaredpalmer May 7, 2018

jaredpalmer May 7, 2018

lucasterra May 7, 2018

lucasterra May 7, 2018

jaredpalmer May 7, 2018

jaredpalmer May 7, 2018 •

edited

Loading

lucasterra May 7, 2018

jaredpalmer May 7, 2018

jaredpalmer May 7, 2018

jaredpalmer May 7, 2018

lucasterra May 7, 2018

jaredpalmer commented May 7, 2018

lucasterra commented May 7, 2018

suciuvlad commented May 17, 2018

romainquellec commented May 23, 2018

Razzle plugins + razzle-typescript-plugin #605

Razzle plugins + razzle-typescript-plugin #605

Conversation

lucasterra commented May 5, 2018 • edited Loading

lucasterra commented May 5, 2018

jaredpalmer commented May 6, 2018

jaredpalmer commented May 6, 2018 • edited Loading

lucasterra commented May 6, 2018 • edited Loading

chaffeqa commented May 7, 2018

jaredpalmer commented May 7, 2018

jaredpalmer commented May 7, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaredpalmer May 7, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaredpalmer commented May 7, 2018

lucasterra commented May 7, 2018

suciuvlad commented May 17, 2018

romainquellec commented May 23, 2018

lucasterra commented May 5, 2018 •

edited

Loading

jaredpalmer commented May 6, 2018 •

edited

Loading

lucasterra commented May 6, 2018 •

edited

Loading

jaredpalmer May 7, 2018 •

edited

Loading