diff --git a/src/context-file.ts b/src/context-file.ts index 375f3de..523a723 100644 --- a/src/context-file.ts +++ b/src/context-file.ts @@ -32,14 +32,16 @@ export class ContextFile extends ModuleBuilder { const contextPropsName = pascal(`${contextName}_props`); const providerName = this.nameFactory.buildProviderName(); - yield `export interface ${contextPropsName} { fetch: ${FetchLike()}; options: ${OptionsType()}; }`; + yield `export interface ${contextPropsName} extends ${OptionsType()} { fetch?: ${FetchLike()}; }`; yield `const ${contextName} = ${createContext()}<${contextPropsName} | undefined>( undefined );`; yield ``; - yield `export const ${providerName}: ${FC()}<${PropsWithChildren()}<${contextPropsName}>> = ({ children, fetch, options }) => {`; - yield ` const value = ${useMemo()}(() => ({ fetch, options }), [fetch, options.mapUnhandledException, options.mapValidationError, options.root]);`; + yield `export const ${providerName}: ${FC()}<${PropsWithChildren()}<${contextPropsName}>> = ({ children, ...props }) => {`; + yield ` const value = ${useMemo()}(() => ({ ...props }), [props.fetch, props.mapUnhandledException, props.mapValidationError, props.root]);`; yield ` return <${contextName}.Provider value={value}>{children};`; yield `};`; - for (const int of this.service.interfaces) { + for (const int of [...this.service.interfaces].sort((a, b) => + a.name.value.localeCompare(b.name.value), + )) { const hookName = this.nameFactory.buildServiceHookName(int); const localName = this.nameFactory.buildServiceName(int); const interfaceName = pascal(localName); @@ -51,7 +53,9 @@ export class ContextFile extends ModuleBuilder { yield ` if (!context) { throw new Error('${hookName} must be used within a ${providerName}'); }`; yield ` const ${localName}: ${this.types.type( interfaceName, - )} = new ${this.client.fn(className)}(context.fetch, context.options);`; + )} = new ${this.client.fn( + className, + )}(context.fetch ?? window.fetch.bind(window), context);`; yield ` return ${localName};`; yield `}`; } diff --git a/src/name-factory.ts b/src/name-factory.ts index c053fcd..9d0132b 100644 --- a/src/name-factory.ts +++ b/src/name-factory.ts @@ -9,13 +9,11 @@ export class NameFactory { ) {} buildContextName(): string { - return pascal(`${this.service.title.value}_client_context`); + return pascal(`${this.service.title.value}_context`); } buildProviderName(): string { - return pascal( - `${this.service.title.value}_provider`, - ); + return pascal(`${this.service.title.value}_provider`); } buildQueryOptionsName(method: Method): string { diff --git a/src/readme-file.ts b/src/readme-file.ts index d163cc4..c245b7f 100644 --- a/src/readme-file.ts +++ b/src/readme-file.ts @@ -162,8 +162,9 @@ import { ${providerName} } from '${contextImportPath}'; export const App = () => { const queryClient = new QueryClient(); + return ( - <${providerName} fetch={window.fetch.bind(window)} options={{ root: '/v${this.service.majorVersion.value}' }}> + <${providerName} root="/v${this.service.majorVersion.value}" >
Your app goes here