Creo que codificando así JS no se hecha de menos TS. Sí, hay alguna feature ligeramente distinta, pero lo importante de Typescript es el type safe, y con JSDoc … ¿puede que no lo eche de menos?.
La inicializacion del objeto está a base de autocomplete y VSCode lo entiende perfectamente
Obtenemos dos posibles transformaciones de JSX, la «Classic», que es la que usaba React antes de la versión 17, y la «Automatic» que es desde la v17 en adelante.
JSX Classic:
constList= ({ elements }) => {return React.createElement("ul", null, elements.map(element=> React.createElement(Element, { text: element })));};constElement= ({ text }) => {return React.createElement("li", null, text.id, ": ", text.name);};
JSX Automatic:
import { jsx as _jsx } from"react/jsx-runtime";import { jsxs as _jsxs } from"react/jsx-runtime";constList= ({ elements }) => {return_jsx("ul", { children: elements.map(element=>_jsx(Element, { text: element })) });};constElement= ({ text }) => {return_jsxs("li", { children: [text.id, ": ", text.name] });};
La principal diferencia es que React.createElement es una función muy versatil. A partir del parametro #2 en adelante son todos los hijos de un elemento. Pudiendo ser ninguno o muchos.
En la nueva version, con el proposito de optimizar el renderizado, si la etiqueta tiene 0 o 1 hijo se transpila a _jsx, si tiene 2 o mas se transpila a _jsxs
Esto hace tambien que no tengamos que importar React en las versiones modernas, ya que ya se incluye en la transpilación «react/jsx-runtime» automaticamente.
Siempre uso porque es el que más me gusta y conozco el projecto el ASTExplorer de fkling en astexplorer.net. Creo que es el primero de los AST Explorer porque es el más indexado en buscadores, aunque no he revisiado la fecha del primer commit en github
Parece que hay una «guerra» de ast explorers. No compiten por nada, pero es interesante ver como surgen en el ecosistema de free software.
Li Hau Tan tambien tiene el suyo propio, aunque no está muy mantenido, como pieza de código a revisar es muy interesante.
Parece que sxzz tambien se ha puesto a desarrollar el suyo, y no está nada mal:
Pero el código generado a raiz de una función es mucho, porque se instancian los objetos globales y mucha estructura interna que debe estár ahi para ejecutar el programa completo.
Para filtar el código de una sola funcion se puede añadir el parámetro –print-bytecode-filter=nombre-de-funcion