Hono•7mo ago

Importing AppType to client defaults output to any types

Hi, I just started using Hono yesterday and I'm loving it, but I'm facing an issue where, when I import AppType to the client, the types for output default to the Any type. I'm currently stumped on why this happens. Client src: /packages/frontend/src/lib/apis/images/index.ts

import type { AppType } from "@tavern/functions/src/stableDiffusion";
import { hc } from "hono/client";
import { Resource } from "sst";

const client = hc<AppType>(Resource.StableDiffusion.url);

export const getImageGenerationModels = async () => {
  let error = "";
  const res = await client.models
    .$get()
    .then(async (res) => {
      if (!res.ok) throw await res.json();
      return res.json();
    })
    .catch((err) => {
      console.log(err);
      if ("detail" in err) {
        error = err.detail;
      } else {
        error = "Server connection failed";
      }
      return null;
    });
  if (error) {
    throw error;
  }
  return res;
};

import type { AppType } from "@tavern/functions/src/stableDiffusion";
import { hc } from "hono/client";
import { Resource } from "sst";

const client = hc<AppType>(Resource.StableDiffusion.url);

export const getImageGenerationModels = async () => {
  let error = "";
  const res = await client.models
    .$get()
    .then(async (res) => {
      if (!res.ok) throw await res.json();
      return res.json();
    })
    .catch((err) => {
      console.log(err);
      if ("detail" in err) {
        error = err.detail;
      } else {
        error = "Server connection failed";
      }
      return null;
    });
  if (error) {
    throw error;
  }
  return res;
};

3 Replies

DamianOP•7mo ago

Server src: /packages/functions/src/stableDiffusion.ts

import { Hono } from "hono";
import { handle } from "hono/aws-lambda";
import {
  type Model,
  type Samplers,
  AUTOMATIC1111_BASE_URL,
} from "@tavern/core/stable-diffusion";

const app = new Hono();

const routes = app
  .get("/models", async (c) => {
    try {
      const response = await fetch(
        `${AUTOMATIC1111_BASE_URL}/sdapi/v1/sd-models`
      );
      const data = await response.json();

      const models: Model[] = data as Model[];

      const formattedModels = models.map((model) => ({
        id: model.title,
        name: model.model_name,
      }));

      return c.json(formattedModels, 200);
    } catch (e) {
      console.error(e);
      return c.json({ error: "Failed to Fetch Models" }, 500);
    }
  })
  .get("/samplers", async (c) => {
    try {
      const response = await fetch(
        `${AUTOMATIC1111_BASE_URL}/sdapi/v1/samplers`
      );

      const data = await response.json();

      const samplers: Samplers[] = data as Samplers[];
      return c.json({ samplers }, 200);
    } catch (e) {
      console.error(e);
      return c.json({ error: "Failed to Fetch Samplers" }, 500);
    }
  });

export type AppType = typeof routes;

export const handler = handle(app);

import { Hono } from "hono";
import { handle } from "hono/aws-lambda";
import {
  type Model,
  type Samplers,
  AUTOMATIC1111_BASE_URL,
} from "@tavern/core/stable-diffusion";

const app = new Hono();

const routes = app
  .get("/models", async (c) => {
    try {
      const response = await fetch(
        `${AUTOMATIC1111_BASE_URL}/sdapi/v1/sd-models`
      );
      const data = await response.json();

      const models: Model[] = data as Model[];

      const formattedModels = models.map((model) => ({
        id: model.title,
        name: model.model_name,
      }));

      return c.json(formattedModels, 200);
    } catch (e) {
      console.error(e);
      return c.json({ error: "Failed to Fetch Models" }, 500);
    }
  })
  .get("/samplers", async (c) => {
    try {
      const response = await fetch(
        `${AUTOMATIC1111_BASE_URL}/sdapi/v1/samplers`
      );

      const data = await response.json();

      const samplers: Samplers[] = data as Samplers[];
      return c.json({ samplers }, 200);
    } catch (e) {
      console.error(e);
      return c.json({ error: "Failed to Fetch Samplers" }, 500);
    }
  });

export type AppType = typeof routes;

export const handler = handle(app);

Server tsconfig.json

{ 
  "extends": "@tsconfig/node20/tsconfig.json",
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "Bundler"
  }
}

{ 
  "extends": "@tsconfig/node20/tsconfig.json",
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "Bundler"
  }
}

Client tsconfig.json

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
  }
}

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
  }
}

Artifex•6mo ago

Are you in a monorepo? composite: true is needed and moduleResolution to "node" so you can directly import the type

Nxia618•6mo ago

did you ever fix this? nvm, solved by fixing package.json to do "core": "workspace:" on internal dep

Gaming

Programming

Importing AppType to client defaults output to any types