Asynchronous extension compiler about modules-webmake HOT 14 CLOSED

@acdaniel it is possible to do, but what is the use case? Which format does async compilation?

from modules-webmake.

I was playing around with the idea of adding less files to the bundle.

from modules-webmake.

Can you shed more light? What problem exactly are you trying to solve?

from modules-webmake.

Mind also that extension compilation is done at bundle compilation step, not at bundle execution step.

If you think about on demand (at execution step) load of extra modules bundle, there is planned code splitting feature with v0.4, but it won't be soon, also that's not really needed unless your application is really big.

from modules-webmake.

I'm going to close it for now, but let's keep the discussion

from modules-webmake.

Sorry that reply could have been confusing. I'm playing with adding LESS files, as in http://lesscss.org/. The idea is to auto inject bundled CSS dependencies into the current page. For example, you may have a client side javascript "widget" that is dependent on a Handlebars template and a default CSS style. The idea would be to include those none javascript dependencies in the bundle as well. I have written a webmake extension for Handlebars that precompiles the template and bundles it as well as one to bundle CSS. Now I am looking into bundling compiled LESS files.

The LESS compiler is used in the following way with a callback.

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, css) {
console.log(css);
});

So how would I accomplish this within a webmake-EXT?

from modules-webmake.

@acdaniel ah.. that less files :) Sorry I got confused.

I looked into it, and it looks they just use async-like signature, but function in fact is sync. Following prints generated CSS

var less = require('less');

var result;
less.render('.class { width: (1 + 1) }', function (e, css) {
    result = css;
});
console.log("CSS:", result);

Is there something I'm missing? Is there a case when render may resolve asynchronously?

As a side note I plan to introduce first class CSS support in Webmake (so .css files is treated on same level as .js and .json files), and then .less extension might be done as an extension for .css format.

What method do you use to inject CSS into web page?

from modules-webmake.

Anyway, I see there can be a possibility to that compilation is async, any file I/O may demand that.
So let me prepare a possibility.

from modules-webmake.

Ok, asynchronous compilation is now possible, published with v0.3.18

If you're happy with your handlebars extension, please publish it. I'd like to reference it in list of extensions for Webmake.

from modules-webmake.

The async stuff works great. thanks.

You can see it in action in webmake-css at https://github.com/acdaniel/webmake-css.
I automatically inject the CSS/LESS by dynamically adding a style tag to the head when the file is required on the client side. I then export the actually css code and the HTML element that was injected in case you want to remove it later. It seems to work pretty well but would love your thoughts before posting to npm.

One question, how would you feel about allowing file extensions in the require on non javascript/json files? For example, right now requiring css/less looks like this:

var css = require('../styles/mystyle');  // could be css/less or javascript or anything

Which is fine but when you put it next to javascript requires, it may be nice to have:

var css = require('../styles/mystyle.less');  // this is obviously a less include
var foo = require('foo');                          // this is a normal javascript include

As far as the Handlebars extension goes, the extension itself is dead simple and I'm documenting the client side usage now. I should have it posted in Github in a few hours or so.

from modules-webmake.

@acdaniel Great to see it works for you.

Concerning CSS/LESS, I think concerns should be separated into two individual extensions.
However, as I mentioned, I'd like to make CSS a first class format in Webmake. So maybe let's do it the way: I'll incorporate CSS support into Webmake, and then you'll provide webmake-less extension.

The way you inject CSS rules, might be problematic in IE <=9, as IE does not apply more than 31 style elements. So in a case where there are already many stylesheets in a document, we may face that issue (from my experience it's not that unlikely). I remember this issue from years ago, and then I workaround that by keeping one style tag, and adding rules to it.

I wouldn't like to support file extensions of extensions. The reason is that I don't think they should be perceived as final format. Extensions are just aid for development, but whatever lands on NPM or production should then work with first-class formats, which is JavaScript, JSON and soon CSS. To have that possible you cannot put full filename of LESS or CoffeeScript file into require.

I guess that you ask for it, as you have detection problem of css or less files in webmake-css (?) Best way to solve it, is two have two extensions for that ;-)

from modules-webmake.

Thanks for reminding me of the IE limit. I had completely forgotten. I have updated the repo to be webmake-less and provides support for LESS only and not CSS. To handle the IE limit I am appending the src to the last style element in the document or creating one if none are available.

I have also posted webmake-handlebars to https://github.com/acdaniel/webmake-handlebars. It's really simple but works well.

from modules-webmake.

@acdaniel looks great! Next week I'll prepare native CSS handling for Webmake, then we'll tune the extensions, and I'll ask for some word spread on DailyJS etc.

from modules-webmake.

@acdaniel Finally I've upgraded Webmake. It has much improved extensions handling, and supports CSS and HTML files natively.

While your current version of extension should work, it's highly recommend that you update them to new Webmake handling.

Now, when defining extension, you also state for which type the extensions is (js, json, css or html) and then provide string which reflects given type. That means that for handlebars you should return plain HTML string to Webmake, and in case of less plain CSS string (CSS injection will be done by Webmake).

Additionally please add Webmake to peerDependencies in your package.json, stating ~0.3.19 version.
It will make sure, your extensions won't be installed for older versions, and user will be notified of an error, in case of breaking changes with Webmake v0.4 (but hopefully not much will change in case of extensions).

Today I will post submissions to DailyJS and JavaScript weekly, hopefully they publish few words about that.

Let me know if you have any issues.

from modules-webmake.