EduardoAC

Feature	Vue.js (Slots & Dynamic Component)	React (Render Props, JSX, HOCs)
Customization	Explicit via slots or dynamic components	Implicit via JSX or render props
Flexibility	Very flexible (structured slots)	Flexible, but requires setup
Type Safety	Maintains type integrity	JSX elements can be mixed types
Performance	Direct rendering, no extra function calls	Render props and HOCs add slight overhead
Best For	Deep component customization	Conditional rendering inside components

EduardoAC

export function withCustomLabel(Component: ReactNode) {
  return (props) => {
    const modifiedOptions = props.optionList.map((option) => ({
      ...option,
      label: <CustomElement labelText={option.label} />,
    }));
    return <Component {...props} optionList={modifiedOptions} />;
  };
};

EduardoAC

export function RadioButtonGroup({ optionList, renderLabel }: RadioButtonGroupProps) {
  return (
    <div className="radio-button-group">
      {optionList.map((option) => (
        <div
          key={option.value}
          disabled={option.disabled}
          className={selected === type.value && 'option--active' || ''}
        >
          {option.icon && <span className={`icon-${option.icon}`} />}

EduardoAC

export function RadioButtonGroup({ optionList, selected }: RadioButtonGroupProps) {
  return (
    <div className="radio-button-group">
      {optionList.map((option) => (
        <div 
          key={option.value}
          disabled={option.disabled}
          className={selected === type.value && 'option--active' || ''}
        >
          {option.icon && <span className={`icon-${option.icon}`} />}

EduardoAC

<template>
  <div class="radio-button-group">
    <div
      v-for="option in optionList"
      :key="option.value"
      :disabled="option.disabled"
      :class="{ 'option--active': selected === type.value }"
    >
      <div v-if="type.icon" :class="type.icon" />
      <slot :labelText="option.label">

EduardoAC

<template>
  <div class="radio-button-group">
    <div
      v-for="option in optionList"
      :key="option.value"
      :disabled="option.disabled"
      :class="{ 'option--active': selected === type.value }"
    >
      <div v-if="option.icon" :class="option.icon" />
      <component :is="option.label" />

EduardoAC

autoload -Uz compinit && compinit
autoload -Uz add-zsh-hook
autoload -Uz vcs_info

add-zsh-hook precmd vcs_info

zstyle ':vcs_info:*' enable git
zstyle ':vcs_info:*' formats " %F{cyan}%c%u(%b)%f"
zstyle ':vcs_info:*' actionformats " %F{cyan}%c%u(%b)%f %a"
zstyle ':vcs_info:*' stagedstr "%F{green}"

EduardoAC

/* eslint-disable @typescript-eslint/no-explicit-any */
import { MessageRate } from "../../types/message.types"
import { messageHandler } from "./eventHandler"
import { ratingMessageHandler } from "./onMessageHandlers/ratingMessageHandler"

jest.mock("./onMessageHandlers/ratingMessageHandler")

describe("messageHandler", () => {
    const sendResponseMock = jest.fn()

EduardoAC

/* eslint-disable @typescript-eslint/no-explicit-any */
import { JestChrome } from "jest-chrome/types/jest-chrome"
import { ratingMessageHandler } from "./ratingMessageHandler"
import { MessageRate } from "../../../types/message.types"

describe("ratingMessageHandler", () => {
    const sendResponseMock = jest.fn()
    const jestChrome = chrome as any as JestChrome

    beforeEach(() => {

EduardoAC

/* eslint-disable @typescript-eslint/no-explicit-any */
import { JestChrome } from "jest-chrome/types/jest-chrome"
import { getRateFromCache } from "./getRateFromCache"

describe("getRateFromCache", () => {
    const sendResponseMock = jest.fn()
    const jestChrome = chrome as any as JestChrome

    beforeEach(() => {
        jest.clearAllMocks()