feat: halloween shenanigans

examples/full/components/Loading.tsx

@@ -1,10 +1,10 @@
-import type * as React from 'react'
-
 import { LoadingIcon } from './LoadingIcon'
 import styles from './styles.module.css'
 
-export const Loading: React.FC = () => (
-  <div className={styles.container}>
-    <LoadingIcon />
-  </div>
-)
+export function Loading() {
+  return (
+    <div className={styles.container}>
+      <LoadingIcon />
+    </div>
+  )
+}

examples/full/components/LoadingIcon.tsx

@@ -1,9 +1,8 @@
 import cs from 'classnames'
-import * as React from 'react'
 
 import styles from './styles.module.css'
 
-export const LoadingIcon = (props: any) => {
+export function LoadingIcon(props: any) {
   const { className, ...rest } = props
   return (
     <svg

examples/full/components/NotionPage.tsx

@@ -5,7 +5,6 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { type ExtendedRecordMap } from 'notion-types'
 import { getPageTitle } from 'notion-utils'
-import * as React from 'react'
 import { NotionRenderer } from 'react-notion-x'
 import TweetEmbed from 'react-tweet-embed'
 
@@ -75,11 +74,11 @@ const Modal = dynamic(
   }
 )
 
-const Tweet = ({ id }: { id: string }) => {
+function Tweet({ id }: { id: string }) {
   return <TweetEmbed tweetId={id} />
 }
 
-export const NotionPage = ({
+export function NotionPage({
   recordMap,
   previewImagesEnabled,
   rootPageId,
@@ -89,7 +88,7 @@ export const NotionPage = ({
   previewImagesEnabled?: boolean
   rootPageId?: string
   rootDomain?: string
-}) => {
+}) {
   const router = useRouter()
 
   if (router.isFallback) {

examples/full/lib/notion.ts

@@ -32,5 +32,9 @@ export async function getPage(pageId: string): Promise<ExtendedRecordMap> {
 }
 
 export async function search(params: SearchParams): Promise<SearchResults> {
-  return notion.search(params)
+  if ('search' in notion) {
+    return notion.search(params)
+  } else {
+    throw new Error('Notion API does not support search')
+  }
 }

examples/full/package.json

@@ -19,10 +19,11 @@
     "next": "^15.0.2",
     "notion-client": "workspace:*",
     "notion-compat": "workspace:*",
-    "notion-utils": "workspace:*",
     "notion-types": "workspace:*",
+    "notion-utils": "workspace:*",
     "p-map": "^7.0.2",
     "p-memoize": "^7.1.1",
+    "prismjs": "^1.27.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-notion-x": "workspace:*",

examples/full/pages/[pageId].tsx

@@ -1,6 +1,5 @@
 import { type ExtendedRecordMap } from 'notion-types'
 import { getAllPagesInSpace } from 'notion-utils'
-import * as React from 'react'
 import { defaultMapPageUrl } from 'react-notion-x'
 
 import { NotionPage } from '../components/NotionPage'

examples/full/pages/_app.tsx

@@ -4,11 +4,9 @@ import 'katex/dist/katex.min.css'
 import 'prismjs/themes/prism-tomorrow.css'
 // core styles shared by all of react-notion-x (required)
 import 'react-notion-x/src/styles.css'
-// force push
+// app styles
 import '../styles/globals.css'
 
-import * as React from 'react'
-
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }

examples/full/pages/_document.tsx

@@ -1,5 +1,4 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document'
-import * as React from 'react'
 
 export default class MyDocument extends Document {
   render() {

examples/full/pages/index.tsx

@@ -1,5 +1,4 @@
 import { type ExtendedRecordMap } from 'notion-types'
-import * as React from 'react'
 
 import { NotionPage } from '../components/NotionPage'
 import {

examples/full/tsconfig.json

@@ -1,16 +1,15 @@
 {
   "compilerOptions": {
-    "target": "es2016",
-    "lib": ["dom", "esnext"],
-    "allowJs": false,
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
     "forceConsistentCasingInFileNames": true,
-    "experimentalDecorators": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

examples/minimal/components/NotionPage.tsx

@@ -1,16 +1,15 @@
 import Head from 'next/head'
 import { type ExtendedRecordMap } from 'notion-types'
 import { getPageTitle } from 'notion-utils'
-import * as React from 'react'
 import { NotionRenderer } from 'react-notion-x'
 
-export const NotionPage = ({
+export function NotionPage({
   recordMap,
   rootPageId
 }: {
   recordMap: ExtendedRecordMap
   rootPageId?: string
-}) => {
+}) {
   if (!recordMap) {
     return null
   }

examples/minimal/pages/[pageId].tsx

@@ -1,5 +1,4 @@
 import { type ExtendedRecordMap } from 'notion-types'
-import * as React from 'react'
 
 import { NotionPage } from '../components/NotionPage'
 import { rootNotionPageId } from '../lib/config'

examples/minimal/pages/_app.tsx

@@ -2,8 +2,6 @@
 import 'react-notion-x/src/styles.css'
 import '../styles/globals.css'
 
-import * as React from 'react'
-
 // used for code syntax highlighting (optional)
 // import 'prismjs/themes/prism-tomorrow.css'
 

examples/minimal/pages/_document.tsx

@@ -1,5 +1,4 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document'
-import * as React from 'react'
 
 export default class MyDocument extends Document {
   render() {

examples/minimal/pages/index.tsx

@@ -1,5 +1,4 @@
 import { type ExtendedRecordMap } from 'notion-types'
-import * as React from 'react'
 
 import { NotionPage } from '../components/NotionPage'
 import { rootNotionPageId } from '../lib/config'

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

@@ -54,12 +54,6 @@ const tocIndentLevelCache: {
 const pageCoverStyleCache: Record<string, object> = {}
 
 export function Block(props: BlockProps) {
-  console.log('Block', {
-    id: props.block.id,
-    type: props.block.type,
-    level: props.level
-  })
-
   const ctx = useNotionContext()
   const {
     components,
@@ -154,16 +148,6 @@ export function Block(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/text.tsx

@@ -249,7 +249,6 @@ export function Text({
                 const externalObjectInstance = recordMap.block[blockId]
                   ?.value as ExternalObjectInstance
 
-                console.log('eoi', blockId, externalObjectInstance)
                 return <EOI block={externalObjectInstance} inline={true} />
               }
 

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

@@ -233,9 +233,6 @@ export function NotionContextProvider({
     [mapImageUrl, mapPageUrl, wrappedThemeComponents, rootPageId, rest]
   )
 
-  console.log('NotionContextProvider', { value })
-  console.log({ rest, defaultComponents, wrappedThemeComponents })
-
   return <ctx.Provider value={value}>{children}</ctx.Provider>
 }
 

packages/react-notion-x/src/styles.css

@@ -2251,6 +2251,8 @@ svg.notion-page-icon {
 
 .lazy-image-wrapper img {
   position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;

packages/react-notion-x/src/third-party/code.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line import/no-duplicates
+import 'prismjs'
 import 'prismjs/components/prism-clike.min.js'
 import 'prismjs/components/prism-css-extras.min.js'
 import 'prismjs/components/prism-css.min.js'
@@ -11,6 +13,7 @@ import 'prismjs/components/prism-typescript.min.js'
 import copyToClipboard from 'clipboard-copy'
 import { type CodeBlock } from 'notion-types'
 import { getBlockTitle } from 'notion-utils'
+// eslint-disable-next-line import/no-duplicates, no-duplicate-imports
 import { highlightElement } from 'prismjs'
 import * as React from 'react'