feat: third-party component redesign

Author: transitive-bullshit

.eslintignore

@@ -2,4 +2,4 @@
 .next/
 .vercel/
 build/
-docs/
+docs/

examples/full/components/NotionPage.tsx

@@ -3,39 +3,35 @@ import Head from 'next/head'
 import Image from 'next/image'
 import dynamic from 'next/dynamic'
 
-import { getPageTitle } from 'notion-utils'
 import { NotionRenderer } from 'react-notion-x'
 import { ExtendedRecordMap } from 'notion-types'
+import { getPageTitle } from 'notion-utils'
 import { Tweet, TwitterContextProvider } from 'react-static-tweets'
 
 // -----------------------------------------------------------------------------
 // dynamic imports for optional components
 // -----------------------------------------------------------------------------
 
+const Collection = dynamic(() =>
+  import('react-notion-x/third-party/collection').then((m) => m.Collection)
+)
 const Code = dynamic(() =>
-  import('react-notion-x').then((notion) => notion.Code)
+  import('react-notion-x/third-party/code').then((m) => m.Code)
 )
-
-const Collection = dynamic(() =>
-  import('react-notion-x').then((notion) => notion.Collection)
+const Equation = dynamic(() =>
+  import('react-notion-x/third-party/equation').then((m) => m.Equation)
 )
-
-const CollectionRow = dynamic(
-  () => import('react-notion-x').then((notion) => notion.CollectionRow),
+const Pdf = dynamic(
+  () => import('react-notion-x/third-party/pdf').then((m) => m.Pdf),
   {
     ssr: false
   }
 )
-
-// NOTE: PDF support via "react-pdf" can sometimes cause errors depending on your
-// build setup. If you're running into issues, just disable PDF support altogether.
-const Pdf = dynamic(
-  () => import('react-notion-x').then((notion) => (notion as any).Pdf),
-  { ssr: false }
-)
-
-const Equation = dynamic(() =>
-  import('react-notion-x').then((notion) => notion.Equation)
+const Modal = dynamic(
+  () => import('react-notion-x/third-party/modal').then((m) => m.Modal),
+  {
+    ssr: false
+  }
 )
 
 export const NotionPage = ({
@@ -146,9 +142,9 @@ export const NotionPage = ({
           },
           code: Code,
           collection: Collection,
-          collectionRow: CollectionRow,
           equation: Equation,
           pdf: Pdf,
+          modal: Modal,
           tweet: Tweet
         }}
       />

examples/minimal/components/NotionPage.tsx

@@ -1,18 +1,16 @@
 import React from 'react'
 import Head from 'next/head'
 
-import { getPageTitle } from 'notion-utils'
 import { NotionRenderer } from 'react-notion-x'
 import { ExtendedRecordMap } from 'notion-types'
+import { getPageTitle } from 'notion-utils'
 
 export const NotionPage = ({
   recordMap,
-  rootPageId,
-  rootDomain
+  rootPageId
 }: {
   recordMap: ExtendedRecordMap
   rootPageId?: string
-  rootDomain?: string
 }) => {
   if (!recordMap) {
     return null
@@ -33,7 +31,6 @@ export const NotionPage = ({
         recordMap={recordMap}
         fullPage={true}
         darkMode={false}
-        rootDomain={rootDomain}
         rootPageId={rootPageId}
       />
     </>

examples/minimal/lib/config.ts

@@ -1,11 +1,5 @@
-// TODO: change these to your own values
-// NOTE: rootNotionSpaceId is optional; set it to undefined if you don't want to
-// use it.
+// TODO: change this to the notion ID of the page you want to test
 export const rootNotionPageId = '067dd719a912471ea9a3ac10710e7fdf'
-export const rootNotionSpaceId = 'fde5ac74-eea3-4527-8f00-4482710e1af3'
 
 export const isDev =
   process.env.NODE_ENV === 'development' || !process.env.NODE_ENV
-
-export const port = process.env.PORT || 3000
-export const rootDomain = isDev ? `localhost:${port}` : null

examples/minimal/pages/[pageId].tsx

@@ -1,17 +1,10 @@
 import React from 'react'
 
 import { NotionAPI } from 'notion-client'
-import { getAllPagesInSpace } from 'notion-utils'
-import { defaultMapPageUrl } from 'react-notion-x'
 import { ExtendedRecordMap } from 'notion-types'
 
 import { NotionPage } from '../components/NotionPage'
-import {
-  rootNotionPageId,
-  rootNotionSpaceId,
-  rootDomain,
-  isDev
-} from '../lib/config'
+import { rootNotionPageId } from '../lib/config'
 
 export const notion = new NotionAPI()
 
@@ -28,44 +21,12 @@ export const getStaticProps = async (context) => {
 }
 
 export async function getStaticPaths() {
-  if (isDev) {
-    return {
-      paths: [],
-      fallback: true
-    }
-  }
-
-  const mapPageUrl = defaultMapPageUrl(rootNotionPageId)
-
-  // This crawls all public pages starting from the given root page in order
-  // for next.js to pre-generate all pages via static site generation (SSG).
-  // This is a useful optimization but not necessary; you could just as easily
-  // set paths to an empty array to not pre-generate any pages at build time.
-  const pages = await getAllPagesInSpace(
-    rootNotionPageId,
-    rootNotionSpaceId,
-    notion.getPage.bind(notion),
-    {
-      traverseCollections: false
-    }
-  )
-
-  const paths = Object.keys(pages)
-    .map((pageId) => mapPageUrl(pageId))
-    .filter((path) => path && path !== '/')
-
   return {
-    paths,
+    paths: [],
     fallback: true
   }
 }
 
 export default function Page({ recordMap }: { recordMap: ExtendedRecordMap }) {
-  return (
-    <NotionPage
-      recordMap={recordMap}
-      rootPageId={rootNotionPageId}
-      rootDomain={rootDomain}
-    />
-  )
+  return <NotionPage recordMap={recordMap} rootPageId={rootNotionPageId} />
 }

examples/minimal/pages/index.tsx

@@ -4,7 +4,7 @@ import { NotionAPI } from 'notion-client'
 import { ExtendedRecordMap } from 'notion-types'
 
 import { NotionPage } from '../components/NotionPage'
-import { rootNotionPageId, rootDomain } from '../lib/config'
+import { rootNotionPageId } from '../lib/config'
 
 export const notion = new NotionAPI()
 
@@ -21,11 +21,5 @@ export const getStaticProps = async () => {
 }
 
 export default function Page({ recordMap }: { recordMap: ExtendedRecordMap }) {
-  return (
-    <NotionPage
-      recordMap={recordMap}
-      rootDomain={rootDomain}
-      rootPageId={rootNotionPageId}
-    />
-  )
+  return <NotionPage recordMap={recordMap} rootPageId={rootNotionPageId} />
 }

package.json

@@ -28,7 +28,8 @@
     "docs:extract": "lerna exec --ignore react-notion-x --ignore notion-x-example-minimal notion-x-example-full api-extractor run",
     "docs:generate": "api-documenter markdown -i build -o docs",
     "bootstrap": "lerna bootstrap",
-    "publish": "lerna publish",
+    "publish": "run-s build publish:lerna",
+    "publish:lerna": "lerna publish",
     "preinstall": "node -e \"if (process.env.npm_execpath.indexOf('yarn') < 0) throw new Error('this package requires yarn for development')\"",
     "postinstall": "run-s bootstrap",
     "prepare": "husky install",

packages/react-notion-x/package.json

@@ -9,6 +9,40 @@
   "module": "build/esm/index.js",
   "typings": "build/esm/index.d.ts",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "requires": "./build/cjs/index.js",
+      "types": "./build/esm/index.d.ts",
+      "default": "./build/esm/index.js"
+    },
+    "./third-party/code": {
+      "requires": "./build/cjs/third-party/code.js",
+      "types": "./build/esm/third-party/code.d.ts",
+      "default": "./build/esm/third-party/code.js"
+    },
+    "./third-party/collection": {
+      "requires": "./build/cjs/third-party/collection.js",
+      "types": "./build/esm/third-party/collection.d.ts",
+      "default": "./build/esm/third-party/collection.js"
+    },
+    "./third-party/equation": {
+      "requires": "./build/cjs/third-party/equation.js",
+      "types": "./build/esm/third-party/equation.d.ts",
+      "default": "./build/esm/third-party/equation.js"
+    },
+    "./third-party/modal": {
+      "requires": "./build/cjs/third-party/modal.js",
+      "types": "./build/esm/third-party/modal.d.ts",
+      "default": "./build/esm/third-party/modal.js"
+    },
+    "./third-party/pdf": {
+      "requires": "./build/cjs/third-party/pdf.js",
+      "types": "./build/esm/third-party/pdf.d.ts",
+      "default": "./build/esm/third-party/pdf.js"
+    },
+    "./styles.css": "./src/styles.css",
+    "./src/styles.css": "./src/styles.css"
+  },
   "engines": {
     "node": ">=12"
   },
@@ -22,7 +56,7 @@
     "medium-zoom": "^1.0.6",
     "notion-types": "^4.19.8",
     "notion-utils": "^4.19.8",
-    "prismjs": "^1.20.0",
+    "prismjs": "^1.27.0",
     "rc-dropdown": "^3.1.2",
     "rc-menu": "^9.0.14",
     "react-hotkeys-hook": "^3.0.3",