🚵

Author: transitive-bullshit

.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) {