2 ms·

> Text inside script tags is parsed as JavaScript by default. It can be other languages too It can be, but usually isn't. > Again, it’s all just text in diffe

> Text inside script tags is parsed as JavaScript by default. It can be other languages too It can be, but usually isn't. > Again, it’s all just text in different syntax. Again, it's not. And the reason is simple: the browser literally knows nothing about other syntaxes but Javascript [1] So, no, "text in Vue" is literally not the same as "text in script tags". It is a mish-mash of: - Vue's own DSL (see v-for) - JS expressions that are wrapped in some scope (see v-if) - JS-like DSL where function cals are not function calls, there are magic vars, but objects are also fine (see v-on) - Maybe JS expressions in v-bind? But depends on the attribute name? Can use string concatenation, but anything else? - Actual JS expressions in {{}} which can't be used just anywhere... but then these expressions can have pipes into filters in them? And filters once again are JS-like, but are not None of this has any coherent specification, and we rely on Vue to properly parse and break it down into actual Javascript code that can then be included in a <script> tag. Edit: I had the same laundry list of things for Svelte before Svelte 2, but Svelte 3 is significantly more consistent and coherent in what it expects in a template. [1] There are ways to make it know other syntaxes, but that is rare and has largely fallen out of favor.

manigandham 5y ago
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 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 https://v3.vuejs.org/api/directives.html
- dmitriid 5y ago
  > 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 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.
  - manigandham 5y ago
    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? It's basically any valid `for..in/of` expression but you can always solve your mystery of "who knows" by just looking at the source code: https://github.com/vuejs/vue-next/blob/master/packages/compiler-core/src/transforms/vFor.ts https://github.com/vuejs/vue-next/blob/master/packages/compi...
    - zkldi 5y ago
      > It's basically any valid `for..in/of` expression This isn't true at all though, because `for x in y` is invalid JS.
      - manigandham 5y ago
        How is it invalid? Here's the syntax about a for..in loop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#syntax https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... for (variable in object) { statement } 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?
        zkldi 5y ago
        Because that loop doesn't do what you think it does? for...in iterates over the keys of an object, but for in in vue iterates over the elements of an array.

manigandham 5y ago

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 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 https://v3.vuejs.org/api/directives.html

dmitriid 5y ago
> 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 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.
- manigandham 5y ago
  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? It's basically any valid `for..in/of` expression but you can always solve your mystery of "who knows" by just looking at the source code: https://github.com/vuejs/vue-next/blob/master/packages/compiler-core/src/transforms/vFor.ts https://github.com/vuejs/vue-next/blob/master/packages/compi...
  - zkldi 5y ago
    > It's basically any valid `for..in/of` expression This isn't true at all though, because `for x in y` is invalid JS.
    - manigandham 5y ago
      How is it invalid? Here's the syntax about a for..in loop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#syntax https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... for (variable in object) { statement } 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?
      - zkldi 5y ago
        Because that loop doesn't do what you think it does? for...in iterates over the keys of an object, but for in in vue iterates over the elements of an array.