crelte 0.4.8 → 0.5.0-alpha.2

package/src/init/client.ts

@@ -1,9 +1,19 @@
 import { CrelteBuilder } from '../Crelte.js';
 import CrelteRequest from '../CrelteRequest.js';
-import { GraphQlQuery } from '../graphql/GraphQl.js';
 import { SiteFromGraphQl } from '../routing/Site.js';
-import { pluginsBeforeRender, prepareLoadFn, setupPlugins } from './shared.js';
+import {
+	loadFn,
+	pluginsBeforeRender,
+	pluginsBeforeRequest,
+	setupPlugins,
+} from './shared.js';
 import { tick } from 'svelte';
+import { svelteMount } from './svelteComponents.js';
+import ClientCookies from '../cookies/ClientCookies.js';
+import ClientRouter from '../routing/ClientRouter.js';
+import InternalApp from './InternalApp.js';
+import { Route } from '../routing/index.js';
+import { Writable } from 'crelte-std/stores';
 
 /**
  * The main function to start the client side rendering
@@ -13,10 +23,6 @@ export type MainData = {
 	app: any;
 	/** The Error.svelte module */
 	errorPage: any;
-	/** The entry query from queries/entry.graphql */
-	entryQuery: GraphQlQuery;
-	/** The global query from queries/global.graphql */
-	globalQuery?: GraphQlQuery;
 };
 
 const mainDataDefault = {
@@ -52,111 +58,110 @@ const mainDataDefault = {
 export async function main(data: MainData) {
 	data = { ...mainDataDefault, ...data };
 
-	// rendering steps
+	// todo if entryQuery or globalQuery is present show a hint
+	// they should be added to App.svelte and removed from here
 
-	// loadSites (first time)
-	// determine route (if site is empty on server redirect to correct language)
-	// loadData, entry (make globally available), pluginsData
-	// loadTemplate
-	// render
+	const builder = new CrelteBuilder(data.app.config ?? {});
 
-	// on route change
-	// determine route
-	// entry, pluginsData
-	// loadTemplate
-	// update
+	const serverError = builder.ssrCache.get('ERROR');
+	if (serverError) {
+		// todo should this init the client, but maybe we just
+		// want it as minimal as possible
 
-	// construct Crelte
+		svelteMount(data.errorPage.default, {
+			target: document.body,
+			props: serverError,
+		});
+		return;
+	}
 
-	const builder = new CrelteBuilder(data.app.config ?? {});
 	const endpoint = builder.ssrCache.get('ENDPOINT_URL') as string;
 	builder.setupGraphQl(endpoint);
 
 	// on the client the cookies are always coming from document.cookie
-	builder.setupCookies('');
+	builder.setupCookies(new ClientCookies());
 
 	const csites = builder.ssrCache.get('crelteSites') as SiteFromGraphQl[];
-	builder.setupRouter(csites);
+	const router = new ClientRouter(csites, {
+		debugTiming: builder.config.debugTiming ?? false,
+		preloadOnMouseOver: builder.config.preloadOnMouseOver ?? false,
+	});
+	builder.setupRouter(router);
 
 	const crelte = builder.build();
 
-	const serverError = crelte.ssrCache.get('ERROR');
-	if (serverError) {
-		// should this be called??
-		crelte.router._internal.initClient();
-
-		new data.errorPage.default({
-			target: document.body,
-			props: { ...serverError },
-			hydrate: true,
-			context: crelte._getContext(),
-		});
-		return;
-	}
+	const app = new InternalApp(data.app);
 
 	// setup plugins
-	setupPlugins(crelte, data.app.plugins ?? []);
-	data.app.init?.(crelte);
-
-	const loadFn = await prepareLoadFn(
-		crelte,
-		data.app,
-		data.entryQuery,
-		data.globalQuery,
-	);
+	setupPlugins(crelte, app.plugins);
+	app.init(crelte);
 
-	// setup load Data
-
-	crelte.router._internal.onLoad = (req, opts) => {
+	router.onNewCrelteRequest = req => {
 		const cr = new CrelteRequest(crelte, req);
-		return loadFn(cr, opts);
+		cr._setRouter(cr.router._toRequest(req));
+		cr._setGlobals(cr.globals._toRequest());
+		return cr;
 	};
 
+	router.onBeforeRequest = pluginsBeforeRequest;
+
+	router.loadRunner.loadFn = (cr, opts) => loadFn(cr, app, opts);
+
 	// render Space
 
 	let appInstance: any;
-	const updateAppProps = (props: any) => {
-		if (!appInstance) {
-			appInstance = new data.app.default({
-				target: document.body,
-				props,
-				hydrate: true,
-				context: crelte._getContext(),
-				intro: builder.config.playIntro,
-			});
-		} else {
-			appInstance.$set(props);
+	let routeProp: Writable<Route>;
+	const renderApp = (route: Route) => {
+		if (appInstance) {
+			routeProp!.set(route);
+			return;
 		}
+
+		routeProp = new Writable(route);
+		appInstance = svelteMount(data.app.default, {
+			target: document.body,
+			props: { route: routeProp },
+			context: crelte._getContext(),
+			intro: builder.config.playIntro,
+		});
 	};
 
-	let firstLoad = true;
-	crelte.router._internal.onLoaded = async (success, req, readyForProps) => {
-		const isFirstLoad = firstLoad;
-		firstLoad = false;
-
-		if (!success) {
-			// if this is not the first load we should reload the page
-			// we don't reload everytime because this might cause a reload loop
-			// and since the first load will probably just contain ssrCache data
-			// in almost all cases the first load will never faill
-			if (!isFirstLoad) {
-				// the load might contain a js error and we prefer the error
-				// page
-				window.location.reload();
-				return;
-			}
+	router.onError = e => {
+		console.error('routing failed:', e, 'reloading trying to fix it');
+		// since onError is called only on subsequent requests we should never
+		// have an infinite loop here
+		window.location.reload();
+	};
 
-			return handleLoadError(readyForProps());
-		}
+	// let firstLoad = true;
+	router.onRender = async (cr, readyForRoute, domUpdated) => {
+		if (appInstance && cr.req.disableLoadData) {
+			// if the app is already rendered and entry did not change
+			// we just wan't to run domUpdated because we don't wan't to update anything
 
-		const cr = new CrelteRequest(crelte, req);
+			const route = readyForRoute();
+			cr.router._requestCompleted();
+			// globals should not be run because they will be empty
+			// since nobody called loadGlobalData (todo maybe globals should also,
+			// know if it accepts updates)
+
+			// todo should we wait a tick here?
+			await tick();
+
+			domUpdated(cr, route);
+
+			return route;
+		}
 
 		const startTime = builder.config.debugTiming ? Date.now() : null;
+
 		let render = async () => {
+			const route = readyForRoute();
+			cr.router._requestCompleted();
+			cr.globals._syncToStores();
 			// we should trigger the route update here
-			pluginsBeforeRender(cr);
-			crelte.globals._updateSiteId(cr.site.id);
-			updateAppProps(readyForProps());
+			pluginsBeforeRender(cr, route);
+			renderApp(route);
 
 			await tick();
 
@@ -166,7 +171,9 @@ export async function main(data: MainData) {
 				);
 			}
 
-			crelte.router._internal.domReady(cr.req);
+			domUpdated(cr, route);
+
+			return route;
 		};
 
 		// render with view Transition if enabled and not in hydration
@@ -175,22 +182,26 @@ export async function main(data: MainData) {
 			appInstance &&
 			(document as any).startViewTransition
 		) {
-			render = () => (document as any).startViewTransition(render);
+			const prevRender = render;
+			render = async () =>
+				new Promise(resolve => {
+					(document as any).startViewTransition(async () => {
+						resolve(await prevRender());
+					});
+				});
 		}
 
-		await render();
+		return 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();
+	try {
+		await router.init();
+	} catch (e) {
+		// the first load we can't handle with a redirect since this might
+		// cause an infinite loop
+		// but since almost everything should be ssrCached nothing should fail
+		handleLoadError(e);
+	}
 }
 
 function handleLoadError(e: any) {

package/src/init/crelte-vite-plugin.d.ts

@@ -0,0 +1,5 @@
+declare module 'crelte-vite-plugin/svelteComponents.js' {
+	// Declarations for the internal functions imported from the plugin
+	export function internalSvelteMount(comp: any, options: any): any;
+	export function internalSvelteRender(comp: any, options: any): any;
+}

package/src/init/server.ts

@@ -1,11 +1,19 @@
 import { CrelteBuilder } from '../Crelte.js';
 import { SiteFromGraphQl } from '../routing/Site.js';
-import { pluginsBeforeRender, prepareLoadFn, setupPlugins } from './shared.js';
+import {
+	loadFn,
+	pluginsBeforeRender,
+	pluginsBeforeRequest,
+	setupPlugins,
+} from './shared.js';
 import SsrComponents from '../ssr/SsrComponents.js';
 import SsrCache from '../ssr/SsrCache.js';
 import ServerCookies from '../cookies/ServerCookies.js';
 import CrelteRequest from '../CrelteRequest.js';
-import { GraphQlQuery } from '../graphql/GraphQl.js';
+import { svelteRender } from './svelteComponents.js';
+import { Writable } from 'crelte-std/stores';
+import ServerRouter from '../routing/ServerRouter.js';
+import InternalApp from './InternalApp.js';
 
 export type ServerData = {
 	url: string;
@@ -25,10 +33,6 @@ export type ServerData = {
 export type MainData = {
 	/** The App.svelte module */
 	app: any;
-	/** The entry query from queries/entry.graphql */
-	entryQuery: GraphQlQuery;
-	/** The global query from queries/global.graphql */
-	globalQuery?: GraphQlQuery;
 
 	/** Server data provided by crelte-node */
 	serverData: ServerData;
@@ -60,6 +64,9 @@ export async function main(data: MainData): Promise<{
 	html?: string;
 	setCookies?: string[];
 }> {
+	// todo if entryQuery or globalQuery is present show a hint
+	// they should be added to App.svelte and removed from here
+
 	const builder = new CrelteBuilder(data.app.config ?? {});
 
 	// setup viteEnv
@@ -73,39 +80,50 @@ export async function main(data: MainData): Promise<{
 	builder.setupGraphQl(endpoint);
 
 	const cookies = data.serverData.cookies ?? '';
-	builder.setupCookies(cookies);
+	builder.setupCookies(new ServerCookies(cookies));
 
 	builder.ssrCache.set('crelteSites', data.serverData.sites);
-	builder.setupRouter(data.serverData.sites);
+	const router = new ServerRouter(data.serverData.sites, {
+		debugTiming: builder.config.debugTiming ?? false,
+	});
+	builder.setupRouter(router);
 
 	const crelte = builder.build();
 
-	// setup plugins
-	setupPlugins(crelte, data.app.plugins ?? []);
-	data.app.init?.(crelte);
-
-	const loadFn = await prepareLoadFn(
-		crelte,
-		data.app,
-		data.entryQuery,
-		data.globalQuery,
-	);
+	const app = new InternalApp(data.app);
 
-	// setup load Data
+	// setup plugins
+	setupPlugins(crelte, app.plugins);
+	app.init(crelte);
 
-	crelte.router._internal.onLoad = req => {
+	router.onNewCrelteRequest = req => {
 		const cr = new CrelteRequest(crelte, req);
-		return loadFn(cr);
+		cr._setRouter(cr.router._toRequest(req));
+		cr._setGlobals(cr.globals._toRequest());
+		return cr;
+	};
+
+	router.onBeforeRequest = pluginsBeforeRequest;
+
+	router.loadRunner.loadFn = (cr, opts) => loadFn(cr, app, opts);
+
+	router.onRender = (cr, readyForRoute, _domUpdated) => {
+		const route = readyForRoute();
+		cr.router._requestCompleted();
+		cr.globals._syncToStores();
+		pluginsBeforeRender(cr, route);
+
+		return route;
 	};
 
-	const { success, redirect, req, props } =
-		await crelte.router._internal.initServer(
-			data.serverData.url,
-			data.serverData.acceptLang,
-		);
-	if (!success) throw props;
+	// throws if there was an error
+	const [req, route] = await router.init(
+		data.serverData.url,
+		data.serverData.acceptLang,
+	);
 
-	if (redirect) {
+	// if redirect
+	if (!route) {
 		return {
 			status: req.statusCode ?? 302,
 			location: req.url.toString(),
@@ -119,23 +137,31 @@ export async function main(data: MainData): Promise<{
 	const ssrComponents = new SsrComponents();
 	ssrComponents.addToContext(context);
 
-	const cr = new CrelteRequest(crelte, req);
-	pluginsBeforeRender(cr);
-	crelte.globals._updateSiteId(cr.site.id);
+	// app should not use getRoute but use the route store
+	// received from the props, since it will only update when
+	// the entryChanges
+	const routeProp = new Writable(route);
+
 	// eslint-disable-next-line prefer-const
-	let { html, head } = data.app.default.render(props, { context });
+	let { html, head } = svelteRender(data.app.default, {
+		props: { route: routeProp },
+		context,
+	});
 
 	head += ssrComponents.toHead(data.serverData.ssrManifest);
 	head += crelte.ssrCache._exportToHead();
 
 	let htmlTemplate = data.serverData.htmlTemplate;
-	htmlTemplate = htmlTemplate.replace('<!--page-lang-->', cr.site.language);
+	htmlTemplate = htmlTemplate.replace(
+		'<!--page-lang-->',
+		route.site.language,
+	);
 
 	const finalHtml = htmlTemplate
 		.replace('</head>', head + '\n\t</head>')
 		.replace('<!--ssr-body-->', html);
 
-	const entry = props.entry;
+	const entry = route.entry;
 
 	return {
 		status:
@@ -189,8 +215,14 @@ export async function mainError(
 
 	ssrCache.set('ERROR', data.error);
 
+	// todo on the client crelte is in the context
+	// but it should match this impl
+
 	// eslint-disable-next-line prefer-const
-	let { html, head } = data.errorPage.default.render(data.error, { context });
+	let { html, head } = svelteRender(data.errorPage.default, {
+		props: data.error,
+		context,
+	});
 
 	head += ssrComponents.toHead(data.serverData.ssrManifest);
 	head += ssrCache._exportToHead();