crelte 0.1.0

package/src/init/server.ts

@@ -0,0 +1,177 @@
+import { CrelteBuilder } from '../Crelte.js';
+import { SiteFromGraphQl } from '../routing/Site.js';
+import { loadFn, pluginsBeforeRender, setupPlugins } from './shared.js';
+import SsrComponents from '../ssr/SsrComponents.js';
+import SsrCache from '../ssr/SsrCache.js';
+import ServerCookies from '../cookies/ServerCookies.js';
+
+export type ServerData = {
+	url: string;
+	htmlTemplate: string;
+	ssrManifest: Record<string, string[]>;
+	acceptLang?: string;
+	endpoint: string;
+	craftWeb: string;
+	viteEnv: Map<string, string>;
+	cookies?: string;
+};
+
+export type MainData = {
+	/// svelte app component
+	app: any;
+	entryQuery: any;
+	globalQuery?: any;
+
+	serverData: ServerData;
+
+	// debug
+	graphQlDebug?: boolean;
+	debugTiming?: boolean;
+};
+
+export async function main(data: MainData): Promise<{
+	status: number;
+	location?: string;
+	html?: string;
+	setCookies?: string[];
+}> {
+	const builder = new CrelteBuilder();
+
+	// setup viteEnv
+	data.serverData.viteEnv.forEach((v, k) => {
+		builder.ssrCache.set(k, v);
+	});
+
+	const endpoint = data.serverData.endpoint;
+	builder.ssrCache.set('ENDPOINT_URL', endpoint);
+	builder.ssrCache.set('CRAFT_WEB_URL', data.serverData.craftWeb);
+	builder.setupGraphQl(endpoint, {
+		debug: data.graphQlDebug,
+		debugTiming: data.debugTiming,
+	});
+
+	const cookies = data.serverData.cookies ?? '';
+	builder.setupCookies(cookies);
+
+	const csites = await loadSites(builder);
+	builder.ssrCache.set('crelteSites', csites);
+	builder.setupRouter(csites);
+
+	const crelte = builder.build();
+
+	// setup plugins
+	setupPlugins(crelte, data.app.plugins ?? []);
+
+	// setup load Data
+
+	crelte.router._internal.onLoad = (route, site) => {
+		const cr = crelte.toRouted(route, site);
+		return loadFn(cr, data.app, data.entryQuery, data.globalQuery);
+	};
+
+	const { success, redirect, route, site, props } =
+		await crelte.router._internal.initServer(
+			data.serverData.url,
+			data.serverData.acceptLang,
+		);
+	if (!success) throw props;
+
+	if (redirect) {
+		return {
+			status: 302,
+			location: route.url.toString(),
+		};
+	}
+
+	const context = crelte._getContext();
+	const ssrComponents = new SsrComponents();
+	ssrComponents.addToContext(context);
+
+	pluginsBeforeRender(crelte.toRouted(route, site));
+	crelte.globals._updateSiteId(site.id);
+	// eslint-disable-next-line prefer-const
+	let { html, head } = data.app.default.render(props, { context });
+
+	head += ssrComponents.toHead(data.serverData.ssrManifest);
+	head += crelte.ssrCache._exportToHead();
+
+	let htmlTemplate = data.serverData.htmlTemplate;
+	htmlTemplate = htmlTemplate.replace('<!--page-lang-->', site.language);
+
+	const finalHtml = htmlTemplate
+		.replace('</head>', head + '\n\t</head>')
+		.replace('<!--ssr-body-->', html);
+
+	const entry = props.entry;
+
+	return {
+		status:
+			entry.sectionHandle === 'error' ? parseInt(entry.typeHandle) : 200,
+		html: finalHtml,
+		setCookies: (crelte.cookies as ServerCookies)._getSetCookiesHeaders(),
+	};
+}
+
+export type Error = {
+	status: number;
+	message: any;
+};
+
+export type MainErrorData = {
+	/// svelte app component
+	error: Error;
+	errorPage: any;
+
+	serverData: ServerData;
+};
+
+export async function mainError(
+	data: MainErrorData,
+): Promise<{ status: number; html?: string }> {
+	const ssrCache = new SsrCache();
+
+	const context = new Map();
+	const ssrComponents = new SsrComponents();
+	ssrComponents.addToContext(context);
+
+	ssrCache.set('ERROR', data.error);
+
+	// eslint-disable-next-line prefer-const
+	let { html, head } = data.errorPage.default.render(data.error, { context });
+
+	head += ssrComponents.toHead(data.serverData.ssrManifest);
+	head += ssrCache._exportToHead();
+
+	let htmlTemplate = data.serverData.htmlTemplate;
+	htmlTemplate = htmlTemplate.replace('<!--page-lang-->', 'de');
+
+	const finalHtml = htmlTemplate
+		.replace('<!--ssr-head-->', head)
+		.replace('<!--ssr-body-->', html);
+
+	return {
+		status: data.error.status,
+		html: finalHtml,
+	};
+}
+
+// requires, GraphQl, SsrCache
+async function loadSites(builder: CrelteBuilder): Promise<SiteFromGraphQl[]> {
+	if (!builder.graphQl) throw new Error();
+
+	if ('CRAFT_SITES_CACHED' in globalThis) {
+		// @ts-ignore
+		return globalThis['CRAFT_SITES_CACHED'];
+	}
+
+	const resp = (await builder.graphQl.request(
+		'query { crelteSites { id baseUrl language name handle primary } }',
+		{},
+		// don't cache since we cache ourself
+		{ caching: false },
+	)) as { crelteSites: SiteFromGraphQl[] };
+
+	// @ts-ignore
+	globalThis['CRAFT_SITES_CACHED'] = resp.crelteSites;
+	return resp.crelteSites;
+}

package/src/init/shared.ts

@@ -0,0 +1,221 @@
+import CrelteRouted, { GraphQlQuery } from '../CrelteRouted.js';
+import Crelte from '../Crelte.js';
+import { LoadData, callLoadData } from '../loadData/index.js';
+import { PluginCreator } from '../plugins/Plugins.js';
+import { LoadOptions } from '../routing/PageLoader.js';
+
+interface App<D, E, T> {
+	loadGlobalData?: LoadData<D>;
+
+	// todo: add a generic
+	loadEntryData?: LoadData<any>;
+
+	templates?: Record<string, LazyTemplateModule<E, T>>;
+}
+
+interface TemplateModule<E, T> {
+	// svelte component
+	default: any;
+
+	loadData?(cr: CrelteRouted, entry: E): Promise<T>;
+}
+
+type LazyTemplateModule<E, T> =
+	| (() => Promise<TemplateModule<E, T>>)
+	| TemplateModule<E, T>;
+
+export function setupPlugins(crelte: Crelte, plugins: PluginCreator[]) {
+	for (const plugin of plugins) {
+		const p = plugin(crelte);
+		crelte.plugins.add(p);
+	}
+}
+
+export function pluginsBeforeRender(cr: CrelteRouted): void {
+	cr.events.trigger('beforeRender', cr);
+}
+
+/**
+ * Get the entry from the page
+ *
+ * entries should export sectionHandle and typeHandle
+ *
+ * products should alias productTypeHandle with typeHandle,
+ * sectionHandle will be automatically set to product
+ */
+export function getEntry(page: any): any {
+	if (page?.entry) return { ...page.entry };
+	if (page?.product)
+		return {
+			sectionHandle: 'product',
+			...page.product,
+		};
+
+	return {
+		sectionHandle: 'error',
+		typeHandle: '404',
+	};
+}
+
+export async function loadFn<D, E, T>(
+	cr: CrelteRouted,
+	app: App<D, E, T>,
+	entryQuery: GraphQlQuery,
+	globalQuery?: GraphQlQuery,
+	loadOpts?: LoadOptions,
+): Promise<any> {
+	let dataProm: Promise<D> | null = null;
+	// @ts-ignore
+	if (app.loadData) {
+		throw new Error(
+			'loadData is ambigous, choose loadGlobalData or ' +
+				'loadEntryData depending on if you need access to entry or not?',
+		);
+	}
+
+	if (app.loadGlobalData) {
+		dataProm = callLoadData(app.loadGlobalData, cr) as any;
+	}
+
+	let globalProm: Promise<any> | null = null;
+	if (globalQuery && !cr.globals._wasLoaded()) {
+		globalProm = (async () => {
+			const res = await cr.query(globalQuery);
+			// we need to do this sorcery here and can't wait until all
+			// globals functions are done, because some global function
+			// might want to use globals, and for that the function
+			// getOrWait exists on Globals
+			cr.globals._setData(cr.site.id, res);
+			return res;
+		})();
+	}
+
+	let pageProm = null;
+	if (cr.route.site) {
+		let uri = decodeURI(cr.route.uri);
+		if (uri.startsWith('/')) uri = uri.substring(1);
+		if (uri === '' || uri === '/') uri = '__home__';
+
+		pageProm = cr.query(entryQuery, {
+			uri,
+			siteId: cr.route.site.id,
+		});
+	}
+
+	const pluginsLoadGlobalData = cr.events.trigger('loadGlobalData', cr);
+
+	// loading progress is at 20%
+	loadOpts?.setProgress(0.2);
+
+	const [data, global, page] = await Promise.all([
+		dataProm,
+		globalProm,
+		pageProm,
+		...pluginsLoadGlobalData,
+	]);
+
+	if (global) {
+		cr.globals._setData(cr.site.id, global);
+	} else if (!cr.globals._wasLoaded()) {
+		// we need to set the global data to an empty object
+		// so any waiters get's triggered
+		cr.globals._setData(cr.site.id, {});
+	}
+
+	// allow cr to get the global data
+	cr._globalDataLoaded();
+
+	const entry = getEntry(page);
+
+	let template;
+	if (app.templates) {
+		template = await loadTemplate(app.templates, entry);
+	} else {
+		throw new Error('App must have templates or loadTemplate method');
+	}
+
+	// loading progress is at 60%
+	loadOpts?.setProgress(0.6);
+
+	const pluginsLoadData = cr.events.trigger('loadData', cr, entry);
+
+	let loadDataProm = null;
+	if (template.loadData) {
+		loadDataProm = callLoadData(template.loadData, cr, entry);
+	}
+
+	let entryDataProm: Promise<any> | null = null;
+	if (app.loadEntryData) {
+		entryDataProm = callLoadData(app.loadEntryData, cr, entry) as any;
+	}
+
+	const [templateData, entryData] = await Promise.all([
+		loadDataProm,
+		entryDataProm,
+		...pluginsLoadData,
+	]);
+
+	// loading progress is at 100%
+	loadOpts?.setProgress(1);
+
+	return {
+		...data,
+		...entryData,
+		entry,
+		template: template.default,
+		templateData: templateData! as any,
+	};
+}
+
+function parseFilename(path: string): [string, string] {
+	// get filename with extension
+	const slash = path.lastIndexOf('/');
+	const filename = path.substring(slash + 1);
+
+	const extPos = filename.lastIndexOf('.');
+
+	const name = filename.substring(0, extPos);
+	const ext = filename.substring(extPos + 1);
+
+	return [name, ext];
+}
+
+async function loadTemplate<E, T>(
+	rawModules: Record<string, LazyTemplateModule<E, T>>,
+	entry: E,
+): Promise<TemplateModule<E, T>> {
+	// parse modules
+	const modules = new Map(
+		Object.entries(rawModules)
+			.map(([path, mod]) => {
+				const [name, _ext] = parseFilename(path);
+				return [name, mod] as [string, LazyTemplateModule<E, T>];
+			})
+			.filter(([name, _mod]) => !!name),
+	);
+
+	const entr = entry as any;
+	const handle = `${entr.sectionHandle}-${entr.typeHandle}`;
+
+	if (
+		// @ts-ignore
+		import.meta.env.DEV &&
+		!modules.has(handle) &&
+		!modules.has(entr.sectionHandle)
+	) {
+		console.error(
+			`Template not found: <${handle}>, expecting file: ${handle}.svelte or ${entr.sectionHandle}.svelte`,
+		);
+	}
+
+	const loadMod =
+		modules.get(handle) ??
+		modules.get(entr.sectionHandle) ??
+		modules.get('error-404');
+	if (!loadMod) throw new Error('could not find error-404 template');
+
+	if (typeof loadMod === 'function') {
+		return await loadMod();
+	}
+	return loadMod;
+}

package/src/loadData/Globals.ts

@@ -0,0 +1,150 @@
+/*
+// returns a store which get's updated as soon as the site changes
+const emergency = getGlobal('emergency');
+
+// returns the data based on the current site (no store)
+cr.getGlobal('emergency')
+*/
+
+import { Writable } from 'crelte-std/stores';
+
+export type GlobalWaiters = [(g: Global<any> | null) => void];
+
+export default class Globals {
+	// while the globals are not loaded if somebody calls
+	// getOrWait then we need to store the waiters
+	private waiters: Map<string, GlobalWaiters>;
+	private entries: Map<string, Global<any>>;
+	private loaded: boolean;
+	private prevSiteId: number | null;
+
+	constructor() {
+		this.waiters = new Map();
+		this.entries = new Map();
+		this.loaded = false;
+		this.prevSiteId = null;
+	}
+
+	get(name: string): Global<any> | null {
+		return this.entries.get(name) ?? null;
+	}
+
+	// call this only in loadGlobalData when by default the global
+	// is not available
+	getAsync(name: string): Promise<Global<any> | null> | Global<any> | null {
+		if (this.loaded) return this.get(name);
+
+		let waiter = this.waiters.get(name);
+		if (!waiter) {
+			waiter = [] as any;
+			this.waiters.set(name, waiter!);
+		}
+
+		return new Promise(resolve => {
+			waiter!.push(resolve);
+		});
+	}
+
+	// hidden
+	_wasLoaded(): boolean {
+		return this.loaded;
+	}
+
+	// hidden
+	// data is the data from the global graphql
+	// so it contains some keys and data which should be parsed
+	// and created a store for each key
+	_setData(siteId: number, data: any) {
+		const wasLoaded = this.loaded;
+		this.loaded = true;
+
+		for (const [key, value] of Object.entries(data)) {
+			this.entries.set(key, new Global(key, value as any, siteId));
+		}
+
+		if (!wasLoaded) {
+			this.waiters.forEach((waiters, key) => {
+				waiters.forEach(waiter => waiter(this.get(key)));
+			});
+			this.waiters.clear();
+		}
+	}
+
+	_globalsBySite(siteId: number): Map<string, any> {
+		const map = new Map();
+
+		for (const [key, global] of this.entries) {
+			map.set(key, global.bySiteId(siteId));
+		}
+
+		return map;
+	}
+
+	_updateSiteId(siteId: number) {
+		// todo we should only trigger
+		if (this.prevSiteId === siteId) return;
+
+		this.entries.forEach(global => global._updateSiteId(siteId));
+	}
+}
+
+export interface GlobalData {
+	siteId?: number;
+}
+
+export class Global<T extends GlobalData> {
+	private inner: Writable<T>;
+	/// if languages is null this means we always have the same data
+	private languages: T[] | null;
+
+	constructor(name: string, data: T[] | T, siteId: number) {
+		this.languages = null;
+
+		let inner: T;
+		if (Array.isArray(data)) {
+			// make sure the data contains an object with the property
+			// siteId
+			this.languages = data;
+			inner = data.find(d => d.siteId === siteId)!;
+
+			if (!inner?.siteId) {
+				throw new Error(
+					`The global query ${name} does not contain the required siteId property`,
+				);
+			}
+		} else {
+			inner = data;
+		}
+
+		this.inner = new Writable(inner);
+	}
+
+	/**
+	 * The function get's called once with the current value and then when the
+	 * values changes
+	 *
+	 * @return a function which should be called to unsubscribe
+	 */
+	subscribe(fn: (val: T) => void): () => void {
+		return this.inner.subscribe(fn);
+	}
+
+	get(): T {
+		return this.inner.get();
+	}
+
+	/// if you pass a siteId which comes from craft then you will never receive null
+	bySiteId(siteId: number): T | null {
+		if (this.languages)
+			return this.languages.find(d => d.siteId === siteId) ?? null;
+
+		return this.inner.get();
+	}
+
+	_updateSiteId(siteId: number) {
+		if (!this.languages) return;
+
+		const inner = this.languages.find(d => d.siteId === siteId);
+		this.inner.set(inner!);
+	}
+}

package/src/loadData/index.ts

@@ -0,0 +1,67 @@
+/**
+ *
+ */
+
+import type CrelteRouted from '../CrelteRouted.js';
+import { isGraphQlQuery, type GraphQlQuery } from '../graphql/GraphQl.js';
+import type Globals from './Globals.js';
+import type { Global } from './Globals.js';
+
+export type { Globals, Global };
+
+export type LoadData<T> =
+	| ((cr: CrelteRouted, ...args: any[]) => Promise<T>)
+	| GraphQlQuery
+	| T;
+
+export async function callLoadData(
+	ld: LoadData<unknown>,
+	cr: CrelteRouted,
+	...args: any[]
+): Promise<unknown> {
+	// either we have a function
+	if (typeof ld === 'function') {
+		return await ld(cr, ...args);
+	}
+
+	// or a graphql query
+	if (isGraphQlQuery(ld)) {
+		return await cr.query(ld);
+	}
+
+	// or an object
+	if (typeof ld === 'object' && ld !== null) {
+		const data = await Promise.all(
+			Object.values(ld).map(nld => callLoadData(nld, cr, ...args)),
+		);
+
+		return Object.fromEntries(
+			Object.keys(ld).map((key, i) => [key, data[i]]),
+		);
+	}
+
+	return ld;
+}
+
+/**
+ * Spread the data of two loadData functions.
+ *
+ * ## Example
+ * ```
+ * export const loadData = mergeLoadData(
+ * 		{
+ * 			filter: (cr) => cr.route.search.get('filter'),
+ * 		},
+ * 		(cr) => cr.query(myQuery, { siteId: cr.site.id })
+ * )
+ * ```
+ */
+export function mergeLoadData(...lds: LoadData<object>[]): LoadData<object> {
+	return async (cr: CrelteRouted, ...args: any[]) => {
+		const datas = await Promise.all(
+			lds.map(ld => callLoadData(ld, cr, ...args) as Promise<object>),
+		);
+
+		return datas.reduce((acc, data) => ({ ...acc, ...data }), {});
+	};
+}

package/src/plugins/Events.ts

@@ -0,0 +1,50 @@
+import { CrelteRouted } from '../index.js';
+
+export default class Events {
+	inner: Map<string, Set<any>>;
+
+	constructor() {
+		this.inner = new Map();
+	}
+
+	/*
+	 * Listens for an event.
+	 */
+	// override this function to add your own function signatures
+	on(
+		ev: 'loadGlobalData',
+		fn: (cr: CrelteRouted) => Promise<any>,
+	): () => void;
+	on(
+		ev: 'loadData',
+		fn: (cr: CrelteRouted, entry: any, data: any) => Promise<any>,
+	): () => void;
+	on(ev: 'beforeRender', fn: (cr: CrelteRouted) => void): () => void;
+	on(ev: string, fn: (...args: any[]) => any): () => void {
+		let set = this.inner.get(ev);
+		if (!set) {
+			set = new Set();
+			this.inner.set(ev, set);
+		}
+
+		set.add(fn);
+
+		return () => {
+			set!.delete(fn);
+		};
+	}
+
+	remove(ev: string, fn: any) {
+		const set = this.inner.get(ev);
+		if (!set) return;
+
+		set.delete(fn);
+	}
+
+	trigger(ev: string, ...args: any[]): any[] {
+		const set = this.inner.get(ev);
+		if (!set) return [];
+
+		return Array.from(set).map(fn => fn(...args));
+	}
+}

package/src/plugins/Plugins.ts

@@ -0,0 +1,23 @@
+import Crelte from '../Crelte.js';
+
+export interface Plugin {
+	name: string;
+}
+
+export type PluginCreator = (crelte: Crelte) => Plugin;
+
+export default class Plugins {
+	plugins: Map<string, Plugin>;
+
+	constructor() {
+		this.plugins = new Map();
+	}
+
+	add(plugin: Plugin) {
+		this.plugins.set(plugin.name, plugin);
+	}
+
+	get(name: string): Plugin | null {
+		return this.plugins.get(name) ?? null;
+	}
+}

package/src/plugins/index.ts

@@ -0,0 +1,5 @@
+import Events from './Events.js';
+import { Plugin, PluginCreator } from './Plugins.js';
+
+export type { Plugin, PluginCreator };
+export { Events };