Release Candidate - 0.2

.github/FUNDING.yml

@@ -1 +1 @@
-github: [skonves]
+github: [basketry]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basketry/react-query",
-  "version": "0.0.0",
+  "version": "0.2.0-rc.0",
   "description": "Basketry generator for generating Typescript interfaces",
   "main": "./lib/index.js",
   "scripts": {
@@ -31,7 +31,8 @@
   "bugs": {
     "url": "https://github.com/basketry/react-query/issues"
   },
-  "homepage": "https://github.com/basketry/react-query#readme",
+  "homepage": "https://basketry.io/docs/components/@basketry/react-query",
+  "funding": "https://github.com/sponsors/basketry",
   "devDependencies": {
     "@basketry/dotfiles": "^1.1.0",
     "@types/jest": "^27.4.0",
@@ -50,8 +51,8 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@basketry/typescript": "^0.1.2",
-    "basketry": "^0.1.2",
+    "@basketry/typescript": "^0.2.0",
+    "basketry": "^0.2.0",
     "case": "^1.6.3",
     "pluralize": "^8.0.0",
     "prettier": "^2.5.1"

src/context-file.ts

@@ -1,9 +1,14 @@
 import { camel, pascal } from 'case';
 import { ModuleBuilder } from './module-builder';
 import { ImportBuilder } from './import-builder';
+import { NameFactory } from './name-factory';
 
 export class ContextFile extends ModuleBuilder {
-  private readonly react = new ImportBuilder('react');
+  private readonly nameFactory = new NameFactory(this.service, this.options);
+  private readonly react = new ImportBuilder(
+    'react',
+    this.options?.reactQuery?.reactImport ? 'React' : undefined,
+  );
   private readonly client = new ImportBuilder(
     this.options?.reactQuery?.clientModule ?? '../http-client',
   );
@@ -23,26 +28,34 @@ export class ContextFile extends ModuleBuilder {
     const FetchLike = () => this.client.type('FetchLike');
     const OptionsType = () => this.client.type(optionsName);
 
-    yield `export interface ClientContextProps { fetch: ${FetchLike()}; options: ${OptionsType()}; }`;
-    yield `const ClientContext = ${createContext()}<ClientContextProps | undefined>( undefined );`;
+    const contextName = this.nameFactory.buildContextName();
+    const contextPropsName = pascal(`${contextName}_props`);
+    const providerName = this.nameFactory.buildProviderName();
+
+    yield `export interface ${contextPropsName} extends ${OptionsType()} { fetch?: ${FetchLike()}; }`;
+    yield `const ${contextName} = ${createContext()}<${contextPropsName} | undefined>( undefined );`;
     yield ``;
-    yield `export const ClientProvider: ${FC()}<${PropsWithChildren()}<ClientContextProps>> = ({ children, fetch, options }) => {`;
-    yield `  const value = ${useMemo()}(() => ({ fetch, options }), [fetch, options.mapUnhandledException, options.mapValidationError, options.root]);`;
-    yield `  return <ClientContext.Provider value={value}>{children}</ClientContext.Provider>;`;
+    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) {
-      const hookName = camel(`use_${int.name.value}_service`);
-      const localName = camel(`${int.name.value}_service`);
-      const interfaceName = pascal(`${int.name.value}_service`);
+    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);
       const className = pascal(`http_${int.name.value}_service`);
 
       yield ``;
       yield `export const ${hookName} = () => {`;
-      yield `  const context = ${useContext()}(ClientContext);`;
-      yield `  if (!context) { throw new Error('${hookName} must be used within a ClientProvider'); }`;
+      yield `  const context = ${useContext()}(${contextName});`;
+      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 `}`;
     }