From 502aefd7a8f37b082e57100c5792de84b5b89615 Mon Sep 17 00:00:00 2001
From: ale <ale.tasistro@gmail.com>
Date: Tue, 8 Jul 2025 16:18:37 -0300
Subject: [PATCH] =?UTF-8?q?Movida=20l=C3=B3gica=20para=20registrar=20compo?=
 =?UTF-8?q?nentes=20a=20app.js=20y=20cambios=20para=20vite?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/app.js        | 54 ++++++++++++--------------------------
 resources/js/components.js | 25 ------------------
 2 files changed, 17 insertions(+), 62 deletions(-)
 delete mode 100644 resources/js/components.js

diff --git a/resources/js/app.js b/resources/js/app.js
index 40a3961..914b4f8 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,45 +1,25 @@
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
+import * as bulmaToast from 'bulma-toast';
+import Vue from '../../node_modules/vue/dist/vue.esm.js';
 import axios from 'axios';
-import Vue from 'vue';
-
-window.Vue = require('vue');
-window.Event = new Vue();
-window.axios = axios;
-window.bulmaToast = require('bulma-toast');
-
-/**
- * The following block of code may be used to automatically register your
- * Vue components. It will recursively scan this directory for the Vue
- * components and automatically register them with their "basename".
- *
- * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
- */
-import './components';
 import store from "./store";
 
-/**
- * Global methods
- */
-Vue.prototype.$toast = function (mensaje, duration = 2000) {
-    return window.bulmaToast.toast({
-        message: mensaje,
-        duration: duration,
-        type: 'is-danger',
-        position: 'bottom-center',
-    });
-}
+window.Vue = Vue;
+window.Event = new Vue();
+window.axios = axios;
+window.bulmaToast = bulmaToast;
+
+const components = import.meta.glob('./components/**/*.vue', { eager: true });
+Object.entries(components).forEach(([path, module]) => {
+    let name = path
+        .replace(/^\.\/components\//, '') // Remove leading folder
+        .replace(/\.vue$/, '')            // Remove file extension
+        .replace(/\//g, '-')              // Replace subfolders with hyphens
+        .replace(/([a-z])([A-Z])/g, '$1-$2') // camelCase to kebab-case
+        .toLowerCase();                   // Enforce kebab-case for HTML
+    Vue.component(name, module.default);
+});
 
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
 new Vue({
     el: '#root',
     store,
 });
-
diff --git a/resources/js/components.js b/resources/js/components.js
deleted file mode 100644
index d2ca0bb..0000000
--- a/resources/js/components.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import Vue from 'vue';
-
-const requireComponent = require.context('./components', true, /\.vue$/);
-
-// Registro automático de componentes:
-//  e.g. components/foo/bar/UnComponente.vue
-//       se registra como 'foo-bar-un-componente'
-requireComponent.keys().forEach(fileName => {
-    // Get the component config
-    const componentConfig = requireComponent(fileName);
-    // Get the PascalCase name of the component
-    const componentName = fileName
-        .replace(/^\.\/(.*)\.\w+$/, '$1')    // Remove "./" from the beginning and the file extension from the end
-        .replace(/\//g, '-')                 // Replace directories with hyphens
-        .replace(/([a-z])([A-Z])/g, '$1-$2') // Insert hyphen between camelCase words
-        .toLowerCase()                       // Convert to lowercase
-    // Globally register the component
-    Vue.component(
-        componentName,
-        // Look for the component options on `.default`, which will
-        // exist if the component was exported with `export default`,
-        // otherwise fall back to module's root.
-        componentConfig.default || componentConfig
-    );
-});