crelte 0.4.8 → 0.5.0-alpha.2

package/dist/routing/BaseRouter.js

@@ -0,0 +1,444 @@
+/**
+ * This is the Router which we internally extend from
+ * it does not directly get exposed
+ */
+import { Writable } from 'crelte-std/stores';
+import Request, { isRequest } from './Request.js';
+import Site, { siteFromUrl } from './Site.js';
+import { matchAcceptLang } from './utils.js';
+import LoadRunner from './LoadRunner.js';
+import { Listeners } from 'crelte-std/sync';
+import { isPromise, objClone } from '../utils.js';
+const INF_LOOP_CHECK = '__REQ_FROM_REQ_START__';
+export default class BaseRouter {
+    sites;
+    sitesByLanguage;
+    /**
+     * The current route
+     *
+     * ## Note
+     * Will always contain a route except in the first loadData call
+     */
+    route;
+    // todo should probably be a derived
+    /**
+     * The current site
+     *
+     * ## Note
+     * Will always contain a site except in the first loadData call
+     */
+    site;
+    // todo should probably be a derived
+    /**
+     * The current entry
+     *
+     *  ## Note
+     * Will always contain an entry except in the first loadData call
+     */
+    entry;
+    // the next request if it is not only a preload request
+    request;
+    /**
+     * The loading flag, specifies if a page is currently
+     * getting loaded
+     */
+    loading;
+    /**
+     * The loading progress, the value is between 0 and 1
+     */
+    loadingProgress;
+    onNewCrelteRequest;
+    /**
+     * Not sure the naming here is great but
+     */
+    onBeforeRequest;
+    onRequestListeners;
+    loadRunner;
+    onRouteListeners;
+    /// should return once the render is done
+    onRender;
+    constructor(sites, opts) {
+        this.sites = sites.map(s => new Site(s));
+        this.sitesByLanguage = new Map(this.sites.map(s => [s.language, s]));
+        this.route = new Writable(null);
+        this.site = new Writable(null);
+        this.entry = new Writable(null);
+        this.request = null;
+        this.loading = new Writable(false);
+        this.loadingProgress = new Writable(0);
+        this.onNewCrelteRequest = () => null;
+        this.onBeforeRequest = () => { };
+        this.onRequestListeners = new Listeners();
+        this.loadRunner = new LoadRunner(opts);
+        this.onRouteListeners = new Listeners();
+        this.onRender = async () => null;
+        // todo move this to the client?
+        this.loadRunner.onProgress = (loading, progress) => {
+            if (this.loading.get() !== loading)
+                this.loading.set(loading);
+            if (typeof progress === 'number')
+                this.loadingProgress.set(progress);
+        };
+    }
+    /**
+     * Get the default site
+     */
+    primarySite() {
+        return this.sites.find(s => s.primary) ?? this.sites[0];
+    }
+    /**
+     * 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() {
+        return this.primarySite();
+    }
+    /**
+     * Get a site and if possible use the accept lang header.
+     *
+     * @param acceptLang Accept Language header.
+     */
+    siteByAcceptLang(acceptLang = null) {
+        if (!acceptLang)
+            return this.primarySite();
+        const lang = matchAcceptLang(acceptLang, Array.from(this.sitesByLanguage.keys()));
+        return lang ? this.sitesByLanguage.get(lang) : this.primarySite();
+    }
+    /**
+     * Tries to get a site by it's id
+     */
+    siteById(id) {
+        return this.sites.find(s => s.id === id) ?? null;
+    }
+    // keep this doc in sync with Router.targetToRequest
+    /**
+     * 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, opts = {}) {
+        if (typeof target === 'string') {
+            if (target.startsWith('/')) {
+                // todo should we use the language matching or throw if the route does not
+                // exists
+                const site = this.route.get()?.site ?? this.primarySite();
+                target = new URL(site.uri + target, site.url);
+            }
+            else if (!target) {
+                throw new Error('the url is not allowed to be empty');
+            }
+            else {
+                target = new URL(target);
+            }
+        }
+        if (target instanceof URL) {
+            target = this.requestFromUrl(target);
+        }
+        if (!isRequest(target)) {
+            return Request.fromRoute(target, opts);
+        }
+        target._updateOpts(opts);
+        return target;
+    }
+    /**
+     * 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) {
+        // strip stuff we dont need from url
+        const req = new Request(fullUrl, null);
+        const site = siteFromUrl(req.url, this.sites);
+        // todo should we throw if we can't find a site
+        // or use the site which matches the language
+        req.site = site ?? this.primarySite();
+        return req;
+    }
+    /**
+     * 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
+     * ```
+     */
+    async open(target, opts = {}) {
+        const req = this.targetToRequest(target, {
+            ...opts,
+            origin: 'manual',
+        });
+        if (!req)
+            return;
+        if (req === this.request) {
+            throw new Error('Cannot open the same request object twice. Either clone the request ' +
+                'or just pass in the url.');
+        }
+        try {
+            return await this.openRequest(req);
+        }
+        catch (e) {
+            console.warn('opening route failed', e);
+            throw e;
+        }
+    }
+    async openRequest(_req) {
+        throw new Error('environment specific');
+    }
+    /**
+     * 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);
+     * ```
+     */
+    async push(route, opts = {}) {
+        // theoretically string and URL also work but we might
+        // change that in the future
+        const req = this.targetToRequest(route, {
+            ...opts,
+            origin: 'push',
+            scrollY: opts.scrollY ?? undefined,
+            disableLoadData: opts.disableLoadData ?? true,
+        });
+        if (!req)
+            return;
+        try {
+            return await this.pushRequest(req, opts);
+        }
+        catch (e) {
+            console.warn('pushing route failed', e);
+            throw e;
+        }
+    }
+    pushRequest(_req, _opts = {}) {
+        throw new Error('environment specific');
+    }
+    /**
+     * 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);
+     * ```
+     */
+    async replace(route, opts = {}) {
+        // theoretically string and URL also work but we might
+        // change that in the future
+        const req = this.targetToRequest(route, {
+            ...opts,
+            origin: 'replace',
+            scrollY: opts.scrollY ?? undefined,
+            disableLoadData: opts.disableLoadData ?? true,
+        });
+        if (!req)
+            return;
+        try {
+            return await this.replaceRequest(req, opts);
+        }
+        catch (e) {
+            console.warn('replacing route failed', e);
+            throw e;
+        }
+    }
+    async replaceRequest(_req, _opts = {}) {
+        throw new Error('environment specific');
+    }
+    /**
+     * Checks if there are previous routes which would allow it to go back
+     */
+    canGoBack() {
+        throw new Error('environment specific');
+        // return this.route.get()?.canGoBack() ?? false;
+    }
+    /**
+     * Go back in the history
+     */
+    back() {
+        throw new Error('environment specific');
+        // this.inner.history.back();
+    }
+    async preload(target) {
+        const req = this.targetToRequest(target);
+        const current = this.route.get();
+        // if the origin matches, the route will be able to be load
+        // so let's preload it
+        if (current && current.url.origin === req.url.origin) {
+            // todo i don't wan't to send a CrelteRequest?
+            this.loadRunner.preload(this.onNewCrelteRequest(req));
+        }
+    }
+    cancelRequest() {
+        // destroy the old request
+        if (this.request) {
+            this.request._cancel();
+            this.request = null;
+        }
+    }
+    /**
+     * ## Throws
+     * If the request completed but had an error
+     */
+    async handleRequest(req, updateHistory) {
+        // this isCancelled check is not if a user cancelled the request
+        // but if the router cancelled the request, because for example
+        // the user clicked on a new link or an event decided to call open
+        const isCancelled = () => req.cancelled;
+        // cancel the previous request
+        this.cancelRequest();
+        const barrier = req._renderBarrier;
+        if (barrier.isOpen())
+            throw new Error('the request was already used');
+        // not sure this really helps
+        // it should be in open maybe?
+        if (req.getContext(INF_LOOP_CHECK))
+            throw new Error('infinite loop detected');
+        this.request = req;
+        const cr = this.onNewCrelteRequest(req);
+        // trigger event onRequestStart
+        const onBeforeReqProm = this.onBeforeRequest(cr);
+        if (isPromise(onBeforeReqProm))
+            await onBeforeReqProm;
+        if (isCancelled())
+            return;
+        // if the request does not have a matching site, redirect
+        if (!req.siteMatches()) {
+            const site = this.defaultSite();
+            const req = new Request(site.url, site);
+            req.setContext(INF_LOOP_CHECK, true);
+            return await this.openRequest(req);
+        }
+        // trigger onRequest listeners (this is not an event and more intended
+        // to be used by the actual site and not a plugin)
+        this.onRequestListeners.trigger(cr);
+        if (isCancelled())
+            return;
+        //!! this block might throw if something did not work as expected
+        // todo do we wan't this?
+        if (!req.disableLoadData) {
+            const completed = await this.loadRunner.load(cr);
+            // the request was succeeded by some other request
+            if (!completed)
+                return;
+        }
+        else {
+            // just discard the old one since nobody will wan't it
+            this.loadRunner.discard();
+            this.copyEntryToRequest(req);
+        }
+        // check if the render was cancelled
+        // else wait until the renderBarrier gets opened
+        const readyProm = req._renderBarrier.ready();
+        const wasCancelled = isPromise(readyProm) ? await readyProm : readyProm;
+        if (wasCancelled || isCancelled())
+            return;
+        // the onRender should decide by itself if it wants to render or not
+        // for example in most cases if !entryChanged it does not make sense to render
+        return await this.onRender(cr, 
+        // readyForRoute
+        () => {
+            // throws if the route is missing entry, template or loadedData
+            // or the request was cancelled
+            const route = req.toRoute();
+            updateHistory(route);
+            // update route, site and onRoute
+            this.triggerRoute(route);
+            return route;
+        }, 
+        // domUpdated
+        // we use a callback to maybe decrease latency?
+        (cr, route) => {
+            this.updateScroll(cr, route);
+        });
+    }
+    copyEntryToRequest(req) {
+        const route = this.route.get();
+        if (!route)
+            throw new Error('the first request is not allowed to disableLoadData');
+        req.entry = objClone(route.entry);
+        req.template = route.template;
+        req.loadedData = objClone(route.loadedData);
+    }
+    triggerRoute(route) {
+        this.route.setSilent(route);
+        const siteChanged = this.site.get()?.id !== route.site.id;
+        this.site.setSilent(route.site);
+        this.entry.setSilent(route.entry);
+        // trigger an update
+        this.route.notify();
+        if (siteChanged)
+            this.site.notify();
+        if (route.entryChanged)
+            this.entry.notify();
+        this.onRouteListeners.trigger(route);
+    }
+    updateScroll(_cr, _route) { }
+}

package/dist/routing/ClientRouter.d.ts

@@ -0,0 +1,32 @@
+import CrelteRequest from '../CrelteRequest.js';
+import BaseRouter, { BaseRouterOptions } from './BaseRouter.js';
+import { Request, RequestOptions } from './index.js';
+import Route from './Route.js';
+import { SiteFromGraphQl } from './Site.js';
+export type ClientRouterOptions = {
+    preloadOnMouseOver: boolean;
+} & BaseRouterOptions;
+export default class ClientRouter extends BaseRouter {
+    private scrollDebounceTimeout;
+    private preloadOnMouseOver;
+    onError: (e: any) => void;
+    constructor(sites: SiteFromGraphQl[], opts: ClientRouterOptions);
+    /**
+     * ## Throws
+     */
+    init(): Promise<void | Route>;
+    /**
+     * Do not call this with origin push or replace
+     */
+    openRequest(req: Request): Promise<Route | void>;
+    pushRequest(req: Request, _opts?: RequestOptions): Promise<void | Route>;
+    replaceRequest(req: Request, _opts?: RequestOptions): Promise<void | Route>;
+    /**
+     * This returns a route if it was handled else if an error occured
+     * or the request was cancelled returns void
+     */
+    handleRequestAndError(req: Request, updateHistory: (route: Route) => void): Promise<Route | void>;
+    listen(): void;
+    updateScroll(cr: CrelteRequest, _route: Route): void;
+}
+//# sourceMappingURL=ClientRouter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClientRouter.d.ts","sourceRoot":"","sources":["../../src/routing/ClientRouter.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAChD,OAAO,UAAU,EAAE,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,MAAM,MAAM,mBAAmB,GAAG;IACjC,kBAAkB,EAAE,OAAO,CAAC;CAC5B,GAAG,iBAAiB,CAAC;AAEtB,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,UAAU;IACnD,OAAO,CAAC,qBAAqB,CAAa;IAC1C,OAAO,CAAC,kBAAkB,CAAU;IAEpC,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;gBAEd,KAAK,EAAE,eAAe,EAAE,EAAE,IAAI,EAAE,mBAAmB;IAQ/D;;OAEG;IACG,IAAI;IAaV;;OAEG;IACG,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;IA6ChD,WAAW,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,GAAE,cAAmB;IAyBpD,cAAc,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,GAAE,cAAmB;IA8B7D;;;OAGG;IACG,qBAAqB,CAC1B,GAAG,EAAE,OAAO,EACZ,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GACnC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;IASxB,MAAM;IAiGN,YAAY,CAAC,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,KAAK,GAAG,IAAI;CAwEpD"}