Cómo requerir bibliotecas externas en un archivo de ayuda de componentes?

Desarrollador
1

Estoy escribiendo un componente de tema y necesito acceder a dos bibliotecas externas desde un archivo de ayuda. Mi enfoque actual funciona, pero se siente un poco torpe:

En mi inicializador:

import { apiInitializer } from 'discourse/lib/api';
import loadScript from 'discourse/lib/load-script';
import myHelper from '../lib/helper';

export default apiInitializer('0.11.1', (api) => {
  api.decorateCookedElement(
    (elem) => {
      loadScript(D3_URL).then(() => {
        loadScript(LUXON_URL).then(() => {
          ...
          myHelper(whatever, d3, luxon)
          ...
        })
      })
    },
    {id: 'discourse-xyz', onlyStream: true}
  )
});

Luego en myHelper.js:

export default function myHelper(whatever, d3, luxon) {
  d3();
  luxon();
  ...
}

Intenté importar las bibliotecas directamente desde el archivo de ayuda, pero eso significaría tener que devolver una promesa y luego hacer myHelper(whatever, d3, luxon).then(...) en el inicializador, lo cual preferiría evitar por otras razones.

¿Existe un enfoque mejor?

2

Puedes utilizar el enfoque que empleo en GitHub - merefield/discourse-tc-tag-cloud: A Discourse Theme Component that displays a tag cloud above the tag lists on the tags page · GitHub

Ten en cuenta que los activos están registrados aquí:

Y se encuentran en la carpeta de activos.

3

Gracias, Robert. Lo intenté, pero no encuentra “theme_uploads”. ¿Es algo que debería configurar en settings.yml?

4

No, no deberías necesitar hacer eso.

Observo que la sintaxis sigue en la especificación: discourse/spec/models/theme_spec.rb at c8f4f7c235ca38b39d4b66bf9e1305410e36815e · discourse/discourse · GitHub

5

Ah, mi error. Tenía el nombre de archivo incorrecto en assets. Ya lo he corregido, pero ahora estoy obteniendo un error de CSP:

load-script.js:35 Se ha denegado la carga del script 
'http://localhost:4200/uploads/default/original/1X/c4a31754250cf6a40f7cbed182cfe2456d9be9fe.js' porque viola la siguiente directiva de Política de Seguridad de Contenido: 
"script-src http://localhost:4200/logs/ http://localhost:4200/sidekiq/ http://localhost:4200/mini-profiler-resources/ http://localhost:4200/assets/ http://localhost:4200/brotli_asset/ http://localhost:4200/extra-locales/ http://localhost:4200/highlight-js/ http://localhost:4200/javascripts/ http://localhost:4200/plugins/ http://localhost:4200/theme-javascripts/ http://localhost:4200/svg-sprite/ 
'unsafe-eval' http://localhost:4200/ember-cli-live-reload.js http://localhost:4200/_lr/ /uploads". Ten en cuenta que 'script-src-elem' no se estableció explícitamente, por lo que se usa 'script-src' como alternativa.

No vi que usaras extend_content_security_policy en settings.yml, así que no sé qué me falta.

6

De todos modos, ya he añadido la URL del directorio de subidas a la configuración src de mi CSP. Pero podría añadir algo que la hiciera más específica :+1:t2:

7

¡Ah, te refieres a aquí? Funciona si hago esto:

CleanShot 2021-07-03 at 12.17.17@2x
CleanShot 2021-07-03 at 12.17.17@2x2706×460 62.7 KB

Pensé que había una forma de hacerlo en settings.yml, así (pero parece que no funciona con localhost):

extend_content_security_policy:
  type: list
  default: "script_src: http://localhost:4200/"