Skip to content
This repository has been archived by the owner on Sep 18, 2020. It is now read-only.
/ flx Public archive

A JavaScript router that loves any framework view layer

Notifications You must be signed in to change notification settings

guilhermeaiolfi/flx

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#About (WIP)

NOTE: Do not use it! At least not just yet

This is a proof of concept trying to create a router that could be more flexible than the ones available.

Goals:

  • Lazy loading of routes and handlers
  • Framework agnostic
  • Full Control of the transition execution. Being able to go forward, rewind, reload, and go backwards
  • Be lightweight

It has the concept of layout managers to deal with how views are renderrf and connectrf with each other. So we could have a React Layout Manager, Ember Layout Manager, Ractive Layout Manager, and so on.

That way we can keep most of the code if we decided to change the view layer afterwards.

Currently there are managers for:

  • EmberJS (~200 LOC)
  • RactiveJS (~60 LOC)

It uses router-recognizer under the hood.

Usage

Paths and handlers are detached from each other. So we can have them in different files and load them on demand. But the main reason is so it's possible to have all the path structure known upfront so we can generate links and performe transitions. But only load the code for handlers/views/etc when it's really necessary.

Although layout managers do the heavy lifting for you. If you're not satisfied how it's being done, you can easily implement your on or implement hooks like enter, exit in your route handlers:

  app.router.map(function(match) {
    match("/").to("application", function(match) {
      match("/post").to("post",function(match) {
        match("/").to("post.index");
        match("/:id").to("post.edit");
      });
    });
  });
  app.router.addHandlers({
    "post": {
      enter: function(ctx) {
         this.lm.render("post", MyViewClass, ctx);
         ctx.transition.next(ctx); // see that we could use promises
                                   // or callbacks and continue async
      }
    },
    "post.index": {
      view: PostIndexView
    },
    "post.edit": {
      view: PostEditView
    }
  });

It supports reverse routing. So you can do:

  app.router.generate("post.index"); // outputs: /post

In the samples folder there are more complete examples of the things that are possible.

Help

If you like the idea and was looking for something like this. Please help, the code is very slim and easy to follow.

Note

It's a work in progress and there is no guarantee of maintenance of any kind. Use it at your own risk. The project doesn't even have a name. Any feedback/suggestion appreciated.

#Tests

It uses testem and QUnit for tests. THE TESTS DOESN'T COVER MUCH YET. To run them, invoke:

testem

About

A JavaScript router that loves any framework view layer

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published