Nanananananananana.. Pat Man!

    aurelia-router-metadata
    TypeScript icon, indicating that this package has built-in type declarations

    0.12.0 • Public • Published

    aurelia-router-metadata

    Metadata extension for aurelia-router aimed at simplifying router configuration and providing "eager loading" capabilities.

    The @routeConfig({...}) and @configureRouter([...]) decorators largely eliminate the need for configureRouter() and make configuration a bit more like the [Route()] attributes in ASP.NET.

    NEW SINCE 0.9: Static code analysis and smart autoconfiguration. See the demo app pages for example config combinations that work.

    This is enabled by default. It can be disabled in the settings (see below).

    View a LIVE DEMO

    Installation

    Install the npm dependency via

    npm i aurelia-router-metadata

    or via the Aurelia CLI

    au install aurelia-router-metadata

    If you are using webpack, no additional steps are required. Simply import a decorator and it will work.

    Aurelia-CLI

    For Aurelia-CLI projects based on RequireJS or SystemJS, the following will install and declare the dependency in your aurelia.json:

    au install aurelia-router-metadata

    or if you have already installed and only need to add the dependency to aurelia.json:

    au import aurelia-router-metadata

    alternatively you can manually add the dependency to your vendor.bundles:

    "dependencies"[
      {
        "name": "aurelia-router-metadata",
        "path": "../node_modules/aurelia-router-metadata/dist/amd",
        "main": "aurelia-router-metadata"
      }
    ]

    Configuration

    IMPORTANT: as of version 0.9, configuring the plugin via FrameworkConfiguration is mandatory

    import { Aurelia } from "aurelia-framework";
    import { RouterMetadataSettings } from "aurelia-router-metadata";
     
    export function configure(au: Aurelia) {
      au.use.standardConfiguration();
     
      au.use.plugin("aurelia-router-metadata", (settings: RouterMetadataSettings) => {
        settings.routerConfiguration.title = "Foo";
        settings.enableStaticAnalysis = false; // enabled by default
      });
     
      au.start().then(() => au.setRoot());
    }

    Usage

    • With decorators
    import { configureRouter } from "aurelia-router-metadata";
     
    // Make sure to wrap these in `PLATFORM.moduleName` when using webpack
    @configureRouter([
      "pages/foo",
      "pages/bar",
      "pages/default"
    ])
    export class App { }
     
    ...
     
    export class Foo { }
     
    ...
     
    export class FooBar { }
     
    ...
     
    import { routeConfig } from "aurelia-router-metadata";
     
    @routeConfig({ route: "", nav: false })
    export class Default {}
     
    • Without decorators
    export class App {
      public configureRouter(config: RouterConfiguration, router: Router): void {
        // Will be statically analyzed and automatically configured
        config.map([
          { moduleId: "pages/foo" },
          { moduleId: "pages/bar" },
          { moduleId: "pages/default" }
        ]);
      }
    }
    • Combined
    @configureRouter(["pages/foo", "pages/bar"])
    export class App {
      public configureRouter(config: RouterConfiguration, router: Router): void {
        config.map({ moduleId: "pages/default" });
      }
    }
     

    Building a navigation menu

    Conceptually:

    nav-menu.html

    <template bindable="routes">
      <ul>
        <li repeat.for="route of routes">
          <a href.bind="route.settings.path">${route.title}</a>
          <template if.bind="route.settings.childRoutes">
            <nav-menu routes.bind="child.settings.childRoutes"></nav-menu>
          </template>
        </li>
      </ul>
    </template>

    For a working example see the live demo

    Feedback

    It's still in early development and needs more testing and feedback.

    Feel free to reach out with any questions/issues/suggestions :)

    Building The Code

    1. From the project folder, execute the following command:
    yarn/npm install
    
    1. To build the code:
    npm run build
    

    Running The Tests

    1. To run the tests
    npm run test
    
    1. To continuously run the tests
    npm run develop
    

    Install

    npm i aurelia-router-metadata

    DownloadsWeekly Downloads

    32

    Version

    0.12.0

    License

    MIT

    Unpacked Size

    3.6 MB

    Total Files

    194

    Last publish

    Collaborators

    • fkleuver