use babel instead of ts-loader

webapp/config/webpack/paths.js

@@ -0,0 +1,56 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+const publicUrlOrPath = getPublicUrlOrPath(
+    process.env.NODE_ENV === 'development',
+    require(resolveApp('package.json')).homepage,
+    process.env.PUBLIC_URL,
+);
+
+const moduleFileExtensions = [
+    'web.mjs',
+    'mjs',
+    'web.js',
+    'js',
+    'web.ts',
+    'ts',
+    'web.tsx',
+    'tsx',
+    'json',
+    'web.jsx',
+    'jsx',
+    'd.ts'
+];
+
+// Resolve file paths in the same order as webpack
+const resolveModule = (resolveFn, filePath) => {
+    const extension = moduleFileExtensions.find((extension) => fs.existsSync(resolveFn(`${filePath}.${extension}`)));
+
+    if (extension) {
+        return resolveFn(`${filePath}.${extension}`);
+    }
+
+    return resolveFn(`${filePath}.js`);
+};
+
+// config after eject: we're in ./config/
+module.exports = {
+  appSrc: resolveApp('src'),
+  appNodeModules: resolveApp('node_modules')
+};
+
+module.exports.moduleFileExtensions = moduleFileExtensions;

webapp/config/webpack/webpack.config.local.js

@@ -6,6 +6,7 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const paths = require('./paths')
 
 let dist = process.env.DIST
 if (!dist || dist === '') {
@@ -83,17 +84,59 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /.tsx?$/,
-        use: [
-          {
-            loader: 'ts-loader',
-            options: {
-              transpileOnly: true
-            }
-          }
-        ],
-        exclude: path.resolve(process.cwd(), 'node_modules'),
+        test: /\.(js|mjs|jsx|ts|tsx)$/,
+        include: [paths.appSrc],
+        loader: require.resolve('babel-loader'),
+        options: {
+          customize: require.resolve('babel-preset-react-app/webpack-overrides'),
+          presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
+
+          plugins: [
+
+            require.resolve('@babel/plugin-syntax-dynamic-import'),
+
+            [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
+
+            [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
+
+            [
+              require.resolve('babel-plugin-named-asset-import'),
+              {
+                loaderMap: {
+                  svg: {
+                    ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
+                  },
+                },
+              },
+            ],
+
+            require.resolve('@babel/plugin-transform-runtime'),
+
+            [require.resolve('@emotion/babel-plugin'), {
+              importMap: {
+                "~/style": {
+                  "styled": {
+                    "canonicalImport": ["@emotion/styled", "default"],
+                  },
+                  "css": {
+                    "canonicalImport": ["@emotion/react", "css"]
+                  }
+                }
+              }
+            }]
+
+          ],
+          // This is a feature of `babel-loader` for webpack (not Babel itself).
+          // It enables caching results in ./node_modules/.cache/babel-loader/
+          // directory for faster rebuilds.
+          // cacheDirectory: true,
+          // See #6846 for context on why cacheCompression is disabled
+          cacheCompression: false,
+          compact: false,
+        },
       },
+
+
       {
         test: /\.(jpe?g|png|gif|svg)$/i,
         use: [

webapp/package.json

@@ -35,6 +35,15 @@
     "whatwg-fetch": "^3.3.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.11.6",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-typescript": "^7.10.4",
+    "@emotion/babel-plugin": "^11.0.0-next.17",
     "@hot-loader/react-dom": "^16.13.0",
     "@types/classnames": "^2.2.9",
     "@types/node": "^14.6.4",
@@ -48,6 +57,9 @@
     "@types/webpack-env": "^1.15.2",
     "@typescript-eslint/eslint-plugin": "^4.0.1",
     "@typescript-eslint/parser": "^4.0.1",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-named-asset-import": "^0.3.6",
+    "babel-preset-react-app": "^9.1.2",
     "copy-webpack-plugin": "^6.0.3",
     "css-loader": "^4.2.2",
     "dotenv": "8.2.0",
@@ -61,13 +73,13 @@
     "fork-ts-checker-webpack-plugin": "^5.1.0",
     "html-webpack-plugin": "^4.3.0",
     "prettier": "^2.1.0",
+    "react-dev-utils": "^10.2.1",
     "react-hot-loader": "^4.12.21",
     "rimraf": "^3.0.2",
     "serve": "^11.3.1",
     "source-map-loader": "^1.0.2",
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^4.1.0",
-    "ts-loader": "^8.0.3",
     "tsconfig-paths-webpack-plugin": "^3.3.0",
     "typescript": "^4.0.2",
     "typescript-styled-plugin": "^0.15.0",

webapp/src/modules/home/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import { Styled, Box, Flex, Text } from '~/style'
+import { Styled, Box, Flex, Text, styled, css } from '~/style'
 import { LineChart } from './LineChart'
 import { Switcher } from '~/style'
 import { useStore, DataStore } from '~/stores'
 import { DataMode } from '~/stores/DataStore'
+import { Redirect } from 'react-router'
 
 export const HomeRoute = () => {
   const dataStore = useStore<DataStore>('data')
@@ -27,6 +28,12 @@ export const HomeRoute = () => {
         Ethereum Gas Price Gauge
       </Box>
 
+      <Box>
+        testing..
+        <Another>yes</Another>
+        <Nest>yes2</Nest>
+      </Box>
+
       <Flex type='centered-row' sx={{ mt: 2, mb: 3 }}>
         <Switcher
           option1={{value: DataMode.SUGGESTED, label: "Suggested"}}
@@ -141,3 +148,28 @@ const GasStat = ({
     </Box>
   )
 }
+
+const SomeStyle = css({
+  color: 'yellow',
+  backgroundColor: 'red'
+})
+  // color: yellow;
+// `
+
+const Another = styled.a`
+  ${SomeStyle}
+`
+
+const Comp = styled.div`
+  width: 100px;
+  background-color: purple;
+`
+
+const Nest = styled.div`
+  :hover {
+    ${Comp} {
+      visibility: visible;
+    }
+  }
+`
+// NOTE: move the following code into the styled.div`` above to use the component selector

webapp/src/stores/DataStore.ts

@@ -45,8 +45,9 @@ export class DataStore {
       this.updated.set(this.lastSuggestedPoll)
     }
 
-    poll()
-    setInterval(() => poll(), 1500)
+    // NOTE: disabled polling for now
+    // poll()
+    // setInterval(() => poll(), 1500)
   }
 
   async pollSuggested() {

webapp/src/style/styled.ts

@@ -4,4 +4,6 @@ import { css as _css, ThemeUIStyleObject } from 'theme-ui'
 
 export const styled = _styled as CreateStyled<ThemeInterface>
 
+// TODO: perhaps rename to styledCss ..?
+// and leave emotion css untouched?
 export const css = (args?: ThemeUIStyleObject) => _css(args)(theme)

webapp/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2017",
+    "target": "es5",
     "module": "esnext",
     "moduleResolution": "node",
     "jsx": "react",
@@ -22,7 +22,8 @@
     "noErrorTruncation": true,
     "experimentalDecorators": true,
     "forceConsistentCasingInFileNames": true,
-    "allowJs": false,
+    "isolatedModules": true,
+    "allowJs": true,
     "checkJs": false,
     "baseUrl": "./",
     "rootDir": "./src",
@@ -33,11 +34,11 @@
       "name": "typescript-styled-plugin"
     }],
     "paths": {
-      "~/*": ["src/*"],
-      "#/*": ["src/components/*"]
+      "~/*": ["./src/*"],
+      "#/*": ["./src/components/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules", "dist", "build"],
   "files": [
     "typings/import-images.d.ts"