Make Wasp work with tsconfig path aliases

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/examples/todoApp/src/Todo.tsx

@@ -6,7 +6,6 @@ import {
   type OptimisticUpdateDefinition,
   createTask,
   updateTaskIsDone,
-  deleteCompletedTasks,
   toggleAllTasks,
   useQuery,
   getTasks,
@@ -16,8 +15,8 @@ import {
 } from 'wasp/client/operations'
 
 import React, { useState, FormEventHandler, ChangeEventHandler } from 'react'
-
-type NonEmptyArray<T> = [T, ...T[]]
+import { NonEmptyArray } from '@util'
+import { Footer } from '@components/Footer'
 
 export function areThereAnyTasks(
   tasks: Task[] | undefined
@@ -59,34 +58,6 @@ const Todo = () => {
   )
 }
 
-const Footer = ({ tasks }: { tasks: NonEmptyArray<Task> }) => {
-  const numCompletedTasks = tasks.filter((t) => t.isDone).length
-  const numUncompletedTasks = tasks.filter((t) => !t.isDone).length
-
-  const handleDeleteCompletedTasks = async () => {
-    try {
-      await deleteCompletedTasks()
-    } catch (err) {
-      console.log(err)
-    }
-  }
-
-  return (
-    <div className="flex justify-between">
-      <div>{numUncompletedTasks} items left</div>
-
-      <div>
-        <button
-          className={'btn btn-red ' + (numCompletedTasks > 0 ? '' : 'hidden')}
-          onClick={handleDeleteCompletedTasks}
-        >
-          Delete completed
-        </button>
-      </div>
-    </div>
-  )
-}
-
 const Tasks = ({ tasks }: { tasks: NonEmptyArray<Task> }) => {
   return (
     <div>

waspc/examples/todoApp/src/clientSetup.js → waspc/examples/todoApp/src/clientSetup.ts

@@ -1,5 +1,5 @@
 import { testingAction } from 'wasp/client/operations'
-import { sayHi } from './util'
+import { sayHi } from '@util'
 
 export function setup() {
   console.log('This was called from the client setup function')

waspc/examples/todoApp/src/components/Footer.tsx

@@ -0,0 +1,31 @@
+import { NonEmptyArray } from "@util"
+import { deleteCompletedTasks } from "wasp/client/operations"
+import { Task } from "wasp/entities"
+
+export const Footer = ({ tasks }: { tasks: NonEmptyArray<Task> }) => {
+  const numCompletedTasks = tasks.filter((t) => t.isDone).length
+  const numUncompletedTasks = tasks.filter((t) => !t.isDone).length
+
+  const handleDeleteCompletedTasks = async () => {
+    try {
+      await deleteCompletedTasks()
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  return (
+    <div className="flex justify-between">
+      <div>{numUncompletedTasks} items left</div>
+
+      <div>
+        <button
+          className={'btn btn-red ' + (numCompletedTasks > 0 ? '' : 'hidden')}
+          onClick={handleDeleteCompletedTasks}
+        >
+          Delete completed
+        </button>
+      </div>
+    </div>
+  )
+}

waspc/examples/todoApp/src/serverSetup.ts

@@ -6,7 +6,7 @@ import {
   type MiddlewareConfigFn,
   type ServerSetupFn,
 } from 'wasp/server'
-import { sayHi } from './util.js'
+import { sayHi } from '@util'
 import cors from 'cors'
 import './testTypes/operations/server.js'
 

waspc/examples/todoApp/src/util.js → waspc/examples/todoApp/src/util.ts

@@ -1,3 +1,6 @@
 export function sayHi() {
     console.log("This is coming from shared function.")
 }
+
+
+export type NonEmptyArray<T> = [T, ...T[]]

waspc/examples/todoApp/tsconfig.json

@@ -40,7 +40,11 @@
       // Source 2: https://github.com/testing-library/jest-dom/issues/546#issuecomment-1889884843
       "node_modules/@types"
     ],
-    "outDir": ".wasp/out/user"
+    "outDir": ".wasp/out/user",
+    "paths" : {
+      "@util": ["./src/util.js"],
+      "@components/*": ["./src/components/*"],
+    }
   },
   "include": [
     "src"

waspc/src/Wasp/AppSpec.hs

@@ -48,6 +48,7 @@ import Wasp.AppSpec.Query (Query)
 import Wasp.AppSpec.Route (Route)
 import Wasp.Env (EnvVar)
 import Wasp.ExternalConfig.PackageJson (PackageJson)
+import Wasp.ExternalConfig.TsConfig (TsConfig)
 import Wasp.Node.Version (oldestWaspSupportedNodeVersion)
 import Wasp.Project.Common (SrcTsConfigFile, WaspProjectDir)
 import Wasp.Project.Db.Migrations (DbMigrationsDir)
@@ -69,6 +70,7 @@ data AppSpec = AppSpec
     prismaSchema :: Psl.Schema.Schema,
     -- | The contents of the package.json file found in the root directory of the wasp project.
     packageJson :: PackageJson,
+    tsConfig :: TsConfig,
     -- | Absolute path to the directory containing the wasp project.
     waspProjectDir :: Path' Abs (Dir WaspProjectDir),
     -- | List of external code files (they are referenced/used in the declarations).

waspc/src/Wasp/ExternalConfig/TsConfig.hs

@@ -5,15 +5,22 @@
 module Wasp.ExternalConfig.TsConfig
   ( TsConfig (..),
     CompilerOptions (..),
+    ImportPathMapping (..),
   )
 where
 
 import Data.Aeson
   ( FromJSON,
+    ToJSON,
+    Value (..),
     genericParseJSON,
     parseJSON,
+    withObject,
   )
 import qualified Data.Aeson as Aeson
+import Data.List.NonEmpty (NonEmpty ((:|)), nonEmpty, toList)
+import Data.Map (Map)
+import qualified Data.Map as M
 import GHC.Generics (Generic)
 
 data TsConfig = TsConfig
@@ -34,7 +41,9 @@ data CompilerOptions = CompilerOptions
     lib :: !(Maybe [String]),
     allowJs :: !(Maybe Bool),
     typeRoots :: !(Maybe [String]),
-    outDir :: !(Maybe String)
+    outDir :: !(Maybe String),
+    baseUrl :: !(Maybe String),
+    paths :: !(Maybe ImportPathMapping)
   }
   deriving (Show, Generic)
 
@@ -46,3 +55,29 @@ instance FromJSON CompilerOptions where
       -- "module" is a reserved keyword in Haskell, so we use "_module" instead.
       modifyFieldLabel "_module" = "module"
       modifyFieldLabel other = other
+
+data ImportPathMapping
+  = ImportPathMapping (Map String String)
+  deriving (Show, Generic, ToJSON)
+
+instance FromJSON ImportPathMapping where
+  parseJSON = withObject "PathMappings" $ \object -> do
+    originalMappings <- parseJSON (Object object)
+
+    let nonEmptyMappings = M.mapMaybe nonEmpty originalMappings
+    let (invalidMappings, validMappings) = M.mapEither getOnlyLookupLocationOrError nonEmptyMappings
+
+    case M.toList invalidMappings of
+      [] -> return $ ImportPathMapping validMappings
+      invalidEntries -> fail $ makeMultipleLocationsErrorMsg invalidEntries
+    where
+      getOnlyLookupLocationOrError :: NonEmpty String -> Either (NonEmpty String) String
+      getOnlyLookupLocationOrError = \case
+        lookupLocation :| [] -> Right lookupLocation
+        locations -> Left locations
+
+      makeMultipleLocationsErrorMsg :: [(String, NonEmpty String)] -> String
+      makeMultipleLocationsErrorMsg locations =
+        "One or more paths point to multiple lookup locations: "
+          <> show (fmap (fmap toList) locations)
+          <> ". Wasp only supports one-on-one path mappings."

waspc/src/Wasp/Generator/ImportPathAlias.hs

@@ -0,0 +1,37 @@
+module Wasp.Generator.ImportPathAlias
+  ( createTsConfigPathsTemplateData,
+    createRollupAliasesTemplateData,
+  )
+where
+
+import Data.Aeson ((.=))
+import qualified Data.Aeson as Aeson
+import qualified Data.Map as M
+import qualified StrongPath as SP
+import System.FilePath ((</>))
+import Wasp.ExternalConfig.TsConfig (ImportPathMapping (..))
+import Wasp.Project.Common (waspProjectDirFromSrcDir)
+import Wasp.Util (stripSuffixIfPresent)
+
+createTsConfigPathsTemplateData :: Maybe ImportPathMapping -> [Aeson.Value]
+createTsConfigPathsTemplateData = \case
+  Nothing -> []
+  Just (ImportPathMapping mappings) -> map makePathObjectEntry $ M.toList mappings
+  where
+    makePathObjectEntry (path, lookupLocation) =
+      Aeson.object
+        [ "path" .= path,
+          "lookupLocation" .= lookupLocation
+        ]
+
+createRollupAliasesTemplateData :: Maybe ImportPathMapping -> [Aeson.Value]
+createRollupAliasesTemplateData = \case
+  Nothing -> []
+  Just (ImportPathMapping mappings) -> map makeAliasTemplateData $ M.toList mappings
+  where
+    makeAliasTemplateData (path, lookupLocation) =
+      Aeson.object
+        [ "find" .= stripWildcardPath path,
+          "replacement" .= (SP.fromRelDir waspProjectDirFromSrcDir </> stripWildcardPath lookupLocation)
+        ]
+    stripWildcardPath = stripSuffixIfPresent "/*"

waspc/src/Wasp/Generator/SdkGenerator.hs

@@ -26,6 +26,7 @@ import qualified Wasp.AppSpec.App.Dependency as AS.Dependency
 import qualified Wasp.AppSpec.ExternalFiles as EC
 import Wasp.AppSpec.Valid (getLowestNodeVersionUserAllows, isAuthEnabled)
 import qualified Wasp.AppSpec.Valid as AS.Valid
+import qualified Wasp.ExternalConfig.TsConfig as TC
 import Wasp.Generator.Common
   ( ProjectRootDir,
     makeJsonWithEntityData,
@@ -37,6 +38,7 @@ import Wasp.Generator.DbGenerator (getEntitiesForPrismaSchema)
 import qualified Wasp.Generator.DbGenerator.Auth as DbAuth
 import Wasp.Generator.FileDraft (FileDraft)
 import qualified Wasp.Generator.FileDraft as FD
+import Wasp.Generator.ImportPathAlias (createTsConfigPathsTemplateData)
 import Wasp.Generator.Monad (Generator)
 import qualified Wasp.Generator.NpmDependencies as N
 import Wasp.Generator.SdkGenerator.AuthG (genAuth)
@@ -101,7 +103,7 @@ genSdk spec =
       genFileCopy [relfile|dev/index.ts|],
       genFileCopy [relfile|client/config.ts|],
       genServerConfigFile spec,
-      genTsConfigJson,
+      genTsConfigJson spec,
       genServerUtils spec,
       genPackageJson spec,
       genDbClient spec
@@ -252,15 +254,16 @@ genServerConfigFile spec = return $ C.mkTmplFdWithData relConfigFilePath tmplDat
 
 -- todo(filip): remove this duplication, we have almost the same thing in the
 -- ServerGenerator.
-genTsConfigJson :: Generator FileDraft
-genTsConfigJson = do
+genTsConfigJson :: AppSpec -> Generator FileDraft
+genTsConfigJson spec = do
   return $
     C.mkTmplFdWithDstAndData
       [relfile|tsconfig.json|]
       [relfile|tsconfig.json|]
       ( Just $
           object
-            [ "majorNodeVersion" .= show (SV.major NodeVersion.oldestWaspSupportedNodeVersion)
+            [ "majorNodeVersion" .= show (SV.major NodeVersion.oldestWaspSupportedNodeVersion),
+              "paths" .= createTsConfigPathsTemplateData (TC.paths $ TC.compilerOptions $ AS.tsConfig spec)
             ]
       )
 

waspc/src/Wasp/Generator/SdkGenerator/Common.hs

@@ -63,7 +63,7 @@ sdkTemplatesDirInTemplatesDir :: Path' (Rel TemplatesDir) (Dir SdkTemplatesDir)
 sdkTemplatesDirInTemplatesDir = [reldir|sdk/wasp|]
 
 extSrcDirInSdkRootDir :: Path' (Rel SdkRootDir) (Dir GeneratedExternalCodeDir)
-extSrcDirInSdkRootDir = [reldir|ext-src|]
+extSrcDirInSdkRootDir = [reldir|src|]
 
 relDirToRelFileP :: Path Posix (Rel d) Dir' -> Path Posix (Rel d) File'
 relDirToRelFileP path = fromJust $ SP.parseRelFileP $ removeTrailingSlash $ SP.fromRelDirP path
@@ -73,9 +73,6 @@ relDirToRelFileP path = fromJust $ SP.parseRelFileP $ removeTrailingSlash $ SP.f
 makeSdkImportPath :: Path Posix (Rel SdkRootDir) File' -> Path Posix (Rel s) File'
 makeSdkImportPath path = [reldirP|wasp|] </> path
 
-extCodeDirInSdkRootDir :: Path' (Rel SdkRootDir) Dir'
-extCodeDirInSdkRootDir = [reldir|ext-src|]
-
 clientTemplatesDirInSdkTemplatesDir :: Path' (Rel SdkTemplatesDir) (Dir ClientTemplatesDir)
 clientTemplatesDirInSdkTemplatesDir = [reldir|client|]
 

waspc/src/Wasp/Generator/SdkGenerator/Server/OperationsGenerator.hs

@@ -174,5 +174,5 @@ extImportToJsImport extImport@(EI.ExtImport extImportName extImportPath) =
     }
   where
     importPath = C.makeSdkImportPath $ dropExtensionFromImportPath $ extCodeDirP </> SP.castRel extImportPath
-    extCodeDirP = fromJust $ SP.relDirToPosix C.extCodeDirInSdkRootDir
+    extCodeDirP = fromJust $ SP.relDirToPosix C.extSrcDirInSdkRootDir
     importName = GJI.extImportNameToJsImportName extImportName