@wp-typia/project-tools 0.13.4 → 0.15.0

package/templates/_shared/persistence/core/src/interactivity.ts.mustache

@@ -1,17 +1,20 @@
 import { getContext, store } from '@wordpress/interactivity';
 import { generatePublicWriteRequestId } from '@wp-typia/block-runtime/identifiers';
 
-import { fetchState, writeState } from './api';
-import type { {{pascalCase}}Context, {{pascalCase}}State } from './types';
+import { fetchBootstrap, fetchState, writeState } from './api';
+import type {
+	{{pascalCase}}ClientState,
+	{{pascalCase}}Context,
+	{{pascalCase}}State,
+} from './types';
 
 function hasExpiredPublicWriteToken(
-	context: {{pascalCase}}Context
+	expiresAt?: number
 ): boolean {
 	return (
-		context.persistencePolicy === 'public' &&
-		typeof context.publicWriteExpiresAt === 'number' &&
-		context.publicWriteExpiresAt > 0 &&
-		Date.now() >= context.publicWriteExpiresAt * 1000
+		typeof expiresAt === 'number' &&
+		expiresAt > 0 &&
+		Date.now() >= expiresAt * 1000
 	);
 }
 
@@ -20,67 +23,212 @@ function getWriteBlockedMessage(
 ): string {
 	return context.persistencePolicy === 'authenticated'
 		? 'Sign in to persist this counter.'
-		: 'Reload the page to refresh this write token.';
+		: 'Public writes are temporarily unavailable.';
+}
+
+const BOOTSTRAP_MAX_ATTEMPTS = 3;
+const BOOTSTRAP_RETRY_DELAYS_MS = [ 250, 500 ];
+
+async function waitForBootstrapRetry( delayMs: number ): Promise< void > {
+	await new Promise( ( resolve ) => {
+		setTimeout( resolve, delayMs );
+	} );
+}
+
+function getClientState(
+	context: {{pascalCase}}Context
+): {{pascalCase}}ClientState {
+	if ( context.client ) {
+		return context.client;
+	}
+
+	context.client = {
+		bootstrapError: '',
+		writeExpiry: 0,
+		writeNonce: '',
+		writeToken: '',
+	};
+
+	return context.client;
+}
+
+function clearBootstrapError(
+	context: {{pascalCase}}Context,
+	clientState: {{pascalCase}}ClientState
+): void {
+	if ( context.error === clientState.bootstrapError ) {
+		context.error = '';
+	}
+	clientState.bootstrapError = '';
+}
+
+function setBootstrapError(
+	context: {{pascalCase}}Context,
+	clientState: {{pascalCase}}ClientState,
+	message: string
+): void {
+	clientState.bootstrapError = message;
+	context.error = message;
 }
 
 const { actions, state } = store( '{{slugKebabCase}}', {
 	state: {
-		canWrite: false,
-		count: 0,
-		error: undefined,
 		isHydrated: false,
-		isLoading: false,
-		isSaving: false,
-		isVisible: true,
 	} as {{pascalCase}}State,
 
 	actions: {
-		async loadCounter() {
+		async loadState() {
 			const context = getContext< {{pascalCase}}Context >();
 			if ( context.postId <= 0 || ! context.resourceKey ) {
 				return;
 			}
 
-			state.isLoading = true;
-			state.error = undefined;
+			context.isLoading = true;
+			context.error = '';
 
 			try {
 				const result = await fetchState( {
 					postId: context.postId,
 					resourceKey: context.resourceKey,
+				}, {
+					transportTarget: 'frontend',
 				} );
 				if ( ! result.isValid || ! result.data ) {
-					state.error = result.errors[ 0 ]?.expected ?? 'Unable to load counter';
+					context.error = result.errors[ 0 ]?.expected ?? 'Unable to load counter';
 					return;
 				}
 				context.count = result.data.count;
-				context.storage = result.data.storage;
-				state.count = result.data.count;
 			} catch ( error ) {
-				state.error =
+				context.error =
 					error instanceof Error ? error.message : 'Unknown loading error';
 			} finally {
-				state.isLoading = false;
+				context.isLoading = false;
 			}
 		},
+		async loadBootstrap() {
+			const context = getContext< {{pascalCase}}Context >();
+			const clientState = getClientState( context );
+			if ( context.postId <= 0 || ! context.resourceKey ) {
+				context.bootstrapReady = true;
+				context.canWrite = false;
+				clientState.bootstrapError = '';
+				clientState.writeExpiry = 0;
+				clientState.writeNonce = '';
+				clientState.writeToken = '';
+				return;
+			}
+
+			context.isBootstrapping = true;
+
+			let bootstrapSucceeded = false;
+			let lastBootstrapError =
+				'Unable to initialize write access';
+
+			for ( let attempt = 1; attempt <= BOOTSTRAP_MAX_ATTEMPTS; attempt += 1 ) {
+				try {
+					const result = await fetchBootstrap( {
+						postId: context.postId,
+						resourceKey: context.resourceKey,
+					}, {
+						transportTarget: 'frontend',
+					} );
+					if ( ! result.isValid || ! result.data ) {
+						lastBootstrapError =
+							result.errors[ 0 ]?.expected ??
+							'Unable to initialize write access';
+						if ( attempt < BOOTSTRAP_MAX_ATTEMPTS ) {
+							await waitForBootstrapRetry(
+								BOOTSTRAP_RETRY_DELAYS_MS[ attempt - 1 ] ?? 750
+							);
+							continue;
+						}
+						break;
+					}
+
+					clientState.writeExpiry =
+						typeof result.data.publicWriteExpiresAt === 'number' &&
+						result.data.publicWriteExpiresAt > 0
+							? result.data.publicWriteExpiresAt
+							: 0;
+					clientState.writeToken =
+						typeof result.data.publicWriteToken === 'string' &&
+						result.data.publicWriteToken.length > 0
+							? result.data.publicWriteToken
+							: '';
+					clientState.writeNonce =
+						typeof result.data.restNonce === 'string' &&
+						result.data.restNonce.length > 0
+							? result.data.restNonce
+							: '';
+					context.bootstrapReady = true;
+					context.canWrite =
+						result.data.canWrite === true &&
+						(
+							context.persistencePolicy === 'authenticated'
+								? clientState.writeNonce.length > 0
+								: clientState.writeToken.length > 0 &&
+									! hasExpiredPublicWriteToken( clientState.writeExpiry )
+						);
+					clearBootstrapError( context, clientState );
+					bootstrapSucceeded = true;
+					break;
+				} catch ( error ) {
+					lastBootstrapError =
+						error instanceof Error ? error.message : 'Unknown bootstrap error';
+					if ( attempt < BOOTSTRAP_MAX_ATTEMPTS ) {
+						await waitForBootstrapRetry(
+							BOOTSTRAP_RETRY_DELAYS_MS[ attempt - 1 ] ?? 750
+						);
+						continue;
+					}
+					break;
+				}
+			}
+
+			if ( ! bootstrapSucceeded ) {
+				context.bootstrapReady = false;
+				context.canWrite = false;
+				clientState.writeExpiry = 0;
+				clientState.writeNonce = '';
+				clientState.writeToken = '';
+				setBootstrapError( context, clientState, lastBootstrapError );
+			}
+			context.isBootstrapping = false;
+		},
 		async increment() {
 			const context = getContext< {{pascalCase}}Context >();
+			const clientState = getClientState( context );
 			if ( context.postId <= 0 || ! context.resourceKey ) {
 				return;
 			}
-			if ( hasExpiredPublicWriteToken( context ) ) {
+			if ( ! context.bootstrapReady ) {
+				await actions.loadBootstrap();
+			}
+			if ( ! context.bootstrapReady ) {
+				context.error = 'Write access is still initializing.';
+				return;
+			}
+			if (
+				context.persistencePolicy === 'public' &&
+				hasExpiredPublicWriteToken( clientState.writeExpiry )
+			) {
+				await actions.loadBootstrap();
+			}
+			if (
+				context.persistencePolicy === 'public' &&
+				hasExpiredPublicWriteToken( clientState.writeExpiry )
+			) {
 				context.canWrite = false;
-				state.canWrite = false;
-				state.error = getWriteBlockedMessage( context );
+				context.error = getWriteBlockedMessage( context );
 				return;
 			}
-			if ( ! context.canWrite || ! state.canWrite ) {
-				state.error = getWriteBlockedMessage( context );
+			if ( ! context.canWrite ) {
+				context.error = getWriteBlockedMessage( context );
 				return;
 			}
 
-			state.isSaving = true;
-			state.error = undefined;
+			context.isSaving = true;
+			context.error = '';
 
 			try {
 				const result = await writeState( {
@@ -92,24 +240,28 @@ const { actions, state } = store( '{{slugKebabCase}}', {
 							: undefined,
 					publicWriteToken:
 						context.persistencePolicy === 'public' &&
-						typeof context.publicWriteToken === 'string' &&
-						context.publicWriteToken.length > 0
-							? context.publicWriteToken
+						clientState.writeToken.length > 0
+							? clientState.writeToken
 							: undefined,
 					resourceKey: context.resourceKey,
-				}, context.restNonce );
+				}, {
+					restNonce:
+						clientState.writeNonce.length > 0
+							? clientState.writeNonce
+							: undefined,
+					transportTarget: 'frontend',
+				} );
 				if ( ! result.isValid || ! result.data ) {
-					state.error = result.errors[ 0 ]?.expected ?? 'Unable to update counter';
+					context.error = result.errors[ 0 ]?.expected ?? 'Unable to update counter';
 					return;
 				}
 				context.count = result.data.count;
 				context.storage = result.data.storage;
-				state.count = result.data.count;
 			} catch ( error ) {
-				state.error =
+				context.error =
 					error instanceof Error ? error.message : 'Unknown update error';
 			} finally {
-				state.isSaving = false;
+				context.isSaving = false;
 			}
 		},
 	},
@@ -117,18 +269,29 @@ const { actions, state } = store( '{{slugKebabCase}}', {
 	callbacks: {
 		init() {
 			const context = getContext< {{pascalCase}}Context >();
-			context.canWrite =
-				context.canWrite && ! hasExpiredPublicWriteToken( context );
-			state.canWrite = context.canWrite;
-			state.isVisible = context.isVisible;
-			state.count = context.count;
+			context.client = {
+				bootstrapError: '',
+				writeExpiry: 0,
+				writeNonce: '',
+				writeToken: '',
+			};
+			context.bootstrapReady = false;
+			context.canWrite = false;
+			context.count = 0;
+			context.error = '';
+			context.isBootstrapping = false;
+			context.isLoading = false;
+			context.isSaving = false;
 		},
 		mounted() {
 			state.isHydrated = true;
 			if ( typeof document !== 'undefined' ) {
 				document.documentElement.dataset[ '{{slugCamelCase}}Hydrated' ] = 'true';
 			}
-			void actions.loadCounter();
+			void Promise.allSettled( [
+				actions.loadState(),
+				actions.loadBootstrap(),
+			] );
 		},
 	},
 } );

package/templates/_shared/persistence/core/src/transport.ts.mustache

@@ -0,0 +1,254 @@
+import {
+	type EndpointCallOptions,
+	resolveRestRouteUrl,
+} from '@wp-typia/rest';
+
+export type PersistenceTransportTarget = 'editor' | 'frontend';
+export type PersistenceTransportOperation = 'read' | 'write';
+
+export interface PersistenceTransportOptions {
+	restNonce?: string;
+	transportTarget?: PersistenceTransportTarget;
+}
+
+interface EndpointWithPath {
+	path: string;
+}
+
+type PersistenceTransportResolver = (
+	endpoint: EndpointWithPath,
+	request?: unknown,
+	options?: PersistenceTransportOptions
+) => EndpointCallOptions;
+
+interface PersistenceTransportTargetResolvers {
+	read: PersistenceTransportResolver;
+	write: PersistenceTransportResolver;
+}
+
+// Replace any of these base URLs to route a given target through a contract-compatible proxy or BFF.
+const EDITOR_READ_BASE_URL: string | undefined = undefined;
+const EDITOR_WRITE_BASE_URL: string | undefined = undefined;
+const FRONTEND_READ_BASE_URL: string | undefined = undefined;
+const FRONTEND_WRITE_BASE_URL: string | undefined = undefined;
+
+function resolveEndpointUrl(
+	endpointPath: string,
+	baseUrl?: string
+): string {
+	if ( typeof baseUrl === 'string' && baseUrl.trim().length > 0 ) {
+		const origin =
+			typeof window !== 'undefined' ? window.location.origin : 'http://localhost';
+		const resolvedBaseUrl = new URL( baseUrl.trim(), origin );
+		const [ pathWithQuery, hash = '' ] = endpointPath.split( '#', 2 );
+		const [ rawPath, rawQuery = '' ] = pathWithQuery.split( '?', 2 );
+		const normalizedEndpointPath = rawPath.replace( /^\/+/, '' );
+
+		if ( resolvedBaseUrl.searchParams.has( 'rest_route' ) ) {
+			const restRouteBase = resolvedBaseUrl.searchParams.get( 'rest_route' ) ?? '/';
+			const normalizedRestRouteBase = restRouteBase
+				.replace( /^\/+/, '' )
+				.replace( /\/+$/, '' );
+			const nextRestRoute = normalizedRestRouteBase.length > 0
+				? `/${ normalizedRestRouteBase }/${ normalizedEndpointPath }`
+				: `/${ normalizedEndpointPath }`;
+			resolvedBaseUrl.searchParams.set( 'rest_route', nextRestRoute );
+		} else {
+			const basePath = resolvedBaseUrl.pathname.endsWith( '/' )
+				? resolvedBaseUrl.pathname
+				: `${ resolvedBaseUrl.pathname }/`;
+			resolvedBaseUrl.pathname = `${ basePath }${ normalizedEndpointPath }`;
+		}
+
+		for ( const [ key, value ] of new URLSearchParams( rawQuery ) ) {
+			resolvedBaseUrl.searchParams.append( key, value );
+		}
+
+		if ( hash ) {
+			resolvedBaseUrl.hash = hash;
+		}
+
+		return resolvedBaseUrl.toString();
+	}
+
+	return resolveRestRouteUrl( endpointPath );
+}
+
+function isPlainObject(
+	value: unknown
+): value is Record< string, unknown > {
+	if ( Object.prototype.toString.call( value ) !== '[object Object]' ) {
+		return false;
+	}
+
+	const prototype = Object.getPrototypeOf( value );
+	return prototype === null || prototype === Object.prototype;
+}
+
+function encodeRequestQuery( request: unknown ): string {
+	if ( request === undefined || request === null ) {
+		return '';
+	}
+
+	if ( request instanceof URLSearchParams ) {
+		return request.toString();
+	}
+
+	if ( ! isPlainObject( request ) ) {
+		throw new Error(
+			'Persistence transport read requests must be plain objects or URLSearchParams.'
+		);
+	}
+
+	const params = new URLSearchParams();
+
+	for ( const [ key, value ] of Object.entries( request ) ) {
+		if ( value === undefined || value === null ) {
+			continue;
+		}
+
+		if ( Array.isArray( value ) ) {
+			for ( const item of value ) {
+				params.append( key, String( item ) );
+			}
+			continue;
+		}
+
+		params.set( key, String( value ) );
+	}
+
+	return params.toString();
+}
+
+function joinUrlWithQuery(
+	url: string,
+	query: string
+): string {
+	if ( ! query ) {
+		return url;
+	}
+
+	const nextUrl = new URL(
+		url,
+		typeof window !== 'undefined' ? window.location.origin : 'http://localhost'
+	);
+
+	for ( const [ key, value ] of new URLSearchParams( query ) ) {
+		nextUrl.searchParams.append( key, value );
+	}
+
+	return nextUrl.toString();
+}
+
+export function resolveRestNonce( fallback?: string ): string | undefined {
+	if ( typeof fallback === 'string' && fallback.length > 0 ) {
+		return fallback;
+	}
+
+	if ( typeof window === 'undefined' ) {
+		return undefined;
+	}
+
+	const wpApiSettings = ( window as typeof window & {
+		wpApiSettings?: { nonce?: string };
+	} ).wpApiSettings;
+
+	return typeof wpApiSettings?.nonce === 'string' && wpApiSettings.nonce.length > 0
+		? wpApiSettings.nonce
+		: undefined;
+}
+
+function buildCallOptions( {
+	baseUrl,
+	endpoint,
+	includeRestNonce,
+	operation,
+	options,
+	request,
+}: {
+	baseUrl?: string;
+	endpoint: EndpointWithPath;
+	includeRestNonce: boolean;
+	operation: PersistenceTransportOperation;
+	options?: PersistenceTransportOptions;
+	request?: unknown;
+} ): EndpointCallOptions {
+	const nonce = includeRestNonce ? resolveRestNonce( options?.restNonce ) : undefined;
+	const requestOptions: EndpointCallOptions['requestOptions'] = {};
+
+	if ( nonce ) {
+		requestOptions.headers = {
+			'X-WP-Nonce': nonce,
+		};
+	}
+
+	if ( typeof baseUrl === 'string' && baseUrl.trim().length > 0 ) {
+		const endpointUrl = resolveEndpointUrl( endpoint.path, baseUrl );
+		requestOptions.url =
+			operation === 'read'
+				? joinUrlWithQuery( endpointUrl, encodeRequestQuery( request ) )
+				: endpointUrl;
+	}
+
+	return Object.keys( requestOptions ).length > 0
+		? {
+				requestOptions,
+			}
+		: {};
+}
+
+export const persistenceTransportTargets: Record<
+	PersistenceTransportTarget,
+	PersistenceTransportTargetResolvers
+> = {
+	editor: {
+		read: ( endpoint, request, options ) =>
+			buildCallOptions( {
+				baseUrl: EDITOR_READ_BASE_URL,
+				endpoint,
+				includeRestNonce: {{isAuthenticatedPersistencePolicy}},
+				operation: 'read',
+				options,
+				request,
+			} ),
+		write: ( endpoint, request, options ) =>
+			buildCallOptions( {
+				baseUrl: EDITOR_WRITE_BASE_URL,
+				endpoint,
+				includeRestNonce: {{isAuthenticatedPersistencePolicy}},
+				operation: 'write',
+				options,
+				request,
+			} ),
+	},
+	frontend: {
+		read: ( endpoint, request, options ) =>
+			buildCallOptions( {
+				baseUrl: FRONTEND_READ_BASE_URL,
+				endpoint,
+				includeRestNonce: false,
+				operation: 'read',
+				options,
+				request,
+			} ),
+		write: ( endpoint, request, options ) =>
+			buildCallOptions( {
+				baseUrl: FRONTEND_WRITE_BASE_URL,
+				endpoint,
+				includeRestNonce: {{isAuthenticatedPersistencePolicy}},
+				operation: 'write',
+				options,
+				request,
+			} ),
+	},
+};
+
+export function resolveTransportCallOptions(
+	target: PersistenceTransportTarget,
+	operation: PersistenceTransportOperation,
+	endpoint: EndpointWithPath,
+	request?: unknown,
+	options?: PersistenceTransportOptions
+): EndpointCallOptions {
+	return persistenceTransportTargets[ target ][ operation ]( endpoint, request, options );
+}