Merge pull request #11230 from nextcloud/fix/addScript

developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_28.rst

@@ -22,6 +22,13 @@ Front-end changes
 Added APIs
 ^^^^^^^^^^
 
+* The new Files initialising much faster than the old one, you will face some
+  race conditions if you register some custom properties loading your scripts
+  by using the ``Util::addScript`` method.
+  We recommend you use the new ``Util::addInitScript`` method instead, your script
+  will be loaded right after the common core scripts and right before the Files app.
+  See :ref:`ApplicationJs` for more information.
+
 * File actions: to register file actions, please use the dedicated API from https://npmjs.org/@nextcloud/files or
   https://nextcloud-libraries.github.io/nextcloud-files/functions/registerFileAction.html
 * New file menu: to register entries in the new file menu, please use the dedicated API from https://npmjs.org/@nextcloud/files or 

developer_manual/basics/front-end/js.rst

@@ -1,34 +1,94 @@
+.. _ApplicationJs:
+
 ==========
 JavaScript
 ==========
 
 .. sectionauthor:: Bernhard Posselt <dev@bernhard-posselt.com>
 
-The JavaScript files reside in the **js/** folder and should be included in the template:
+The JavaScript files reside in the **js/** folder and should be included
+in the appropriate controller. There is two methods to inject your JavaScript files.
+
+  1. ``Util::addScript``
+  2. ``Util::addInitScript``
+
+.. code-block:: php
+
+  /**
+   * Add a javascript file
+   *
+   * @param string $application Your application ID, e.g. 'your_app'
+   * @param string $file Your script name, e.g. 'main'
+   * @param string $afterAppId Optional, the script will be loaded after this app
+   * @param bool $prepend Optional, if true the script will be prepended to this app scripts list
+   */
+   public static function addScript(string $application, string $file = null, string $afterAppId = 'core', bool $prepend = false): void
+
+  /**
+   * Add a standalone init js file that is loaded for initialization.
+   * Be careful loading scripts using this method as they are loaded early
+   * and block the initial page rendering. They should not have dependencies
+   * on any other scripts than core-common and core-main.
+   *
+   * @param string $application Your application ID, e.g. 'your_app'
+   * @param string $file Your script name, e.g. 'main'
+   */
+   public static function addInitScript(string $application, string $file): void
+
+.. note:: If your script is only needed after a specific event, e.g. after the Files app is loaded,
+   you will have to register a Listener in your app ``Appinfo/Application.php``.
+
+Here is an example for the Files app (which emits the ``LoadAdditionalScriptsEvent``).
+For more informations about app bootstrapping, see the :ref:`application-php` section.
 
 .. code-block:: php
 
-  <?php
-  // add one file
-  script('myapp', 'script');  // adds js/script.js
+  namespace OCA\YourApp\AppInfo;
+
+  use OCA\Files\Event\LoadAdditionalScriptsEvent;
+  use OCA\YourApp\Listener\LoadAdditionalListener;
+  use OCP\AppFramework\App;
+  use OCP\AppFramework\Bootstrap\IBootContext;
+  use OCP\AppFramework\Bootstrap\IBootstrap;
+  use OCP\AppFramework\Bootstrap\IRegistrationContext;
 
-  // add multiple files in the same app
-  script('myapp', array('script', 'navigation'));  //  adds js/script.js js/navigation.js
+  /**
+   * @package OCA\YourApp\AppInfo
+   */
+  class Application extends App implements IBackendProvider, IAuthMechanismProvider, IBootstrap {
+    public const APP_ID = 'your_app';
 
-  // add vendor files (also allows the array syntax)
-  vendor_script('myapp', 'script');  //  adds vendor/script.js
+    public function __construct(array $urlParams = []) {
+      parent::__construct(self::APP_ID, $urlParams);
+    }
 
-If the script file is only needed when the file list is displayed, you should
-listen to the ``OCA\Files::loadAdditionalScripts`` event:
+    public function register(IRegistrationContext $context): void {
+      $context->registerEventListener(LoadAdditionalScriptsEvent::class, LoadAdditionalListener::class);
+    }
+
+    public function boot(IBootContext $context): void {}
 
 .. code-block:: php
 
-  <?php
-  $eventDispatcher = \OC::$server->getEventDispatcher();
-  $eventDispatcher->addListener('OCA\Files::loadAdditionalScripts', function() {
-    script('myapp', 'script');  // adds js/script.js
-    vendor_script('myapp', 'script');  //  adds vendor/script.js
-  });
+  namespace OCA\YourApp\Listener;
+
+  use OCA\YourApp\AppInfo\Application;
+  use OCA\Files\Event\LoadAdditionalScriptsEvent;
+  use OCP\EventDispatcher\Event;
+  use OCP\EventDispatcher\IEventListener;
+  use OCP\Util;
+
+  class LoadAdditionalListener implements IEventListener {
+
+      public function handle(Event $event): void {
+          if (!($event instanceof LoadAdditionalScriptsEvent)) {
+              return;
+          }
+
+          Util::addInitScript(Application::APP_ID, 'init');
+          Util::addScript(Application::APP_ID, 'main', 'files');
+      }
+  }
 
 
 Sending the CSRF token

developer_manual/basics/front-end/templates.rst

@@ -49,6 +49,9 @@ The parent variables will also be available in the included templates, but shoul
 Including CSS and JavaScript
 ----------------------------
 
+.. warning:: This is deprecated, please use ``addScript`` and ``addStyle`` in your controller instead.
+   See :ref:`ApplicationJs` for more information.
+
 To include CSS or JavaScript use the **style** and **script** functions:
 
 .. code-block:: php