@qlover/create-app 0.11.0 → 1.0.0

package/dist/templates/react-app/src/base/apis/userApi/UserApi.ts

@@ -1,11 +1,15 @@
 import { RES_NO_TOKEN } from '@config/Identifier';
 import {
-  FetchAbortPlugin,
-  RequestAdapterFetch,
-  RequestTransaction
+  Aborter,
+  AborterConfig,
+  type AborterInterface,
+  ExecutorContextInterface,
+  ExecutorError,
+  LifecycleExecutor,
+  type RequestAdapterInterface,
+  RequestExecutor
 } from '@qlover/fe-corekit';
 import { inject, injectable } from 'inversify';
-import { AppError } from '@/base/cases/AppError';
 import { UserApiAdapter } from './UserApiAdapter';
 import { UserApiConfig } from './UserApiBootstarp';
 import {
@@ -17,10 +21,7 @@ import {
   UserInfo,
   UserCredential
 } from './UserApiType';
-import type {
-  UserAuthStoreInterface,
-  UserServiceGateway
-} from '@qlover/corekit-bridge';
+import type { UserServiceGateway } from '@qlover/corekit-bridge';
 
 /**
  * UserApi
@@ -31,27 +32,20 @@ import type {
  */
 @injectable()
 export class UserApi
-  extends RequestTransaction<UserApiConfig>
+  extends RequestExecutor<
+    UserApiConfig,
+    ExecutorContextInterface<UserApiConfig>
+  >
   implements UserServiceGateway<UserInfo, UserCredential>
 {
-  protected store: UserAuthStoreInterface<UserInfo> | null = null;
-
   constructor(
-    @inject(FetchAbortPlugin) protected abortPlugin: FetchAbortPlugin,
-    @inject(UserApiAdapter) adapter: RequestAdapterFetch
+    @inject(Aborter) protected abortPlugin: AborterInterface<AborterConfig>,
+    @inject(UserApiAdapter) adapter: RequestAdapterInterface<UserApiConfig>
   ) {
-    super(adapter);
-  }
-
-  public getStore(): UserAuthStoreInterface<UserInfo> | null {
-    return this.store;
-  }
-
-  /**
-   * @param store
-   */
-  public setStore(store: UserAuthStoreInterface<UserInfo>): void {
-    this.store = store;
+    super(
+      adapter,
+      new LifecycleExecutor<ExecutorContextInterface<UserApiConfig, unknown>>()
+    );
   }
 
   public stop(request: UserApiConfig): Promise<void> | void {
@@ -59,7 +53,7 @@ export class UserApi
   }
 
   public async getRandomUser(): Promise<GetIpInfoTransaction['response']> {
-    return this.request<GetIpInfoTransaction>({
+    return this.request({
       url: 'https://randomuser.me/api/',
       method: 'GET',
       disabledMock: true
@@ -69,7 +63,7 @@ export class UserApi
   public async testApiCatchResult(): Promise<
     UserApiTestApiCatchResultTransaction['response']
   > {
-    return this.request<UserApiTestApiCatchResultTransaction>({
+    return this.request({
       url: 'https://randomuser.me/api/?_name=ApiCatchResult',
       method: 'GET',
       disabledMock: true,
@@ -78,29 +72,31 @@ export class UserApi
   }
 
   /**
+   * @override
    * @param params
    * @returns
    */
   public async login(
     params: UserApiLoginTransaction['data']
   ): Promise<UserCredential> {
-    const response = await this.post<UserApiLoginTransaction>(
-      '/api/login',
-      params
-    );
+    const response = await this.post<
+      UserApiLoginTransaction['response'],
+      UserApiLoginTransaction['data']
+    >('/api/login', params);
 
     if (response.apiCatchResult) {
       throw response.apiCatchResult;
     }
 
     if (!response.data.token) {
-      throw new AppError(RES_NO_TOKEN);
+      throw new ExecutorError(RES_NO_TOKEN);
     }
 
     return response.data;
   }
 
   /**
+   * @override
    * @param params
    * @returns
    */
@@ -112,6 +108,7 @@ export class UserApi
   }
 
   /**
+   * @override
    * @returns
    */
   public async refreshUserInfo(): Promise<UserInfo> {
@@ -119,6 +116,7 @@ export class UserApi
   }
 
   /**
+   * @override
    * @returns
    */
   public logout(): Promise<any> {
@@ -126,11 +124,14 @@ export class UserApi
   }
 
   /**
+   * @override
    * @returns
    */
   public async getUserInfo(_credential?: UserCredential): Promise<UserInfo> {
-    const response =
-      await this.get<UserApiGetUserInfoTransaction>('/api/userinfo');
+    const response = await this.get<
+      UserApiGetUserInfoTransaction['response'],
+      UserApiGetUserInfoTransaction['data']
+    >('/api/userinfo');
 
     if (response.apiCatchResult) {
       throw response.apiCatchResult;

package/dist/templates/react-app/src/base/apis/userApi/UserApiBootstarp.ts

@@ -6,15 +6,19 @@ import {
   type ApiCatchPluginConfig,
   type ApiCatchPluginResponse
 } from '@qlover/corekit-bridge';
-import { FetchAbortPlugin, FetchURLPlugin } from '@qlover/fe-corekit';
+import {
+  Aborter,
+  AborterPlugin,
+  RequestPlugin,
+  ResponsePlugin,
+  type AborterConfig,
+  type RequestAdapterConfig,
+  type RequestAdapterResponse
+} from '@qlover/fe-corekit';
+import { RequestLanguages } from '@/base/cases/RequestLanguages';
 import { RequestLogger } from '@/base/cases/RequestLogger';
 import { UserApi } from './UserApi';
-import { RequestLanguages } from '../../cases/RequestLanguages';
-import type {
-  RequestAdapterConfig,
-  RequestAdapterResponse,
-  RequestTransactionInterface
-} from '@qlover/fe-corekit';
+import type { RequestTransactionInterface } from '../feApi/FeApiBootstarp';
 
 /**
  * UserApiConfig
@@ -30,7 +34,8 @@ export interface UserApiConfig<Request = unknown>
   extends
     RequestAdapterConfig<Request>,
     ApiMockPluginOptions,
-    ApiCatchPluginConfig {}
+    ApiCatchPluginConfig,
+    AborterConfig {}
 
 /**
  * UserApiResponse
@@ -64,17 +69,18 @@ export interface UserApiTransaction<
 export class UserApiBootstarp implements BootstrapExecutorPlugin {
   public readonly pluginName = 'UserApiBootstarp';
 
+  /**
+   * @override
+   */
   public onBefore({ parameters: { ioc } }: BootstrapContext): void {
     ioc
       .get<UserApi>(UserApi)
-      .usePlugin(new FetchURLPlugin())
-      .usePlugin(ioc.get(IOCIdentifier.FeApiCommonPlugin))
-      .usePlugin(
-        new RequestLanguages(ioc.get(IOCIdentifier.I18nServiceInterface))
-      )
-      .usePlugin(ioc.get(IOCIdentifier.ApiMockPlugin))
-      .usePlugin(ioc.get(RequestLogger))
-      .usePlugin(ioc.get(FetchAbortPlugin))
-      .usePlugin(ioc.get(IOCIdentifier.ApiCatchPlugin));
+      .use(new RequestPlugin())
+      .use(ioc.get(ResponsePlugin))
+      .use(new AborterPlugin(ioc.get(Aborter)))
+      .use(new RequestLanguages(ioc.get(IOCIdentifier.I18nServiceInterface)))
+      .use(ioc.get(IOCIdentifier.ApiMockPlugin))
+      .use(ioc.get(IOCIdentifier.ApiCatchPlugin))
+      .use(ioc.get(RequestLogger));
   }
 }

package/dist/templates/react-app/src/base/cases/I18nKeyErrorPlugin.ts

@@ -1,8 +1,8 @@
 import { IOCIdentifier } from '@config/IOCIdentifier';
 import {
+  ExecutorContextInterface,
   ExecutorError,
-  type ExecutorContext,
-  type ExecutorPlugin
+  LifecyclePluginInterface
 } from '@qlover/fe-corekit';
 import { inject, injectable } from 'inversify';
 import type { I18nServiceInterface } from '../port/I18nServiceInterface';
@@ -14,7 +14,9 @@ import type { LoggerInterface } from '@qlover/logger';
  * If the error thrown is an i18n key, it will be converted to the corresponding text
  */
 @injectable()
-export class I18nKeyErrorPlugin implements ExecutorPlugin {
+export class I18nKeyErrorPlugin implements LifecyclePluginInterface<
+  ExecutorContextInterface<unknown, unknown>
+> {
   public readonly pluginName = 'I18nKeyErrorPlugin';
 
   constructor(
@@ -30,7 +32,9 @@ export class I18nKeyErrorPlugin implements ExecutorPlugin {
   /**
    * @override
    */
-  public onError(context: ExecutorContext<unknown>): Error | void {
+  public onError(
+    context: ExecutorContextInterface<unknown, unknown>
+  ): ExecutorError | void {
     const { error } = context;
 
     if (!error) {
@@ -39,6 +43,7 @@ export class I18nKeyErrorPlugin implements ExecutorPlugin {
 
     if (error instanceof ExecutorError) {
       const i18nText = this.translateById(error.id);
+      this.logger.error('i18nText', i18nText);
       return new ExecutorError(error.id, i18nText);
     }
 
@@ -50,7 +55,8 @@ export class I18nKeyErrorPlugin implements ExecutorPlugin {
 
         if (i18nText && i18nText !== i18nKey) {
           this.logger.debug('I18nKeyErrorPlugin Error:', i18nText);
-          return new Error(i18nText);
+          // Use i18nText as cause (string) so ExecutorError.message will be the translated text
+          return new ExecutorError(i18nKey, i18nText);
         }
       }
     }

package/dist/templates/react-app/src/base/cases/RequestLanguages.ts

@@ -1,11 +1,13 @@
 import type { I18nServiceInterface } from '@/base/port/I18nServiceInterface';
 import type {
-  ExecutorContext,
-  ExecutorPlugin,
+  ExecutorContextInterface,
+  LifecyclePluginInterface,
   RequestAdapterConfig
 } from '@qlover/fe-corekit';
 
-export class RequestLanguages implements ExecutorPlugin {
+export class RequestLanguages implements LifecyclePluginInterface<
+  ExecutorContextInterface<RequestAdapterConfig, unknown>
+> {
   public readonly pluginName = 'RequestLanguages';
 
   constructor(
@@ -25,18 +27,29 @@ export class RequestLanguages implements ExecutorPlugin {
   /**
    * @override
    */
-  public onBefore(context: ExecutorContext<RequestAdapterConfig>): void {
+  public onBefore(
+    context: ExecutorContextInterface<RequestAdapterConfig, unknown>
+  ): void {
     const currentLanguage = this.i18nService.getCurrentLanguage();
     const languages = this.i18nService.getSupportedLanguages();
 
     if (!context.parameters.headers) {
-      context.parameters.headers = {};
+      context.setParameters({
+        ...context.parameters,
+        headers: {}
+      });
     }
 
     const languageValue = this.buildAcceptLanguage(
       Array.from(new Set([currentLanguage, ...languages]))
     );
 
-    context.parameters.headers[this.headerName] = languageValue;
+    context.setParameters({
+      ...context.parameters,
+      headers: {
+        ...context.parameters.headers,
+        [this.headerName]: languageValue
+      }
+    });
   }
 }

package/dist/templates/react-app/src/base/cases/RequestLogger.ts

@@ -1,11 +1,8 @@
 import { IOCIdentifier } from '@config/IOCIdentifier';
+import { type ApiCatchPluginResponse } from '@qlover/corekit-bridge';
 import {
-  type ApiCatchPluginConfig,
-  type ApiCatchPluginResponse
-} from '@qlover/corekit-bridge';
-import {
-  type ExecutorPlugin,
-  type ExecutorContext,
+  type LifecyclePluginInterface,
+  type ExecutorContextInterface,
   type RequestAdapterFetchConfig,
   type RequestAdapterResponse
 } from '@qlover/fe-corekit';
@@ -13,7 +10,9 @@ import { injectable, inject } from 'inversify';
 import type { LoggerInterface } from '@qlover/logger';
 
 @injectable()
-export class RequestLogger implements ExecutorPlugin<RequestAdapterFetchConfig> {
+export class RequestLogger implements LifecyclePluginInterface<
+  ExecutorContextInterface<RequestAdapterFetchConfig, unknown>
+> {
   public readonly pluginName = 'RequestLogger';
 
   constructor(@inject(IOCIdentifier.Logger) public logger: LoggerInterface) {}
@@ -22,7 +21,7 @@ export class RequestLogger implements ExecutorPlugin<RequestAdapterFetchConfig>
    * @override
    */
   public onBefore(
-    context: ExecutorContext<RequestAdapterFetchConfig<unknown>>
+    context: ExecutorContextInterface<RequestAdapterFetchConfig, unknown>
   ): void {
     this.logger.log(
       `%c[Request before]%c [${new Date().toLocaleString()}] ${context.parameters.method} ${context.parameters.url}`,
@@ -38,8 +37,9 @@ export class RequestLogger implements ExecutorPlugin<RequestAdapterFetchConfig>
   public async onSuccess({
     parameters,
     returnValue
-  }: ExecutorContext<
-    RequestAdapterFetchConfig & ApiCatchPluginConfig
+  }: ExecutorContextInterface<
+    RequestAdapterFetchConfig,
+    unknown
   >): Promise<void> {
     const _returnValue = returnValue as RequestAdapterResponse &
       ApiCatchPluginResponse;
@@ -65,7 +65,7 @@ export class RequestLogger implements ExecutorPlugin<RequestAdapterFetchConfig>
   public onError({
     parameters,
     error
-  }: ExecutorContext<RequestAdapterFetchConfig>): void {
+  }: ExecutorContextInterface<RequestAdapterFetchConfig, unknown>): void {
     this.loggerError(parameters, error);
   }
 

package/dist/templates/react-app/src/base/services/BaseLayoutService.ts

@@ -1,18 +1,22 @@
 import { I } from '@config/IOCIdentifier';
-import { AsyncExecutor, ExecutorPlugin } from '@qlover/fe-corekit';
+import {
+  ExecutorContextInterface,
+  LifecycleExecutor,
+  LifecyclePluginInterface
+} from '@qlover/fe-corekit';
 import { injectable, inject } from 'inversify';
 import { UserBootstrap } from './UserBootstrap';
 import type { RouteServiceInterface } from '../port/RouteServiceInterface';
 import type { UserServiceInterface } from '../port/UserServiceInterface';
 import type {
-  BootstrapContextValue,
+  BootstrapPluginOptions,
   IOCContainerInterface
 } from '@qlover/corekit-bridge';
 import type { LoggerInterface } from '@qlover/logger';
 
 @injectable()
 export class BaseLayoutService {
-  protected executor: AsyncExecutor = new AsyncExecutor();
+  protected executor: LifecycleExecutor = new LifecycleExecutor();
 
   constructor(
     @inject(I.Logger) protected logger: LoggerInterface,
@@ -24,7 +28,9 @@ export class BaseLayoutService {
     this.use(new UserBootstrap(userService));
   }
 
-  public use(plugin: ExecutorPlugin): this {
+  public use(
+    plugin: LifecyclePluginInterface<ExecutorContextInterface<unknown, unknown>>
+  ): this {
     this.executor.use(plugin);
     return this;
   }
@@ -36,7 +42,7 @@ export class BaseLayoutService {
   }
 
   public async starup(ioc: IOCContainerInterface): Promise<unknown> {
-    const context: BootstrapContextValue = {
+    const context: BootstrapPluginOptions = {
       root: {},
       logger: this.logger,
       ioc: ioc

package/dist/templates/react-app/src/base/services/I18nService.ts

@@ -35,6 +35,9 @@ export class I18nService
     super(() => new I18nServiceState(i18n.language as LocaleType));
   }
 
+  /**
+   * @override
+   */
   public onBefore(): void {
     const debug = false;
 

package/dist/templates/react-app/src/base/services/IdentifierService.ts

@@ -62,6 +62,9 @@ export class IdentifierService<T> implements ResourceServiceInterface<
     }
   }
 
+  /**
+   * @override
+   */
   public async created(): Promise<unknown> {
     this.unsubscribe = this.i18nService.observe(
       (state) => state.language,
@@ -73,6 +76,9 @@ export class IdentifierService<T> implements ResourceServiceInterface<
     return this.init();
   }
 
+  /**
+   * @override
+   */
   public destroyed(): void {
     this.unsubscribe?.();
     this.unsubscribe = null;
@@ -80,8 +86,14 @@ export class IdentifierService<T> implements ResourceServiceInterface<
     this.store.reset();
   }
 
+  /**
+   * @override
+   */
   public updated(): void {}
 
+  /**
+   * @override
+   */
   public async search(
     params: Partial<ResourceQuery & { locale: LocaleType }>
   ): Promise<PaginationInterface<IdentifierRecord>> {
@@ -122,16 +134,28 @@ export class IdentifierService<T> implements ResourceServiceInterface<
     return this.search(this.store.state.searchParams);
   }
 
+  /**
+   * @override
+   */
   public async update(_data: Partial<T>): Promise<unknown> {
     return Promise.resolve(null);
   }
 
+  /**
+   * @override
+   */
   public create(_data: T): Promise<unknown> {
     return Promise.resolve(null);
   }
+  /**
+   * @override
+   */
   public remove(_data: T): Promise<unknown> {
     return Promise.resolve(null);
   }
+  /**
+   * @override
+   */
   public export(_data: T): Promise<unknown> {
     return Promise.resolve(null);
   }

package/dist/templates/react-app/src/base/services/UserBootstrap.ts

@@ -1,7 +1,7 @@
 import { LOCAL_NO_USER_TOKEN } from '@config/Identifier';
 import { I } from '@config/IOCIdentifier';
+import { ExecutorError } from '@qlover/fe-corekit';
 import { inject, injectable } from 'inversify';
-import { AppError } from '../cases/AppError';
 import type { UserServiceInterface } from '../port/UserServiceInterface';
 import type { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
 
@@ -14,7 +14,10 @@ export class UserBootstrap implements BootstrapExecutorPlugin {
     protected userService: UserServiceInterface
   ) {}
 
-  public async onBefore(): Promise<void> {
+  /**
+   * @override
+   */
+  public onBefore(): void {
     const userService = this.userService;
 
     if (userService.isAuthenticated()) {
@@ -26,18 +29,17 @@ export class UserBootstrap implements BootstrapExecutorPlugin {
     if (userService.isUserCredential(credential)) {
       userService.getStore().start();
 
-      const user = await userService.refreshUserInfo();
-
-      userService.getStore().success(user);
+      userService.refreshUserInfo().then((user) => {
+        userService.getStore().success(user);
+      });
 
       return;
     }
 
-    const newError = new AppError(LOCAL_NO_USER_TOKEN);
+    const newError = new ExecutorError(LOCAL_NO_USER_TOKEN);
 
     userService.getStore().failed(newError);
 
-    // 否则还是抛出错误
     throw newError;
   }
 }

package/dist/templates/react-app/src/base/services/UserService.ts

@@ -1,8 +1,5 @@
 import { I } from '@config/IOCIdentifier';
-import {
-  UserService as CorekitBridgeUserService,
-  GatewayExecutor
-} from '@qlover/corekit-bridge';
+import { UserService as CorekitBridgeUserService } from '@qlover/corekit-bridge';
 import { inject, injectable } from 'inversify';
 import { isObject, isString } from 'lodash';
 import { UserApi } from '@/base/apis/userApi/UserApi';
@@ -28,7 +25,6 @@ export class UserService
     logger: LoggerInterface
   ) {
     super({
-      executor: new GatewayExecutor(),
       gateway: userApi,
       logger: logger,
       store: {
@@ -71,6 +67,9 @@ export class UserService
     return isObject(value) && 'token' in value && isString(value.token);
   }
 
+  /**
+   * @override
+   */
   public override isAuthenticated(): boolean {
     if (!super.isAuthenticated()) {
       return false;

package/dist/templates/react-app/src/core/clientIoc/ClientIOCRegister.ts

@@ -6,16 +6,15 @@ import { themeConfig } from '@config/theme';
 import {
   ApiCatchPlugin,
   ApiMockPlugin,
-  RequestCommonPlugin,
   ThemeService
 } from '@qlover/corekit-bridge';
+import { RequestPlugin } from '@qlover/fe-corekit';
 import { I18nKeyErrorPlugin } from '@/base/cases/I18nKeyErrorPlugin';
 import { RequestStatusCatcher } from '@/base/cases/RequestStatusCatcher';
 import type { IocRegisterOptions } from '@/base/port/IOCInterface';
 import type { UserServiceInterface } from '@/base/port/UserServiceInterface';
 import { I18nService } from '@/base/services/I18nService';
 import { RouteService } from '@/base/services/RouteService';
-import { UserGatewayPlugin } from '@/base/services/UserGatewayPlugin';
 import { UserService } from '@/base/services/UserService';
 import { ExecutorPageBridge } from '@/uikit/bridges/ExecutorPageBridge';
 import { JSONStoragePageBridge } from '@/uikit/bridges/JSONStoragePageBridge';
@@ -95,9 +94,10 @@ export class ClientIOCRegister implements IOCRegisterInterface<
 
     ioc.bind(
       I.UserServiceInterface,
-      ioc
-        .get<UserServiceInterface>(UserService)
-        .use(new UserGatewayPlugin(routeService))
+      ioc.get<UserService>(UserService)
+      // TODO: use executor replace
+      // .use(new UserGatewayPlugin(routeService))
+      // .use(ioc.get(I.I18nKeyErrorPlugin))
     );
     ioc.bind(I.RequestCatcherInterface, ioc.get(RequestStatusCatcher));
     ioc.bind(I.ExecutorPageBridgeInterface, ioc.get(ExecutorPageBridge));
@@ -109,9 +109,8 @@ export class ClientIOCRegister implements IOCRegisterInterface<
     const { appConfig } = this.options;
     const logger = ioc.get<LoggerInterface>(I.Logger);
 
-    const feApiRequestCommonPlugin = new RequestCommonPlugin({
+    const feApiRequestCommonPlugin = new RequestPlugin({
       tokenPrefix: appConfig.openAiTokenPrefix,
-      requiredToken: true,
       token: () =>
         ioc.get<UserServiceInterface>(I.UserServiceInterface).getToken()
     });

package/dist/templates/react-app/src/main.tsx

@@ -2,7 +2,7 @@
 import 'reflect-metadata';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './App.tsx';
+import App from './App';
 import { BootstrapClient } from './core/bootstraps/BootstrapClient';
 import { clientIOC } from './core/clientIoc/ClientIOC';
 

package/dist/templates/react-app/src/pages/auth/LoginPage.tsx

@@ -1,6 +1,6 @@
 import { UserOutlined, LockOutlined, GoogleOutlined } from '@ant-design/icons';
 import { login18n } from '@config/i18n/login18n';
-import { IOCIdentifier } from '@config/IOCIdentifier';
+import { I } from '@config/IOCIdentifier';
 import { Form, Input, Button } from 'antd';
 import { useState } from 'react';
 import { LocaleLink } from '@/uikit/components/LocaleLink';
@@ -14,10 +14,10 @@ interface LoginFormData {
 
 export default function LoginPage() {
   const tt = useI18nInterface(login18n);
-  const userService = useIOC(IOCIdentifier.UserServiceInterface);
-  const AppConfig = useIOC(IOCIdentifier.AppConfig);
-  const routeService = useIOC(IOCIdentifier.RouteServiceInterface);
-  const logger = useIOC(IOCIdentifier.Logger);
+  const logger = useIOC(I.Logger);
+  const userService = useIOC(I.UserServiceInterface);
+  const AppConfig = useIOC(I.AppConfig);
+  const routeService = useIOC(I.RouteServiceInterface);
 
   const [loading, setLoading] = useState(false);
 

package/dist/templates/react-app/src/pages/base/ExecutorPage.tsx

@@ -277,7 +277,9 @@ export default function ExecutorPage() {
               <Input
                 placeholder={tt.enterUrl}
                 value={customUrl}
-                onChange={(e) => setCustomUrl(e.target.value)}
+                onChange={(e) =>
+                  setCustomUrl((e.target as HTMLInputElement).value)
+                }
                 className="flex-1"
               />
               <Select

package/dist/templates/react-app/src/pages/base/JSONStoragePage.tsx

@@ -74,7 +74,9 @@ export default function JSONStoragePage() {
                     type="number"
                     value={pageState.expireTime}
                     onChange={(e) =>
-                      pageBridge.changeExpireTime(Number(e.target.value))
+                      pageBridge.changeExpireTime(
+                        Number((e.target as HTMLInputElement).value)
+                      )
                     }
                     className="w-32"
                     min="1000"
@@ -111,7 +113,9 @@ export default function JSONStoragePage() {
                   type="number"
                   value={pageState.requestTimeout}
                   onChange={(e) =>
-                    pageBridge.changeRequestTimeout(Number(e.target.value))
+                    pageBridge.changeRequestTimeout(
+                      Number((e.target as HTMLInputElement).value)
+                    )
                   }
                   className="w-32"
                   min="1000"