Gracias a @david, tenemos un patrón muy limpio para la carga “eager” de JavaScript en los temas.
Esto significa que solo tienes que colocar archivos *.js.es6 en el directorio javascripts y funcionará exactamente como lo hacen los plugins; esto es glorioso.
Por ejemplo, así es como ahora se crea un inicializador, con una paridad del 100% con los plugins:
- Crea un archivo llamado
/javascripts/discourse/initializers/my-init.js.es6
import { withPluginApi } from "discourse/lib/plugin-api";
function initialize(api) {
// init via api here
}
export default {
name: "discourse-otp",
initialize() {
withPluginApi("0.8.28", initialize);
}
};
Esta es una característica enormemente importante porque ahora podemos dividir temas grandes y complejos en muchas partes, obtener linting, resaltado de sintaxis y todas las cosas buenas.
Sin embargo, en algunos casos podemos querer enviar opcionalmente una carga útil de JS.
Por ejemplo, digamos que estamos decorando publicaciones, pero solo aquellas con un markdown muy específico. No tiene sentido descargar una biblioteca sofisticada de 100KB hasta que sepamos que la vamos a usar.
En mi componente, trabajé alrededor de esto siguiendo este cambio elegante:
https://github.com/discourse/discourse/commit/719a93c312b9caa6c71de22d67f1ce1a78c1c8b2
Con:
import loadScript from "discourse/lib/load-script";
function generateOtp($elem) {
loadScript(settings.theme_uploads.jsotp).then(() => {
// stuff goes here
});
}
Esto significó que:
- Necesitaba agregar
.jsatheme authorized extensions(extensiones autorizadas del tema). - Necesitaba agregar una excepción a la CSP para el activo particular en
content security policy script src. - Necesitaba nombrar el activo en mi about.json.
Como escritor de componentes de temas, esto es demasiada fricción, ya que no tienes ninguna posibilidad en el juego de distribución si requieres este nivel de ninja.
Estoy pensando que, para hacer esto utilizable, hay 2 alternativas de las que podemos elegir:
-
Podemos enseñar al sistema a aplicar CSP automáticamente a los activos
.jsen temas activos y, por defecto, permitir que los temas suban.js. -
Podemos movernos hacia algo como javascript_cache que usan los temas JS no diferidos.
Me inclino un poco hacia la opción 1, ya que agregar .js a las extensiones autorizadas del tema parece trivial y el CSP automático no debería ser imposible.
!