@wp-typia/project-tools 0.13.4 → 0.15.0

package/templates/_shared/compound/persistence/src/blocks/{{slugKebabCase}}/data.ts.mustache

@@ -6,31 +6,21 @@ import {
 } from '@wp-typia/rest/react';
 
 import type {
+	{{pascalCase}}BootstrapQuery,
+	{{pascalCase}}BootstrapResponse,
 	{{pascalCase}}StateQuery,
 	{{pascalCase}}StateResponse,
 	{{pascalCase}}WriteStateRequest,
 } from './api-types';
 import {
-	resolveRestNonce,
+	bootstrapEndpoint,
 	stateEndpoint,
 	writeStateEndpoint,
 } from './api';
-
-{{#isAuthenticatedPersistencePolicy}}
-function buildWriteCallOptions( restNonce?: string ) {
-	const nonce = resolveRestNonce( restNonce );
-
-	return nonce
-		? {
-				requestOptions: {
-					headers: {
-						'X-WP-Nonce': nonce,
-					},
-				},
-			}
-		: undefined;
-}
-{{/isAuthenticatedPersistencePolicy}}
+import {
+	resolveTransportCallOptions,
+	type PersistenceTransportTarget,
+} from './transport';
 
 interface WriteStateMutationContext< Context > {
 	previous:
@@ -49,9 +39,22 @@ export interface Use{{pascalCase}}StateQueryOptions<
 	>,
 	'resolveCallOptions'
 > {
-	{{#isAuthenticatedPersistencePolicy}}
 	restNonce?: string;
-	{{/isAuthenticatedPersistencePolicy}}
+	transportTarget?: PersistenceTransportTarget;
+}
+
+export interface Use{{pascalCase}}BootstrapQueryOptions<
+	Selected = {{pascalCase}}BootstrapResponse,
+> extends Omit<
+	UseEndpointQueryOptions<
+		{{pascalCase}}BootstrapQuery,
+		{{pascalCase}}BootstrapResponse,
+		Selected
+	>,
+	'resolveCallOptions'
+> {
+	restNonce?: string;
+	transportTarget?: PersistenceTransportTarget;
 }
 
 export interface UseWrite{{pascalCase}}StateMutationOptions<
@@ -62,7 +65,7 @@ export interface UseWrite{{pascalCase}}StateMutationOptions<
 		{{pascalCase}}StateResponse,
 		WriteStateMutationContext< Context >
 	>,
-	'invalidate' | 'onError' | 'onMutate'{{#isAuthenticatedPersistencePolicy}} | 'resolveCallOptions'{{/isAuthenticatedPersistencePolicy}}
+	'invalidate' | 'onError' | 'onMutate' | 'resolveCallOptions'
 > {
 	onError?: (
 		error: unknown,
@@ -74,9 +77,8 @@ export interface UseWrite{{pascalCase}}StateMutationOptions<
 		request: {{pascalCase}}WriteStateRequest,
 		client: import('@wp-typia/rest/react').EndpointDataClient
 	) => Context | Promise<Context>;
-	{{#isAuthenticatedPersistencePolicy}}
 	restNonce?: string;
-	{{/isAuthenticatedPersistencePolicy}}
+	transportTarget?: PersistenceTransportTarget;
 }
 
 export function use{{pascalCase}}StateQuery<
@@ -85,20 +87,54 @@ export function use{{pascalCase}}StateQuery<
 	request: {{pascalCase}}StateQuery,
 	options: Use{{pascalCase}}StateQueryOptions< Selected > = {}
 ) {
-	{{#isAuthenticatedPersistencePolicy}}
 	const {
 		restNonce,
+		transportTarget = 'editor',
 		...queryOptions
 	} = options;
 
 	return useEndpointQuery( stateEndpoint, request, {
 		...queryOptions,
-		resolveCallOptions: () => buildWriteCallOptions( restNonce ),
+		resolveCallOptions: () =>
+			resolveTransportCallOptions(
+				transportTarget,
+				'read',
+				stateEndpoint,
+				request,
+				{
+					restNonce,
+					transportTarget,
+				}
+			),
+	} );
+}
+
+export function use{{pascalCase}}BootstrapQuery<
+	Selected = {{pascalCase}}BootstrapResponse,
+>(
+	request: {{pascalCase}}BootstrapQuery,
+	options: Use{{pascalCase}}BootstrapQueryOptions< Selected > = {}
+) {
+	const {
+		restNonce,
+		transportTarget = 'editor',
+		...queryOptions
+	} = options;
+
+	return useEndpointQuery( bootstrapEndpoint, request, {
+		...queryOptions,
+		resolveCallOptions: () =>
+			resolveTransportCallOptions(
+				transportTarget,
+				'read',
+				bootstrapEndpoint,
+				request,
+				{
+					restNonce,
+					transportTarget,
+				}
+			),
 	} );
-	{{/isAuthenticatedPersistencePolicy}}
-	{{^isAuthenticatedPersistencePolicy}}
-	return useEndpointQuery( stateEndpoint, request, options );
-	{{/isAuthenticatedPersistencePolicy}}
 }
 
 export function useWrite{{pascalCase}}StateMutation<
@@ -109,9 +145,8 @@ export function useWrite{{pascalCase}}StateMutation<
 	const {
 		onError,
 		onMutate,
-		{{#isAuthenticatedPersistencePolicy}}
 		restNonce,
-		{{/isAuthenticatedPersistencePolicy}}
+		transportTarget = 'editor',
 		...mutationOptions
 	} = options;
 
@@ -185,8 +220,16 @@ export function useWrite{{pascalCase}}StateMutation<
 				userContext,
 			};
 		},
-		{{#isAuthenticatedPersistencePolicy}}
-		resolveCallOptions: () => buildWriteCallOptions( restNonce ),
-		{{/isAuthenticatedPersistencePolicy}}
+		resolveCallOptions: ( request ) =>
+			resolveTransportCallOptions(
+				transportTarget,
+				'write',
+				writeStateEndpoint,
+				request,
+				{
+					restNonce,
+					transportTarget,
+				}
+			),
 	} );
 }

package/templates/_shared/compound/persistence/src/blocks/{{slugKebabCase}}/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,66 +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,
 	} 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( {
@@ -91,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;
 			}
 		},
 	},
@@ -116,17 +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.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/compound/persistence/src/blocks/{{slugKebabCase}}/render.php.mustache

@@ -32,50 +32,42 @@ $post_id           = is_object( $block ) && isset( $block->context['postId'] )
 	: (int) get_queried_object_id();
 $storage_mode      = '{{dataStorageMode}}';
 $persistence_policy = '{{persistencePolicy}}';
-$can_write         = false;
+
+{{phpPrefix}}_record_rendered_block_instance(
+	(int) $post_id,
+	'{{namespace}}/{{slugKebabCase}}',
+	$resource_key
+);
+
 $notice_message    = 'authenticated' === $persistence_policy
 	? __( 'Sign in to persist this counter.', '{{textDomain}}' )
-	: __( 'Reload the page to refresh this write token.', '{{textDomain}}' );
+	: __( 'Public writes are temporarily unavailable.', '{{textDomain}}' );
 
 if ( empty( $validation['valid'] ) || '' === $resource_key ) {
 	return '';
 }
 
 $context = array(
-	'buttonLabel'       => $button_label,
-	'canWrite'          => false,
-	'count'             => 0,
-	'persistencePolicy' => $persistence_policy,
-	'postId'            => (int) $post_id,
-	'resourceKey'       => $resource_key,
-	'showCount'         => $show_count,
-	'storage'           => $storage_mode,
+	'bootstrapReady'       => false,
+	'buttonLabel'          => $button_label,
+	'canWrite'             => false,
+	'client'               => array(
+		'writeExpiry' => 0,
+		'writeNonce'  => '',
+		'writeToken'  => '',
+	),
+	'count'                => 0,
+	'error'                => '',
+	'isBootstrapping'      => false,
+	'isLoading'            => false,
+	'isSaving'             => false,
+	'persistencePolicy'    => $persistence_policy,
+	'postId'               => (int) $post_id,
+	'resourceKey'          => $resource_key,
+	'showCount'            => $show_count,
+	'storage'              => $storage_mode,
 );
 
-if ( 'authenticated' === $persistence_policy ) {
-	$can_write = $post_id > 0 && is_user_logged_in();
-	if ( $can_write ) {
-		$context['restNonce'] = wp_create_nonce( 'wp_rest' );
-	}
-} elseif ( $post_id > 0 && function_exists( '{{phpPrefix}}_create_public_write_token' ) ) {
-	$public_write = {{phpPrefix}}_create_public_write_token( (int) $post_id, $resource_key );
-	if ( is_array( $public_write ) ) {
-		$token      = isset( $public_write['token'] ) ? (string) $public_write['token'] : '';
-		$expires_at = isset( $public_write['expiresAt'] ) ? (int) $public_write['expiresAt'] : 0;
-
-		if ( '' !== $token ) {
-			$context['publicWriteToken'] = $token;
-			$can_write                   = true;
-		}
-
-		if ( $expires_at > 0 ) {
-			$context['publicWriteExpiresAt'] = $expires_at;
-		}
-	}
-}
-
-$context['canWrite'] = $can_write;
-
 $allowed_inner_html = wp_kses_allowed_html( 'post' );
 
 foreach ( $allowed_inner_html as &$allowed_attributes ) {
@@ -119,18 +111,20 @@ $wrapper_attributes = get_block_wrapper_attributes(
 	<?php if ( '' !== $intro ) : ?>
 		<p class="{{cssClassName}}__intro"><?php echo esc_html( $intro ); ?></p>
 	<?php endif; ?>
-	<?php if ( ! $can_write ) : ?>
-		<p class="{{cssClassName}}__notice">
-			<?php echo esc_html( $notice_message ); ?>
-		</p>
-	<?php endif; ?>
+	<p
+		class="{{cssClassName}}__notice"
+		data-wp-bind--hidden="!context.bootstrapReady || context.canWrite"
+		hidden
+	>
+		<?php echo esc_html( $notice_message ); ?>
+	</p>
 	<p
 		class="{{cssClassName}}__error"
 		role="status"
 		aria-live="polite"
 		aria-atomic="true"
-		data-wp-bind--hidden="!state.error"
-		data-wp-text="state.error"
+		data-wp-bind--hidden="!context.error"
+		data-wp-text="context.error"
 		hidden
 	></p>
 	<?php if ( $show_count ) : ?>
@@ -140,11 +134,11 @@ $wrapper_attributes = get_block_wrapper_attributes(
 				role="status"
 				aria-live="polite"
 				aria-atomic="true"
-				data-wp-text="state.count"
+				data-wp-text="context.count"
 			>0</span>
 			<button
 				type="button"
-				<?php echo $can_write ? '' : 'disabled'; ?>
+				disabled
 				data-wp-bind--disabled="!context.canWrite"
 				data-wp-on--click="actions.increment"
 			>