crelte 0.5.7 → 0.5.9

package/src/blocks/Blocks.ts

@@ -102,6 +102,59 @@ export class BlockModules {
 	}
 }
 
+/**
+ * Create a BlockModules instance from modules
+ *
+ * #### Example
+ * ```ts
+ * const mods = blockModules(
+ *     import.meta.glob('./contentDetail/*.svelte', { eager: true })
+	);
+ * ```
+ *
+ * #### Example with alias
+ * ```ts
+ * const mods = blockModules(
+ *     import.meta.glob('./contentDetail/*.svelte'),
+ *     {
+ *         alias: {
+ * 		       fakename: 'filename',
+ *         }
+ *     }
+ * );
+ * ```
+ */
+export function blockModules(
+	modules: Record<string, AsyncModule>,
+	opts: BlockModulesOptions = {},
+): BlockModules {
+	return new BlockModules(modules, opts);
+}
+
+/**
+ * Load blocks data
+ *
+ * #### Example
+ * ```ts
+ * const mods = blockModules(import.meta.glob('./contentDetail/*.svelte'));
+ *
+ * export const loadData = {
+ *     blocks: (cr, entry) => loadBlocksData(cr, entry.blocks, mods)
+ * };
+ * ```
+ */
+export async function loadBlocksData(
+	cr: CrelteRequest,
+	blocks: any[],
+	modules: BlockModules,
+): Promise<Blocks> {
+	const nBlocks = await newBlocks(blocks, modules);
+
+	await nBlocks.loadData(cr);
+
+	return nBlocks;
+}
+
 /**
  * Creates a new Blocks instance
  *

package/src/blocks/index.ts

@@ -1,4 +1,4 @@
-import Blocks, { blockModules, loadBlocksData } from './Blocks.svelte';
+import Blocks from './Blocks.svelte';
 import type {
 	BlockModules,
 	BlockModulesOptions,
@@ -7,7 +7,7 @@ import type {
 	BlockOptions,
 } from './Blocks.js';
 import type BlocksInstance from './Blocks.js';
-import { newBlocks } from './Blocks.js';
+import { newBlocks, blockModules, loadBlocksData } from './Blocks.js';
 
 export type {
 	BlocksInstance,

package/src/cookies/ServerCookies.ts

@@ -2,7 +2,7 @@ import { Cookies, RemoveOptions, SetOptions } from './index.js';
 import { parseCookies, type SetCookie, setCookieToString } from './utils.js';
 
 /**
- * ## Warning
+ * #### Warning
  * This is not stable and should only be used internally by crelte
  */
 export default class ServerCookies implements Cookies {

package/src/cookies/index.ts

@@ -17,7 +17,7 @@ export interface Cookies {
 	/**
 	 * sets the value of the cookie
 	 *
-	 * ## Note
+	 * #### Note
 	 * path defaults to '/'
 	 */
 	set(name: string, value: string, opts?: SetOptions): void;

package/src/crelte.ts

@@ -10,6 +10,7 @@ import { Readable } from './std/stores/index.js';
 import { Entry } from './loadData/index.js';
 import { urlWithPath } from './utils.js';
 
+/** The type for the app.config object */
 export type Config = {
 	/**
 	 * Preload pages on mouse over
@@ -67,7 +68,7 @@ export function configWithDefaults(config: Config = {}): Required<Config> {
  * In svelte contexts for each of these functions and classes there
  * should be a getter function like `getCrelte()` or `getRouter()`.
  *
- * ## Note
+ * #### Note
  * Plugins and other instances could modify this type, so when extending cloning
  * or similar use the spread operator instead of naming all "properties".
  */
@@ -130,7 +131,7 @@ export type Crelte = {
 	/**
 	 * returns the frontend url with an optional path
 	 *
-	 * ## Note
+	 * #### Note
 	 * On the client this will always be the current origin
 	 * and on the server it will be the from the env `FRONTEND_URL` env
 	 * variable
@@ -140,7 +141,7 @@ export type Crelte = {
 	/**
 	 * returns the backend url with an optional path
 	 *
-	 * ## Note
+	 * #### Note
 	 * For the origin the `ENDPOINT_URL` env variable is used
 	 */
 	backendUrl(path?: string): URL;
@@ -148,7 +149,7 @@ export type Crelte = {
 	/**
 	 * returns a store which contains a globalSet
 	 *
-	 * ## Note
+	 * #### Note
 	 * This only works in loadData, in loadGlobalData this will
 	 * always return null. In that context you should use
 	 * `CrelteRequest.getGlobalAsync`
@@ -159,7 +160,7 @@ export type Crelte = {
 	 * returns a new CrelteRequest instance either with the current
 	 * route or a provided one
 	 *
-	 * ## Note
+	 * #### Note
 	 * This is useful if you want to create a stateful crelte
 	 * to use in loadData context
 	 */
@@ -186,7 +187,7 @@ export type Crelte = {
  * In svelte contexts for each of these functions and classes there
  * should be a getter function like `getCrelte()` or `getRouter()`.
  *
- * ## Note
+ * #### Note
  * Plugins and other instances could modify this type, so when extending cloning
  * or similar use the spread operator instead of naming all "properties".
  */
@@ -199,7 +200,7 @@ export type CrelteWithRoute = Crelte & {
 	/**
 	 * returns a store which contains a globalSet
 	 *
-	 * ## Note
+	 * #### Note
 	 * This only works in loadData, in loadGlobalData this will
 	 * always return null. In that context you should use
 	 * `CrelteRequest.getGlobalAsync`
@@ -207,6 +208,16 @@ export type CrelteWithRoute = Crelte & {
 	getGlobal<T = any>(name: string): Readable<T> | null;
 };
 
+/**
+ * This is Crelte a container of useful features and functions.
+ *
+ * In svelte contexts for each of these functions and classes there
+ * should be a getter function like `getCrelte()` or `getRouter()`.
+ *
+ * #### Note
+ * Plugins and other instances could modify this type, so when extending cloning
+ * or similar use the spread operator instead of naming all "properties".
+ */
 export type CrelteRequest = Crelte & {
 	/**
 	 * The current request
@@ -216,7 +227,7 @@ export type CrelteRequest = Crelte & {
 	/**
 	 * Easy access to this.req.site
 	 *
-	 * ## Note
+	 * #### Note
 	 * The site might not always match with the current route
 	 * but be the site default site or one that matches the
 	 * users language.
@@ -226,7 +237,7 @@ export type CrelteRequest = Crelte & {
 	/**
 	 * returns a globalSet
 	 *
-	 * ## Note
+	 * #### Note
 	 * This only works in loadData, in loadGlobalData this will
 	 * always return null. In that context you should use
 	 * `.getGlobalAsync`
@@ -236,7 +247,7 @@ export type CrelteRequest = Crelte & {
 	/**
 	 * Get a globalSet and wait until it is loaded
 	 *
-	 * ## Note
+	 * #### Note
 	 * This is only useful in loadGlobalData in all other cases
 	 * you can use `.getGlobal` which does not return a Promise
 	 */

package/src/index.ts

@@ -30,6 +30,7 @@ export {
 	type LoadDataArray,
 };
 
+/** The type for the app.init function */
 export type Init = (crelte: Crelte) => void;
 
 function innerGetCrelte(): Crelte {
@@ -39,7 +40,7 @@ function innerGetCrelte(): Crelte {
 /**
  * Get Crelte from the current context
  *
- * ## Note
+ * #### Note
  * This only works during component initialisation.
  */
 export function getCrelte(): CrelteWithRoute {
@@ -60,7 +61,7 @@ export function getCrelte(): CrelteWithRoute {
 /**
  * Get the router from the current context
  *
- * ## Note
+ * #### Note
  * This only works during component initialisation.
  */
 export function getRouter(): Router {
@@ -70,7 +71,7 @@ export function getRouter(): Router {
 /**
  * Get the SSR cache from the current context
  *
- * ## Note
+ * #### Note
  * This only works during component initialisation.
  */
 export function getSsrCache(): SsrCache {
@@ -80,7 +81,7 @@ export function getSsrCache(): SsrCache {
 /**
  * Get the Queries from the current context
  *
- * ## Note
+ * #### Note
  * This only works during component initialisation.
  */
 export function getQueries(): Queries {
@@ -90,7 +91,7 @@ export function getQueries(): Queries {
 /**
  * Get a store with the current route
  *
- * ## Note
+ * #### Note
  * This only works during component initialisation.
  */
 export function getRoute(): Readable<Route> {
@@ -100,7 +101,7 @@ export function getRoute(): Readable<Route> {
 /**
  * Get a store with the current site
  *
- * ## Note
+ * #### Note
  * This only works during component initialisation.
  */
 export function getSite(): Readable<Site> {
@@ -110,7 +111,7 @@ export function getSite(): Readable<Site> {
 /**
  * Get a store with the current entry
  *
- * ## Note
+ * #### Note
  * This only works during component initialisation.
  */
 export function getEntry(): Readable<Entry> {
@@ -122,7 +123,7 @@ export function getEntry(): Readable<Entry> {
  * All env variables need to start with VITE_
  * except ENDPOINT_URL, CRAFT_WEB_URL and FRONTEND_URL
  *
- * ## Note
+ * #### Note
  * This only works during component initialisation.
  */
 export function getEnv(name: 'ENDPOINT_URL'): string;
@@ -136,7 +137,7 @@ export function getEnv(name: string): string | null {
 /**
  * returns a store which indicates if the a page is loading
  *
- * ## Note
+ * #### Note
  * This only works during component initialisation.
  */
 export function getLoading(): Readable<boolean> {
@@ -146,7 +147,7 @@ export function getLoading(): Readable<boolean> {
 /**
  * returns a store which indicates the loading progress between 0 and 1
  *
- * ## Note
+ * #### Note
  * This only works during component initialisation.
  */
 export function getLoadingProgress(): Readable<number> {
@@ -156,7 +157,7 @@ export function getLoadingProgress(): Readable<number> {
 /**
  * returns a store which contains a globalSet
  *
- * ## Note
+ * #### Note
  * This only works during component initialisation.
  */
 export function getGlobal<T = any>(name: string): Readable<T> | null {
@@ -166,7 +167,7 @@ export function getGlobal<T = any>(name: string): Readable<T> | null {
 /**
  * returns the cookies instance
  *
- * ## Note
+ * #### Note
  * This only works during component initialisation.
  */
 export function getCookies(): Cookies {
@@ -176,7 +177,9 @@ export function getCookies(): Cookies {
 /**
  * Listen for route changes
  *
- * ## Note
+ * route: {@link Route}
+ *
+ * #### Note
  * This only works during component initialisation.
  */
 export function onRoute(fn: (route: Route) => void) {
@@ -188,7 +191,9 @@ export function onRoute(fn: (route: Route) => void) {
 /**
  * Listen for requests
  *
- * ## Note
+ * cr: {@link CrelteRequest}
+ *
+ * #### Note
  * This only works during component initialisation.
  */
 export function onRequest(fn: (cr: CrelteRequest) => void) {

package/src/init/client.ts

@@ -33,8 +33,8 @@ export type MainData = {
 /**
  * The main function to start the client side rendering
  *
- * ## Example
- * ```
+ * #### Example
+ * ```js
  * import * as app from './App.svelte';
  * import * as errorPage from './Error.svelte';
  * import entryQuery from './queries/entry.graphql';
@@ -55,6 +55,7 @@ export async function main(data: MainData) {
 
 	const config = configWithDefaults(data.app.config ?? {});
 	const ssrCache = new SsrCache();
+	ssrCache.z_importFromHead();
 
 	// since cors could cause an issue we wan't to override the FRONTEND_URL
 	// env variable, since the server will be reachable on any domain

package/src/init/server.ts

@@ -18,7 +18,13 @@ import Events from '../plugins/Events.js';
 import Globals from '../loadData/Globals.js';
 import { Router } from '../routing/index.js';
 import { Writable } from '../std/stores/index.js';
-import { RenderRequest, RenderResponse } from '../server/shared.js';
+import {
+	RenderErrorRequest,
+	RenderRequest,
+	RenderResponse,
+} from '../server/shared.js';
+
+export { type RenderRequest, type RenderResponse } from '../server/shared.js';
 
 export type ServerData = RenderRequest;
 
@@ -36,8 +42,8 @@ export type MainData = {
 /**
  * The main function to start the server side rendering
  *
- * ## Example
- * ```
+ * #### Example
+ * ```js
  * import * as app from './App.svelte';
  * import entryQuery from './queries/entry.graphql';
  * import globalQuery from './queries/global.graphql';
@@ -140,7 +146,7 @@ export async function main(data: MainData): Promise<RenderResponse> {
 	});
 
 	head += ssrComponents.toHead(data.serverData.ssrManifest);
-	head += crelte.ssrCache.exportToHead();
+	head += crelte.ssrCache.z_exportToHead();
 
 	let htmlTemplate = data.serverData.htmlTemplate;
 	htmlTemplate = htmlTemplate.replace(
@@ -178,15 +184,15 @@ export type MainErrorData = {
 	error: Error;
 	errorPage: any;
 
-	serverData: ServerData;
+	serverData: RenderErrorRequest;
 };
 
 /**
  * The main function to start the server side rendering
  * if there was an error
  *
- * ## Example
- * ```
+ * #### Example
+ * ```js
  * import * as errorPage from './Error.svelte';
  *
  * export function renderError(error, serverData) {
@@ -219,7 +225,7 @@ export async function mainError(
 	});
 
 	head += ssrComponents.toHead(data.serverData.ssrManifest);
-	head += ssrCache.exportToHead();
+	head += ssrCache.z_exportToHead();
 
 	let htmlTemplate = data.serverData.htmlTemplate;
 	htmlTemplate = htmlTemplate.replace('<!--page-lang-->', 'de');

package/src/loadData/Globals.ts

@@ -44,7 +44,7 @@ export default class Globals {
 	/**
 	 * returns a globalValue
 	 *
-	 * ## Note
+	 * #### Note
 	 * This only works in loadData, in loadGlobalData this will
 	 * throw an error. In that context you should use `.getAsync`
 	 */
@@ -62,7 +62,7 @@ export default class Globals {
 	/**
 	 * returns a store which contains a globalSet
 	 *
-	 * ## Note
+	 * #### Note
 	 * This only works in loadData, in loadGlobalData this will
 	 * always return null. In that context you should use
 	 * `.getAsync`
@@ -74,7 +74,7 @@ export default class Globals {
 	/**
 	 * Get a store which contains a globalSet and wait until it is loaded
 	 *
-	 * ## Note
+	 * #### Note
 	 * This is only useful in loadGlobalData in all other cases
 	 * you can use `.get` which does not return a Promise
 	 */

package/src/loadData/loadData.ts

@@ -20,11 +20,11 @@ export interface LoadDataArray<A1 = any> extends Array<LoadData<A1>> {}
  *
  * There are three main ways `loadData` can be defined:
  *
- * ## Object
+ * #### Object
  * This is the most common way loadData will be used.
  * Each property should be a loadData type, each one is called in parallel.
  * And will be available to your component with the same name.
- * ```
+ * ```js
  * import entriesQuery from '@/queries/entries.graphql';
  * import { loadData as headerLoadData } from '@/layout/header.svelte';
  *
@@ -34,30 +34,20 @@ export interface LoadDataArray<A1 = any> extends Array<LoadData<A1>> {}
  * };
  * ```
  *
- * ## GraphQl
+ * #### GraphQl
  * You can just export a graphql query as a loadData type.
  * This will export all queries from the graphql file as properties.
- * ```
+ * ```js
  * import blogsQuery from '@/queries/blogs.graphql';
  *
  * export const loadData = blogsQuery;
- *
- * // or another option
- * import { gql } from '@craft-svelte/core/graphql';
- *
- * export const loadData = gql`query {
- *   blogs: entries(section: "blogs") {
- *     title
- *     url
- *  }
- * }`;
  * ```
  *
- * ## Function
+ * #### Function
  * Using a function gives you the most flexibility but also is the
  * most cumbersome.
  *
- * ```
+ * ```js
  * import articlesQuery from '@/queries/articles.graphql';
  *
  * export async function loadData(cr, entry) {
@@ -135,8 +125,8 @@ export async function callLoadData<A1 = any>(
  *
  * Prefer to use the array syntax.
  *
- * ## Example
- * ```
+ * #### Example
+ * ```js
  * export const loadData = mergeLoadData(
  *     {
  * 	        filter: (cr) => cr.route.search.get('filter'),