Options
All
  • Public
  • Public/Protected
  • All
Menu

External module @corpuscule/router

This module provides a straightforward but comprehensive router solution for web components via the Universal Router.

Index

Variables

Const gear

gear: PropertyDecorator

A default version of the @gearAdvanced with the token already provided.

Const isProviderAdvanced

isProviderAdvanced: isProvider

Works as a isProvider for the @provider.

Functions

createRouter

  • createRouter<C, R>(routes: Route | ReadonlyArray<Route<C, R>>, options?: Options<C, R>): UniversalRouter<C, R>
  • A function that creates an instance of the Universal Router. For the work with the current module, it is essential to use this function instead of the direct creation of the instance of the Universal Router because it adds specific functionality to the Universal Router.

    Type parameters

    • C: Context

    • R

    Parameters

    • routes: Route | ReadonlyArray<Route<C, R>>

      a list of Universal Router routes.

    • Optional options: Options<C, R>

      a list of Universal Router options.

    Returns UniversalRouter<C, R>

    an instance of the Universal Router.

createRouterToken

  • createRouterToken(): Token

gearAdvanced

  • gearAdvanced(token: Token): PropertyDecorator
  • A decorator that works similar to the @value, but with some specific features.

    @provider

    Applied to a property of the class marked with the @provider decorator, current decorator allows it to receive a router and send it to consumers.

    @outlet

    Applied to a property of the class marked with the @outlet decorator, current decorator allows it to receive result the route action returns.

    Parameters

    • token: Token

      a token issued by a createRouterToken function that connects all decorators in a single working system.

    Returns PropertyDecorator

isProvider

  • isProvider(klass: unknown): boolean

navigate

  • navigate(path: string, contextData?: unknown): void
  • A function that navigates the browser to the new URL.

    Parameters

    • path: string

      a new URL to navigate to.

    • Optional contextData: unknown

      some data you want to use in the route action. It will be accessible as a part of the context parameter:

      const route: Route<any, any> = {
        action({data}: RouteContext<any, any>) {
          // use `data` in some way
        }
      }

    Returns void

outlet

  • outlet(routes: ReadonlyArray<Route>): ClassDecorator

outletAdvanced

  • outletAdvanced<C, R>(token: Token, routes: ReadonlyArray<Route<C, R>>): ClassDecorator
  • A decorator that makes a class a router outlet. The outlet is a central part of the whole routing process because the content of the outlet depends on the current route.

    The outlet class requires a property marked with the @gear decorator. This property will contain a content the current router provides.

    Type parameters

    • C: Context

    • R

    Parameters

    • token: Token

      a token issued by a createRouterToken function that connects all decorators in a single working system.

    • routes: ReadonlyArray<Route<C, R>>

      a list of routes the current outlet works with. You can use both routes array that is sent to the createRouter function or one of the nested children array.

      You can also put outlet elements one into another following the nested model of the routes you use.

      Example

      const routes = [
        {
          path: '/foo1',
          action: () => '<my-foo></my-foo>',
          children: [
            {
              path: '/bar1',
              action: () => '<div>Bar #1</div>',
            },
            {
              path: '/bar2',
              action: () => '<div>Bar #2</div>',
            },
          ]
        },
        {
          path: '/foo2',
          action: () => '<my-baz></my-baz>',
        },
      ];
      
      @outlet(routes);
      class App extends HTMLElement {
        @gear set result(value: string) {
          this.innerHTML = value;
        }
      }
      
      customElements.define('my-app', App);
      
      @outlet(routes[0].children)
      class Foo extends HTMLElement {
        @gear set result(value: string) {
          this.innerHTML = value;
        }
      }
      
      customElements.define('my-foo', Foo);
      
      navigate('/foo1/bar2');

      The following HTML will be displayed:

      <my-app>
        <my-foo>
          <div>Bar #2</div>
        </my-foo>
      </my-app>

    Returns ClassDecorator

provider

providerAdvanced

Generated using TypeDoc