codemod(v2.3): Adds codemod to modify web/tsconfig.json to allow $api imports

packages/codemods/src/codemods/v2.3.x/tsconfigForRouteHooks/README.md

@@ -0,0 +1,12 @@
+# Modify TS Config For Route Hooks
+
+Updates the `web/tsconfig.json` file to include a path alias for `$api`.
+
+This allows you to import for example
+
+```
+import { db } from '$api/src/lib/db'
+import { bazinga } from '$api/src/lib/bazinga'
+```
+
+Just like in scripts, in your *.routeHooks.ts files. This feature was enabled as part of Cell prerendering and dynamic path prerendering.

packages/codemods/src/codemods/v2.3.x/tsconfigForRouteHooks/__testfixtures__/default/input/web/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "rootDirs": [
+      "./src",
+      "../.redwood/types/mirror/web/src",
+      "../api/src",
+      "../.redwood/types/mirror/api/src"
+    ],
+    "paths": {
+      "src/*": [
+        "./src/*",
+        "../.redwood/types/mirror/web/src/*",
+        "../api/src/*",
+        "../.redwood/types/mirror/api/src/*"
+      ],
+      "types/*": ["./types/*", "../types/*"],
+      "@redwoodjs/testing": ["../node_modules/@redwoodjs/testing/web"]
+    },
+    "typeRoots": ["../node_modules/@types", "./node_modules/@types"],
+    "types": ["jest", "@testing-library/jest-dom"],
+    "jsx": "preserve",
+  },
+  "include": [
+    "src",
+    "../.redwood/types/includes/all-*",
+    "../.redwood/types/includes/web-*",
+    "../types",
+    "./types"
+  ]
+}

packages/codemods/src/codemods/v2.3.x/tsconfigForRouteHooks/__testfixtures__/default/output/web/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "rootDirs": [
+      "./src",
+      "../.redwood/types/mirror/web/src",
+      "../api/src",
+      "../.redwood/types/mirror/api/src"
+    ],
+    "paths": {
+      "src/*": [
+        "./src/*",
+        "../.redwood/types/mirror/web/src/*",
+        "../api/src/*",
+        "../.redwood/types/mirror/api/src/*"
+      ],
+      "types/*": ["./types/*", "../types/*"],
+      "@redwoodjs/testing": ["../node_modules/@redwoodjs/testing/web"],
+      "$api/*": ["../api/*"]
+    },
+    "typeRoots": ["../node_modules/@types", "./node_modules/@types"],
+    "types": ["jest", "@testing-library/jest-dom"],
+    "jsx": "preserve"
+  },
+  "include": [
+    "src",
+    "../.redwood/types/includes/all-*",
+    "../.redwood/types/includes/web-*",
+    "../types",
+    "./types"
+  ]
+}

packages/codemods/src/codemods/v2.3.x/tsconfigForRouteHooks/__tests__/tsconfigForRouteHooks.test.ts

@@ -0,0 +1,7 @@
+import addApiAliasToTsConfig from '../tsconfigForRouteHooks'
+
+describe('tsconfigForRouteHooks', () => {
+  it('Adds $api to web/tsconfig.json', async () => {
+    await matchFolderTransform(addApiAliasToTsConfig, 'default')
+  })
+})

packages/codemods/src/codemods/v2.3.x/tsconfigForRouteHooks/tsconfigForRouteHooks.ts

@@ -0,0 +1,50 @@
+import getRWPaths from '../../../lib/getRWPaths'
+import prettify from '../../../lib/prettify'
+
+export default async function addApiAliasToTsConfig() {
+  // Ts is a heavy import, lets do it dynamically
+  const ts = await import('typescript')
+
+  const webConfigPath = ts.findConfigFile(
+    getRWPaths().web.base,
+    ts.sys.fileExists
+  )
+
+  if (!webConfigPath) {
+    throw new Error(
+      'Could not find tsconfig.json in your web side. Please follow release notes to update your config manually.'
+    )
+  }
+
+  // Use this function, because tsconfigs can be JSONC (json with comments), but also can have trailing commas, etc.
+  // Also why I'm not using jscodeshift here - sadly I can't preserve the comments
+  const { config: webConfig } = ts.parseConfigFileTextToJson(
+    webConfigPath,
+    ts.sys.readFile(webConfigPath) as string // If file exists, it has contents
+  )
+
+  if (webConfig && webConfig?.compilerOptions) {
+    const newPathAliases = {
+      ...webConfig.compilerOptions.paths,
+      '$api/*': ['../api/*'],
+    }
+
+    const updatedConfig = {
+      ...webConfig,
+      compilerOptions: {
+        ...webConfig.compilerOptions,
+        paths: newPathAliases,
+      },
+    }
+
+    ts.sys.writeFile(
+      webConfigPath,
+      // @NOTE: prettier will remove trailing commas, but whatever
+      prettify(JSON.stringify(updatedConfig), { parser: 'json' })
+    )
+  } else {
+    throw new Error(
+      'Could not read your web/tsconfig.json. Please follow release notes to update your config manually.'
+    )
+  }
+}

packages/codemods/src/codemods/v2.3.x/tsconfigForRouteHooks/tsconfigForRouteHooks.yargs.ts

@@ -0,0 +1,14 @@
+import task from 'tasuku'
+
+import addApiAliasToTsConfig from './tsconfigForRouteHooks'
+
+export const command = 'tsconfig-for-route-hooks'
+export const description =
+  '(v2.3.x->v2.3.x) Allow $api imports in *.routesHooks.ts files'
+
+export const handler = () => {
+  task('Tsconfig For Route Hooks', async ({ setOutput }: task.TaskInnerApi) => {
+    addApiAliasToTsConfig()
+    setOutput('All done! Run `yarn rw lint --fix` to prettify your code')
+  })
+}

packages/codemods/src/lib/prettify.ts

@@ -12,12 +12,13 @@ const getPrettierConfig = () => {
   }
 }
 
-const prettify = (code: string) =>
+const prettify = (code: string, options: Record<string, any> = {}) =>
   format(code, {
     singleQuote: true,
     semi: false,
     ...getPrettierConfig(),
     parser: 'babel',
+    ...options,
   })
 
 export default prettify