 Hi. My name is Henry Castro. I'm from South America. So this is my first experience here in the LibreOffice conference. So I'm happy to see the community here. So we're going to talk about the make-fi, why I did that change for bundling JavaScript on the M4. Let's go a little bit for history. We're going to check about the jack-fi. It was the original JavaScript bundling. Then some rules for a make-fi. Just an example of what I did. The M4, microprocessor, low leaf left, and the HTML how to generate the file. Let's start from the beginning. Leaf left is the main component of library for JavaScript. We started with version 0.8. This was the original package. And left left is library oriented or designed for maps. So we are starting to change this, adapting the code to handle the types of the documents for collaborative online. At that time, we had to use the bundling. The original bundling was the jack-fi. It's similar to a make-fi, but it's the make-fi for the JavaScript. They have several tasks. One of the tasks was just to bundling all the source files of the leaf left. You can see this in the original code. The jack-fi has a built task. We'll see the next one. That starts to concatenate all the source files into one big file, and that's the bundling. After that process, they follow with the ugly-fying just to compress the file. This was the original. As you see, this was the normal process for bundling with the original left-left library. Then you can see that they have an older list of files, the source you can see here. These files have some organizations. Then every file has a specific order because JavaScript has a prototype definition. If you change the order, maybe you can break something in the bundling, building the library. So it was based in that file with all the definitions of the files. This task was the previous, just only grab all that list and start concatenating one of them to have just one single bundled file. That's the bundling process. We were not so smart at that time, so we were more focused on adapting the code. We have so many problems. The browser just automatically split in files when you want to debug. For example, for me, to debug, it was really painful. You can check the original left-left package library. They have a debug folder, and the debug folder, we have several examples. That's the samples. They have a script tag that we can show how to debug. This was the best environment debugging at that time because it was easy for me just to see an inspector in the browser inspector of the source files when I can check the break points. So easily unfollow what line of code I did and what is the file location. So an example, if you run that file example, it will show you every script tag with every source file, the location of the source file, and if you had to modify something, you know exactly where what's the code you can change because at that time we were more concentrated and just adapting the patches. So you can see this is the same list here. So basically, this debug sample just lists all the files. So my problem was just when I tried to do the changes, so I had to do my local changes and adapt this debug example file to change it to call our own line and start debugging. Locally, I had to do the changes by myself and start debugging when there's some problem that happens because the boundary for me was one big file, it was difficult to find. I don't remember what was the code. They had to look by myself, I had to search the code, what's the file I modified, so it was really complicated to debug in that occasion. So what I did, okay, to summarize, they have three components. Four components are important to build that leaflet. There was no package manager, just dependencies we already need. And the linting utility, just like my co-worker say that we need to, for checking the same test of JavaScript, we have the jake at that time. We need that utility just to bundle the leaflet. And after the process of bundling that, we create an ugly file to compress the file and deploy the result. So what was my idea to not start to change all my local changes by my side? So the idea was just grab the sofas, and if I just create a build with the debug symbols to build the server, the callable server, just I need to copy the files, the sofas, and generate the list of tags for every sofas what I need. Just like an example that I showed you before. If we want to deploy to our production, then we can just go for the release build and do the same process while they were doing the jake file, just concatenate the files, and once the component aglify, and just generate one single tag with one file bundled. That was the idea. How to do that in the code? Unfortunately, I just talked about in the other packages, I couldn't find a way to do this. So the natural way was just to use the mic file. I just did the mic file. If you can check here, I just add two rows here, and if it's coming with the configuration with the debug symbols, just I need to copy the source file to the destination folder. That was the simple step that I do if I want to debug. Then in the other case, of course, if we have a release build, just we need to concatenate the file exactly the same thing with all the list that dependencies, with all the source files and also the leaflet. So we have one big file bundled. After that, of course, there's an aglify process. Two simple rows, no dependencies, I remove the jake file, just to install that, and use the natural mic file with two simple rows. Then how to generate the only problem I have is only generate that single tag. If it's a release build, just generate one single tag to the bundled file. If it's a debug, with the debug symbol, I just have to generate all the list of source files. So I use the natural command, which is including in every GNU Linux distribution with the M4, and it's come with the make files. So the M4, this M4 is a macroprocessor, which is just set the variables and expand these variables according to the conditional. So I got two inputs here. I have to pass the variables and something like a template, the little leaflet template, so the M4 process is processor, the input file, and the output will be the final little leaflet HTML that is used for my collaboration online. The collaboration online, this was the last step we need. So I have to add a new rule, just last rule, and last rule, as you can see, we can pass the definition of the variables, and if it's debug, we have all the list of all source files of the little leaflet, and we call the command M4, just to process these two files. This two inputs, sorry. Then let's see about the leaflet HTML M4. I just need one simple conditional way if this is debug. We'll just generate all the script for every source file in the leaflet, and in case this is a release build, just one single tag, which the bundle, this is the result. That's what's simple. As you can see, there were added more macaworkers that did for, if this is a case for mobile or for Android, this was useful for them to create the proper script tags to generate the final little leaf HTML. Well, the result was, what must you make run in your command and start running in the bug, just like say, Macaworker, you open your browser, and you will see all the files of the little leaflet. You can set a bug point, you can check it's result very fast. You can have a better experience debugging in that way. Of course, this was for the normal browsers. At that time, we are not thinking about the mobile, but it's amazing how it's adapted to attach a remote and do the same result. Okay. Well, at the end, the result was the not package manager. We need just that ability, but we had to download it from the packages, and the make file is not dependencies. We already have, so no problem. And the ugly file, the two main packages needed to bundle the little leaflet right now. Of course, there are the additional libraries we use for toolbar, context menu, that are already included in the bundle process. So, the in another way, this is a bounding, it's not complicated like you see. Well, that's what the result I did. Hopefully, the little leaf packages, of course, the new version are changed. Of course, the bounding time and the tools, too. So, at that time, we cannot upgrade that packages, because we did so many changes for Color War Online that revasing that for the latest source code, it will be complicated. But, okay, I think that's it for me. Do you have any questions? That's what I did for just simplify my debugging process in JavaScript. Thank you.