refactor: webpack config (#11421)

packages/frontend/component/.storybook/main.ts

@@ -54,18 +54,15 @@ export default {
           inlineSourcesContent: true,
         }),
       ],
-      define: {
-        'process.env.CAPTCHA_SITE_KEY': `"${process.env.CAPTCHA_SITE_KEY}"`,
-        ...Object.entries(
-          getBuildConfig(new Package('@affine/web'), {
-            mode: 'development',
-            channel: 'canary',
-          })
-        ).reduce((envs, [key, value]) => {
-          envs[`BUILD_CONFIG.${key}`] = JSON.stringify(value);
-          return envs;
-        }, {}),
-      },
+      define: Object.entries(
+        getBuildConfig(new Package('@affine/web'), {
+          mode: 'development',
+          channel: 'canary',
+        })
+      ).reduce((envs, [key, value]) => {
+        envs[`BUILD_CONFIG.${key}`] = JSON.stringify(value);
+        return envs;
+      }, {}),
     });
   },
 

packages/frontend/component/src/hooks/use-ref-effect.ts

@@ -7,7 +7,6 @@ import { useDebugValue, useEffect, useState } from 'react';
 /* eslint-disable react-hooks/exhaustive-deps */
 
 // the `process.env.NODE_ENV !== 'production'` condition is resolved by the build tool
-/* eslint-disable react-hooks/rules-of-hooks */
 
 const noop: (...args: any[]) => any = () => {};
 
@@ -67,7 +66,7 @@ export const useRefEffect = <T>(
 
   // Show the current ref value in development
   // in react dev tools
-  if (process.env.NODE_ENV !== 'production') {
+  if (BUILD_CONFIG.debug) {
     useDebugValue(internalRef.ref_.current);
   }
 

packages/frontend/component/src/lit-react/create-component.ts

@@ -7,8 +7,6 @@
 import type { PropertyDeclaration } from 'lit';
 import type React from 'react';
 
-const DEV_MODE = process.env.NODE_ENV !== 'production';
-
 type DistributiveOmit<T, K extends string | number | symbol> = T extends any
   ? K extends keyof T
     ? Omit<T, K>
@@ -245,7 +243,7 @@ export const createComponent = <
 }: Options<I, E>): ReactWebComponent<I, E> => {
   const eventProps = new Set(Object.keys(events ?? {}));
 
-  if (DEV_MODE) {
+  if (BUILD_CONFIG.debug) {
     for (const p of reservedReactProperties) {
       if (p in elementClass.prototype && !(p in HTMLElement.prototype)) {
         // Note, this effectively warns only for `ref` since the other