Fix ts project references spinoff

.gitignore

@@ -13,3 +13,5 @@ yarn-error.log*
 /.changelog
 .npm/
 yarn.lock
+
+tsconfig.tsbuildinfo

my-react-app/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=false

my-react-app/package.json

@@ -12,8 +12,9 @@
     "@types/react-dom": "^16.9.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "/home/martin/git/temp/create-react-app/packages/react-scripts/react-scripts-3.4.1.tgz",
-    "typescript": "~3.7.2"
+    "typescript": "^4.0.2",
+    "react-scripts": "*",
+    "will-work-on-ts-side-but-not-cra-side": "*"
   },
   "scripts": {
     "start": "react-scripts start",

my-react-app/src/App.tsx

@@ -3,31 +3,43 @@ import logo from './logo.svg';
 import './App.css';
 
 // Works but requires a separate build step
-import { greeting } from '../../my-lib/dist/helloWorld';
+import { greeting } from './libs/my-lib/helloWorld';
+import { Foo } from './libs/my-react-lib/Some';
 
-// Fails with: Module parse failed: Unexpected token (4:26) / You may need an additional loader to handle the result of these loaders.
-// import { greeting } from '../../my-lib/src/helloWorld'
+/**
+ On this import, typescript figure out package.json.main -> dist/index.js -> src/index.ts
+ This is not standard node resolution, but very a powerful feature  
+ So webpack can't resolve it
 
-// Fails because path aliases are ignored (?)
-// import { greeting } from '@my-lib/helloWorld'
+ So if you try to use `will_work_on_ts_side_but_not_cra_side` symbol in the code, it will fail
+*/
+import { will_work_on_ts_side_but_not_cra_side } from 'will-work-on-ts-side-but-not-cra-side';
+
+/**
+ On this import we help webpack & typescript to get the file directly, and both typescript & webpack can resolve it,
+ BUT CRA won't pass files outside of the app's root dir in babel-loader
+
+ So if you try to use `will_work_on_ts_side_but_not_cra_side` symbol in the code, it will fail
+*/
+import { will_work_on_ts_side_but_not_cra_side as alsoThisWillNotWork } from 'will-work-on-ts-side-but-not-cra-side/src/index';
+
+// Parameter 'imwillerror' implicitly has an 'any' type.ts(7006)
+// export function implicitAnyWillErrorHere(imwillerror) {
+
+// }
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+        {/* un-commenting the line below will break cra build: Can't resolve 'will-work-on-ts-side-but-not-cra-side'  */}
+        {/* <p>{will_work_on_ts_side_but_not_cra_side()}</p> */}
+        {/* un-commenting the line below will break cra build: Can't resolve 'Module parse failed: Unexpected token'  */}
+        {/* <p>{alsoThisWillNotWork()}</p> */}
+        <p>{greeting(34563456)}</p>
         <p>
-          Edit <code>src/App.tsx</code> and save to reload.
+          <Foo />
         </p>
-        <p>{greeting()}</p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
       </header>
     </div>
   );

my-react-app/src/libs/my-lib/helloWorld.ts

@@ -0,0 +1,3 @@
+export function greeting(imImplicitAny): String {
+  return 'Hello World!';
+}

my-lib/tsconfig.json → my-react-app/src/libs/my-lib/tsconfig.json

@@ -5,14 +5,13 @@
     "lib": ["DOM", "ES2019"],
     "moduleResolution": "node",
     "esModuleInterop": true,
-    // "baseUrl": ".",
     "composite": true,
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "resolveJsonModule": true
-  },
-  "include": ["./src"]
+    "resolveJsonModule": true,
+    "noImplicitAny": false,
+    "types": [],
+    "emitDeclarationOnly": true
+  }
 }

my-react-app/src/libs/my-react-lib/Some.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function Foo() {
+  return <div>I'm Foo Component</div>;
+}

my-react-app/src/libs/my-react-lib/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "lib": ["DOM", "ES2019"],
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "types": [],
+    "emitDeclarationOnly": true
+  }
+}

my-react-app/tsconfig.json

@@ -14,15 +14,20 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "types": []
   },
   "include": ["src"],
-  "paths": {
-    "@my-lib/*": ["../my-lib/src/*"]
-  },
+  "exclude": ["src/libs"],
   "references": [
     {
-      "path": "../my-lib"
+      "path": "src/libs/my-lib"
+    },
+    {
+      "path": "src/libs/my-react-lib"
+    },
+    {
+      "path": "../packages/will-work-on-ts-side-but-not-cra-side"
     }
   ]
 }

package.json

@@ -1,7 +1,8 @@
 {
   "private": true,
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "my-react-app"
   ],
   "scripts": {
     "build": "cd packages/react-scripts && node bin/react-scripts.js build",

packages/react-scripts/config/paths.js

@@ -115,7 +115,9 @@ if (
   !reactScriptsLinked &&
   __dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1
 ) {
-  const templatePath = '../cra-template/template';
+  // const templatePath = '../cra-template/template';
+  // Trick react-scripts to work in-place with our top level dir
+  const templatePath = '../../my-react-app';
   module.exports = {
     dotenv: resolveOwn(`${templatePath}/.env`),
     appPath: resolveApp('.'),

packages/will-work-on-ts-side-but-not-cra-side/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "will-work-on-ts-side-but-not-cra-side",
+  "version": "1.0.0",
+  "private": true,
+  "main": "dist/index.js",
+  "author": "Bnaya Peretz",
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "^4.0.3"
+  }
+}

packages/will-work-on-ts-side-but-not-cra-side/src/index.ts

@@ -0,0 +1,3 @@
+export function will_work_on_ts_side_but_not_cra_side(): string {
+  return 'will_work_on_ts_side_but_not_cra_side';
+}

packages/will-work-on-ts-side-but-not-cra-side/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["ESNext"],
+    "emitDeclarationOnly": true,
+    "composite": true,
+    "isolatedModules": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}