Proof of concept : Test overwriting by Sprinkle

The component in `app/assets/components` will be overwritten by `sprinkle/assets/components`
userfrosting · Sep 14, 2023 · 35334c1 · 35334c1
1 parent f41b2ae
commit 35334c1
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 25 deletions.
diff --git a/app/assets/components/Resources.vue b/app/assets/components/Resources.vue
@@ -0,0 +1,32 @@
+<script setup>
+const resources = [
+    {
+        url: 'https://getbootstrap.com/docs/5.3/getting-started/introduction/',
+        title: 'Bootstrap quick start guide'
+    },
+    {
+        url: 'https://getbootstrap.com/docs/5.3/getting-started/webpack/',
+        title: 'Bootstrap Webpack guide'
+    },
+    {
+        url: 'https://getbootstrap.com/docs/5.3/getting-started/parcel/',
+        title: 'Bootstrap Parcel guide'
+    },
+    {
+        url: 'https://getbootstrap.com/docs/5.3/getting-started/vite/',
+        title: 'Bootstrap Vite guide'
+    },
+    {
+        url: 'https://getbootstrap.com/docs/5.3/getting-started/contribute/',
+        title: 'Contributing to Bootstrap'
+    },
+]
+</script>
+
+<template>
+    <ul class="uk-list">
+        <li v-for="item in resources">
+            <a class="uk-button uk-button-default" :href="item.url">{{ item.title }}</a>
+        </li>
+    </ul>
+</template>
diff --git a/app/assets/views/HomeView.vue b/app/assets/views/HomeView.vue
@@ -1,22 +1,5 @@
 <script setup>
-import axios from 'axios'
-import { ref } from 'vue'
-
-// Variables
-const resources = ref([])
-const loading = ref(false)
-
-// Methods 
-function getList() {
-    loading.value = true
-    axios.get('/api').then((response) => {
-        resources.value = response.data
-        loading.value = false
-    })
-}
-
-// Initial load
-getList()
+import Resources from '@/components/Resources.vue'
 </script>
 
 <template>
@@ -44,12 +27,7 @@ getList()
         <div style="padding-top: 25px; padding-bottom: 25px;"></div>
 
         <h1 class="uk-heading-divider">Additional resources</h1>
-        <ul class="uk-list">
-            <li v-for="item in resources">
-                <a class="uk-button uk-button-default" :href="item.url">#{{ item.number }} - {{ item.title }}</a>
-            </li>
-        </ul>
-        <button class="uk-button uk-button-primary" @click="getList()" :disabled='loading'>Reload Resources</button>
+        <Resources />
 
         <div style="padding-top: 25px; padding-bottom: 25px;"></div>
 

diff --git a/sprinkle/assets/components/Resources.vue b/sprinkle/assets/components/Resources.vue
@@ -0,0 +1,29 @@
+<script setup>
+import axios from 'axios'
+import { ref } from 'vue'
+
+// Variables
+const resources = ref([])
+const loading = ref(false)
+
+// Methods 
+function getList() {
+    loading.value = true
+    axios.get('/api').then((response) => {
+        resources.value = response.data
+        loading.value = false
+    })
+}
+
+// Initial load
+getList()
+</script>
+
+<template>
+    <ul class="uk-list">
+        <li v-for="item in resources">
+            <a class="uk-button uk-button-default" :href="item.url">#{{ item.number }} - {{ item.title }}</a>
+        </li>
+    </ul>
+    <button class="uk-button uk-button-primary" @click="getList()" :disabled='loading'>Reload Resources</button>
+</template>
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,5 +1,6 @@
 const Encore = require('@symfony/webpack-encore');
 const webpack = require('webpack');
+const path = require('path');
 
 // Manually configure the runtime environment if not already configured yet by the "encore" command.
 // It's useful when you use tools that rely on webpack.config.js file.
@@ -44,4 +45,12 @@ Encore
     // })
 ;
 
-module.exports = Encore.getWebpackConfig();
+// export the final configuration
+let config = Encore.getWebpackConfig();
+config.resolve.alias = {
+    '@': [
+        path.resolve(__dirname, './sprinkle/assets'),
+        path.resolve(__dirname, './app/assets'),
+    ]
+};
+module.exports = config;