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

@@ -17,4 +17,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(
@@ -149,7 +150,7 @@ export function pluginDev(
           .end()
           .plugin('lynx.hmr.provide')
             .use(ProvidePlugin, [
-              {
+              isLynx(environment) ? {
                 WebSocket: [
                   options?.client?.websocketTransport ?? require.resolve('@lynx-js/websocket'),
                   'default',
@@ -163,6 +164,16 @@ export function pluginDev(
                   ),
                   '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 Websocket class injected for web', async () => {
+    const rsbuild = await createStubRspeedy({
+      environments: {
+        web: {},
+      },
+    })
+
+    await rsbuild.unwrapConfig()
+
+    const { ProvidePlugin } = await import('../../src/webpack/ProvidePlugin.js')
+
+    expect(vi.isMockFunction(ProvidePlugin)).toBe(true)
+    expect(vi.mocked(ProvidePlugin)).toBeCalled()
+    expect(ProvidePlugin).toBeCalledWith({
+      __webpack_dev_server_client__: [
+        require.resolve('../../client/hmr/WebSocketClient.js'),
+        'default',
+      ],
+    })
+  })
+
   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,

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

@@ -13,14 +13,18 @@ const gExistingShortcuts = new WeakSet<Options>()
 
 interface Options {
   api: RsbuildPluginAPI
-  entries: string[]
+  entries: {
+    all: string[]
+    lynx: string[]
+    web: string[]
+  }
   schema: CustomizedSchemaFn
   port: number
   customShortcuts?: Record<
     string,
     { value: string, label: string, hint?: string, action?(): Promise<void> }
   >
-  onPrint?: ((url: string) => Promise<void>) | undefined
+  onPrint?: ((lynx?: string, web?: string) => Promise<void>) | undefined
 }
 
 export async function registerConsoleShortcuts(
@@ -32,22 +36,29 @@ export async function registerConsoleShortcuts(
     import('./showQRCode.js'),
   ])
 
-  const currentEntry = options.entries[0]!
+  // keep the default entry to be lynx explorer entry if exists
+  const currentEntry = (options.entries.lynx[0] ?? options.entries.web[0])!
   const devUrls = generateDevUrls(
     options.api,
     currentEntry,
     options.schema,
     options.port,
   )
 
-  const value: string | symbol = Object.values(devUrls)[0]!
-  await options.onPrint?.(value)
-  showQRCode(value)
+  const hasLynxEntry = options.entries.lynx.includes(currentEntry)
+  const hasWebEntry = options.entries.web.includes(currentEntry)
+  const lynxUrl = hasLynxEntry ? Object.values(devUrls.lynx)[0] : undefined
+  const webUrl = hasWebEntry ? devUrls.web : undefined
+  await options.onPrint?.(
+    lynxUrl,
+    webUrl,
+  )
+  showQRCode(lynxUrl, webUrl)
 
   gExistingShortcuts.add(options)
 
   // We should not `await` on this since it would block the NodeJS main thread.
-  void loop(options, value, devUrls)
+  void loop(options, { lynx: lynxUrl, web: webUrl }, devUrls, currentEntry)
 
   function off() {
     gExistingShortcuts.delete(options)
@@ -57,8 +68,9 @@ export async function registerConsoleShortcuts(
 
 async function loop(
   options: Options,
-  value: string | symbol,
-  devUrls: Record<string, string>,
+  value: { lynx: string | symbol | undefined, web: string | undefined },
+  devUrls: { lynx: Record<string, string | symbol>, web: string },
+  currentEntry: string,
 ) {
   const [
     { autocomplete, select, selectKey, isCancel, cancel },
@@ -70,10 +82,11 @@ async function loop(
 
   const selectFn = (length: number) => length > 5 ? autocomplete : select
 
-  let currentEntry = options.entries[0]!
-  let currentSchema = Object.keys(devUrls)[0]!
+  let currentSchema = Object.keys(devUrls.lynx)[0]!
 
-  while (!isCancel(value)) {
+  while (
+    !(value.lynx && isCancel(value.lynx) || value.web && isCancel(value.web))
+  ) {
     const name = await selectKey({
       message: 'Usage',
       options: [
@@ -95,18 +108,21 @@ async function loop(
       break
     }
     if (name === 'r') {
-      const selection = await selectFn(options.entries.length)({
+      const selection = await selectFn(options.entries.all.length)({
         message: 'Select entry',
-        options: options.entries.map(entry => ({
-          value: entry,
-          label: entry,
-          hint: generateDevUrls(
+        options: options.entries.all.map(entry => {
+          const newDevUrls = generateDevUrls(
             options.api,
             entry,
             options.schema,
             options.port,
-          )[currentSchema]!,
-        })),
+          )
+          return {
+            value: entry,
+            label: entry,
+            hint: (newDevUrls.lynx[currentSchema] ?? newDevUrls.web),
+          }
+        }),
         initialValue: currentEntry,
       })
       if (isCancel(selection)) {
@@ -121,9 +137,9 @@ async function loop(
         options.schema,
         options.port,
       )
-      const selection = await selectFn(Object.keys(devUrls).length)({
+      const selection = await selectFn(Object.keys(devUrls.lynx).length)({
         message: 'Select schema',
-        options: Object.entries(devUrls).map(([name, url]) => ({
+        options: Object.entries(devUrls.lynx).map(([name, url]) => ({
           value: name,
           label: name,
           hint: url,
@@ -138,8 +154,8 @@ async function loop(
     } else if (options.customShortcuts?.[name]) {
       await options.customShortcuts[name].action?.()
     }
-    await options.onPrint?.(value)
-    showQRCode(value)
+    await options.onPrint?.(value.lynx as string | undefined, value.web)
+    showQRCode(value.lynx as string, value.web)
   }
 
   // If the `options` is not deleted from `gExistingShortcuts`, means that this is an explicitly
@@ -151,13 +167,17 @@ async function loop(
 
   return
 
-  function getCurrentUrl(): string {
-    return generateDevUrls(
+  function getCurrentUrl(): {
+    lynx: string | undefined
+    web: string | undefined
+  } {
+    const { lynx, web } = generateDevUrls(
       options.api,
       currentEntry,
       options.schema,
       options.port,
-    )[currentSchema]!
+    )
+    return { lynx: lynx[currentSchema], web }
   }
 
   function exit(code?: number) {

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

@@ -5,8 +5,13 @@ import { log } from '@clack/prompts'
 import color from 'picocolors'
 import { renderUnicodeCompact } from 'uqr'
 
-export default function showQRCode(url: string): void {
-  log.info(color.green('Scan with Lynx'))
-  log.success(renderUnicodeCompact(url))
-  log.success(url)
+export default function showQRCode(lynxUrl?: string, webUrl?: string): void {
+  if (lynxUrl) {
+    log.info(color.green('Scan with Lynx'))
+    log.success(renderUnicodeCompact(lynxUrl))
+    log.success('Lynx Explorer: ' + lynxUrl)
+  }
+  if (webUrl) {
+    log.success('Lynx Web Platform: ' + webUrl)
+  }
 }