Gary, el Pingüino Artefacto Posts

Gary, el Pingüino Artefacto

Explore posts from servers

TtRPC TTCTheo's Typesafe Cult XXata DTDrizzle Team

•Created by Gary, el Pingüino Artefacto on 10/14/2024 in #questions

Applying drizzle migrations with Hono

Hi, I'm trying to apply that migrations on the directory like this:

await migrate(drizzleDb, {
  migrationsFolder: "./src/databases/tenants/migrations",
})

await migrate(drizzleDb, {
  migrationsFolder: "./src/databases/tenants/migrations",
})

I'm using Nextjs, deployed on Vercel with a hono api. The path is /api/hono/tenants/create. But every time I get this error: Error: Can't find meta/_journal.json file at /var/task/.next/server/app/api/hono/[[...route]]/route.js:2467:42887 at qp (/var/task/.next/server/app/api/hono/[[...route]]/route.js:2467:43323) at /var/task/.next/server/app/api/hono/[[...route]]/route.js:2467:44022 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async o (/var/task/.next/server/chunks/636.js:67:10412) at async Function.P [as begin] (/var/task/.next/server/chunks/636.js:67:9981) at async qf (/var/task/.next/server/app/api/hono/[[...route]]/route.js:2467:43460) I have tried absolute urls, relative, using path.join, etc. Thanks for the help 😄

3 replies

TTCTheo's Typesafe Cult

•Created by Gary, el Pingüino Artefacto on 8/9/2024 in #questions

Extending React Markdown with any component

Hi, I'm trying to implement charts into the markdown langauge. Currently, I'm using Mermaid for some basic charts but I want to implement my own. For example:

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

This markdown code will render a pie chart using mermaid. How can I implement something to render my own react components? I know mermaid is open source and I could look into the code, but I want to first ask is someone knows an easier way. Also, I will be could to implement any react component because some cool functionally will be unlock.

2 replies

TTCTheo's Typesafe Cult

•Created by Gary, el Pingüino Artefacto on 7/31/2024 in #questions

Loading server components on the client

Have anyone tried loading server components in the client. Maybe something like this:

<ServerComponentLoader 
  Component={MyComponent}
  someRandomProp="213"
  anotherRandomProp={123}
/>

<ServerComponentLoader 
  Component={MyComponent}
  someRandomProp="213"
  anotherRandomProp={123}
/>

Or even with children:

<ServerComponentLoader 
  Component={CreatePostDialog}
  suggestedTitle="Some title"
>
  <Button>Create post</Button>
</ServerComponentLoader>

<ServerComponentLoader 
  Component={CreatePostDialog}
  suggestedTitle="Some title"
>
  <Button>Create post</Button>
</ServerComponentLoader>

2 replies

TTCTheo's Typesafe Cult

•Created by Gary, el Pingüino Artefacto on 2/20/2024 in #questions

React Grid Layout automatic detection

Hi. I'm working with React Grid Layout in a responsive way where I need to compute the correct layout based on some "type" of widget. Here is an example. Input:

[
  { id: "1", type: "simple-value" },
  { id: "2", type: "simple-value" },
  { id: "3", type: "simple-value" },
  { id: "4", type: "list" },
  { id: "5", type: "table" },
]

[
  { id: "1", type: "simple-value" },
  { id: "2", type: "simple-value" },
  { id: "3", type: "simple-value" },
  { id: "4", type: "list" },
  { id: "5", type: "table" },
]

Output:

{
  xs: [
    { w: 1, h: 1, x: 0, y: 0, i: "1" },
    { w: 1, h: 1, x: 0, y: 1, i: "2" },
    { w: 1, h: 1, x: 0, y: 2, i: "3" },
    { w: 1, h: 2, x: 0, y: 3, i: "4" },
    { w: 1, h: 2, x: 0, y: 5, i: "5" },
  ],
  sm: [
    { w: 1, h: 1, x: 0, y: 0, i: "1" },
    { w: 1, h: 1, x: 1, y: 0, i: "2" },
    { w: 1, h: 1, x: 0, y: 1, i: "3" },
    { w: 2, h: 1, x: 0, y: 2, i: "4" },
    { w: 1, h: 1, x: 1, y: 1, i: "5" },
  ],
  md: [
    { w: 1, h: 1, x: 0, y: 0, i: "1" },
    { w: 1, h: 1, x: 1, y: 0, i: "2" },
    { w: 1, h: 1, x: 2, y: 0, i: "3" },
    { w: 2, h: 1, x: 0, y: 1, i: "4" },
    { w: 1, h: 2, x: 2, y: 1, i: "5" },
  ],
  lg: [
    { w: 2, h: 1, x: 0, y: 0, i: "1" },
    { w: 2, h: 1, x: 2, y: 0, i: "2" },
    { w: 2, h: 1, x: 4, y: 0, i: "3" },
    { w: 4, h: 1, x: 0, y: 1, i: "4" },
    { w: 2, h: 2, x: 4, y: 1, i: "5" },
  ],
  xl: [
    { w: 3, h: 1, x: 0, y: 0, i: "1" },
    { w: 3, h: 1, x: 3, y: 0, i: "2" },
    { w: 3, h: 1, x: 6, y: 0, i: "3" },
    { w: 6, h: 1, x: 0, y: 1, i: "4" },
    { w: 3, h: 2, x: 6, y: 1, i: "5" },
  ],
  "2xl": [
    { w: 3, h: 1, x: 0, y: 0, i: "1" },
    { w: 3, h: 1, x: 3, y: 0, i: "2" },
    { w: 3, h: 2, x: 9, y: 0, i: "3" },
    { w: 9, h: 1, x: 0, y: 1, i: "4" },
    { w: 3, h: 1, x: 6, y: 0, i: "5" },
  ],
}

{
  xs: [
    { w: 1, h: 1, x: 0, y: 0, i: "1" },
    { w: 1, h: 1, x: 0, y: 1, i: "2" },
    { w: 1, h: 1, x: 0, y: 2, i: "3" },
    { w: 1, h: 2, x: 0, y: 3, i: "4" },
    { w: 1, h: 2, x: 0, y: 5, i: "5" },
  ],
  sm: [
    { w: 1, h: 1, x: 0, y: 0, i: "1" },
    { w: 1, h: 1, x: 1, y: 0, i: "2" },
    { w: 1, h: 1, x: 0, y: 1, i: "3" },
    { w: 2, h: 1, x: 0, y: 2, i: "4" },
    { w: 1, h: 1, x: 1, y: 1, i: "5" },
  ],
  md: [
    { w: 1, h: 1, x: 0, y: 0, i: "1" },
    { w: 1, h: 1, x: 1, y: 0, i: "2" },
    { w: 1, h: 1, x: 2, y: 0, i: "3" },
    { w: 2, h: 1, x: 0, y: 1, i: "4" },
    { w: 1, h: 2, x: 2, y: 1, i: "5" },
  ],
  lg: [
    { w: 2, h: 1, x: 0, y: 0, i: "1" },
    { w: 2, h: 1, x: 2, y: 0, i: "2" },
    { w: 2, h: 1, x: 4, y: 0, i: "3" },
    { w: 4, h: 1, x: 0, y: 1, i: "4" },
    { w: 2, h: 2, x: 4, y: 1, i: "5" },
  ],
  xl: [
    { w: 3, h: 1, x: 0, y: 0, i: "1" },
    { w: 3, h: 1, x: 3, y: 0, i: "2" },
    { w: 3, h: 1, x: 6, y: 0, i: "3" },
    { w: 6, h: 1, x: 0, y: 1, i: "4" },
    { w: 3, h: 2, x: 6, y: 1, i: "5" },
  ],
  "2xl": [
    { w: 3, h: 1, x: 0, y: 0, i: "1" },
    { w: 3, h: 1, x: 3, y: 0, i: "2" },
    { w: 3, h: 2, x: 9, y: 0, i: "3" },
    { w: 9, h: 1, x: 0, y: 1, i: "4" },
    { w: 3, h: 1, x: 6, y: 0, i: "5" },
  ],
}

5 replies

TTCTheo's Typesafe Cult

•Created by Gary, el Pingüino Artefacto on 1/13/2024 in #questions

Vercel stream keep alive???

I just found this git repo for publishing messages with NextJS and Upstash and I got some questions. https://github.com/rishi-raj-jain/upstash-nextjs-publish-messages-with-sse-example/blob/master/app/api/stream/route.js

// Can be 'nodejs', but Vercel recommends using 'edge'
export const runtime = 'nodejs'

// Prevents this route's response from being cached
export const dynamic = 'force-dynamic'

// Use ioredis to subscribe
import Redis from 'ioredis'

// Define the key to listen and publish messages to
const setKey = 'posts'

// Create a redis subscriber
const redisSubscriber = new Redis(process.env.UPSTASH_REDIS_URL)

export async function GET() {
  const encoder = new TextEncoder()
  // Create a stream
  const customReadable = new ReadableStream({
    start(controller) {
      // Subscribe to Redis updates for the key: "posts"
      // In case of any error, just log it
      redisSubscriber.subscribe(setKey, (err) => {
        if (err) console.log(err)
      })
      // Listen for new posts from Redis
      redisSubscriber.on('message', (channel, message) => {
        // Send data with the response in the SSE format
        // Only send data when the channel message is reeived is same as the message is published to
        if (channel === setKey) controller.enqueue(encoder.encode(`data: ${message}\n\n`))
      })
    },
  })
  // Return the stream and try to keep the connection alive
  return new Response(customReadable, {
    // Set headers for Server-Sent Events (SSE) / stream from the server
    headers: { 'Content-Type': 'text/event-stream; charset=utf-8', Connection: 'keep-alive', 'Cache-Control': 'no-cache, no-transform', 'Content-Encoding': 'none' },
  })
}

// Can be 'nodejs', but Vercel recommends using 'edge'
export const runtime = 'nodejs'

// Prevents this route's response from being cached
export const dynamic = 'force-dynamic'

// Use ioredis to subscribe
import Redis from 'ioredis'

// Define the key to listen and publish messages to
const setKey = 'posts'

// Create a redis subscriber
const redisSubscriber = new Redis(process.env.UPSTASH_REDIS_URL)

export async function GET() {
  const encoder = new TextEncoder()
  // Create a stream
  const customReadable = new ReadableStream({
    start(controller) {
      // Subscribe to Redis updates for the key: "posts"
      // In case of any error, just log it
      redisSubscriber.subscribe(setKey, (err) => {
        if (err) console.log(err)
      })
      // Listen for new posts from Redis
      redisSubscriber.on('message', (channel, message) => {
        // Send data with the response in the SSE format
        // Only send data when the channel message is reeived is same as the message is published to
        if (channel === setKey) controller.enqueue(encoder.encode(`data: ${message}\n\n`))
      })
    },
  })
  // Return the stream and try to keep the connection alive
  return new Response(customReadable, {
    // Set headers for Server-Sent Events (SSE) / stream from the server
    headers: { 'Content-Type': 'text/event-stream; charset=utf-8', Connection: 'keep-alive', 'Cache-Control': 'no-cache, no-transform', 'Content-Encoding': 'none' },
  })
}

Isn't this going to timeout or use a shit amount of function execution? What happend when deploy to the edge? Does this even work without the bill going to the moon?

2 replies

Gaming

Programming