From 55e4002a04ad1ef2f736477bb9739b3f07c44c50 Mon Sep 17 00:00:00 2001 From: Espen Hovlandsdal Date: Fri, 13 Sep 2024 11:44:31 -0700 Subject: [PATCH] fix: handle base path correctly for favicons --- packages/@sanity/cli/test/dev.test.ts | 15 +++++++++++---- packages/@sanity/cli/test/preview.test.ts | 4 ++++ packages/@sanity/cli/test/shared/devServer.ts | 6 ++++-- .../cli/server/vite/plugin-sanity-favicons.ts | 11 +++++------ .../src/core/components/DefaultDocument.tsx | 10 +++++++--- packages/sanity/src/core/components/Favicons.tsx | 7 ++++--- 6 files changed, 35 insertions(+), 18 deletions(-) diff --git a/packages/@sanity/cli/test/dev.test.ts b/packages/@sanity/cli/test/dev.test.ts index b0c2433bf9d..c421c12f9ce 100644 --- a/packages/@sanity/cli/test/dev.test.ts +++ b/packages/@sanity/cli/test/dev.test.ts @@ -12,14 +12,18 @@ describeCliTest('CLI: `sanity dev`', () => { describe.each(studioVersions)('%s', (version) => { test('start', async () => { const testRunArgs = getTestRunArgs(version) + const basePath = version === 'v3' ? '/config-base-path' : '/' const expectedFiles = - version === 'v2' ? [] : ['static/favicon.ico', 'favicon.ico', 'static/favicon.svg'] + version === 'v2' + ? [] + : ['/favicon.ico', `${basePath}/static/favicon.ico`, `${basePath}/static/favicon.svg`] const {html: startHtml, fileHashes} = await testServerCommand({ command: version === 'v2' ? 'start' : 'dev', port: testRunArgs.port, args: ['--port', `${testRunArgs.port}`], cwd: path.join(studiosPath, version), + basePath, expectedTitle: version === 'v2' ? `${version} studio` : 'Sanity Studio', expectedFiles, }) @@ -30,11 +34,12 @@ describeCliTest('CLI: `sanity dev`', () => { expect(fileHashes.get(file)).not.toBe(null) } - if (fileHashes.has('static/favicon.svg')) { - const faviconHash = createHash('sha256') + // Check that the custom favicon is used if present, not the default one + if (fileHashes.has(`${basePath}/static/favicon.svg`)) { + const customFaviconHash = createHash('sha256') .update(await readFile(path.join(studiosPath, version, 'static', 'favicon.svg'))) .digest('hex') - expect(fileHashes.get('static/favicon.svg')).toBe(faviconHash) + expect(fileHashes.get(`${basePath}/static/favicon.svg`)).toBe(customFaviconHash) } }) @@ -47,6 +52,7 @@ describeCliTest('CLI: `sanity dev`', () => { const {html: startHtml} = await testServerCommand({ command: 'dev', port: testRunArgs.port - 1, + basePath: '/config-base-path', args: ['--port', `${testRunArgs.port - 1}`], cwd: path.join(studiosPath, `${version}-custom-document`), expectedTitle: 'Sanity Studio w/ custom document', @@ -67,6 +73,7 @@ describeCliTest('CLI: `sanity dev`', () => { const {html: startHtml} = await testServerCommand({ command: 'dev', port: testRunArgs.port - 2, + basePath: '/config-base-path', args: ['--port', `${testRunArgs.port - 2}`], env: {SANITY_ACTIVE_ENV: 'production'}, cwd: path.join(studiosPath, `${version}-custom-document`), diff --git a/packages/@sanity/cli/test/preview.test.ts b/packages/@sanity/cli/test/preview.test.ts index 2b276128a97..d6b62919eaf 100644 --- a/packages/@sanity/cli/test/preview.test.ts +++ b/packages/@sanity/cli/test/preview.test.ts @@ -12,6 +12,7 @@ describeCliTest('CLI: `sanity preview`', () => { const {html: previewHtml, stderr} = await testServerCommand({ command: 'preview', args: ['--port', '3330', '../../static'], + basePath: '/', port: 3330, cwd: path.join(studiosPath, 'v3'), expectedTitle: 'Sanity Static', @@ -24,6 +25,7 @@ describeCliTest('CLI: `sanity preview`', () => { const {html: previewHtml, stdout} = await testServerCommand({ command: 'preview', args: ['--port', '3456', '../../static-basepath'], + basePath: '/some-base-path', port: 3456, cwd: path.join(studiosPath, 'v3'), expectedTitle: 'Sanity Static, Base Pathed', @@ -39,6 +41,7 @@ describeCliTest('CLI: `sanity preview`', () => { const {html: previewHtml} = await testServerCommand({ command: 'preview', args: ['--port', '3457', '../../static-root-basepath'], + basePath: '/', port: 3457, cwd: path.join(studiosPath, 'v3'), expectedTitle: 'Sanity Static', @@ -50,6 +53,7 @@ describeCliTest('CLI: `sanity preview`', () => { const {html: previewHtml} = await testServerCommand({ command: 'start', args: ['--port', '3331', '../../static'], + basePath: '/', port: 3331, cwd: path.join(studiosPath, 'v3'), expectedTitle: 'Sanity Static', diff --git a/packages/@sanity/cli/test/shared/devServer.ts b/packages/@sanity/cli/test/shared/devServer.ts index 3237563a278..90e2e1a906b 100644 --- a/packages/@sanity/cli/test/shared/devServer.ts +++ b/packages/@sanity/cli/test/shared/devServer.ts @@ -9,6 +9,7 @@ export async function testServerCommand({ port, cwd, env, + basePath, expectedTitle, expectedFiles = [], args, @@ -16,6 +17,7 @@ export async function testServerCommand({ command: 'preview' | 'dev' | 'start' port: number cwd: string + basePath: string expectedTitle: string expectedFiles?: string[] env?: Record @@ -77,7 +79,7 @@ export async function testServerCommand({ let res: ResponseData try { res = await Promise.race([ - request(`http://localhost:${port}/`), + request(`http://localhost:${port}${basePath.replace(/\/$/, '')}/`), new Promise((_, rejectTimeout) => setTimeout(rejectTimeout, 500, new Error('Timed out trying to connect')), ), @@ -97,7 +99,7 @@ export async function testServerCommand({ for (const file of expectedFiles) { fileHashes.set( file, - await request(`http://localhost:${port}/${file}`) + await request(`http://localhost:${port}${file}`) .then(({body, statusCode}) => statusCode === 200 ? createHash('sha256').update(body).digest('hex') : null, ) diff --git a/packages/sanity/src/_internal/cli/server/vite/plugin-sanity-favicons.ts b/packages/sanity/src/_internal/cli/server/vite/plugin-sanity-favicons.ts index 1d542573638..c4e65288b1c 100644 --- a/packages/sanity/src/_internal/cli/server/vite/plugin-sanity-favicons.ts +++ b/packages/sanity/src/_internal/cli/server/vite/plugin-sanity-favicons.ts @@ -42,9 +42,9 @@ export function sanityFaviconsPlugin({ return cache.favicons } - async function hasCustomFavicon(): Promise { + async function hasCustomFavicon(fileName: string): Promise { try { - await fs.access(path.join(customFaviconsPath, 'favicon.ico')) + await fs.access(path.join(customFaviconsPath, fileName)) return true } catch (err) { return false @@ -81,10 +81,9 @@ export function sanityFaviconsPlugin({ return } - const faviconPath = - fileName === 'favicon.ico' && (await hasCustomFavicon()) - ? path.join(customFaviconsPath, 'favicon.ico') - : path.join(defaultFaviconsPath, fileName) + const faviconPath = (await hasCustomFavicon(fileName)) + ? path.join(customFaviconsPath, fileName) + : path.join(defaultFaviconsPath, fileName) const mimeType = mimeTypes[path.extname(fileName)] || 'application/octet-stream' res.writeHead(200, 'OK', {'content-type': mimeType}) diff --git a/packages/sanity/src/core/components/DefaultDocument.tsx b/packages/sanity/src/core/components/DefaultDocument.tsx index f09eb81d3c3..25bc84feb17 100644 --- a/packages/sanity/src/core/components/DefaultDocument.tsx +++ b/packages/sanity/src/core/components/DefaultDocument.tsx @@ -106,10 +106,14 @@ const globalStyles = ` /** * @hidden - * @beta */ + * @beta + */ export interface DefaultDocumentProps { entryPath: string css?: string[] + + // Currently unused, but kept for potential future use + // eslint-disable-next-line react/no-unused-prop-types basePath?: string } @@ -119,7 +123,7 @@ const EMPTY_ARRAY: never[] = [] * @hidden * @beta */ export function DefaultDocument(props: DefaultDocumentProps): ReactElement { - const {entryPath, css = EMPTY_ARRAY, basePath = '/'} = props + const {entryPath, css = EMPTY_ARRAY} = props return ( @@ -132,7 +136,7 @@ export function DefaultDocument(props: DefaultDocumentProps): ReactElement { - + Sanity Studio diff --git a/packages/sanity/src/core/components/Favicons.tsx b/packages/sanity/src/core/components/Favicons.tsx index bd0b9fddc84..d7cab685ce9 100644 --- a/packages/sanity/src/core/components/Favicons.tsx +++ b/packages/sanity/src/core/components/Favicons.tsx @@ -1,9 +1,10 @@ export interface FaviconProps { - basePath: string + /** @deprecated No longer needed/used - will be added by Vite automatically */ + basePath?: string } -export function Favicons({basePath}: FaviconProps) { - const base = `${basePath.replace(/\/+$/, '')}/static` +export function Favicons(_props: FaviconProps) { + const base = '/static' return ( <>