crelte 0.1.0

package/src/graphql/GraphQl.ts

@@ -0,0 +1,281 @@
+import SsrCache, { calcKey as ssrCacheCalcKey } from '../ssr/SsrCache.js';
+
+export type GraphQlErrorResponse = {
+	status?: number;
+	body?: string;
+};
+
+// todo improve this
+export class GraphQlError extends Error {
+	resp: GraphQlErrorResponse;
+	ctx: any;
+
+	// ctx might be anything
+	constructor(resp: GraphQlErrorResponse, ctx: any = null) {
+		super();
+
+		this.resp = resp;
+		this.ctx = ctx;
+	}
+
+	status(): number {
+		return this.resp?.status ?? 500;
+	}
+
+	__isGraphQlError__() {}
+
+	get message(): string {
+		return 'GraphqlError: ' + JSON.stringify(this.resp);
+	}
+}
+
+export type GraphQlOptions = {
+	debug?: boolean;
+	debugTiming?: boolean;
+};
+
+export type GraphQlRequestOptions = {
+	path?: string;
+	ignoreStatusCode?: boolean;
+	previewToken?: string;
+	siteToken?: string;
+	caching?: boolean;
+	headers?: Record<string, string>;
+	// will be set by the request function
+	status?: number;
+};
+
+export default class GraphQl {
+	private endpoint: string;
+	private ssrCache: SsrCache;
+	private listeners: Map<
+		string,
+		[(resp: unknown) => void, (error: unknown) => void][]
+	>;
+
+	private loggingRequests: boolean;
+	private loggingTiming: boolean;
+
+	/**
+	 * Create a new GraphQL
+	 *
+	 * @param {Object} [opts={}] opts `{ debug: false, debugTiming: false }`
+	 */
+	constructor(
+		endpoint: string,
+		ssrCache: SsrCache,
+		opts: GraphQlOptions = {},
+	) {
+		this.endpoint = endpoint;
+		this.ssrCache = ssrCache;
+		this.listeners = new Map();
+
+		this.loggingRequests = opts?.debug ?? false;
+		this.loggingTiming = opts?.debugTiming ?? false;
+	}
+
+	// returns {} or throws
+	// options: {ignoreStatusCode, previewToken, caching, headers}
+	async request(
+		query: string,
+		variables: Record<string, unknown> = {},
+		options: GraphQlRequestOptions = {},
+	): Promise<unknown> {
+		let key;
+		if (options?.caching ?? true) {
+			key = await ssrCacheCalcKey({ query, variables });
+
+			const inCache = this.ssrCache.get(key);
+			if (inCache) return inCache;
+
+			// check if a listeners exists meaning the same request is already
+			// in progress
+			const listeners = this.listeners.get(key);
+			if (listeners) {
+				return new Promise((resolve, error) => {
+					listeners.push([resolve, error]);
+				});
+			}
+
+			// else setup the listener
+			this.listeners.set(key, []);
+		}
+
+		try {
+			const resp = await this.rawRequest(query, variables, options);
+			if (key) {
+				this.ssrCache.set(key, resp);
+
+				// ! because the listeners get's in the previous if statement and will
+				// always be set when the key is set
+				const listeners = this.listeners.get(key)!;
+				listeners.forEach(([resolve, _error]) => {
+					resolve(resp);
+				});
+
+				this.listeners.delete(key);
+			}
+
+			return resp;
+		} catch (e: unknown) {
+			if (key) {
+				// ! because the listeners get's in the previous if statement and will
+				// always be set when the key is set
+				const listeners = this.listeners.get(key)!;
+				listeners.forEach(([_resolve, error]) => {
+					error(e);
+				});
+
+				this.listeners.delete(key);
+			}
+
+			throw e;
+		}
+	}
+
+	// status will be set in opts
+	private async rawRequest(
+		query: string,
+		variables: Record<string, unknown> = {},
+		opts: GraphQlRequestOptions = {},
+	) {
+		opts.ignoreStatusCode = opts.ignoreStatusCode ?? false;
+
+		let url = this.endpoint;
+
+		if (opts?.previewToken) url += '?token=' + opts.previewToken;
+		else if (opts?.siteToken) url += '?siteToken=' + opts.siteToken;
+
+		const headers = opts?.headers ?? {};
+		headers['Content-Type'] = 'application/json';
+
+		if (this.loggingRequests) {
+			console.log('query to ', url, variables, opts);
+			headers['X-Debug'] = 'enable';
+		}
+
+		let timing;
+		if (this.loggingTiming) timing = Date.now();
+
+		const resp = await fetch(url, {
+			method: 'POST',
+			headers,
+			body: JSON.stringify({
+				query,
+				variables,
+			}),
+		});
+
+		if (opts.ignoreStatusCode) {
+			opts.status = resp.status;
+		} else if (!resp.ok) {
+			throw new GraphQlError(
+				{
+					status: resp.status,
+					body: await resp.text(),
+				},
+				'resp not ok',
+			);
+		}
+
+		if (resp.headers.get('x-debug-link'))
+			console.log('Debug link', resp.headers.get('x-debug-link'));
+
+		if (timing) {
+			console.log(
+				'request ' +
+					opts.path +
+					' vars: ' +
+					JSON.stringify(variables) +
+					' took ' +
+					(Date.now() - timing) +
+					'ms',
+			);
+		}
+
+		let jsonResp;
+		try {
+			jsonResp = await resp.json();
+		} catch (e: unknown) {
+			throw new GraphQlError(
+				{
+					status: resp.status,
+				},
+				e,
+			);
+		}
+
+		if ('errors' in jsonResp) {
+			console.log('graphql errors', jsonResp.errors);
+			throw new GraphQlError(
+				{
+					status: resp.status,
+				},
+				jsonResp.errors,
+			);
+		}
+
+		return jsonResp.data ?? null;
+	}
+}
+
+export class GraphQlQuery {
+	query: string;
+	path: string;
+
+	constructor(query: string, path: string) {
+		this.query = query;
+		this.path = path;
+	}
+
+	/// doc hidden
+	__GraphQlQuery__() {
+		return true;
+	}
+}
+
+/** Returns true if the passed object is a GraphQlQuery */
+export function isGraphQlQuery(obj: any): obj is GraphQlQuery {
+	return (
+		typeof obj === 'object' &&
+		obj !== null &&
+		typeof obj.__GraphQlQuery__ === 'function'
+	);
+}
+
+/**
+ * @description Create a GraphQL query string with variables.
+ * @param strings
+ * @param keys
+ *
+ * @example
+ *
+ * const query = gql`query ($id: ID!) { page(id: $id) { id } }`
+ */
+export function gql(
+	strings: TemplateStringsArray | string[] | string,
+	...keys: unknown[]
+): GraphQlQuery {
+	if (typeof strings === 'string') strings = [strings];
+
+	let query = '';
+	strings.forEach((string, i) => {
+		query += string;
+
+		if (typeof keys[i] !== 'undefined') {
+			const variable = keys[i];
+
+			// nesting support
+			if (isGraphQlQuery(variable)) {
+				query += variable.query;
+			} else if (typeof variable === 'string') {
+				query += variable;
+			} else {
+				console.error('invalid key', variable);
+				throw new Error('Invalid key: ' + typeof variable);
+			}
+		}
+	});
+
+	return new GraphQlQuery(query, import.meta.url);
+}

package/src/graphql/gql.test.ts

@@ -0,0 +1,123 @@
+import { test, expect, describe } from 'vitest';
+import { gql } from './GraphQl.js';
+
+// tests for the gql function
+// testing the query property
+describe('gql: query property', () => {
+	test('gql: without variables', () => {
+		const query = gql`a bc`;
+
+		expect(query).toHaveProperty('query', 'a bc');
+		expect(query).toHaveProperty('path');
+	});
+
+	test('gql: with one variable', () => {
+		const variable = 'var';
+		const query = gql`a ${variable} bc`;
+
+		expect(query).toHaveProperty('query', `a ${variable} bc`);
+		expect(query).toHaveProperty('path');
+	});
+
+	test('gql: with multiple variables', () => {
+		const variable1 = 'var1';
+		const variable2 = 'var2';
+		const variable3 = 'var3';
+
+		const query = gql`a ${variable1} bc ${variable2} def ${variable3}`;
+
+		expect(query).toHaveProperty(
+			'query',
+			`a ${variable1} bc ${variable2} def ${variable3}`,
+		);
+		expect(query).toHaveProperty('path');
+	});
+
+	test('gql: beginning with variable', () => {
+		const variable1 = 'var1';
+		const variable2 = 'var2';
+		const variable3 = 'var3';
+
+		const query = gql`${variable1} abc ${variable2} def ${variable3}`;
+
+		expect(query).toHaveProperty(
+			'query',
+			`${variable1} abc ${variable2} def ${variable3}`,
+		);
+		expect(query).toHaveProperty('path');
+	});
+
+	test('gql: ending with variable', () => {
+		const variable1 = 'var1';
+
+		const query = gql`abcdef ${variable1}`;
+
+		expect(query.query.trim()).toBe(`abcdef ${variable1}`);
+		expect(query).toHaveProperty('path');
+	});
+
+	test('gql: exclusive variable', () => {
+		const variable1 = 'var1';
+
+		const query = gql`
+			${variable1}
+		`;
+
+		expect(query.query.trim()).toBe(`${variable1}`);
+		expect(query).toHaveProperty('path');
+	});
+
+	test('gql: empty string', () => {
+		const query = gql``;
+
+		expect(query).toHaveProperty('query', ``);
+		expect(query).toHaveProperty('path');
+	});
+
+	test('gql: only variables', () => {
+		const variable1 = 'var1';
+		const variable2 = 'var2';
+		const variable3 = 'var3';
+
+		// prettier-ignore
+		const query = gql`${variable1}${variable2}${variable3}`;
+
+		expect(query).toHaveProperty(
+			'query',
+			`${variable1}${variable2}${variable3}`,
+		);
+		expect(query).toHaveProperty('path');
+	});
+});
+
+describe('gql: path property', () => {
+	const root = process.cwd();
+
+	test('gql: path is graphql.js file', () => {
+		const query = gql``;
+
+		expect(query).toHaveProperty('query');
+		expect(query).toHaveProperty(
+			'path',
+			'file://' + root + '/src/graphql/GraphQl.ts',
+		);
+	});
+});
+
+describe('gql: nesting', () => {
+	test('gql: nesting', () => {
+		const variable1 = 'var1';
+		const variable2 = 'var2';
+		const variable3 = 'var3';
+
+		const query = gql`a ${variable1} bc ${gql`a ${variable2} bc ${variable3}`}`;
+
+		expect(query).toHaveProperty(
+			'query',
+			`a ${variable1} bc a ${variable2} bc ${variable3}`,
+		);
+		expect(query).toHaveProperty('path');
+	});
+});
+
+describe.todo('gql: variable types. Handling of objects and arrays');

package/src/graphql/index.ts

@@ -0,0 +1,8 @@
+import GraphQl, {
+	gql,
+	GraphQlQuery,
+	GraphQlError,
+	GraphQlRequestOptions,
+} from './GraphQl.js';
+
+export { GraphQl, gql, GraphQlQuery, GraphQlError, type GraphQlRequestOptions };

package/src/index.ts

@@ -0,0 +1,109 @@
+import { getContext } from 'svelte';
+import type Route from './routing/Route.js';
+import type Router from './routing/Router.js';
+import type SsrCache from './ssr/SsrCache.js';
+import type Site from './routing/Site.js';
+import type GraphQl from './graphql/GraphQl.js';
+import Crelte from './Crelte.js';
+import CrelteRouted from './CrelteRouted.js';
+import CrelteBase from './CrelteBase.js';
+import { Global, GlobalData } from './loadData/Globals.js';
+import { Cookies } from './cookies/index.js';
+import { Readable } from 'crelte-std/stores';
+
+export { Crelte, CrelteRouted };
+export type { CrelteBase };
+
+/**
+ * Get the Crelte from the current context
+ */
+export function getCrelte(): Crelte {
+	return getContext('crelte');
+}
+
+/**
+ * Get the router from the current context
+ */
+export function getRouter(): Router {
+	return getCrelte().router;
+}
+
+/**
+ * Get the SSR cache from the current context
+ */
+export function getSsrCache(): SsrCache {
+	return getCrelte().ssrCache;
+}
+
+/**
+ * Get the GraphQl from the current context
+ */
+export function getGraphQl(): GraphQl {
+	return getCrelte().graphQl;
+}
+
+/**
+ * Get the current route
+ */
+export function getRoute(): Readable<Route> {
+	return getRouter().route;
+}
+
+/**
+ * Get the current site
+ */
+export function getSite(): Readable<Site> {
+	return getRouter().site;
+}
+
+/**
+ * Get the next route
+ */
+export function getNextRoute(): Readable<Route> {
+	return getRouter().nextRoute;
+}
+
+/**
+ * Get the next site
+ */
+export function getNextSite(): Readable<Site> {
+	return getRouter().nextSite;
+}
+
+/**
+ * returns an env Variables, always needs to be prefixed VITE_
+ * Except ENDPOINT_URL and CRAFT_WEB_URL
+ */
+export function getEnv(name: string): string | null {
+	return getCrelte().getEnv(name);
+}
+
+/**
+ * returns a store which indicates if the a page is loading
+ */
+export function getLoading(): Readable<boolean> {
+	return getRouter().loading;
+}
+
+/**
+ * returns a store which indicates the loading progress
+ */
+export function getLoadingProgress(): Readable<number> {
+	return getRouter().loadingProgress;
+}
+
+/**
+ * returns a store which contains a globalSet
+ */
+export function getGlobal<T extends GlobalData>(
+	name: string,
+): Global<T> | null {
+	return getCrelte().globals.get(name) ?? null;
+}
+
+/**
+ * returns the cookies instance
+ */
+export function getCookies(): Cookies {
+	return getCrelte().cookies;
+}

package/src/init/client.ts

@@ -0,0 +1,190 @@
+import { CrelteBuilder } from '../Crelte.js';
+import { SiteFromGraphQl } from '../routing/Site.js';
+import { loadFn, pluginsBeforeRender, setupPlugins } from './shared.js';
+import { tick } from 'svelte';
+
+export type MainData = {
+	/// svelte app component
+	app: any;
+	/// error page
+	errorPage: any;
+	entryQuery: any;
+	globalQuery?: any;
+
+	// options
+	preloadOnMouseOver?: boolean;
+	viewTransition?: boolean;
+	playIntro?: boolean;
+
+	// debug
+	graphQlDebug?: boolean;
+	debugTiming?: boolean;
+};
+
+const mainDataDefault = {
+	preloadOnMouseOver: false,
+	viewTransition: false,
+	playIntro: false,
+
+	// will be passed down to ClientRenderer
+	graphQlDebug: false,
+	debugTiming: false,
+};
+
+export function main(data: MainData) {
+	data = { ...mainDataDefault, ...data };
+
+	// rendering steps
+
+	// loadSites (first time)
+	// determine route (if site is empty on server redirect to correct language)
+	// loadData, entry (make globally available), pluginsData
+	// loadTemplate
+	// render
+
+	// on route change
+	// determine route
+	// entry, pluginsData
+	// loadTemplate
+	// update
+
+	// construct Crelte
+
+	const builder = new CrelteBuilder();
+	const endpoint = builder.ssrCache.get('ENDPOINT_URL') as string;
+	builder.setupGraphQl(endpoint, {
+		debug: data.graphQlDebug,
+		debugTiming: data.debugTiming,
+	});
+
+	// on the client the cookies are always comming from document.cookie
+	builder.setupCookies('');
+
+	const csites = builder.ssrCache.get('crelteSites') as SiteFromGraphQl[];
+	builder.setupRouter(csites, {
+		preloadOnMouseOver: data.preloadOnMouseOver,
+	});
+
+	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;
+	}
+
+	// setup plugins
+	setupPlugins(crelte, data.app.plugins ?? []);
+
+	// setup load Data
+
+	crelte.router._internal.onLoad = (route, site, opts) => {
+		const cr = crelte.toRouted(route, site);
+		return loadFn(cr, data.app, data.entryQuery, data.globalQuery, 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: data.playIntro,
+			});
+		} else {
+			appInstance.$set(props);
+		}
+	};
+
+	let firstLoad = true;
+	crelte.router._internal.onLoaded = async (
+		success,
+		route,
+		site,
+		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;
+			}
+
+			return handleLoadError(readyForProps());
+		}
+
+		const cr = crelte.toRouted(route, site);
+
+		const startTime = data.debugTiming ? Date.now() : null;
+		let render = async () => {
+			// we should trigger the route update here
+			pluginsBeforeRender(cr);
+			crelte.globals._updateSiteId(site.id);
+			updateAppProps(readyForProps());
+
+			await tick();
+
+			if (startTime) {
+				console.log(
+					'dom update took ' + (Date.now() - startTime) + 'ms',
+				);
+			}
+
+			crelte.router._internal.domReady(route);
+		};
+
+		// render with view Transition if enabled and not in hydration
+		if (
+			data.viewTransition &&
+			appInstance &&
+			(document as any).startViewTransition
+		) {
+			render = () => (document as any).startViewTransition(render);
+		}
+
+		await render();
+	};
+
+	crelte.router._internal.initClient();
+}
+
+function handleLoadError(e: any) {
+	console.log('loading or rendering the page failed with the error:');
+	console.error(e);
+
+	// Detect the browser language
+	// @ts-ignore
+	const userLang: string = navigator.language || navigator.userLanguage;
+
+	// Messages in different languages
+	const messages: Record<string, string> = {
+		en: 'An error has occurred. Please reload the page or try again later.',
+		de: 'Leider ist ein Fehler aufgetreten. Laden Sie die Seite neu, oder versuchen Sie es später noch mal.',
+		fr: 'Une erreur s’est produite. Veuillez recharger la page ou réessayer plus tard.',
+		it: 'Si è verificato un errore. Ricarica la pagina o riprova più tardi.',
+		nl: 'Er is een fout opgetreden. Herlaad de pagina of probeer het later opnieuw.',
+	};
+
+	const message = messages[userLang.split('-')[0]] ?? messages.en;
+
+	alert(message);
+}