Lime Web Components API Documentation - v7.4.0
    Preparing search index...

    Interface RouteComponent

    Interface for components that can be routed to

    Components registered with RouteRegistry should implement this interface to receive routing information such as query parameters, hash fragments, and navigation state.

    This extends LimeWebComponent, so all routed components also receive the standard platform and context props.

    import { Event, Prop, type EventEmitter } from '@stencil/core';
    import type {
        LimeWebComponentContext,
        LimeWebComponentPlatform,
        RouteComponent,
    } from '@limetech/lime-web-components';

    type SearchOrigin = {
        fromSearch: boolean;
        searchTerm: string;
    };

    // Registered for '/products/:productId' and visited as
    // /products/123?category=electronics&inStock=true#reviews
    class ProductDetails implements RouteComponent {
        @Prop()
        public platform: LimeWebComponentPlatform;

        @Prop()
        public context: LimeWebComponentContext;

        @Prop()
        public query: Record<string, unknown>;

        @Prop()
        public hash: string;

        @Prop()
        public state: unknown;

        @Event()
        public titleChanged: EventEmitter<string>;

        public componentDidLoad() {
            // 'electronics'
            const category = this.query['category'];

            // true, not 'true'
            const inStock = this.query['inStock'];

            // '#reviews' -> 'reviews'
            const section = this.hash.slice(1);
            document.querySelector(`#${section}`)?.scrollIntoView();

            // Whatever the caller passed to Navigator.navigate
            const origin = this.state as SearchOrigin | undefined;

            if (origin?.fromSearch) {
                const term = origin.searchTerm;
            }

            this.titleChanged.emit('Product Details');
        }
    }
    interface RouteComponent {
        context: LimeWebComponentContext;
        hash?: string;
        platform: LimeWebComponentPlatform;
        query?: Record<string, unknown>;
        state?: unknown;
        titleChanged?: { emit: (data?: string) => CustomEvent<string | undefined> };
    }

    Hierarchy (View Summary)

    Index

    Properties

    context hash? platform query? state? titleChanged?

    Properties

    context: LimeWebComponentContext

    The context describing where this component is running.

    The context provides information about the current limetype and record ID (if viewing/editing a specific record). Components can use this to load relevant data and understand their operating environment.

    import { PlatformServiceName } from '@limetech/lime-web-components';

    const repository = platform.get(PlatformServiceName.LimeObjectRepository);

    if (context.limetype && context.id) {
        const limeObject = await repository.loadObject(
            context.limetype,
            context.id
        );
    }
    hash?: string

    URL fragment identifier from the current location

    The hash portion of the URL, including the leading # character.

    platform: LimeWebComponentPlatform

    Reference to the platform service container.

    Use this to access all platform services like repositories, HTTP client, command bus, navigator, and more. The platform instance is shared across all components in the same application context.

    import { PlatformServiceName } from '@limetech/lime-web-components';

    const http = platform.get(PlatformServiceName.Http);
    const commandBus = platform.get(PlatformServiceName.CommandBus);
    const repository = platform.get(PlatformServiceName.LimeObjectRepository);
    query?: Record<string, unknown>

    URL query parameters from the current location

    Parsed from the URL query string. Values are automatically parsed using JSON.parse() when possible.

    state?: unknown

    Navigation state from the current location

    Custom state data passed during navigation via Navigator.navigate. This state is stored in the browser's history entry.

    titleChanged?: { emit: (data?: string) => CustomEvent<string | undefined> }

    Event emitter for changing the document title

    Emit this event to update the browser's document title. Emit the name of the page on its own, the host decides how to join it with the name of the application.

    Settings

    Member Visibility

    On This Page

    Properties