Theo's Typesafe Cult

TTC

Theo's Typesafe Cult

Join the community to ask questions about Theo's Typesafe Cult and get answers from other members.

Join

Best practices for rendering the version of your app

I have a React-TypeScript web app in which I'd like to render the current version at the top of the home page. What I'm thinking is that I could have a version.ts file with this:
export const APP_VERSION = "1.0.0"
export const APP_VERSION = "1.0.0"
and then when I make a commit, I increase that number. But I've never seen this being done in real world open source github projects. What's the best approach here?
Solution:
Bump on CI and get value on build

UploadThing randomly started failing this morning

Is anyone else experiencing something similar? I first noticed in my staging environment while testing. @uploadthing/react components are getting stuck in an infinite loading loop, the server kept pinging back "still uploading" or something like that. I can't get back to it now. Went down a small rabbit hole and am seeing the same error consistently across all my builds. I tried to redeploy the last successful build on Vercel (4 days ago) and it failed with the same error....
No description

T3 Middleware

Hello there, I was wondering if it is possible to use middleware.ts using the t3 stack (NextJS, tRPC, Drizzle and AuthJS v4). There are two session strategies, database sessions (t3 default) and JWT sessions. I read a lot and saw some videos but still not sure if it is possible. Maybe with the AuthJS v5 something change or idk....

Hear Ye, Hear Ye! A Call for Aid in the Realm of Codecraft: The Tale of the Missing Styles

Hello everyone, I'm working on creating an NPM package using Vite with React in library mode. I've configured Tailwind CSS in the package and added a few custom CSS classes. Everything seems to work fine when I run the project locally. However, when I publish the NPM package and install it in a new project, I run into an issue. The styles defined in the tailwind.css file are applied correctly to the components. But the Tailwind classes used directly within my SpaceButton.tsx component are not working at all....

Recommended way to prettyprint tRPC errors

Do you all have any preffered way/function to pretty print tRPC errors like zod?

What NoSQL databases are actually good?

As I understand, MongoDB is not rly a good idea due to scaling reasons (maybe others idk) I asked an AI and it answered this, what do you think?...
No description

How T3Stack env.js actually works?

I'm trying to figure out what kind of black magic that createEnv function does behind the curtains, when I'm running my application. The reason is that I'm having seed.ts at the root of my project, which I'm using to seed the database, by calling tsx seed.ts. Problem is, that if I import env.js into that seeder-file, it does not have env variables available. Same thing when I'm trying to call Encryption.encrypt() method from one of my lib-files, to encrypt some data, and that lib-file imports env.js, I get error that environmental variable are not set. Should I somehow load the .env file manually on tsx call, or what might I be missing?...

In Nextjs how do you set serachParams in middleware ?

currently in my middleware im trying to add a user agent viewport serachParam to requests as seen in the nextjs docs here : https://nextjs.org/docs/app/api-reference/functions/userAgent , however supabase my auth provider also has middleware to validate cookies seen here : https://www.youtube.com/watch?v=v6UvgfSIjQ0, is it possible to merge these two and have a response return with my serachParams
No description

Throttling calls to a server function in NextJS

I have a server function that can poll if a long-running event (Ethereum transaction being mined) has completed yet. The actual request checking the blockchain is obviously also async and can take a second or two. If someone hits the page when the transaction result hasn't already been stored in the db, their client will start calling a function on the server to check the status and update the db on success....

Frontend Design

Anyone has recommendations for resources on frontend design? eg when and how to sepearate different components, passing of data between components, where should data be fetched (page vs component) etc

Is there a way to turn of this prisma spam?

```ts atabase:db:generate: database:db:generate: Start using Prisma Client in Node.js (See: https://pris.ly/d/client) database:db:generate: database:db:generate: import { PrismaClient } from '@prisma/client'...
Solution:
--no-hint

React vs. Native Web Components

I'm a noob to the channel so digitally ๐Ÿ‘Š me if this is covered-ground. I have resisted learning FE frameworks like React in the hopes that native APIs (read web components) will reach a maturity where we won't need the additional mental/boilerplate overhead. From those with exp, are we getting close in 2024 or is React still light years ahead of native web components? I have perused things like StencilJs but haven't dove in too deeply....

Post Quantum Encryption

Does somebody here knows a good library to use if you want post quantum encryption for your messaging app? I looked at libsignal, the implementation from signal of the signal protocol but it seems like it's only providing the frontend functions for typescript and it's only designed for the use inside signal...

No env variables found with turbo v2.0.4 with t3-app

Everytime it builds it gives these errors: ``` web:build: $ next build web:build: :x: Invalid environment variables: {...
Solution:
adding it to the start script as well fixed it

Got error while signin

Hello these are the packages I am using 1. Trpc 2. Next Auth 3. Drizzle 4. PostgreSQL...

How does the cli works

Hello I want to customize the t3 app a little, so I want to make changes in cli too.

nextjs fetch into a global state

i am fetching a random word i whould like to use in my entire app. the fetching is happening on the initial get request for the URL (it is a hangman game). i am using Jotai for over things in this game app (got sudku going on and wanna add few more games). ...
No description

Best practices for typing a reusable button?

I have a React-TypeScript-Material UI app with a Button component but I'm not sure if what I'm doing is a good practice. Basically in the ButtonProps 4 out of 5 props are optional. Is this ok or should I structure the code in a different way? Perhaps not turning the button into a reusable component at all? ```js // src\components\shared\Button.tsx /** @jsxImportSource @emotion/react */...
Solution:
You can have something like this ```ts type ButtonProps = React.ComponentProps<"button"> & { leftIcon?: ReactElement<SVGSVGElement>;...

How to Call Hooks in sequence way

I'm utilizing Google Maps Address AutoComplete and I have two hooks. The first hook needs to work when the other hook is complete. ```javascript import { useJsApiLoader } from "@react-google-maps/api"; import usePlacesAutocomplete from "use-places-autocomplete";...

How to build Drizzle explicit types

Call me dumb, but I don't fully get how we can have explicit types that we can easily import in the various components of the application. I've worked few months with Prisma, and over there you have the engine that's able to generate all the types that your queries will generate and you can import them as needed. As far as I can see, Drizzle ORM does not do that. While I feel that what it does is still great, they provide you the type definition with all the props properly typed but you don't have a way to import them....
Next