From 10f98c681d3ff9f0d09b87f12302e44bbee394c6 Mon Sep 17 00:00:00 2001 From: Andrew Glago Date: Mon, 26 Dec 2022 23:58:54 +0000 Subject: [PATCH] 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 --- .changeset/thick-moons-fry.md | 6 ++++ .github/workflows/main.yml | 2 +- packages/blitz-next/src/index-browser.tsx | 2 +- .../blitz/src/cli/utils/routes-manifest.ts | 31 +++++++++++++++++-- .../executors/run-command-executor.tsx | 4 +-- packages/blitz/src/types.ts | 15 ++++++--- pnpm-lock.yaml | 16 +++++----- 7 files changed, 58 insertions(+), 18 deletions(-) create mode 100644 .changeset/thick-moons-fry.md diff --git a/.changeset/thick-moons-fry.md b/.changeset/thick-moons-fry.md new file mode 100644 index 0000000000..30bb1550b1 --- /dev/null +++ b/.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. diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 571c9cfb34..de9755392e 100644 --- a/.github/workflows/main.yml +++ b/.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 diff --git a/packages/blitz-next/src/index-browser.tsx b/packages/blitz-next/src/index-browser.tsx index 466079c90a..8db9ccb51c 100644 --- a/packages/blitz-next/src/index-browser.tsx +++ b/packages/blitz-next/src/index-browser.tsx @@ -51,7 +51,7 @@ export type BlitzProviderProps = { hydrateOptions?: HydrateOptions } -interface RouteUrlObject extends Pick { +interface RouteUrlObject extends Pick { pathname: string } diff --git a/packages/blitz/src/cli/utils/routes-manifest.ts b/packages/blitz/src/cli/utils/routes-manifest.ts index 8231a11389..f3c22f3ad9 100644 --- a/packages/blitz/src/cli/utils/routes-manifest.ts +++ b/packages/blitz/src/cli/utils/routes-manifest.ts @@ -368,9 +368,32 @@ export function setupManifest(routes: Record): { 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): { 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" diff --git a/packages/blitz/src/installer/executors/run-command-executor.tsx b/packages/blitz/src/installer/executors/run-command-executor.tsx index 6d60637e97..0551afcc01 100644 --- a/packages/blitz/src/installer/executors/run-command-executor.tsx +++ b/packages/blitz/src/installer/executors/run-command-executor.tsx @@ -79,8 +79,8 @@ export async function executeCommand(input: CliCommand): Promise { 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", () => {}) }) } diff --git a/packages/blitz/src/types.ts b/packages/blitz/src/types.ts index 1d732eb481..e89a47dac0 100644 --- a/packages/blitz/src/types.ts +++ b/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 { +export interface RouteUrlObject extends Pick { 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 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 974a95ff3b..0347525020 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -547,7 +547,7 @@ importers: "@vitejs/plugin-react": 1.3.0 delay: 5.0.0 eslint: 8.27.0 - eslint-config-next: 13.0.7_rmayb2veg2btbq6mbmnyivgasy + eslint-config-next: 13.1.1_rmayb2veg2btbq6mbmnyivgasy eslint-plugin-testing-library: 5.0.1_rmayb2veg2btbq6mbmnyivgasy jsdom: 19.0.0 typescript: 4.8.4 @@ -5088,10 +5088,10 @@ packages: dependencies: glob: 7.1.7 - /@next/eslint-plugin-next/13.0.7: + /@next/eslint-plugin-next/13.1.1: resolution: { - integrity: sha512-Q/Z0V3D3UpKhhzFU6/s17wD4rqJ+ZDGded8UpqNyzX1nUdD+/PnsZexPhSIZ2Yf/c8QESeirmJVRb3eAfCQkRQ==, + integrity: sha512-SBrOFS8PC3nQ5aeZmawJkjKkWjwK9RoxvBSv/86nZp0ubdoVQoko8r8htALd9ufp16NhacCdqhu9bzZLDWtALQ==, } dependencies: glob: 7.1.7 @@ -10949,10 +10949,10 @@ packages: - supports-color dev: false - /eslint-config-next/13.0.7_rmayb2veg2btbq6mbmnyivgasy: + /eslint-config-next/13.1.1_rmayb2veg2btbq6mbmnyivgasy: resolution: { - integrity: sha512-X7DB7iDJ9iHi5DAZbnFdWm4M0dwarj5h5y6Vpm9INCYzFgAwSWslq3v0qjYEjtUO5IQ8n1WK6IU5FkOQ2HBhOA==, + integrity: sha512-/5S2XGWlGaiqrRhzpn51ux5JUSLwx8PVK2keLi5xk7QmhfYB8PqE6R6SlVw6hgnf/VexvUXSrlNJ/su00NhtHQ==, } peerDependencies: eslint: ^7.23.0 || ^8.0.0 @@ -10961,7 +10961,7 @@ packages: typescript: optional: true dependencies: - "@next/eslint-plugin-next": 13.0.7 + "@next/eslint-plugin-next": 13.1.1 "@rushstack/eslint-patch": 1.1.3 "@typescript-eslint/parser": 5.43.0_rmayb2veg2btbq6mbmnyivgasy eslint: 8.27.0 @@ -13973,7 +13973,7 @@ packages: pretty-format: 29.2.1 slash: 3.0.0 strip-json-comments: 3.1.1 - ts-node: 10.9.1_cbe7ovvae6zqfnmtgctpgpys54 + ts-node: 10.9.1_typescript@4.8.4 transitivePeerDependencies: - supports-color @@ -19740,6 +19740,7 @@ packages: typescript: 4.8.4 v8-compile-cache-lib: 3.0.1 yn: 3.1.1 + dev: false /ts-node/10.9.1_ieummqxttktzud32hpyrer46t4: resolution: @@ -19806,7 +19807,6 @@ packages: typescript: 4.8.4 v8-compile-cache-lib: 3.0.1 yn: 3.1.1 - dev: false /tsconfig-paths/3.14.1: resolution: