Merge migrate-to-turbo-and-pnpm branch

Author: onnimonni

.gitignore

@@ -6,6 +6,7 @@ node_modules
 # builds
 build
 dist
+types
 
 # misc
 .DS_Store
@@ -24,3 +25,4 @@ yarn-error.log*
 
 .next/
 .vercel/
+.turbo/

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run pre-commit
+pnpm run pre-commit

contributing.md

@@ -4,39 +4,44 @@ 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 i
 ```
 
-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.
+This will install dependencies and link all of the local packages together using [pnpm workspaces](https://pnpm.io/workspaces). This includes the example projects which point to the local version of your packages. When publishing, `"foo": "workspace:*"` will be transformed to point to the current version.
 
-```bash
-yarn dev
-```
+### Running development tasks
 
-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.
+With development tasks, each package will be compiled into their respective `build` folders. Because they run `tsup --watch`, every time you make a change to one of the packages, the build will be updated automatically as long as this command is running.
 
-With `yarn dev` running in one tab, we recommend opening a second tab and navigating to the `examples/minimal` directory.
+We recommend running the `notion-x-example-minimal` example.
 
 ```bash
-cd examples/minimal
-yarn dev
+turbo dev --filter=notion-x-example-minimal...
 ```
 
-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 `turbo dev` with the package name 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 `workspace:*` on its `package.json`. The `...` at the end indicate that the `filter` should also select the package's dependencies.
 
 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 that's being used by the example, the `turbo dev` command that's running the example project will re-compile that package, and the 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 `turbo dev` commands and restart it.
+
+If you're seeing something unexpected while debugging one of the Next.js demos, try running `turbo clean` to refresh the cache before running `turbo dev` again.
 
-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.
+### Build task
 
-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.
+Simply run the following command from the repository's root
+
+```
+turbo build
+```

examples/cra/package.json

@@ -3,19 +3,21 @@
   "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": "GENERATE_SOURCEMAP=false react-scripts start",
+    "eject": "GENERATE_SOURCEMAP=false react-scripts eject",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "clean": "rm -rf build"
   },
   "dependencies": {
     "@types/node": "^16.11.26",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
-    "notion-types": "^6.16.1",
+    "notion-types": "workspace:*",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-notion-x": "^6.16.1",
+    "react-notion-x": "workspace:*",
     "react-scripts": "5.0.0",
     "typescript": "^4.6.3"
   },

examples/cra/public/index.html

@@ -41,8 +41,8 @@
       You can add webfonts, meta tags, or analytics to this file.
       The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
+      To begin the development, run `npm start` or `pnpm start`.
+      To create a production bundle, use `npm run build` or `pnpm build`.
     -->
   </body>
 </html>

examples/full/lib/notion.ts

@@ -28,5 +28,11 @@ export async function getPage(pageId: string): Promise<ExtendedRecordMap> {
 }
 
 export async function search(params: SearchParams): Promise<SearchResults> {
-  return notion.search(params)
+  if (notion instanceof NotionAPI) {
+    return notion.search(params)
+  } else {
+    console.error(
+      'NotionCompatAPI does not have a search method. Use NotionAPI instead.'
+    )
+  }
 }

examples/full/package.json

@@ -4,25 +4,29 @@
   "private": true,
   "type": "commonjs",
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
+    "clean": "rm -rf .next",
+    "dev": "next dev",
+    "lint": "next lint",
     "start": "next start",
     "analyze": "cross-env ANALYZE=true next build",
     "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
     "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build",
-    "deploy": "vercel deploy"
+    "vercel-deploy": "vercel deploy"
   },
   "dependencies": {
     "@notionhq/client": "^1.0.4",
     "classnames": "^2.3.1",
     "got": "^12.0.2",
     "lqip-modern": "^1.2.0",
     "next": "^12.1.0",
-    "notion-client": "^6.16.1",
-    "notion-compat": "^6.16.1",
-    "notion-utils": "^6.16.1",
+    "notion-client": "workspace:*",
+    "notion-compat": "workspace:*",
+    "notion-types": "workspace:*",
+    "notion-utils": "workspace:*",
     "p-map": "^5.3.0",
     "p-memoize": "^6.0.1",
+    "prismjs": "^1.27.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-notion-x": "^6.16.1",

examples/full/readme.md

@@ -27,7 +27,7 @@ First, run the development server:
 ```bash
 npm run dev
 # or
-yarn dev
+pnpm dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

examples/full/tsconfig.json

@@ -3,6 +3,7 @@
     "target": "es2016",
     "lib": ["dom", "esnext"],
     "allowJs": false,
+    "composite": false,
     "skipLibCheck": true,
     "strict": false,
     "forceConsistentCasingInFileNames": true,