Crelte Docs

Appearance

crelte / routing / Request

Class: Request ​

A Request is a Route with some extra options you get a Request from the onRequest event or in a loadGlobal function.

Extends ​

Constructors ​

Constructor ​

ts
new Request(
   url, 
   site, 
   opts?): Request;

Create a new Request

Parameters ​

url ​

string | URL

site ​

Site

opts? ​

RequestOptions = {}

Returns ​

Request

Overrides ​

BaseRoute.constructor

Properties ​

disableLoadData ​

ts
disableLoadData: boolean;

Disable loading data

Default ​

ts
false

disableScroll ​

ts
disableScroll: boolean;

Disable scrolling for this request

Default ​

ts
false

entry ​

ts
entry: Entry | null;

The entry of the request once loaded

index ​

ts
index: number;

the position in the browser history of this route this allows to find out if we can go back

Inherited from ​

BaseRoute.index

loadedData ​

ts
loadedData: Record<string, any> | null;

The loaded data of the request

origin ​

ts
origin: RouteOrigin;

The origin of this route, See RouteOrigin

Inherited from ​

BaseRoute.origin

scrollY ​

ts
scrollY: number | null;

The scroll position of the current route

Note ​

This does not have to represent the current scroll position should more be used internally.

It might be useful for a new request to specify the wanted scroll position

Inherited from ​

BaseRoute.scrollY

site ​

ts
site: Site;

The Site of the route

Note ​

In the beforeRequest event the site might not match the url and could be the default site or one that matches the users language.

If that is important call route.siteMatches() to verify

Inherited from ​

BaseRoute.site

statusCode ​

ts
statusCode: number | null;

The Status code that should be returned for a redirect

template ​

ts
template: TemplateModule | null;

The template module of the request once loaded

url ​

ts
url: URL;

The url of the route

Inherited from ​

BaseRoute.url

Accessors ​

baseUrl ​

Get Signature ​

ts
get baseUrl(): string;

Returns the base url of the route

Never ends with a slash

Example ​

js
const site = _; // site with url https://example.com/foo
const route = new Route('https://example.com/foo/bar/', null);
console.log(route.baseUrl); // 'https://example.com/foo'

const site2 = _; // site with url https://example.com/other
const route2 = new Route('https://example.com/foo/bar/', site2);
console.log(route2.baseUrl); // 'https://example.com'
Returns ​

string

Inherited from ​

BaseRoute.baseUrl

cancelled ​

Get Signature ​

ts
get cancelled(): boolean;
Returns ​

boolean

hash ​

Get Signature ​

ts
get hash(): string;

Returns the hash of the route

Example ​

js
const route = new Route('https://example.com/foo/bar/#hash', null);
console.log(route.hash); // '#hash'
Returns ​

string

Set Signature ​

ts
set hash(hash): void;

Set the hash of the route

Example ​

js
const route = new Route('https://example.com/foo/bar/', null);
route.hash = '#hash';
console.log(route.url.href); // 'https://example.com/foo/bar/#hash'
Parameters ​
hash ​

string

Returns ​

void

Inherited from ​

BaseRoute.hash

Get Signature ​

ts
get search(): URLSearchParams;

Returns the search params

Note ​

You might also have a look at getSearchParam and setSearchParam

Example ​

js
const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
console.log(route.search.get('a')); // '1'
Returns ​

URLSearchParams

Inherited from ​

BaseRoute.search

uri ​

Get Signature ​

ts
get uri(): string;

Returns the uri of the route

Never ends with a slash

Example ​

js
const site = _; // site with url https://example.com/fo
const route = new Route('https://example.com/foo/bar/', site);
console.log(route.uri); // '/bar'

const site2 = _; // site with url https://example.com/other
const route2 = new Route('https://example.com/foo/bar/?a=1', site2);
console.log(route2.uri); // '/foo/bar'
Returns ​

string

Inherited from ​

BaseRoute.uri

Methods ​

cancel() ​

ts
cancel(): void;

Cancel this request

Returns ​

void

canGoBack() ​

ts
canGoBack(): boolean;

Checks if there are previous routes which would allow it to go back

Returns ​

boolean

Inherited from ​

BaseRoute.canGoBack

clone() ​

ts
clone(): Request;

Create a copy of the request

without including the entry, template, loadedData or cancelled state

Is this what we wan't, maybe it should copy everything

Returns ​

Request

Overrides ​

BaseRoute.clone

delayRender() ​

ts
delayRender(): DelayRender;

With delayRender you can make sure that the render waits until you are ready. This is useful for building page transitions.

Important ​

If you call delayRender you need to call ready/remove or the render will never happen

Example ​

js
import { onRequest } from 'crelte';
import { animate } from 'motion';

onRequest(async req => {
    if (req.origin !== 'click' && req.origin !== 'manual') return;

    const delay = req.delayRender();

    await animate(plane, { x: '0%' });

    // wait until the new page is ready to be rendered
    // if the render was cancelled we return
    if (await delay.ready()) return;

    await animate(plane, { x: '100%' });
});

Returns ​

DelayRender

eq() ​

ts
eq(route): boolean | null;

Checks if the route is equal to another route

This checks the url but search params do not have to be in the same order

Note ​

This only check the url, not site or anything else.

Parameters ​

route ​

BaseRoute | null

Returns ​

boolean | null

Inherited from ​

BaseRoute.eq

eqHash() ​

ts
eqHash(route): boolean | null;

Checks if the hash is equal to another route

Parameters ​

route ​

BaseRoute | null

Returns ​

boolean | null

Inherited from ​

BaseRoute.eqHash

eqSearch() ​

ts
eqSearch(route): boolean | null;

Checks if the search params are equal to another route

Parameters ​

route ​

BaseRoute | null

Returns ​

boolean | null

Inherited from ​

BaseRoute.eqSearch

eqUrl() ​

ts
eqUrl(route): boolean | null;

Checks if the route is equal to another route

This does not check the search params or hash

Parameters ​

route ​

BaseRoute | null

Returns ​

boolean | null

Inherited from ​

BaseRoute.eqUrl

getContext() ​

ts
getContext<T>(key): T | null;

Returns a context value if it exists.

Type Parameters ​

T ​

T = any

Parameters ​

key ​

string

Returns ​

T | null

Inherited from ​

BaseRoute.getContext

getSearchParam() ​

ts
getSearchParam(key): string | null;

Gets the search param

Example ​

js
const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
console.log(route.getSearchParam('a')); // '1'

Parameters ​

key ​

string

Returns ​

string | null

Inherited from ​

BaseRoute.getSearchParam

getSiteToken() ​

ts
getSiteToken(): string | null;

Returns the site preview token, or null if it is missing or empty.

Returns ​

string | null

Inherited from ​

BaseRoute.getSiteToken

getState() ​

ts
getState<T>(key): T | null;

Returns a state value if it exists.

Type Parameters ​

T ​

T = any

Parameters ​

key ​

string

Returns ​

T | null

Inherited from ​

BaseRoute.getState

inLivePreview() ​

ts
inLivePreview(): boolean;

Returns true if the route is in live preview mode

Returns ​

boolean

Inherited from ​

BaseRoute.inLivePreview

setContext() ​

ts
setContext<T>(key, value): void;

Sets a context value. If the value is null or undefined, the key will be removed.

When to use context ​

Context is used to pass data to onRoute and onRequest handlers or exchange data between loadData calls. This context is not persistent and should be considered valid only for the current request/route. The context is not cloned in the clone call and will be the same object.

Type Parameters ​

T ​

T

Parameters ​

key ​

string

value ​

T | null | undefined

Returns ​

void

Inherited from ​

BaseRoute.setContext

setSearchParam() ​

ts
setSearchParam(key, value?): void;

Sets the search param or removes it if the value is null, undefined or an empty string

Example ​

js
const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
route.setSearchParam('a', '3');
console.log(route.url.href); // 'https://example.com/foo/bar/?a=3&b=2'

route.setSearchParam('a', null);
console.log(route.url.href); // 'https://example.com/foo/bar/?b=2'

Parameters ​

key ​

string

value? ​

string | number | null

Returns ​

void

Inherited from ​

BaseRoute.setSearchParam

setState() ​

ts
setState<T>(key, value): void;

Sets a state value. If the value is null or undefined, the key will be removed.

When to use state ​

State is used to store additional information that persists across route changes. The State is only available in the client code since it is stored using window.history.

Consider using setSearchParam instead to enable server side rendering.

Type Parameters ​

T ​

T

Parameters ​

key ​

string

value ​

T | null | undefined

Returns ​

void

Inherited from ​

BaseRoute.setState

siteMatches() ​

ts
siteMatches(): boolean;

Returns if the site matches the url

Returns ​

boolean

Inherited from ​

BaseRoute.siteMatches

toRoute() ​

ts
toRoute(): Route;

Create a Route from the Request

Throws ​

if the entry, template or loadedData is missing or the request was cancelled

Returns ​

Route

fromRoute() ​

ts
static fromRoute(route, opts?): Request;

Create a Request from a Route

Clears the entry, template, and loadedData todo should it?

Parameters ​

route ​

Route

opts? ​

RequestOptions = {}

Returns ​

Request