build(ui-alerts,console): make documentation preview builds show console logs

INSTUI-4522

Author: ToMESSKa

.github/workflows/preview.yml

@@ -24,6 +24,8 @@ jobs:
       - name: Build docs-app
         run: npm run build:docs
         if: github.event.action != 'closed'
+        env:
+          GITHUB_PULL_REQUEST_PREVIEW: 'true'
       - uses: rossjrw/pr-preview-action@v1
         with:
           source-dir: ./packages/__docs__/__build__

packages/__docs__/webpack.config.mjs

@@ -30,9 +30,12 @@ import { globbySync } from 'globby'
 import { merge } from 'webpack-merge'
 import { processSingleFile } from './lib/build-docs.mjs'
 import resolve from './resolve.mjs'
+import webpack from 'webpack'
+import TerserPlugin from 'terser-webpack-plugin'
 
 const ENV = process.env.NODE_ENV || 'production'
 const DEBUG = process.env.DEBUG || ENV === 'development'
+const GITHUB_PULL_REQUEST_PREVIEW = process.env.GITHUB_PULL_REQUEST_PREVIEW || 'false'
 
 const outputPath = resolvePath(import.meta.dirname, '__build__')
 const resolveAliases = DEBUG ? { resolve } : {}
@@ -79,9 +82,22 @@ const config = merge(baseConfig, {
       template: './src/index.html',
       chunks: ['main'],
     }),
+    new webpack.DefinePlugin({
+      'process.env.GITHUB_PULL_REQUEST_PREVIEW': JSON.stringify(GITHUB_PULL_REQUEST_PREVIEW),
+    }),
   ],
   optimization: {
     usedExports: true,
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          compress: {
+            drop_console: GITHUB_PULL_REQUEST_PREVIEW !== 'true',
+          },
+        },
+      }),
+    ],
   },
   ...resolveAliases,
   mode: 'production',

packages/console/src/console.ts

@@ -55,7 +55,11 @@ function logMessage(
   message: string,
   ...args: unknown[]
 ) {
-  if (process.env.NODE_ENV !== 'production' && !condition) {
+  if (
+    (process.env.GITHUB_PULL_REQUEST_PREVIEW ||
+      process.env.NODE_ENV !== 'production') &&
+    !condition
+  ) {
     if (typeof console[level] === 'function') {
       const renderStack = withRenderStack ? getRenderStack() : ''
       //@ts-expect-error level can be 'constructor' which is not callable

packages/ui-alerts/src/Alert/index.tsx

@@ -308,6 +308,21 @@ class Alert extends Component<AlertProps, AlertState> {
   }
 
   render() {
+    // Test 1: Check if the code path exists
+    // eslint-disable-next-line no-console
+    console.log('TEST: This line should always appear')
+
+    // Test 2: Check if conditional code exists
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.log('TEST: This should only appear in development')
+    }
+
+    // Test 3: Force the condition to be runtime-evaluated
+    if (process.env.GITHUB_PULL_REQUEST_PREVIEW) {
+      // eslint-disable-next-line no-console
+      console.log('TEST: Runtime evaluation')
+    }
     const liveRegion = this.getLiveRegion()
     const screenReaderContent = liveRegion
       ? this.createScreenReaderPortal(liveRegion)