crelte 0.5.15 → 0.6.0-alpha.2

package/src/server/shared.ts

@@ -27,7 +27,7 @@ export type EnvData = {
 	env: Map<string, string>;
 	endpointUrl: string;
 	endpointToken?: string;
-	craftWebUrl: string;
+	craftBaseCpUrl: string;
 	frontendUrl: string;
 	viteEnv: Map<string, string>;
 };
@@ -47,8 +47,8 @@ export async function initEnvData(os: Platform): Promise<EnvData> {
 
 	const endpointToken = env.get('ENDPOINT_TOKEN');
 
-	const craftWebUrl = env.get('CRAFT_WEB_URL');
-	if (!craftWebUrl) throw new Error('CRAFT_WEB_URL not set');
+	const craftBaseCpUrl = env.get('CRAFT_BASE_CP_URL');
+	if (!craftBaseCpUrl) throw new Error('CRAFT_BASE_CP_URL not set');
 
 	const frontendUrl = env.get('FRONTEND_URL');
 	if (!frontendUrl) throw new Error('FRONTEND_URL not set');
@@ -62,7 +62,7 @@ export async function initEnvData(os: Platform): Promise<EnvData> {
 		env,
 		endpointUrl,
 		endpointToken,
-		craftWebUrl,
+		craftBaseCpUrl,
 		frontendUrl,
 		viteEnv,
 	};
@@ -77,6 +77,7 @@ export type SitesCache = {
 export async function initSites(
 	env: EnvData,
 	cache?: SitesCache,
+	siteToken?: string,
 ): Promise<SiteFromGraphQl[]> {
 	const queries = Queries.new(
 		env.endpointUrl,
@@ -84,19 +85,34 @@ export async function initSites(
 		new SsrCache(),
 		{ bearerToken: env.endpointToken },
 	);
-	return await loadSites(queries, cache);
+	return await loadSites(queries, cache, siteToken);
+}
+
+export async function initRequestSites(
+	env: EnvData,
+	sites: SiteFromGraphQl[],
+	req: Request,
+): Promise<SiteFromGraphQl[]> {
+	const siteToken = new URL(req.url).searchParams.get('siteToken');
+	if (!siteToken) return sites;
+
+	// Preview sites belong to this request, not the shared site cache.
+	return await initSites(env, undefined, siteToken);
 }
 
 // requires, GraphQl, SsrCache
 async function loadSites(
 	queries: Queries,
 	cache?: SitesCache,
+	siteToken?: string,
 ): Promise<SiteFromGraphQl[]> {
-	if ('CRAFT_SITES_CACHED' in globalThis) {
+	const useCache = !siteToken;
+
+	if (useCache && 'CRAFT_SITES_CACHED' in globalThis) {
 		return (globalThis as any)['CRAFT_SITES_CACHED'];
 	}
 
-	if (cache?.enabled && cache?.readSitesCache) {
+	if (useCache && cache?.enabled && cache?.readSitesCache) {
 		try {
 			const sites = (await cache.readSitesCache()) as SiteFromGraphQl[];
 			// @ts-ignore
@@ -122,13 +138,15 @@ async function loadSites(
 		`,
 		{},
 		// don't cache since we cache ourself
-		{ caching: false },
+		{ caching: false, craftCaching: useCache, siteToken },
 	)) as { crelteSites: SiteFromGraphQl[] };
 
-	// @ts-ignore
-	globalThis['CRAFT_SITES_CACHED'] = resp.crelteSites;
-	if (cache?.enabled && cache?.writeSitesCache) {
-		await cache.writeSitesCache(resp.crelteSites);
+	if (useCache) {
+		// @ts-ignore
+		globalThis['CRAFT_SITES_CACHED'] = resp.crelteSites;
+		if (cache?.enabled && cache?.writeSitesCache) {
+			await cache.writeSitesCache(resp.crelteSites);
+		}
 	}
 	return resp.crelteSites;
 }
@@ -145,7 +163,7 @@ export type RenderRequest = {
 	htmlTemplate: string;
 	ssrManifest: Record<string, string[]>;
 	endpoint: string;
-	craftWeb: string;
+	craftUrl: string;
 	frontend: string;
 	viteEnv: Map<string, string>;
 	sites: SiteFromGraphQl[];
@@ -170,7 +188,7 @@ export async function modRender(
 		htmlTemplate: template,
 		ssrManifest: {},
 		endpoint: env.endpointUrl,
-		craftWeb: env.craftWebUrl,
+		craftUrl: env.craftBaseCpUrl,
 		frontend: env.frontendUrl,
 		viteEnv: env.viteEnv,
 		sites,
@@ -199,7 +217,7 @@ export type RenderErrorRequest = {
 	ssrManifest: Record<string, string[]>;
 	acceptLang: string | null;
 	endpoint: string;
-	craftWeb: string;
+	craftUrl: string;
 	frontend: string;
 	viteEnv: Map<string, string>;
 };
@@ -239,7 +257,7 @@ export async function modRenderError(
 		ssrManifest: {},
 		acceptLang,
 		endpoint: env.endpointUrl,
-		craftWeb: env.craftWebUrl,
+		craftUrl: env.craftBaseCpUrl,
 		frontend: env.frontendUrl,
 		viteEnv: env.viteEnv,
 		...opts,

package/src/ssr/SsrCache.ts

@@ -1,3 +1,6 @@
+import { uneval } from 'devalue';
+import { cryptoSha1Hash } from '../utils.js';
+
 /**
  * Calculates a key based on the json representation of the data
  *
@@ -9,20 +12,7 @@ export async function calcKey(data: any): Promise<string> {
 	// specifically in the craft preview locally
 	if (!crypto?.subtle) return json;
 
-	// Convert the string data to an ArrayBuffer
-	const encoder = new TextEncoder();
-	const dataBuffer = encoder.encode(json);
-
-	// Use the Web Crypto API to hash the data with SHA-1
-	const hashBuffer = await crypto.subtle.digest('SHA-1', dataBuffer);
-
-	// Convert the ArrayBuffer to a hex string
-	const hashArray = Array.from(new Uint8Array(hashBuffer)); // Create an array from the buffer
-	const hashHex = hashArray
-		.map(b => b.toString(16).padStart(2, '0'))
-		.join(''); // Convert to hex string
-
-	return hashHex;
+	return await cryptoSha1Hash(json);
 }
 
 /**
@@ -147,15 +137,15 @@ export default class SsrCache {
 		delete window._SSR_STORE;
 	}
 
-	private exportAsJson(): string {
-		return JSON.stringify(Array.from(this.store.entries())).replace(
-			/</g,
-			'\\u003c',
-		);
-	}
-
 	/** @hidden */
-	z_exportToHead(): string {
-		return `\n\t\t<script>window._SSR_STORE = ${this.exportAsJson()};</script>`;
+	z_toData(): any {
+		return this.store;
 	}
 }
+
+export function ssrCacheExportToHead(ssr: SsrCache) {
+	const data = Array.from(ssr.z_toData().entries());
+
+	// safety, uneval already escapes data: https://github.com/sveltejs/devalue#xss-mitigation
+	return `\n\t\t<script>window._SSR_STORE = ${uneval(data)};</script>`;
+}

package/src/std/encdec/escaping.ts

@@ -0,0 +1,47 @@
+/*
+ * Code from Svelte (https://github.com/sveltejs/svelte/blob/b4968584df6be22222f58c273bdd8e04307ad36b/packages/svelte/src/escaping.js)
+ *
+ * Copyright (c) 2016-24 these people (https://github.com/sveltejs/svelte/graphs/contributors)
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const ATTR_REGEX = /[&"<]/g;
+const CONTENT_REGEX = /[&<]/g;
+
+export function escape_html<V>(value: V, is_attr: boolean = false) {
+	const str = String(value ?? '');
+
+	const pattern = is_attr ? ATTR_REGEX : CONTENT_REGEX;
+	pattern.lastIndex = 0;
+
+	let escaped = '';
+	let last = 0;
+
+	while (pattern.test(str)) {
+		const i = pattern.lastIndex - 1;
+		const ch = str[i];
+		escaped +=
+			str.substring(last, i) +
+			(ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : '&lt;');
+		last = i + 1;
+	}
+
+	return escaped + str.substring(last);
+}

package/src/std/encdec/index.ts

@@ -0,0 +1,16 @@
+import { escape_html } from './escaping.js';
+
+/**
+ * Convert newlines to <br> tags and escape HTML.
+ *
+ * #### Warning
+ * When used in an attribute, the `isAttr` parameter needs to be set to `true`.
+ *
+ * #### Example
+ * ```svelte
+ * {@html nl2br("Hello\nWorld")}
+ * ```
+ */
+export function nl2br(str: string, isAttr: boolean = false): string {
+	return escape_html(str, isAttr).replace(/\n/g, '<br>');
+}

package/src/std/index.ts

@@ -31,12 +31,7 @@ export interface Cloneable {
  * A type that represents a value that can be cloned.
  */
 export type CloneableOrPrimitive =
-	| Cloneable
-	| string
-	| number
-	| boolean
-	| null
-	| undefined;
+	Cloneable | string | number | boolean | null | undefined;
 
 /**
  * Creates a clone of the provided value. The values need to be either

package/src/utils.ts

@@ -34,3 +34,24 @@ export function urlWithPath(url: string, path?: string): URL {
 	u.pathname = path ?? '';
 	return u;
 }
+
+export async function cryptoSha1Hash(str: string): Promise<string> {
+	// Convert the string data to an ArrayBuffer
+	const encoder = new TextEncoder();
+	const dataBuffer = encoder.encode(str);
+
+	// Use the Web Crypto API to hash the data with SHA-1
+	const hashBuffer = await crypto.subtle.digest('SHA-1', dataBuffer);
+
+	const bytes = new Uint8Array(hashBuffer);
+	// @ts-ignore using 2025 baseline feature
+	if (typeof bytes.toHex === 'function') return bytes.toHex();
+
+	// Convert the ArrayBuffer to a hex string
+	const hashArray = Array.from(bytes); // Create an array from the buffer
+	const hashHex = hashArray
+		.map(b => b.toString(16).padStart(2, '0'))
+		.join(''); // Convert to hex string
+
+	return hashHex;
+}

package/src/vite/index.ts

@@ -1,5 +1,4 @@
 import { relative } from 'node:path';
-import MagicString from 'magic-string';
 import {
 	ConfigEnv,
 	Plugin,
@@ -15,11 +14,11 @@ import {
 	EnvData,
 	initEnvData,
 	initSites,
+	initRequestSites,
 	modRender,
 	modRenderError,
 } from '../server/shared.js';
 import ServerRouter from '../server/ServerRouter.js';
-import sveltePackage from 'svelte/package.json' with { type: 'json' };
 import { initQueryRoutes } from '../server/queries/queries.js';
 import {
 	PLATFORM,
@@ -29,6 +28,11 @@ import {
 import { SiteFromGraphQl } from '../routing/Site.js';
 import { ServerResponse } from 'node:http';
 import QueryError from '../queries/QueryError.js';
+import {
+	CodeTransform,
+	generateTransform,
+	rolldownString,
+} from 'rolldown-string';
 
 const VIRT_MOD_ID = 'virtual:crelte/svelteComponents';
 const RESOLVED_VIRT_MOD_ID = '\0' + VIRT_MOD_ID;
@@ -45,43 +49,33 @@ function usedSsrComponents(
 	code: string,
 	id: string,
 	options: { ssr?: boolean } | undefined,
-	svelte5: boolean,
-): TransformResult | undefined {
+): CodeTransform | undefined {
 	if (!options?.ssr || !id.endsWith('.svelte')) return;
 
 	const file = relative('.', id);
 
-	let idx;
-	if (svelte5) {
-		const defFnSign = 'export default function ';
-		idx = code.indexOf(defFnSign);
-		if (idx < 0) return;
-
-		const withPropsIdx = code.indexOf('($$renderer, $$props) {', idx);
-		const noPropsIdx = code.indexOf('($$renderer) {', idx);
-		idx = withPropsIdx >= 0 ? withPropsIdx : noPropsIdx;
-		if (idx < 0) {
-			console.error('could not find svelte5 init', id);
-			return;
-		}
+	const defFnSign = 'export default function ';
+	let idx = code.indexOf(defFnSign);
+	if (idx < 0) return;
 
-		const renderCompSign = '$$renderer.component(($$renderer) => {';
-		const renderCompIdx = code.indexOf(renderCompSign, idx);
-		if (renderCompIdx >= 0) idx = renderCompIdx;
-
-		// Find the end of the line where the pattern was found
-		idx = code.indexOf('\n', idx);
-		if (idx < 0) return;
-		idx += 1; // \n
-	} else {
-		const initFnSign =
-			'create_ssr_component(($$result, $$props, $$bindings, slots) => {';
-		idx = code.indexOf(initFnSign);
-		if (idx < 0) return;
-		idx += initFnSign.length;
+	const withPropsIdx = code.indexOf('($$renderer, $$props) {', idx);
+	const noPropsIdx = code.indexOf('($$renderer) {', idx);
+	idx = withPropsIdx >= 0 ? withPropsIdx : noPropsIdx;
+	if (idx < 0) {
+		console.error('could not find svelte5 init', id);
+		return;
 	}
 
-	const s = new MagicString(code);
+	const renderCompSign = '$$renderer.component(($$renderer) => {';
+	const renderCompIdx = code.indexOf(renderCompSign, idx);
+	if (renderCompIdx >= 0) idx = renderCompIdx;
+
+	// Find the end of the line where the pattern was found
+	idx = code.indexOf('\n', idx);
+	if (idx < 0) return;
+	idx += 1; // \n
+
+	const s = rolldownString(code, id, options);
 
 	s.prepend(`import { getContext as __modulesGetContext } from 'svelte';\n`);
 
@@ -95,14 +89,7 @@ if (ctx && ctx instanceof Set) {
 `;
 	s.appendLeft(idx, ctxAdd);
 
-	return {
-		map: s.generateMap({
-			source: id,
-			includeContent: true,
-			hires: 'boundary',
-		}),
-		code: s.toString(),
-	};
+	return generateTransform(s, id);
 }
 
 // transform graphql files into a GraphQlQuery which can called with
@@ -121,9 +108,7 @@ function graphQlFiles(
 
 	if (!ssr) {
 		return `
-export default {
-	queryName: ${JSON.stringify(name)}
-};
+export default ${JSON.stringify(name)};
 `;
 	}
 
@@ -132,9 +117,7 @@ export default {
 		.replace(/\u2029/g, '\\u2029');
 
 	return `
-export default {
-	queryName: ${JSON.stringify(name)}
-};
+export default ${JSON.stringify(name)};
 
 export const query = {
 	path: ${JSON.stringify(path)},
@@ -143,30 +126,14 @@ export const query = {
 `;
 }
 
-function isSvelte5(): boolean {
-	if (sveltePackage && sveltePackage.version) {
-		return sveltePackage.version.startsWith('5.');
-	}
-	// Fallback or error handling if version cannot be determined
-	console.warn('Could not determine Svelte version. Assuming not Svelte 5.');
-	return false;
-}
-
 // outside of crelte because each build executes crelte again
 let isSsrBuild = false;
 
-export type CrelteOptions = {
-	/** If not specified tries to detect which version is installed */
-	svelte4?: boolean;
-};
-
-export default function crelte(opts?: CrelteOptions): Plugin {
+export default function crelte(): Plugin {
 	let viteConfig: ResolvedConfig;
 	let viteConfigEnv: ConfigEnv;
 	let initialConfig: UserConfig;
 
-	const svelte5 = opts?.svelte4 ? false : isSvelte5();
-
 	return {
 		name: 'crelte',
 
@@ -229,33 +196,22 @@ export default function crelte(opts?: CrelteOptions): Plugin {
 			}
 
 			if (id === RESOLVED_VIRT_MOD_ID) {
-				if (svelte5) {
-					return (
-						`import { hydrate } from 'svelte';` +
-						`import { render } from 'svelte/server';` +
-						`export function internalSvelteMount(comp, options) {` +
-						`return hydrate(comp, options);` +
-						`}` +
-						`export function internalSvelteRender(comp, options) {` +
-						`return render(comp, options);` +
-						`}`
-					);
-				} else {
-					return (
-						`export function internalSvelteMount(comp, options) {` +
-						`return new comp({ ...options, hydrate: true });` +
-						`}` +
-						`export function internalSvelteRender(comp, options) {` +
-						`return comp.render(options.props, options);` +
-						`}`
-					);
-				}
+				return (
+					`import { hydrate } from 'svelte';` +
+					`import { render } from 'svelte/server';` +
+					`export function internalSvelteMount(comp, options) {` +
+					`return hydrate(comp, options);` +
+					`}` +
+					`export function internalSvelteRender(comp, options) {` +
+					`return render(comp, options);` +
+					`}`
+				);
 			}
 		},
 
 		transform(code, id, options) {
 			return (
-				usedSsrComponents(code, id, options, svelte5) ||
+				usedSsrComponents(code, id, options) ||
 				graphQlFiles(code, id, !!options?.ssr)
 			);
 		},
@@ -351,11 +307,13 @@ async function serveVite(env: EnvData, vite: ViteDevServer) {
 			sites = await initSites(env);
 		}
 
+		const requestSites = await initRequestSites(env, sites, req);
+
 		const router = new ServerRouter(
 			env.endpointUrl,
 			env.frontendUrl,
 			env.env,
-			sites,
+			requestSites,
 			{ endpointToken: env.endpointToken },
 		);
 
@@ -400,7 +358,13 @@ async function serveVite(env: EnvData, vite: ViteDevServer) {
 			return;
 		}
 
-		const response = await modRender(env, sites, serverMod, template, req);
+		const response = await modRender(
+			env,
+			requestSites,
+			serverMod,
+			template,
+			req,
+		);
 		await webResponseToResponse(response, res);
 	};
 

package/types.d.ts

@@ -2,7 +2,7 @@ declare module '*.graphql' {
 	// todo this would be a GraphQL query object
 	// but node doesn't import GraphQl and the type might change?
 	// this just removes the anoying typescript error
-	const value: { queryName: string };
+	const value: string;
 	export default value;
 
 	export const query: {