From 70ce8941b2c356dc94046bfca8544606ce9dc882 Mon Sep 17 00:00:00 2001 From: yousefed Date: Tue, 22 Oct 2024 07:00:29 +0200 Subject: [PATCH 1/4] change peerdep to react 19 --- package-lock.json | 32 +++++++++++-------------------- packages/ariakit/package.json | 8 +++----- packages/mantine/package.json | 6 ++---- packages/react/package.json | 6 ++---- packages/server-util/package.json | 6 ++---- packages/shadcn/package.json | 6 ++---- 6 files changed, 22 insertions(+), 42 deletions(-) diff --git a/package-lock.json b/package-lock.json index db74f13517..b15c7ec9c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28485,9 +28485,7 @@ "dependencies": { "@ariakit/react": "^0.4.3", "@blocknote/core": "^0.17.1", - "@blocknote/react": "^0.17.1", - "react": "^18", - "react-dom": "^18" + "@blocknote/react": "^0.17.1" }, "devDependencies": { "@types/react": "^18.0.25", @@ -28503,8 +28501,8 @@ "vite-plugin-externalize-deps": "^0.8.0" }, "peerDependencies": { - "react": "^18", - "react-dom": "^18" + "react": "18 - 19", + "react-dom": "18 - 19" } }, "packages/ariakit/node_modules/rimraf": { @@ -28630,8 +28628,6 @@ "@mantine/core": "^7.10.1", "@mantine/hooks": "^7.10.1", "@mantine/utils": "^6.0.21", - "react": "^18", - "react-dom": "^18", "react-icons": "^5.2.1" }, "devDependencies": { @@ -28648,8 +28644,8 @@ "vite-plugin-externalize-deps": "^0.8.0" }, "peerDependencies": { - "react": "^18", - "react-dom": "^18" + "react": "18 - 19", + "react-dom": "18 - 19" } }, "packages/mantine/node_modules/rimraf": { @@ -28680,8 +28676,6 @@ "@tiptap/core": "^2.7.1", "@tiptap/react": "^2.7.1", "lodash.merge": "^4.6.2", - "react": "^18", - "react-dom": "^18", "react-icons": "^5.2.1" }, "devDependencies": { @@ -28702,8 +28696,8 @@ "vitest": "^2.0.3" }, "peerDependencies": { - "react": "^18", - "react-dom": "^18" + "react": "18 - 19", + "react-dom": "18 - 19" } }, "packages/react/node_modules/rimraf": { @@ -28733,8 +28727,6 @@ "@tiptap/core": "^2.7.1", "@tiptap/pm": "^2.7.1", "jsdom": "^21.1.0", - "react": "^18", - "react-dom": "^18", "y-prosemirror": "1.2.12", "y-protocols": "^1.0.6", "yjs": "^13.6.15" @@ -28752,8 +28744,8 @@ "vitest": "^2.0.3" }, "peerDependencies": { - "react": "^18", - "react-dom": "^18" + "react": "18 - 19", + "react-dom": "18 - 19" } }, "packages/shadcn": { @@ -28777,8 +28769,6 @@ "clsx": "^2.1.1", "lucide-react": "^0.362.0", "postcss": "^8.4.38", - "react": "^18", - "react-dom": "^18", "react-hook-form": "^7.52.0", "tailwind-merge": "^2.3.0", "tailwindcss": "^3.4.3", @@ -28801,8 +28791,8 @@ "vite-plugin-externalize-deps": "^0.8.0" }, "peerDependencies": { - "react": "^18", - "react-dom": "^18" + "react": "18 - 19", + "react-dom": "18 - 19" } }, "packages/shadcn/node_modules/rimraf": { diff --git a/packages/ariakit/package.json b/packages/ariakit/package.json index 39902a602a..7d5c0c08fd 100644 --- a/packages/ariakit/package.json +++ b/packages/ariakit/package.json @@ -53,9 +53,7 @@ "dependencies": { "@ariakit/react": "^0.4.3", "@blocknote/core": "^0.17.1", - "@blocknote/react": "^0.17.1", - "react": "^18", - "react-dom": "^18" + "@blocknote/react": "^0.17.1" }, "devDependencies": { "@types/react": "^18.0.25", @@ -71,8 +69,8 @@ "vite-plugin-externalize-deps": "^0.8.0" }, "peerDependencies": { - "react": "^18", - "react-dom": "^18" + "react": "18 - 19", + "react-dom": "18 - 19" }, "eslintConfig": { "extends": [ diff --git a/packages/mantine/package.json b/packages/mantine/package.json index d20d7a1df1..544396c6a9 100644 --- a/packages/mantine/package.json +++ b/packages/mantine/package.json @@ -56,8 +56,6 @@ "@mantine/core": "^7.10.1", "@mantine/hooks": "^7.10.1", "@mantine/utils": "^6.0.21", - "react": "^18", - "react-dom": "^18", "react-icons": "^5.2.1" }, "devDependencies": { @@ -74,8 +72,8 @@ "vite-plugin-externalize-deps": "^0.8.0" }, "peerDependencies": { - "react": "^18", - "react-dom": "^18" + "react": "18 - 19", + "react-dom": "18 - 19" }, "eslintConfig": { "extends": [ diff --git a/packages/react/package.json b/packages/react/package.json index eede22d90f..9576b8ba59 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -58,8 +58,6 @@ "@tiptap/core": "^2.7.1", "@tiptap/react": "^2.7.1", "lodash.merge": "^4.6.2", - "react": "^18", - "react-dom": "^18", "react-icons": "^5.2.1" }, "devDependencies": { @@ -80,8 +78,8 @@ "vitest": "^2.0.3" }, "peerDependencies": { - "react": "^18", - "react-dom": "^18" + "react": "18 - 19", + "react-dom": "18 - 19" }, "eslintConfig": { "extends": [ diff --git a/packages/server-util/package.json b/packages/server-util/package.json index d2d4f8582f..55f614b0aa 100644 --- a/packages/server-util/package.json +++ b/packages/server-util/package.json @@ -55,8 +55,6 @@ "@tiptap/core": "^2.7.1", "@tiptap/pm": "^2.7.1", "jsdom": "^21.1.0", - "react": "^18", - "react-dom": "^18", "y-prosemirror": "1.2.12", "y-protocols": "^1.0.6", "yjs": "^13.6.15" @@ -74,8 +72,8 @@ "vitest": "^2.0.3" }, "peerDependencies": { - "react": "^18", - "react-dom": "^18" + "react": "18 - 19", + "react-dom": "18 - 19" }, "eslintConfig": { "extends": [ diff --git a/packages/shadcn/package.json b/packages/shadcn/package.json index 767bf92a8c..f6f215b16a 100644 --- a/packages/shadcn/package.json +++ b/packages/shadcn/package.json @@ -67,8 +67,6 @@ "clsx": "^2.1.1", "lucide-react": "^0.362.0", "postcss": "^8.4.38", - "react": "^18", - "react-dom": "^18", "react-hook-form": "^7.52.0", "tailwind-merge": "^2.3.0", "tailwindcss": "^3.4.3", @@ -91,8 +89,8 @@ "vite-plugin-externalize-deps": "^0.8.0" }, "peerDependencies": { - "react": "^18", - "react-dom": "^18" + "react": "18 - 19", + "react-dom": "18 - 19" }, "eslintConfig": { "extends": [ From 5d9fb0e802d72f077773ce7255c68d3131f0ddcb Mon Sep 17 00:00:00 2001 From: yousefed Date: Tue, 22 Oct 2024 07:00:42 +0200 Subject: [PATCH 2/4] make sure react/jsx-runtime is not in bundle --- packages/ariakit/vite.config.ts | 13 ++++++++----- packages/mantine/vite.config.ts | 13 ++++++++----- packages/react/vite.config.ts | 13 ++++++++----- packages/shadcn/vite.config.ts | 13 ++++++++----- 4 files changed, 32 insertions(+), 20 deletions(-) diff --git a/packages/ariakit/vite.config.ts b/packages/ariakit/vite.config.ts index a50e2823d2..1fc097d00d 100644 --- a/packages/ariakit/vite.config.ts +++ b/packages/ariakit/vite.config.ts @@ -33,11 +33,14 @@ export default defineConfig((conf) => ({ rollupOptions: { // make sure to externalize deps that shouldn't be bundled // into your library - external: Object.keys({ - ...pkg.dependencies, - ...pkg.peerDependencies, - ...pkg.devDependencies, - }), + external: [ + ...Object.keys({ + ...pkg.dependencies, + ...pkg.peerDependencies, + ...pkg.devDependencies, + }), + "react/jsx-runtime", + ], output: { // Provide global variables to use in the UMD build // for externalized deps diff --git a/packages/mantine/vite.config.ts b/packages/mantine/vite.config.ts index 0e9e1ed2f5..f1989f5e30 100644 --- a/packages/mantine/vite.config.ts +++ b/packages/mantine/vite.config.ts @@ -33,11 +33,14 @@ export default defineConfig((conf) => ({ rollupOptions: { // make sure to externalize deps that shouldn't be bundled // into your library - external: Object.keys({ - ...pkg.dependencies, - ...pkg.peerDependencies, - ...pkg.devDependencies, - }), + external: [ + ...Object.keys({ + ...pkg.dependencies, + ...pkg.peerDependencies, + ...pkg.devDependencies, + }), + "react/jsx-runtime", + ], output: { // Provide global variables to use in the UMD build // for externalized deps diff --git a/packages/react/vite.config.ts b/packages/react/vite.config.ts index 802a757bfe..78c2655ff0 100644 --- a/packages/react/vite.config.ts +++ b/packages/react/vite.config.ts @@ -32,11 +32,14 @@ export default defineConfig((conf) => ({ rollupOptions: { // make sure to externalize deps that shouldn't be bundled // into your library - external: Object.keys({ - ...pkg.dependencies, - ...pkg.peerDependencies, - ...pkg.devDependencies, - }), + external: [ + ...Object.keys({ + ...pkg.dependencies, + ...pkg.peerDependencies, + ...pkg.devDependencies, + }), + "react/jsx-runtime", + ], output: { // Provide global variables to use in the UMD build // for externalized deps diff --git a/packages/shadcn/vite.config.ts b/packages/shadcn/vite.config.ts index 346fed5e93..d187670c9c 100644 --- a/packages/shadcn/vite.config.ts +++ b/packages/shadcn/vite.config.ts @@ -36,11 +36,14 @@ export default defineConfig((conf) => ({ rollupOptions: { // make sure to externalize deps that shouldn't be bundled // into your library - external: Object.keys({ - ...pkg.dependencies, - ...pkg.peerDependencies, - ...pkg.devDependencies, - }), + external: [ + ...Object.keys({ + ...pkg.dependencies, + ...pkg.peerDependencies, + ...pkg.devDependencies, + }), + "react/jsx-runtime", + ], output: { // Provide global variables to use in the UMD build // for externalized deps From aa620df67f1a176de3f524c72414d4dc32006e18 Mon Sep 17 00:00:00 2001 From: yousefed Date: Tue, 22 Oct 2024 07:05:01 +0200 Subject: [PATCH 3/4] update docs --- docs/pages/docs/advanced/nextjs.mdx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/docs/pages/docs/advanced/nextjs.mdx b/docs/pages/docs/advanced/nextjs.mdx index 2b122e968f..3331bcc86c 100644 --- a/docs/pages/docs/advanced/nextjs.mdx +++ b/docs/pages/docs/advanced/nextjs.mdx @@ -29,14 +29,26 @@ export default function Editor() { ## Import as dynamic -Now, you can use [Dynamic Imports](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) to make sure BlockNote is only imported on the client-side. +In the same directory, create a new file called `DyanmicEditor.tsx`: +Here, we will use [Dynamic Imports](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) to make sure BlockNote is only imported on the client-side. You can import the component we just created above using `next/dynamic` in your page: ```typescript jsx +"use client"; + import dynamic from "next/dynamic"; -const Editor = dynamic(() => import("../components/Editor"), { ssr: false }); +export const Editor = dynamic(() => import("./Editor"), { ssr: false }); +``` + +## Import in a page / app + +Now, you can import the dynamic editor in your page or app: + +```typescript jsx +import { Editor } from "../components/DynamicEditor"; + function App() { return ( From 6058773f663d1a1278a340b694fea8403f666ad2 Mon Sep 17 00:00:00 2001 From: yousefed Date: Tue, 22 Oct 2024 07:12:44 +0200 Subject: [PATCH 4/4] fix lint --- .eslintrc.js | 2 +- package-lock.json | 51 ++++++++++++++++++++++++++++------------------- package.json | 4 ++-- 3 files changed, 34 insertions(+), 23 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index f0aaeca803..1413ba09c4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -33,8 +33,8 @@ module.exports = { "error", { devDependencies: true, + peerDependencies: true, optionalDependencies: false, - peerDependencies: false, bundledDependencies: false, }, ], diff --git a/package-lock.json b/package-lock.json index b15c7ec9c6..61cd57dc03 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "@typescript-eslint/parser": "^5.5.0", "eslint": "^8.22.0", "eslint-config-react-app": "^7.0.0", - "eslint-plugin-import": "^2.28.0", + "eslint-plugin-import": "^2.31.0", "glob": "^10.3.10", "lerna": "^5.4.0", "patch-package": "^6.4.7", @@ -8055,6 +8055,12 @@ "win32" ] }, + "node_modules/@rtsao/scc": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz", + "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==", + "dev": true + }, "node_modules/@rushstack/eslint-patch": { "version": "1.10.3", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.3.tgz", @@ -13785,9 +13791,9 @@ } }, "node_modules/eslint-module-utils": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz", - "integrity": "sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==", + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz", + "integrity": "sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==", "dev": true, "dependencies": { "debug": "^3.2.7" @@ -13829,34 +13835,36 @@ } }, "node_modules/eslint-plugin-import": { - "version": "2.29.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz", - "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==", + "version": "2.31.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz", + "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==", "dev": true, "dependencies": { - "array-includes": "^3.1.7", - "array.prototype.findlastindex": "^1.2.3", + "@rtsao/scc": "^1.1.0", + "array-includes": "^3.1.8", + "array.prototype.findlastindex": "^1.2.5", "array.prototype.flat": "^1.3.2", "array.prototype.flatmap": "^1.3.2", "debug": "^3.2.7", "doctrine": "^2.1.0", "eslint-import-resolver-node": "^0.3.9", - "eslint-module-utils": "^2.8.0", - "hasown": "^2.0.0", - "is-core-module": "^2.13.1", + "eslint-module-utils": "^2.12.0", + "hasown": "^2.0.2", + "is-core-module": "^2.15.1", "is-glob": "^4.0.3", "minimatch": "^3.1.2", - "object.fromentries": "^2.0.7", - "object.groupby": "^1.0.1", - "object.values": "^1.1.7", + "object.fromentries": "^2.0.8", + "object.groupby": "^1.0.3", + "object.values": "^1.2.0", "semver": "^6.3.1", + "string.prototype.trimend": "^1.0.8", "tsconfig-paths": "^3.15.0" }, "engines": { "node": ">=4" }, "peerDependencies": { - "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8" + "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9" } }, "node_modules/eslint-plugin-import/node_modules/debug": { @@ -16904,11 +16912,14 @@ } }, "node_modules/is-core-module": { - "version": "2.13.1", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", - "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", + "version": "2.15.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz", + "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==", "dependencies": { - "hasown": "^2.0.0" + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" diff --git a/package.json b/package.json index a3f0111f29..5c1d535fae 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "@typescript-eslint/parser": "^5.5.0", "eslint": "^8.22.0", "eslint-config-react-app": "^7.0.0", - "eslint-plugin-import": "^2.28.0", + "eslint-plugin-import": "^2.31.0", "glob": "^10.3.10", "lerna": "^5.4.0", "patch-package": "^6.4.7", @@ -34,4 +34,4 @@ "postpublish": "rm -rf packages/core/README.md && rm -rf packages/react/README.md", "clean": "lerna run --stream clean" } -} \ No newline at end of file +}