crelte 0.2.0 → 0.2.2

package/dist/routing/Route.js

@@ -1,10 +1,7 @@
 import { trimSlashEnd } from './utils.js';
 /**
  * A Route contains information about the current page for example the url and
- * the site id
- *
- * ## Note
- * Never update the route directly, clone it before
+ * the site
  */
 export default class Route {
     /**
@@ -24,6 +21,13 @@ export default class Route {
     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;
     /**
@@ -115,43 +119,6 @@ export default class Route {
     get hash() {
         return this.url.hash;
     }
-    /**
-     * 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 all properties of the url but search params do not have to be
-     * in the same order
-     */
-    eq(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 &&
-            this.url.pathname === route.url.pathname &&
-            this.url.origin === route.url.origin &&
-            searchEq(this.search, route.search) &&
-            this.hash === route.hash);
-    }
     /**
      * Checks if there are previous routes which would allow it to go back
      */
@@ -191,6 +158,67 @@ export default class Route {
             this.search.delete(key);
         }
     }
+    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 all properties of the url but search params do not have to be
+     * in the same order
+     */
+    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 request
      */

package/dist/routing/Router.d.ts

@@ -12,6 +12,7 @@ export type RouterOptions = {
  */
 type Internal = {
     onLoaded: (success: boolean, req: Request, ready: () => any) => void;
+    onNothingLoaded: (req: Request, ready: () => void) => void;
     onLoad: LoadFn;
     domReady: (req: Request) => void;
     initClient: () => void;
@@ -42,7 +43,6 @@ export default class Router {
      * The loading progress, the value is between 0 and 1
      */
     private _loadingProgress;
-    private _onRouteEv;
     private _onRequest;
     /** @hidden */
     _internal: Internal;
@@ -72,10 +72,13 @@ export default class Router {
     /**
      * Open a new route
      *
-     * @param target the target to open can be an url or a 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';
@@ -87,13 +90,18 @@ export default class Router {
      * // the following page will be opened https://example.com/de/foo/bar
      * ```
      */
-    open(target: string | URL | Route, opts?: RequestOptions): void;
+    open(target: string | URL | Route | Request, opts?: RequestOptions): void;
     /**
-     * This pushes the state of the route without triggering an event
+     * 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 pushState
      *
+     * ## 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
      * ```
      * import { getRouter } from 'crelte';
@@ -106,12 +114,21 @@ export default class Router {
      * router.pushState(route);
      * ```
      */
-    pushState(route: Route): void;
+    push(route: Route | Request, opts?: RequestOptions): void;
+    /**
+     * @deprecated use push instead
+     */
+    pushState(route: Route | Request): void;
     /**
      * This replaces the state of the route without triggering an event
      *
      * 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 not provide a new one via the `opts`
+     * This will disableLoadData by default if you not provide an override via the `opts`
+     *
      * ## Example
      * ```
      * import { getRouter } from 'crelte';
@@ -124,7 +141,11 @@ export default class Router {
      * router.replaceState(route);
      * ```
      */
-    replaceState(route: Route): void;
+    replace(route: Route | Request, opts?: RequestOptions): void;
+    /**
+     * @deprecated use replace instead
+     */
+    replaceState(route: Route | Request): void;
     /**
      * Checks if there are previous routes which would allow it to go back
      */
@@ -140,8 +161,8 @@ export default class Router {
     /**
      * Add a listener for the onRoute event
      *
-     * This differs from router.route.subscribe in the way that
-     * it will only trigger if a new render / load will occur
+     * This will trigger every time a new route is set
+     * and is equivalent to router.route.subscribe(fn)
      *
      * @returns a function to remove the listener
      */
@@ -161,6 +182,7 @@ export default class Router {
     private destroyRequest;
     private _onPreload;
     private _onLoaded;
+    private _onNothingLoaded;
     private _onProgress;
 }
 export {};

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

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

package/dist/routing/Router.js

@@ -5,7 +5,7 @@ import { Listeners } from 'crelte-std/sync';
 import Request from './Request.js';
 const defaultRouterOpts = {
     preloadOnMouseOver: false,
-    deubgTiming: false,
+    debugTiming: false,
 };
 // Make sure route and nextRoute are not the same object as _inner.route
 export default class Router {
@@ -28,7 +28,6 @@ export default class Router {
      * The loading progress, the value is between 0 and 1
      */
     _loadingProgress;
-    _onRouteEv;
     _onRequest;
     /** @hidden */
     _internal;
@@ -48,10 +47,10 @@ export default class Router {
         this._request = null;
         this._loading = new Writable(false);
         this._loadingProgress = new Writable(0);
-        this._onRouteEv = new Listeners();
         this._onRequest = new Listeners();
         this._internal = {
             onLoaded: () => { },
+            onNothingLoaded: () => { },
             onLoad: () => { },
             domReady: req => this.inner.domReady(req),
             initClient: () => this._initClient(),
@@ -96,10 +95,13 @@ export default class Router {
     /**
      * Open a new route
      *
-     * @param target the target to open can be an url or a 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';
@@ -112,14 +114,23 @@ export default class Router {
      * ```
      */
     open(target, opts = {}) {
-        this.inner.open(target, opts);
+        const req = this.inner.targetToRequest(target, {
+            ...opts,
+            origin: 'manual',
+        });
+        this.inner.open(req);
     }
     /**
-     * This pushes the state of the route without triggering an event
+     * 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 pushState
      *
+     * ## 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
      * ```
      * import { getRouter } from 'crelte';
@@ -132,17 +143,35 @@ export default class Router {
      * router.pushState(route);
      * ```
      */
-    pushState(route) {
+    push(route, opts = {}) {
+        // cancel previous request
         this.pageLoader.discard();
-        this.inner.pushState(route);
+        const req = this.inner.targetToRequest(route, {
+            ...opts,
+            origin: 'push',
+            scrollY: opts.scrollY ?? undefined,
+            disableLoadData: opts.disableLoadData ?? true,
+        });
+        this.inner.push(req);
         this.destroyRequest();
         this.setNewRoute(route);
     }
+    /**
+     * @deprecated use push instead
+     */
+    pushState(route) {
+        this.push(route);
+    }
     /**
      * This replaces the state of the route without triggering an event
      *
      * 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 not provide a new one via the `opts`
+     * This will disableLoadData by default if you not provide an override via the `opts`
+     *
      * ## Example
      * ```
      * import { getRouter } from 'crelte';
@@ -155,11 +184,23 @@ export default class Router {
      * router.replaceState(route);
      * ```
      */
-    replaceState(route) {
+    replace(route, opts = {}) {
+        // cancel previous request
         this.pageLoader.discard();
-        this.inner.replaceState(route);
+        const req = this.inner.targetToRequest(route, {
+            origin: 'replace',
+            scrollY: opts.scrollY ?? undefined,
+            disableLoadData: opts.disableLoadData ?? true,
+        });
+        this.inner.replace(req);
         this.destroyRequest();
-        this.setNewRoute(route);
+        this.setNewRoute(req);
+    }
+    /**
+     * @deprecated use replace instead
+     */
+    replaceState(route) {
+        this.replace(route);
     }
     /**
      * Checks if there are previous routes which would allow it to go back
@@ -182,13 +223,13 @@ export default class Router {
     /**
      * Add a listener for the onRoute event
      *
-     * This differs from router.route.subscribe in the way that
-     * it will only trigger if a new render / load will occur
+     * This will trigger every time a new route is set
+     * and is equivalent to router.route.subscribe(fn)
      *
      * @returns a function to remove the listener
      */
     onRoute(fn) {
-        return this._onRouteEv.add(fn);
+        return this.route.subscribe(fn);
     }
     /**
      * Add a listener for the onRequest event
@@ -213,6 +254,9 @@ export default class Router {
     }
     async _initServer(url, acceptLang) {
         this.inner.initServer();
+        this._internal.onNothingLoaded = (_req, ready) => {
+            ready();
+        };
         const prom = new Promise(resolve => {
             this._internal.onLoaded = (success, req, ready) => {
                 const props = ready();
@@ -263,7 +307,12 @@ export default class Router {
         }
         this._onRequest.trigger(req);
         // route prepared
-        this.pageLoader.load(req, { changeHistory });
+        if (!req.disableLoadData) {
+            this.pageLoader.load(req, { changeHistory });
+        }
+        else {
+            this._onNothingLoaded(req, { changeHistory });
+        }
     }
     destroyRequest() {
         if (!this._request)
@@ -283,15 +332,27 @@ export default class Router {
         // in the meantime
         more.changeHistory();
         const route = req.toRoute();
-        const updateRoute = () => {
-            this.setNewRoute(route);
-            this._onRouteEv.trigger(route.clone());
-        };
+        // call the client or server saying we are ready for a new render
         this._internal.onLoaded(resp.success, req, () => {
-            updateRoute();
+            this.setNewRoute(route);
             return resp.data;
         });
     }
+    async _onNothingLoaded(req, more) {
+        // check if the render was cancelled
+        if (await req._renderBarrier.ready())
+            return;
+        // when the data is loaded let's update the route of the inner
+        // this is will only happen if no other route has been requested
+        // in the meantime
+        more.changeHistory();
+        const route = req.toRoute();
+        // call the client or server saying there was an update in the route
+        // but no new data was loaded so no render should happen
+        this._internal.onNothingLoaded(req, () => {
+            this.setNewRoute(route);
+        });
+    }
     _onProgress(loading, progress) {
         if (this._loading.get() !== loading)
             this._loading.set(loading);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "crelte",
-	"version": "0.2.0",
+	"version": "0.2.2",
 	"author": "Crelte <support@crelte.com>",
 	"type": "module",
 	"scripts": {
@@ -60,6 +60,10 @@
 			"types": "./dist/cookies/index.d.ts",
 			"default": "./dist/cookies/index.js"
 		},
+		"./cookies/internal": {
+			"types": "./dist/cookies/internal.d.ts",
+			"default": "./dist/cookies/internal.js"
+		},
 		"./blocks": {
 			"types": "./dist/blocks/index.d.ts",
 			"default": "./dist/blocks/index.js"

package/src/cookies/ServerCookies.ts

@@ -1,6 +1,10 @@
 import { Cookies, SetOptions } from './index.js';
 import { parseCookies, type SetCookie, setCookieToString } from './utils.js';
 
+/**
+ * ## Warning
+ * This is not stable and should only be used internally by crelte
+ */
 export default class ServerCookies implements Cookies {
 	requestCookies: Map<string, string>;
 	setCookies: Map<string, SetCookie>;

package/src/cookies/internal.ts

@@ -0,0 +1,3 @@
+import ServerCookies from './ServerCookies.js';
+
+export { ServerCookies };

package/src/index.ts

@@ -143,6 +143,15 @@ export function getCookies(): Cookies {
 	return getCrelte().cookies;
 }
 
+export function onRoute(fn: (route: Route, crelte: Crelte) => void) {
+	const crelte = getCrelte();
+	const rmListener = crelte.router.onRoute(route => {
+		fn(route, crelte);
+	});
+
+	onDestroy(rmListener);
+}
+
 /**
  * Listen for requests
  *

package/src/init/client.ts

@@ -204,6 +204,15 @@ export function main(data: MainData) {
 		await render();
 	};
 
+	crelte.router._internal.onNothingLoaded = async (req, ready) => {
+		crelte.globals._updateSiteId(req.site.id);
+		ready();
+
+		await tick();
+
+		crelte.router._internal.domReady(req);
+	};
+
 	crelte.router._internal.initClient();
 }