Merge pull request #571 from NotionX/feature/maintenance-fall-2024

.eslintrc.json

@@ -1,27 +1,16 @@
 {
   "root": true,
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "react", "react-hooks"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "prettier"
-  ],
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "env": {
-    "browser": true,
-    "node": true
-  },
+  "extends": ["@fisch0920/eslint-config"],
   "rules": {
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/no-non-null-assertion": 0,
-    "@typescript-eslint/no-unused-vars": 2,
-    "react/prop-types": 0
+    "react/prop-types": "off",
+    "unicorn/no-array-reduce": "off",
+    "unicorn/filename-case": "off",
+    "no-process-env": "off",
+    "array-callback-return": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "jsx-a11y/media-has-caption": "off",
+    "jsx-a11y/interactive-supports-focus": "off",
+    "@typescript-eslint/naming-convention": "off"
   }
 }

.github/workflows/test.yml

@@ -4,75 +4,44 @@ on: [push, pull_request]
 
 jobs:
   test:
+    name: Test Node.js ${{ matrix.node-version }}
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: true
+      matrix:
+        node-version:
+          - 18
+          - 22
+
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        id: pnpm-install
         with:
-          node-version: 16
-          cache: yarn
-
-      - run: yarn install --frozen-lockfile
-      - run: yarn test
-
-  build-minimal:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
+          version: 9.12.2
+          run_install: false
 
-      - uses: actions/setup-node@v3
+      - name: Install Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
-          cache: yarn
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
 
-      - run: yarn install --frozen-lockfile
-      - run: yarn build
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --strict-peer-dependencies
+
+      - name: Run test
+        run: pnpm test
 
       - name: Build minimal example
         run: |
           cd examples/minimal
-          yarn build
-
-  build-full:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: yarn
-
-      - run: yarn install --frozen-lockfile
-      - run: yarn build
+          pnpm build
 
       - name: Build full example
         run: |
           cd examples/full
-          yarn build
-
-  # TODO: using the official API with GitHub Actions results in too much rate
-  # limiting and false negative build failures, so we're disabling it for now.
-  # build-full-official-api:
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v3
-
-  #     - uses: actions/setup-node@v3
-  #       with:
-  #         node-version: 16
-  #         cache: yarn
-
-  #     - run: yarn install --frozen-lockfile
-  #     - run: yarn build
-
-  #     - name: Build full example using the official Notion API
-
-  #       env:
-  #         USE_OFFICIAL_NOTION_API: true
-  #         NOTION_TOKEN: ${{ secrets.NOTION_TOKEN }}
-
-  #       run: |
-  #         cd examples/full
-  #         yarn build
+          pnpm build

.gitignore

@@ -24,3 +24,5 @@ yarn-error.log*
 
 .next/
 .vercel/
+.turbo/
+.tsimp/

.npmrc

@@ -0,0 +1,2 @@
+enable-pre-post-scripts=true
+package-manager-strict=false

.prettierrc

@@ -7,14 +7,5 @@
   "bracketSpacing": true,
   "bracketSameLine": false,
   "arrowParens": "always",
-  "trailingComma": "none",
-  "importOrder": [
-    "^(react/(.*)$)|^(react$)|^(next/(.*)$)|^(next$)",
-    "<THIRD_PARTY_MODULES>",
-    "^(@/lib/(.*)$)|^(@/components/(.*)$)|^(@/styles/(.*)$)",
-    "^[./]"
-  ],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
-  "importOrderGroupNamespaceSpecifiers": true
+  "trailingComma": "none"
 }

.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"
+      }
+    }
+  ]
+}

contributing.md

@@ -4,39 +4,39 @@ Suggestions and pull requests are highly encouraged. Have a look at the [open is
 
 ## Development
 
-To develop the project locally, you'll need a recent version of Node.js and `yarn` v1 installed globally.
+To develop the project locally, you'll need a recent version of Node.js and `pnpm` installed globally.
 
-To get started, clone the repo and run `yarn` from the root directory:
+To get started, clone the repo and run `pnpm` from the root directory:
 
 ```bash
 git clone https://github.com/NotionX/react-notion-x.git
 cd react-notion-x
-yarn
+pnpm
 ```
 
 This will install dependencies and link all of the local packages together using `lerna`. This includes the example projects which will now point to the local version of your packages.
 
 ```bash
-yarn dev
+pnpm dev
 ```
 
-This starts compiling the packages into their respective `build` folders. Under the hood, it is running `tsc --watch` and `tsup --watch`, so every time you make a change to one of the packages, the build will be updated automatically as long as this command is running.
+This starts compiling the packages into their respective `build` folders
 
-With `yarn dev` running in one tab, we recommend opening a second tab and navigating to the `examples/minimal` directory.
+With `pnpm dev` running in one tab, we recommend opening a second tab and navigating to the `examples/minimal` directory.
 
 ```bash
 cd examples/minimal
-yarn dev
+pnpm dev
 ```
 
-Running `yarn dev` from the `examples/minimal` directory will start the example project's Next.js dev server. This project should be using your locally built version of the libraries because they have been linked using `lerna`.
+Running `pnpm dev` from the `examples/minimal` directory will start the example project's Next.js dev server. This project ill be using your locally built version of the libraries.
 
 You should now be able to open `http://localhost:3000` to view and debug the example project.
 
 ### Gotchas
 
-Whenever you make a change to one of the packages, the `yarn dev` from the project root will re-compile that package, and the `yarn dev` from the example project's Next.js dev server should hot-reload it in the browser.
+Whenever you make a change to one of the packages, the `pnpm dev` from the project root will re-compile that package, and the `pnpm dev` from the example project's Next.js dev server should hot-reload it in the browser.
 
-Sometimes, this process gets a little out of whack, and if you're not sure what's going on, I usually just quit one or both of the `yarn dev` commands and restart them.
+Sometimes, this process gets a little out of whack, and if you're not sure what's going on, I usually just quit one or both of the `pnpm dev` commands and restart them.
 
-If you're seeing something unexpected while debugging one of the Next.js demos, try running `rm -rf .next` to refresh the Next.js cache before running `yarn dev` again.
+If you're seeing something unexpected while debugging one of the Next.js demos, try running `rm -rf .next` to refresh the Next.js cache before running `pnpm dev` again.

examples/cra/package.json

@@ -3,27 +3,20 @@
   "version": "6.16.1",
   "private": true,
   "scripts": {
-    "dev": "GENERATE_SOURCEMAP=false react-scripts start",
-    "start": "GENERATE_SOURCEMAP=false react-scripts start",
-    "build": "GENERATE_SOURCEMAP=false react-scripts build",
-    "eject": "GENERATE_SOURCEMAP=false react-scripts eject"
+    "dev": "DISABLE_ESLINT_PLUGIN=true GENERATE_SOURCEMAP=false react-scripts start",
+    "start": "DISABLE_ESLINT_PLUGIN=true GENERATE_SOURCEMAP=false react-scripts start",
+    "build": "DISABLE_ESLINT_PLUGIN=true GENERATE_SOURCEMAP=false react-scripts build",
+    "eject": "DISABLE_ESLINT_PLUGIN=true GENERATE_SOURCEMAP=false react-scripts eject"
   },
   "dependencies": {
-    "@types/node": "^16.11.26",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "notion-types": "^6.16.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-notion-x": "^6.16.1",
-    "react-scripts": "5.0.0",
-    "typescript": "^4.6.3"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "@types/node": "^22.8.4",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "notion-types": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-notion-x": "workspace:*",
+    "react-scripts": "5.0.1"
   },
   "browserslist": {
     "production": [

examples/cra/src/App.tsx

@@ -1,4 +1,4 @@
-import { ExtendedRecordMap } from 'notion-types'
+import { type ExtendedRecordMap } from 'notion-types'
 import { NotionRenderer } from 'react-notion-x'
 import { Code } from 'react-notion-x/build/third-party/code'
 import { Collection } from 'react-notion-x/build/third-party/collection'

examples/cra/src/index.tsx

@@ -1,19 +1,14 @@
-import * as React from 'react'
-
-import * as ReactDOM from 'react-dom'
 // core styles shared by all of react-notion-x (required)
 import 'react-notion-x/src/styles.css'
-
-import App from './App'
 // used for code syntax highlighting (optional)
 // import 'prismjs/themes/prism-tomorrow.css'
 // used for rendering equations (optional)
 // import 'katex/dist/katex.min.css'
 import './index.css'
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-)
+import { createRoot } from 'react-dom/client'
+
+import App from './App'
+
+const root = createRoot(document.getElementById('root')!)
+root.render(<App />)

examples/full/components/Loading.tsx

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

examples/full/components/NotionPage.tsx

@@ -1,11 +1,9 @@
-import * as React from 'react'
 import dynamic from 'next/dynamic'
 import Head from 'next/head'
 // import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-
-import { ExtendedRecordMap } from 'notion-types'
+import { type ExtendedRecordMap } from 'notion-types'
 import { getPageTitle } from 'notion-utils'
 import { NotionRenderer } from 'react-notion-x'
 import TweetEmbed from 'react-tweet-embed'
@@ -76,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,
@@ -90,7 +88,7 @@ export const NotionPage = ({
   previewImagesEnabled?: boolean
   rootPageId?: string
   rootDomain?: string
-}) => {
+}) {
   const router = useRouter()
 
   if (router.isFallback) {