JSDoc rules

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

/**
 * @typedef {object} User
 * @property {string} name
 * @property {string} email
 * @property {Adress} adress
 */

/**
 * @typedef {object} Adress
 * @property {string} street
 */

/** @type {User} */
let user1;

user1 = {
  name: "John",
  email: "john@fakemail.com",
  adress: { street: "fake street" },
};

Super tutorial aquí: https://alexharri.com/blog/jsdoc-as-an-alternative-typescript-syntax

JSX Classic vs JSX Automatic

Para el código JSX:

const List = ({elements}) => {
	return <ul>
      {elements.map(element => <Element text={element}/>)}
    </ul>;
}
const Element = ({text}) => {
	return {text.id}: {text.name};
}

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:

const List = ({ elements }) => {
  return React.createElement("ul", null, elements.map(element => React.createElement(Element, {
    text: element
  })));
};
const Element = ({ 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";

const List = ({ elements }) => {
  return _jsx("ul", {
    children: elements.map(element => _jsx(Element, {
      text: element
    }))
  });
};

const Element = ({ 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.

AST Explorer War

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

astexplorer.net

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.

babel ast explorer - Li Hau Tan

Parece que sxzz tambien se ha puesto a desarrollar el suyo, y no está nada mal:

ast explorer - sxzz

Bytecodes de V8

Con node podemos convertir el código javascript a los bytecodes que V8 ejecutará.

node --print-bytecode index.js

Franziska Hinkelman lo explica muy bien aqui

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

node --print-bytecode --print-bytecode-filter=func_name index.js

Extra info:

Node.js under the hood #8 – Understanding bytecodes

JavaScript Bytecode – v8 Ignition Instructions