Slim Router JS

Generate Slim Router path URLs using Javascript.

This package provides Javascript code to generate URLs for named routes in Slim Framework using Javascript:, _(*1)

var url = Slim.Router.pathFor('hello', {'name': 'World'});

The Slim.Router object provides the methods pathFor() and relativePathFor() which work the same as the Slim\Router::pathFor() and Slim\Router:relativePathFor() methods in PHP., _(*2)

Installation

Install the package using composer:, _(*3)

composer require llvdl/slim-router-js

Then add a route to generate the Javascript code for the Slim.Router object:, _(*4)

$app = new \Slim\App();

// Add router javascript
$app->get('/router.js', function($req, $res, $args) {
    $routerJs = new \Llvdl\Slim\RouterJs($this->router);
    return $routerJs->getRouterJavascriptResponse();
});

Note: router.js is considered as a static file by the PHP built-in webserver. Either use a router script, or use a pattern without an extension, for example '/router`. See the PHP documentation for more information., _(*5)

Finally, in the HTML file, import the router.js file:, _(*6)

<html>
  <head>
    <script src="/router.js"></script>
  </head>
</html>

Usage

To make a route available in Slim.Router in javascript, add a name to it:, _(*7)

$app->get('/hello/{name}', function($req, $res) {
  // ...
})->setName('hello');

Note: routes without a name are not available to Slim.Router in javascript., _(*8)

In the HTML document, import router.js. The URL for the named route can then be generated using Slim.Router.pathFor:, _(*9)

<html>
  <head>
    <script src="/router.js"></script>
  </head>
  <body>
    <input id="name" type="text"/>
    <button id="submit-button">Go</button>
    <script>
      document.getElementById('submit-button').on('click', function() {
        var name = document.getElementById('name').value;
        var url = Slim.Router.pathFor('hello', {name: name});
        alert(url);
      });
    </script>
  </body>
</html>

See the example/ folder in this repository for an example script., _(*10)

RouterJs methods:

RouterJs is the PHP class that generates the Javascript code. It provides the following methods:, _(*11)

__constructor(\Slim\Router $router, bool $minified): constructor, _(*12)

By default a minified javascript is returned. Set $minified to false for non-minified javascript code., _(*13)
getRouterJavascriptResponse(): Slim\Response, _(*14)

Returns a HTTP response for use in an action, _(*15)
getRouterJavascript(): string, _(*16)

Generates the javascript code, _(*17)

Slim.Router methods

The Slim.Router object provides the following methods:, _(*18)

pathFor(name, data, queryParams)
relativePathFor(name, data, queryParams)

These method work as the Slim\Router::pathFor() and Slim\Router::relativePathFor() methods in PHP., _(*19)

Tests

The repository contains PHPUnit tests for the PHP code. To run these:, _(*20)

phpunit -c app/phpunit.xml

There are no automatic tests for the javascript code. It has been manually tested, and found to be working, using the example code in the following browsers:, _(*21)

Chrome and Chromium
Firefox
Microsoft Edge
Microsoft Internet Explorer 11

Todo

This section lists some future functional improvements that can be made:, _(*22)

Filter exposed routes, for example by route argument, _(*23)
Caching, _(*24)

Note that middleware can be used to cache the response., _(*25)
Allow for inclusing in a Javascript bundler, for example Webpack, _(*26)