🚵

.eslintrc.json

@@ -2,7 +2,6 @@
   "root": true,
   "extends": ["@fisch0920/eslint-config"],
   "rules": {
-    "react/function-component-definition": "off",
     "react/prop-types": "off",
     "unicorn/no-array-reduce": "off",
     "unicorn/filename-case": "off",

.vscode/launch.json

@@ -0,0 +1,34 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "./node_modules/.bin/next dev",
+      "cwd": "${workspaceFolder}/examples/minimal"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/examples/minimal/node_modules/.bin/next",
+      "cwd": "${workspaceFolder}/examples/minimal",
+      "runtimeArgs": ["--inspect"],
+      "skipFiles": ["<node_internals>/**"],
+      "serverReadyAction": {
+        "action": "debugWithEdge",
+        "killOnServerStop": true,
+        "pattern": "- Local:.+(https?://.+)",
+        "uriFormat": "%s",
+        "webRoot": "${workspaceFolder}/examples/minimal"
+      }
+    }
+  ]
+}

examples/full/package.json

@@ -2,7 +2,7 @@
   "name": "notion-x-example-full",
   "version": "6.16.2",
   "private": true,
-  "type": "commonjs",
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

examples/minimal/package.json

@@ -2,7 +2,7 @@
   "name": "notion-x-example-minimal",
   "version": "6.16.1",
   "private": true,
-  "type": "commonjs",
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

packages/react-notion-x/src/block.tsx

@@ -53,7 +53,13 @@ const tocIndentLevelCache: {
 
 const pageCoverStyleCache: Record<string, object> = {}
 
-export const Block: React.FC<BlockProps> = (props: BlockProps) => {
+export function Block(props: BlockProps) {
+  console.log('Block', {
+    id: props.block.id,
+    type: props.block.type,
+    level: props.level
+  })
+
   const ctx = useNotionContext()
   const {
     components,
@@ -148,6 +154,16 @@ export const Block: React.FC<BlockProps> = (props: BlockProps) => {
           const hasAside = !!((hasToc || pageAside) && !page_full_width)
           const hasPageCover = !!(pageCover || page_cover)
 
+          console.log({
+            disableHeader,
+            header,
+            pageCover,
+            pageHeader,
+            pageFooter,
+            footer,
+            components
+          })
+
           return (
             <div
               className={cs(

packages/react-notion-x/src/components/asset-wrapper.tsx

@@ -9,10 +9,13 @@ import { Text } from './text'
 
 const urlStyle = { width: '100%' }
 
-export const AssetWrapper: React.FC<{
+export function AssetWrapper({
+  blockId,
+  block
+}: {
   blockId: string
   block: Block
-}> = ({ blockId, block }) => {
+}) {
   const value = block as BaseContentBlock
   const { components, mapPageUrl, rootDomain, zoom } = useNotionContext()
 

packages/react-notion-x/src/components/asset.tsx

@@ -25,11 +25,15 @@ const supportedAssetTypes = new Set([
   'drive'
 ])
 
-export const Asset: React.FC<{
+export function Asset({
+  block,
+  zoomable = true,
+  children
+}: {
   block: BaseContentBlock
   children: any
   zoomable?: boolean
-}> = ({ block, zoomable = true, children }) => {
+}) {
   const { recordMap, mapImageUrl, components } = useNotionContext()
 
   if (!block || !supportedAssetTypes.has(block.type)) {

packages/react-notion-x/src/components/audio.tsx

@@ -4,10 +4,13 @@ import { type AudioBlock } from 'notion-types'
 import { useNotionContext } from '../context'
 import { cs } from '../utils'
 
-export const Audio: React.FC<{
+export function Audio({
+  block,
+  className
+}: {
   block: AudioBlock
   className?: string
-}> = ({ block, className }) => {
+}) {
   const { recordMap } = useNotionContext()
   const source =
     recordMap.signed_urls[block.id] || block.properties?.source?.[0]?.[0]

packages/react-notion-x/src/components/checkbox.tsx

@@ -2,10 +2,12 @@ import type * as React from 'react'
 
 import CheckIcon from '../icons/check'
 
-export const Checkbox: React.FC<{
+export function Checkbox({
+  isChecked
+}: {
   isChecked: boolean
   blockId?: string
-}> = ({ isChecked }) => {
+}) {
   let content = null
 
   if (isChecked) {

packages/react-notion-x/src/components/eoi.tsx

@@ -7,11 +7,15 @@ import { cs, formatNotionDateTime } from '../utils'
 import { MentionPreviewCard } from './mention-preview-card'
 
 // External Object Instance
-export const EOI: React.FC<{
+export function EOI({
+  block,
+  inline,
+  className
+}: {
   block: Block
   inline?: boolean
   className?: string
-}> = ({ block, inline, className }) => {
+}) {
   const { components } = useNotionContext()
   const { original_url, attributes, domain } = block?.format || {}
   if (!original_url || !attributes) {

packages/react-notion-x/src/components/file.tsx

@@ -6,10 +6,13 @@ import { FileIcon } from '../icons/file-icon'
 import { cs } from '../utils'
 import { Text } from './text'
 
-export const File: React.FC<{
+export function File({
+  block,
+  className
+}: {
   block: FileBlock
   className?: string
-}> = ({ block, className }) => {
+}) {
   const { components, recordMap } = useNotionContext()
   const source =
     recordMap.signed_urls[block.id] || block.properties?.source?.[0]?.[0]

packages/react-notion-x/src/components/google-drive.tsx

@@ -5,10 +5,13 @@ import { useNotionContext } from '../context'
 import { cs } from '../utils'
 import { GracefulImage } from './graceful-image'
 
-export const GoogleDrive: React.FC<{
+export function GoogleDrive({
+  block,
+  className
+}: {
   block: GoogleDriveBlock
   className?: string
-}> = ({ block, className }) => {
+}) {
   const { components, mapImageUrl } = useNotionContext()
   const properties = block.format?.drive_properties
   if (!properties) return null

packages/react-notion-x/src/components/graceful-image.tsx

@@ -3,7 +3,7 @@ import { Img, type ImgProps } from 'react-image'
 
 import { isBrowser } from '../utils'
 
-export const GracefulImage = (props: ImgProps) => {
+export function GracefulImage(props: ImgProps) {
   if (isBrowser) {
     return <Img {...props} />
   } else {

packages/react-notion-x/src/components/header.tsx

@@ -10,9 +10,11 @@ import { cs } from '../utils'
 import { PageIcon } from './page-icon'
 import { SearchDialog } from './search-dialog'
 
-export const Header: React.FC<{
+export function Header({
+  block
+}: {
   block: types.CollectionViewPageBlock | types.PageBlock
-}> = ({ block }) => {
+}) {
   return (
     <header className='notion-header'>
       <div className='notion-nav-header'>
@@ -23,10 +25,13 @@ export const Header: React.FC<{
   )
 }
 
-export const Breadcrumbs: React.FC<{
+export function Breadcrumbs({
+  block,
+  rootOnly = false
+}: {
   block: types.Block
   rootOnly?: boolean
-}> = ({ block, rootOnly = false }) => {
+}) {
   const { recordMap, mapPageUrl, components } = useNotionContext()
 
   const breadcrumbs = React.useMemo(() => {
@@ -81,11 +86,15 @@ export const Breadcrumbs: React.FC<{
   )
 }
 
-export const Search: React.FC<{
+export function Search({
+  block,
+  search,
+  title = 'Search'
+}: {
   block: types.Block
   search?: SearchNotionFn
   title?: React.ReactNode
-}> = ({ block, search, title = 'Search' }) => {
+}) {
   const { searchNotion, rootPageId, isShowingSearch, onHideSearch } =
     useNotionContext()
   const onSearchNotion = search || searchNotion

packages/react-notion-x/src/components/lazy-image.tsx

@@ -8,15 +8,7 @@ import { cs } from '../utils'
 /**
  * Progressive, lazy images modeled after Medium's LQIP technique.
  */
-export const LazyImage: React.FC<{
-  src?: string
-  alt?: string
-  className?: string
-  style?: React.CSSProperties
-  height?: number
-  zoomable?: boolean
-  priority?: boolean
-}> = ({
+export function LazyImage({
   src,
   alt,
   className,
@@ -25,7 +17,15 @@ export const LazyImage: React.FC<{
   priority = false,
   height,
   ...rest
-}) => {
+}: {
+  src?: string
+  alt?: string
+  className?: string
+  style?: React.CSSProperties
+  height?: number
+  zoomable?: boolean
+  priority?: boolean
+}) {
   const { recordMap, zoom, previewImages, forceCustomImages, components } =
     useNotionContext()
   const zoomRef = React.useRef(zoom ? zoom.clone() : null)

packages/react-notion-x/src/components/lite-youtube-embed.tsx

@@ -10,18 +10,7 @@ const qs = (params: Record<string, string>) => {
     .join('&')
 }
 
-export const LiteYouTubeEmbed: React.FC<{
-  id: string
-  defaultPlay?: boolean
-  mute?: boolean
-  lazyImage?: boolean
-  iframeTitle?: string
-  alt?: string
-  params?: Record<string, string>
-  adLinksPreconnect?: boolean
-  style?: React.CSSProperties
-  className?: string
-}> = ({
+export function LiteYouTubeEmbed({
   id,
   defaultPlay = false,
   mute = false,
@@ -32,7 +21,18 @@ export const LiteYouTubeEmbed: React.FC<{
   adLinksPreconnect = true,
   style,
   className
-}) => {
+}: {
+  id: string
+  defaultPlay?: boolean
+  mute?: boolean
+  lazyImage?: boolean
+  iframeTitle?: string
+  alt?: string
+  params?: Record<string, string>
+  adLinksPreconnect?: boolean
+  style?: React.CSSProperties
+  className?: string
+}) {
   const muteParam = mute || defaultPlay ? '1' : '0' // Default play must be muted
   const queryString = React.useMemo(
     () => qs({ autoplay: '1', mute: muteParam, ...params }),

packages/react-notion-x/src/components/mention-preview-card.tsx

@@ -6,13 +6,19 @@ function capitalizeFirstLetter(str?: string) {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
 
-export const MentionPreviewCard: React.FC<{
+export function MentionPreviewCard({
+  owner,
+  lastUpdated,
+  externalImage,
+  title,
+  domain
+}: {
   owner?: string
   lastUpdated?: string | null
   title: string
   domain: string
   externalImage?: React.ReactNode
-}> = ({ owner, lastUpdated, externalImage, title, domain }) => {
+}) {
   return (
     <div className='notion-external-subtitle'>
       {externalImage && (

packages/react-notion-x/src/components/page-aside.tsx

@@ -4,23 +4,23 @@ import * as React from 'react'
 
 import { cs } from '../utils'
 
-export const PageAside: React.FC<{
-  toc: Array<TableOfContentsEntry>
-  activeSection: string | null
-  setActiveSection: (activeSection: string | null) => unknown
-  hasToc: boolean
-  hasAside: boolean
-  pageAside?: React.ReactNode
-  className?: string
-}> = ({
+export function PageAside({
   toc,
   activeSection,
   setActiveSection,
   pageAside,
   hasToc,
   hasAside,
   className
-}) => {
+}: {
+  toc: Array<TableOfContentsEntry>
+  activeSection: string | null
+  setActiveSection: (activeSection: string | null) => unknown
+  hasToc: boolean
+  hasAside: boolean
+  pageAside?: React.ReactNode
+  className?: string
+}) {
   const throttleMs = 100
   const actionSectionScrollSpy = React.useMemo(
     () =>