Converts webpack to rspack (#45)

* working convert to rspack * increment version * increment version * modfiy js config * uses thinner near-social-vm * compress console.log * fix wallet selector version * refresh yarn.lock * use feat/rspack VM * fix web3 tests * fix test * fix config tests
NEARBuilders · Aug 14, 2024 · b70b23c · b70b23c
1 parent fb8b2b3
commit b70b23c
Show file tree

Hide file tree

Showing 11 changed files with 1,340 additions and 3,274 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/config/presets/loadPreset.js b/config/presets/loadPreset.js
@@ -5,7 +5,7 @@ const loadPresets = (env = { presets: [] }) => {
   /** @type {string[]} */
   const mergedPresets = [].concat(...[presets]);
   const mergedConfigs = mergedPresets.map((presetName) =>
-    require(`./webpack.${presetName}.js`)(env)
+    require(`./rspack.${presetName}.js`)(env)
   );
 
   return merge({}, ...mergedConfigs);

diff --git a/config/presets/webpack.analyze.js b/config/presets/webpack.analyze.js
diff --git a/config/webpack.development.js → config/rspack.development.js b/config/webpack.development.js → config/rspack.development.js
@@ -1,5 +1,5 @@
 const path = require("path");
-const { HotModuleReplacementPlugin } = require("webpack");
+const { HotModuleReplacementPlugin } = require('@rspack/core');
 
 module.exports = () => ({
   devtool: "inline-source-map",

diff --git a/config/webpack.production.js → config/rspack.production.js b/config/webpack.production.js → config/rspack.production.js
@@ -1,6 +1,4 @@
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
-const TerserPlugin = require("terser-webpack-plugin");
+const rspack = require('@rspack/core');
 const path = require("path");
 
 module.exports = () => {
@@ -13,13 +11,6 @@ module.exports = () => {
     devtool: false,
     module: {
       rules: [
-        // {
-        //   test: /\.(css)$/,
-        //   use: [MiniCssExtractPlugin.loader, "css-loader"],
-        //   //   options: {
-        //   //     sourceMap: false,
-        //   //   },
-        // },
         {
           test: /\.(scss|css)$/,
           use: [
@@ -61,17 +52,22 @@ module.exports = () => {
       ],
     },
     plugins: [
-      new MiniCssExtractPlugin({
+      new rspack.CssExtractRspackPlugin({
         filename: "styles/[name].[contenthash].css",
         chunkFilename: "[id].css",
-      }),
+      })
     ],
     optimization: {
       minimize: true,
       minimizer: [
-        new CssMinimizerPlugin(),
-        new TerserPlugin({
+        new rspack.SwcCssMinimizerRspackPlugin(),
+        new rspack.SwcJsMinimizerRspackPlugin({
           exclude: /webcomponentapp.js/,
+          minimizerOptions: {
+            compress: {
+              drop_console: true,
+            },
+          }
         }),
       ],
       runtimeChunk: {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "near-bos-webcomponent",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "homepage": "https://github.com/NEARBuilders/near-bos-webcomponent",
   "repository": {
     "type": "git",
@@ -12,38 +12,29 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@near-wallet-selector/modal-ui-js": "^8.9.10",
-    "@playwright/test": "^1.38.1",
+    "@near-wallet-selector/modal-ui-js": "8.9.10",
     "@web3-onboard/injected-wallets": "^2.11.1",
     "@web3-onboard/ledger": "^2.7.1",
     "@web3-onboard/react": "^2.9.1",
     "@web3-onboard/walletconnect": "^2.6.1",
-    "big.js": "^6.1.1",
-    "bn.js": "^5.1.1",
     "bootstrap": "^5.3.1",
     "bootstrap-icons": "^1.9.0",
-    "collections": "^5.1.12",
     "dompurify": "^3.0.6",
-    "error-polyfill": "^0.1.2",
     "local-storage": "^2.0.0",
     "near-api-js": "^2.1.3",
-    "near-social-vm": "NearSocial/VM#2.6.1",
-    "prettier": "3.3.2",
-    "qrcode.react": "^3.1.0",
+    "near-social-vm": "NEARBuilders/VM#feat/rspack",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
     "react-bootstrap-typeahead": "^6.1.2",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.0",
-    "socket.io": "^4.7.5",
-    "socket.io-client": "^4.7.5",
-    "styled-components": "^5.3.6"
+    "socket.io-client": "^4.7.5"
   },
   "scripts": {
-    "webpack": "webpack",
-    "dev": "yarn run webpack --env mode=development",
-    "prod": "yarn run webpack --env mode=production",
-    "prod:analyze": "yarn run prod --env presets=analyze",
+    "rspack": "rspack build",
+    "dev": "yarn run rspack --env mode=development",
+    "prod": "yarn run rspack --env mode=production",
+    "prod:analyze": "yarn run prod --analyze",
     "build": "yarn run prod",
     "start": "yarn run dev && http-server -p 3000 dist --allowed-hosts=all",
     "serve:prod": "http-server -p 3000 dist",
@@ -78,47 +69,39 @@
     ]
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.4",
-    "@babel/preset-react": "^7.14.5",
+    "@playwright/test": "^1.38.1",
+    "@rspack/cli": "^0.7.5",
+    "@rspack/core": "^0.7.5",
     "assert": "^2.0.0",
-    "babel-loader": "^8.2.2",
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^9.0.1",
     "cross-env": "^7.0.3",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.2.0",
-    "css-minimizer-webpack-plugin": "^3.0.2",
-    "html-webpack-plugin": "^5.3.2",
     "http-server": "^14.1.1",
     "https-browserify": "^1.0.0",
     "ipfs-car": "^1.2.0",
     "jspm": "^3.1.0",
-    "mini-css-extract-plugin": "^2.2.2",
     "nearfs": "https://github.com/vgrichina/nearfs",
     "ora": "^8.0.1",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
-    "postcss-loader": "^7.0.1",
+    "postcss": "^8.4.40",
+    "postcss-loader": "^8.1.1",
+    "prettier": "3.3.2",
     "process": "^0.11.10",
-    "raw-loader": "^4.0.2",
+    "rspack-manifest-plugin": "^5.0.0",
     "sass": "^1.66.1",
     "sass-loader": "^13.1.0",
+    "socket.io": "^4.7.5",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "style-loader": "^3.2.1",
     "url": "^0.11.0",
-    "webpack": "^5.52.0",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.1.0",
-    "webpack-manifest-plugin": "^5.0.0",
     "webpack-merge": "^5.8.0"
   },
   "nearfs": {
     "cid": "bafybeiftqwg2qdfhjwuxt5cjvvsxflp6ghhwgz5db3i4tqipocvyzhn2bq"
   }
-}
+}
diff --git a/playwright-tests/tests/config.spec.js b/playwright-tests/tests/config.spec.js
@@ -19,7 +19,7 @@ describe("test data-component attribute", () => {
     page,
   }) => {
     await page.evaluate(() => {
-      const src = "zavodil.near/widget/Lido";
+      const src = "meta-pool-official.near/widget/MetaPoolStakeEth";
 
       document.body.innerHTML = `<near-social-viewer src="${src}"></near-social-viewer>`;
     });
@@ -31,7 +31,7 @@ describe("test data-component attribute", () => {
   test("with the correct configuration there will be a data-component property in the components", async ({
     page,
   }) => {
-    const src = "zavodil.near/widget/Lido";
+    const src = "meta-pool-official.near/widget/MetaPoolStakeEth";
 		const config = { "vm": { "features": {"enableComponentSrcDataKey": true }}}
 
     await setupNearSocialViewer(page, src, config);

diff --git a/playwright-tests/tests/web3.spec.js b/playwright-tests/tests/web3.spec.js
@@ -7,22 +7,20 @@ test("should be possible to interact with web3 widgets", async ({ page }) => {
 
   await page.evaluate(() => {
     document.body.innerHTML = `
-			<near-social-viewer src="zavodil.near/widget/Lido"></near-social-viewer>
+			<near-social-viewer src="meta-pool-official.near/widget/MetaPoolStakeEth"></near-social-viewer>
 			`;
   });
 
   await waitForSelectorToBeVisible(
     page,
-    'near-social-viewer[src="zavodil.near/widget/Lido"]'
+    'near-social-viewer[src="meta-pool-official.near/widget/MetaPoolStakeEth"]'
   );
 
-  await waitForSelectorToBeVisible(
-    page,
-    "body > near-social-viewer > div > div > div > div.LidoStakeForm"
-  );
+  const header = page.getByRole('heading', { name: 'Stake ETH' });
+  await expect(header).toBeVisible();
 
   const Web3ConnectButton = page.getByRole("button", {
-    name: "Connect with Web3",
+    name: "Connect with Ethereum wallet",
   });
 
   await Web3ConnectButton.click();