feat: add `unplugin-auto-import@^0.17.3

web-infra-dev · Feb 19, 2024 · 745bbe7 · 745bbe7
1 parent b81e03a
commit 745bbe7
Show file tree

Hide file tree

Showing 12 changed files with 943 additions and 305 deletions.
diff --git a/packages/babel-loader@9/package.json b/packages/babel-loader@9/package.json
@@ -6,6 +6,7 @@
   "devDependencies": {
     "@rspack/cli": "0.3.11",
     "babel-loader": "^9.1.3",
+    "@babel/core": "^7.23.9",
     "@babel/preset-typescript": "^7.23.2"
   },
   "rspack": {

diff --git a/packages/babel-loader@9/rspack.config.js b/packages/babel-loader@9/rspack.config.js
@@ -18,7 +18,7 @@ module.exports = defineConfig({
   },
   experiments: {
     rspackFuture: {
-      disableTransformByDefault:true
+      disableTransformByDefault: true
     }
   }
 });;
diff --git a/packages/babel-loader@9/tsconfig.json b/packages/babel-loader@9/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "include": ["src"]
+}
diff --git a/packages/fork-ts-checker-webpack-plugin@8/package.json b/packages/fork-ts-checker-webpack-plugin@8/package.json
@@ -5,7 +5,8 @@
   },
   "devDependencies": {
     "@rspack/cli": "0.3.11",
-    "fork-ts-checker-webpack-plugin": "^8.0.0"
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "typescript": "^5.3.3"
   },
   "rspack": {
     "version": ">=0.3.11"

diff --git a/packages/fork-ts-checker-webpack-plugin@8/rspack.config.js b/packages/fork-ts-checker-webpack-plugin@8/rspack.config.js
@@ -27,4 +27,4 @@ module.exports = defineConfig({
       disableTransformByDefault: true
     }
   }
-});;
+});
diff --git a/packages/unplugin-auto-import@0.17.3/index.html b/packages/unplugin-auto-import@0.17.3/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <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/packages/unplugin-auto-import@0.17.3/package.json b/packages/unplugin-auto-import@0.17.3/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@rspack-compat/rspack-unplugin_1.6",
+  "scripts": {
+    "build": "rspack build"
+  },
+  "dependencies": {
+    "vue": "^3.4.19"
+  },
+  "devDependencies": {
+    "@rspack/cli": "0.4.1",
+    "@rspack/core": "0.4.1",
+    "unplugin-auto-import": "^0.17.3",
+    "html-webpack-plugin": "5.6.0",
+    "vue-loader": "^17.4.2"
+  },
+  "rspack": {
+    "version": ">=0.4.1"
+  }
+}
diff --git a/packages/unplugin-auto-import@0.17.3/rspack.config.js b/packages/unplugin-auto-import@0.17.3/rspack.config.js
@@ -0,0 +1,29 @@
+const { defineConfig } = require('@rspack/cli')
+const { VueLoaderPlugin } = require("vue-loader");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const AutoImport = require("unplugin-auto-import/rspack").default;
+
+module.exports = defineConfig({
+  plugins: [
+    AutoImport({
+      imports: ["vue"],
+    }),
+    new VueLoaderPlugin(),
+    // the aims of `HtmlWebpackPlugin` is ensure 
+    // `unplugin-auto-import` will not includes `index.html`
+    new HtmlWebpackPlugin({
+      template: "./index.html",
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: "vue-loader",
+        options: {
+          experimentalInlineMatchResource: true,
+        },
+      }
+    ],
+  },
+});
diff --git a/packages/unplugin-auto-import@0.17.3/src/App.vue b/packages/unplugin-auto-import@0.17.3/src/App.vue
@@ -0,0 +1,26 @@
+<script setup>
+import HelloWorld from "./HelloWorld.vue";
+
+const title = ref("Rspack + Vue");
+</script>
+
+<template>
+  <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/packages/unplugin-auto-import@0.17.3/src/HelloWorld.vue b/packages/unplugin-auto-import@0.17.3/src/HelloWorld.vue
@@ -0,0 +1,37 @@
+<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>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>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
diff --git a/packages/unplugin-auto-import@0.17.3/src/index.js b/packages/unplugin-auto-import@0.17.3/src/index.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+createApp(App).mount("#app");
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,4 +27,4 @@ module.exports = defineConfig({ @@
           disableTransformByDefault: true
         }
       }
-    });;
+    });