fix(v6.4.0 RC): conditionally remove SSELink from the bundle

packages/core/config/webpack.common.js

@@ -340,6 +340,11 @@ module.exports = (webpackEnv) => {
                 filename: 'static/media/[name].[contenthash:8][ext]',
               },
             },
+            // (8)
+            !redwoodConfig.experimental.realtime.enabled && {
+              test: require.resolve('@redwoodjs/web/dist/apollo/sseLink'),
+              use: require.resolve('null-loader'),
+            },
           ].filter(Boolean),
         },
       ],

packages/project-config/src/__tests__/config.test.ts

@@ -59,6 +59,9 @@ describe('getConfig', () => {
             "enabled": false,
             "wrapApi": true,
           },
+          "realtime": {
+            "enabled": false,
+          },
           "rsc": {
             "enabled": false,
           },

packages/project-config/src/config.ts

@@ -111,6 +111,9 @@ export interface Config {
     rsc: {
       enabled: boolean
     }
+    realtime: {
+      enabled: boolean
+    }
   }
 }
 
@@ -193,6 +196,9 @@ const DEFAULT_CONFIG: Config = {
     rsc: {
       enabled: false,
     },
+    realtime: {
+      enabled: false,
+    },
   },
 }
 

packages/vite/src/index.ts

@@ -276,6 +276,12 @@ export default function redwoodPluginVite(): PluginOption[] {
         id: /@redwoodjs\/router\/dist\/splash-page/,
       },
     ]),
+    !rwConfig.experimental.realtime.enabled &&
+      removeFromBundle([
+        {
+          id: /@redwoodjs\/web\/dist\/apollo\/sseLink/,
+        },
+      ]),
     react({
       babel: {
         ...getWebSideDefaultBabelConfig({

packages/vite/src/plugins/vite-plugin-remove-from-bundle.ts

@@ -31,7 +31,7 @@ export default function removeFromBundle(
 
 // Currently configured for CJS only.
 const EMPTY_MODULE = {
-  code: `module.exports = null`,
+  code: `module.exports = {}`,
 }
 
 export function excludeOnMatch(modulesToExclude: ModulesToExclude, id: string) {

packages/web/src/apollo/index.tsx

@@ -50,7 +50,7 @@ export type {
 
 export { useCache }
 
-export { fragmentRegistry, registerFragment, registerFragments, SSELink }
+export { fragmentRegistry, registerFragment, registerFragments }
 
 export type ApolloClientCacheConfig = apolloClient.InMemoryCacheConfig
 
@@ -212,23 +212,26 @@ const ApolloProviderWithFetchConfig: React.FunctionComponent<{
 
   // Our terminating link needs to be smart enough to handle subscriptions, and if the GraphQL query
   // is subscription it needs to use the SSELink (server sent events link).
-  const httpOrSSELink = apolloClient.split(
-    ({ query }) => {
-      const definition = getMainDefinition(query)
-
-      return (
-        definition.kind === 'OperationDefinition' &&
-        definition.operation === 'subscription'
-      )
-    },
-    new SSELink({
-      url: uri,
-      auth: { authProviderType, tokenFn: getToken },
-      httpLinkConfig,
-      headers,
-    }),
-    httpLink
-  )
+  const httpOrSSELink =
+    typeof SSELink !== 'undefined'
+      ? apolloClient.split(
+          ({ query }) => {
+            const definition = getMainDefinition(query)
+
+            return (
+              definition.kind === 'OperationDefinition' &&
+              definition.operation === 'subscription'
+            )
+          },
+          new SSELink({
+            url: uri,
+            auth: { authProviderType, tokenFn: getToken },
+            httpLinkConfig,
+            headers,
+          }),
+          httpLink
+        )
+      : httpLink
 
   // The order here is important. The last link *must* be a terminating link like HttpLink or SSELink.
   const redwoodApolloLinks: RedwoodApolloLinks = [

tasks/smoke-tests/shared/common.ts

@@ -4,43 +4,50 @@ import type { PlaywrightTestArgs } from '@playwright/test'
 export async function smokeTest({ page }: PlaywrightTestArgs) {
   await page.goto('/')
 
-  // Check that the blog posts are being loaded.
-  // Avoid checking titles because we edit them in other tests.
-  await page.textContent('text=Meh waistcoat succulents umami')
-  await page.textContent('text=Raclette shoreditch before they sold out lyft.')
-  await page.textContent(
-    'text=baby single- origin coffee kickstarter lo - fi paleo skateboard.'
-  )
-
+  // Check that the blog posts load. We're deliberately not checking their titles because we edit them in other tests.
+  await expect(
+    page.getByText(
+      'Meh waistcoat succulents umami asymmetrical, hoodie post-ironic paleo chillwave '
+    )
+  ).toBeVisible()
+  await expect(
+    page.getByText(
+      'Raclette shoreditch before they sold out lyft. Ethical bicycle rights meh prism '
+    )
+  ).toBeVisible()
+  await expect(
+    page.getByText(
+      "I'm baby single- origin coffee kickstarter lo - fi paleo skateboard.Tumblr hasht"
+    )
+  ).toBeVisible()
+
+  // CSS checks. We saw this break when we switched bundlers, so while it's not comprehensive, it's at least something.
+  // While playwright recommends against using locators that are too-closely tied to the DOM, `#redwood-app` is a stable ID.
   const bgBlue700 = 'rgb(29, 78, 216)'
-  expect(
-    await page
-      .locator('#redwood-app > header')
-      .evaluate((e) => window.getComputedStyle(e).backgroundColor)
-  ).toBe(bgBlue700)
+  expect(page.locator('#redwood-app > header')).toHaveCSS(
+    'background-color',
+    bgBlue700
+  )
 
   const textBlue400 = 'rgb(96, 165, 250)'
-  expect(
-    await page
-      .locator('header a')
-      .filter({ hasText: 'Redwood Blog' })
-      .evaluate((e) => window.getComputedStyle(e).color)
-  ).toBe(textBlue400)
-
-  // Click text=About
-  await page.click('text=About')
+  expect(await page.getByRole('link', { name: 'Redwood Blog' })).toHaveCSS(
+    'color',
+    textBlue400
+  )
 
+  // Check the about page.
+  await page.getByRole('link', { name: 'About', exact: true }).click()
   expect(page.url()).toBe('http://localhost:8910/about')
-
-  await page.textContent(
-    'text=This site was created to demonstrate my mastery of Redwood: Look on my works, ye'
+  await page.getByText(
+    'This site was created to demonstrate my mastery of Redwood: Look on my works, ye'
   )
-  // Click text=Contact
-  await page.click('text=Contact')
+
+  // Check the contact us page.
+  await page.getByRole('link', { name: 'Contact Us' }).click()
   expect(page.url()).toBe('http://localhost:8910/contact')
 
-  // Click text=Admin
-  await page.click('text=Admin')
+  // Check the admin page.
+  await page.getByRole('link', { name: 'Admin' }).click()
   expect(page.url()).toBe('http://localhost:8910/posts')
 }