Make Wasp work with tsconfig path aliases #2457

sodic · 2025-01-17T09:23:01Z

No description provided.

sodic · 2025-01-17T20:40:34Z

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",


I renamed the output folder instead of renaming aliases, seemed less fiddly. This way, the generated code's structure matches the original.

It also has a nice side effect of showing SDK build errors with correct file mappings:

What do you mean by "renaming aliases", does that mean you'd search & replace src with ext-src in the SDK version of the files?

Yes, both there and in tsconfig paths.

sodic · 2025-01-17T20:41:37Z

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

      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/,


Todo: leave a note about resolution, wasp, and bundling dependencies.

Todo: leave a note about why we're using alias and not some of the other plugins (check notes).

@infomiho I plan to explain this in detail. It's all in my notes.

sodic · 2025-01-17T23:12:21Z

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

+      {=# paths =}
+        "{= path =}": ["{= lookupLocation =}"],
+      {=/ paths =}
+    }


When the user doesn't define any aliases, this file still has an empty object.

I thought that was cleaner than doing the conditional check, but feel free to disagree :)

Looking at the compiler source code it doesn't seem like it will cause any issues 👍

sodic · 2025-01-20T12:13:53Z

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


I'll either solve this for the next RC or create an issue.

Since it's old code, I think it's okay if we just create an issue for this.

sodic · 2025-01-20T12:15:56Z

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

+        entries: [
+          {=# aliases =}
+          { find: '{= find =}', replacement: '{= replacement =}' },
+          {=/ aliases =}
+        ]


NOTE: Just like paths in sdk/tsconfig, this field's value is an empty array when the user doesn't define any aliases.

sodic · 2025-01-20T12:18:16Z

waspc/examples/todoApp/tsconfig.json

+      "@util": ["./src/util.js"],
+      "@components/*": ["./src/components/*"],


I wanted to test aliases with and without wildcards.

Todo: update headless.

Todo: what about more wildcards on the left side?

sodic · 2025-01-20T12:20:12Z

waspc/src/Wasp/AppSpec.hs

@@ -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,


I need to carry the path information all the way to the generator, but I'm not using anything else from the object.

Should I have only sent that?

I had the same dilemma with prismaSchema since I needed only entities and not the config bits. I ended up needing the whole thing after all and when I rewrote it to include the full prismaSchema - the code felt easier to understand after I did that. I like the mental model of "we have all the project info in AppSpec that we might".

When somebody looks at AppSpec, I think it's easier to understand "Oh yes, the project tsconfig" is available vs. there is this specific paths object that we pass around. That prompts me to maybe rename it to srcTsConfig or smth like that since it might be named tsconfig.src.json as well.

sodic · 2025-01-20T12:26:53Z

waspc/src/Wasp/ExternalConfig/TsConfig.hs

+data ImportPathMapping
+  = ImportPathMapping (Map String String)
+  deriving (Show, Generic, ToJSON)


TS config path aliases point to arrays:

"paths" : { "@util": ["./src/util.js"], "@components/*": ["./src/components/*"], }

Rollup aliases point to single strings:

alias({ entries: [ { find: '@components', replacement: '.././src/components' }, { find: '@util', replacement: '.././src/util.js' }, ] }),

TS supports arrays because it can look for paths sequentially until it finds the correct one. Rollup can't do that.

Rollup therefore limits our entire system to one-on-one path mappings. So, I've decided to catch that as early as possible (i.e., while parsing TS config).

I should have arguably done this while validating the TS config. But then I'd have to introduce a new object (something like ValidTsConfig), and change the validateSrcTsConfig function to return it (it would then technically stop being a validator and become a constructor/parser).

I didn't do this because I wasn't sure it was the right choice and it would probably take longer.

I should have arguably done this while validating the TS config.

Yep, this feels like a better place to perform this logic. This doesn't feel like JSON parsing logic to me.

We have this case already in the code base, the case of AppSpec being validated in Valid.hs and then we continue to use the same AppSpec object knowing it's validated. I'm not saying that's the best, but we survived :)

I'm okay with keeping this here as well, it's preventing us from constructing a faulty TsConfig - which is nice.

sodic · 2025-01-20T12:29:48Z

waspc/src/Wasp/Generator/ExternalConfig/TsConfig.hs

The only behavioral change here is validating the "baseUrl".

The rest of the changes are refactoring:

Reorganized some of the functions and arguments to make them more composable (e.g., for validating stuff that's not in compileOptions.

Changed some names.

Made small changes to the error messages to make them sound more human.

@infomiho Hope you'll like it :)

I like the changes :)

sodic · 2025-01-20T12:31:07Z

waspc/src/Wasp/Generator/ExternalConfig/TsConfig.hs

+    fieldMustBeUnsetErrorMessage =
+      unwords
+        [ "The",
+          "\"" ++ show fullyQualifiedFieldName ++ "\"",
+          "field in tsconfig.json must be unset."
+        ]


Todo: message is weird, change it.

infomiho

Left some comments. I think improving the error messages are what I'd like to see the most. Next are some unit tests for the alias transformations.

infomiho · 2025-01-20T12:46:47Z

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

+      {=# paths =}
+        "{= path =}": ["{= lookupLocation =}"],
+      {=/ paths =}
+    }


Looking at the compiler source code it doesn't seem like it will cause any issues 👍

infomiho · 2025-01-20T12:48:31Z

waspc/examples/todoApp/src/util.ts

@@ -1,3 +1,6 @@
 export function sayHi() {
    console.log("This is coming from shared function.")
 }
+
+


Redundant new lines 🤷

infomiho · 2025-01-20T12:55:56Z

waspc/src/Wasp/AppSpec.hs

@@ -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,


I had the same dilemma with prismaSchema since I needed only entities and not the config bits. I ended up needing the whole thing after all and when I rewrote it to include the full prismaSchema - the code felt easier to understand after I did that. I like the mental model of "we have all the project info in AppSpec that we might".

When somebody looks at AppSpec, I think it's easier to understand "Oh yes, the project tsconfig" is available vs. there is this specific paths object that we pass around. That prompts me to maybe rename it to srcTsConfig or smth like that since it might be named tsconfig.src.json as well.

infomiho · 2025-01-20T13:05:50Z

waspc/src/Wasp/ExternalConfig/TsConfig.hs

+
+      makeMultipleLocationsErrorMsg :: [(String, NonEmpty String)] -> String
+      makeMultipleLocationsErrorMsg locations =
+        "One or more paths point to multiple lookup locations: "


I'd maybe rewrite this to be a bit more clear:

Current:

One or more paths point to multiple lookup locations: [("@/*",["./src/*","./.wasp/generated/*"])]. Wasp only supports one-on-one path mappings.

Proposed:

One or more paths point to multiple lookup locations: "@/*": ["./src/*","./.wasp/generated/*"] Wasp only supports one-on-one path mappings.

This matches what they see in their tsconfig better.

infomiho · 2025-01-20T13:08:56Z

waspc/src/Wasp/ExternalConfig/TsConfig.hs

+data ImportPathMapping
+  = ImportPathMapping (Map String String)
+  deriving (Show, Generic, ToJSON)


I should have arguably done this while validating the TS config.

Yep, this feels like a better place to perform this logic. This doesn't feel like JSON parsing logic to me.

We have this case already in the code base, the case of AppSpec being validated in Valid.hs and then we continue to use the same AppSpec object knowing it's validated. I'm not saying that's the best, but we survived :)

I'm okay with keeping this here as well, it's preventing us from constructing a faulty TsConfig - which is nice.

infomiho · 2025-01-20T13:16:37Z

waspc/src/Wasp/Generator/ExternalConfig/TsConfig.hs

+      unwords
+        [ "Invalid value for the",
+          "\"" ++ show fullyQualifiedFieldName ++ "\"",
+          "field in tsconfig.json, you must set it to:",


Sometimes it's tsconfig.json, and other times tsconfig.src.json if I'm not mistaken?

infomiho · 2025-01-20T13:17:57Z

waspc/src/Wasp/Generator/ExternalConfig/TsConfig.hs

I like the changes :)

infomiho · 2025-01-20T13:19:51Z

waspc/src/Wasp/Generator/ImportPathAlias.hs

+    makeAliasTemplateData (path, lookupLocation) =
+      Aeson.object
+        [ "find" .= stripWildcardPath path,
+          "replacement" .= (SP.fromRelDir waspProjectDirFromSrcDir </> stripWildcardPath lookupLocation)


I'd like to see some examples in comments above or even better unit tests for this transformation :)

Will definitely add those.

Also, I have to figure out whether prefixing with ../ works for aliases in nested files.

infomiho · 2025-01-20T13:37:23Z

waspc/src/Wasp/Project/ExternalConfig/TsConfig.hs

@@ -37,4 +37,4 @@ readTsConfigFile :: Path' Abs (File f) -> IO (Either String T.TsConfig)
 readTsConfigFile tsConfigFile = do
  tsConfigContent <- IOUtil.readFileBytes tsConfigFile
  parseResult <- parseJsonWithComments . BS.toString $ tsConfigContent
-  return $ left ("Failed to parse tsconfig file" ++) parseResult
+  return $ left ("Failed to parse tsconfig file: " ++) parseResult


I feel like saying "tsconfig.json" or "tsconfig.src.json" would help users understand where to look.

infomiho · 2025-01-20T13:40:00Z

waspc/headless-test/examples/todoApp/tsconfig.json

+    "outDir": ".wasp/out/user",
+    "paths" : {
+      "@util": ["./src/util.js"],
+      "@components/*": ["./src/components/*"],


Did you use these aliases anywhere in the headless tests?

Also, maybe we could also use alises in the e2e tests (this is probably a "Create an issue for later" candidate)

sodic added 13 commits January 9, 2025 16:59

Implement project references prototype

382dc59

Add project reference to user code from server

79924a0

Push todoApp/tsconfig updated for project references

4d3f95d

Enable aliases in the SDK

a4ab2dd

Make path aliases fully work but its ugly

3fd1830

Clean some things up

91b6f80

Add clarifying comment for rootDir

ae5bcaf

Merge branch 'filip-project-references' into filip-path-aliases

cf3cd30

Move path aliases logic into Haskell

cf1dc52

Remove naming and remove unused code

611e2c0

Improve tsconfig error messages

804852b

Small refactors and error message improvements

302f7cf

Remove redundant space from template

fe2c7c3

sodic commented Jan 17, 2025

View reviewed changes

sodic added 12 commits January 20, 2025 10:05

Add small refactors

c1cd0da

Change [String] back to FieldPath

74f3567

Update e2e tests

09731ab

Add path aliases to waspc/examples/todoApp

ef1008b

Merge branch 'main' into filip-project-references

7f9e078

Merge branch 'filip-project-references' into filip-path-aliases

2b66ac8

Update waspc.cabal, e2e-tests, and todoApp to v0.16.0

9cf176e

Fix formatting

b51a56f

Update headless tests for 0.16.0

f36b33a

Remove redundant testing file

6cf7730

Remove another redundant testing file

871ea87

Remove more redundant testing files

dda6c0a

sodic commented Jan 20, 2025

View reviewed changes

infomiho reviewed Jan 20, 2025

View reviewed changes

sodic added 2 commits January 21, 2025 23:08

Update e2e tests

2d4c5c9

Merge branch 'filip-project-references' into filip-path-aliases

e9ad9c3

sodic added 2 commits January 21, 2025 23:15

Update headless tests and waspc.cabal

f390cd1

Merge branch 'filip-project-references' into filip-path-aliases

e790ebd

Base automatically changed from filip-project-references to main January 21, 2025 22:18

Merge branch 'main' into filip-path-aliases

e3f89ad

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make Wasp work with tsconfig path aliases #2457

Make Wasp work with tsconfig path aliases #2457

sodic commented Jan 17, 2025

sodic Jan 17, 2025 •

edited

Loading

infomiho Jan 20, 2025

sodic Jan 22, 2025

sodic Jan 17, 2025 •

edited

Loading

sodic Jan 17, 2025 •

edited

Loading

infomiho Jan 20, 2025

sodic Jan 20, 2025

infomiho Jan 20, 2025

sodic Jan 20, 2025

sodic Jan 20, 2025

sodic Jan 21, 2025 •

edited

Loading

sodic Jan 20, 2025

infomiho Jan 20, 2025

sodic Jan 20, 2025

infomiho Jan 20, 2025

sodic Jan 20, 2025

infomiho Jan 20, 2025

sodic Jan 20, 2025

infomiho left a comment

infomiho Jan 20, 2025

infomiho Jan 20, 2025

infomiho Jan 20, 2025

infomiho Jan 20, 2025

infomiho Jan 20, 2025

infomiho Jan 20, 2025

infomiho Jan 20, 2025

infomiho Jan 20, 2025

sodic Jan 21, 2025

infomiho Jan 20, 2025

infomiho Jan 20, 2025

		"@util": ["./src/util.js"],
		"@components/": ["./src/components/"],

Make Wasp work with tsconfig path aliases #2457

Are you sure you want to change the base?

Make Wasp work with tsconfig path aliases #2457

Conversation

sodic commented Jan 17, 2025

sodic Jan 17, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sodic Jan 17, 2025 • edited Loading

Choose a reason for hiding this comment

sodic Jan 17, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sodic Jan 21, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

infomiho left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sodic Jan 17, 2025 •

edited

Loading

sodic Jan 17, 2025 •

edited

Loading

sodic Jan 17, 2025 •

edited

Loading

sodic Jan 21, 2025 •

edited

Loading