crelte 0.1.0 → 0.1.2

package/dist/routing/Router.js

@@ -2,7 +2,8 @@ import Route from './Route.js';
 import InnerRouter from './InnerRouter.js';
 import PageLoader from './PageLoader.js';
 import { Writable } from 'crelte-std/stores';
-import { Barrier, Listeners } from 'crelte-std/sync';
+import { Listeners } from 'crelte-std/sync';
+import Request from './Request.js';
 const defaultRouterOpts = {
     preloadOnMouseOver: false,
     deubgTiming: false,
@@ -20,14 +21,8 @@ export default class Router {
      * The current site
      */
     _site;
-    /**
-     * The next route which is currently being loaded
-     */
-    _nextRoute;
-    /**
-     * The next site which is currently being loaded
-     */
-    _nextSite;
+    // the next request, just here to destroy it
+    _request;
     /**
      * The loading flag, specifies if a page is currently
      * getting loaded
@@ -38,9 +33,8 @@ export default class Router {
      */
     _loadingProgress;
     _onRouteEv;
-    _onNextRoute;
-    _renderBarrier;
-    // doc hidden
+    _onRequest;
+    /** @hidden */
     _internal;
     inner;
     pageLoader;
@@ -55,52 +49,36 @@ export default class Router {
         // in the first onRoute call we will update this value
         this._route = new Writable(null);
         this._site = new Writable(null);
-        this._nextRoute = new Writable(null);
-        this._nextSite = new Writable(null);
+        this._request = null;
         this._loading = new Writable(false);
         this._loadingProgress = new Writable(0);
         this._onRouteEv = new Listeners();
-        this._onNextRoute = new Listeners();
-        this._renderBarrier = null;
+        this._onRequest = new Listeners();
         this._internal = {
             onLoaded: () => { },
             onLoad: () => { },
-            domReady: route => this.inner.domReady(route),
+            domReady: req => this.inner.domReady(req),
             initClient: () => this._initClient(),
             initServer: (url, acceptLang) => this._initServer(url, acceptLang),
         };
         this.inner.onRoute = (route, site, changeHistory) => this._onRoute(route, site, changeHistory);
         this.inner.onPreload = (route, site) => this._onPreload(route, site);
-        this.pageLoader.onLoaded = (resp, route, site, more) => this._onLoaded(resp, route, site, more);
-        this.pageLoader.loadFn = (route, site, opts) => this._internal.onLoad(route, site, opts);
+        this.pageLoader.onLoaded = (resp, req, site, more) => this._onLoaded(resp, req, site, more);
+        this.pageLoader.loadFn = (req, site, opts) => this._internal.onLoad(req, site, opts);
         this.pageLoader.onProgress = (loading, progress) => this._onProgress(loading, progress);
     }
     /**
-     * The current route
-     *
-     * this is a svelte store
+     * returns a store with the current route
      */
     get route() {
         return this._route.readclone();
     }
     /**
-     * The current site
+     * returns a store with the current site
      */
     get site() {
         return this._site.readonly();
     }
-    /**
-     * The next route which is currently being loaded
-     */
-    get nextRoute() {
-        return this._nextRoute.readclone();
-    }
-    /**
-     * The next site which is currently being loaded
-     */
-    get nextSite() {
-        return this._nextSite.readonly();
-    }
     /**
      * The sites which are available
      */
@@ -108,14 +86,13 @@ export default class Router {
         return this.inner.sites;
     }
     /**
-     * The loading flag, specifies if a page is currently
-     * getting loaded
+     * returns a store which indicates if the a page is loading
      */
     get loading() {
         return this._loading.readonly();
     }
     /**
-     * The loading progress, the value is between 0 and 1
+     * returns a store which indicates the loading progress between 0 and 1
      */
     get loadingProgress() {
         return this._loadingProgress.readonly();
@@ -126,6 +103,17 @@ export default class Router {
      * @param target the target to open can be an url or a route
      * the url needs to start with http or with a / which will be considered as
      * the site baseUrl
+     *
+     * ## 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) {
         this.inner.open(target);
@@ -136,7 +124,17 @@ export default class Router {
      * You can use this when using pagination for example change the route object
      * (search argument) and then call pushState
      *
-     * @param route
+     * ## Example
+     * ```
+     * import { getRouter } from 'crelte';
+     *
+     * const router = getRouter();
+     *
+     * const page = 1;
+     * const route = router.route.get();
+     * route.setSearchParam('page', page > 0 ? page : null);
+     * router.pushState(route);
+     * ```
      */
     pushState(route) {
         this.pageLoader.discard();
@@ -146,7 +144,19 @@ export default class Router {
     /**
      * This replaces the state of the route without triggering an event
      *
-     * @param route
+     * You can use this when using some filters for example a search filter
+     *
+     * ## Example
+     * ```
+     * import { getRouter } from 'crelte';
+     *
+     * const router = getRouter();
+     *
+     * const search = 'foo';
+     * const route = router.route.get();
+     * route.setSearchParam('search', search ? search : null);
+     * router.replaceState(route);
+     * ```
      */
     replaceState(route) {
         this.pageLoader.discard();
@@ -163,7 +173,7 @@ export default class Router {
      * Go back in the history
      */
     back() {
-        window.history.back();
+        this.inner.history.back();
     }
     /**
      * Preload a url
@@ -176,26 +186,30 @@ export default class Router {
      *
      * This differs from router.route.subscribe in the way that
      * it will only trigger if a new render / load will occur
+     *
+     * @returns a function to remove the listener
      */
     onRoute(fn) {
         return this._onRouteEv.add(fn);
     }
-    onNextRoute(fn) {
-        return this._onNextRoute.add(fn);
+    /**
+     * Add a listener for the onRequest event
+     *
+     * This will trigger every time a new route is requested
+     *
+     * @returns a function to remove the listener
+     */
+    onRequest(fn) {
+        return this._onRequest.add(fn);
     }
     setNewRoute(route) {
+        this.destroyRequest();
         this._route.setSilent(route);
-        this._nextRoute.setSilent(route);
-        if (route.site) {
+        if (route.site)
             this._site.setSilent(route.site);
-            this._nextSite.setSilent(route.site);
-        }
-        this._nextRoute.notify();
         this._route.notify();
-        if (route.site) {
-            this._nextSite.notify();
+        if (route.site)
             this._site.notify();
-        }
     }
     async _initClient() {
         this.inner.initClient();
@@ -203,19 +217,19 @@ export default class Router {
     async _initServer(url, acceptLang) {
         this.inner.initServer();
         const prom = new Promise(resolve => {
-            this._internal.onLoaded = (success, route, site, ready) => {
+            this._internal.onLoaded = (success, req, site, ready) => {
                 const props = ready();
                 this._internal.onLoaded = () => { };
                 resolve({
                     success,
                     redirect: false,
-                    route,
+                    req,
                     site,
                     props,
                 });
             };
         });
-        const route = this.inner.targetToRoute(url);
+        const route = this.inner.targetToRequest(url);
         route.origin = 'init';
         // let's see if the url matches any route and site
         // if not let's redirect to the site which matches the acceptLang
@@ -224,11 +238,13 @@ export default class Router {
             return {
                 success: true,
                 redirect: true,
-                route: new Route(site.url, site),
+                req: new Request(site.url, site),
                 site,
                 props: {},
             };
         }
+        this.inner.setRoute(route);
+        const resp = await prom;
         const hist = this.inner.history;
         if (hist.url) {
             const nRoute = new Route(hist.url, null);
@@ -236,52 +252,43 @@ export default class Router {
                 return {
                     success: true,
                     redirect: true,
-                    route: nRoute,
+                    req: Request.fromRoute(nRoute),
                     site: route.site,
                     props: {},
                 };
             }
         }
-        this.inner.setRoute(route);
-        return await prom;
+        return resp;
     }
-    _onRoute(route, site, changeHistory) {
-        this._nextRoute.setSilent(route);
-        const siteChanged = this.nextSite.get()?.id !== site.id;
-        this._nextSite.setSilent(site);
-        this._nextRoute.notify();
-        if (siteChanged)
-            this._nextSite.notify();
-        if (this._renderBarrier) {
-            const barr = this._renderBarrier;
-            this._renderBarrier = null;
-            // make sure nobody waits forevery
-            barr.cancel();
+    _onRoute(req, site, changeHistory) {
+        this.destroyRequest();
+        this._request = req;
+        const barrier = req._renderBarrier;
+        if (barrier.isOpen()) {
+            throw new Error('render barrier is already open');
         }
-        const barrier = new RenderBarrier();
-        this._renderBarrier = barrier;
-        this._onNextRoute.trigger(route.clone(), site, {
-            delayRender: () => barrier.add(),
-        });
+        this._onRequest.trigger(req, site);
         // route prepared
-        this.pageLoader.load(route.clone(), site, { changeHistory });
+        this.pageLoader.load(req, site, { changeHistory });
     }
-    _onPreload(route, site) {
-        this.pageLoader.preload(route, site);
+    destroyRequest() {
+        if (!this._request)
+            return;
+        this._request._renderBarrier.cancel();
+        this._request = null;
     }
-    async _onLoaded(resp, route, site, more) {
-        // we need to wait on the renderBarrier
-        const renderBarrier = this._renderBarrier;
-        if (renderBarrier) {
-            // check if the render was cancelled
-            if (await renderBarrier.ready())
-                return;
-            this._renderBarrier = null;
-        }
+    _onPreload(req, site) {
+        this.pageLoader.preload(req, site);
+    }
+    async _onLoaded(resp, req, site, 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();
         const updateRoute = () => {
             this._route.setSilent(route);
             const siteChanged = this.site.get()?.id !== site.id;
@@ -291,7 +298,7 @@ export default class Router {
                 this._site.notify();
             this._onRouteEv.trigger(route.clone(), site);
         };
-        this._internal.onLoaded(resp.success, route, site, () => {
+        this._internal.onLoaded(resp.success, req, site, () => {
             updateRoute();
             return resp.data;
         });
@@ -303,31 +310,3 @@ export default class Router {
             this._loadingProgress.set(progress);
     }
 }
-class RenderBarrier {
-    inner;
-    cancelled;
-    root;
-    constructor() {
-        this.inner = new Barrier();
-        this.cancelled = false;
-        this.root = this.add();
-    }
-    add() {
-        const action = this.inner.add();
-        return {
-            ready: async () => {
-                await action.ready(null);
-                return this.cancelled;
-            },
-            remove: () => action.remove(),
-        };
-    }
-    cancel() {
-        this.cancelled = true;
-        this.root.remove();
-    }
-    // returns if the render was cancelled
-    ready() {
-        return this.root.ready();
-    }
-}

package/dist/routing/Site.d.ts

@@ -7,7 +7,7 @@ export type SiteFromGraphQl = {
     primary: boolean;
 };
 /**
- * Craft Site
+ * A Craft Site
  */
 export default class Site {
     /**

package/dist/routing/Site.js

@@ -1,6 +1,6 @@
 import { trimSlashEnd } from './Router.js';
 /**
- * Craft Site
+ * A Craft Site
  */
 export default class Site {
     /**

package/dist/routing/index.d.ts

@@ -1,5 +1,6 @@
-import Router, { type DelayRender, type OnNextRouteOpts } from './Router.js';
-import Route from './Route.js';
+import Router from './Router.js';
+import Route, { type RouteOptions } from './Route.js';
+import Request, { type RequestOptions, type DelayRender } from './Request.js';
 import Site from './Site.js';
-export { Router, Route, Site, OnNextRouteOpts, DelayRender };
+export { Router, Route, RouteOptions, Site, Request, DelayRender, RequestOptions, };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/routing/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/routing/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,OAAO,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EACN,MAAM,EACN,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,cAAc,GACd,CAAC"}

package/dist/routing/index.js

@@ -1,4 +1,5 @@
 import Router from './Router.js';
 import Route from './Route.js';
+import Request from './Request.js';
 import Site from './Site.js';
-export { Router, Route, Site };
+export { Router, Route, Site, Request, };

package/dist/ssr/SsrCache.d.ts

@@ -1,12 +1,29 @@
 export declare function calcKey(data: any): Promise<string>;
+/**
+ * A simple cache for server side rendering
+ *
+ * You can use this to store data to pass to the client or to cache data
+ * generally. Storing data and retrieving it will also work on the client.
+ */
 export default class SsrCache {
     private store;
     constructor();
+    /**
+     * check if the value is in the cache else calls the fn
+     */
     load<T>(key: string, fn: () => Promise<T>): Promise<any>;
+    /**
+     * Get a value from the cache
+     */
     get<T>(key: string): T | null;
+    /**
+     * Set a value in the cache
+     */
     set<T>(key: string, val: T): T;
+    /** @hidden */
     clear(): void;
     private exportAsJson;
+    /** @hidden */
     _exportToHead(): string;
 }
 //# sourceMappingURL=SsrCache.d.ts.map

package/dist/ssr/SsrCache.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SsrCache.d.ts","sourceRoot":"","sources":["../../../../src/ssr/SsrCache.ts"],"names":[],"mappings":"AAAA,wBAAsB,OAAO,CAAC,IAAI,EAAE,GAAG,mBAetC;AAED,MAAM,CAAC,OAAO,OAAO,QAAQ;IAC5B,OAAO,CAAC,KAAK,CAAsB;;IAa7B,IAAI,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC;IAQ/C,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;IAI7B,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC;IAI9B,KAAK;IAKL,OAAO,CAAC,YAAY;IAKpB,aAAa,IAAI,MAAM;CAGvB"}
+{"version":3,"file":"SsrCache.d.ts","sourceRoot":"","sources":["../../../../src/ssr/SsrCache.ts"],"names":[],"mappings":"AAAA,wBAAsB,OAAO,CAAC,IAAI,EAAE,GAAG,mBAetC;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,QAAQ;IAC5B,OAAO,CAAC,KAAK,CAAsB;;IAYnC;;OAEG;IACG,IAAI,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC;IAO/C;;OAEG;IACH,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;IAI7B;;OAEG;IACH,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC;IAI9B,cAAc;IACd,KAAK;IAIL,OAAO,CAAC,YAAY;IAIpB,cAAc;IACd,aAAa,IAAI,MAAM;CAGvB"}

package/dist/ssr/SsrCache.js

@@ -11,6 +11,12 @@ export async function calcKey(data) {
         .join(''); // Convert to hex string
     return hashHex;
 }
+/**
+ * A simple cache for server side rendering
+ *
+ * You can use this to store data to pass to the client or to cache data
+ * generally. Storing data and retrieving it will also work on the client.
+ */
 export default class SsrCache {
     store;
     constructor() {
@@ -21,7 +27,9 @@ export default class SsrCache {
             this.store = window.SSR_STORE;
         }
     }
-    /// check if the value is in the cache else calls the fn
+    /**
+     * check if the value is in the cache else calls the fn
+     */
     async load(key, fn) {
         if (key in this.store)
             return this.store[key];
@@ -29,21 +37,26 @@ export default class SsrCache {
         this.set(key, v);
         return v;
     }
-    /// returns null if the data does not exists
+    /**
+     * Get a value from the cache
+     */
     get(key) {
         return this.store[key] ?? null;
     }
+    /**
+     * Set a value in the cache
+     */
     set(key, val) {
         return (this.store[key] = val);
     }
+    /** @hidden */
     clear() {
         this.store = {};
     }
-    // internal
     exportAsJson() {
         return JSON.stringify(this.store).replace(/</g, '\\u003c');
     }
-    // internal
+    /** @hidden */
     _exportToHead() {
         return `\n\t\t<script>window.SSR_STORE = ${this.exportAsJson()};</script>`;
     }

package/dist/ssr/SsrComponents.d.ts

@@ -1,3 +1,4 @@
+/** @hidden */
 export default class SsrComponents {
     private modules;
     constructor();

package/dist/ssr/SsrComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SsrComponents.d.ts","sourceRoot":"","sources":["../../../../src/ssr/SsrComponents.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,OAAO,aAAa;IACjC,OAAO,CAAC,OAAO,CAAc;;IAO7B,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAOlC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;CAkB5C"}
+{"version":3,"file":"SsrComponents.d.ts","sourceRoot":"","sources":["../../../../src/ssr/SsrComponents.ts"],"names":[],"mappings":"AAAA,cAAc;AACd,MAAM,CAAC,OAAO,OAAO,aAAa;IACjC,OAAO,CAAC,OAAO,CAAc;;IAO7B,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAOlC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;CAkB5C"}

package/dist/ssr/SsrComponents.js

@@ -1,3 +1,4 @@
+/** @hidden */
 export default class SsrComponents {
     modules;
     constructor() {

package/package.json

@@ -1,10 +1,12 @@
 {
 	"name": "crelte",
-	"version": "0.1.0",
+	"version": "0.1.2",
 	"author": "Crelte <support@crelte.com>",
 	"type": "module",
 	"scripts": {
-		"check": "prettier -c .",
+		"check": "svelte-check",
+		"check-fmt": "prettier -c .",
+		"fmt": "prettier -w .",
 		"lint": "eslint ./src",
 		"test": "vitest",
 		"build": "svelte-package -i ./src",
@@ -70,10 +72,8 @@
 	"devDependencies": {
 		"@sveltejs/package": "^2.3.1",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@tsconfig/svelte": "^5.0.2",
-		"tslib": "^2.6.2",
-		"typescript": "^5.2.2",
-		"typescript-eslint": "^7.11.0",
+		"svelte-check": "^4.1.4",
+		"typescript-svelte-plugin": "^0.3.45",
 		"vitest": "^2.0.0"
 	}
 }