ux vue

lhapaipai · Nov 9, 2023 · c65a61e · c65a61e
1 parent 9747382
commit c65a61e
Show file tree

Hide file tree

Showing 31 changed files with 14,724 additions and 5,697 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/playground/stimulus/assets/bootstrap.js b/playground/stimulus/assets/bootstrap.js
@@ -1,4 +1,6 @@
-import { startStimulusApp } from "vite-plugin-symfony/stimulus-helpers"
+import { startStimulusApp, registerVueControllerComponents} from "vite-plugin-symfony/stimulus-helpers"
+
+registerVueControllerComponents(import.meta.glob('./vue/controllers/**/*.vue'))
 
 const app = startStimulusApp(import.meta.glob('./controllers/*_controller.js'));
 

diff --git a/playground/stimulus/assets/controllers.json b/playground/stimulus/assets/controllers.json
@@ -2,7 +2,7 @@
     "controllers": {
         "@symfony/ux-autocomplete": {
             "autocomplete": {
-                "enabled": true,
+                "enabled": false,
                 "fetch": "lazy",
                 "autoimport": {
                     "tom-select/dist/css/tom-select.default.css": true,
@@ -12,13 +12,13 @@
         },
         "@symfony/ux-chartjs": {
             "chart": {
-                "enabled": true,
+                "enabled": false,
                 "fetch": "lazy"
             }
         },
         "@symfony/ux-cropperjs": {
             "cropper": {
-                "enabled": true,
+                "enabled": false,
                 "fetch": "lazy",
                 "autoimport": {
                     "cropperjs/dist/cropper.min.css": true,
@@ -28,7 +28,7 @@
         },
         "@symfony/ux-dropzone": {
             "dropzone": {
-                "enabled": true,
+                "enabled": false,
                 "fetch": "lazy",
                 "autoimport": {
                     "@symfony/ux-dropzone/dist/style.min.css": true
@@ -37,13 +37,13 @@
         },
         "@symfony/ux-lazy-image": {
             "lazy-image": {
-                "enabled": true,
+                "enabled": false,
                 "fetch": "lazy"
             }
         },
         "@symfony/ux-live-component": {
             "live": {
-                "enabled": true,
+                "enabled": false,
                 "fetch": "lazy",
                 "autoimport": {
                     "@symfony/ux-live-component/dist/live.min.css": true
@@ -52,7 +52,7 @@
         },
         "@symfony/ux-notify": {
             "notify": {
-                "enabled": true,
+                "enabled": false,
                 "fetch": "lazy"
             }
         },
@@ -76,7 +76,7 @@
         },
         "@symfony/ux-toggle-password": {
             "toggle-password": {
-                "enabled": true,
+                "enabled": false,
                 "fetch": "lazy",
                 "autoimport": {
                     "@symfony/ux-toggle-password/dist/style.min.css": true
@@ -85,7 +85,7 @@
         },
         "@symfony/ux-turbo": {
             "turbo-core": {
-                "enabled": true,
+                "enabled": false,
                 "fetch": "lazy"
             },
             "mercure-turbo-stream": {
@@ -95,13 +95,13 @@
         },
         "@symfony/ux-typed": {
             "typed": {
-                "enabled": true,
+                "enabled": false,
                 "fetch": "lazy"
             }
         },
         "@symfony/ux-vue": {
             "vue": {
-                "enabled": false,
+                "enabled": true,
                 "fetch": "lazy"
             }
         }

diff --git a/playground/stimulus/assets/page/translator/translator.js b/playground/stimulus/assets/page/translator/translator.js
@@ -1,5 +1,13 @@
 import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-translator';
 import { localeFallbacks } from '~project/var/translations/configuration';
+/*
+ * This file is part of the Symfony UX Translator package.
+ *
+ * If folder "../var/translations" does not exist, or some translations are missing,
+ * you must warmup your Symfony cache to refresh JavaScript translations.
+ *
+ * If you use TypeScript, you can rename this file to "translator.ts" to take advantage of types checking.
+ */
 
 setLocaleFallbacks(localeFallbacks);
 

diff --git a/playground/stimulus/assets/theme.scss b/playground/stimulus/assets/theme.scss
@@ -1 +1,8 @@
-@import "~shared/theme/index.scss";
+@import "~shared/theme/index.scss";
+
+html #content {
+  height: calc(100% - var(--nav-height));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/playground/stimulus/assets/translator.js b/playground/stimulus/assets/translator.js
diff --git a/...assets/page/vue/components/HelloWorld.vue → ...ulus/assets/vue/components/HelloWorld.vue b/...assets/page/vue/components/HelloWorld.vue → ...ulus/assets/vue/components/HelloWorld.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1>{{ msg }}</h1>
+  <h1>Hello {{ name }}</h1>
   <button @click="count++">count is: {{ count }}</button>
   <code>assets/page/vue/components/HelloWorld.vue</code>
   <p>Edit component to test hot module replacement.</p>
@@ -9,7 +9,7 @@
 export default {
   name: 'HelloWorld',
   props: {
-    msg: String
+    name: String
   },
   data() {
     return {

diff --git a/playground/stimulus/assets/page/vue/App.vue → ...d/stimulus/assets/vue/controllers/App.vue b/playground/stimulus/assets/page/vue/App.vue → ...d/stimulus/assets/vue/controllers/App.vue
@@ -1,13 +1,17 @@
 <template>
   <div class="content">
     <img alt="Vue logo" :src="logoVue" width="261" height="226" />
-    <HelloWorld msg="Hello Vue 3.0 + Vite" />
+    <HelloWorld :name="name" />
   </div>
 </template>
 
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from '../components/HelloWorld.vue'
 import logoVue from '~/images/logo-vue.svg';
+
+defineProps({
+  name: String
+})
 </script>
 
 <style>

diff --git a/playground/stimulus/assets/vue/controllers/Hello.vue b/playground/stimulus/assets/vue/controllers/Hello.vue
diff --git a/playground/stimulus/templates/base.html.twig b/playground/stimulus/templates/base.html.twig
@@ -17,7 +17,7 @@
     {% endblock %}
 </head>
 {# {{ stimulus_controller('symfony/ux-swup/swup', { containers: ['#content', '#nav'] }) }} #}
-<body>
+<body {{ stimulus_controller('symfony/ux-swup/swup', { containers: ['#content', '#nav'] }) }}>
     <nav id="nav">
         <div class="navbar">
             <div class="title">

diff --git a/playground/stimulus/templates/default/notify.html.twig b/playground/stimulus/templates/default/notify.html.twig
@@ -5,5 +5,6 @@
 {% block html_class %}page-notify{% endblock %}
 
 {% block content %}
+<div>Not tested</div>
 {% endblock %}
 
diff --git a/playground/stimulus/templates/default/translator.html.twig b/playground/stimulus/templates/default/translator.html.twig
@@ -6,7 +6,7 @@
 
 {% block content %}
 <div>
-    <div>Not using Stimulus</div>
+    <div>Not using Stimulus (incompatible with swup ? refresh needed)</div>
     <div id="hello"></div>
     <div id="say_hello"></div>
     <div id="invitation_title"></div>

diff --git a/playground/stimulus/templates/default/turbo.html.twig b/playground/stimulus/templates/default/turbo.html.twig
@@ -5,5 +5,6 @@
 {% block html_class %}page-turbo{% endblock %}
 
 {% block content %}
+<div>Not tested</div>
 {% endblock %}
 
diff --git a/playground/stimulus/templates/default/vue.html.twig b/playground/stimulus/templates/default/vue.html.twig
@@ -5,15 +5,6 @@
 {% block html_class %}page-vue{% endblock %}
 
 {% block content %}
-<div id="app"></div>
+<div {{ vue_component('App', { 'name': 'Vite, Stimulus & Vue' }) }}></div>
 {% endblock %}
 
-{% block stylesheets %}
-{{ parent() }}
-{{ vite_entry_link_tags('pageVue') }}
-{% endblock %}
-
-{% block javascripts %}
-{{ parent() }}
-{{ vite_entry_script_tags('pageVue') }}
-{% endblock %}
diff --git a/playground/stimulus/vite.config.js b/playground/stimulus/vite.config.js
@@ -2,7 +2,6 @@ import { defineConfig } from 'vite'
 import { dirname, resolve } from 'path';
 
 import symfonyPlugin from 'vite-plugin-symfony';
-// import { stimulusPlugin } from 'vite-plugin-symfony/stimulus/plugin'
 import vuePlugin from "@vitejs/plugin-vue";
 import reactPlugin from '@vitejs/plugin-react';
 import { fileURLToPath } from 'url';
@@ -12,7 +11,6 @@ const sharedDir = resolve(playgroundDir, '../../shared')
 
 export default defineConfig({
   plugins: [
-    // stimulusPlugin(),
     vuePlugin(),
     reactPlugin(),
     symfonyPlugin({
@@ -27,17 +25,11 @@ export default defineConfig({
     manifest: true,
     rollupOptions: {
       input: {
-        // "pageVue": "./assets/page/vue/main.js",
-        // "pageReact": "./assets/page/react/main.jsx",
-        // "pageWelcome": "./assets/page/welcome/index.js",
+        "pageVue": "./assets/page/vue/main.js",
+        "pageReact": "./assets/page/react/main.jsx",
         "pageTranslator": "./assets/page/translator/index.js",
         "app": "./assets/app.js",
         "theme": "./assets/theme.scss"
-      },
-      output: {
-        // manualChunks: {
-        //   vue: ['vue']
-        // }
       }
     },