maxtreme Posts - Answer Overflow

maxtreme

•Created by maxtreme on 12/1/2023 in #questions

Typesafe assets

Hi everyone, I guess we're all on a quest to typesafe everything. I'm currently thinking of moving to https://github.com/ethanniser/next-typesafe-url for routing in my Next.js app instead of my custom implementation. That got me thinking: is there maybe a webpack plugin or a script for making types (union of strings in this instance) for /public directory? Thanks!

1 replies

TTCTheo's Typesafe Cult

•Created by maxtreme on 3/24/2023 in #questions

Rendering function vs variable assignment

Hey everyone, I'm wondering if anyone knows whether there's a difference between having a rendering function and variable assignment. To have a better understanding of problem imagine a scenario where depending on some value You need to render an icon. You create a map where keys are the values and keys' values are icons. This can be done in two ways. First with variable assignment:

const map: Record<string, ReactNode> = {
  success: <SuccessIcon />
  error: <ErrorIcon />
}
const Status = (props) => <>{map[props.status]}</>

const map: Record<string, ReactNode> = {
  success: <SuccessIcon />
  error: <ErrorIcon />
}
const Status = (props) => <>{map[props.status]}</>

And second with rendering functions:

const map: Record<string, () => JSX.Element> = {
  success: () => <SuccessIcon />
  error: () => <ErrorIcon />
}
const Status = (props) => {
  const Icon = map[props.status]
  return (
    <Icon />
  )
}

const map: Record<string, () => JSX.Element> = {
  success: () => <SuccessIcon />
  error: () => <ErrorIcon />
}
const Status = (props) => {
  const Icon = map[props.status]
  return (
    <Icon />
  )
}

Does anyone know whether there's a benefit or some loss to any of these approaches (maybe bigger build size but quicker runtime or other way round)? Or maybe there's another, more proper way of doing this? Thanks!

10 replies

TTCTheo's Typesafe Cult

•Created by maxtreme on 2/12/2023 in #questions

Managing assets

Hey everyone, I kinda hit a wall so I need some help from You awesome people. At work we run a monorepo with two Next JS apps (deployed with Vercel) and a UI library. It got to a point where one of our apps has a 2MB initial load JS bundle and around 1MB additional code for every route. There's lots of code but we also have A LOT of SVG assets so I'm guessing it's partly due to them. Previous devs just put the assets alongside code (not even in /public) and just ran with it. I was wondering how You guys run assets in React apps (client-side mostly but I guess it doesn't matter). My idea for now is to move all assets to one of the two apps /public directory and create some utilities for using them directly in components of these apps. SVGs used in UI library components will be directly in code (so they don't depend on any unrelated service). I was also thinking of using react-inlinesvg for SVGs that require some modification (I ran some tests and it seems it's internal cache doesn't work - for the same asset it sends another request and you can see a wave of loading images). What do You guys think about this? Do You have any experience with managing lots of SVGs? How do UI libraries do this somewhat efficiently?

5 replies

Gaming

Programming