Globals 4 exercises
solution

# Solving the Colocation Problem with Globalsself.__wrap_balancer=(t,e,n)=>{n=n||document.querySelector(`[data-br="\${t}"]`);let o=n.parentElement,r=E=>n.style.maxWidth=E+"px";n.style.maxWidth="";let i=o.clientWidth,s=o.clientHeight,c=i/2,u=i,d;if(i){for(;c+1<u;)d=~~((c+u)/2),r(d),o.clientHeight==s?u=d:c=d;r(u*e+i*(1-e))}};self.__wrap_balancer(":Rhd9r6:",1)

## Solving the Colocation Problem

The problem we're solving in this application code is colocation.

We want a pattern that we can copy and paste over several files in our application, while still making sure that we're declaring the types close to where the implementation is.

You could just decla

## Transcript

0:01 Our plan here is we want to change this file over here in order to add probably a declare global to it. We're definitely going to need one of those, because we're trying to modify something in an ambient context. We are trying to add log out and update username to it. What we're going to do is I'm just going to copy and paste this definition in there to make sure I don't get the spelling wrong.

0:21 Because if I do get the spelling wrong, this whole thing is just going to fall apart. We know we don't need to declare log in again, but we do need to declare log out. Log out here, what that means is that if I hover over this, then we can see that it's type log in or type log out, with some stuff added to the first member of the union. That's pretty cool.

0:44 Now what we get here is when we autocomplete inside the handler, we get log in or log out. Interesting. How do we add this update username? We can add update username here, too, with the username string on the property there. Very cool. Now we get autocomplete for all three.

1:04 If we go back to the other file, then the other file is also accepting this, too. This is really nice. It's a combination of declaration merging and declaring global. Having this global interface that you can append to gives you a really nice solution for certain problems.

1:22 The problem that we're really solving in this application code is colocation. We want a pattern that we can just copy and paste over several files in our application and make sure that we're declaring the types really close to where the implementation is.

1:38 Of course, you could just declare this in a single interface and just import that to all the places that you need it. Then, of course, it's not colocated. That's, if anything, more like using a global because you're not really sure whether a certain type is used or not.

1:55 Whereas when they're colocated together, even though you're putting it inside a global scope, it means that if you delete this entire file, then log out just disappears from the ether and it doesn't matter anymore. Weirdly, by using a global here, we're able to get a more modular approach to our types.

2:14 Another thing you should think about here is that you could potentially use this in a library setting. If you're declaring global inside your library, it means that you can allow users to override an interface that you've declared in the global. It's a way of passing down information or letting users pass your library information.

2:33 You should think about global in this way, that it can be used to communicate between files that don't necessarily import or export to each other. By using it this way, we end up with a really, really nice API. It's just a tool in your toolbox. It's something to think about. It's something that if you're working with certain libraries, they will ask you to do this.