refactor: migrate webpack mix to vite (#615)

ArkEcosystem · Apr 24, 2024 · 9f019fa · 9f019fa
1 parent 064bc0c
commit 9f019fa
Show file tree

Hide file tree

Showing 12 changed files with 103 additions and 58 deletions.
diff --git a/examples/ui.md b/examples/ui.md
@@ -189,10 +189,13 @@ yarn add -D compressorjs
 @endpush
 ```
 
-3. Open `webpack.mix.js` file and copy the `compress-image.js` script into the public folder:
+3. Open `vite.config.js` file and copy the `compress-image.js` script into the public folder:
 ```js
-mix
-    .js('vendor/arkecosystem/foundation/resources/assets/js/compress-image.js', 'public/js/compress-image.js')
+laravel([
+    ...
+
+    'vendor/arkecosystem/foundation/resources/assets/js/compress-image.js',
+])
 ```
 
 #### Crop functionality (optional)
@@ -212,8 +215,11 @@ mix
 3. Copy the `crop-image.js` script into the public folder:
 
 ```js
-mix
-    .js('vendor/arkecosystem/foundation/resources/assets/js/crop-image.js', 'public/js/crop-image.js')
+laravel([
+    ...
+
+    'vendor/arkecosystem/foundation/resources/assets/js/crop-image.js',
+])
 ```
 
 #### How to use
@@ -288,10 +294,13 @@ yarn add -D compressorjs
 @endpush
 ```
 
-3. Open `webpack.mix.js` file and copy the `compress-image.js` script into the public folder:
+3. Open `vite.config.js` file and copy the `compress-image.js` script into the public folder:
 ```js
-mix
-    .js('vendor/arkecosystem/foundation/resources/assets/js/compress-image.js', 'public/js/compress-image.js')
+laravel([
+    ...
+
+    'vendor/arkecosystem/foundation/resources/assets/js/compress-image.js',
+])
 ```
 
 #### Sort functionality (optional)
@@ -880,9 +889,13 @@ import CustomChart from "@ui/js/chart.js";
 window.CustomChart = CustomChart;
 ```
 
-3. On `webpack.mix.js` extract `chart.js` module:
+3. On `vite.config.js` extract `chart.js` module:
 ```js
-mix.extract(['chart.js']);
+laravel([
+    ...
+
+    'vendor/arkecosystem/foundation/resources/assets/js/chart.js',
+])
 ```
 
 4. Use the component:

diff --git a/laravel-mix/markdownPlugin.js b/laravel-mix/markdownPlugin.js
@@ -1,3 +1,5 @@
+// TODO: refactor to work with vite - https://app.clickup.com/t/86dtberve
+
 const mix = require('laravel-mix');
 
 class MarkdownPlugin {

diff --git a/resources/views/pages/blog/article.blade.php b/resources/views/pages/blog/article.blade.php
@@ -3,7 +3,7 @@
     @section('title', trans('metatags.blog.article-title', ['title' => $article->title]))
 
     @push('scripts')
-        {{-- <script src="{{ mix('js/prism.js') }}"></script> --}}
+        {{-- @vite('resources/js/prism.js') --}}
         <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
     @endpush
 

diff --git a/resources/views/pages/includes/compress-image-scripts.blade.php b/resources/views/pages/includes/compress-image-scripts.blade.php
@@ -1 +1 @@
-<script src="{{ mix('js/compress-image.js') }}"></script>
+@vite('resources/js/compress-image.js')
diff --git a/resources/views/pages/includes/cookie-banner.blade.php b/resources/views/pages/includes/cookie-banner.blade.php
@@ -19,7 +19,8 @@
     $initMethods[] = sprintf("init({ appName: '%s', domain: '%s', contactUrl: '%s' })", config("app.name"), $domain, $contactUrl);
 @endphp
 
-<script src="{{ mix('js/cookie-consent.js') }}"></script>
+@vite('resources/js/cookie-consent.js')
+
 <script>
     window.addEventListener('load', () => CookieBanner.{!! implode('.', $initMethods) !!});
 </script>
diff --git a/resources/views/pages/includes/crop-image-scripts.blade.php b/resources/views/pages/includes/crop-image-scripts.blade.php
@@ -1 +1 @@
-<script src="{{ mix('js/crop-image.js') }}"></script>
+@vite('resources/js/crop-image.js')
diff --git a/resources/views/pages/includes/layout-body.blade.php b/resources/views/pages/includes/layout-body.blade.php
@@ -50,9 +50,7 @@
     @stack('footer')
 
     <!-- Scripts -->
-    <script src="{{ mix('js/manifest.js') }}" defer></script>
-    <script src="{{ mix('js/vendor.js') }}" defer></script>
-    <script src="{{ mix('js/app.js') }}" defer></script>
+    @vite('resources/js/app.js')
 
     @if (config('tracking.analytics.key') && Visitor::isEuropean())
         <x-ark-pages-includes-cookie-banner

diff --git a/resources/views/pages/includes/layout-head.blade.php b/resources/views/pages/includes/layout-head.blade.php
@@ -45,7 +45,7 @@
     {{ $slot }}
 
     <!-- Styles -->
-    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+    @vite('resources/css/app.css')
     @livewireStyles
 
     @if (config('tracking.analytics.key') && Visitor::isEuropean())

diff --git a/resources/views/pages/includes/markdown-scripts.blade.php b/resources/views/pages/includes/markdown-scripts.blade.php
@@ -1,6 +1,6 @@
 @props(['toolbar' => 'basic'])
-<script src="{{ mix('js/markdown-editor.js') }}"></script>
-<link rel="stylesheet" href="{{ mix('css/markdown-editor.css') }}">
+
+@vite(['resources/js/markdown-editor.js', 'resources/css/markdown-editor.css'])
 
 @unless($toolbar === 'basic')
     @include('ark::inputs.includes.markdown.embed-link-modal')

diff --git a/tests/Blog/TestCase.php b/tests/Blog/TestCase.php
@@ -26,7 +26,7 @@ protected function setUp(): void
     {
         parent::setUp();
 
-        $this->withoutMix();
+        $this->withoutVite();
         $this->loadMigrationsFrom(dirname(__DIR__).'/database/migrations');
         $this->loadMigrationsFrom(__DIR__.'/database/migrations');
     }

diff --git a/usage/fortify.md b/usage/fortify.md
@@ -116,7 +116,7 @@ private function registerDataBags(): void
 
 ```blade
 @push('scripts')
-    <script src="{{ mix('js/file-download.js')}}"></script>
+    @vite('resources/js/file-download.js')
 @endpush
 ```
 

diff --git a/usage/ui.md b/usage/ui.md
@@ -19,15 +19,22 @@ Since this package relies on a few 3rd party packages, you will need to have the
 2. Import the vendor css assets in your `app.css` file
 3. Import the vendor `tailwind.config.js` file in your own tailwind config and build on top of that if you need additional changes
 4. Use the components in your project with `<x-ark-component>`
-5. Add the following snippet to your `webpack.mix.js` file to be able to use the `@ui` alias:
+5. Add the following snippet to your `vite.config.js` file to be able to use the `@ui` alias:
 
 ```js
-mix.webpackConfig({
+defineConfig({
+    ...
+
     resolve: {
         alias: {
-            '@ui': path.resolve(__dirname, 'vendor/arkecosystem/foundation/resources/assets/')
-        }
-    }
+            "@ui": path.resolve(
+                __dirname,
+                "vendor/arkecosystem/foundation/resources/assets/"
+            ),
+        },
+    },
+
+    ...
 })
 ...
 ```
@@ -57,17 +64,21 @@ The navigation bar makes use of our own PHP implementation of [picasso](https://
 
 ### Clipboard
 
-1. Add clipboard to Laravel Mix config
+1. Add clipboard to `vite.config.js` config
 
 ```js
-.copy('vendor/arkecosystem/foundation/resources/assets/js/clipboard.js', 'public/js/clipboard.js')
+laravel([
+    ...
+
+    'vendor/arkecosystem/foundation/resources/assets/js/clipboard.js',
+])
 ```
 
 2. Add clipboard to any pages that need it
 
 ```blade
 @push('scripts')
-    <script src="{{ mix('js/clipboard.js')}}"></script>
+    @vite('resources/js/clipboard.js')
 @endpush
 ```
 
@@ -211,6 +222,7 @@ Assigning to the `window` object is now done in the markdown script itself, ther
 3. Configure webpack.mix with the markdown plugin
 
 ```js
+// TODO: update to vite config - https://app.clickup.com/t/86dtberve
 // Import the following script in the `webpack.mix.js` file
 require('./vendor/arkecosystem/foundation/laravel-mix/markdownPlugin.js');
 
@@ -260,45 +272,55 @@ Accepts `full` for all the plugins and `basic` for only text related buttons.
 
 ### Tags input
 
-1. Add taggle dependency `yarn add taggle` and ensure to copy the scripts to the public directory:
+1. Add taggle dependency `yarn add taggle`
+
+2. Update `vite.config.js`:
 
 ```js
-// webpack.mix.js file
-    mix.copy('node_modules/taggle/dist/taggle.min.js', 'public/js/taggle.js')
+laravel([
+    ...
+
+    'node_modules/taggle/dist/taggle.min.js',
+])
 ```
 
-2. Add the Tags script to the main js file
+3. Add the Tags script to the main js file
 
 ```js
 import Tags from "@ui/js/tags";
 
 window.Tags = Tags;
 ```
 
-3. Ensure to import the taggle scripts
+4. Ensure to import the taggle scripts
 
 ```html
 @push('scripts')
-    <script src="{{ mix('js/taggle.js')}}"></script>
+    @vite('resources/js/taggle.js')
 @endpush
 ```
 
-4. Use the component like the rest of the components. It accepts `tags` and `allowed-tags` props.
+5. Use the component like the rest of the components. It accepts `tags` and `allowed-tags` props.
 
 ```html
 <x-ark-tags :tags="['tag1', 'tag2']" name="tags" :allowed-tags="['taga', 'tagb']" />
 ```
 
 ### User tagger input
 
-1. Add tributejs dependency `yarn add tributejs`  and ensure to copy the scripts to the public directory:
+1. Add tributejs dependency `yarn add tributejs`
+
+2. Update `vite.config.js`:
 
 ```js
-// webpack.mix.js file
-    mix.copy('node_modules/tributejs/dist/tribute.min.js', 'public/js/tribute.js')
+laravel([
+    ...
+
+    'node_modules/tributejs/dist/tribute.min.js',
+])
 ```
 
-2. Import the user tagger script into the main js file and import the styles in your css file
+3. Import the user tagger script into the main js file and import the styles in your css file
 
 ```js
 import "@ui/js/user-tagger.js";
@@ -308,15 +330,15 @@ import "@ui/js/user-tagger.js";
 @import "../../vendor/arkecosystem/foundation/resources/assets/css/_user_tagger.css";
 ```
 
-3. Ensure to import the tributejs scripts in the places where the component will be used
+4. Ensure to import the tributejs scripts in the places where the component will be used
 
 ```html
 @push('scripts')
-    <script src="{{ mix('js/tribute.js')}}"></script>
+    @vite('resources/js/tribute.js')
 @endpush
 ```
 
-4. Use the component like you use the textarea input
+5. Use the component like you use the textarea input
 
 ```html
 <x-ark-user-tagger
@@ -330,7 +352,7 @@ import "@ui/js/user-tagger.js";
 >{{ $body }}</x-ark-user-tagger>
 ```
 
-5. This component makes a GET request to the `/api/users/autocomplete` endpoint with the query as `q`, that query should be used to search the users and should return them in the following format:
+6. This component makes a GET request to the `/api/users/autocomplete` endpoint with the query as `q`, that query should be used to search the users and should return them in the following format:
 
 Note: You can change the the URL by using the `endpoint` prop.
 
@@ -350,7 +372,7 @@ Note: You can change the the URL by using the `endpoint` prop.
 ]
 ```
 
-6. The component accepts a `usersInContext` prop that expects an array of usernames. These usernames will be sent in the search query request as  `context` and can be used to show those users first in the response. Useful to show the user in the conversation first.
+7. The component accepts a `usersInContext` prop that expects an array of usernames. These usernames will be sent in the search query request as  `context` and can be used to show those users first in the response. Useful to show the user in the conversation first.
 
 #### Livewire modals
 
@@ -481,17 +503,21 @@ Tippy will now automatically work with our usual tooltip locations. If you need
 yarn add -D swiper
 ```
 
-2. Add swiper to Laravel Mix config
+2. Add swiper to `vite.config.js`
 
 ```js
-.copy('node_modules/swiper/swiper-bundle.min.js', 'public/js/swiper.js')
+laravel([
+    ...
+
+    'node_modules/swiper/swiper-bundle.min.js',
+])
 ```
 
 3. Add swiper to any pages that need it
 
 ```blade
 @push('scripts')
-    <script src="{{ mix('js/swiper.js')}}"></script>
+    @vite('resources/js/swiper-bundle.min.js')
 @endpush
 ```
 
@@ -543,17 +569,21 @@ Livewire::component('notifications-indicator', NotificationsIndicator::class);
 
 ### Prism Codeblock
 
-1. Add prism js to Laravel webpack mix
+1. Add prism js to `vite.config.js`
 
 ```js
-.js('vendor/arkecosystem/foundation/resources/assets/js/prism.js', 'public/js')
+laravel([
+    ...
+
+    'vendor/arkecosystem/foundation/resources/assets/js/prism.js',
+])
 ```
 
 2. Add prism to any pages that need it
 
 ```blade
 @push('scripts')
-    <script src="{{ mix('js/prism.js')}}"></script>
+    @vite('resources/js/prism.js')
 @endpush
 ```
 
@@ -777,17 +807,18 @@ window.Pagination = Pagination
 2. Import the cookie banner script in your main js file (usually `resources/js/app.js`)
 
 ```js
-import CookieBanner from "@ui/js/cookie-banner";
+import CookieBanner from "@ui/js/cookiebanner";
 window.CookieBanner = CookieBanner;
 ```
 
-1. Add the cookieconsent library into your `webpack.mix.js` file
+1. Add the cookieconsent library into your `vite.config.js` file
 
 ```js
-mix.copy(
-    "vendor/arkecosystem/foundation/resources/assets/js/cookieconsent.js",
-    "public/js/cookie-consent.js"
-)
+laravel([
+    ...
+
+    'vendor/arkecosystem/foundation/resources/assets/js/cookieconsent.js',
+])
 ```