crelte 0.4.8 → 0.5.0-alpha.2

package/src/init/shared.ts

@@ -1,34 +1,13 @@
 import Crelte from '../Crelte.js';
 import CrelteRequest from '../CrelteRequest.js';
-import EntryRouter, { EntryRoutes } from '../entry/EntryRouter.js';
-import { EntryQueryVars } from '../entry/index.js';
-import { GraphQlQuery } from '../graphql/GraphQl.js';
+import { GraphQlQuery, isGraphQlQuery } from '../graphql/GraphQl.js';
 import { Entry } from '../index.js';
-import { LoadData, callLoadData } from '../loadData/index.js';
+import { callLoadData } from '../loadData/index.js';
 import { PluginCreator } from '../plugins/Plugins.js';
-import { LoadOptions } from '../routing/PageLoader.js';
-
-interface App {
-	loadGlobalData?: LoadData<null>;
-
-	// todo: add a generic
-	loadEntryData?: LoadData<Entry>;
-
-	templates?: Record<string, LazyTemplateModule>;
-
-	entryRoutes?: EntryRoutes;
-
-	init?: (crelte: Crelte) => void;
-}
-
-interface TemplateModule {
-	// svelte component
-	default: any;
-
-	loadData?: LoadData<Entry>;
-}
-
-type LazyTemplateModule = (() => Promise<TemplateModule>) | TemplateModule;
+import { LoadOptions } from '../routing/LoadRunner.js';
+import { isPromise } from '../utils.js';
+import InternalApp, { TemplateModule } from './InternalApp.js';
+import Route from '../routing/Route.js';
 
 export function setupPlugins(crelte: Crelte, plugins: PluginCreator[]) {
 	for (const plugin of plugins) {
@@ -37,124 +16,94 @@ export function setupPlugins(crelte: Crelte, plugins: PluginCreator[]) {
 	}
 }
 
-export function pluginsBeforeRender(cr: CrelteRequest): void {
-	cr.events.trigger('beforeRender', cr);
+export function pluginsBeforeRequest(cr: CrelteRequest): Promise<void> | void {
+	const res = cr.events.trigger('beforeRequest', cr);
+	// if one of them is a promise we need to wait for it
+	if (res.some(isPromise)) {
+		return Promise.all(res).then();
+	}
 }
 
-const ERROR_404_ENTRY: Entry = {
-	sectionHandle: 'error',
-	typeHandle: '404',
-};
-
-/**
- * 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
- */
-function getEntry(page: any): Entry | null {
-	if (page?.entry) return { ...page.entry };
-	if (page?.product)
-		return {
-			sectionHandle: 'product',
-			...page.product,
-		};
-
-	return null;
+export function pluginsBeforeRender(cr: CrelteRequest, route: Route): void {
+	cr.events.trigger('beforeRender', cr, route);
 }
 
-// todo it would be nice to call this only once per server start
-export async function prepareLoadFn(
-	crelte: Crelte,
-	app: App,
-	entryQuery: GraphQlQuery,
-	globalQuery?: GraphQlQuery,
-): Promise<(cr: CrelteRequest, loadOpts?: LoadOptions) => Promise<any>> {
-	const templateModules = prepareTemplates(app.templates ?? {});
-	let entryRouter: EntryRouter | null = null;
-	if (app.entryRoutes) {
-		entryRouter = new EntryRouter(crelte);
-		await app.entryRoutes(entryRouter);
-	}
-
-	return async (cr, loadOpts) => {
-		return await loadFn(
-			cr,
-			app,
-			templateModules,
-			entryRouter,
-			entryQuery,
-			globalQuery,
-			loadOpts,
-		);
-	};
-}
+// This should be onRequest or handleRequest
+//
+// it should also handle the site redirect and stuff like that
+// we should have a onRequest
 
-async function loadFn(
+export async function loadFn(
 	cr: CrelteRequest,
-	app: App,
-	templateModules: Map<string, LazyTemplateModule>,
-	entryRouter: EntryRouter | null,
-	entryQuery: GraphQlQuery,
-	globalQuery?: GraphQlQuery,
+	app: InternalApp,
 	loadOpts?: LoadOptions,
-): Promise<any> {
-	let dataProm: Promise<any> | 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?',
-		);
-	}
+): Promise<void> {
+	const isCanceled = () => !!loadOpts?.isCanceled();
 
-	if (app.loadGlobalData) {
-		dataProm = callLoadData(app.loadGlobalData, cr, null) as any;
-	}
+	// loadGlobalData phase
 
 	let globalProm: Promise<any> | null = null;
-	if (globalQuery && !cr.globals._wasLoaded(cr.site.id)) {
+
+	if (app.loadGlobalData) {
+		// we need to set the globals as soon as loadGlobalData completes
+		// because other loadGlobalData functions might wait on the result
 		globalProm = (async () => {
-			const res = await cr.query(globalQuery, {
-				siteId: cr.site.id,
-			});
-			// 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
-			// getAsync exists on Globals
-			cr.globals._setData(cr.site.id, res);
-			return res;
+			// todo theoretically we could if the loadData is a an LoadObject
+			// assign each to the global as soon as we have it. Which might
+			// prevent some deadlocks but i don't think this will happen
+			// often
+			const globals = await callLoadData(app.loadGlobalData, cr, null);
+			if (!globals) return globals;
+
+			if (typeof globals !== 'object') {
+				throw new Error(
+					'loadGlobalData needs to return an object or nothing',
+				);
+			}
+
+			for (const [k, v] of Object.entries(globals)) {
+				cr.globals.set(k, v);
+			}
 		})();
 	}
 
-	const entryProm = queryEntry(cr, app, entryRouter, entryQuery);
+	// todo maybe each setting of the property on the request should be
+	// checked to be empty before doing it
+	const entryProm = (async () => {
+		let loadEntry = app.loadEntry;
+		if (isGraphQlQuery(loadEntry)) {
+			const entryQuery = loadEntry;
+			loadEntry = cr => queryEntry(cr, entryQuery);
+		}
+
+		let entry: Entry = await callLoadData(loadEntry, cr, null);
+		if (isCanceled()) return [];
+		cr.req.entry = entry;
+
+		await Promise.all(cr.events.trigger('afterLoadEntry', cr));
+		if (isCanceled()) return [];
+		entry = cr.req.entry;
+
+		const template = await app.loadTemplate(entry);
+		if (isCanceled()) return [];
+		cr.req.template = template;
+
+		return [entry, template] as [Entry, TemplateModule];
+	})();
 
 	const pluginsLoadGlobalData = cr.events.trigger('loadGlobalData', cr);
 
 	// loading progress is at 20%
 	loadOpts?.setProgress(0.2);
 
-	const [data, global, entry] = await Promise.all([
-		dataProm,
+	const [_global, [entry, template]] = await Promise.all([
 		globalProm,
 		entryProm,
 		...pluginsLoadGlobalData,
 	]);
+	if (isCanceled()) return;
 
-	// global is only set if !wasLoaded but we need to store something
-	// even if no globalQuery exists
-	if (global || !cr.globals._wasLoaded(cr.site.id)) {
-		cr.globals._setData(cr.site.id, global ?? {});
-	}
-
-	let template;
-	if (app.templates) {
-		template = await loadTemplate(templateModules, entry);
-	} else {
-		throw new Error('App must export some templates');
-	}
+	cr.globals._globalsLoaded();
 
 	// loading progress is at 60%
 	loadOpts?.setProgress(0.6);
@@ -168,7 +117,7 @@ async function loadFn(
 
 	let entryDataProm: Promise<any> | null = null;
 	if (app.loadEntryData) {
-		entryDataProm = callLoadData(app.loadEntryData, cr, entry) as any;
+		entryDataProm = callLoadData(app.loadEntryData, cr, entry);
 	}
 
 	const [templateData, entryData] = await Promise.all([
@@ -177,126 +126,57 @@ async function loadFn(
 		...pluginsLoadData,
 	]);
 
-	// loading progress is at 100%
-	loadOpts?.setProgress(1);
-
-	return {
-		...data,
+	cr.req.loadedData = {
+		...templateData,
 		...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];
+	// loading progress is at 100%
+	loadOpts?.setProgress(1);
 }
 
-async function queryEntry(
+export async function queryEntry(
 	cr: CrelteRequest,
-	app: App,
-	entryRouter: EntryRouter | null,
 	entryQuery: GraphQlQuery,
 ): Promise<Entry> {
-	let vars: EntryQueryVars | null = null;
-
-	if (cr.req.siteMatches()) {
-		let uri = decodeURI(cr.req.uri);
-		if (uri.startsWith('/')) uri = uri.substring(1);
-		if (uri === '' || uri === '/') uri = '__home__';
-
-		vars = {
-			uri,
-			siteId: cr.site.id,
-		};
-	}
-
-	if (vars) {
-		await Promise.all(cr.events.trigger('beforeQueryEntry', cr, vars));
-	}
-
-	// basic query function
-	let loadFn = async (vars: EntryQueryVars | null) => {
-		if (entryRouter) {
-			const entry = await entryRouter._handle(cr);
-			if (entry) return entry;
-		}
-
-		if (vars) {
-			const page = await cr.query(entryQuery, vars);
+	if (!cr.req.siteMatches())
+		throw new Error(
+			'to run the entryQuery the request needs to have a matching site',
+		);
 
-			return getEntry(page);
-		}
+	let uri = decodeURI(cr.req.uri);
+	if (uri.startsWith('/')) uri = uri.substring(1);
+	if (uri === '' || uri === '/') uri = '__home__';
 
-		return null;
+	const vars = {
+		uri,
+		siteId: cr.site.id,
 	};
 
-	// check if a plugin wants to override the query
-	const fns = cr.events.getListeners('queryEntry');
-	for (const fn of fns) {
-		const prevLoadFn = loadFn;
-		loadFn = async vars => {
-			return await fn(cr, vars, prevLoadFn);
-		};
-	}
-
-	const entry = (await loadFn(vars)) ?? ERROR_404_ENTRY;
-
-	await Promise.all(cr.events.trigger('afterQueryEntry', cr, entry));
-
-	return entry;
-}
-
-function prepareTemplates(
-	rawModules: Record<string, LazyTemplateModule>,
-): Map<string, LazyTemplateModule> {
-	// parse modules
-	return new Map(
-		Object.entries(rawModules)
-			.map(([path, mod]) => {
-				const [name, _ext] = parseFilename(path);
-				return [name, mod] as [string, LazyTemplateModule];
-			})
-			.filter(([name, _mod]) => !!name),
-	);
+	const page = await cr.query(entryQuery, vars);
+	return getEntry(page) ?? ERROR_404_ENTRY;
 }
 
-async function loadTemplate(
-	modules: Map<string, LazyTemplateModule>,
-	entry: Entry,
-): Promise<TemplateModule> {
-	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 ERROR_404_ENTRY: Entry = {
+	sectionHandle: 'error',
+	typeHandle: '404',
+};
 
-	const loadMod =
-		modules.get(handle) ??
-		modules.get(entr.sectionHandle) ??
-		modules.get('error-404');
-	if (!loadMod) throw new Error('could not find error-404 template');
+/**
+ * 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
+ */
+function getEntry(page: any): Entry | null {
+	if (page?.entry) return { ...page.entry };
+	if (page?.product)
+		return {
+			sectionHandle: 'product',
+			...page.product,
+		};
 
-	if (typeof loadMod === 'function') {
-		return await loadMod();
-	}
-	return loadMod;
+	return null;
 }

package/src/init/svelteComponents.ts

@@ -0,0 +1,12 @@
+import {
+	internalSvelteMount,
+	internalSvelteRender,
+} from 'crelte-vite-plugin/svelteComponents.js';
+
+export function svelteMount(comp: any, options: any): any {
+	return internalSvelteMount(comp, options);
+}
+
+export function svelteRender(comp: any, options: any): any {
+	return internalSvelteRender(comp, options);
+}

package/src/loadData/Globals.ts

@@ -7,27 +7,63 @@ cr.getGlobal('emergency')
 
 */
 
-import { Writable } from 'crelte-std/stores';
+import { Readable, Writable } from 'crelte-std/stores';
 
-export type GlobalWaiters<T> = [(g: T | null) => void];
+export type GlobalWaiters<T> = ((g: T | null) => void)[];
 
+/**
+ * Globals is sort of a queue
+ *
+ * each time a new request get's started
+ * a copy of globals is created which references some properties of the original one
+ *
+ * then if everything is loaded th original globals is "overriden" with the new one
+ * and we get a new state
+ */
 export default class Globals {
 	// while the globals are not loaded if somebody calls
 	// getAsync then we need to store the waiters
-	private waiters: Map<number, Map<string, GlobalWaiters<any>>>;
-	private data: Map<number, Map<string, any>>;
-	private stores: Map<string, Global<any>>;
-	private currentSiteId: number | null;
-
-	constructor() {
-		this.waiters = new Map();
-		this.data = new Map();
-		this.stores = new Map();
-		this.currentSiteId = null;
+	// this get's created as soon as a request was started
+	// and get's deleted as soon as all globals are loaded
+	private waiters: Map<string, GlobalWaiters<any>> | null;
+
+	// this get's created as soon as a request was started
+	// and deleted once they are synced to the stores
+	private newData: Map<string, any> | null;
+
+	// contains the current active globals
+	private stores: Map<string, Writable<any>>;
+
+	constructor(stores?: Map<string, Writable<any>>) {
+		this.waiters = null;
+		this.newData = null;
+		this.stores = stores ?? new Map();
 	}
 
-	get<T = any>(name: string, siteId: number): T | null {
-		return this.data.get(siteId)?.get(name) ?? null;
+	/**
+	 * returns a globalValue
+	 *
+	 * ## Note
+	 * This only works in loadData, in loadGlobalData this will
+	 * throw an error. In that context you should use `.getAsync`
+	 */
+	get<T = any>(name: string): T | null {
+		if (this.waiters)
+			throw new Error(
+				'calling get in loadGlobalData will not work. call getAsync',
+			);
+
+		if (!this.newData) {
+			throw new Error(
+				'calling get outside of a loadData is forbidden. use getStore',
+			);
+
+			// todo do we wan't to allow this?
+			// isn't it just a footgun?
+			// return this.getStore(name)?.get() ?? null;
+		}
+
+		return this.newData.get(name) ?? null;
 	}
 
 	/**
@@ -38,8 +74,8 @@ export default class Globals {
 	 * always return null. In that context you should use
 	 * `.getAsync`
 	 */
-	getStore<T = any>(name: string): Global<T> | null {
-		return this.stores.get(name) ?? null;
+	getStore<T = any>(name: string): Readable<T> | null {
+		return this.stores.get(name)?.readonly() ?? null;
 	}
 
 	/**
@@ -47,83 +83,34 @@ export default class Globals {
 	 *
 	 * ## Note
 	 * This is only useful in loadGlobalData in all other cases
-	 * you can use `.getGlobal` which does return a Promise
+	 * you can use `.get` which does not return a Promise
 	 */
-	getAsync<T = any>(name: string, siteId: number): Promise<T | null> {
-		if (this._wasLoaded(siteId))
-			return Promise.resolve(this.get(name, siteId));
+	getAsync<T = any>(name: string): Promise<T | null> | T | null {
+		if (this.newData) return this.newData.get(name) ?? null;
 
-		let listeners = this.waiters.get(siteId);
-		if (!listeners) {
-			listeners = new Map();
-			this.waiters.set(siteId, listeners);
-		}
+		if (!this.waiters)
+			throw new Error(
+				'calling getAsync in non loadGlobalData contexts is pointless. Use getStore instead',
+			);
 
-		let waiter = listeners.get(name);
-		if (!waiter) {
-			waiter = [] as any;
-			listeners.set(name, waiter!);
+		let listeners = this.waiters.get(name);
+		if (!listeners) {
+			listeners = [];
+			this.waiters.set(name, listeners);
 		}
 
-		return new Promise(resolve => {
-			waiter!.push(resolve);
-		});
-	}
-
-	/** @hidden */
-	_wasLoaded(siteId: number): boolean {
-		return this.data.has(siteId);
+		return new Promise(resolve => listeners.push(resolve));
 	}
 
-	// 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
-	// do not call this if _wasLoaded returns true with the same siteId
-	/** @hidden */
-	_setData(siteId: number, data: any) {
-		const map = new Map(Object.entries(data));
-		this.data.set(siteId, map);
-
-		this.waiters.get(siteId)?.forEach((waiters, key) => {
-			waiters.forEach(waiter => waiter(map.get(key)));
-		});
-		this.waiters.delete(siteId);
-	}
-
-	/** @hidden */
-	_updateSiteId(siteId: number) {
-		if (this.currentSiteId === siteId) return;
-
-		const data = this.data.get(siteId) ?? new Map();
-
-		// we set all global data to null via setSilent
-		// then set them all with the new data
-		// and update all of them
-
-		this.stores.forEach(global => global._setSilent(null));
-
-		data.forEach((value, key) => {
-			let global = this.stores.get(key);
-			if (global) {
-				global._setSilent(value);
-			} else {
-				global = new Global(key, value);
-				this.stores.set(key, global);
-			}
-		});
-
-		this.stores.forEach(global => global._notify());
-	}
-}
-
-/**
- * A globalSet store
- */
-export class Global<T = any> {
-	/** @hidden */
-	private inner: Writable<T>;
+	/**
+	 * can only be called in loadGlobalData contexts
+	 */
+	set<T>(name: string, data: T) {
+		if (!this.newData) {
+			// this is not strictly necessary but
+			throw new Error('can only be called in loadGlobalData contexts');
+		}
 
-	constructor(name: string, data: T) {
 		// todo remove in v1.0
 		// In v0.2, we queried the global data for all sites.
 		// We now check if the siteId is present and notify the user to remove it.
@@ -137,33 +124,65 @@ export class Global<T = any> {
 			);
 		}
 
-		this.inner = new Writable(data);
+		this.newData?.set(name, data);
+
+		const listeners = this.waiters?.get(name);
+		if (listeners) {
+			this.waiters!.delete(name);
+			listeners.forEach(fn => fn(data));
+		}
 	}
 
 	/**
-	 * 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
+	 * @hidden
+	 * call this before starting the loadGlobalData phase
 	 */
-	subscribe(fn: (val: T) => void): () => void {
-		return this.inner.subscribe(fn);
+	_toRequest() {
+		const nGlobals = new Globals(this.stores);
+		nGlobals.waiters = new Map();
+		nGlobals.newData = new Map();
+
+		return nGlobals;
 	}
 
 	/**
-	 * The current value
+	 * @hidden
+	 * call this after the loadGlobalData phase
 	 */
-	get(): T {
-		return this.inner.get();
+	_globalsLoaded() {
+		// todo should we check if there are still waiters?
+		// theoretically this should never happen
+		this.waiters = null;
 	}
 
-	/** @hidden */
-	_setSilent(value: T) {
-		this.inner.setSilent(value);
-	}
+	/**
+	 * @hidden
+	 * call this after the loadData phase once the CrelteRequest
+	 * gets completed
+	 */
+	_syncToStores() {
+		const setToNull = new Set(this.stores.keys());
+
+		for (const [name, data] of this.newData!.entries()) {
+			setToNull.delete(name);
+
+			const store = this.stores.get(name);
+			if (store) {
+				// todo should we do this check always?
+				if (store.get() !== data) store.set(data);
+			} else {
+				this.stores.set(name, new Writable(data));
+			}
+		}
+
+		for (const name of setToNull) {
+			console.warn(
+				`global ${name} was not modified setting to null and removing it`,
+			);
+			this.stores.get(name)!.set(null);
+			this.stores.delete(name);
+		}
 
-	/** @hidden */
-	_notify() {
-		this.inner.notify();
+		this.newData = null;
 	}
 }