JustUseFirefox
JustUseFirefox
Explore posts from servers
NNuxtTtRPCHHono
PostsComments
HHono
Created by JustUseFirefox on 9/23/2024 in #help
RPC type error - Unable to interop
Repro repo: https://codeberg.org/Dreamboat9222/ioMonorepo-Edgedb-Hono-Svelte In a monorepo, I have hono api in one package, and the ui (Svelte) in another and use EdgeDB as the database. It was working a couple of days ago, but I lost all intellisense abilities for 4 days so I was basically coding inside notepad 😂 (The issue is now fixed), but since then this stopped working. I also posted on the edgedb server, but I didn't receive any reply yet. Posting here in case someone have an idea on what is going wrong. Inside hono if I remove the database from context the error disappear: 
app.use(async (c, next) => {
  c.set('dbClient', createClient());
  c.set('e', e);
  await next();
});
app.use(async (c, next) => {
  c.set('dbClient', createClient());
  c.set('e', e);
  await next();
});
In svelte I import this to make API queries: 
import { type AppRouter } from "@repo/api-hono"
import { hc } from 'hono/client'

export const hono = hc<AppRouter>(API_ENDPOINT, {
    init: {
        credentials: 'include'
    }
});
import { type AppRouter } from "@repo/api-hono"
import { hc } from 'hono/client'

export const hono = hc<AppRouter>(API_ENDPOINT, {
    init: {
        credentials: 'include'
    }
});
But for some reason, when I try to load the UI, it throws Unable to interop export * from "edgedb/dist/reflection/index.js" in ...Monorepo/dbschema/edgeql-js/reflection.mts, this may lose module exports. Please export "edgedb/dist/reflection/index.js" as ESM or use named exports instead, e.g. export { A, B } from "edgedb/dist/reflection/index.js" Removing import { type AppRouter } from "@repo/api-hono" and the type next to hc removes the error, but then I lose all types for my API calls. Edgedb types are generated with bunx @edgedb/generate edgeql-js --target esm (I tried mts too, same error) Inside the browser, the following error appear: TypeError: $.StrictMap is not a constructor` - I removed all node_modules folders and reinstalled the deps - I removed dbschema/edgeql-js and regenerated the types - I double-checked tsconfig files but didn't spot anything, but I'm no specialist. Any idea please ? 😰
6 replies
HHono
Created by JustUseFirefox on 9/20/2024 in #help
How to pass and validate cookies (server<>server) ? (RPC)
I use Sveltekit and hono as an external API. Most requests coming from the UI are done through XHR, but some requests (like token validation) is done from sveltekit server-side to hono api. - When the user logs in, a cookie is set on the client (secure, lax). - When the user close and re-open the site, the token is validated with a server hook. Sveltekit sees the cookies and make a request to hono, but hono doesn't see the cookies (obviously). I don't want to store too much information in localStorage, so a page refresh require token decryption. I'm looking for a way to pass down those cookies from svelte server to hono api, but that endpoint might also be called from a browser or something, so for security reason I don't want to use json to pass the data preferably. Cookies is the way to go here. Validator: 
    validator('cookie', async (value, c) => {
      const body = value;
      console.log('BODY', value);

      const parsed = authnLoginWithTokenCookieSchema.safeParse(body);
      if (!parsed.success) {
        return c.json(
          {
`            error: parsed.error`
          },
          401
        );
      }
      // TODO * Check IP ban, Validate token, validate data, validate blocklist
      return {
        body: parsed.data
      };
    }),
    validator('cookie', async (value, c) => {
      const body = value;
      console.log('BODY', value);

      const parsed = authnLoginWithTokenCookieSchema.safeParse(body);
      if (!parsed.success) {
        return c.json(
          {
`            error: parsed.error`
          },
          401
        );
      }
      // TODO * Check IP ban, Validate token, validate data, validate blocklist
      return {
        body: parsed.data
      };
    }),
Client call: 
    const validateToken = await hono.auth.withToken
        .$post({
            cookie: {
                body: {
                    /**
                     * Type '{}' is not assignable to type 'string'.ts(2322)
                     * The expected type comes from property 'body' which is declared here on type '{ body: string; }'
                     */
                }
            }
        })
        .then((r) => r.json());
    const validateToken = await hono.auth.withToken
        .$post({
            cookie: {
                body: {
                    /**
                     * Type '{}' is not assignable to type 'string'.ts(2322)
                     * The expected type comes from property 'body' which is declared here on type '{ body: string; }'
                     */
                }
            }
        })
        .then((r) => r.json());
6 replies
HHono
Created by JustUseFirefox on 9/11/2024 in #help
How to use Validator ? Context is not finalized
As soon as I try to use validator, Hono complains. api-hono:dev: error: Context is not finalized. Did you forget to return a Response object or await next()? 
app.post(
  '/',
  validator('form', (value, c) => {
    console.log("VALIDATOR")

    const body = value['body'];
    // if (!body || typeof body !== 'string') {
    //   return c.text('Invalid!', 400);
    // }

    // const parsed = customerFormSchema.safeParse(body);
    // if (!parsed.success) {
    //   console.log(401)
    //   return c.text('Invalid!', 401);
    // }
    // // parsed.data for body;

    return {
      body
    };
  }),
...
app.post(
  '/',
  validator('form', (value, c) => {
    console.log("VALIDATOR")

    const body = value['body'];
    // if (!body || typeof body !== 'string') {
    //   return c.text('Invalid!', 400);
    // }

    // const parsed = customerFormSchema.safeParse(body);
    // if (!parsed.success) {
    //   console.log(401)
    //   return c.text('Invalid!', 401);
    // }
    // // parsed.data for body;

    return {
      body
    };
  }),
...
Any idea? :\ EDIT: I'm using Superforms to send the request. Devtool says the data it is indeed Form Data. If I replace form with json, it doesnt throw the error, but the value is empty
16 replies
HHono
Created by JustUseFirefox on 9/8/2024 in #help
Looking for demo repo on how to implement tests
Hey there, Is there a demo repository out there that contain tests ? I'm looking for which command to put in my package.json, and some basic exemples on how to test routes, etc. Thanks!
8 replies
HHono
Created by JustUseFirefox on 7/15/2024 in #help
How to upload a file and track it's progress on the client-side?
I send a file with the following function: 
const uploadFile = async (thatFile) => {

        // Use a custom TransformStream to track upload progress
        const progressTrackingStream = new TransformStream({
            transform(chunk, controller) {
                controller.enqueue(chunk);
                bytesUploaded += chunk.byteLength;
                thatFile.uploaded += chunk.byteLength;
            },
            flush(controller) {
                console.log('completed stream');
            }
        });

        const response = await fetch("/api/upload", {
            method: "POST",
            headers: {
                "Content-Type": "application/octet-stream"
            },
            body: thatFile.file.stream().pipeThrough(progressTrackingStream),
            
        });

        const json = await response.json();
        console.log(json)
    };
const uploadFile = async (thatFile) => {

        // Use a custom TransformStream to track upload progress
        const progressTrackingStream = new TransformStream({
            transform(chunk, controller) {
                controller.enqueue(chunk);
                bytesUploaded += chunk.byteLength;
                thatFile.uploaded += chunk.byteLength;
            },
            flush(controller) {
                console.log('completed stream');
            }
        });

        const response = await fetch("/api/upload", {
            method: "POST",
            headers: {
                "Content-Type": "application/octet-stream"
            },
            body: thatFile.file.stream().pipeThrough(progressTrackingStream),
            
        });

        const json = await response.json();
        console.log(json)
    };
I'm unsure how I can get the file on the api side and write it to disk, or delete the temp file if the upload is aborted. Any tips? 😇
1 replies
HHono
Created by JustUseFirefox on 5/19/2024 in #help
Is it safe to store user data with set/get?
I read (https://github.com/honojs/hono/issues/585#issuecomment-1826189093) that context state can be shared if the request is handled by the same worker. Is it safe to store user/session data with set/get?
9 replies