Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

is it possible to use this in the browser? If so how? #2

Closed
cag-oss opened this issue Mar 20, 2015 · 11 comments
Closed

is it possible to use this in the browser? If so how? #2

cag-oss opened this issue Mar 20, 2015 · 11 comments

Comments

@cag-oss
Copy link

cag-oss commented Mar 20, 2015

No description provided.

@matAtWork
Copy link
Collaborator

Yes. You can either pre-compile the files, which is simple to do and understand. Invoke the compiler from the command line, e.g:

nodent.js --out myfile.nodent.js >myfile.js

Much easier (for the developer!) is to have node load and compile them on demand. You can do this by using the following snippet (with Express, but it works with almost anything that understands Node request handlers):

var nodent = require('nodent')() ;
....
app.use("/js",nodent.generateRequestHandler(__dirname + '/www/nodent',/.*\.js$/, {compiler:{es7:true}})) ;  

This should be read as: "Make available on the URL /js any files that exist in (dirname)/www/nodent which end in ".js", and transpile them on the fly using the "es7" semantics. The (undocumented - sorry) options for generateRequestHandler() are:

generateRequestHandler(pathToLocalFiles,fileNameRegexp,options) ;

options : {
// Default: null - sets no additional headers
    setHeaders:function(response) { ... },

// Default false: re-compile on every request (good for testing)
    enableCache:true, // Only compile the script once and cache the result in memory

    compiler: {
        es7: true, // Use ES7 syntax (async/await)
        promises: false, // Use Promises in the generated script. Requires that use have Promises in the browser somehow (NB: they are, in general, slow)
    }  
} ; 

Additionally, you need the following snippet somewhere in your browser code (apologies again - not well documented).

Function.prototype.$asyncbind = function thenTryCatch(self,catcher) {
        var fn = this ;
        fn.isAsync = true ;
        var thenable = function(result,error){
            try {
                return fn.call(self,result,error);
            } catch (ex) {
                return catcher.call(self,ex);
            }
        } ; 
        thenable.then = thenable ;
        return thenable ;
    };

I don't think I've missed anything out - if it doesn't work let me know. There's an example of a server that does this at https://github.com/MatAtBread/ApiPublisher/blob/master/test/server.js (another project of mine that use nodent).

If you want to push a doc or Wiki page with a decent How-To, feel free :)

@matthiasg
Copy link

I think nodent would get better traction if it supported browserify and was documented as such. Eg. our application uses gulp and browserify and we tried using async suport using babel, but the source maps where not really usable. nodent looks really nice for that.

@MatAtBread
Copy link
Owner

I'm not familiar with browserify (tho a quick look at the site gives me the idea). Can you point me at the appropriate docs for deploying "browserify" plugins or whatever, and I'll take a look. Alternatively, do you know what in nodent stops in working?

@MatAtBread
Copy link
Owner

@matthiasg I love a challenge, so a built a browserify-nodent. Take a look and let me know if it works for you. https://www.npmjs.com/package/browserify-nodent

@matthiasg
Copy link

@MatAtBread .. wow .. now THAT was fast :) .... i will try it today.. !

I hope i get the sourcemaps to work with babel after your compiler ... that would be awesome. I looked into nodent a few months ago and decided we can use async now, but we started on the browser side (for our v2) and thus i used babel async first. but after some hours with it yesterday, i found the source maps to be lacking a little.

The only concern i still have with nodent in the browser is the context your code runs in (thats what i will test today). The context is important in our Angular 1.x app since if you don't use the window.Promise class then it will not be bound to angular and thus angular won't refresh itself. I could simply patch your code most likely but i will test first.

@MatAtBread
Copy link
Owner

The browserify will default to "es7" mode. You'll need to add a "use nodent-promise" directive to use Promises, and as you'll see, it it will use whatever resolves to Promise.

Source maps with well, but I didn't try with Babel in the chain.

FYI, try the links in https://github.com/MatAtBread/nodent/blob/master/README.md#performance. In es7 (which should with fine with Promises), nodent is about 10x faster than Babel's implementation using regenerator!

Let me know if you have a problem with the transformer.... I'm new to browserify!

@epoberezkin
Copy link

Will transpiling work in the browser? I am considering to use it to transpile asynchronous validation functions generated by ajv. It doesn't do it yet, but I thought if it did and it used async/await then would I be able to transpile them? Check issue ajv-validator/ajv#40 for the context.

@MatAtBread
Copy link
Owner

If you mean run the whole transpiler in the browser, the short answer is no. That having been said, I've not tried in with browserify (there is a browserify plugin, but it's many for use on the command line).

If you mean transpiration in advance or on-the-fly, then yes, this use case is supported and in use in production.

@MatAtBread
Copy link
Owner

...and to be accurate, there's no code in the core transformer that couldn't run in a browser, so use via browserify in situ should be possible.

@epoberezkin
Copy link

I tried browserifying nodent, it does it ok... Why do you think it won't work in the browser? I guess I'll try :)

@matAtWork
Copy link
Collaborator

I don't - "use via browserify in situ should be possible" - I've just not tried

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants