Fix babel not working with typescript project referencing

Note: the critical code is NOT mine; see facebook/create-react-app#6799 (comment).

.shared/.gitignore

@@ -115,5 +115,6 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
-# ts built js files
-/built-src
+# ts built files
+*.js
+*.d.ts

.shared/index.ts

@@ -0,0 +1 @@
+export * from "./src/types";

.shared/package.json

@@ -2,6 +2,6 @@
   "name": "opal-shared",
   "version": "1.0.0",
   "scripts": {
-    "start": "tsc -w"
+    "start": "tsc -b -w"
   }
 }

.shared/tsconfig.json

@@ -8,6 +8,8 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strictNullChecks": true,
+    "declaration": true,
+    "declarationMap": true,
     "strictFunctionTypes": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
@@ -16,7 +18,5 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "resolveJsonModule": true,
-    "outDir": "built-src"
   },
-  "include": ["src"]
 }

client/.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# ts built js files
+/built-src

client/config-overrides.js

@@ -0,0 +1,26 @@
+/*
+ * Code by @DakotaLarson on Github.
+ * See https://github.com/facebook/create-react-app/issues/6799#issuecomment-570081122
+ */
+
+const {
+  override,
+  removeModuleScopePlugin,
+  getBabelLoader,
+} = require("customize-cra");
+const path = require("path");
+
+console.log("f");
+
+const addShared = (config) => {
+  console.log(config);
+  const loader = getBabelLoader(config, false);
+  const sharedPath = path
+    .normalize(path.join(process.cwd(), "../.shared/src/types"))
+    .replace(/\\/g, "\\");
+
+  loader.include = [loader.include, sharedPath];
+  return config;
+};
+
+module.exports = override(addShared, removeModuleScopePlugin());

client/package.json

@@ -9,9 +9,11 @@
     "@types/react-dom": "^16.9.10",
     "@types/react-router-dom": "^5.1.6",
     "@types/recompose": "^0.30.7",
+    "customize-cra": "^1.0.0",
     "firebase": "^7.23.0",
     "katex": "^0.12.0",
     "react": "^16.13.1",
+    "react-app-rewired": "^2.1.8",
     "react-dom": "^16.13.1",
     "react-feather": "^2.0.8",
     "react-router-dom": "^5.2.0",
@@ -21,9 +23,9 @@
     "typescript": "^4.1.3"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "proxy": "https://localhost:2718",

client/src/Constants/types.ts

@@ -1,9 +1,4 @@
-import {
-  data,
-  problemAction,
-  reply,
-  ReplyType,
-} from "../../../.shared/src/types";
+import { data, problemAction, ReplyType } from "../../../.shared";
 
 /*
  * The idea here is that if success is true, the value must be of type output.

client/src/Firebase/index.ts

@@ -8,7 +8,7 @@ import {
   Client,
   projectActionProtected,
   data,
-} from "../../../.shared//src/types";
+} from "../../../.shared/";
 import { Result } from "../Constants/types";
 
 export { FirebaseContext, withFirebase };

client/src/ProjectView/Project/View/Details/Reply/index.tsx

@@ -23,11 +23,7 @@ import Latex from "../../../../../Constants/latex";
 import { formatTime } from "../../../../../Constants";
 import * as ROUTES from "../../../../../Constants/routes";
 import { compose } from "recompose";
-import {
-  problemAction,
-  reply,
-  ReplyType,
-} from "../../../../../../../.shared/src/types";
+import { problemAction, reply, ReplyType } from "../../../../../../../.shared";
 import styles from "./index.css";
 
 type ReplyProps = WithStyles<typeof styles> &

client/src/ProjectView/Project/View/Details/index.tsx

@@ -7,7 +7,7 @@ import { compose } from "recompose";
 
 import * as ROUTES from "../../../../Constants/routes";
 import Reply from "./Reply";
-import { reply as replyType } from "../../../../../../.shared/src/types";
+import { reply as replyType } from "../../../../../../.shared";
 import styles from "./index.css";
 import { ProblemDetails } from "../../../../Constants/types";
 

client/src/ProjectView/Project/index.tsx

@@ -7,7 +7,7 @@ import {
   vote,
   problemAction,
   ReplyType,
-} from "../../../../.shared/src/types";
+} from "../../../../.shared";
 import { poll } from "../../Constants";
 import { Result } from "../../Constants/types";
 import { getProjectPrivate, tryProblemAction } from "../../Firebase";

client/src/ProjectView/Selection/Table/constants.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { lighten, darken, createStyles, Theme } from "@material-ui/core";
 import { formatTime } from "../../../Constants";
-import { Client } from "../../../../../.shared/src/types";
+import { Client } from "../../../../../.shared";
 import { ProjectDataPoint } from "../../../Constants/types";
 
 export const getDataPoint = (

client/src/ProjectView/Selection/Table/index.tsx

@@ -20,10 +20,9 @@ import { camelToTitle } from "../../../Constants";
 import {
   Client,
   projectAction,
-  ProjectActionProtected,
   isProjectActionProtected,
   isProjectActionTrivial,
-} from "../../../../../.shared/src/types";
+} from "../../../../../.shared";
 import {
   ProjectDataPoint,
   ProjectViewSort,

client/src/ProjectView/Selection/Table/modal.tsx

@@ -15,7 +15,7 @@ import {
   projectAction,
   ProjectActionProtected,
   ProjectActionTrivial,
-} from "../../../../../.shared/src/types";
+} from "../../../../../.shared";
 
 interface ModalProps {
   show: boolean;

client/src/ProjectView/Selection/Table/projectrow.tsx

@@ -16,7 +16,7 @@ import { WithStyles, withStyles } from "@material-ui/core/styles";
 import { UserPlus, Trash2, Edit, Star, CornerLeftUp } from "react-feather";
 import { Link } from "react-router-dom";
 import { rowStyles, dataPointDisplay, IfDisplay } from "./constants";
-import { Client, projectAction } from "../../../../../.shared/src/types";
+import { Client, projectAction } from "../../../../../.shared";
 import { ProjectDataPoint } from "../../../Constants/types";
 
 interface ProjectRowProps extends WithStyles<typeof rowStyles> {

client/src/ProjectView/Selection/Table/projecttoolbar.tsx

@@ -9,7 +9,7 @@ import {
 } from "@material-ui/core";
 import { Filter, Trash2 } from "react-feather";
 import { toolbarStyles } from "./constants";
-import { projectAction } from "../../../../../.shared/src/types";
+import { projectAction } from "../../../../../.shared";
 
 interface ProjectToolbarProps extends WithStyles<typeof toolbarStyles> {
   selected: string[];

client/src/ProjectView/Selection/index.tsx

@@ -10,7 +10,7 @@ import Table from "./Table";
 import { getVisibleProjects } from "../../Firebase";
 import MenuBase from "../MenuBase";
 import { poll, projectViewTypes } from "../../Constants";
-import { Client } from "../../../../.shared/src/types";
+import { Client } from "../../../../.shared";
 import {
   ProjectViewSort,
   ProjectDataPoint,

client/src/ProjectView/TopBar/index.tsx

@@ -16,7 +16,7 @@ import {
 } from "@material-ui/core";
 import React from "react";
 import { Bell, User, Loader } from "react-feather";
-import { Notification } from "../../../../.shared/src/types";
+import { Notification } from "../../../../.shared";
 import { Result } from "../../Constants/types";
 import Loading from "../../Loading";
 import styles from "./index.css";

client/src/ProjectView/index.tsx

@@ -12,7 +12,7 @@ import TopBar from "./TopBar";
 import { poll } from "../Constants";
 import Fail from "../Fail";
 import { WithAuthorization } from "../Session/withAuthorization";
-import { Notification } from "../../../.shared/src/types";
+import { Notification } from "../../../.shared";
 import { Result } from "../Constants/types";
 
 interface ProjectViewProps extends WithAuthorization {}

client/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es6",
+    "target": "es5",
     "lib": [
       "dom",
       "dom.iterable",
@@ -12,15 +12,19 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "noEmit": true,
+    "jsx": "react",
   },
   "include": [
     "src"
   ],
-  "references": [{ "path": "../.shared" }],
+  "references": [
+    {
+      "path": "../.shared"
+    }
+  ]
 }

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "references": [
+    {
+      "path": "./.shared"
+    }
+  ],
+  "files": []
+}