Enable starting Stimulus app yourself (#253)

Author: loic425

docs/getting-started.md

@@ -60,3 +60,81 @@ Now, it's your turn!
 <figure><img src=".gitbook/assets/admin-dashboard.png" alt="Admin dashboard overview"></figure>
 
 </div>
+
+### Using AssetMapper
+
+To prevent duplicate Ajax calls, disable the auto-initialized Stimulus app and Symfony UX stylesheets from the `sylius/bootstrap-admin-ui` package, so you can take control of Stimulus initialization in your own code.
+
+#### Disabling Stimulus app & Symfony UX stylesheets from third party package
+
+First, you need to disable the Stimulus App started by the `sylius/bootstrap-admin-ui` package.
+
+{% tabs %}
+{% tab title="YAML" %}
+{% code lineNumbers="true" %}
+```yaml
+# config/packages/sylius_bootstrap_admin_ui.yaml
+# ...
+sylius_twig_hooks:
+    hooks:
+        # ...
+        # Disabling Symfony UX stylesheets
+        'sylius_admin.base#stylesheets':
+            symfony_ux:
+                enabled: false    
+           
+        # Disabling Stimulus App        
+        'sylius_admin.base#javascripts':
+            symfony_ux:
+                enabled: false
+```
+{% endcode %}
+{% endtab %}
+
+{% tab title="PHP" %}
+{% code title="config/packages/sylius_bootstrap_admin_ui.php" lineNumbers="true" %}
+```php
+use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
+
+return static function (ContainerConfigurator $containerConfigurator): void {
+    // ...
+
+    $containerConfigurator->extension('sylius_twig_hooks', [
+        'hooks' => [
+            'sylius_admin.base#stylesheets' => [
+                // Disabling Symfony UX stylesheets
+                'symfony_ux' => [
+                    'enabled' => false,
+                ],
+            ],
+            
+            'sylius_admin.base#javascripts' => [
+                // Disabling Stimulus App        
+                'symfony_ux' => [
+                    'enabled' => false,
+                ],
+            ],
+        ],    
+    ]);
+};
+```
+{% endcode %}
+{% endtab %}
+{% endtabs %}
+
+#### Starting Stimulus App
+
+```js
+// assets/bootstrap.js
+import { startStimulusApp } from '@symfony/stimulus-bundle';
+
+const app = startStimulusApp();
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);
+```
+
+```js
+// assets/app.js
+import './bootstrap.js';
+// ...
+```

src/BootstrapAdminUi/assets/entrypoint.js

@@ -9,8 +9,6 @@
 
 import './styles/main.scss';
 
-import './app';
-
 import './scripts/bulk-delete';
 import './scripts/check-all';
 import './scripts/menu-search';

src/BootstrapAdminUi/assets/app.js src/BootstrapAdminUi/assets/symfony_ux.jssrc/BootstrapAdminUi/assets/app.js renamed to src/BootstrapAdminUi/assets/symfony_ux.js

@@ -8,14 +8,10 @@
  */
 
 import {startStimulusApp} from '@symfony/stimulus-bridge';
-import LiveController from '@symfony/ux-live-component';
-import '@symfony/ux-live-component/styles/live.css';
 
 // Registers Stimulus controllers from controllers.json and in the controllers/ directory
-export const app = startStimulusApp(require.context(
+export const symfony_ux = startStimulusApp(require.context(
   '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
   true,
   /\.[jt]sx?$/
 ));
-
-app.register('live', LiveController);

src/BootstrapAdminUi/config/app/twig_hooks/layout.php

@@ -21,15 +21,23 @@
                     'template' => '@SyliusBootstrapAdminUi/shared/layout/title.html.twig',
                 ],
             ],
+
             'sylius_admin.base#stylesheets' => [
                 'styles' => [
                     'template' => '@SyliusBootstrapAdminUi/shared/layout/stylesheets.html.twig',
                 ],
+                'symfony_ux' => [
+                    'template' => '@SyliusBootstrapAdminUi/shared/layout/symfony_ux_styles.html.twig',
+                ],
             ],
+
             'sylius_admin.base#javascripts' => [
                 'javascripts' => [
                     'template' => '@SyliusBootstrapAdminUi/shared/layout/javascripts.html.twig',
                 ],
+                'symfony_ux' => [
+                    'template' => '@SyliusBootstrapAdminUi/shared/layout/symfony_ux_scripts.html.twig',
+                ],
             ],
         ],
     ]);

src/BootstrapAdminUi/public/app.css

@@ -14,7 +14,3 @@
  *
  * Date: 2023-08-28T13:37Z
  */
-
-/*! @orchidjs/unicode-variants | https://github.com/orchidjs/unicode-variants | Apache License (v2) */
-
-/*! sifter.js | https://github.com/orchidjs/sifter.js | Apache License (v2) */

src/BootstrapAdminUi/public/app.js

@@ -8,6 +8,15 @@
       "js": [
         "./app.js"
       ]
+    },
+    "symfony_ux": {
+      "css": [
+        "./symfony_ux.css",
+        "./symfony_ux.rtl.css"
+      ],
+      "js": [
+        "./symfony_ux.js"
+      ]
     }
   }
 }

src/BootstrapAdminUi/public/app.js.LICENSE.txt

@@ -1,6 +1,8 @@
 {
   "bundles/SyliusBootstrapAdminUi/app.css": "./app.css",
   "bundles/SyliusBootstrapAdminUi/app.js": "./app.js",
+  "bundles/SyliusBootstrapAdminUi/symfony_ux.css": "./symfony_ux.css",
+  "bundles/SyliusBootstrapAdminUi/symfony_ux.js": "./symfony_ux.js",
   "bundles/SyliusBootstrapAdminUi/fonts/fa-solid-900.svg": "./fonts/fa-solid-900.7a8b4f130182d19a2d7c67d80c090397.svg",
   "bundles/SyliusBootstrapAdminUi/fonts/Inter-VariableFont_slnt,wght.ttf": "./fonts/Inter-VariableFont_slnt,wght.853e0197.ttf",
   "bundles/SyliusBootstrapAdminUi/fonts/fa-brands-400.svg": "./fonts/fa-brands-400.2f517e09eb2ca6650ff5bec5a95157ab.svg",