Merge pull request #45 from firstlookmedia/typescript-support

Typescript support

Author: jcseo3

.circleci/config.yml

@@ -3,7 +3,7 @@ jobs:
   build:
     working_directory: ~/react-scripts
     docker:
-      - image: circleci/node:6
+      - image: circleci/node:12
     steps:
       - checkout
       - restore_cache:

.gitignore

@@ -6,3 +6,4 @@ template/schema.graphql
 yarn-error.log
 .watchmanconfig
 .tern-port
+complete.queryMap.json

.nvmrc

@@ -0,0 +1 @@
+8

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 90
+}

README.md

@@ -59,16 +59,11 @@ To install on OSX `brew bundle` in this directory.
 
 ## Persisted queries
 
-By default, sites will not persist static queries. To enable persisted queries:
+To enable persisted queries:
 
-1. add `PERSIST_QUERIES: "true"` to all build circle configs
-2. add `QUERIES_S3_BUCKET` property to all build and deploy circle configs and point it to the s3 bucket where the site's queries live
-3. upgrade to the newest version of React scripts that has the `get` and `post` fetcher methods
-4. install our forked version of relay compiler: https://github.com/firstlookmedia/relay contains the .tar.gz of the compiler and you refer to it like so in the `package.json`: https://github.com/firstlookmedia/relay/releases/download/v1.5.0-flm.1/relay-compiler-1.5.0-flm.1.tar.gz
+1. Add `PERSIST_QUERIES: "true"` in the build and runtime environments
+2. Point `QUERIES_S3_BUCKET` to an s3 bucket during build time to deploy queries, making them accessible to the graphql backend
+3. Upgrade to the newest version of React scripts that has the `GET` and `POST` fetcher methods
+4. Upgrade to relay >= 3.0
 
 Note: persisted queries are always turned off during local development.
-
-### relay compiler
-
-We are using a forked version of relay similar to what the artsy folks are doing. Hopefully, this fork will get merged into relay proper, at which point we won't need to do anything special to get persisted static queries to work. Until then, we will need to stick to relay version `1.5.0` and if we do need to upgrade we'll have to update our fork, rebuild the compiler, and release it. The artsy folks and others have done an excellent job of keeping this fork up to date with subsequent relay releases, so this should not pose much a problem. In fact, it would be great for us to help with merging upstream relay releases into the PR version on the relay repository if necessary.
-

bin/react-scripts.js

@@ -11,6 +11,7 @@ const args = process.argv.slice(3);
 
 switch (script) {
   case 'build':
+  case 'build-queries':
   case 'start':
   case 'upload':
   case 'upload-queries':

config/babelOptions.js

@@ -0,0 +1,52 @@
+const packageConfig = require('./packageConfig');
+
+const useReactHotLoader = typeof packageConfig.useReactHotLoader !== 'undefined'
+                        ? packageConfig.useReactHotLoader
+                        : true;
+
+const babelOptions = {
+  passPerPreset: true,
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        useBuiltIns: 'entry',
+        corejs: 3,
+      },
+    ],
+    '@babel/typescript',
+    '@babel/react',
+  ],
+  plugins: [
+    [
+      '@babel/transform-runtime',
+      {
+        corejs: 3,
+      },
+    ],
+    '@loadable/babel-plugin',
+    useReactHotLoader && 'react-hot-loader/babel',
+    [
+      'relay',
+      {
+        compat: packageConfig.relayCompatMode || false,
+        artifactDirectory: 'src/__generated__',
+        schema: 'schema.graphql',
+      },
+    ],
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-syntax-import-meta',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-json-strings',
+    '@babel/plugin-proposal-function-sent',
+    '@babel/plugin-proposal-export-namespace-from',
+    '@babel/plugin-proposal-numeric-separator',
+    '@babel/plugin-proposal-throw-expressions',
+    '@babel/plugin-proposal-optional-chaining',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-transform-for-of',
+  ].filter(Boolean),
+};
+
+module.exports = babelOptions;

config/packageConfig.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+const packageConfig = require(path.resolve('package.json'));
+
+const reactScriptPackageConfig = {
+  ...packageConfig['react-scripts'],
+};
+
+module.exports = reactScriptPackageConfig;

config/webpack.client.dev.js

@@ -1,21 +1,39 @@
 const webpack = require('webpack');
 const merge = require('webpack-merge');
+const path = require('path');
+const LoadablePlugin = require('@loadable/webpack-plugin');
 const defaults = require('./webpack.defaults');
 
-const config = merge.smart({
-  module: {
-    rules: [{
-      test: /\.css$/,
-      use: ['style-loader'],
-    }, {
-      test: /\.scss$/,
-      use: ['style-loader'],
-    }],
+const config = merge.smart(
+  {
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          include: path.resolve('src'),
+          use: ['style-loader'],
+        },
+        {
+          test: /\.css$/,
+          include: path.resolve('node_modules'),
+          use: ['style-loader'],
+        },
+        {
+          test: /\.scss$/,
+          use: ['style-loader'],
+        },
+      ],
+    },
   },
-}, defaults, {
-  devtool: 'eval-source-map',
-  entry: ['webpack-hot-middleware/client'],
-  plugins: [new webpack.HotModuleReplacementPlugin()],
-});
+  defaults,
+  {
+    devtool: 'eval-source-map',
+    entry: ['webpack-hot-middleware/client'],
+    plugins: [
+      new LoadablePlugin({ filename: 'stats.json', writeToDisk: true }),
+      new webpack.HotModuleReplacementPlugin(),
+    ],
+  },
+);
 
 module.exports = config;

config/webpack.client.prod.js

@@ -4,35 +4,72 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const merge = require('webpack-merge');
 const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const path = require('path');
+const LoadablePlugin = require('@loadable/webpack-plugin');
 const defaults = require('./webpack.defaults');
+const babelOptions = require('./babelOptions');
 
-const config = merge.smart({
-  module: {
-    rules: [{
-      test: /\.css$/,
-      use: [MiniCSSExtractPlugin.loader],
-    }, {
-      test: /\.scss$/,
-      use: [MiniCSSExtractPlugin.loader],
-    }],
+const config = merge.smart(
+  {
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          include: path.resolve('src'),
+          use: [MiniCSSExtractPlugin.loader],
+        },
+        {
+          test: /\.css$/,
+          include: path.resolve('node_modules'),
+          use: [MiniCSSExtractPlugin.loader],
+        },
+        {
+          test: /\.scss$/,
+          use: [MiniCSSExtractPlugin.loader],
+        },
+        {
+          test: /\.tsx*$/,
+          include: [path.resolve('src')],
+          use: [
+            {
+              loader: 'babel-loader',
+              options: babelOptions,
+            },
+            {
+              loader: 'ts-loader',
+            },
+          ],
+        },
+      ],
+    },
   },
-}, defaults, {
-  mode: 'production',
-  output: {
-    filename: '[hash].js',
+  defaults,
+  {
+    mode: 'production',
+    output: {
+      filename: '[hash].js',
+    },
+    plugins: [
+      new LoadablePlugin({ filename: 'stats.json', writeToDisk: true }),
+      new ManifestPlugin({ fileName: 'manifest.json' }),
+      new ManifestPlugin({ fileName: `manifest.${Date.now()}.json` }),
+      new webpack.DefinePlugin({
+        'process.env.NODE_ENV': '"production"',
+      }),
+      new ProgressBarPlugin(),
+      new MiniCSSExtractPlugin({
+        filename: '[contenthash].css',
+      }),
+      new OptimizeCSSAssetsPlugin({
+        cssProcessorOptions: {
+          map: {
+            inline: false,
+          },
+          reduceIdents: false,
+        },
+      }),
+    ],
   },
-  plugins: [
-    new ManifestPlugin({ fileName: 'manifest.json' }),
-    new ManifestPlugin({ fileName: `manifest.${Date.now()}.json` }),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': '"production"',
-    }),
-    new ProgressBarPlugin(),
-    new MiniCSSExtractPlugin({
-      filename: '[contenthash].css',
-    }),
-    new OptimizeCSSAssetsPlugin({}),
-  ],
-});
+);
 
 module.exports = config;