crelte 0.4.8 → 0.5.0-alpha.2

package/dist/routing/BaseRoute.js

@@ -0,0 +1,349 @@
+import { objClone } from '../utils.js';
+import { trimSlashEnd } from './utils.js';
+/**
+ * A Route contains information about the current page for example the url and
+ * the site
+ */
+export default class BaseRoute {
+    /**
+     * The url of the route
+     */
+    url;
+    /**
+     * The site of the route
+     *
+     * ## Note
+     * The site might not always match with the current route
+     * but be the site default site or one that matches the
+     * users language.
+     *
+     * If that is important call `route.siteMatches()` to verify
+     */
+    site;
+    /**
+     * 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
+     */
+    scrollY;
+    /**
+     * the position in the browser history of this route
+     * this allows to find out if we can go back
+     */
+    index;
+    /**
+     * The origin of this route, See [[RouteOrigin]]
+     */
+    origin;
+    /**
+     * @hidden
+     * State data that can be used to store additional information
+     */
+    _state;
+    /**
+     * @hidden
+     * Any data that should be passed to onRoute and onRequest handlers
+     * or exchanged between loadData's
+     * This context is not persistant and should be considered "valid"
+     * only for the current request / route
+     *
+     * ## Note
+     * Consider using state instead. This will not be cloned in the clone
+     * call so will always be the same object
+     */
+    _context;
+    /**
+     * Creates a new Route
+     */
+    constructor(url, site, opts = {}) {
+        this.url = new URL(url);
+        this.site = site;
+        this.scrollY = opts.scrollY ?? null;
+        this.index = opts.index ?? 0;
+        this.origin = opts.origin ?? 'manual';
+        this._state = opts.state ?? {};
+        this._context = opts.context ?? {};
+    }
+    /**
+     * Returns the uri of the route
+     *
+     * Never ends with a slash
+     *
+     * ## Example
+     * ```
+     * 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'
+     * ```
+     */
+    get uri() {
+        if (this.siteMatches()) {
+            return trimSlashEnd(this.url.pathname.substring(this.site.uri.length));
+        }
+        return trimSlashEnd(this.url.pathname);
+    }
+    /**
+     * Returns the base url of the route
+     *
+     * Never ends with a slash
+     *
+     * ## Example
+     * ```
+     * 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'
+     * ```
+     */
+    get baseUrl() {
+        if (this.siteMatches())
+            return trimSlashEnd(this.site.url.href);
+        return this.url.origin;
+    }
+    /**
+     * Returns the search params
+     *
+     * ## Note
+     * You might also have a look at `getSearchParam` and `setSearchParam`
+     *
+     * ## Example
+     * ```
+     * const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
+     * console.log(route.search.get('a')); // '1'
+     * ```
+     */
+    get search() {
+        return this.url.searchParams;
+    }
+    /**
+     * Returns the hash of the route
+     *
+     * ## Example
+     * ```
+     * const route = new Route('https://example.com/foo/bar/#hash', null);
+     * console.log(route.hash); // '#hash'
+     * ```
+     */
+    get hash() {
+        return this.url.hash;
+    }
+    /**
+     * Set the hash of the route
+     *
+     * ## Example
+     * ```
+     * const route = new Route('https://example.com/foo/bar/', null);
+     * route.hash = '#hash';
+     * console.log(route.url.href); // 'https://example.com/foo/bar/#hash'
+     * ```
+     */
+    set hash(hash) {
+        this.url.hash = hash;
+    }
+    /**
+     * Checks if there are previous routes which would allow it to go back
+     */
+    canGoBack() {
+        return !!this.index;
+    }
+    /**
+     * Gets the search param
+     *
+     * ## Example
+     * ```
+     * const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
+     * console.log(route.getSearchParam('a')); // '1'
+     * ```
+     */
+    getSearchParam(key) {
+        return this.search.get(key);
+    }
+    /**
+     * Sets the search param or removes it if the value is null, undefined or an
+     * empty string
+     *
+     * ## Example
+     * ```
+     * 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'
+     * ```
+     */
+    setSearchParam(key, value) {
+        const deleteValue = typeof value === 'undefined' ||
+            value === null ||
+            (typeof value === 'string' && value === '');
+        if (!deleteValue) {
+            this.search.set(key, value);
+        }
+        else {
+            this.search.delete(key);
+        }
+    }
+    /**
+     * Returns a state value if it exists.
+     */
+    getState(key) {
+        return this._state[key] ?? null;
+    }
+    /**
+     * 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.
+     */
+    setState(key, value) {
+        if (typeof value === 'undefined' || value === null) {
+            delete this._state[key];
+        }
+        else {
+            this._state[key] = value;
+        }
+    }
+    /**
+     * Returns a context value if it exists.
+     */
+    getContext(key) {
+        return this._context[key] ?? null;
+    }
+    /**
+     * 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.
+     */
+    setContext(key, value) {
+        if (typeof value === 'undefined' || value === null) {
+            delete this._context[key];
+        }
+        else {
+            this._context[key] = value;
+        }
+    }
+    /**
+     * Returns true if the route is in live preview mode
+     */
+    inLivePreview() {
+        return !!this.search.get('x-craft-live-preview');
+    }
+    /**
+     * Returns if the site matches the url
+     */
+    siteMatches() {
+        if (this.url.origin !== this.site.url.origin)
+            return false;
+        // now we need to validate the pathname we should make sure both end with a slash
+        // todo can we do this better?
+        // make sure that urls like pathname: /abcbc and site: /abc don't match
+        return (this.url.pathname + '/').startsWith(
+        // uri never returns a slash at the end
+        this.site.uri + '/');
+    }
+    /**
+     * 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.
+     */
+    eq(route) {
+        return (route &&
+            this.eqUrl(route) &&
+            this.eqSearch(route) &&
+            this.eqHash(route));
+    }
+    /**
+     * Checks if the route is equal to another route
+     *
+     * This does not check the search params or hash
+     */
+    eqUrl(route) {
+        return (route &&
+            this.url.pathname === route.url.pathname &&
+            this.url.origin === route.url.origin);
+    }
+    /**
+     * Checks if the search params are equal to another route
+     */
+    eqSearch(route) {
+        const searchEq = (a, b) => {
+            if (a.size !== b.size)
+                return false;
+            a.sort();
+            b.sort();
+            const aEntries = Array.from(a.entries());
+            const bEntries = Array.from(b.entries());
+            return aEntries
+                .map((a, i) => [a, bEntries[i]])
+                .every(([[ak, av], [bk, bv]]) => ak === bk && av === bv);
+        };
+        return route && searchEq(this.search, route.search);
+    }
+    /**
+     * Checks if the hash is equal to another route
+     */
+    eqHash(route) {
+        return route && this.hash === route.hash;
+    }
+    /**
+     * Create a copy of the Route
+     *
+     * ## Note
+     * This does not make a copy of the template or context
+     */
+    clone() {
+        return new BaseRoute(this.url.href, this.site, {
+            scrollY: this.scrollY ?? undefined,
+            index: this.index,
+            origin: this.origin,
+            state: objClone(this._state),
+            context: this._context,
+        });
+    }
+    /** @hidden */
+    _fillFromState(state) {
+        // todo should this be here?
+        // not better in the request?
+        if (typeof state?.route?.scrollY === 'number')
+            this.scrollY = state.route.scrollY;
+        if (typeof state?.route?.index === 'number')
+            this.index = state.route.index;
+        if (typeof state?.state === 'object' && state.state !== null) {
+            this._state = state.state;
+        }
+    }
+    /** @hidden */
+    _toState() {
+        return {
+            route: {
+                scrollY: this.scrollY,
+                index: this.index,
+            },
+            state: this._state,
+        };
+    }
+}

package/dist/routing/BaseRouter.d.ts

@@ -0,0 +1,210 @@
+/**
+ * This is the Router which we internally extend from
+ * it does not directly get exposed
+ */
+import { Writable } from 'crelte-std/stores';
+import Request, { RequestOptions } from './Request.js';
+import Route from './Route.js';
+import Site, { SiteFromGraphQl } from './Site.js';
+import LoadRunner, { LoadRunnerOptions } from './LoadRunner.js';
+import { Entry, type CrelteRequest } from '../index.js';
+import { Listeners } from 'crelte-std/sync';
+export type BaseRouterOptions = {} & LoadRunnerOptions;
+export default class BaseRouter {
+    sites: Site[];
+    private sitesByLanguage;
+    /**
+     * The current route
+     *
+     * ## Note
+     * Will always contain a route except in the first loadData call
+     */
+    route: Writable<Route | null>;
+    /**
+     * The current site
+     *
+     * ## Note
+     * Will always contain a site except in the first loadData call
+     */
+    site: Writable<Site | null>;
+    /**
+     * The current entry
+     *
+     *  ## Note
+     * Will always contain an entry except in the first loadData call
+     */
+    entry: Writable<Entry | null>;
+    request: Request | null;
+    /**
+     * The loading flag, specifies if a page is currently
+     * getting loaded
+     */
+    loading: Writable<boolean>;
+    /**
+     * The loading progress, the value is between 0 and 1
+     */
+    loadingProgress: Writable<number>;
+    onNewCrelteRequest: (req: Request) => CrelteRequest;
+    /**
+     * Not sure the naming here is great but
+     */
+    onBeforeRequest: (cr: CrelteRequest) => Promise<void> | void;
+    onRequestListeners: Listeners<[CrelteRequest]>;
+    loadRunner: LoadRunner;
+    onRouteListeners: Listeners<[Route]>;
+    onRender: (cr: CrelteRequest, 
+    /**
+     * ## Throws
+     * if the route is missing entry, template or loadedData
+     */
+    readyForRoute: () => Route, domUpdated: (cr: CrelteRequest, route: Route) => void) => Promise<Route> | Route;
+    constructor(sites: SiteFromGraphQl[], opts: BaseRouterOptions);
+    /**
+     * Get the default site
+     */
+    primarySite(): Site;
+    /**
+     * Should be override by environment specific router
+     *
+     * This should be based on the language
+     *
+     * todo check that the router uses the correct sites for each function
+     */
+    defaultSite(): Site;
+    /**
+     * Get a site and if possible use the accept lang header.
+     *
+     * @param acceptLang Accept Language header.
+     */
+    siteByAcceptLang(acceptLang?: string | null): Site;
+    /**
+     * Tries to get a site by it's id
+     */
+    siteById(id: number): Site | null;
+    /**
+     * Resolve a url or Route and convert it to a Request
+     *
+     * @param target
+     * @param opts, any option present will override the value in target
+     * @return Returns null if the url does not match our host (the protocol get's ignored)
+     */
+    targetToRequest(target: string | URL | Route | Request, opts?: RequestOptions): Request;
+    /**
+     * Resolve a url and convert it to a Request
+     *
+     * @param url
+     * @return Returns null if the url does not match our host (the protocol get's ignored)
+     */
+    requestFromUrl(fullUrl: URL): Request;
+    /**
+     * Open a new route
+     *
+     * @param target the target to open can be an url, a route or a request
+     * the url needs to start with http or with a / which will be considered as
+     * the site baseUrl
+     *
+     * ## Note
+     * The origin will always be set to 'manual'
+     *
+     * ## Example
+     * ```
+     * import { getRouter } from 'crelte';
+     *
+     * const router = getRouter();
+     * console.log(router.site.get().url.href); // 'https://example.com/de';
+     *
+     * router.open('/foo/bar');
+     * // the following page will be opened https://example.com/de/foo/bar
+     * ```
+     */
+    open(target: string | URL | Route | Request, opts?: RequestOptions): Promise<Route | void>;
+    openRequest(_req: Request): Promise<Route | void>;
+    /**
+     * This pushes the new route without triggering a new pageload
+     *
+     * You can use this when using pagination for example change the route object
+     * (search argument) and then call push
+     *
+     * ## Note
+     * This will always set the origin to 'push'
+     * And will clear the scrollY value if you not provide a new one via the `opts`
+     * This will disableLoadData by default if you not provide an override via the `opts`
+     *
+     * ## Example using the update function
+     * ```
+     * import { getRouter } from 'crelte';
+     *
+     * const router = getRouter();
+     *
+     * const page = 1;
+     * router.push(req => req.setSearchParam('page', page || null));
+     * ```
+     *
+     * ## Example using the route object
+     * ```
+     * import { getRouter } from 'crelte';
+     *
+     * const router = getRouter();
+     *
+     * const page = 1;
+     * const route = router.route.get();
+     * route.setSearchParam('page', page > 0 ? page : null);
+     * router.push(route);
+     * ```
+     */
+    push(route: Route | Request, opts?: RequestOptions): Promise<void | Route>;
+    pushRequest(_req: Request, _opts?: RequestOptions): Promise<Route | void>;
+    /**
+     * This replaces the state of the route without triggering a new pageload
+     *
+     * You can use this when using some filters for example a search filter
+     *
+     * ## Note
+     * This will always set the origin to 'replace'
+     * And will clear the scrollY value if you don't provide a new one via the `opts`
+     * This will disableLoadData by default if you don't provide an override via the `opts`
+     *
+     * ## Example using the update function
+     * ```
+     * import { getRouter } from 'crelte';
+     *
+     * const router = getRouter();
+     *
+     * const search = 'foo';
+     * router.replace(req => req.setSearchParam('search', search));
+     * ```
+     *
+     * ## Example using the route object
+     * ```
+     * import { getRouter } from 'crelte';
+     *
+     * const router = getRouter();
+     *
+     * const search = 'foo';
+     * const route = router.route.get();
+     * route.setSearchParam('search', search);
+     * router.replace(route);
+     * ```
+     */
+    replace(route: Route | Request, opts?: RequestOptions): Promise<void | Route>;
+    replaceRequest(_req: Request, _opts?: RequestOptions): Promise<Route | void>;
+    /**
+     * Checks if there are previous routes which would allow it to go back
+     */
+    canGoBack(): boolean;
+    /**
+     * Go back in the history
+     */
+    back(): void;
+    preload(target: string | URL | Route | Request): Promise<void>;
+    cancelRequest(): void;
+    /**
+     * ## Throws
+     * If the request completed but had an error
+     */
+    handleRequest(req: Request, updateHistory: (route: Route) => void): Promise<Route | void>;
+    copyEntryToRequest(req: Request): void;
+    triggerRoute(route: Route): void;
+    updateScroll(_cr: CrelteRequest, _route: Route): void;
+}
+//# sourceMappingURL=BaseRouter.d.ts.map

package/dist/routing/BaseRouter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseRouter.d.ts","sourceRoot":"","sources":["../../src/routing/BaseRouter.ts"],"names":[],"mappings":"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"}