Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 4x 4x 4x 4x 3x 3x 3x 2x 1x 1x 1x 3x 3x 3x 4x 4x 4x 3x 3x 3x 2x 2x 2x 1x 1x 1x 2x 2x 3x 3x 3x 3x 3x 3x 3x 3x 2x 1x 3x 3x 2x 2x 2x 3x 3x 3x 4x 5x 5x 5x | import { assign, Assign, Linker, TypeOf } from '@sgrud/core';
import { customElements } from '../component/registry';
import { Router } from './router';
/**
* Interface describing the shape of a **Route**. A **Route** must consist of at
* least a {@link path} and may specify a {@link component}, as well as
* {@link slots}, which will be rendered into the {@link RouterOutlet} when the
* **Route** is {@link Router.navigate}d to. Furthermore a **Route** may also
* specify {@link children}.
*
* @typeParam S - The **Route** {@link Route.path} string type.
*
* @example
* Define a **Route**:
* ```ts
* import { type Route } from '@sgrud/shell';
*
* const route: Route = {
* path: '',
* component: 'example-element',
* children: [
* {
* path: 'child',
* component: 'child-element'
* }
* ]
* };
* ```
*
* @see {@link Router}
*/
export interface Route<S extends string = string> {
/**
* Optional array of **children** for this {@link Route}.
*/
readonly children?: Route[];
/**
* Optional {@link Route} **component**.
*/
readonly component?: CustomElementTagName;
/**
* Required {@link Route} **path**.
*/
readonly path: S;
/**
* Optional mapping of elements to their **slots**.
*/
readonly slots?: Record<string, CustomElementTagName>;
}
/**
* Unique symbol used as property key by the {@link Route} decorator to
* associate the supplied {@link Route} configuration with the decorated
* element.
*/
export const route = Symbol('@sgrud/shell/router/route');
/**
* Class decorator factory. Applying the **Route** decorator to a custom element
* will associate the supplied `config` with the decorated element constructor.
* Further, the `config`ured children are iterated over and every child that is
* a custom element itself will be replaced by its respective {@link route}
* configuration or ignored, if no configuration was associated with the child.
* Finally, the processed `config` is added to the {@link Router}.
*
* @param config - The {@link Route} `config` for this element.
* @typeParam S - The {@link Route} path string type.
* @returns A class constructor decorator.
*
* @example
* Associate a {@link Route} `config` to a {@link Component}:
* ```ts
* import { Component, Route } from '@sgrud/shell';
* import { ChildComponent } from './child-component';
*
* @Route({
* path: 'example',
* children: [
* ChildComponent
* ]
* })
* @Component('example-element')
* export class ExampleComponent extends HTMLElement implements Component {}
* ```
*
* @see {@link Router}
*/
export function Route<S extends string>(config: Assign<{
children?: (Route | CustomElementConstructor & { [route]?: Route })[];
slots?: Record<string, CustomElementTagName | CustomElementConstructor>;
}, Omit<Route<S>, 'component'>> & {
/**
* Optional **parent** for this {@link Route}.
*/
parent?: Route | CustomElementConstructor & { [route]?: Route };
}) {
/**
* @param constructor - The class `constructor` to be decorated.
*/
return function<T extends CustomElementConstructor & { [route]?: Route<S> }>(
constructor: T
): void {
const name = customElements.getName(constructor);
if (name) {
const router = new Linker<typeof Router>().get(Router);
if (config.children?.length) {
for (let i = config.children.length - 1; i >= 0; i--) {
const child = config.children[i];
if (TypeOf.function(child)) {
if (child[route]) {
config.children[i] = child[route]!;
} else {
config.children.splice(i, 1);
}
}
}
}
for (const key in config.slots) {
const component = config.slots[key];
if (TypeOf.function(component)) {
const slot = customElements.getName(component);
if (slot) {
config.slots[key] = slot as CustomElementTagName;
} else {
delete config.slots[key];
}
}
}
router.add(constructor[route] = assign(config as Route<S>, {
component: name
}));
if (config.parent) {
const parent = TypeOf.function(config.parent)
? config.parent[route]
: config.parent;
if (delete config.parent && parent) {
router.add(assign(parent, {
// eslint-disable-next-line
children: (parent.children || []).concat(constructor[route]!)
}));
}
}
}
};
}
|