Eduardo Aparicio Cardenes EduardoAC

## minify-cookie-id-hash-only.js
#!/usr/bin/env node

import fs from 'fs';
import crypto from 'crypto';

// Read the curl request file
const curlFilePath = '{path}/curl-request-size.txt';

try {
  const curlCommand = fs.readFileSync(curlFilePath, 'utf-8');

## minify-cookie-keys-only.js
#!/usr/bin/env node

import fs from 'fs';

// Read the curl request file
const curlFilePath = '{path}/curl-request-size.txt';

try {
  const curlCommand = fs.readFileSync(curlFilePath, 'utf-8');


## minify-cookie-keys-values.js
#!/usr/bin/env node

import fs from 'fs';

// Read the curl request file
const curlFilePath = '{path}/curl-request-size.txt';

try {
  const curlCommand = fs.readFileSync(curlFilePath, 'utf-8');


## measure-cookie-size.js
#!/usr/bin/env node

import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';

// Get __dirname equivalent in ES modules
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

## cache-poisoning-prevention
function handler(event) {
  var request = event.request;
  var allowed = ["accept", "accept-encoding", "if-none-match", "if-modified-since", "user-agent", "range"];
  var sanitized = {};
  for (var h in request.headers) {
    if (allowed.indexOf(h) !== -1) sanitized[h] = request.headers[h];
  }
  request.headers = sanitized;
  request.uri = request.uri.replace(/\/+/g, "/");
  return request;

## table-comparing-react-vue-dynamic-components.md

      
              1 file
            
          
              0 forks
            
          
                0 comments
              
            
              0 stars
            
          
                EduardoAC
                / table-comparing-react-vue-dynamic-components.md
            
            
              Created
              March 29, 2025 16:04
            
              
                DEX: Dynamic components React HoC vs Vue.JS slots comparison -Comparing Vue.js and React Approaches
              
          
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


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

## radiobuttongroup.reactAsRenderProp.tsx
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}`} />}

## radiobuttongroup.reactNodeAsProp.tsx
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}`} />}

## RadioButtonGroup.slotComponent.vue
<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">
	function handler(event) {
	var request = event.request;
	var allowed = ["accept", "accept-encoding", "if-none-match", "if-modified-since", "user-agent", "range"];
	var sanitized = {};
	for (var h in request.headers) {
	if (allowed.indexOf(h) !== -1) sanitized[h] = request.headers[h];
	}
	request.headers = sanitized;
	request.uri = request.uri.replace(/\/+/g, "/");
	return request;
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
	export function withCustomLabel(Component: ReactNode) {
	return (props) => {
	const modifiedOptions = props.optionList.map((option) => ({
	...option,
	label: <CustomElement labelText={option.label} />,
	}));
	return <Component {...props} optionList={modifiedOptions} />;
	};
	};
	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}`} />}
	<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">