feat: implement basic header modifier base on service worker

[Asuka109]

Summary

🤖[deprecated] Generated by Copilot at c8ee6c0

This pull request adds a new feature to the devtools client and plugin for Modern.js, which allows users to modify request headers using a service worker script. It adds a new webpack plugin, a new UI tab, a new state module, and several new components and utils for the header modifier feature. It also refactors the rpc module and updates the package.json and tsconfig.json files. It creates a new service-worker.ts file, which defines the logic of the header modification service worker. It also adds a new cli.ts file, which sets up the server route and the HTML injection for the service worker script.

Details

🤖[deprecated] Generated by Copilot at c8ee6c0

• Add a header modifier feature to the devtools client, which allows modifying the headers of network requests using a service worker script and a UI tab. (link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link)
• Define the ServiceWorkerCompilerPlugin class in plugins/sw-compiler-plugin.ts, which creates a child compiler for the service worker script using the @rspack/core package and the DefinePlugin. (link, link)
• Add the ServiceWorkerCompilerPlugin to the webpack chain in modern.config.ts, using the plugin and use methods. (link, link)
• Add a new export field to the package.json file, which maps the ./sw-proxy subpath to the ./dist/public/sw-proxy.js file. (link)
• Add a new outDir property to the tsconfig.json file, which specifies the dist folder as the output directory for the compiled TypeScript files. (link)
• Add the plugins folder to the include array in the tsconfig.json file, which specifies the files and folders that are included in the TypeScript compilation. (link)
• Define the service worker script in src/service.worker.ts, which uses the idb-keyval package, the process.env.VERSION variable, and the rules parameter to store and modify the headers of the network requests. (link, link)
• Define the handleServiceWorker function in src/mount/proxy/index.ts, which registers and unregisters the service worker script using the navigator.serviceWorker API. (link)
• Define the ModifyHeaderRule and ServiceStatus interfaces in src/client/utils/service-agent.ts, which describe the shape of the objects used for the header modification feature. (link)
• Define the state for the header modifier feature in src/client/routes/headers/state.ts, which uses the valtio package to create a reactive state object with a service property. (link)
• Define the registerService, unregisterService, and fetchServiceStatus functions in src/client/routes/headers/state.ts, which use the navigator.serviceWorker API to register, unregister, and get the status of the service worker script. (link)
• Define the Page component for the header modifier view in src/client/routes/headers/page.tsx, which uses the useSnapshot and useNavigate hooks to check the service status and navigate to the editor or welcome view. (link)
• Define the Page component for the header modifier welcome view in src/client/routes/headers/welcome/page.tsx, which uses the Link component to navigate to the editor view and the service worker script. (link)
• Define the Page component for the header modifier editor view in src/client/routes/headers/editor/page.tsx, which uses the useList and useSnapshot hooks to manage and update an array of rules. (link)
• Add a new object to the defaultTabs array in src/client/constants.tsx, which defines the properties of the header modifier tab. (link)
• Import the HiOutlineAcademicCap icon from the @radix-ui/react-icons package in src/client/constants.tsx, which is used for the header modifier tab. (link)
• Add a new method to the devtoolsPlugin object in plugin/src/cli.ts, which modifies the server routes for the /sw-proxy.js path. (link)
• Add new properties to the webpackConfig object in plugin/src/cli.ts, which copy the service worker script file to the public folder and inject a script tag into the HTML template. (link, link)
• Refactor the rpc module, which provides a bidirectional RPC communication between the devtools client and the server. (link, link)
  • Move the logic of the setupServerConnection function to a separate file, which is src/client/rpc/server.ts. (link)
  • Replace the content of the src/client/rpc/index.ts file with a single export statement, which re-exports everything from the src/client/rpc/server.ts file. (link)
• Add a new utility function, which is the assert function. (link, link)
  • Define the assert function in src/client/utils/assert.ts, which takes a value and an optional message or error, and throws an error if the value is falsy. (link)
  • Add a new export statement to the src/client/utils/index.ts file, which re-exports everything from the src/client/utils/assert.ts file. (link)
• Reorder the devDependencies alphabetically in the package.json file, which is a common convention for organizing dependencies. (link)
• Add a type annotation for the module.exports object in the eslint configuration file, which helps with type checking and code completion. (link)

Related Issue

Checklist

• I have added changeset via pnpm run change.
• I have updated the documentation.
• I have added tests to cover my changes.

[changeset-bot]

⚠️ No Changeset found

Latest commit: dbabfd2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR