Agregue archivos CSS y JavaScript a las extensiones de Phabricator -

Cada marco de código abierto tiene sus propios métodos para ampliar la funcionalidad; algunos hacen que la extensión sea increíblemente fácil y otros… no tanto. La mayoría de las veces todo se reduce a qué tan bien está documentado el marco. Phabricator hizo un trabajo increíble al hacer que las clases necesarias fueran extensibles, pero es justo decir que sería genial si el marco tuviera una documentación un poco mejor (¡apuesto a que las relaciones públicas son bienvenidas!).

Al crear mi propia extensión, necesitaba agregar archivos JavaScript y CSS a la página. Desafortunadamente, la documentación sobre cómo agregar nuevos CSS y JS dice: “Este documento está destinado a desarrolladores y colaboradores de Phabricator. Este proceso no funcionará correctamente con códigos, complementos o extensiones de terceros”. Descubre que eso no es cierto. A continuación se muestra cómo agregar recursos de JavaScript y CSS para mi extensión.

Coloque archivos de activos en su directorio de extensiones.

Cada extensión que creo se coloca en su propio directorio con todas las dependencias dentro de ese directorio:

• extensiones
  • mi-extensión
    • mi-extensión.php
    • mi-extensión.css
    • mi-extensión.js

También puede colocar archivos CSS y JS en sus propios directorios si lo desea. Cada archivo CSS y JS debe tener un @providescomentario mediante el cual podrá hacer referencia a él cuando llegue el momento de solicitarlo:

/** * @proporciona mi-extensión-js */

Elijo agregar -jsy -cssal nombre de referencia para facilitar el mantenimiento.

Usar require_celerity_resourcepara requerir el archivo

En la función que representa la vista en la que desea inyectar los activos, usará require_celerity_resourceel @providesnombre del activo:

función protegida renderLoginForm(AphrontRequest $request, $mode) { // Agregar recursos CSS y JS a la página require_celerity_resource('bmo-auth-css'); require_celerity_resource('bmo-auth-js'); // ....}

Durante la construcción, mueva las ubicaciones de los activos

Phabricator espera que todos los archivos JavaScript y CSS estén en sus directorios /webroot/rsrc/js/y /webroot/rsrc/css/, por lo que deberá mover los activos de su extensión durante el proceso de compilación. Agregué lo siguiente a mi Dockerfilepara hacer precisamente eso:

# Mover recursos estáticos a phabricator, agregar archivos a celerity map arrayCOPY auth/my-extension.css /app/phabricator/webroot/rsrc/css/my-extension.cssCOPY auth/my-extension.js /app/phabricator/webroot/ rsrc/js/mi-extensión.js

Con sus archivos JavaScript y CSS en esta ubicación, la require_celerity_resourcefunción puede encontrar sus activos por nombre.

Actualizado el mapa de celeridad

Para eliminar el caché e indexar sus archivos, deberá ejecutar el siguiente comando:

phabricator/ $ ./bin/mapa de celeridad

¡Ese es el proceso simple pero no excelentemente documentado para agregar sus propios recursos CSS y JavaScript a Phabricator!