feat: enhance QR code plugin with web environment support and middleware integration

Author: PupilTong

.changeset/crazy-jeans-hunt.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/rspeedy": patch
+---
+
+fix: error `lynx.getJSModule` is not a function on web platform

.changeset/tricky-lamps-battle.md

@@ -0,0 +1,15 @@
+---
+"@lynx-js/qrcode-rsbuild-plugin": patch
+---
+
+feat: support web platform preview
+
+use rspeedy settings to enable Lynx Web Platform preview
+
+```js
+// rspeedy configurations
+environments:{
+  web:{},
+  lynx:{}
+}
+```

examples/react/lynx.config.js

@@ -5,6 +5,12 @@ import { defineConfig } from '@lynx-js/rspeedy';
 const enableBundleAnalysis = !!process.env['RSPEEDY_BUNDLE_ANALYSIS'];
 
 export default defineConfig({
+  source: {
+    entry: {
+      main: './src/index.tsx',
+      main2: './src/index.tsx',
+    },
+  },
   plugins: [
     pluginReactLynx(),
     pluginQRCode({
@@ -17,4 +23,8 @@ export default defineConfig({
   performance: {
     profile: enableBundleAnalysis,
   },
+  environments: {
+    web: {},
+    lynx: {},
+  },
 });

packages/rspeedy/core/src/plugins/dev.plugin.ts

@@ -12,6 +12,7 @@ import color from 'picocolors'
 import type { Dev } from '../config/dev/index.js'
 import type { Server } from '../config/server/index.js'
 import { debug } from '../debug.js'
+import { isLynx } from '../utils/is-lynx.js'
 import { ProvidePlugin } from '../webpack/ProvidePlugin.js'
 
 export function pluginDev(
@@ -119,53 +120,55 @@ export function pluginDev(
           searchParams.set('token', environment.webSocketToken)
         }
 
-        // dprint-ignore
-        chain
-          .resolve
-            .alias
-              .set(
-                'webpack/hot/log.js',
-                require.resolve('@rspack/core/hot/log', {
-                  paths: [rsbuildPath],
-                })
-              )
-              .set(
-                'webpack/hot/emitter.js',
-                require.resolve('@rspack/core/hot/emitter', {
-                  paths: [rsbuildPath],
-                }),
-              )
-              .set(
-                '@lynx-js/webpack-dev-transport/client',
-                `${require.resolve('@lynx-js/webpack-dev-transport/client')}?${searchParams.toString()}`
-              )
-              .set(
-                '@rspack/core/hot/dev-server',
-                require.resolve('@rspack/core/hot/dev-server', {
-                  paths: [rsbuildPath],
-                })
-              )
+        if (isLynx(environment)) {
+          // dprint-ignore
+          chain
+            .resolve
+              .alias
+                .set(
+                  'webpack/hot/log.js',
+                  require.resolve('@rspack/core/hot/log', {
+                    paths: [rsbuildPath],
+                  })
+                )
+                .set(
+                  'webpack/hot/emitter.js',
+                  require.resolve('@rspack/core/hot/emitter', {
+                    paths: [rsbuildPath],
+                  }),
+                )
+                .set(
+                  '@lynx-js/webpack-dev-transport/client',
+                  `${require.resolve('@lynx-js/webpack-dev-transport/client')}?${searchParams.toString()}`
+                )
+                .set(
+                  '@rspack/core/hot/dev-server',
+                  require.resolve('@rspack/core/hot/dev-server', {
+                    paths: [rsbuildPath],
+                  })
+                )
+              .end()
             .end()
-          .end()
-          .plugin('lynx.hmr.provide')
-            .use(ProvidePlugin, [
-              {
-                WebSocket: [
-                  options?.client?.websocketTransport ?? require.resolve('@lynx-js/websocket'),
-                  'default',
-                ],
-                __webpack_dev_server_client__: [
-                  require.resolve(
-                    './client/hmr/WebSocketClient.js',
-                    {
-                      paths: [rspeedyDir],
-                    },
-                  ),
-                  'default'
-                ],
-              }
-            ])
-          .end()
+            .plugin('lynx.hmr.provide')
+              .use(ProvidePlugin, [
+                {
+                  WebSocket: [
+                    options?.client?.websocketTransport ?? require.resolve('@lynx-js/websocket'),
+                    'default',
+                  ],
+                  __webpack_dev_server_client__: [
+                    require.resolve(
+                      './client/hmr/WebSocketClient.js',
+                      {
+                        paths: [rspeedyDir],
+                      },
+                    ),
+                    'default'
+                  ],
+                }
+              ])
+            .end()
+        }
       })
     },
   }

packages/rspeedy/core/test/plugins/dev.plugin.test.ts

@@ -99,6 +99,27 @@ describe('Plugins - Dev', () => {
     )
   })
 
+  test('no HMR when environment.web', async () => {
+    const rsbuild = await createStubRspeedy({
+      environments: {
+        web: {},
+      },
+    })
+
+    const config = await rsbuild.unwrapConfig()
+
+    expect(config.resolve?.alias).not.toHaveProperty(
+      '@rspack/core/hot/dev-server',
+      expect.stringContaining('hot/dev-server.js'.replaceAll('/', path.sep)),
+    )
+    expect(config.resolve?.alias).not.toHaveProperty(
+      '@lynx-js/webpack-dev-transport/client',
+      expect.stringContaining(
+        'packages/webpack/webpack-dev-transport'.replaceAll('/', path.sep),
+      ),
+    )
+  })
+
   test('not inject entry and provide variables in production', async () => {
     vi.stubEnv('NODE_ENV', 'production')
     const rsbuild = await createStubRspeedy({})

packages/rspeedy/plugin-qrcode/package.json

@@ -47,6 +47,9 @@
     "build": "rslib build",
     "test": "pnpm -w run test --project rspeedy/qrcode"
   },
+  "dependencies": {
+    "@lynx-js/web-rsbuild-server-middleware": "workspace:*"
+  },
   "devDependencies": {
     "@clack/prompts": "1.0.0-alpha.5",
     "@lynx-js/rspeedy": "workspace:*",

packages/rspeedy/plugin-qrcode/src/generateDevUrls.ts

@@ -12,7 +12,7 @@ export default function generateDevUrls(
   entry: string,
   schemaFn: CustomizedSchemaFn,
   port: number,
-): Record<string, string> {
+): { lynx: Record<string, string>, web: string } {
   const { dev: { assetPrefix } } = api.getNormalizedConfig()
   const { config } = api.useExposed<ExposedAPI>(
     Symbol.for('rspeedy.api'),
@@ -35,15 +35,35 @@ export default function generateDevUrls(
     name = filename
   }
 
+  // <port> is supported in `dev.assetPrefix`, we should replace it with the real port
+  let base: string
+  try {
+    base = new URL(
+      '',
+      assetPrefix.replaceAll('<port>', String(port)),
+    ).toString()
+  } catch {
+    base = `http://localhost:${port}/`
+  }
   const customSchema = schemaFn(
     new URL(
       name.replace('[name]', entry).replace('[platform]', 'lynx'),
-      // <port> is supported in `dev.assetPrefix`, we should replace it with the real port
-      assetPrefix.replaceAll('<port>', String(port)),
+      base,
     ).toString(),
   )
 
-  return typeof customSchema === 'string'
+  const outputPathname = new URL(
+    name.replace('[name]', entry).replace('[platform]', 'web'),
+    base,
+  ).pathname
+  const web = new URL(
+    `/web?casename=${outputPathname}`,
+    base,
+  ).toString()
+
+  const lynx = typeof customSchema === 'string'
     ? { default: customSchema }
     : customSchema
+
+  return { lynx, web }
 }

packages/rspeedy/plugin-qrcode/src/index.ts

@@ -10,6 +10,8 @@
 
 import type { EnvironmentContext, RsbuildPlugin } from '@rsbuild/core'
 
+import { createWebVirtualFilesMiddleware } from '@lynx-js/web-rsbuild-server-middleware'
+
 import { registerConsoleShortcuts } from './shortcuts.js'
 
 /**
@@ -101,8 +103,13 @@ export function pluginQRCode(
     name: 'lynx:rsbuild:qrcode',
     pre: ['lynx:rsbuild:api'],
     setup(api) {
+      api.onBeforeStartDevServer(({ environments, server }) => {
+        if (environments['web']) {
+          server.middlewares.use(createWebVirtualFilesMiddleware('/web'))
+        }
+      })
       api.onAfterStartProdServer(async ({ environments, port }) => {
-        await main(environments['lynx'], port)
+        await main(environments, port)
       })
 
       let printedQRCode = false
@@ -122,7 +129,7 @@ export function pluginQRCode(
 
         printedQRCode = true
 
-        await main(environments['lynx'], api.context.devServer.port)
+        await main(environments, api.context.devServer.port)
       })
 
       api.modifyRsbuildConfig((config) => {
@@ -138,23 +145,29 @@ export function pluginQRCode(
       })
 
       async function main(
-        environmentContext: EnvironmentContext | undefined,
+        environments: Record<string, EnvironmentContext>,
         port: number,
       ) {
-        if (!environmentContext) {
-          // Not lynx environment, skip print QRCode
-          return
-        }
-
-        const entries = Object.keys(environmentContext.entry)
-
-        if (entries.length === 0) {
+        const lynxEntries = Object.keys(environments['lynx']?.entry ?? {})
+        const webEntries = Object.keys(environments['web']?.entry ?? {})
+        const allEntries = [
+          ...new Set([
+            ...lynxEntries,
+            ...webEntries,
+          ]),
+        ]
+        if (allEntries.length === 0) {
+          // Not lynx or web environment, skip print
           return
         }
 
         const unregister = await registerConsoleShortcuts(
           {
-            entries,
+            entries: {
+              all: allEntries,
+              lynx: lynxEntries,
+              web: webEntries,
+            },
             api,
             port,
             schema,