chore(many): make documentation preview builds show console messages

INSTUI-4522

Author: ToMESSKa

.github/workflows/preview.yml

@@ -12,6 +12,8 @@ on:
 jobs:
   deploy-preview:
     runs-on: ubuntu-latest
+    env:
+      GITHUB_PULL_REQUEST_PREVIEW: 'true'
     steps:
       - uses: actions/checkout@v4
       - name: Install Node 22

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 } : {}
@@ -80,6 +83,9 @@ 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,

packages/console/src/console.ts

@@ -55,7 +55,13 @@ function logMessage(
   message: string,
   ...args: unknown[]
 ) {
-  if (process.env.NODE_ENV !== 'production' && !condition) {
+  const isGitHubPullRequestPreview =
+    typeof process !== 'undefined' &&
+    process?.env?.GITHUB_PULL_REQUEST_PREVIEW === 'true'
+  if (
+    (isGitHubPullRequestPreview || 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/emotion/src/InstUISettingsProvider/index.tsx

@@ -73,7 +73,11 @@ function InstUISettingsProvider({
 }: InstUIProviderProps) {
   const finalDir = dir || useContext(TextDirectionContext)
 
-  if (process.env.NODE_ENV !== 'production' && finalDir === 'auto') {
+  if (
+    (process.env.NODE_ENV !== 'production' ||
+      process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true') &&
+    finalDir === 'auto'
+  ) {
     console.warn(
       "'auto' is not an supported value for the 'dir' prop. Please pass 'ltr' or 'rtl'"
     )

packages/emotion/src/getTheme.ts

@@ -54,7 +54,10 @@ const getTheme =
     // we need to clone the ancestor theme not to override it
     let currentTheme
     if (Object.keys(ancestorTheme).length === 0) {
-      if (process.env.NODE_ENV !== 'production') {
+      if (
+        process.env.NODE_ENV !== 'production' ||
+        process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true'
+      ) {
         console.warn(
           'No theme provided for [InstUISettingsProvider], using default `canvas` theme.'
         )
@@ -78,7 +81,10 @@ const getTheme =
       // If the prop passed is not an Object, it will throw an error.
       // We are using this fail-safe here for the non-TS users,
       // because the whole page can break without a theme.
-      if (process.env.NODE_ENV !== 'production') {
+      if (
+        process.env.NODE_ENV !== 'production' ||
+        process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true'
+      ) {
         console.warn(
           'The `theme` property provided to InstUISettingsProvider is not a valid InstUI theme object.\ntheme: ',
           resolvedThemeOrOverride

packages/emotion/src/useTheme.ts

@@ -40,7 +40,10 @@ const useTheme = () => {
   // This reads the theme from Emotion's ThemeContext
   let theme = useEmotionTheme() as BaseThemeOrOverride
   if (isEmpty(theme)) {
-    if (process.env.NODE_ENV !== 'production') {
+    if (
+      process.env.NODE_ENV !== 'production' ||
+      process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true'
+    ) {
       console.warn(
         `No theme provided for [InstUISettingsProvider], using default <canvas> theme.`
       )

packages/ui-babel-preset/lib/index.js

@@ -108,7 +108,10 @@ module.exports = function (
     )
   }
 
-  if (opts.removeConsole) {
+  if (
+    process.env.GITHUB_PULL_REQUEST_PREVIEW !== 'true' &&
+    opts.removeConsole
+  ) {
     if (typeof opts.removeConsole === 'object') {
       plugins.push([
         require('babel-plugin-transform-remove-console'),

packages/ui-i18n/src/textDirectionContextConsumer.tsx

@@ -120,7 +120,11 @@ const textDirectionContextConsumer: TextDirectionContextConsumerType =
           return (
             <TextDirectionContext.Consumer>
               {(dir) => {
-                if (process.env.NODE_ENV !== 'production' && dir === 'auto') {
+                if (
+                  (process.env.NODE_ENV !== 'production' ||
+                    process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true') &&
+                  dir === 'auto'
+                ) {
                   console.warn(
                     "'auto' is not an supported value for the 'dir' prop. Please pass 'ltr' or 'rtl'"
                   )

packages/ui-view/src/View/index.tsx

@@ -94,7 +94,9 @@ class View extends Component<ViewProps> {
 
     let shouldLogError = true
     try {
-      shouldLogError = process.env.NODE_ENV !== 'production'
+      shouldLogError =
+        process.env.NODE_ENV !== 'production' ||
+        process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true'
     } catch (e) {
       if (e instanceof ReferenceError) {
         // if process is not available a ReferenceError is thrown