HAZAÑA: Crear el lienzo a partir de una URL

He estado probando GrapesJS e intentando integrarlo en un proyecto de Symfony 5. En particular, quiero poder editar plantillas en el editor basadas en Bootstrap 4 y otros componentes como FontAwesome Pro y bloques personalizados basados en estos.

Uso el paquete Webpack-Encore de Symfony para generar los scripts y archivos de estilo de la aplicación, lo que supone un gran quebradero de cabeza intentar que el sistema actual de iframe canvas funcione usando los mismos componentes versionados como Bootstrap, etc.

Actualmente solo puedo inyectar URLs de estilo y script en el lienzo mediante la configuración de init así:

grapesjs.init({
    ...
    lienzo: {
        Estilos: [URL1, URL2, ...],
        scripts: [url3, url4, ...],
    },
});

El problema es que quiero mantener exactamente la misma versión de los componentes incluidos que estoy usando en la aplicación principal. Si actualizo estos quiero, quiero que se refleje en los componentes que usa el lienzo, esto también puede incluir código y estilos personalizados.

En Symfony y otros frameworks importantes, realmente no es buena práctica enlazar a recursos raíz fuera del área pública; generalmente se crean y compactan en el área pública durante un proceso de construcción.

Webpack crea archivos de compilación de diferentes maneras según las circunstancias. En modo desarrollo se sirven desde un servidor local de hot-plug, en modo producción, desde archivos de compilación estáticos que pueden o no incluir versionado en el nombre del archivo. Además, el código común se puede separar para reducir la sobrecarga. Normalmente referencias los archivos que necesitas usando un nombre de entrada, que luego atrae tantos archivos como se requieran de la estructura de compilación del webpack.

Básicamente es un auténtico fastidio intentar buscar esto para llegar a los archivos raíz necesarios para una vista concreta, que probablemente será muy diferente en la próxima versión.

Me gustaría proponer que podríamos opcionalmente proporcionar una URL como documento base para el iframe. En este caso, GrapesJS cargaría el iframe usando la URL y luego reemplazaría todo el contenido del cuerpo, o el contenido de un elemento especificado por un id. Esto último es preferible en muchos aspectos, ya que los elementos de script pueden añadirse en la parte inferior del elemento del cuerpo.

Esto permitiría crear una vista, en Symfony o cualquier otro framework, que absorba los archivos necesarios y manipulados mediante webpack, proporcionando así una forma sencilla y directa de proporcionar las bibliotecas de soporte necesarias dentro del iframe usando exactamente las versiones correctas del resto de la aplicación.

Esto no es solo un problema de Symfony. Cualquier aplicación que utilice un sistema de compilación y reducción en Javascript y CSS probablemente sufrirá los mismos quebraderos de cabeza.