Completando las funciones para generar etiquetas HTML

Este es un micro-framework que nos ayuda a construir aplicaciones web utilizando Componentes, muy parecido a React y Vue:

• Hyperapp is a JavaScript micro-framework for building web applications - Github

¿seguros que este código es más fácil de mantener?

Es un error de principiantes verificar si un objeto tiene propiedades con un simple obj.attr ? ‘’ : ‘’ porque un objecto vacio es truthy

Siguiendo el taller y con un poco de curiosidad las funciones que estamos utilizando pueden quedar de la manera siguiente.

// consiguiendo los atributes para las etiquetas HTML
const attributesToString = (obj = {}) => {
    const ENTRIES = Object.entries(obj);
    const ATTRS = [];
    for (let i = 0; i < ENTRIES.length; i += 1) {
        const AUX = ENTRIES[i];
        const ATTR = AUX[0];
        const VALUE = AUX[1];
        ATTRS.push(`${ATTR}="${VALUE}"`);
    }
    return ATTRS.join("");
};

// Creando etiquetas html con atributos
const createTagAttr = obj => (content = "") => {
    const { tag, attr } = obj;
    return `
      <${tag}${attr ? ` ${attributesToString(attr)}` : ""}>
        ${content}
      </${tag}>`;
};

// Generando tag de maner dinamica
const createTag = (tag) => {
    const TAG = (typeof tag === "string")
        ? createTagAttr({ tag })
        : createTagAttr(tag);
    return TAG;
};```

para poder invocar todo de la siguiente manera. 

createTag({tag:“h1”, attr:{“class”: “Success”}})(“Galletas mmmm”);

espero pueda ser de utilidad par alguien.

Tengo entendido que en la programación funcional no se hace uso de if. Soy nuevo en este paradigma

¿No sería más fácil solo mapear la lista?
pregunta seria jajjaja.

Les comparto una ligera optimización al código del profe.

// Construccion del html tag con clase
const tagAttr = obj => (content = '') =>
  `<${obj.tag} ${obj.attrs && attrToString(obj.attrs)}> ${content} </${obj.tag}>`

// Metodo que ejecuta la construccion del tag
const tag = t =>
  (typeof t === 'string') ? tagAttr({tag: t}) : tagAttr(t)

Que fumada de clase again zD

Muy interesante la solución y todo pero, afortunadamente ya tomé el Curso de Manejo de Ansiedad como para permitirme usar jQuery por voluntad propia, más aún teniendo React JS y demás. 😅 Quiéranse mucho!😂

Un clousure recuerda el contexto en el que fue creado

const generateHTMLTag = tag => content => `<${tag}>${content}</${tag}>`
const h1 = generateHTMLTag('h1');
h1('bla bla bla'); //<h1>bla bla bla</h1>

cada vez más confuso …

Hmmm, comprendo el punto, esto me recuerda mucho al concepto de High Order Functions, pero pues prácticamente hacer esto es muy similar a lo que vimos en el Curso de buenas prácticas de escritura de código, dividir en funciones

Comprender el uso de las tres funciones me costo ver los vídeos un par de veces mas pero ahora quedo perfectamente entendido

Muy chevere

Creo que la validación quedaría mejor de la siguiente manera

    `<${obj.tag}${Object.keys(obj.attrs).length > 0 && ' '}${attrsToString(obj.attrs)}>${content}</${obj.tag}>`

funciones en esta clase.

// tagAttrs
function tagAttrs (obj, content) {
  return (
    `<${obj.tag}${Object.keys(obj.attrs).length > 0 && ' '}${attrsToString(obj.attrs)}>${content}</${obj.tag}>`
  )
}

// create tag html

function tag (t) {
  if (typeof t === 'string') return tagAttrs({tag: t})
  
  return tagAttrs(t);
}

Yo le hice así:

const tagAttrs = obj => (content = '') => `
  <${obj.tag}
    ${obj.attrs? attrsToString(obj.attrs) : ''}
  >
    ${content}
  </${obj.tag}>
`

const tag = t => {
  if(typeof t === 'string') return tagAttrs({tag: t})
  return tagAttrs(t)
}