Add React hot refresh

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+build
+dist
+viz-lib/lib

babel.config.js

@@ -0,0 +1,35 @@
+module.exports = api => {
+  // This caches the Babel config by environment.
+  api.cache.using(() => process.env.NODE_ENV);
+  return {
+    sourceMaps: true,
+    sourceType: 'module',
+    retainLines: true,
+    presets: [
+      [
+        "@babel/preset-env",
+        {
+          exclude: [
+            "@babel/plugin-transform-async-to-generator",
+            "@babel/plugin-transform-arrow-functions"
+          ],
+          useBuiltIns: "usage",
+          corejs: { version: 3, proposals: true }
+        }
+      ],
+      "@babel/preset-react",
+      "@babel/preset-typescript"
+    ],
+    plugins: [
+      "@babel/plugin-proposal-class-properties",
+      "@babel/plugin-transform-object-assign",
+      [
+        "babel-plugin-transform-builtin-extend",
+        {
+          globals: ["Error"]
+        }
+      ],
+      !api.env("production") && "react-refresh/babel"
+    ].filter(Boolean)
+  };
+};

client/app/components/DialogWrapper.jsx

@@ -215,10 +215,15 @@ function openDialog(DialogComponent, props) {
 }
 
 export function wrap(DialogComponent) {
-  return {
-    Component: DialogComponent,
-    showModal: props => openDialog(DialogComponent, props),
-  };
+  function WrappedComponent(props) {
+    return <DialogComponent {...props} />;
+  }
+  WrappedComponent.Component = DialogComponent;
+  WrappedComponent.showModal = props => openDialog(DialogComponent, props);
+  // Must return a React component, too, otherwise it will fail `isReactRefreshBoundary`
+  // test, breaking hot refresh for modules that export the wrapped component.
+  // Ref: https://github.com/facebook/react/issues/16604#issuecomment-528663101
+  return WrappedComponent;
 }
 
 export default {

package.json

@@ -4,7 +4,7 @@
   "description": "The frontend part of Redash.",
   "main": "index.js",
   "scripts": {
-    "start": "npm-run-all --parallel watch:viz webpack-dev-server",
+    "start": "NODE_ENV=development webpack-dev-server",
     "bundle": "bin/bundle-extensions",
     "clean": "rm -rf ./client/dist/",
     "build:viz": "(cd viz-lib && npm run build:babel)",
@@ -16,19 +16,23 @@
     "webpack-dev-server": "webpack-dev-server",
     "analyze": "npm run clean && BUNDLE_ANALYZER=on webpack",
     "analyze:build": "npm run clean && NODE_ENV=production BUNDLE_ANALYZER=on webpack",
-    "lint": "npm run lint:base -- --ext .js --ext .jsx --ext .ts --ext .tsx ./client",
-    "lint:fix": "npm run lint:base  -- --fix --ext .js --ext .jsx --ext .ts --ext .tsx ./client",
-    "lint:base": "eslint --config ./client/.eslintrc.js --ignore-path ./client/.eslintignore",
+    "lint": "npm run lint:client && npm run lint:viz",
+    "lint:client": "npm run lint:base -- ./client",
+    "lint:viz": "npm run lint:base -- ./viz-lib",
+    "lint:base": "eslint --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "npm run lint:base -- --fix ./client",
     "lint:ci": "npm run lint -- --max-warnings 0 --format junit --output-file /tmp/test-results/eslint/results.xml",
-    "prettier": "prettier --write 'client/app/**/*.{js,jsx,ts,tsx}' 'client/cypress/**/*.{js,jsx,ts,tsx}'",
+    "prettier": "npm run prettier:client && npm run prettier:viz",
+    "prettier:client": "prettier --write 'client/app/**/*.{js,jsx,ts,tsx}' 'client/cypress/**/*.{js,jsx,ts,tsx}'",
+    "prettier:viz": "cd viz-lib && npm run prettier",
     "type-check": "tsc --noEmit --project client/tsconfig.json",
     "type-check:watch": "npm run type-check -- --watch",
     "jest": "TZ=Africa/Khartoum jest",
     "test": "run-s type-check jest",
     "test:watch": "jest --watch",
     "cypress:install": "npm install --no-save cypress@~4.5.0 @percy/agent@0.26.2 @percy/cypress@^2.2.0 atob@2.1.2 lodash@^4.17.10 request-cookies@^1.1.0",
     "cypress": "node client/cypress/cypress.js",
-    "postinstall": "(cd viz-lib && npm ci && npm run build:babel)"
+    "postinstall": "(cd viz-lib && npm install && npm run build:babel)"
   },
   "repository": {
     "type": "git",
@@ -51,6 +55,7 @@
     "axios": "^0.19.0",
     "bootstrap": "^3.3.7",
     "classnames": "^2.2.6",
+    "core-js": "^3.6.5",
     "d3": "^3.5.17",
     "debug": "^3.1.0",
     "dompurify": "^2.0.7",
@@ -86,6 +91,8 @@
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.10.4",
+    "@babel/runtime-corejs3": "^7.11.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
     "@types/classnames": "^2.2.10",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/lodash": "^4.14.157",
@@ -129,6 +136,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
     "raw-loader": "^0.5.1",
+    "react-refresh": "^0.8.3",
     "react-test-renderer": "^16.5.2",
     "request": "^2.88.0",
     "request-cookies": "^1.1.0",

viz-lib/jsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": "./",
     "paths": {
-      "@/*": ["./src/*"]
+      "@@/*": ["./src/*"]
     }
   },
   "exclude": ["dist", "lib"]

viz-lib/src/components/ColorPicker/index.jsx

@@ -6,7 +6,7 @@ import Popover from "antd/lib/popover";
 import Card from "antd/lib/card";
 import Tooltip from "antd/lib/tooltip";
 import Icon from "antd/lib/icon";
-import chooseTextColorForBackground from "@/lib/chooseTextColorForBackground";
+import chooseTextColorForBackground from "@@/lib/chooseTextColorForBackground";
 
 import ColorInput from "./Input";
 import Swatch from "./Swatch";

viz-lib/src/components/HtmlContent.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import sanitize from "@/services/sanitize";
+import sanitize from "@@/services/sanitize";
 
 const HtmlContent = React.memo(function HtmlContent({ children, ...props }) {
   return (

viz-lib/src/components/visualizations/editor/ContextHelp.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import Popover from "antd/lib/popover";
 import Icon from "antd/lib/icon";
-import { visualizationsSettings } from "@/visualizations/visualizationsSettings";
+import { visualizationsSettings } from "@@/visualizations/visualizationsSettings";
 
 import "./context-help.less";
 

viz-lib/src/components/visualizations/editor/createTabbedEditor.jsx

@@ -2,7 +2,7 @@ import { isFunction, map, filter, extend, merge } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 import Tabs from "antd/lib/tabs";
-import { EditorPropTypes } from "@/visualizations/prop-types";
+import { EditorPropTypes } from "@@/visualizations/prop-types";
 
 export const UpdateOptionsStrategy = {
   replace: (existingOptions, newOptions) => merge({}, newOptions),