Me pregunto, ¿es posible crear un generador visual sin código para trabajar con componentes JS (por ejemplo, React JSX) si antes están codificados manualmente?

Déjame explicarte lo que quiero decir.

Supongamos que un componente React simple pages/index.js escrito previamente por un desarrollador de forma manual:

 function HomePage() {
 return <div>Welcome to Next.js!</div>
}

export default HomePage

¿Cómo podemos cambiar dicho componente en el front-end usando un constructor visual?

Por ejemplo, queremos agregar un nuevo elemento HTML (por ejemplo, H1) dentro del div existente.

Como puedo entender, el constructor primero necesita saber en qué archivo JS está almacenado el marcado HTML para actualizarlo. Entonces podemos agregar id="homepage" al div primero y luego almacenar una relación como una configuración como

 {"homepage": "pages/index.js"}

Y ahora, si agregamos un nuevo elemento dentro de <div id="homepage"> , el constructor agrega el elemento al DOM del div en el cliente, luego toma todo el DOM actualizado del div y lo vuelve a escribir en el index.js según la configuración

Ok, pero el archivo no solo contiene marcado HTML, es código JS (React).

¿Cómo mantener todo el código JS, por ejemplo, la function HomePage() , return , export default , etc.?

Como opción, podemos cargar por separado todo el código JS como HTML, incluido el código que no es HTML como nodejs de #text . Luego actualice el DOM y vuelva a escribir todo en el archivo.

Pero suena complicado y puede causar problemas inesperados.

Entonces, ¿qué solución sería la mejor?

¿O tal vez hay una solución específica de React lista?

O tal vez sea una mala idea analizar y reescribir manualmente los componentes codificados de forma rígida mediante un generador visual y la única solución es almacenar todo como JSON como "homepage":{"div", {"class":""}, "Welcome..."} cuál es más fácil de reescribir? (pero requiere un nuevo render)