Clean up context API

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}</${contextName}.Provider>;`;
     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 `}`;
     }

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 {

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}" >
       <QueryClientProvider client={queryClient}>
         <div>Your app goes here</div>
       </QueryClientProvider>