From ce328f39acbc53fc57536478c85dd6f0d81440ac Mon Sep 17 00:00:00 2001 From: Seonglae Cho Date: Fri, 13 Jun 2025 22:55:36 +0100 Subject: [PATCH] Fix fetchPriority assertions in tests --- packages/nreact/src/block.tsx | 2 +- .../nreact/src/components/google-drive.tsx | 1 + packages/nreact/src/components/lazy-image.tsx | 5 ++- .../src/components/lite-youtube-embed.tsx | 8 ++++- packages/nreact/src/components/page-icon.tsx | 21 +++++++++++-- packages/nreact/src/components/text.tsx | 4 +++ packages/nreact/src/index.tsx | 1 + packages/nreact/src/lazy-image.test.tsx | 21 +++++++++++++ packages/nreact/src/page-icon.test.tsx | 31 +++++++++++++++++++ packages/nreact/tsup.config.ts | 4 +-- 10 files changed, 90 insertions(+), 8 deletions(-) create mode 100644 packages/nreact/src/lazy-image.test.tsx create mode 100644 packages/nreact/src/page-icon.test.tsx diff --git a/packages/nreact/src/block.tsx b/packages/nreact/src/block.tsx index 54bf8043..de9e7964 100644 --- a/packages/nreact/src/block.tsx +++ b/packages/nreact/src/block.tsx @@ -179,7 +179,7 @@ export const Block: React.FC = props => { ${page_full_width && 'notion-full-width'} ${page_small_text && 'notion-small-text'} ${bodyClassName}`}> - {page_icon && } + {page_icon && } {pageHeader} diff --git a/packages/nreact/src/components/google-drive.tsx b/packages/nreact/src/components/google-drive.tsx index bac9257a..e837f62f 100644 --- a/packages/nreact/src/components/google-drive.tsx +++ b/packages/nreact/src/components/google-drive.tsx @@ -29,6 +29,7 @@ export const GoogleDrive: React.FC<{ src={mapImageUrl(properties.thumbnail, block)} alt={properties.title || 'Google Drive Document'} loading='lazy' + fetchPriority='low' /> diff --git a/packages/nreact/src/components/lazy-image.tsx b/packages/nreact/src/components/lazy-image.tsx index 9f191a29..426f8c9b 100644 --- a/packages/nreact/src/components/lazy-image.tsx +++ b/packages/nreact/src/components/lazy-image.tsx @@ -53,6 +53,7 @@ export const LazyImage: React.FC<{ blurDataURL={previewImage.dataURIBase64} placeholder='blur' priority={priority} + fetchPriority={priority ? 'high' : undefined} onLoad={onLoad} /> ) @@ -81,6 +82,7 @@ export const LazyImage: React.FC<{ width={null} height={height || null} priority={priority} + fetchPriority={priority ? 'high' : undefined} onLoad={onLoad} /> ) @@ -93,7 +95,8 @@ export const LazyImage: React.FC<{ src={src} alt={alt} ref={attachZoomRef} - loading='lazy' + loading={priority ? 'eager' : 'lazy'} + fetchPriority={priority ? 'high' : undefined} decoding='async' {...rest} /> diff --git a/packages/nreact/src/components/lite-youtube-embed.tsx b/packages/nreact/src/components/lite-youtube-embed.tsx index 4d0b8eeb..cc182975 100644 --- a/packages/nreact/src/components/lite-youtube-embed.tsx +++ b/packages/nreact/src/components/lite-youtube-embed.tsx @@ -86,7 +86,13 @@ export const LiteYouTubeEmbed: React.FC<{ ${iframeInitialized && 'notion-yt-initialized'} ${className || ''}`} style={style}> - {alt} + {alt}
diff --git a/packages/nreact/src/components/page-icon.tsx b/packages/nreact/src/components/page-icon.tsx index f9f8e65f..87ead883 100644 --- a/packages/nreact/src/components/page-icon.tsx +++ b/packages/nreact/src/components/page-icon.tsx @@ -23,7 +23,8 @@ export const PageIconImpl: React.FC<{ inline?: boolean hideDefaultIcon?: boolean defaultIcon?: string -}> = ({ block, className, inline = true, hideDefaultIcon = false, defaultIcon }) => { + priority?: boolean +}> = ({ block, className, inline = true, hideDefaultIcon = false, defaultIcon, priority = false }) => { const { mapImageUrl, recordMap, darkMode } = useNotionContext() let isImage = false let content: React.ReactNode = null @@ -36,11 +37,25 @@ export const PageIconImpl: React.FC<{ const url = mapImageUrl(icon, block) isImage = true - content = + content = ( + + ) } else if (icon && icon.startsWith('/icons/')) { const url = 'https://www.notion.so' + icon + '?mode=' + (darkMode ? 'dark' : 'light') - content = + content = ( + + ) } else if (!icon) { if (!hideDefaultIcon) { isImage = true diff --git a/packages/nreact/src/components/text.tsx b/packages/nreact/src/components/text.tsx index 9bb33ce6..248a77e6 100644 --- a/packages/nreact/src/components/text.tsx +++ b/packages/nreact/src/components/text.tsx @@ -75,6 +75,8 @@ export const Text: React.FC<{ src={mapImageUrl(user.profile_photo, block)} alt={name} style={{ display: 'inline', marginRight: '0.3em', marginBottom: '0.3em' }} + loading='lazy' + fetchPriority='low' /> {name} @@ -187,6 +189,8 @@ export const Text: React.FC<{ src={mapImageUrl(user.profile_photo, block)} alt={name} style={{ display: 'inline', marginRight: '0.3em', marginBottom: '0.3em' }} + loading='lazy' + fetchPriority='low' /> {name} diff --git a/packages/nreact/src/index.tsx b/packages/nreact/src/index.tsx index 256d9310..d4347ef7 100644 --- a/packages/nreact/src/index.tsx +++ b/packages/nreact/src/index.tsx @@ -21,5 +21,6 @@ export * from './components/asset-wrapper' export * from './components/sync-pointer-block' export * from './components/graceful-image' export * from './components/google-drive' +export * from './components/lazy-image' export * from './icons/property-icon' export * from './third-party/collection-column-title' diff --git a/packages/nreact/src/lazy-image.test.tsx b/packages/nreact/src/lazy-image.test.tsx new file mode 100644 index 00000000..b4285226 --- /dev/null +++ b/packages/nreact/src/lazy-image.test.tsx @@ -0,0 +1,21 @@ +import { test, expect } from 'vitest' +import React from 'react' +import ReactDOMServer from 'react-dom/server' + +import { NotionContextProvider } from './context' +import { LazyImage } from './components/lazy-image' + +const render = (jsx: React.ReactElement) => + ReactDOMServer.renderToStaticMarkup({jsx}) + +test('LazyImage uses eager loading when priority', () => { + const html = render() + expect(html).toContain('loading="eager"') + expect(html).toContain('fetchPriority="high"') +}) + +test('LazyImage defaults to lazy loading', () => { + const html = render() + expect(html).toContain('loading="lazy"') + expect(html).not.toContain('fetchPriority="high"') +}) diff --git a/packages/nreact/src/page-icon.test.tsx b/packages/nreact/src/page-icon.test.tsx new file mode 100644 index 00000000..48cfb0b5 --- /dev/null +++ b/packages/nreact/src/page-icon.test.tsx @@ -0,0 +1,31 @@ +import { test, expect } from 'vitest' +import React from 'react' +import ReactDOMServer from 'react-dom/server' + +import { NotionContextProvider } from './context' +import { PageIconImpl } from './components/page-icon' + +const block: any = { + id: '1', + type: 'page', + parent_id: '1', + parent_table: 'block', + version: 0, + created_time: 0, + last_edited_time: 0, + alive: true, + created_by_table: 'notion_user', + created_by_id: '1', + last_edited_by_table: 'notion_user', + last_edited_by_id: '1', + properties: { title: [['Title']] }, + format: { page_icon: 'https://example.com/icon.png' } +} + +const render = (jsx: React.ReactElement) => + ReactDOMServer.renderToStaticMarkup({jsx}) + +test('PageIcon forwards priority to LazyImage', () => { + const html = render() + expect(html).toContain('fetchPriority="high"') +}) diff --git a/packages/nreact/tsup.config.ts b/packages/nreact/tsup.config.ts index 76417091..dab7095f 100644 --- a/packages/nreact/tsup.config.ts +++ b/packages/nreact/tsup.config.ts @@ -10,7 +10,7 @@ const baseConfig: Options = { 'src/third-party/pdf.tsx' ], outDir: 'build', - target: 'es2015', + target: 'es2020', platform: 'browser', format: ['esm'], splitting: true, @@ -28,7 +28,7 @@ export default defineConfig([ { ...baseConfig, outDir: 'build', - minify: false, + minify: true, sourcemap: false } ])