feat: add unplugin integration and test HMR

phoenix-ru · Nov 28, 2023 · 64b3072 · 64b3072
1 parent 85e0e0a
commit 64b3072
Show file tree

Hide file tree

Showing 12 changed files with 3,718 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 /target
 **/node_modules
-*.node
+*.node
+**/dist
diff --git a/README.md b/README.md
@@ -147,13 +147,14 @@ Code generator
   - [x] defineModel
   - [ ] Tests
 - [x] DEV/PROD mode
+- [x] Hot Module Replacement (HMR)
 - [ ] Vue 2.7 support
 - [ ] SSR with inline critical CSS support
 - [ ] Eager pre-compilation of Vue imports (avoid unneccessary bundler->compiler calls)
 
 Integrations
 - [x] WASM binary (unpublished)
-- [x] NAPI binary (unpublished)
-- [ ] [unplugin](https://github.com/unjs/unplugin)
+- [x] NAPI binary [@fervid/napi](https://www.npmjs.com/package/@fervid/napi)
+- [x] [unplugin](https://github.com/unjs/unplugin) (in progress)
 - [ ] [Farm](https://github.com/farm-fe/farm) native plugin
 - [ ] [Turbopack](https://github.com/vercel/turbo) plugin (when plugin system is defined)
diff --git a/node/examples/hello-world/HelloInput.vue b/node/examples/hello-world/HelloInput.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="hello-input">
+    <input
+      v-model="innerModelValue"
+      :class="{
+        'w-full': fullwidth
+      }"
+      class="hello-input__input"
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  fullwidth: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  modelValue: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:model-value'])
+
+const innerModelValue = ref(props.modelValue)
+const computedModelValue = computed(() => props.modelValue)
+watch(computedModelValue, (value) => {
+  innerModelValue.value = value
+})
+
+watch([innerModelValue], (values) => {
+  emit('update:model-value', values[0])
+})
+</script>
+
+<style scoped>
+.hello-input__input {
+  padding: 1rem 1.5rem;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 999px;
+}
+
+.hello-input__input:hover, .hello-input__input:focus {
+  border-color: #000;
+}
+</style>
diff --git a/node/examples/hello-world/HelloWorld.vue b/node/examples/hello-world/HelloWorld.vue
@@ -0,0 +1,24 @@
+<template>
+    <h1>
+        Hello {{ name }}!
+    </h1>
+    <input v-model="name">
+
+    <!-- This is a challenge: SWC does not accept `HelloInput` and modifies the tag name to `helloinput` -->
+    <hello-input v-model="name"></hello-input>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import HelloInput from './HelloInput.vue'
+
+const name = ref('fervid')
+</script>
+
+<script>
+// This hack is needed because `fervid` doesn't support component resolution yet
+// TODO Remove when component resolutions are properly supported
+export default {
+    components: { HelloInput }
+}
+</script>
diff --git a/node/examples/hello-world/index.html b/node/examples/hello-world/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>
diff --git a/node/examples/hello-world/index.js b/node/examples/hello-world/index.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import HelloWorld from './HelloWorld.vue'
+
+const app = createApp(HelloWorld)
+app.mount('#app')
diff --git a/node/examples/hello-world/package.json b/node/examples/hello-world/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "hello-world",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "serve": "webpack serve"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@fervid/unplugin": "^0.0.1",
+    "html-webpack-plugin": "^5.5.3",
+    "rollup": "^4.6.0",
+    "unplugin": "^1.5.1",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  },
+  "dependencies": {
+    "vue": "^3.3.9"
+  },
+  "pnpm": {
+    "overrides": {
+      "@fervid/unplugin": "../../unplugin"
+    }
+  }
+}