HeyItsFinn Posts - Answer Overflow

HeyItsFinn

Explore posts from servers

•Created by HeyItsFinn on 1/5/2025 in #help

Confused by recommendation to compile Hono App and Client

My question is specifically regarding this section of the documentation https://hono.dev/docs/guides/rpc#compile-your-code-before-using-it-recommended I want to compile the types for my Hono client to take some of the workload off TSServer and utilise TSC, and because the VSCode extension for SvelteKit is incorrectly typing the responses returned from the client. I have set up a Deno task and a tsconfig to run tsc on this code:

// #region Imports

/*
    Import to get environment variables.
    Only get shared environment variables or this client will not work and could 
    be unsafe.
*/
import env from "@/env.ts"

// Create Hono client
import { hc } from "hono/client"


// Import types
import type { App } from "~db-api/server/src/lib/create-app.ts"

// #endregion Imports



/*
    Create a mock client to speed up the TypeScript language server

    Trick from the Hono docs: 
    https://hono.dev/docs/guides/rpc#compile-your-code-before-using-it-recommended
*/
const mockClient = hc<App>("")
export type Client = typeof mockClient


// Subroutine to create a client for this API
export const createApiClient = (): Client => {
    return hc<App>(`http://localhost:${env.DATABASE_API_PORT}`)
}

// #region Imports

/*
    Import to get environment variables.
    Only get shared environment variables or this client will not work and could 
    be unsafe.
*/
import env from "@/env.ts"

// Create Hono client
import { hc } from "hono/client"


// Import types
import type { App } from "~db-api/server/src/lib/create-app.ts"

// #endregion Imports



/*
    Create a mock client to speed up the TypeScript language server

    Trick from the Hono docs: 
    https://hono.dev/docs/guides/rpc#compile-your-code-before-using-it-recommended
*/
const mockClient = hc<App>("")
export type Client = typeof mockClient


// Subroutine to create a client for this API
export const createApiClient = (): Client => {
    return hc<App>(`http://localhost:${env.DATABASE_API_PORT}`)
}

Into a folder located relatively at "../dist". But how do I get TSServer to use the types output in this folder? Can someone share their implementation?

1 replies

KPCKevin Powell - Community

•Created by HeyItsFinn on 8/2/2023 in #front-end

"transform: translateZ" not working as intended even when "transform-style: preserve-3d" is set

I'm having difficulties following Kevin's "3D tilting card Effect..." tutorial, I have a container that follows the mouse perfectly but I want the children of the container to have a translateZ set so they look like they are hovering above the container, the problem I am having is that, even when "transform-style: preserve-3d" is set on the container, the translateZ property on the children is not working as intended, children just seem to scale up. I have a layout comparable to this in my main svelte file

<div class="container">
    <div class="child">
        <div class="sub-child"/>
        <div class="sub-child"/>
    </div>
    <div class="child"/>
    <div class="child"/>
</div>

<div class="container">
    <div class="child">
        <div class="sub-child"/>
        <div class="sub-child"/>
    </div>
    <div class="child"/>
    <div class="child"/>
</div>

and this is the relevant sass

.container {
    transform-style: preserve-3d;
    perspective: 5000px;
    transform: rotateX(var(--rotateY)) rotateY(var(--rotateX)) translateZ(0px);

    * {
        transform-style: preserve-3d;
        transform: translateZ(50px)
    }
}

.container {
    transform-style: preserve-3d;
    perspective: 5000px;
    transform: rotateX(var(--rotateY)) rotateY(var(--rotateX)) translateZ(0px);

    * {
        transform-style: preserve-3d;
        transform: translateZ(50px)
    }
}

Any ideas are appreciated, thank you.

27 replies

Gaming

Programming