Another includeJS

Just do not laugh. Perhaps this is the best introductory phrase - because well, actually, “How? Another script builder? Yes, in the post will talk about another "personal training". I will try not just to throw in another Libe, but to reflect on what this solution could have been better than a million others. Maybe I will not be able to convey to you everything as it is, but I will try, but you do not judge strictly. This will be the second article in the series on components and MVP. If interested you can get acquainted with the first .

Problem component

Often, components / widgets in addition to scripts consist of other resources - html markup, styles, images, components. And here, it would be desirable to receive the collector of these resources. During development, specify the path to the directory with components / libraries, connect the necessary, and during the assembly html will be glued into one, styles and javascript too, the pictures will be copied into our application - “To eat is served”. I ask you not to kick it painfully, such “designers” already exist, but I couldn’t find the right one - and besides, my goal was not to create a competing product, but to do the thing I needed for myself.

Here (github) you can download / look at this item. The one to whom this topic seemed interesting, and who is willing to devote 10 minutes to this inept writing, I invite you to the cat.
')

A bit of history, or what is the right bike

To be honest, I find it a little embarrassing to call things “right” or write “how to do something,” because this is all subjective, therefore, treat this as such.
When we face a challenge, we evaluate what tools we have to solve it, and what tools we don’t have. We also think that it could speed up the process. And if we decided a little bit, just a little bit, to correct the existing tools - that's all, the first step in a hundred miles to the bike was made. Many more similar tasks should be solved, where we will build a functional brick by brick. Not everyone will survive the tasks, somewhere we spit and take ready libraries. And somewhere, the need for these “just a little bit to finish” will simply disappear, and then, like water that has nowhere to flow, will turn into a marsh. But the swamp is not bad, but on the contrary - it gives life to millions of species.
But if the toolkit survived, it is a plural “little bit of finishing”, then as a result, we will get a “Thing”, where we will know every comma or vice versa, the future I will be surprised and laugh at I am real. Where we can easily add, change, rule the functionality. Where the wind of freedom is felt, when this “Thing” does what you want, and the way you want it. I apologize for this lyrical digression.

And the story itself is banal

• Tired of writing the entire script in one file? - We break into several.
• Files became more and bothered to connect everything to index.html? - Some dynamics: create and insert into dom
  Do scripts require styles and ajax ? Here is the link tag with the href attribute and xmlhttprequest with onreadystatechange
  Do scripts need to know when nested / recursive resources are loaded? The resource tree and eval are now used. For eval, do not swear because the first is that it simplifies handling dependencies, so we don’t need to indicate anywhere else (in any package.json files) what the module is and what it requires. And also it is not necessary to build constructions of the “define” type . And secondly, because we will have a goal - to build an application, this eval will already be absent there (except for lazy scripts, see below) . Although I should note that even if you don’t build the application, there’s nothing criminal in this eval-e, as it is used for its intended purpose, it’s just as fast as connecting a script via a tag and is not a security problem (if an evil person could reach this eval, in fact, he does not even need him anymore) .
  Need a lazy script that will be available immediately on demand (without any IDeferred) ? The scheme is simple: XMLHTTRequest → __ defineGetter__ → eval. From the example:
  include.lazy({'ui.notification':'path'}) , and as soon as we call ui.notification./**eval , */show('Hello World'); I’ll draw your attention to the fact that the module should be based on how and what the eval function returns.
  Need convenient path handling and routing? "utils.js" is a relative path to the parent. "/utils.js" is a relative path to the application. .js({ dom: "zepto" }) - before that, we register our route dom : .cfg({dom: "/scripts/dom/{name}.js"}) .
  A simple and wrong example of a dialog box, but this is not the main thing - the main thing is that you see how easy it is to connect a separate resource, with pictures, styles and html markup. Here I showed MaskJS a little in action, and in the next article the component library will be connected to them, and this will be a cake. Although this is again a subjective opinion, perhaps all this is nonsense, but it helps to pleasantly develop html5 applications. If you know similar tools, share them. I also want to warn that while this is all very raw, but I will continue to work on it all - it brings a lot of pleasure. If such a thing were useful to someone, then there would be more motivation. But if not, that’s enough;)
  
  Good luck.