He convertido una aplicación web Flutter en un elemento personalizado, que estoy publicando como un paquete npm.

El resultado de una compilación web de Flutter es un archivo html (dentro del cual se ejecutan algunos scripts), por lo que una forma rápida de convertirlo en un elemento personalizado es envolverlo en un iframe . El elemento personalizado tiene la forma general:

 class CustomElement extends HTMLElement { constructor() { super(); this.innerHTML = ` <iframe src="src/flutter_output.html"></iframe>`;

Ejecutándose en localhost, no hay problema.

Publicado en npm, sí problema.

Esto se debe a que la ruta src en el iframe es relativa al directorio de inicio de los usuarios index.html, por lo que si el usuario instaló el paquete localmente, el src debería ser algo así como "./node_modules/@package/flutter_output.html" (la codificación rígida donde estará el archivo del paquete se siente peligrosa). O si están usando unpkg , presumiblemente el src se vincularía de nuevo a unpkg, por ejemplo, unpkg.com/package/flutter_output.html (y esto parece un desperdicio).

Entonces, la pregunta es ¿qué src uso en el iframe? ¿O hay otra solución a este problema? Soy nuevo en el desarrollo web, por lo que fácilmente podría haber pasado por alto algo.

Una posible solución podría ser perder el iframe y el html por completo, convirtiendo flutter_output.html a javascript. Aunque esto podría ser muy doloroso.