refactor: use next-debug-local (#583)

packages/app/next.config.js

@@ -1,3 +1,4 @@
+/* eslint @typescript-eslint/no-var-requires: "off" */
 const { getGitVersion, getCommitHash } = require('./scripts/gitInfo');
 const { dependencies } = require('./package.json');
 const path = require('node:path');
@@ -16,36 +17,8 @@ const nextConfig = {
     COMMIT_HASH: getCommitHash(),
     EDITOR_VERSION: dependencies['@blocksuite/editor'],
   },
-  transpilePackages: process.env.LOCAL_BLOCK_SUITE
-    ? ['@blocksuite/editor', '@blocksuite/blocks', '@blocksuite/store']
-    : [],
   webpack: config => {
-    if (
-      process.env.LOCAL_BLOCK_SUITE &&
-      path.isAbsolute(process.env.LOCAL_BLOCK_SUITE)
-    ) {
-      config.cache.buildDependencies.config.push(path.resolve(__dirname, '.env.local'))
-      config.resolve.alias['yjs'] = require.resolve('yjs');
-      config.resolve.extensionAlias = {
-        '.js': ['.js', '.ts', '.tsx'],
-      };
-      const baseDir = process.env.LOCAL_BLOCK_SUITE;
-      config.resolve.alias['@blocksuite/editor'] = path.resolve(
-        baseDir,
-        'packages',
-        'editor'
-      );
-      config.resolve.alias['@blocksuite/blocks'] = path.resolve(
-        baseDir,
-        'packages',
-        'blocks'
-      );
-      config.resolve.alias['@blocksuite/store'] = path.resolve(
-        baseDir,
-        'packages',
-        'store'
-      );
-    }
+    config.resolve.alias['yjs'] = require.resolve('yjs');
     return config;
   },
   images: {
@@ -62,4 +35,16 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+const baseDir = process.env.LOCAL_BLOCK_SUITE ?? '/';
+const withDebugLocal = require('next-debug-local')(
+  {
+    '@blocksuite/editor': path.resolve(baseDir, 'packages', 'editor'),
+    '@blocksuite/blocks': path.resolve(baseDir, 'packages', 'blocks'),
+    '@blocksuite/store': path.resolve(baseDir, 'packages', 'store'),
+  },
+  {
+    enable: path.isAbsolute(process.env.LOCAL_BLOCK_SUITE ?? ''),
+  }
+);
+
+module.exports = withDebugLocal(nextConfig);

packages/app/package.json

@@ -30,13 +30,14 @@
     "i18next": "^21.9.1",
     "lit": "^2.3.1",
     "next": "13.1.0",
-    "yjs": "^13.5.43",
+    "next-debug-local": "^0.1.5",
     "prettier": "^2.7.1",
     "quill": "^1.3.7",
     "quill-cursors": "^4.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-i18next": "^11.18.4"
+    "react-i18next": "^11.18.4",
+    "yjs": "^13.5.43"
   },
   "devDependencies": {
     "@types/node": "18.7.18",

pnpm-lock.yaml

@@ -68,6 +68,7 @@ importers:
       i18next: ^21.9.1
       lit: ^2.3.1
       next: 13.1.0
+      next-debug-local: ^0.1.5
       prettier: ^2.7.1
       quill: ^1.3.7
       quill-cursors: ^4.0.0
@@ -98,6 +99,7 @@ importers:
       i18next: 21.10.0
       lit: 2.4.0
       next: 13.1.0_biqbaboplfbrettd7655fr4n2y
+      next-debug-local: 0.1.5
       prettier: 2.7.1
       quill: 1.3.7
       quill-cursors: 4.0.0
@@ -5450,6 +5452,10 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
+  /next-debug-local/0.1.5:
+    resolution: {integrity: sha512-KnJPlmPJ1ObNxz3suK89H14RqdiSqfZhyca+PnDA+bqSUjjUDvQJmIOQi6CV6dtJpx9isdJu8Pi4reoxm3wyGQ==}
+    dev: false
+
   /next/12.3.1_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-l7bvmSeIwX5lp07WtIiP9u2ytZMv7jIeB8iacR28PuUEFG5j0HGAPnMqyG5kbZNBG2H7tRsrQ4HCjuMOPnANZw==}
     engines: {node: '>=12.22.0'}