From ce8257bbb58ed86520bec095223eee7fe3073e52 Mon Sep 17 00:00:00 2001 From: Alex Barnsley <8069294+alexbarnsley@users.noreply.github.com> Date: Tue, 23 Apr 2024 19:53:48 +0100 Subject: [PATCH] refactor: migrate webpack mix to vite --- examples/ui.md | 33 ++++-- laravel-mix/markdownPlugin.js | 2 + resources/views/pages/blog/article.blade.php | 2 +- .../includes/compress-image-scripts.blade.php | 2 +- .../pages/includes/cookie-banner.blade.php | 3 +- .../includes/crop-image-scripts.blade.php | 2 +- .../pages/includes/layout-body.blade.php | 4 +- .../pages/includes/layout-head.blade.php | 2 +- .../pages/includes/markdown-scripts.blade.php | 4 +- tests/Blog/TestCase.php | 2 +- usage/fortify.md | 2 +- usage/ui.md | 103 ++++++++++++------ 12 files changed, 103 insertions(+), 58 deletions(-) diff --git a/examples/ui.md b/examples/ui.md index 133e36b4b..52a63109c 100644 --- 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 index 399b9be2e..51ecaeca5 100644 --- 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 index fd40708e2..773303bb3 100644 --- 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') - {{-- --}} + {{-- @vite('resources/js/prism.js') --}} @endpush diff --git a/resources/views/pages/includes/compress-image-scripts.blade.php b/resources/views/pages/includes/compress-image-scripts.blade.php index 7fb10c920..7159d4845 100644 --- a/resources/views/pages/includes/compress-image-scripts.blade.php +++ b/resources/views/pages/includes/compress-image-scripts.blade.php @@ -1 +1 @@ - +@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 index b36ede6ce..bdc0c5aab 100644 --- 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 - +@vite('resources/js/cookie-consent.js') + diff --git a/resources/views/pages/includes/crop-image-scripts.blade.php b/resources/views/pages/includes/crop-image-scripts.blade.php index 6df6c69da..7fa3135cc 100644 --- a/resources/views/pages/includes/crop-image-scripts.blade.php +++ b/resources/views/pages/includes/crop-image-scripts.blade.php @@ -1 +1 @@ - +@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 index a012d29a5..e8d413607 100644 --- a/resources/views/pages/includes/layout-body.blade.php +++ b/resources/views/pages/includes/layout-body.blade.php @@ -50,9 +50,7 @@ @stack('footer') - - - + @vite('resources/js/app.js') @if (config('tracking.analytics.key') && Visitor::isEuropean()) - + @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 index 574356fe4..5ef329642 100644 --- 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']) - - + +@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 index 8a90f40b0..deb409479 100644 --- 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 index 2bec83cd0..17c926679 100644 --- a/usage/fortify.md +++ b/usage/fortify.md @@ -116,7 +116,7 @@ private function registerDataBags(): void ```blade @push('scripts') - + @vite('resources/js/file-download.js') @endpush ``` diff --git a/usage/ui.md b/usage/ui.md index 0fb05d9f2..97d594197 100644 --- 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 `` -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') - + @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,14 +272,19 @@ 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"; @@ -275,15 +292,15 @@ 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') - + @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 @@ -291,14 +308,19 @@ window.Tags = Tags; ### 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') - + @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 {{ $body }} ``` -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') - + @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') - + @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', +]) ```