The point is that all code starts as simple text, and is parsed and compiled into some lower layer until it finally gets to machine code. What actually does the compilation is irrelevant.
All of these JS frameworks (React+JSX, Vue+HTML, Angular, Svelte, etc) require template compilation into an actual JS render function before a browser ever runs it, but compilation is the same fundamental process regardless of language or environment: https://en.wikipedia.org/wiki/Compiler
So yes it's all just text following a different syntax, and Vue's documentation already describes exactly what you can run: https://v3.vuejs.org/api/directives.html
> The point is that all code starts as simple text, and is parsed and compiled into some lower layer
Yup
> What actually does the compilation is irrelevant.
Nope. It is relevant. For the stuff you put between script tags there's at the very least https://github.com/tc39/ecma262 that you can look at and tell exactly what's going on with your code.
With Vue (and, yes, React and Svelte and Angular): who knows? It might very well evalueate strings at runtime for all we know.
> All of these JS frameworks (React+JSX, Vue+HTML, Angular, Svelte, etc) require template compilation into an actual JS render function before a browser ever runs it,
Yup. It's an additional, different step before it can even get to the browser. The problem with this step is that for most of this code there's not even a coherent specification of what it is, and how it's compiled.
> and Vue's documentation already describes exactly what you can run
It really doesn't. For example, here's the "documentation" on v-for:
Expects: Array | Object | number | string | Iterable
Expects where? Is this correct:
<div v-for="{ a: 1, b: 2 }"></div>
Answer: no. Because the actual description of what is expected is written in examples. Same goes for every single other directive. I mean, v-bind expects "any (with argument)" (what does this even mean?) and v-if expects "any", and both of these are false statements.
The topic is that all code is text, and everything can be parsed and understood based on specific language grammars, even if they're embedded within each other.
What are you even arguing at this point? This isn't about compilation or strings anymore. You don't like Vue's specific DSL? Or you don't understand it? Or you found a problem with the documentation? Or do you need a full grammar and syntax definition before you can do anything?
That Vue isn't "the same as text between script tags". Because "text between script tags" is fully specified, and known to the browser.
Vue's ad-hoc mish-mash of DSLs has to go through an unspecified series of transformations before it can even become a "text between script tags". And that's the issue not just with Vue, but with any other templating layers.
> but you can always solve your mystery of "who knows" by just looking at the source code
Ah yes. The good old "code is the source of truth" fallacy. Can you point to me where exactly in code it specifies this: `Expects: Array | Object | number | string | Iterable (since 2.6)`?
Yes, Vue directives aren't JS. It's a separate DSL. The whole point is that it is a syntax that can be parsed, compiled and understood rather than just "strings".
I'm not sure why you're stuck on this. Templates are just a more simplistic programming language. That's how so many IDEs can still provide help with them.
The only difference in Vue is not having to explicitly declare the variable. But so what?
You said "strings are magic and not code" to which I said "all code is text so there are no magic strings". Now you and the other poster keep saying "well this string isn't the same syntax as JS" but I don't see what the point is. Why does it have to be valid JS?
Again, you can embed syntax within each other just fine. JSX has HTML tags inside JS. HTML has tags like <style> and <script> for other languages (regardless of what the default language is or what parses it).
So, for the last time, what's the actual argument?
> How is it invalid? Here's the syntax about a for..in loop
for (variable in object) {
statement
}
And here's the syntax for Vue's for..in loop. Only one of it is somewhat Javascript:
item in items
(item, index) in items
(val, key) in object
(val, name, index) in object
And, of course, there's an extension to that
v-for="item in items" :key="item.id"
Edit: additionally, from that very link: "for...in should not be used to iterate over an Array where the index order is important." But this doesn't concern Vue, it maintains the order in its for..in.
It does exactly what I think it does, which is either iterate over the properties if it's an object or the elements if it's an array. This is true for Vue and Javascript. I suggest you read the documentation I linked earlier.
Also Vue's directives are not JS. It's a separate DSL. I've repeated this enough so I'll end this discussion here.
In Javascript, `for..in` prints the keys. In an object, the keys are the properties. In an array, the keys are the indexes. If you want the values then use the key to lookup the value from the object or array.
Either way it's entirely consistent: an iterator that works on both objects and arrays and prints the keys without guaranteeing order. Does that clear up the confusion?
All of these JS frameworks (React+JSX, Vue+HTML, Angular, Svelte, etc) require template compilation into an actual JS render function before a browser ever runs it, but compilation is the same fundamental process regardless of language or environment: https://en.wikipedia.org/wiki/Compiler
So yes it's all just text following a different syntax, and Vue's documentation already describes exactly what you can run: https://v3.vuejs.org/api/directives.html