Upgrading 2.3's can/control/route


#1

From this gitter thread

@tracer99 asked how to upgrade code like this:

   '/:service route': function(urlContext) {
                this.login(urlContext);
                if (urlContext.service == 'logout') {
                    route.attr({}, true);
                }
            },

Here are my quick suggestions:

Try bringing back can-control-route

I’d create a local copy of https://github.com/canjs/canjs/blob/2.3-legacy/control/route/route.js in your project, but with updated imports.

It seems like processors still exist in 3.0: https://github.com/canjs/can-control/blob/v3.2.4/can-control.js

It’s likely this will fix your problem.

If this does work, let me know. We actually created a https://github.com/canjs/can-control-route, but it seems this was de-prioritized. I’d happily publish it for 3.X and 4.X/5.X.

I actually think this will work for 5.X

Migrate to a more modern approach

A 1:1 mimic of the following:

'/:service route': function(urlContext) {
                this.login(urlContext);
                if (urlContext.service == 'logout') {
                    route.attr({}, true);
                }
},

might look like:

// somewhere
route.regsiter("/{service}");

// in the VM
connectedCallback(){
  this.listenTo(route.urlData, function(ev, url){
    if( route.rule(url ) === "/{service}") {
                var urlContext = route.data.attr() //-> attr if a can-map
                this.login(urlContext);
                if (urlContext.service == 'logout') {
                    route.attr({}, true);
                }
    }
  })
}

You could build something to make this more simple probably …

import {value} from "can";
function routeDataOnRule(rule){
  route.register(rule);
  value.resolvedBy(function( {listenTo} ){
    this.listenTo(route.urlData, function(ev, url){
      if( route.rule(url ) === rule {
                resolve( canReflect.serialize( route.data)  );
      }
    })
  })
}


// in the VM
connectedCallback(){
  this.listenTo( routeDataOnRule("/{service}") , function(urlContext){
                this.login(urlContext);
                if (urlContext.service == 'logout') {
                    route.attr({}, true);
                }
  })
}