[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);