Dado el fragmento de código, incluida una cadena tsx simple de un componente React:
// test.ts import j from "jscodeshift"; const code = ` const words: string[] = ["hello", "world"]; export default function(){ return <div>{words.map(word => <span>{word}</span>)}</div>; } `; const ast = j(code); console.log(ast.toSource()); Cuando ese archivo se ejecuta con el nodo ts-node test.ts , se produce un error como este:
.../jscodeshift/node_modules/@babel/parser/src/parser/error.js:97 const err: SyntaxError & ErrorContext = new SyntaxError(message); ^ SyntaxError: Const declarations require an initialization value (1:11) ... ¿Cómo puedo usar las opciones j para usar un analizador que analice con éxito el código .tsx ?
espero algo como
const ast = j(code, { parser: something, plugins: [somethingElse]});Pero no pude hacerlo funcionar, hasta ahora
Aparentemente, una posibilidad es usar babel parser y algunos complementos
import { parseSync } from "@babel/core"; import j from "jscodeshift"; const ast = j(code, { parser: { parse: (source) => parseSync(source, { plugins: [`@babel/plugin-syntax-jsx`, `@babel/plugin-proposal-class-properties`], overrides: [ { test: [`**/*.ts`, `**/*.tsx`], plugins: [[`@babel/plugin-syntax-typescript`, { isTSX: true }]], }, ], filename: "source-file.tsx", // this defines the loader depending on the extension parserOpts: { tokens: true, // recast uses this }, }), });Este código se copió principalmente del artículo de egghead.io https://egghead.io/blog/codemods-with-babel-plugins