How does this work

[lorypelli]

I saw that it uses a tagged template literals tag function vine, but I can't find function implementation, only declaration in .d.ts. I want to see the code because it seems different behaviour from normal template literals tag functions

[ShenQingchuan]

Hi, I'm glad to hear that you're interested in how Vine works, but the issue area is for reporting bugs or requirements, not for asking questions. I'll turn this issue into a discussion and then answer your questions.

[ShenQingchuan]

If you have read the documentation of Vue Vine, you'll know that Vine has a compiler to extract the tagged template string from the .ts file's AST, and put the string content into @vue/compiler-dom to get exactly the same render functions output as Vue SFC.

So If the implementation is all inside the packages/compiler folder.

If you have more questions, free to talk with us here.

[lorypelli]

If you have read the documentation of Vue Vine, you'll know that Vine has a compiler to extract the tagged template string from the .ts file's AST, and put the string content into @vue/compiler-dom to get exactly the same render functions output as Vue SFC.

So If the implementation is all inside the packages/compiler folder.

If you have more questions, free to talk with us here.

So the vine function doesn't have any code, does it?

[ShenQingchuan]

Yes, there's no actual implementation of this "function vine".

The basic mentality here is to "borrow a form in valid syntax, and handle its AST representation, transform to what you want".

That's a mechanism we called "Macros", it only runs at compile time, and may totally change what you saw in source code.

If you really want to know how this compilation magic works, you can check src/analyze.ts, template/compose.ts, and src/transform.ts under packages/compiler.

[ShenQingchuan]

Further more, if you're curious about where the vine tagged template string function's type is, check out packages/vue-vine/types/macros.d.ts, all macros type are here.

We register those type into global and you'll be able to use it everywhere. Of course, this also has a cost, that is, the names of these identifiers are occupied in the global space, so you may need to be careful when naming new variables.

We will gradually add these details to our document, so that everyone can understand better, thank you for your questions and enthusiasm!

[lorypelli]

Further more, if you're curious about where the vine tagged template string function's type is, check out packages/vue-vine/types/macros.d.ts, all macros type are here.

We register those type into global and you'll be able to use it everywhere. Of course, this also has a cost, that is, the names of these identifiers are occupied in the global space, so you may need to be careful when naming new variables.

We will gradually add these details to our document, so that everyone can understand better, thank you for your questions and enthusiasm!

Thanks, but still a question, the template literals sintax that the vine function uses it's custom right?

[lorypelli]

I mean, for template tag functions it needs to have at least ${} sintax

[ShenQingchuan]

@lorypelli

No, it's totally OK if you don't use value interpolation i.e. ${...} in JS template string.

No interpolation means that we call this tag function with no argument.

You can see many this kind of examples in real world use cases, like GraphQL's gql..., where we define schema.

This is just a valid JS syntax that we hacked on that.

FYI You can test whether a syntax is valid in any ast explorer.