Introduce Typescript & CSS Modules (#815)

* Adding typescript support

* Begins configuring webpack builds

* Fix lint warnings

* Updates react-router

* Fixes lint configuration

* Adds missing dependency

* Restores disabled performance hints

* Renames connectStores

* Types connectStores

* Uses correct envvars and fixes missing EOF newline

* Formats files

* Defaults props to empty object

* Ignores type definitions in eslint

* Another newline

* Adjusts script invocation

* Ignore jsdoc output

* Undoes the autoformatting of CSS module types

* Improves lint rules

* Finishes webpack config changes

* Updates deps

* Fixes lint errors and attempts to fix SVG icon generator

* Fixes SVG sprite generator

* Adds type for SVG imports

* Explicitly use babelrc in SVG loader

* Formats files

* Refactors prettier formatter, formats CSS module type defs

* Updates style types

* Uses nicer syntax in typed-css-modules-loader

* Removes unnecessary div

* optional property in package.json

* package-lock

* Fixes upstream lint errors

* Removes unused modules

client/scripts/build.js

@@ -28,7 +28,7 @@ const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 
 // Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+if (!checkRequiredFiles([paths.appHtml, paths.appIndex])) {
   process.exit(1);
 }
 

client/scripts/start.js

@@ -28,7 +28,7 @@ const userConfig = require('../../config');
 const isInteractive = process.stdout.isTTY;
 
 // Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+if (!checkRequiredFiles([paths.appHtml, paths.appIndex])) {
   process.exit(1);
 }
 

client/scripts/svg-react-component-generator.js

@@ -0,0 +1,56 @@
+const path = require('path');
+const pascalCase = require('pascal-case');
+const {stringifyRequest} = require('loader-utils');
+
+const stringifiedRegexp = /^'|".*'|"$/;
+
+const stringify = content => {
+  if (typeof content === 'string' && stringifiedRegexp.test(content)) {
+    return content;
+  }
+  return JSON.stringify(content, null, 2);
+};
+
+const stringifySymbol = symbol =>
+  stringify({
+    id: symbol.id,
+    use: symbol.useId,
+    viewBox: symbol.viewBox,
+    content: symbol.render(),
+  });
+
+const runtimeGenerator = ({symbol, config, loaderContext}) => {
+  const {spriteModule, symbolModule, runtimeOptions} = config;
+  // eslint-disable-next-line no-underscore-dangle
+  const compilerContext = loaderContext._compiler.context;
+
+  const iconModulePath = path.resolve(compilerContext, runtimeOptions.iconModule);
+  const iconModuleRequest = stringify(path.relative(path.dirname(symbol.request.file), iconModulePath));
+
+  const spriteRequest = stringifyRequest(
+    {context: loaderContext.context},
+    path.resolve(loaderContext.context, spriteModule),
+  );
+  const symbolRequest = stringifyRequest(
+    {context: loaderContext.context},
+    path.resolve(loaderContext.context, symbolModule),
+  );
+  const parentComponentDisplayName = 'SpriteSymbolComponent';
+  const displayName = `${pascalCase(symbol.id)}_${parentComponentDisplayName}`;
+
+  return `
+    import * as React from 'react';
+    import SpriteSymbol from ${symbolRequest};
+    import sprite from ${spriteRequest};
+    import ${parentComponentDisplayName} from ${iconModuleRequest};
+
+    const symbol = new SpriteSymbol(${stringifySymbol(symbol)});
+    sprite.add(symbol);
+    const ${displayName} = props => {
+      return <${parentComponentDisplayName} glyph="${symbol.id}" {...props} />;
+    };
+    export default ${displayName};
+  `;
+};
+
+module.exports = runtimeGenerator;

client/scripts/typed-css-modules-loader.js

@@ -0,0 +1,28 @@
+const chalk = require('chalk');
+const DtsCreator = require('typed-css-modules');
+const prettier = require('../../scripts/prettier');
+
+const creator = new DtsCreator();
+
+module.exports = async function moduleLoader(source, map) {
+  if (this.cacheable) {
+    this.cacheable();
+  }
+
+  try {
+    const callback = this.async();
+    const dtsContent = await creator.create(this.resourcePath, source);
+
+    await dtsContent.writeFile();
+    await prettier.formatFile(dtsContent.outputFilePath, dtsContent.outputFilePath);
+
+    return callback(null, source, map);
+  } catch (error) {
+    console.log(chalk.red(chalk.red('CSS module type generation failed.')));
+    console.log(error.message);
+
+    if (error.stack != null) {
+      console.log(chalk.gray(error.stack));
+    }
+  }
+};