crelte 0.1.0

package/src/Crelte.ts

@@ -0,0 +1,135 @@
+import ClientCookies from './cookies/ClientCookies.js';
+import { Cookies } from './cookies/index.js';
+import ServerCookies from './cookies/ServerCookies.js';
+import CrelteBase from './CrelteBase.js';
+import CrelteRouted, { GraphQlQuery } from './CrelteRouted.js';
+import GraphQl, {
+	GraphQlOptions,
+	GraphQlRequestOptions,
+} from './graphql/GraphQl.js';
+import Globals from './loadData/Globals.js';
+import Events from './plugins/Events.js';
+import Plugins, { Plugin } from './plugins/Plugins.js';
+import Route from './routing/Route.js';
+import Router, { RouterOpts } from './routing/Router.js';
+import Site, { SiteFromGraphQl } from './routing/Site.js';
+import SsrCache from './ssr/SsrCache.js';
+
+export class CrelteBuilder {
+	ssrCache: SsrCache;
+	plugins: Plugins;
+	events: Events;
+	graphQl?: GraphQl;
+	router?: Router;
+	globals: Globals;
+	cookies: Cookies;
+
+	constructor() {
+		this.ssrCache = new SsrCache();
+		this.plugins = new Plugins();
+		this.events = new Events();
+		this.globals = new Globals();
+		// @ts-ignore
+		this.cookies = import.meta.env.SSR
+			? new ServerCookies()
+			: new ClientCookies();
+	}
+
+	setupGraphQl(endpoint: string, opts: GraphQlOptions = {}) {
+		this.graphQl = new GraphQl(endpoint, this.ssrCache, opts);
+	}
+
+	setupRouter(sites: SiteFromGraphQl[], opts: RouterOpts = {}) {
+		this.router = new Router(sites, opts);
+	}
+
+	setupCookies(cookies: string) {
+		this.cookies._init(cookies);
+	}
+
+	build(): Crelte {
+		return new Crelte(this);
+	}
+}
+
+export default class Crelte implements CrelteBase {
+	ssrCache: SsrCache;
+	graphQl: GraphQl;
+	router: Router;
+	plugins: Plugins;
+	events: Events;
+	globals: Globals;
+	cookies: Cookies;
+
+	constructor(builder: CrelteBuilder) {
+		if (!builder.graphQl || !builder.router)
+			throw new Error('builder not ready');
+
+		this.ssrCache = builder.ssrCache;
+		this.graphQl = builder.graphQl;
+		this.router = builder.router;
+		this.plugins = builder.plugins;
+		this.events = builder.events;
+		this.globals = builder.globals;
+		this.cookies = builder.cookies;
+	}
+
+	getPlugin(name: string): Plugin | null {
+		return this.plugins.get(name);
+	}
+
+	/**
+	 * returns an env Variables, always needs to be prefixed VITE_
+	 * Except ENDPOINT_URL and CRAFT_WEB_URL
+	 */
+	getEnv(name: string): string | null {
+		return this.ssrCache.get(name);
+	}
+
+	/// calling this from loadGlobalData will always return null
+	/// this does return the resolved store
+	getGlobal(name: string): any | null {
+		return this.globals.get(name) ?? null;
+	}
+
+	/// requires a site if the route does not contain a site
+	toRouted(route?: Route, site?: Site): CrelteRouted {
+		if (!route) {
+			route = this.router.route.get();
+		}
+
+		if (!site) {
+			if (!route.site) throw new Error('site is required');
+			site = route.site;
+		}
+
+		return new CrelteRouted(this, route, site);
+	}
+
+	/**
+	 * Run a GraphQl Query
+	 *
+	 * @param query the default export from a graphql file
+	 * @param variables variables that should be passed to the
+	 * graphql query
+	 * @param options opts `{ caching: true, previewToken: string,
+	 * siteToken: string, ignoreStatusCode: false, headers: {} }`
+	 */
+	async query(
+		query: GraphQlQuery,
+		variables: Record<string, unknown> = {},
+		opts: GraphQlRequestOptions = {},
+	): Promise<unknown> {
+		// this function is added as convenience
+		return this.toRouted().query(query, variables, opts);
+	}
+
+	// don't use
+	_getContext(): Map<string, any> {
+		const map = new Map();
+
+		map.set('crelte', this);
+
+		return map;
+	}
+}

package/src/CrelteBase.ts

@@ -0,0 +1,24 @@
+import { GraphQlQuery } from './CrelteRouted.js';
+import { GraphQlRequestOptions } from './graphql/GraphQl.js';
+
+// todo or name it CrelteCommon, CrelteShared?
+export default interface CrelteBase {
+	/// calling this from loadGlobalData will always return null
+	/// this does return the resolved store
+	getGlobal(name: string): any | null;
+
+	/**
+	 * Run a GraphQl Query
+	 *
+	 * @param query the default export from a graphql file
+	 * @param variables variables that should be passed to the
+	 * graphql query
+	 * @param options opts `{ caching: true, previewToken: string,
+	 * siteToken: string, ignoreStatusCode: false, headers: {} }`
+	 */
+	query(
+		query: GraphQlQuery,
+		variables?: Record<string, unknown>,
+		opts?: GraphQlRequestOptions,
+	): Promise<unknown>;
+}

package/src/CrelteRouted.ts

@@ -0,0 +1,128 @@
+import { Cookies } from './cookies/index.js';
+import Crelte from './Crelte.js';
+import CrelteBase from './CrelteBase.js';
+import GraphQl, { GraphQlRequestOptions } from './graphql/GraphQl.js';
+import type Globals from './loadData/Globals.js';
+import type Events from './plugins/Events.js';
+import Plugins, { Plugin } from './plugins/Plugins.js';
+import Route from './routing/Route.js';
+import Router from './routing/Router.js';
+import Site from './routing/Site.js';
+import SsrCache from './ssr/SsrCache.js';
+
+export type GraphQlQuery = {
+	path?: string;
+	query: string;
+};
+
+export default class CrelteRouted implements CrelteBase {
+	route: Route;
+	site: Site;
+
+	private inner: Crelte;
+	private innerGlobals: Map<string, any>;
+
+	constructor(inner: Crelte, route: Route, site: Site) {
+		this.route = route;
+		this.site = site;
+
+		this.inner = inner;
+		this.innerGlobals = new Map();
+	}
+
+	get crelte(): Crelte {
+		return this.inner;
+	}
+
+	get ssrCache(): SsrCache {
+		return this.inner.ssrCache;
+	}
+
+	get plugins(): Plugins {
+		return this.inner.plugins;
+	}
+
+	get events(): Events {
+		return this.inner.events;
+	}
+
+	get graphQl(): GraphQl {
+		return this.inner.graphQl;
+	}
+
+	get router(): Router {
+		return this.inner.router;
+	}
+
+	get globals(): Globals {
+		return this.inner.globals;
+	}
+
+	get cookies(): Cookies {
+		return this.inner.cookies;
+	}
+
+	// overload this function to add your plugin type
+	getPlugin(name: string): Plugin | null {
+		return this.inner.plugins.get(name);
+	}
+
+	/**
+	 * returns an env Variables, always needs to be prefixed VITE_
+	 * Except ENDPOINT_URL and CRAFT_WEB_URL
+	 */
+	getEnv(name: string): string | null {
+		return this.inner.getEnv(name);
+	}
+
+	/// calling this from loadGlobalData will always return null
+	/// this does return the resolved store
+	getGlobal(name: string): any | null {
+		return this.innerGlobals.get(name) ?? null;
+	}
+
+	/// get a global and wait for it if it is still loaded
+	/// this is useful when you need to load a global in the
+	/// loadGlobalData function
+	async getGlobalAsync(name: string): Promise<any | null> {
+		const global = this.innerGlobals.get(name);
+		if (global) return global;
+
+		const r = await this.inner.globals.getAsync(name);
+		if (!r) return null;
+
+		return r.bySiteId(this.site.id);
+	}
+
+	/**
+	 * Run a GraphQl Query
+	 *
+	 * @param query the default export from a graphql file
+	 * @param variables variables that should be passed to the
+	 * graphql query
+	 * @param options opts `{ caching: true, previewToken: string,
+	 * siteToken: string, ignoreStatusCode: false, headers: {} }`
+	 */
+	async query(
+		query: GraphQlQuery,
+		variables: Record<string, unknown> = {},
+		opts: GraphQlRequestOptions = {},
+	): Promise<unknown> {
+		const search = this.route.search;
+
+		if (search.has('token') && search.get('x-craft-live-preview')) {
+			opts.previewToken = search.get('token')!;
+		} else if (search.has('siteToken')) {
+			opts.siteToken = search.get('siteToken')!;
+		}
+
+		opts.path = query.path;
+
+		return await this.graphQl.request(query.query, variables, opts);
+	}
+
+	// hidden
+	_globalDataLoaded() {
+		this.innerGlobals = this.inner.globals._globalsBySite(this.site.id);
+	}
+}

package/src/blocks/Blocks.svelte

@@ -0,0 +1,68 @@
+<script context="module" lang="ts">
+	import { CrelteRouted } from '../index.js';
+
+	/*
+	usage:
+
+	const mods = import.meta.glob('./contentDetail/*.svelte', {
+		// can either be eager loaded or not
+		eager: true,
+	});
+
+	const mods = blockModules(
+		import.meta.glob('./contentDetail/*.svelte', { eager: true }),
+		{
+			alias: {
+				'contentDetail': 'contentDetail',
+			}
+		}
+	);
+
+	export const loadData = {
+		blocks: (cr, entry) => loadBlocksData(cr, entry.blocks, mods)
+	};
+
+	export let blocks;
+
+	// provide entry if wanted, all $$restProps will be passed to the children
+	<Blocks {blocks} {entry} />
+
+	*/
+
+	import Blocks, {
+		type AsyncModule,
+		type Module,
+		type BlockModulesOptions,
+		BlockModules,
+		newBlocks,
+	} from './Blocks.js';
+
+	export type { BlockModules, BlockModulesOptions, AsyncModule, Module };
+
+	export function blockModules(
+		modules: Record<string, AsyncModule>,
+		opts: BlockModulesOptions = {},
+	): BlockModules {
+		return new BlockModules(modules, opts);
+	}
+
+	export async function loadBlocksData(
+		cr: CrelteRouted,
+		blocks: any[],
+		modules: BlockModules,
+	): Promise<Blocks> {
+		const nBlocks = await newBlocks(blocks, modules);
+
+		await nBlocks.loadData(cr);
+
+		return nBlocks;
+	}
+</script>
+
+<script lang="ts">
+	export let blocks: Blocks;
+</script>
+
+{#each blocks.each() as { mod, props }}
+	<svelte:component this={mod} {...props} {...$$restProps} />
+{/each}

package/src/blocks/Blocks.ts

@@ -0,0 +1,155 @@
+import { CrelteRouted } from '../index.js';
+import { callLoadData } from '../loadData/index.js';
+
+export interface Module {
+	// svelte component
+	default: any;
+	handle?: string | string[];
+	keepTypeHandle?: boolean;
+
+	loadData?: (block: any) => Promise<any>;
+}
+
+export type AsyncModule = (() => Promise<Module>) | Module;
+
+export type BlockModulesOptions = {
+	// if a block should handle multiple blocks
+	alias?: Record<string, string>;
+};
+
+export class BlockModules {
+	modules: Map<string, AsyncModule>;
+	alias: Map<string, string>;
+
+	constructor(
+		modules: Record<string, AsyncModule>,
+		opts: BlockModulesOptions = {},
+	) {
+		this.modules = new Map(
+			Object.entries(modules)
+				.map(([path, mod]) => {
+					const [name, ext] = parseFilename(path);
+
+					return [ext === 'svelte' ? name : '', mod] as [
+						string,
+						AsyncModule,
+					];
+				})
+				.filter(([name, _mod]) => !!name),
+		);
+
+		this.alias = new Map(Object.entries(opts.alias ?? {}));
+
+		// backwards compatibility allow to use the export const handle
+		this.modules.forEach((mod, name) => {
+			if (typeof mod === 'function') return;
+
+			if (mod.handle) {
+				const handles = Array.isArray(mod.handle)
+					? mod.handle
+					: [mod.handle];
+				handles.forEach(handle => {
+					this.alias.set(handle, name);
+				});
+			}
+		});
+	}
+
+	/**
+	 * Loads the required modules
+	 *
+	 * @throws an error if a module is not found
+	 */
+	async load(requiredModules: Set<string>): Promise<Map<string, Module>> {
+		const loaded = await Promise.all(
+			[...requiredModules.keys()].map(mod => {
+				let module = this.modules.get(mod);
+				if (!module)
+					module = this.modules.get(this.alias.get(mod) ?? '');
+
+				if (!module) throw new Error(`Module ${mod} not found`);
+
+				return typeof module === 'function' ? module() : module;
+			}),
+		);
+
+		// todo once loaded override it in module again
+
+		return new Map<string, Module>(
+			[...requiredModules.keys()].map((mod, i) => [mod, loaded[i]]),
+		);
+	}
+}
+
+export async function newBlocks(blocks: any[], modules: BlockModules) {
+	// define all required modules
+	const requiredModules: Set<string> = new Set();
+
+	for (const block of blocks) {
+		if (!block.typeHandle) throw new Error('Block must have a typeHandle');
+
+		requiredModules.add(block.typeHandle);
+	}
+
+	const loadedModules = await modules.load(requiredModules);
+
+	return new Blocks(blocks, loadedModules);
+}
+
+export default class Blocks {
+	blocks: any[];
+	data: any[];
+	modules: Map<string, Module>;
+
+	constructor(blocks: any[], modules: Map<string, Module>) {
+		this.blocks = blocks;
+		this.modules = modules;
+		this.data = blocks.map(() => null);
+	}
+
+	async loadData(cr: CrelteRouted) {
+		this.data = await Promise.all(
+			this.blocks.map((block, i) => {
+				const mod = this.modules.get(block.typeHandle)!;
+
+				if ('loadData' in mod) {
+					return callLoadData(mod.loadData, cr, block, {
+						getSibling: (offset: number) => {
+							return this.blocks[i + offset] ?? null;
+						},
+					});
+				}
+
+				return {};
+			}),
+		);
+	}
+
+	each(): { mod: any; props: any }[] {
+		return this.blocks.map((block, i) => {
+			const mod = this.modules.get(block.typeHandle)!;
+
+			const props = { ...block };
+			if (!mod.keepTypeHandle) delete props.typeHandle;
+			Object.assign(props, this.data[i]);
+
+			return {
+				mod: mod.default,
+				props,
+			};
+		});
+	}
+}
+
+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];
+}

package/src/blocks/index.ts

@@ -0,0 +1,14 @@
+import Blocks, {
+	type BlockModules,
+	type BlockModulesOptions,
+	type AsyncModule,
+	type Module,
+	blockModules,
+	loadBlocksData,
+} from './Blocks.svelte';
+
+export type { BlockModules, BlockModulesOptions, AsyncModule, Module };
+
+export { Blocks, blockModules, loadBlocksData };
+
+export default Blocks;

package/src/cookies/ClientCookies.ts

@@ -0,0 +1,30 @@
+import { Cookies, SetOptions } from './index.js';
+import { parseCookies, setCookieToString } from './utils.js';
+
+// the philosophy here is that document.cookie is the source of truth
+// so we don't cache cookies here
+// if this changes, modify init/client.ts
+export default class ClientCookies implements Cookies {
+	constructor() {}
+
+	_init(_cookies: string): void {}
+
+	get(name: string): string | null {
+		const cookies = getCookies();
+		return cookies.get(name) ?? null;
+	}
+
+	set(name: string, value: string, opts?: SetOptions): void {
+		const setCookie = { name, value, ...opts };
+
+		document.cookie = setCookieToString(setCookie);
+	}
+
+	remove(name: string): void {
+		this.set(name, '', { maxAge: 0 });
+	}
+}
+
+function getCookies(): Map<string, string> {
+	return parseCookies(document.cookie);
+}

package/src/cookies/ServerCookies.ts

@@ -0,0 +1,42 @@
+import { Cookies, SetOptions } from './index.js';
+import { parseCookies, SetCookie, setCookieToString } from './utils.js';
+
+export default class ServerCookies implements Cookies {
+	requestCookies: Map<string, string>;
+	setCookies: Map<string, SetCookie>;
+
+	constructor() {
+		this.requestCookies = new Map();
+		this.setCookies = new Map();
+	}
+
+	_init(cookies: string): void {
+		// parse the cookies
+		this.requestCookies = parseCookies(cookies);
+	}
+
+	/// Rethrns the value of the cookie with the given name, or null if it doesn't exist.
+	get(name: string): string | null {
+		const setCookie = this.setCookies.get(name);
+		// js allows undefined > 0
+		if (setCookie && setCookie.maxAge! > 0) {
+			return setCookie.value;
+		}
+
+		return this.requestCookies.get(name) ?? null;
+	}
+
+	set(name: string, value: string, opts?: SetOptions): void {
+		this.setCookies.set(name, { name, value, ...opts });
+	}
+
+	remove(name: string): void {
+		this.set(name, '', { maxAge: 0 });
+	}
+
+	_getSetCookiesHeaders(): string[] {
+		return Array.from(this.setCookies.values()).map(setCookie =>
+			setCookieToString(setCookie),
+		);
+	}
+}

package/src/cookies/index.ts

@@ -0,0 +1,24 @@
+export type SetOptions = {
+	maxAge?: number;
+	path?: string;
+	domain?: string;
+	secure?: boolean;
+	httpOnly?: boolean;
+};
+
+export interface Cookies {
+	/**
+	 * returns the value of the cookie
+	 */
+	get(name: string): string | null;
+
+	/**
+	 * sets the value of the cookie
+	 */
+	set(name: string, value: string, opts?: SetOptions): void;
+
+	remove(name: string): void;
+
+	// doc hidden
+	_init(cookies: string): void;
+}

package/src/cookies/utils.ts

@@ -0,0 +1,53 @@
+export function parseCookies(cookies: string): Map<string, string> {
+	return new Map(
+		cookies.split(';').map(cookie => {
+			let [name, value] = cookie.split('=');
+			/// this is the behaviour of chrome
+			if (typeof value === 'undefined') {
+				value = name;
+				name = '';
+			}
+
+			name = name.trim();
+			value = decodeURIComponent(value.trim());
+
+			return [name, value];
+		}),
+	);
+}
+
+export type SetCookie = {
+	name: string;
+	value: string;
+	maxAge?: number;
+	path?: string;
+	domain?: string;
+	secure?: boolean;
+	httpOnly?: boolean;
+};
+
+export function setCookieToString(cookie: SetCookie): string {
+	let s = `${cookie.name}=${encodeURIComponent(cookie.value)}`;
+
+	if (typeof cookie.maxAge === 'number') {
+		s += `; Max-Age=${cookie.maxAge}`;
+	}
+
+	if (cookie.path) {
+		s += `; Path=${cookie.path}`;
+	}
+
+	if (cookie.domain) {
+		s += `; Domain=${cookie.domain}`;
+	}
+
+	if (cookie.secure) {
+		s += `; Secure`;
+	}
+
+	if (cookie.httpOnly) {
+		s += `; HttpOnly`;
+	}
+
+	return s;
+}