feat(web): supports rsbuild plugin for Web projects in Lynx Web Platform

.changeset/modern-peaches-marry.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-platform-rsbuild-plugin": minor
+---
+
+feat: Provides Rsbuild plugin for Web projects in Lynx Web Platform, currently supports polyfill about lynx.

.github/workflows/test.yml

@@ -236,6 +236,27 @@ jobs:
         export ALL_ON_UI=true
         pnpm --filter @lynx-js/web-tests run test --reporter='github,dot,junit,html'
         pnpm --filter @lynx-js/web-tests run coverage:ci
+  test-web-platform:
+    needs: build
+    uses: ./.github/workflows/workflow-test.yml
+    secrets:
+      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+    with:
+      runs-on: lynx-ubuntu-24.04-medium
+      run: >
+        pnpm
+        --filter @lynx-js/web-platform-rsbuild-plugin
+        run test
+        --reporter=github-actions
+        --reporter=dot
+        --reporter=junit
+        --outputFile=test-report.junit.xml
+        --coverage.reporter='json'
+        --coverage.reporter='text'
+        --test-timeout=50000
+        --no-cache
+        --logHeapUsage
+        --silent
   lighthouse:
     needs: build
     uses: ./.github/workflows/workflow-test.yml
@@ -286,6 +307,7 @@ jobs:
       - code-style-check
       - playwright-linux
       - playwright-linux-all-on-ui
+      - test-web-platform
       - test-plugins
       - test-publish
       - test-react

.gitignore

@@ -45,4 +45,7 @@ target/
 .pnpm-store
 
 # lighthouse-ci
-.lighthouseci
+.lighthouseci
+
+# rslib
+.rslib

packages/web-platform/web-explorer/package.json

@@ -20,7 +20,8 @@
   ],
   "scripts": {
     "build": "rsbuild build",
-    "dev": "rsbuild dev"
+    "dev": "rsbuild dev",
+    "build:rsdoctor": "RSDOCTOR=true rsbuild build"
   },
   "dependencies": {
     "qr-scanner": "^1.4.2"
@@ -30,7 +31,9 @@
     "@lynx-js/lynx-core": "0.1.2",
     "@lynx-js/web-core": "workspace:*",
     "@lynx-js/web-elements": "workspace:*",
+    "@lynx-js/web-platform-rsbuild-plugin": "workspace:*",
     "@rsbuild/core": "catalog:rsbuild",
+    "@rsdoctor/rspack-plugin": "1.0.2",
     "tslib": "^2.8.1"
   }
 }

packages/web-platform/web-explorer/rsbuild.config.ts

@@ -1,19 +1,23 @@
 import { defineConfig } from '@rsbuild/core';
 import { codecovWebpackPlugin } from '@codecov/webpack-plugin';
+import { pluginWebPlatform } from '@lynx-js/web-platform-rsbuild-plugin';
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
 const codecovEnabled = !!process.env.CI;
 console.info('codecov enabled:', codecovEnabled);
 export default defineConfig({
   source: {
     entry: {
       index: './index.ts',
     },
+    include: [/web/],
   },
   output: {
     target: 'web',
     distPath: {
       root: 'dist',
     },
     filenameHash: false,
+    overrideBrowserslist: ['Chrome > 118'],
   },
   dev: {
     writeToDisk: true,
@@ -37,6 +41,12 @@ export default defineConfig({
             sha: process.env.GITHUB_SHA,
           },
         }),
+        process.env.RSDOCTOR === 'true'
+        && new RsdoctorRspackPlugin({
+          supports: {
+            generateTileGraph: true,
+          },
+        }),
       ],
     },
   },
@@ -46,4 +56,5 @@ export default defineConfig({
     },
     profile: true,
   },
+  plugins: [pluginWebPlatform({ polyfill: false })],
 });

packages/web-platform/web-rsbuild-plugin/README.md

@@ -0,0 +1,14 @@
+# @lynx-js/web-platform-rsbuild-plugin
+
+Lynx3 Web Platform rsbuild plugin
+
+## Usage
+
+```javascript
+import { pluginWebPlatform } from '@lynx-js/web-platform-rsbuild-plugin';
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  plugins: [pluginWebPlatform()],
+});
+```

packages/web-platform/web-rsbuild-plugin/api-extractor.json

@@ -0,0 +1,6 @@
+/**
+ * Config file for API Extractor.  For more info, please visit: https://api-extractor.com
+ */
+{
+  "extends": "../../../api-extractor.json",
+}

packages/web-platform/web-rsbuild-plugin/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@lynx-js/web-platform-rsbuild-plugin",
+  "version": "0.0.0",
+  "private": false,
+  "description": "A rsbuild plugin for Web projects in Lynx Web Platform",
+  "keywords": [
+    "rsbuild",
+    "Lynx",
+    "Web Platform"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lynx-family/lynx-stack.git",
+    "directory": "packages/web-platform/web-rsbuild-plugin"
+  },
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "test": "vitest"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "catalog:",
+    "@rsbuild/core": "catalog:rsbuild",
+    "@rslib/core": "^0.6.7",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.2"
+  },
+  "peerDependencies": {
+    "@rsbuild/core": "*"
+  }
+}

packages/web-platform/web-rsbuild-plugin/rslib.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  lib: [
+    { format: 'esm', syntax: 'es2022', dts: { bundle: true } },
+  ],
+});

packages/web-platform/web-rsbuild-plugin/src/index.ts

@@ -0,0 +1,11 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+/**
+ * @packageDocumentation
+ *
+ * A rsbuild plugin that integrates with Web Platform.
+ */
+
+export { pluginWebPlatform } from './pluginWebPlatform.js';

packages/web-platform/web-rsbuild-plugin/src/pluginWebPlatform.ts

@@ -0,0 +1,67 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import type { RsbuildPlugin } from '@rsbuild/core';
+
+/**
+ * The options for {@link pluginWebPlatform}.
+ *
+ * @public
+ */
+export interface PluginWebPlatformOptions {
+  /**
+   * Whether to polyfill the packages about Lynx Web Platform.
+   *
+   * If it is true, @lynx-js will be compiled and polyfills will be added
+   *
+   * @default true
+   */
+  polyfill?: boolean;
+}
+
+/**
+ * Create a rsbuild plugin for Lynx Web Platform.
+ *
+ * @example
+ * ```ts
+ * // rsbuild.config.ts
+ * import { pluginWebPlatform } from '@lynx-js/web-platform-rsbuild-plugin'
+ * import { defineConfig } from '@rsbuild/core';
+ *
+ * export default defineConfig({
+ *   plugins: [pluginWebPlatform()],
+ * })
+ * ```
+ *
+ * @public
+ */
+export function pluginWebPlatform(
+  userOptions?: PluginWebPlatformOptions,
+): RsbuildPlugin {
+  return {
+    name: 'lynx:web-platform',
+    async setup(api) {
+      const defaultPluginOptions = {
+        polyfill: true,
+      };
+      const options = Object.assign({}, defaultPluginOptions, userOptions);
+
+      api.modifyRsbuildConfig(config => {
+        if (options.polyfill === true) {
+          config.source = {
+            ...config.source,
+            include: [
+              ...(config.source?.include ?? []),
+              /node_modules[\\/]@lynx-js[\\/]/,
+            ],
+          };
+          config.output = {
+            ...config.output,
+            polyfill: 'usage',
+          };
+        }
+      });
+    },
+  };
+}

packages/web-platform/web-rsbuild-plugin/tests/__snapshots__/config.test.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Config > basic config 1`] = `
+[
+  /node_modules\\[\\\\\\\\/\\]@lynx-js\\[\\\\\\\\/\\]/,
+]
+`;

packages/web-platform/web-rsbuild-plugin/tests/config.test.ts

@@ -0,0 +1,21 @@
+import { createRsbuild } from '@rsbuild/core';
+import { describe, expect, test, vi } from 'vitest';
+import { pluginWebPlatform } from '../src/index.js';
+
+describe('Config', () => {
+  test('basic config', async () => {
+    const rsbuild = await createRsbuild({
+      rsbuildConfig: {
+        plugins: [
+          pluginWebPlatform(),
+        ],
+      },
+    });
+
+    await rsbuild.initConfigs();
+    const rsbuildConfig = rsbuild.getRsbuildConfig();
+
+    expect(rsbuildConfig.source?.include).toMatchSnapshot();
+    expect(rsbuildConfig.output?.polyfill).toBe('usage');
+  });
+});

packages/web-platform/web-rsbuild-plugin/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "lib": ["ESNext"],
+    "noUnusedParameters": false,
+    "noImplicitReturns": false,
+  },
+  "include": ["src"],
+}

packages/web-platform/web-rsbuild-plugin/turbo.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "extends": [
+    "//"
+  ],
+  "tasks": {
+    "build": {
+      "dependsOn": [
+        "^build"
+      ],
+      "inputs": [
+        "src"
+      ],
+      "outputs": [
+        "dist"
+      ]
+    }
+  }
+}

packages/web-platform/web-rsbuild-plugin/vitest.config.ts

@@ -0,0 +1,15 @@
+import { defineProject } from 'vitest/config';
+import type { UserWorkspaceConfig } from 'vitest/config';
+
+const config: UserWorkspaceConfig = defineProject({
+  test: {
+    name: 'web-platform',
+    expect: {
+      poll: {
+        timeout: 3000,
+      },
+    },
+  },
+});
+
+export default config;