Make Wasp work with tsconfig path aliases

waspc/data/Cli/templates/skeleton/tsconfig.json

@@ -1,11 +1,18 @@
 // =============================== IMPORTANT =================================
+// This file is mainly used for Wasp IDE support.
 //
-// This file is only used for Wasp IDE support. You can change it to configure
-// your IDE checks, but none of these options will affect the TypeScript
-// compiler. Proper TS compiler configuration in Wasp is coming soon :)
+// Wasp will compile your code with slightly different (less strict) compilerOptions.
+// You can increase the configuration's strictness (e.g., by adding
+// "noUncheckedIndexedAccess": true), but you shouldn't reduce it (e.g., by
+// adding "strict": false). Just keep in mind that this will only affect your
+// IDE support, not the actual compilation.
+//
+// Full TypeScript configurability is coming very soon :)
 {
   "compilerOptions": {
     "module": "esnext",
+    // Needed because this is used as a project reference.
+    "composite": true,
     "target": "esnext",
     // We're bundling all code in the end so this is the most appropriate option,
     // it's also important for autocomplete to work properly.
@@ -20,6 +27,7 @@
       "dom.iterable",
       "esnext"
     ],
+    "skipLibCheck": true,
     "allowJs": true,
     "typeRoots": [
       // This is needed to properly support Vitest testing with jest-dom matchers.
@@ -32,10 +40,9 @@
       // Source 2: https://github.com/testing-library/jest-dom/issues/546#issuecomment-1889884843
       "node_modules/@types"
     ],
-    // Since this TS config is used only for IDE support and not for
-    // compilation, the following directory doesn't exist. We need to specify
-    // it to prevent this error:
-    // https://stackoverflow.com/questions/42609768/typescript-error-cannot-write-file-because-it-would-overwrite-input-file
-    "outDir": ".wasp/phantom"
-  }
+    "outDir": ".wasp/out/user"
+  },
+  "include": [
+    "src"
+  ]
 }

waspc/data/Generator/templates/react-app/tsconfig.app.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/vite-react/tsconfig.json",
+  "compilerOptions": {
+    // Temporary loosen the type checking until we can address all the errors.
+    "jsx": "preserve",
+    "allowJs": true,
+    "strict": false,
+    "skipLibCheck": true,
+    // Allow importing pages with the .tsx extension.
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    // TODO: It would be better to inject this knowledge from Haskell.
+    { "path": "../../../tsconfig.json" }
+  ]
+}

waspc/data/Generator/templates/react-app/tsconfig.json

@@ -1,19 +1,7 @@
 {
-  "extends": "@tsconfig/vite-react/tsconfig.json",
-  "compilerOptions": {
-    // Temporary loosen the type checking until we can address all the errors.
-    "jsx": "preserve",
-    "allowJs": true,
-    "strict": false,
-    // Allow importing pages with the .tsx extension.
-    "allowImportingTsExtensions": true,
-  },
-  "include": [
-    "src"
-  ],
+  "files": [],
   "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" },
   ]
-}
+}

waspc/data/Generator/templates/react-app/tsconfig.node.json

@@ -2,9 +2,13 @@
   "compilerOptions": {
     "composite": true,
     "skipLibCheck": true,
+    "noEmit": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
   },
-  "include": ["vite.config.ts", "./src/ext-src/vite.config.ts"]
-}
+  "include": [
+    "vite.config.ts",
+    "./src/ext-src/vite.config.ts"
+  ]
+}

waspc/data/Generator/templates/react-app/vite.config.ts

@@ -3,6 +3,9 @@
 import { mergeConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { defaultExclude } from "vitest/config"
+import { resolveProjectPath } from "wasp/dev"
+import tsconfigPaths from 'vite-tsconfig-paths'
+
 
 {=# customViteConfig.isDefined =}
 // Ignoring the TS error because we are importing a file outside of TS root dir.
@@ -16,7 +19,12 @@ const _waspUserProvidedConfig = {};
 
 const defaultViteConfig = {
   base: "{= baseDir =}",
-  plugins: [react()],
+  plugins: [
+    tsconfigPaths({
+      projects: ["./", resolveProjectPath("./")]
+    }),
+    react()
+  ],
   optimizeDeps: {
     exclude: ['wasp']
   },

waspc/data/Generator/templates/sdk/wasp/dev/index.ts

@@ -12,6 +12,7 @@ import { join as joinPaths } from 'path'
  * .wasp/out/web-app directory. This function resolves a project root dir path
  * to be relative to the `web-app` directory i.e. `../../../projectDirPath`.
  */
+// TODO: The relative path should come from Haskell
 export function resolveProjectPath(path: string): string {
   return joinPaths('../../../', path)
 }

waspc/data/Generator/templates/sdk/wasp/package.json

@@ -45,7 +45,7 @@
       {=!  expose it here (which leaks it to our users). We could avoid this by =}
       {=!  using relative imports inside SDK code (instead of library imports), =}
       {=!  but I didn't have time to implement it. =}
-      "./ext-src/*": "./dist/ext-src/*.js",
+      "./src/*": "./dist/src/*.js",
       {=!  Used by our code, uncodumented (but accessible) for users. =}
       "./operations/*": "./dist/operations/*",
       {=!  Used by our code, uncodumented (but accessible) for users. =}

waspc/data/Generator/templates/sdk/wasp/tsconfig.json

@@ -43,12 +43,11 @@
     // While this is great, we still want to dig deeper at some point to understand
     // better why Vite HMR misbehaves when the SDK is recompiled: https://github.com/wasp-lang/wasp/issues/1934 
     "incremental": true,
-    // todo(filip): Only works with common js, see https://www.typescriptlang.org/tsconfig#paths and daily-article.
-    // "paths": {
-    //   "@wasp/*": [
-    //     "./*.js"
-    //   ]
-    // }
+    "paths": {
+      {=# paths =}
+        "{= path =}": ["{= lookupLocation =}"],
+      {=/ paths =}
+    }
   },
   "include": [
     "."

waspc/data/Generator/templates/server/rollup.config.js

@@ -1,5 +1,7 @@
 {{={= =}=}}
 import esbuild from 'rollup-plugin-esbuild'
+import alias from '@rollup/plugin-alias';
+import resolve from '@rollup/plugin-node-resolve';
 
 export default [
   createBundle('src/server.ts', 'bundle/server.js'),
@@ -17,12 +19,20 @@ function createBundle(inputFilePath, outputFilePath) {
       sourcemap: true,
     },
     plugins: [
+      resolve(),
+      alias({
+        entries: [
+          {=# aliases =}
+          { find: '{= find =}', replacement: '{= replacement =}' },
+          {=/ aliases =}
+        ]
+      }),
       esbuild({
         target: 'esnext',
       }),
     ],
     // We don't want to bundle any of the node_module deps
     // as we want to keep them as external dependencies
-    external: (id) => !/^[./]/.test(id),
+    external: /node_modules/,
   }
 }

waspc/data/Generator/templates/server/tsconfig.json

@@ -4,23 +4,15 @@
   "compilerOptions": {
     // Overriding this until we implement more complete TypeScript support.
     "strict": false,
-    // When left unspecified, the 'rootDir' defaults to the longest common path of
-    // all non-declaration input files. TypeScript mimics the source structure
-    // inside the output directory (i.e., 'dist').
+
+    // This property currently doesn't matter because we haven't been running
+    // TSC on server code since https://github.com/wasp-lang/wasp/pull/1714.
     //
-    // Since Wasp apps can (but don't have to) import user files from
-    // '../../../src', it makes the rootDir's default value inconsistent:
-    //   - When the app doesn't import user files (e.g., the user didn't specify
-    //   any operations), the rootDir is set to the server source dir (/src).
-    //   - When the app imports user files (as is the case for most Wasp apps),
-    //   the rootDir is set to the Wasp project root (../../../).
-    //
-    // Our build script (in package.json) requires a consistent structure of
-    // the output directory, which is why we always make sure to point the rootDir
-    // to the Wasp project root (../../../).
-    //
-    // See this comment for more details: https://github.com/wasp-lang/wasp/pull/1584#discussion_r1404019301
-    "rootDir": "../../../",
+    // When we start running TSC again (after we fix all current errors and
+    // make project references work for the TS config), then I believe the
+    // correct configuration is "rootDir": "." (the project reference should
+    // take care of the user code), but we should double-check.
+    "rootDir": ".",
     // Overriding this because we want to use top-level await
     "module": "esnext",
     "target": "es2017",
@@ -36,5 +28,8 @@
   },
   "include": [
     "src"
+  ],
+  "references": [
+    { "path": "../../../tsconfig.json" }
   ]
-}
+}