Import Metadata & Tagged Templates

[00:00:00]
>> Maximiliano Firtman: Import Metadata, this is also something really simple, really, really simple. This is also something that it will work only in modules. It will actually give you the URL of the current module within a module. Just that, it's import.meta.url. Yeah, there is other properties that's not really so useful, but it's just the URL is the only useful property that you will probably need.

[00:00:29]
>> Maximiliano Firtman: Pretty simple, this is 2020. Now, tag templates, it's something better. So it's from ES6, by the way, but I think it's 1 of the most underused features of ECMAScript these days. Remember templates? Templates were the one that we used the backtick, template strings, okay? We were using the backtick.

[00:00:54]
Well, if you create a function, the function will receive an array. The thing that is weird, we receive an array of strings as the first argument, and then an argument as values. For example, if I have, this is my string, let me try to get out of this for a second.

[00:01:23]
So this is my string, okay? Hello, values, the strings array will actually be and now you'll understand why. And a string with Hello, "," and another string with "1". That's the first argument. The second argument is the value. So let's say we have Hello, ${first name} ${last name}.

[00:01:54]
This is the string in the template. The string array will be Hello, "," then space, this is a space, and then exclamation mark. Then we'll receive the firstname and the lastname, not in an array, just as other arguments. Make sense? Yeah, kind of. What if I don't have the exclamation mark at the end?

[00:02:29]
You receive an empty string.
>> Maximiliano Firtman: And give me a second for that. It's guaranteed that the length of the first argument, so the length of the strings argument, it's one more than the rest of the arguments. If I have two arguments here, I have three elements in the array.

[00:02:55]
At this point, some of you will be really confused about what's going on here, okay? But the idea is that we are going to receive the string and we can interpolate what we want inside. For example, by the way, we can see this in action. We can run this.

[00:03:16]
By the way, yeah, you're right. This is not real code. So the length of the string is 2, the value's length is 1. By the way, because this is not an array, I can convert it into array using the rest operator. That's really simpler to manage, okay? So that's why we have three dots.

[00:03:38]
I'm converting the rest of the arguments as an array. Now, going back to the example I did before, here I will add another thing, like Hello, ${value}. I will add another space, and I will say 5,
>> Maximiliano Firtman: Like that. Si if I run this, I have two values.

[00:04:01]
Why two values? Because I have two interpolations. The values are the interpretations, I will receive value and 5. And you always have before and after and strings in the middle. That's why it's always plus 1. Makes sense? So if you have one value, you have a string before and a string after.

[00:04:27]
If you have, let's say, two values, you have one string before, one in the middle, one after. That's why we have three, that's why it's always one more. You say, okay, but why is this important, okay? Because you can do a lot of stuff with this. And by the way, how you can call the function, and this part is weird, I'm sorry about this.

[00:04:51]
But you just put the name of the function before the backtick with no parentheses. By the way, a function name can be anything, it can be frontendmasters, whatever. Then you use that name before the backtick, no parentheses. It's a weird syntax, okay? It competes as the weirdest syntax with the hash for private properties, probably.

[00:05:21]
So this is called the tagged template. It's a way that we have to process or post-process the string and return something different. And by the way, here I'm returning, for example, in this case, the string plus the values. But I can return anything, and I don't need to return a string, by the way.

[00:05:49]
I can return an array or an object with, for example, the strings. Let's call this strings: strings.length, and values: values.length. So it's an option now. So I can console.log and stringify the version of that result, and this is what I'm getting.
>> Maximiliano Firtman: So I'm passing it on a string and not getting a string back.

[00:06:20]
I'm getting an object. So it's up to you, what do you wanna do with this. You can return DOM elements. So you can parse a string and return DOM elements instead of strings. You can do some kinds of JSX. In fact, there are a couple of frameworks or micro-libraries out there that will do something like this.

[00:06:46]
Have you heard about HTMX? Well, they are taking advantage of tagged templates to do stuff. I want you to create a tagged template function, it can be called bold, that will return every value we pass as b, and if it's a number, and as, actually, if it says italic, it should be if it's something else.

[00:07:15]
For example,
>> Maximiliano Firtman: f I pass, let me show you some examples of what I'm expecting. So you pass bold' ' and you said my name is, and you pass a name, my age is, and you pass an age, okay? And let's say that name is Maria and age is 40.

[00:07:45]
So if you console.log this, what I want to see is my name is, the name in italic, okay, like HTML, okay? And it will say, Maria,
>> Maximiliano Firtman: My age is 40.
>> Maximiliano Firtman: So that's one example of how you can use this, one use case. You can use it to create formatted innerHTML strings.

[00:08:22]
>> Maximiliano Firtman: Okay, so let's cover one solution. Of course, there are many solutions. And this is, I mean, it was just playing a little bit with the collections, okay? This is one solution, not probably the most efficient one, but this is probably the one that you can quickly understand when you look at it.

[00:08:37]
So remember, we receive an array of strings. And thanks to this operator, okay, the rest operator, we are receiving also an array of values that has 1 element less than the strings values. So I'm iterating over the strings array. I'm not using let of just to keep the index, so I can use the index on both collections at the same time.

[00:09:02]
And I started collecting the final output in a string. Yeah, we can use an array, we can use other ways to do this. And then I'm checking, of course, if I'm not at the end, that means that I don't have a value for the last string. So I'm adding the first string plus the first value, the second string plus the second value.

[00:09:26]
And remember, it ends with a string without a value. And I'm checking the type of the value. If it's a number, I will use this one, if not, I will use b. I mean, of course, it can be anything. I'm returning that. So then I'm calling that format, but you can call it bold or wherever you wanna call that, it doesn't matter, it's just a name.

[00:09:44]
And then you can just call that. Remember, no parentheses. If you have parentheses, something completely different will happen. Because some people say, but it's just a parentheses. We can just add it and it will make no noise. No, because if you add parentheses to that, it will call the format function as any other function execution, which means the whole string will receive as strings and there will be no values, okay?

[00:10:17]
So you shouldn't use those parentheses, just to see that in action there. And remember, it's not just for formatting strings. I mean, the input is always a string, but you can do wherever you want as an output. You can go and grab data from different sources and return objects based on that, based on the string.

[00:10:43]
So you can really do a lot of weird stuff with that, just with a string and interpolations within the string, okay? Makes sense? Do have any question on tagged templates?
>> Student: This is a little general, but in your opinion, what's the advantage of the tagged template feature versus just a custom function that you write?

[00:11:07]
>> Maximiliano Firtman: Well, if you use a custom function in this case, you will have to parse the string manually over regular expressions to actually extract these patterns within this string, and it's done automatically for you with a tagged template. So I think that's the difference, that parsing the string to match finding the decent spots.

[00:11:29]
These interpolation spots will probably take more time, so the developer experience is better with tagged templates.