Skip to content

feature/rsc-test #236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/nreact/src/block.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import {
1 change: 1 addition & 0 deletions packages/nreact/src/components/asset-wrapper.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { BaseContentBlock, Block } from '@texonom/ntypes'
1 change: 1 addition & 0 deletions packages/nreact/src/components/asset.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { BaseContentBlock, Block } from '@texonom/ntypes'
1 change: 1 addition & 0 deletions packages/nreact/src/components/audio.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { AudioBlock } from '@texonom/ntypes'
1 change: 1 addition & 0 deletions packages/nreact/src/components/checkbox.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import CheckIcon from '../icons/check'
1 change: 1 addition & 0 deletions packages/nreact/src/components/eoi.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { Block } from '@texonom/ntypes'
1 change: 1 addition & 0 deletions packages/nreact/src/components/file.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { FileBlock } from '@texonom/ntypes'
1 change: 1 addition & 0 deletions packages/nreact/src/components/google-drive.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { GoogleDriveBlock } from '@texonom/ntypes'
1 change: 1 addition & 0 deletions packages/nreact/src/components/graceful-image.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { Img, ImgProps } from 'react-image'
1 change: 1 addition & 0 deletions packages/nreact/src/components/lazy-image.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { normalizeUrl } from '@texonom/nutils'
1 change: 1 addition & 0 deletions packages/nreact/src/components/lite-youtube-embed.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

const qs = (params: Record<string, string>) => {
1 change: 1 addition & 0 deletions packages/nreact/src/components/page-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { Block, CalloutBlock, PageBlock } from '@texonom/ntypes'
1 change: 1 addition & 0 deletions packages/nreact/src/components/page-title.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { Block, Decoration } from '@texonom/ntypes'
1 change: 1 addition & 0 deletions packages/nreact/src/components/search-dialog.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'
import { getBlockParentPage, getBlockTitle } from '@texonom/nutils'

1 change: 1 addition & 0 deletions packages/nreact/src/components/sync-pointer-block.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { NotionBlockRenderer } from '../renderer'
1 change: 1 addition & 0 deletions packages/nreact/src/components/text.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { parsePageId } from '@texonom/nutils'
1 change: 1 addition & 0 deletions packages/nreact/src/context.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { defaultMapImageUrl, defaultMapPageUrl } from '@texonom/nutils'
1 change: 1 addition & 0 deletions packages/nreact/src/icons/check.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgCheck(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/chevron-down-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

export const ChevronDownIcon = props => {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/clear-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

export const ClearIcon = props => {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/collection-view-board.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgCollectionViewBoard(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/collection-view-calendar.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgCollectionViewCalendar(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/collection-view-gallery.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgCollectionViewGallery(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/collection-view-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { CollectionViewType } from '@texonom/ntypes'
1 change: 1 addition & 0 deletions packages/nreact/src/icons/collection-view-list.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgCollectionViewList(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/collection-view-table.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgCollectionViewTable(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/copy.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgCopy(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/default-page-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

export const DefaultPageIcon = props => {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/empty-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

export const EmptyIcon = props => {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/file-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

export const FileIcon = props => {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/link-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

export const LinkIcon = props => {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/loading-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

export const LoadingIcon = props => {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/property-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { PropertyType } from '@texonom/ntypes'
1 change: 1 addition & 0 deletions packages/nreact/src/icons/search-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

export const SearchIcon = props => {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-checkbox.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypeCheckbox(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-date.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypeDate(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-email.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypeEmail(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-file.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypeFile(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-formula.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypeFormula(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-github.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypeGitHub(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-multi-select.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypeMultiSelect(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-number.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypeNumber(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-person-2.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypePerson2(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-person.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypePerson(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-phone-number.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypePhoneNumber(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-relation.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypeRelation(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-select.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypeSelect(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-text.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypeText(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-timestamp.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypeTimestamp(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-title.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypeTitle(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/icons/type-url.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

function SvgTypeUrl(props: React.SVGProps<SVGSVGElement>) {
1 change: 1 addition & 0 deletions packages/nreact/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
export { NotionRenderer } from './renderer'

export * from './block'
1 change: 1 addition & 0 deletions packages/nreact/src/next.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import isEqual from 'react-fast-compare'
1 change: 1 addition & 0 deletions packages/nreact/src/renderer.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import mediumZoom from '@fisch0920/medium-zoom'
1 change: 1 addition & 0 deletions packages/nreact/src/third-party/collection-card.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { ImageBlock } from '@texonom/ntypes'
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { CollectionPropertySchema } from '@texonom/ntypes'
1 change: 1 addition & 0 deletions packages/nreact/src/third-party/collection-group.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { CollectionGroupProps } from '../types'
1 change: 1 addition & 0 deletions packages/nreact/src/third-party/collection-row.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { PageBlock } from '@texonom/ntypes'
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { PageBlock } from '@texonom/ntypes'
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { PageBlock } from '@texonom/ntypes'
1 change: 1 addition & 0 deletions packages/nreact/src/third-party/collection-view-list.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { PageBlock } from '@texonom/ntypes'
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { useNotionContext } from '../context'
1 change: 1 addition & 0 deletions packages/nreact/src/third-party/collection-view.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { CollectionViewProps } from '../types'
1 change: 1 addition & 0 deletions packages/nreact/src/third-party/equation.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import Katex from '@matejmazur/react-katex'
1 change: 1 addition & 0 deletions packages/nreact/src/third-party/modal.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import Modal from 'react-modal'

export { Modal }
1 change: 1 addition & 0 deletions packages/nreact/src/third-party/pdf.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import { Document, Page, pdfjs } from 'react-pdf'
1 change: 1 addition & 0 deletions packages/nreact/src/third-party/property.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use server'
import React from 'react'

import format from 'date-fns/format/index.js'
154 changes: 154 additions & 0 deletions test/components-render.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
import { describe, test, expect } from 'vitest'
import React from '../packages/nreact/node_modules/react'
import { renderToReadableStream } from '../packages/nreact/node_modules/react-dom/server.edge'
import { NotionContextProvider } from '../packages/nreact/src/context'
import {
Block,
AssetWrapper,
Asset,
Audio,
Checkbox,
EOI,
File,
GoogleDrive,
GracefulImage,
LazyImage,
LiteYouTubeEmbed,
PageIcon,
PageTitle,
SyncPointerBlock,
Text
} from '../packages/nreact/src'
import type { Block as BlockType } from '../packages/ntypes/src/block'

const emptyRecordMap = {
block: {},
collection: {},
collection_view: {},
notion_user: {},
collection_query: {},
signed_urls: {}
}

const baseBlock: BlockType = {
id: 'page',
type: 'page',
properties: { title: [['Test']] },
parent_id: '',
parent_table: 'space',
version: 1,
created_time: 0,
last_edited_time: 0,
alive: true,
created_by_table: 'user',
created_by_id: '',
last_edited_by_table: 'user',
last_edited_by_id: ''
} as any

const audioBlock: BlockType = {
...baseBlock,
id: 'audio',
type: 'audio',
properties: { source: [['https://example.com/audio.mp3']] }
} as any

const fileBlock: BlockType = {
...baseBlock,
id: 'file',
type: 'file',
properties: {
title: [['File']],
size: [['1']],
source: [['https://example.com/file.pdf']]
}
} as any

const googleDriveBlock: BlockType = {
...baseBlock,
id: 'gd',
type: 'google_drive',
format: { drive_properties: { url: 'https://drive.google.com/file/d/abc' } }
} as any

const eoiBlock: BlockType = {
...baseBlock,
id: 'eoi',
type: 'embed',
format: {
original_url: 'https://github.com',
domain: 'github.com',
attributes: [{ id: 'title', values: ['Repo'] }]
}
} as any

async function renderElement(element: React.ReactNode) {
const stream = await renderToReadableStream(
<NotionContextProvider recordMap={emptyRecordMap}>{element}</NotionContextProvider>
)
const reader = stream.getReader()
const chunk = await reader.read()
expect(chunk.done).toBe(false)

Check failure on line 91 in test/components-render.test.tsx

GitHub Actions / buildtest

test/components-render.test.tsx > individual component rendering > Text

AssertionError: expected true to be false // Object.is equality - Expected + Received - false + true ❯ renderElement test/components-render.test.tsx:91:22 ❯ test/components-render.test.tsx:152:5

Check failure on line 91 in test/components-render.test.tsx

GitHub Actions / buildtest

test/components-render.test.tsx > individual component rendering > SyncPointerBlock

AssertionError: expected true to be false // Object.is equality - Expected + Received - false + true ❯ renderElement test/components-render.test.tsx:91:22 ❯ test/components-render.test.tsx:148:5

Check failure on line 91 in test/components-render.test.tsx

GitHub Actions / buildtest

test/components-render.test.tsx > individual component rendering > Asset

AssertionError: expected true to be false // Object.is equality - Expected + Received - false + true ❯ renderElement test/components-render.test.tsx:91:22 ❯ test/components-render.test.tsx:104:5
}

describe('individual component rendering', () => {
test('Block', async () => {
await renderElement(<Block block={baseBlock} level={0} />)
})

test('AssetWrapper', async () => {
await renderElement(<AssetWrapper blockId='file' block={fileBlock} />)
})

test('Asset', async () => {
await renderElement(<Asset blockId='file' block={fileBlock} />)
})

test('Audio', async () => {
await renderElement(<Audio block={audioBlock} />)
})

test('Checkbox', async () => {
await renderElement(<Checkbox isChecked={true} blockId='page' />)
})

test('EOI', async () => {
await renderElement(<EOI block={eoiBlock} />)
})

test('File', async () => {
await renderElement(<File block={fileBlock} />)
})

test('GoogleDrive', async () => {
await renderElement(<GoogleDrive block={googleDriveBlock} />)
})

test('GracefulImage', async () => {
await renderElement(<GracefulImage src='image.png' />)
})

test('LazyImage', async () => {
await renderElement(<LazyImage src='image.png' />)
})

test('LiteYouTubeEmbed', async () => {
await renderElement(<LiteYouTubeEmbed id='dQw4w9WgXcQ' />)
})

test('PageIcon', async () => {
await renderElement(<PageIcon block={baseBlock} />)
})

test('PageTitle', async () => {
await renderElement(<PageTitle block={baseBlock} />)
})

test('SyncPointerBlock', async () => {
await renderElement(<SyncPointerBlock block={baseBlock} level={0} />)
})

test('Text', async () => {
await renderElement(<Text value={[]} block={baseBlock} />)
})
})
41 changes: 41 additions & 0 deletions test/rsc-render.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { test, expect } from 'vitest'
import React from '../packages/nreact/node_modules/react'
import { renderToReadableStream } from '../packages/nreact/node_modules/react-dom/server.edge'
import { NotionRenderer } from '../packages/nreact/src/renderer'
import type { ExtendedRecordMap } from '../packages/ntypes/src/maps'

const recordMap: ExtendedRecordMap = {
block: {
// eslint-disable-next-line @typescript-eslint/naming-convention
'1': {
role: 'reader',
value: {
id: '1',
type: 'page',
properties: { title: [['Test']] },
parent_id: '',
parent_table: 'space',
version: 1,
created_time: 0,
last_edited_time: 0,
alive: true,
created_by_table: 'user',
created_by_id: '',
last_edited_by_table: 'user',
last_edited_by_id: ''
}
}
},
collection: {},
collection_view: {},
notion_user: {},
collection_query: {},
signed_urls: {}
}

test('server component renders to stream', async () => {
const stream = await renderToReadableStream(<NotionRenderer recordMap={recordMap} />)
const reader = stream.getReader()
const chunk = await reader.read()
expect(chunk.done).toBe(false)
})