[Bug Report]: unplugin-vue-fervid

[ErKeLost]

@phoenix-ru hi
I'm trying to write farm and unplugin plug-ins. I'm currently encountering problems such as how to compile subcomponents. I now have two files, app.vue and base.vue, the app component introduces the base component, but the compiled effect treats Base as a node node instead of a component instance

do I have any problems operating in some places?

// unplugin-vue-fervid

// document

// compilation code

[ErKeLost]

Regarding the solution to css, it seems that you can use virtual modules to dynamically import css repeatedly to solve the specific implementation. I will try it again

[ErKeLost]

Regarding this distinction between modules in various formats, I feel that the current implementation method may be better. It mainly refers to performance problems. Now it means that no matter what kind of virtual module comes in, I need to run the asynccompile method aside.
The plug-in implementation that has implemented hmr functionality and vue compilation so far looks very good

[ErKeLost]

this base component should not be createElementVnode should be ' _createVNode($setup["Base"]),\n'

I don't know if my explanation is correct

[phoenix-ru]

Hi @ErKeLost , you are using base as a name, which is actually an HTML element:

https://www.w3schools.com/tags/tag_base.asp

You can simply rename it to something else, like BaseComponent.vue

Now it means that no matter what kind of virtual module comes in, I need to run the asynccompile method aside.
The plug-in implementation that has implemented hmr functionality and vue compilation so far looks very good

Not sure if you are happy with the current implementation or you think it needs to be different?

[ErKeLost]

@phoenix-ru ok i will try, but if base is used in @vue/compiler-sfc, it can be used as a component, I can try BaseComponents to load it for now thanks

[ErKeLost]

https://github.com/unplugin/unplugin-vue-fervid/blob/main/src/core/index.ts It is now running well in vite. I need to split up the css part, so I can write a version first. Since I need to call asymccompile repeatedly every time, I am not sure if it will affect performance. For example, when I encounter a css module, I need to dynamically load an import of css similar to a virtual module. I will try to write it first.

[ErKeLost]

looks like great

I will continue to try css parsing

I might be able to finish this later

[ErKeLost]

There are also some things we may need to do in the future, such as retaining component states and compiling script template styles. I think this method may be necessary so that we can ensure more granular and meticulous completion of the entire compilation. My next step is to start writing farm's Rust version of the vue plug-in. I think this will greatly improve the future of the vue ecosystem

[phoenix-ru]

Since I need to call asymccompile repeatedly every time, I am not sure if it will affect performance.

You shouldn't worry about the performance for async compilation because it will use real multithreading leading to 4 files being processed at the same time (thanks to libuv).
Parsing and recompilation is fast enough to process several thousands of files in one second on just one thread (at the moment maximum seems to be around 3000 files per thread × number of threads (4) ≈ 12000 per second in default configuration).

[ErKeLost]

If I write multiple style blocks in a vue file, the generated code will return the entire css of the current file, right?

I will help you after I finish compiling css

[ErKeLost]

If I write multiple style blocks in a vue file, the generated code will return the entire css of the current file, right?

I will help you after I finish compiling css

It looks like a styles array has been generated. I understand

[ErKeLost]

The compilation of css has been completed and I encountered another problem

Normally, this code will work

<script setup lang="ts">
import { ref } from 'vue'

const message = ref('Hello Vue!')
const isVisible = ref(true)

const toggleMessage = () => {
  isVisible.value = !isVisible.value
}
</script>

<template>
  <div class="container">
    <h1>Basic Vue</h1>
    <button @click="toggleMessage">Toggle Message</button>
    <p v-if="isVisible">{{ message }}</p>
  </div>
</template>

But I had some problems clicking the trigger button

lockdown-install.js:1 Removing unpermitted intrinsics
runtime-core.esm-bundler.js:51 [Vue warn]: Unhandled error during execution of component update 
  at </Users/adny/typescript/unpluginVueFervid/examples/vite/src/base> 
  at </Users/adny/typescript/unpluginVueFervid/examples/vite/src/App>
warn$1 @ runtime-core.esm-bundler.js:51
logError @ runtime-core.esm-bundler.js:263
handleError @ runtime-core.esm-bundler.js:255
callWithErrorHandling @ runtime-core.esm-bundler.js:201
flushJobs @ runtime-core.esm-bundler.js:408
Promise.then
queueFlush @ runtime-core.esm-bundler.js:322
queueJob @ runtime-core.esm-bundler.js:317
effect2.scheduler @ runtime-core.esm-bundler.js:5448
trigger @ reactivity.esm-bundler.js:253
endBatch @ reactivity.esm-bundler.js:311
notify @ reactivity.esm-bundler.js:597
trigger @ reactivity.esm-bundler.js:571
set value @ reactivity.esm-bundler.js:1448
toggleMessage @ base.vue:39
callWithErrorHandling @ runtime-core.esm-bundler.js:199
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206
invoker @ runtime-dom.esm-bundler.js:729了解此警告AI
runtime-core.esm-bundler.js:5043 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'el')
    at patchBlockChildren (runtime-core.esm-bundler.js:5043:18)
    at patchElement (runtime-core.esm-bundler.js:4972:7)
    at processElement (runtime-core.esm-bundler.js:4831:7)
    at patch (runtime-core.esm-bundler.js:4688:11)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5406:9)
    at ReactiveEffect.run (reactivity.esm-bundler.js:225:19)
    at ReactiveEffect.runIfDirty (reactivity.esm-bundler.js:263:12)
    at callWithErrorHandling (runtime-core.esm-bundler.js:199:33)
    at flushJobs (runtime-core.esm-bundler.js:408:9)

Maybe this is a problem with the vue version?

current version

 "dependencies": {
    "vue": "^3.5.13"
  },

[ErKeLost]

The second question seems to have not removed the type when compiled. Perhaps I wrote less configuration

lang=ts has been specified

<script setup lang="ts">
import { ref, watch } from "vue";
import BaseCmp from "./base.vue";
const msg = ref("Welcome to my beautiful page!");
watch(msg, (newVal) => {
  console.log(newVal);
});
const count = ref(0);

[ErKeLost]

The initial compilation of the plugin has basically run successfully and hmr is also running well and looks good

[phoenix-ru]

Wow, it's amazing to hear!!

Regarding Typescript, Fervid doesn't strip types, as it's usually the work of ts-loader which should consume the output of Fervid.

[ErKeLost]

Wow, it's amazing to hear!!

Regarding Typescript, Fervid doesn't strip types, as it's usually the work of ts-loader which should consume the output of Fervid.

I feel that swc should handle this operation back. I can look at this problem later.

[ErKeLost]

Another problem is that after initializing the vite project, clicking the button does not render to the template

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)
function counter() {
  count.value++
  console.log("count", count.value);
}
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="counter">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>
</template>

count always be 0

[phoenix-ru]

I will check if Vue 3.5 did some breaking changes to how template is rendered. This is not nice as I know such usage worked

[ErKeLost]

I also found a few problems and I'll see if I can solve them.

[ErKeLost]

The same code operates on refcount in the parent component and can run normally, but the child component will not update the template

[phoenix-ru]

The same code operates on refcount in the parent component and can run normally, but the child component will not update the template

Thank you for the lead! I think it's related to the fact that Fervid's patch flags implementation is incomplete yet. I really appreciate you testing different things!
I'll try to fix it as soon as I am done with the PR I am working on

[ErKeLost]

ok Regarding the questions I will continue to test unplugin-vue-fervid in the future, I will continue to ask questions on this issues, and I will open new issues and prs for other issues that can be solved. What do you think?

[ErKeLost]

When we can solve most of the known problems, I think we can promote it to users and start writing farm's rust plugin, and even provide it to rolldown or rspack in the future.

[phoenix-ru]

What do you think?

I am fine with it :)

Feel free to open issues/PRs and ping me.

[ErKeLost]

@phoenix-ru hi I used farm to conduct tests and compared compiler-sfc and fervid in the same environment. Maybe based on the differences in the machines, fervid is about four times faster than compiler-sfc.

https://x.com/Adny56908922543/status/1886642205672268100

I am very looking forward to improving performance after we build the rust plugin. It will be another demonstration project of magnitude. I think it may be launched and completed within 10ms.

[ErKeLost]

@phoenix-ru hi I plan to start development of fervid,@farmfe/plugin-vue and unplugin-vue-fervid plugin-vue at the same time. I would like to sincerely invite you to join farm to build farm's rust ecosystem together. has been sent to you

[phoenix-ru]

@phoenix-ru hi I plan to start development of fervid,@farmfe/plugin-vue and unplugin-vue-fervid plugin-vue at the same time. I would like to sincerely invite you to join farm to build farm's rust ecosystem together. has been sent to you

Thank you for the invite 🙂
I am glad to join Farm and bootstrap native JS tooling

[phoenix-ru]

fervid is about four times faster than compiler-sfc.
https://x.com/Adny56908922543/status/1886642205672268100

Could you share the code you used for the benchmark? Repository is best, so I could try it out. The number 45 ms looks too high to me, I was usually getting 2-3 ms.

[ErKeLost]

fervid is about four times faster than compiler-sfc.
https://x.com/Adny56908922543/status/1886642205672268100

Could you share the code you used for the benchmark? Repository is best, so I could try it out. The number 45 ms looks too high to me, I was usually getting 2-3 ms.

demo: https://github.com/ErKeLost/test-fervid