Merge pull request #1 from Steelwix/dataRecover

fix symfony to use vue component bundle
Steelwix · Mar 3, 2023 · d09f8d6 · d09f8d6
2 parents 2d929c4 + 1e9adc7
commit d09f8d6
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 154 deletions.
diff --git a/assets/app.js b/assets/app.js
@@ -1,10 +1,28 @@
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
 
-import { createApp } from 'vue';
-import App from './js/App.vue';
-import Graf from './js/Graf.vue';
-import Dyma from './js/Dyma.vue';
-import Home from './js/Home.vue';
-createApp(App).mount('#vue-app');
-createApp(Graf).mount('#vue-grafikart');
-createApp(Dyma).mount('#vue-dyma');
-createApp(Home).mount('#vue-home');
+// any CSS you import will output into a single css file (app.css in this case)
+import './styles/app.css';
+
+// start the Stimulus application
+import './bootstrap';
+import { registerVueControllerComponents } from '@symfony/ux-vue';
+
+// Registers Vue.js controller components to allow loading them from Twig
+//
+// Vue.js controller components are components that are meant to be rendered
+// from Twig. These component can then rely on other components that won't be
+// called directly from Twig.
+//
+// By putting only controller components in `vue/controllers`, you ensure that
+// internal components won't be automatically included in your JS built file if
+// they are not necessary.
+registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/));
+
+// If you prefer to lazy-load your Vue.js controller components, in order to reduce to keep the JavaScript bundle the smallest as possible,
+// and improve performances, you can use the following line instead:
+//registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/, 'lazy'));
diff --git a/assets/js/App.vue b/assets/js/App.vue
diff --git a/assets/js/Dyma.vue b/assets/js/Dyma.vue
diff --git a/assets/js/Graf.vue b/assets/js/Graf.vue
diff --git a/assets/js/Home.vue b/assets/js/Home.vue
diff --git a/assets/styles/app.css b/assets/styles/app.css
@@ -1,3 +0,0 @@
-body {
-    background-color: lightgray;
-}

diff --git a/assets/vue/controllers/Home.vue b/assets/vue/controllers/Home.vue
@@ -0,0 +1,9 @@
+<template>
+    <div>Hello {{ name }}!</div>
+</template>
+
+<script setup>
+defineProps({
+    name: String
+});
+</script>
diff --git a/src/Controller/DefaultController.php b/src/Controller/DefaultController.php
@@ -12,12 +12,12 @@ class DefaultController extends AbstractController
     #[Route('/', name: 'app_home')]
     public function home(): Response
     {
-        $services = array();
-        $services[] = array("id" => 1, "title" => "FirstCode", "code" => "<?php example", "creator" => "Eric Mega", "release" => "02/03/2023");
-        $services[] = array("id" => 2, "title" => "MediaManager", "code" => "public function newIllustration()", "creator" => "Steelwix", "release" => "02/03/2023");
-        $services[] = array("id" => 3, "title" => "MessageGenerator", "code" => "getHappyMessage()", "creator" => "odmgidia", "release" => "02/03/2023");
-        $services[] = array("id" => 4, "title" => "DateCompare", "code" => "compareWithToday()", "creator" => "Steelwix", "release" => "02/03/2023");
-        $name = "Steelwix";
+        // $services = array();
+        // $services[] = array("id" => 1, "title" => "FirstCode", "code" => "<?php example", "creator" => "Eric Mega", "release" => "02/03/2023");
+        // $services[] = array("id" => 2, "title" => "MediaManager", "code" => "public function newIllustration()", "creator" => "Steelwix", "release" => "02/03/2023");
+        // $services[] = array("id" => 3, "title" => "MessageGenerator", "code" => "getHappyMessage()", "creator" => "odmgidia", "release" => "02/03/2023");
+        // $services[] = array("id" => 4, "title" => "DateCompare", "code" => "compareWithToday()", "creator" => "Steelwix", "release" => "02/03/2023");
+        $name = "My friend";
         return $this->render('default/main.html.twig', ['name' => $name]);
     }
     #[Route('/default', name: 'app_default')]

diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -1,36 +1,23 @@
-<!Doctype html>
+<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<title>
 			{% block title %}Welcome!
 			{% endblock %}
 		</title>
-		<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
-		<link rel="preconnect" href="https://fonts.googleapis.com">
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-		<link href="https://fonts.googleapis.com/css2?family=Kanit:ital@1&display=swap" rel="stylesheet">
-		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
-		<meta
-		name="viewport" content="width=device-width, initial-scale=1.0">
+		<link
+		rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
 		{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
-		{{ encore_entry_link_tags('app') }}
-
-		{{ encore_entry_script_tags('app') }}
 		{% block stylesheets %}
 			{{ encore_entry_link_tags('app') }}
-			<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
 		{% endblock %}
 
 		{% block javascripts %}
-			<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-			<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
 			{{ encore_entry_script_tags('app') }}
 		{% endblock %}
 	</head>
-	<body class="bg-dark text-light">
-		{% include "_partials/_nav.html.twig" %}
+	<body>
 		{% block body %}{% endblock %}
 	</body>
 </html>
diff --git a/templates/default/main.html.twig b/templates/default/main.html.twig
@@ -1,10 +1,8 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}PHP HUB
+{% block title %}Hello MainController!
 {% endblock %}
 
 {% block body %}
-	<div
-		id="vue-home">{# L'appli Vue.js vivra ici #}
-	</div>
+	<div {{ vue_component('Home', { 'name': name } ) }}></div>
 {% endblock %}
diff --git a/webpack.config.js b/webpack.config.js
@@ -55,13 +55,13 @@ Encore
         config.useBuiltIns = 'usage';
         config.corejs = '3.23';
     })
+    .enableVueLoader()
 
     // enables Sass/SCSS support
     //.enableSassLoader()
 
     // uncomment if you use TypeScript
-    .enableTypeScriptLoader()
-    .enableVueLoader(() => { }, { runtimeCompilerBuild: false })
+    //.enableTypeScriptLoader()
 
     // uncomment if you use React
     //.enableReactPreset()
@@ -75,4 +75,3 @@ Encore
     ;
 
 module.exports = Encore.getWebpackConfig();
-