@bleedingdev/modern-js-create 3.4.0-ultramodern.0 → 3.4.0-ultramodern.10

package/README.md

@@ -75,13 +75,13 @@ the repo `tsgo:dts` flow. Run `pnpm --filter @modern-js/create test` when
 changing generator behavior; it includes a boundary test that scans generator
 sources, templates, and generated workspace output for compiler API imports.
 
-Generated app packages install the TypeScript 7 RC package line and use
-`@effect/tsgo` plus `@typescript/native-preview` as tooling for
-`pnpm typecheck`, but generated app/package source must not depend on compiler
-API internals. Existing compiler API tests in this package use the stable
-TypeScript 6 package. If a future AST utility is needed, keep it behind a
-dedicated compatibility module and test it against stable `typescript`, not
-native-preview internals.
+Generated app packages keep stable `typescript` for classic compiler consumers
+such as Module Federation DTS generation, and use `@effect/tsgo` plus
+`@typescript/native-preview` as tooling for `pnpm typecheck`. Generated
+app/package source must not depend on compiler API internals. Existing compiler
+API tests in this package use the stable TypeScript 6 package. If a future AST
+utility is needed, keep it behind a dedicated compatibility module and test it
+against stable `typescript`, not native-preview internals.
 
 Generated CI does not call the local aggregate. It runs format, lint,
 typecheck, skills, i18n boundary validation, contract validation, and build as

package/dist/cjs/ultramodern-workspace/add-vertical.cjs

@@ -143,6 +143,8 @@ function rewriteShellAppFiles(workspaceRoot, scope, packageSource, enableTailwin
     const shellHost = (0, external_descriptors_cjs_namespaceObject.createShellHost)(remotes);
     const publicWeb = (0, external_public_surface_cjs_namespaceObject.createPublicWebAppArtifacts)(shellHost);
     (0, external_fs_io_cjs_namespaceObject.writeJsonFile)(external_node_path_default().join(workspaceRoot, `${external_descriptors_cjs_namespaceObject.shellApp.directory}/package.json`), (0, external_package_json_cjs_namespaceObject.createAppPackage)(scope, shellHost, packageSource, enableTailwind, remotes));
+    (0, external_fs_io_cjs_namespaceObject.writeJsonFile)(external_node_path_default().join(workspaceRoot, `${external_descriptors_cjs_namespaceObject.shellApp.directory}/tsconfig.json`), (0, external_package_json_cjs_namespaceObject.createAppTsConfig)(shellHost, remotes));
+    (0, external_fs_io_cjs_namespaceObject.writeJsonFile)(external_node_path_default().join(workspaceRoot, `${external_descriptors_cjs_namespaceObject.shellApp.directory}/tsconfig.mf-types.json`), (0, external_package_json_cjs_namespaceObject.createAppMfTypesTsConfig)(shellHost));
     (0, external_fs_io_cjs_namespaceObject.writeFileReplacing)(workspaceRoot, `${external_descriptors_cjs_namespaceObject.shellApp.directory}/src/modern-app-env.d.ts`, (0, external_app_files_cjs_namespaceObject.createAppEnvDts)(shellHost, remotes));
     (0, external_fs_io_cjs_namespaceObject.writeFileReplacing)(workspaceRoot, publicWeb.jsonLdHelperFile.path, publicWeb.jsonLdHelperFile.content);
     (0, external_fs_io_cjs_namespaceObject.writeFileReplacing)(workspaceRoot, publicWeb.routeMetadataFile.path, publicWeb.routeMetadataFile.content);
@@ -483,6 +485,21 @@ function createDryRunJsonMutations(preflight, manifestUrl) {
             pointer: '/dependencies',
             description: `Wire shell dependencies for ${vertical.id}`
         },
+        {
+            path: 'tsconfig.json',
+            pointer: '/references',
+            description: `Add ${vertical.id} to the root TS-Go build graph`
+        },
+        {
+            path: `${external_descriptors_cjs_namespaceObject.shellApp.directory}/tsconfig.json`,
+            pointer: '/references',
+            description: `Add ${vertical.id} to the shell TS-Go project references`
+        },
+        {
+            path: `${external_descriptors_cjs_namespaceObject.shellApp.directory}/tsconfig.mf-types.json`,
+            pointer: '/include',
+            description: 'Keep shell Module Federation DTS compilation scoped'
+        },
         {
             path: external_descriptors_cjs_namespaceObject.GENERATED_CONTRACT_PATH,
             pointer: '/apps',
@@ -546,6 +563,13 @@ function addUltramodernVertical(options) {
     addShellZephyrDependency(options.workspaceRoot, scope, vertical);
     addShellWorkspaceDependency(options.workspaceRoot, scope, vertical);
     updateRootWorkspaceScripts(options.workspaceRoot, scope, packageSource, updatedVerticals);
+    (0, external_fs_io_cjs_namespaceObject.writeJsonFile)(external_node_path_default().join(options.workspaceRoot, 'tsconfig.json'), (0, external_package_json_cjs_namespaceObject.createRootTsConfig)([
+        {
+            ...external_descriptors_cjs_namespaceObject.shellApp,
+            verticalRefs: updatedVerticals.map((vertical)=>vertical.id)
+        },
+        ...updatedVerticals
+    ]));
     const afterFiles = (0, external_generation_result_cjs_namespaceObject.createFileSnapshot)(options.workspaceRoot);
     const { createdPaths, rewrittenPaths } = (0, external_generation_result_cjs_namespaceObject.diffFileSnapshots)(beforeFiles, afterFiles);
     const result = (0, external_generation_result_cjs_namespaceObject.createGenerationResult)({

package/dist/cjs/ultramodern-workspace/contracts.cjs

@@ -236,7 +236,7 @@ function createAppConfigContract(app) {
                 ],
                 default: '/'
             },
-            disableTsChecker: true,
+            disableTsChecker: false,
             distPath: {
                 html: './'
             },
@@ -595,8 +595,9 @@ function createAppGeneratedContract(scope, app, apps, enableTailwind) {
             } : {},
             exposes: Object.keys(app.exposes ?? {}),
             dts: {
+                compilerInstance: 'tsgo',
                 displayErrorInTerminal: true,
-                compilerInstance: 'tsgo'
+                tsConfigPath: './tsconfig.mf-types.json'
             },
             browserSafeExposesOnly: true,
             zephyrRspackPlugin: external_versions_cjs_namespaceObject.ZEPHYR_RSPACK_PLUGIN_VERSION
@@ -648,8 +649,8 @@ function createGeneratedContract(scope, apps = [
             toolchain: 'mise'
         },
         versions: {
-            typescript: external_versions_cjs_namespaceObject.TYPESCRIPT_VERSION,
-            typescript7Rc: external_versions_cjs_namespaceObject.TYPESCRIPT_7_VERSION,
+            typescript: external_versions_cjs_namespaceObject.TYPESCRIPT_NATIVE_PREVIEW_VERSION,
+            typescriptCompatibility: external_versions_cjs_namespaceObject.TYPESCRIPT_VERSION,
             typescriptNativePreview: external_versions_cjs_namespaceObject.TYPESCRIPT_NATIVE_PREVIEW_VERSION,
             moduleFederation: external_versions_cjs_namespaceObject.MODULE_FEDERATION_VERSION,
             tanstackRouter: external_versions_cjs_namespaceObject.TANSTACK_ROUTER_VERSION,
@@ -716,9 +717,11 @@ function createTemplateManifest(modernVersion, packageSource) {
                 'package.json',
                 'oxfmt.config.ts',
                 'oxlint.config.ts',
+                'patches/**',
                 'pnpm-workspace.yaml',
                 "scripts/**",
                 'topology/**',
+                'tsconfig.json',
                 'tsconfig.base.json'
             ],
             deniedPaths: [
@@ -783,6 +786,7 @@ function createTemplateManifest(modernVersion, packageSource) {
             expectedCommands: [
                 'mise install',
                 'pnpm install',
+                'pnpm run typecheck',
                 'pnpm run i18n:boundaries',
                 'pnpm run contract:check',
                 'pnpm run performance:readiness'

package/dist/cjs/ultramodern-workspace/demo-components.cjs

@@ -49,8 +49,7 @@ import { VerticalShowcase } from '../vertical-components';
 import { ultramodernUiMarker } from '../../ultramodern-build';
 
 export default function ShellHome() {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   return (
     <ShellFrame>
@@ -123,13 +122,14 @@ const loadRemoteComponent = (specifier: string) =>
 
 const createRemoteFallback = (specifier: string) =>
   ({ error }: { error: Error }) => {
-    const { i18nInstance } = useModernI18n();
-    const t = i18nInstance['t'].bind(i18nInstance);
+    const { t } = useModernI18n();
     const classification = classifyModuleFederationFallback(error);
+    const telemetryEntry =
+      typeof window === 'undefined' ? undefined : window.location.href;
     const telemetry = createModuleFederationFallbackTelemetry({
       appName: '${external_descriptors_cjs_namespaceObject.shellApp.id}',
       classification,
-      entry: typeof window === 'undefined' ? undefined : window.location.href,
+      ...(telemetryEntry === undefined ? {} : { entry: telemetryEntry }),
       error,
       eventName: 'mf.client.remote.fallback',
       exportName: 'default',
@@ -142,7 +142,7 @@ const createRemoteFallback = (specifier: string) =>
       void emitModuleFederationFallbackTelemetry({
         appName: telemetry.appName,
         classification,
-        entry: telemetry.entry,
+        ...(telemetry.entry === undefined ? {} : { entry: telemetry.entry }),
         error,
         eventName: telemetry.eventName,
         exportName: 'default',
@@ -151,7 +151,7 @@ const createRemoteFallback = (specifier: string) =>
         remote: specifier,
         status: 'degraded',
       });
-    }, [classification, error, specifier, telemetry]);
+    }, [classification, error, telemetry]);
 
     return <div className="${tw('rounded-xl border border-red-900/20 bg-red-50 px-4 py-3 text-sm font-semibold text-red-900')}" data-remote-error={error.name} {...toModuleFederationFallbackAttributes(telemetry)}>{t('shell.remoteUnavailable')}</div>;
   };
@@ -206,8 +206,7 @@ const createHydratedRemote =
 	${hydratedExports}
 
 	export const Header = () => {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   return (
     <header className="${tw('flex min-w-0 flex-wrap items-center gap-x-8 gap-y-2 md:flex-1')}" data-modern-boundary-id="${external_descriptors_cjs_namespaceObject.shellApp.mfName}" data-modern-mf-expose="shell/Header">
@@ -217,8 +216,7 @@ const createHydratedRemote =
 };
 
 export const StatusBadge = () => {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   return (
     <span className="${tw('inline-flex h-10 shrink-0 items-center justify-center rounded-full border border-stone-900/15 bg-white px-4 text-sm font-extrabold text-stone-950 shadow-lg shadow-stone-900/5')}">
@@ -228,8 +226,7 @@ export const StatusBadge = () => {
 };
 
 export const VerticalShowcase = () => {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   if (widgetCount === 0) {
     return (
@@ -296,8 +293,7 @@ import { ultramodernUiMarker } from '../../ultramodern-build';
 ` : '';
     return `${effectBffImport}
 export default function ${(0, external_naming_cjs_namespaceObject.toPascalCase)(app.id)}Home() {
-  const { i18nInstance, language, supportedLanguages } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { language, supportedLanguages, t } = useModernI18n();
 ${effectBffState}  return (
     <main className="${tw('min-h-screen bg-um-canvas px-4 py-6 text-um-foreground sm:px-8')}">
       <UltramodernRouteHead />
@@ -343,8 +339,7 @@ function createRemoteEntry(app) {
     return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 
 export default function ${(0, external_naming_cjs_namespaceObject.toPascalCase)(domain)}Route() {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   return (
     <section className="${tw('rounded-2xl bg-white/90 p-5 shadow-xl shadow-stone-900/10')}" data-modern-boundary-id="${app.mfName}" data-modern-mf-expose="./Route">
@@ -362,8 +357,7 @@ function createRemoteWidget(app) {
     return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 
 export default function ${componentName}() {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   return (
     <section className="${tw('rounded-2xl bg-white/90 p-5 shadow-xl shadow-stone-900/10')}" data-modern-boundary-id="${app.mfName}" data-modern-mf-expose="./Widget">
@@ -382,8 +376,7 @@ function createRemoteExposeComponent(app, expose) {
     return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 
 export default function ${componentName}() {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   return (
     <section className="${tw('rounded-2xl bg-white/90 p-5 shadow-xl shadow-stone-900/10')}" data-modern-boundary-id="${app.mfName}" data-modern-mf-expose="${expose}">

package/dist/cjs/ultramodern-workspace/descriptors.cjs

@@ -84,12 +84,12 @@ const sharedPackages = [
     {
         id: 'shared-contracts',
         directory: 'packages/shared-contracts',
-        description: 'Route, ownership, and topology contract placeholders.'
+        description: 'Generated route, ownership, and topology contracts.'
     },
     {
         id: 'shared-design-tokens',
         directory: 'packages/shared-design-tokens',
-        description: 'Design token placeholders consumed by shell and verticals.'
+        description: 'Generated design tokens consumed by shell and verticals.'
     }
 ];
 function createNeutralOwnership(id, tier = 'tier-2-vertical') {

package/dist/cjs/ultramodern-workspace/effect-api.cjs

@@ -88,27 +88,51 @@ function serviceHasCheckoutCartState(service) {
 function createCheckoutCartSharedSchemas(service) {
     if (!serviceHasCheckoutCartState(service)) return '';
     return `
-export const checkoutCartLineSchema = Schema.Struct({
+export interface CheckoutCartLine {
+  readonly sku: string;
+  readonly name: string;
+  readonly quantity: number;
+  readonly unitPriceCents: number;
+}
+
+export interface CheckoutCart {
+  readonly lines: readonly CheckoutCartLine[];
+  readonly subtotalCents: number;
+  readonly totalQuantity: number;
+}
+
+export interface CheckoutAddCartItemPayload {
+  readonly sku: string;
+  readonly name?: string;
+  readonly quantity: number;
+  readonly unitPriceCents?: number;
+}
+
+export interface CheckoutRemoveCartItemPayload {
+  readonly sku: string;
+}
+
+export const checkoutCartLineSchema: Schema.Codec<CheckoutCartLine> = Schema.Struct({
   sku: Schema.String,
   name: Schema.String,
   quantity: Schema.Finite,
   unitPriceCents: Schema.Finite,
 });
 
-export const checkoutCartSchema = Schema.Struct({
+export const checkoutCartSchema: Schema.Codec<CheckoutCart> = Schema.Struct({
   lines: Schema.Array(checkoutCartLineSchema),
   subtotalCents: Schema.Finite,
   totalQuantity: Schema.Finite,
 });
 
-export const checkoutAddCartItemPayloadSchema = Schema.Struct({
+export const checkoutAddCartItemPayloadSchema: Schema.Codec<CheckoutAddCartItemPayload> = Schema.Struct({
   sku: Schema.String,
   name: Schema.optional(Schema.String),
   quantity: Schema.Finite,
   unitPriceCents: Schema.optional(Schema.Finite),
 });
 
-export const checkoutRemoveCartItemPayloadSchema = Schema.Struct({
+export const checkoutRemoveCartItemPayloadSchema: Schema.Codec<CheckoutRemoveCartItemPayload> = Schema.Struct({
   sku: Schema.String,
 });
 `;
@@ -261,6 +285,7 @@ function createCheckoutCartClientExports(service) {
     const pascalStem = (0, external_naming_cjs_namespaceObject.toPascalCase)(stem);
     const clientOptionsName = `${pascalStem}ClientOptions`;
     const createClientName = `create${pascalStem}Client`;
+    const clientEffectTypeName = `${pascalStem}ClientEffect`;
     return `
 export interface CheckoutCartLine {
   sku: string;
@@ -284,7 +309,7 @@ export interface CheckoutAddCartItemInput {
 
 export const getCheckoutCart = (
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<CheckoutCart> =>
   ${createClientName}({
     ...options,
     operationContext:
@@ -296,7 +321,7 @@ export const getCheckoutCart = (
 export const addCheckoutCartItem = (
   payload: CheckoutAddCartItemInput,
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<CheckoutCart> =>
   ${createClientName}({
     ...options,
     operationContext:
@@ -310,7 +335,7 @@ export const addCheckoutCartItem = (
 export const removeCheckoutCartItem = (
   sku: string,
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<CheckoutCart> =>
   ${createClientName}({
     ...options,
     operationContext:
@@ -323,7 +348,7 @@ export const removeCheckoutCartItem = (
 
 export const clearCheckoutCart = (
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<CheckoutCart> =>
   ${createClientName}({
     ...options,
     operationContext:
@@ -354,12 +379,63 @@ function createEffectSharedApiContract(service) {
     const apiName = verticalEffectApiName(service);
     const groupName = verticalEffectGroupName(service);
     const stem = (0, external_descriptors_cjs_namespaceObject.effectApiStem)(service);
+    const pascalStem = (0, external_naming_cjs_namespaceObject.toPascalCase)(stem);
+    const markerType = `${pascalStem}Marker`;
+    const itemType = `${pascalStem}Item`;
+    const readinessType = `${pascalStem}Readiness`;
+    const createPayloadType = `${pascalStem}CreatePayload`;
+    const createResponseType = `${pascalStem}CreateResponse`;
+    const listResponseType = `${pascalStem}ListResponse`;
     const apiPrefix = (0, external_descriptors_cjs_namespaceObject.effectApiPrefix)(service);
     const checkoutCartSharedSchemas = createCheckoutCartSharedSchemas(service);
     const checkoutCartSharedSchemaSection = '' === checkoutCartSharedSchemas ? '' : `${checkoutCartSharedSchemas}\n`;
     const checkoutCartOperationContexts = createCheckoutCartOperationContexts(service).trimStart();
     const checkoutCartOperationContextEntries = '' === checkoutCartOperationContexts ? '' : `${checkoutCartOperationContexts}\n`;
-    return `export const ${markerSchemaExport} = Schema.Struct({
+    return `export interface ${markerType} {
+  readonly appId: string;
+  readonly build: string;
+  readonly deployProfile: string;
+  readonly packageName: string;
+  readonly surface: string;
+  readonly version: string;
+}
+
+export interface ${itemType} {
+  readonly id: string;
+  readonly marker: ${markerType};
+  readonly title: string;
+}
+
+export interface ${readinessType} {
+  readonly checks: {
+    readonly effectBff: 'ready';
+    readonly moduleFederation: 'ready';
+    readonly ssr: 'ready';
+    readonly translations: 'ready';
+  };
+  readonly marker: ${markerType};
+  readonly status: 'ready';
+  readonly versionSkew: 'none';
+}
+
+export interface ${createPayloadType} {
+  readonly title: string;
+}
+
+export interface ${listResponseType} {
+  readonly items: readonly ${itemType}[];
+}
+
+export interface ${createResponseType} {
+  readonly item: ${itemType};
+}
+
+export interface ${notFoundErrorExport} {
+  readonly _tag: '${notFoundErrorExport}';
+  readonly id: string;
+}
+
+export const ${markerSchemaExport}: Schema.Codec<${markerType}> = Schema.Struct({
   appId: Schema.String,
   build: Schema.String,
   deployProfile: Schema.String,
@@ -368,13 +444,13 @@ function createEffectSharedApiContract(service) {
   version: Schema.String,
 });
 
-export const ${schemaExport} = Schema.Struct({
+export const ${schemaExport}: Schema.Codec<${itemType}> = Schema.Struct({
   id: Schema.String,
   marker: ${markerSchemaExport},
   title: Schema.String,
 });
 
-export const ${readinessSchemaExport} = Schema.Struct({
+export const ${readinessSchemaExport}: Schema.Codec<${readinessType}> = Schema.Struct({
   checks: Schema.Struct({
     effectBff: Schema.Literal('ready'),
     moduleFederation: Schema.Literal('ready'),
@@ -386,18 +462,13 @@ export const ${readinessSchemaExport} = Schema.Struct({
   versionSkew: Schema.Literal('none'),
 });
 
-export const ${createPayloadSchemaExport} = Schema.Struct({
+export const ${createPayloadSchemaExport}: Schema.Codec<${createPayloadType}> = Schema.Struct({
   title: Schema.String,
 });
 
-${checkoutCartSharedSchemaSection}export class ${notFoundErrorExport} extends Schema.TaggedErrorClass<${notFoundErrorExport}>()(
-  '${notFoundErrorExport}',
-  {
-    id: Schema.String,
-  },
-) {}
-
-export const ${notFoundSchemaExport} = ${notFoundErrorExport}.pipe(
+${checkoutCartSharedSchemaSection}export const ${notFoundSchemaExport}: Schema.Codec<${notFoundErrorExport}> = Schema.TaggedStruct('${notFoundErrorExport}', {
+  id: Schema.String,
+}).pipe(
   HttpApiSchema.status(404),
 );
 
@@ -501,13 +572,20 @@ function createEffectServiceEntry(service, contractImportPath) {
   HttpApiBuilder,
   Layer,
 } from '@modern-js/plugin-bff/effect-edge';
-import { ultramodernApiMarker } from '../../src/ultramodern-build.ts';
+import type {
+  EffectBffDefinition,
+  EffectBffRuntime,
+  EffectRuntimeLayer,
+} from '@modern-js/plugin-bff/effect-edge';
+import { ultramodernApiMarker } from '../../shared/ultramodern-build.ts';
 import {
   ${apiExport},
   ${groupName}OperationContexts,
+} from '${contractImportPath}';
+import type {
   ${notFoundErrorExport},
+  OperationContext,
 } from '${contractImportPath}';
-import type { OperationContext } from '${contractImportPath}';
 
 const ${groupName}Items = [
   {
@@ -568,9 +646,13 @@ const ${groupName}Layer = HttpApiBuilder.group(
         const matchedItem = ${groupName}Items.find(
           candidate => candidate.id === params.id,
         );
+        const notFound: ${notFoundErrorExport} = {
+          _tag: '${notFoundErrorExport}',
+          id: params.id,
+        };
         const result =
           matchedItem === undefined
-            ? Effect.fail(new ${notFoundErrorExport}({ id: params.id }))
+            ? Effect.fail(notFound)
             : Effect.succeed(matchedItem);
 
         return result.pipe(
@@ -601,12 +683,15 @@ const ${groupName}Layer = HttpApiBuilder.group(
 
 const layer = HttpApiBuilder.layer(${apiExport}).pipe(
   Layer.provide(${groupName}Layer),
-);
+) satisfies EffectRuntimeLayer;
 
-export default defineEffectBff({
+const effectBff: EffectBffDefinition<typeof ${apiExport}, EffectRuntimeLayer> &
+  EffectBffRuntime<typeof ${apiExport}, EffectRuntimeLayer> = defineEffectBff({
   api: ${apiExport},
   layer,
 });
+
+export default effectBff;
 `;
 }
 function createEffectClient(service, contractImportPath) {
@@ -617,25 +702,71 @@ function createEffectClient(service, contractImportPath) {
     const singular = verticalEffectErrorStem(service);
     const clientOptionsName = `${(0, external_naming_cjs_namespaceObject.toPascalCase)(stem)}ClientOptions`;
     const createClientName = `create${(0, external_naming_cjs_namespaceObject.toPascalCase)(stem)}Client`;
+    const clientTypeName = `${(0, external_naming_cjs_namespaceObject.toPascalCase)(stem)}Client`;
+    const clientEffectTypeName = `${(0, external_naming_cjs_namespaceObject.toPascalCase)(stem)}ClientEffect`;
     const listName = `list${(0, external_naming_cjs_namespaceObject.toPascalCase)(stem)}`;
     const readinessName = `get${(0, external_naming_cjs_namespaceObject.toPascalCase)(stem)}Readiness`;
     const getName = `get${(0, external_naming_cjs_namespaceObject.toPascalCase)(singular)}`;
     const createName = `create${(0, external_naming_cjs_namespaceObject.toPascalCase)(singular)}`;
+    const notFoundErrorExport = verticalEffectNotFoundErrorExport(service);
+    const pascalStem = (0, external_naming_cjs_namespaceObject.toPascalCase)(stem);
+    const itemType = `${pascalStem}Item`;
+    const readinessType = `${pascalStem}Readiness`;
+    const createResponseType = `${pascalStem}CreateResponse`;
+    const listResponseType = `${pascalStem}ListResponse`;
     const checkoutCartClientExports = createCheckoutCartClientExports(service);
     return `import {
   Effect,
   makeEffectHttpApiClient,
   runEffectRequest,
 } from '@modern-js/plugin-bff/effect-client';
+import type {
+  HttpClientError,
+  HttpApi,
+  HttpApiClient,
+  HttpApiGroup,
+  Schema,
+} from '@modern-js/plugin-bff/effect-client';
 import {
   ${contractExport}ApiContract,
   ${apiExport},
   ${groupName}OperationContexts,
 } from '${contractImportPath}';
-import type { OperationContext } from '${contractImportPath}';
+import type {
+  ${createResponseType},
+  ${itemType},
+  ${listResponseType},
+  ${notFoundErrorExport},
+  OperationContext,
+  ${readinessType},
+} from '${contractImportPath}';
 
 export { Effect, runEffectRequest };
 
+type ${pascalStem}EffectGroups = typeof ${apiExport} extends HttpApi.HttpApi<
+  infer _ApiId,
+  infer Groups
+>
+  ? Groups
+  : never;
+
+export type ${clientTypeName} = HttpApiClient.Client<
+  Extract<${pascalStem}EffectGroups, HttpApiGroup.Any>,
+  never,
+  never
+>;
+
+export type ${pascalStem}ClientError =
+  | ${notFoundErrorExport}
+  | HttpClientError.HttpClientError
+  | Schema.SchemaError;
+
+export type ${clientEffectTypeName}<Success> = Effect.Effect<
+  Success,
+  ${pascalStem}ClientError,
+  never
+>;
+
 export interface ${clientOptionsName} {
   baseUrl?: string | URL;
   locale?: string;
@@ -645,7 +776,7 @@ export interface ${clientOptionsName} {
 
 export const ${createClientName} = (
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<${clientTypeName}> =>
   makeEffectHttpApiClient(${apiExport}, {
     baseUrl: options.baseUrl ?? ${contractExport}ApiContract.apiPrefix,
     requestContext: {
@@ -661,7 +792,7 @@ export const ${createClientName} = (
 
 export const ${listName} = (
   options: ${clientOptionsName} & { limit?: number } = {},
-) =>
+): ${clientEffectTypeName}<${listResponseType}> =>
   ${createClientName}({
     ...options,
     operationContext:
@@ -674,7 +805,7 @@ export const ${listName} = (
 
 export const ${readinessName} = (
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<${readinessType}> =>
   ${createClientName}({
     ...options,
     operationContext:
@@ -686,7 +817,7 @@ export const ${readinessName} = (
 export const ${getName} = (
   id: string,
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<${itemType}> =>
   ${createClientName}({
     ...options,
     operationContext:
@@ -698,7 +829,7 @@ export const ${getName} = (
 export const ${createName} = (
   title: string,
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<${createResponseType}> =>
   ${createClientName}({
     ...options,
     operationContext: