minor #1339 [Site] Stop the ReactSvelteVue Mix (smnandre)

weaverryan · weaverryan · commit 5aa40084c76a · 2023-12-19T06:36:16.000-05:00
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Site] Stop the ReactSvelteVue Mix | Q | A | ------------- | --- | Bug fix? |no | New feature? | no | License | MIT Remove a loooot of computation, script, events, by not calling React / Svelte / Vue files except on their demo. Commits ------- 1df6c1f [Site] Stop the ReactSvelteVue Mix
diff --git a/ux.symfony.com/assets/app-react.js b/ux.symfony.com/assets/app-react.js
@@ -0,0 +1,5 @@
+import {registerReactControllerComponents} from '@symfony/ux-react';
+
+import './app.js';
+
+registerReactControllerComponents();
diff --git a/ux.symfony.com/assets/app-svelte.js b/ux.symfony.com/assets/app-svelte.js
@@ -0,0 +1,5 @@
+import {registerSvelteControllerComponents} from '@symfony/ux-svelte';
+
+import './app.js';
+
+registerSvelteControllerComponents();
diff --git a/ux.symfony.com/assets/app-vue.js b/ux.symfony.com/assets/app-vue.js
@@ -0,0 +1,5 @@
+import {registerVueControllerComponents} from '@symfony/ux-vue';
+
+import './app.js';
+
+registerVueControllerComponents();
diff --git a/ux.symfony.com/assets/app.js b/ux.symfony.com/assets/app.js
@@ -1,15 +1,8 @@
 import './styles/app.scss';
-import { registerReactControllerComponents } from '@symfony/ux-react';
-import {registerVueControllerComponents} from "@symfony/ux-vue";
-import { registerSvelteControllerComponents } from "@symfony/ux-svelte";
 
 // start the Stimulus application
 import './bootstrap.js';
 
 // imported to initialize global plugins
 // dropdown, collapse, tab
 import * as bootstrap from 'bootstrap';
-
-registerReactControllerComponents();
-registerVueControllerComponents();
-registerSvelteControllerComponents();
diff --git a/ux.symfony.com/importmap.php b/ux.symfony.com/importmap.php
@@ -18,6 +18,18 @@
         'path' => './assets/app.js',
         'entrypoint' => true,
     ],
+    'app-react' => [
+        'path' => './assets/app-react.js',
+        'entrypoint' => true,
+    ],
+    'app-svelte' => [
+        'path' => './assets/app-svelte.js',
+        'entrypoint' => true,
+    ],
+    'app-vue' => [
+        'path' => './assets/app-vue.js',
+        'entrypoint' => true,
+    ],
     '@symfony/stimulus-bundle' => [
         'path' => '@symfony/stimulus-bundle/loader.js',
     ],
diff --git a/ux.symfony.com/templates/base.html.twig b/ux.symfony.com/templates/base.html.twig
@@ -25,7 +25,9 @@
                     document.documentElement.setAttribute('data-bs-theme', darkMode ? 'dark' : 'light');
                 })();
             </script>
-            {{ importmap('app') }}
+            {% block importmap %}
+                {{ importmap('app') }}
+            {% endblock %}
         {% endblock %}
     </head>
     <body>
diff --git a/ux.symfony.com/templates/ux_packages/react.html.twig b/ux.symfony.com/templates/ux_packages/react.html.twig
@@ -1,5 +1,9 @@
 {% extends 'packageBase.html.twig' %}
 
+{% block importmap %}
+    {{ importmap('app-react') }}
+{% endblock %}
+
 {% block package_header %}
     {% component PackageHeader with {
         package: 'react',
diff --git a/ux.symfony.com/templates/ux_packages/svelte.html.twig b/ux.symfony.com/templates/ux_packages/svelte.html.twig
@@ -1,5 +1,9 @@
 {% extends 'packageBase.html.twig' %}
 
+{% block importmap %}
+    {{ importmap('app-svelte') }}
+{% endblock %}
+
 {% block package_header %}
     {% component PackageHeader with {
         package: 'svelte',
diff --git a/ux.symfony.com/templates/ux_packages/vue.html.twig b/ux.symfony.com/templates/ux_packages/vue.html.twig
@@ -1,5 +1,9 @@
 {% extends 'packageBase.html.twig' %}
 
+{% block importmap %}
+    {{ importmap('app-vue') }}
+{% endblock %}
+
 {% block package_header %}
     {% component PackageHeader with {
         package: 'vue',
