feat(cli): add href property to RouteURLObject (#3892)

* feat(cli): add href property to RouteURLObject

* Create thick-moons-fry.md

* update playwright install github action

* add browser path env variable to test stage

* revert

Co-authored-by: Dillon Raphael <[email protected]>

.changeset/thick-moons-fry.md

@@ -0,0 +1,6 @@
+---
+"@blitzjs/next": patch
+"blitz": patch
+---
+
+Add an href property to the generated route manifest that will return a string of the pathname and included query params.

.github/workflows/main.yml

@@ -141,7 +141,7 @@ jobs:
       - name: Install playwright
         run: |
           npm i -g playwright
-          PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers npx playwright install
+          PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers npx playwright install --with-deps
         shell: bash
 
       - name: Build

packages/blitz-next/src/index-browser.tsx

@@ -51,7 +51,7 @@ export type BlitzProviderProps = {
   hydrateOptions?: HydrateOptions
 }
 
-interface RouteUrlObject extends Pick<UrlObject, "pathname" | "query"> {
+interface RouteUrlObject extends Pick<UrlObject, "pathname" | "query" | "href"> {
   pathname: string
 }
 

packages/blitz/src/cli/utils/routes-manifest.ts

@@ -368,9 +368,32 @@ export function setupManifest(routes: Record<string, RouteManifestEntry>): {
   const routesWithoutDuplicates = dedupeBy(Object.entries(routes), ([_path, {name}]) => name)
 
   const implementationLines = routesWithoutDuplicates.map(
-    ([path, {name}]) => `${name}: (query) => ({ pathname: "${path}", query })`,
+    ([path, {name}]) => `${name}: (query) => ({ 
+      pathname: "${path}", 
+      query,
+      href: query
+      ? replaceSlugsWithValues(
+          "${path}",
+          Object.keys(query),
+          Object.values(query)
+        )
+      : "${path}",
+    })`,
   )
 
+  const implementationHelpers = [
+    `function replaceSlugsWithValues(str, slugs, values) {
+      let result = str;
+      slugs.forEach((slug, i) => {
+          const value = values[i];
+          if (value) {
+              result = result.replace('[' + slug + ']', String(value));
+          }
+      });
+      return result;
+    }`,
+  ]
+
   const declarationLines = routesWithoutDuplicates.map(
     ([_path, {name, parameters, multipleParameters}]) => {
       if (parameters.length === 0 && multipleParameters.length === 0) {
@@ -392,7 +415,11 @@ export function setupManifest(routes: Record<string, RouteManifestEntry>): {
 
   return {
     implementation:
-      "exports.Routes = {\n" + implementationLines.map((line) => "  " + line).join(",\n") + "\n}",
+      "exports.Routes = {\n" +
+      implementationLines.map((line) => "  " + line).join(",\n") +
+      "\n}" +
+      "\n" +
+      implementationHelpers.join("\n"),
     declaration: `
 import type { ParsedUrlQueryInput } from "querystring"
 import type { RouteUrlObject } from "blitz"

packages/blitz/src/installer/executors/run-command-executor.tsx

@@ -79,8 +79,8 @@ export async function executeCommand(input: CliCommand): Promise<void> {
     const cp = spawn(`${command[0]}`, command.slice(1), {
       stdio: ["inherit", "pipe", "pipe"],
     })
-    cp.on("exit", resolve);
-    cp.stdout.on('data', () => {});
+    cp.on("exit", resolve)
+    cp.stdout.on("data", () => {})
   })
 }
 

packages/blitz/src/types.ts

@@ -2,12 +2,13 @@ import {UrlObject} from "url"
 // Context for plugins to declaration merge stuff into
 export interface Ctx {}
 
-export interface AuthenticatedMiddlewareCtx {}
-
-export interface RouteUrlObject extends Pick<UrlObject, "pathname" | "query"> {
+export interface RouteUrlObject extends Pick<UrlObject, "pathname" | "query" | "href"> {
   pathname: string
+  href: string
 }
 
+export interface AuthenticatedMiddlewareCtx {}
+
 export type EventHooks = {
   onSessionCreated?: OnSessionCreated
   onRpcError?: OnRpcError
@@ -35,7 +36,13 @@ export type BlitzCliConfig = {
 }
 
 export const isRouteUrlObject = (x: any): x is RouteUrlObject => {
-  return typeof x === "object" && "pathname" in x && typeof x.pathname === "string"
+  return (
+    typeof x === "object" &&
+    "pathname" in x &&
+    typeof x.pathname === "string" &&
+    "href" in x &&
+    typeof x.href === "string"
+  )
 }
 
 export type AsyncFunc = (...args: any) => Promise<any>