feat: support rspack (#388)

* feat: support rspack * chore: add rspack entry in readme file --------- Co-authored-by: Carter.Luo <luoca4@oocl.com>
unplugin · Nov 4, 2024 · dda1ad0 · dda1ad0
1 parent 0e0e3f4
commit dda1ad0
Show file tree

Hide file tree

Showing 16 changed files with 1,597 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Access thousands of icons as components **on-demand** universally.
 
 - 🌏 Universal
   - 🤹 **Any** icon sets - ~150 popular sets with over 200,000 icons, logos, emojis, etc. Powered by [Iconify](https://github.com/iconify/iconify).
-  - 📦 **Major** build tools - Vite, Webpack, Rollup, Nuxt, etc. Powered by [unplugin](https://github.com/unjs/unplugin).
+  - 📦 **Major** build tools - Vite, Webpack, Rollup, Nuxt, Rspack, etc. Powered by [unplugin](https://github.com/unjs/unplugin).
   - 🚀 **Major** frameworks - Vanilla, Web Components, React, Vue 3, Vue 2, Solid, Svelte, and more. [Contribute](./src/core/compilers).
   - 🍱 **Any** combinations of them!
 - ☁️ On-demand - Only bundle the icons you really use, while having all the options.
@@ -212,6 +212,22 @@ See [the Nuxt example](examples/nuxt3) for a working example project.
 
 <br></details>
 
+<details>
+<summary>Rspack</summary>
+
+```ts
+import Icons from 'unplugin-icons/rspack'
+
+// rspack.config.mjs
+export default defineConfig({
+  plugins: [
+    // ...
+    Icons({/* options */}),
+  ]
+})
+```
+</details>
+
 <details>
 <summary>Vue CLI</summary><br>
 

diff --git a/examples/rspack-vue3/.gitignore b/examples/rspack-vue3/.gitignore
@@ -0,0 +1,13 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
diff --git a/examples/rspack-vue3/.stackblitz.js b/examples/rspack-vue3/.stackblitz.js
@@ -0,0 +1,15 @@
+import { promises as fsPromises } from 'node:fs'
+
+updatePackageJson()
+
+async function updatePackageJson() {
+  const filename = './package.json'
+  try {
+    const contents = await fsPromises.readFile(filename, 'utf-8')
+    const updatedContent = contents.replace('workspace:*', 'latest')
+    await fsPromises.writeFile(filename, updatedContent)
+  }
+  catch (err) {
+    console.error(err)
+  }
+}
diff --git a/examples/rspack-vue3/README.md b/examples/rspack-vue3/README.md
@@ -0,0 +1,23 @@
+# Rspack Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+npm run dev
+```
+
+Build the app for production:
+
+```bash
+npm run build
+```
diff --git a/examples/rspack-vue3/index.html b/examples/rspack-vue3/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vue</title>
+	</head>
+	<body>
+		<div id="app"></div>
+	</body>
+</html>
diff --git a/examples/rspack-vue3/package.json b/examples/rspack-vue3/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "rspack",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development rspack serve",
+    "build": "cross-env NODE_ENV=production rspack build"
+  },
+  "dependencies": {
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@iconify/json": "^2.2.232",
+    "@rspack/cli": "^1.0.14",
+    "@rspack/core": "^1.0.14",
+    "cross-env": "^7.0.3",
+    "unplugin-icons": "workspace:*",
+    "vue-loader": "^17.3.1"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "node .stackblitz.js && npm install && npm run dev"
+  }
+}
diff --git a/examples/rspack-vue3/rspack.config.mjs b/examples/rspack-vue3/rspack.config.mjs
@@ -0,0 +1,74 @@
+import { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from '@rspack/cli'
+import { rspack } from '@rspack/core'
+import { VueLoaderPlugin } from 'vue-loader'
+import Icons from 'unplugin-icons/rspack'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+// Target browsers, see: https://github.com/browserslist/browserslist
+const targets = ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14']
+
+export default defineConfig({
+  context: __dirname,
+  entry: {
+    main: './src/main.js',
+  },
+  resolve: {
+    extensions: ['...', '.ts', '.vue'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          experimentalInlineMatchResource: true,
+        },
+      },
+      {
+        test: /\.(js|ts)$/,
+        use: [
+          {
+            loader: 'builtin:swc-loader',
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'typescript',
+                },
+              },
+              env: { targets },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.svg/,
+        type: 'asset/resource',
+      },
+    ],
+  },
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+    }),
+    new rspack.DefinePlugin({
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false,
+    }),
+    new VueLoaderPlugin(),
+    Icons(),
+  ],
+  optimization: {
+    minimizer: [
+      new rspack.SwcJsMinimizerRspackPlugin(),
+      new rspack.LightningCssMinimizerRspackPlugin({
+        minimizerOptions: { targets },
+      }),
+    ],
+  },
+  experiments: {
+    css: true,
+  },
+})
diff --git a/examples/rspack-vue3/src/App.vue b/examples/rspack-vue3/src/App.vue
@@ -0,0 +1,37 @@
+<script setup>
+import { ref } from "vue";
+import HelloWorld from "./components/HelloWorld.vue";
+import VueLogo from '~icons/logos/vue'
+
+console.log(VueLogo)
+const title = ref("Rspack + Vue");
+</script>
+
+<template>
+	<div>
+		<a href="https://www.rspack.dev/" target="_blank">
+			<img src="./assets/rspack.svg" class="logo" alt="Rspack logo" />
+		</a>
+		<a href="https://vuejs.org/" target="_blank">
+			<VueLogo class="logo vue" style="width: 6em;" alt="Vue logo" />
+		</a>
+	</div>
+	<HelloWorld :msg="title" />
+</template>
+
+<style scoped>
+.logo {
+	height: 6em;
+	padding: 1.5em;
+	will-change: filter;
+	transition: filter 300ms;
+}
+
+.logo:hover {
+	filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.vue:hover {
+	filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>
diff --git a/examples/rspack-vue3/src/assets/rspack.svg b/examples/rspack-vue3/src/assets/rspack.svg
diff --git a/examples/rspack-vue3/src/assets/vue.svg b/examples/rspack-vue3/src/assets/vue.svg
diff --git a/examples/rspack-vue3/src/components/HelloWorld.vue b/examples/rspack-vue3/src/components/HelloWorld.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { ref } from "vue";
+
+defineProps({
+	msg: {
+		type: String
+	}
+});
+const count = ref(0);
+</script>
+
+<template>
+	<h1>{{ msg }}</h1>
+
+	<div class="card">
+		<button type="button" @click="count++">count is {{ count }}</button>
+		<p>
+			Edit
+			<code>components/HelloWorld.vue</code> to test HMR
+		</p>
+	</div>
+
+	<p>Check out Rspack which support Vue</p>
+	<p>
+		Install
+		<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+		in your IDE for a better DX
+	</p>
+	<p class="read-the-docs">Click on the Rspack and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+	color: #888;
+}
+</style>
diff --git a/examples/rspack-vue3/src/main.js b/examples/rspack-vue3/src/main.js
@@ -0,0 +1,5 @@
+import './style.css'
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/examples/rspack-vue3/src/style.css b/examples/rspack-vue3/src/style.css
@@ -0,0 +1,90 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/package.json b/package.json
@@ -143,6 +143,16 @@
         "types": "./dist/webpack.d.cts",
         "default": "./dist/webpack.cjs"
       }
+    },
+    "./rspack": {
+      "import": {
+        "types": "./dist/rspack.d.ts",
+        "default": "./dist/rspack.js"
+      },
+      "require": {
+        "types": "./dist/rspack.d.cts",
+        "default": "./dist/rspack.cjs"
+      }
     }
   },
   "main": "dist/index.cjs",