Migrate from mix to vite

.github/workflows/release.yml

@@ -16,10 +16,10 @@ jobs:
         run: npm ci
 
       - name: Compile assets
-        run: npm run production
+        run: npm run build
 
       - name: Create zip
-        run: tar -czvf dist.tar.gz dist
+        run: tar -czvf dist.tar.gz resources/dist
 
       - name: Get Changelog
         id: changelog

.gitignore

@@ -1,5 +1,4 @@
 node_modules
 vendor
 dist
-mix-manifest.json
 composer.lock

composer.json

@@ -4,7 +4,7 @@
     "description": "Collaboration tools for Statamic 3",
     "license": "proprietary",
     "require": {
-        "statamic/cms": "^3.1 || ^4.0",
+        "statamic/cms": "^4.0",
         "pixelfear/composer-dist-plugin": "^0.1.4"
     },
     "extra": {
@@ -19,7 +19,7 @@
         },
         "download-dist": {
             "url": "https://github.com/statamic/collaboration/releases/download/{$version}/dist.tar.gz",
-            "path": "dist"
+            "path": "resources/dist"
         }
     },
     "autoload": {

package.json

@@ -1,17 +1,15 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "dev": "rm -rf resources/dist/build && vite",
+        "build": "vite build"
+    },
+    "dependencies": {
+        "vue": "^2.6.11"
     },
     "devDependencies": {
-        "cross-env": "^5.1",
-        "laravel-mix": "^4.0.7",
-        "vue-template-compiler": "^2.6.11"
+        "@vitejs/plugin-vue2": "^2.2.0",
+        "laravel-vite-plugin": "^0.7.2",
+        "vite": "^4.3.9"
     }
 }

resources/js/Workspace.js

@@ -1,3 +1,6 @@
+import buddyIn from '../audio/buddy-in.mp3'
+import buddyOut from '../audio/buddy-out.mp3'
+
 export default class Workspace {
 
     constructor(container) {
@@ -423,13 +426,23 @@ export default class Workspace {
 
     playAudio(file) {
         let el = document.createElement('audio');
-        el.src = cp_url(`../vendor/collaboration/audio/${file}.mp3`);
+        el.src = this.getViteAudioFile(file);
         document.body.appendChild(el);
         el.volume = 0.25;
         el.addEventListener('ended', () => el.remove());
         el.play();
     }
 
+    getViteAudioFile(file) {
+        if (file === 'buddy-in') {
+            return buddyIn;
+        } else if (file === 'buddy-out') {
+            return buddyOut;
+        }
+
+        console.error('audio not found');
+    }
+
     initializeValuesAndMeta() {
         this.lastValues = clone(Statamic.$store.state.publish[this.container.name].values);
         this.lastMetaValues = clone(Statamic.$store.state.publish[this.container.name].meta);

src/ServiceProvider.php

@@ -7,8 +7,11 @@
 
 class ServiceProvider extends AddonServiceProvider
 {
-    protected $scripts = [__DIR__.'/../dist/js/collaboration.js'];
-    protected $publishables = [__DIR__.'/../dist/audio' => 'audio'];
+    protected $vite = [
+        'input' => ['resources/js/collaboration.js'],
+        'publicDirectory' => 'resources/dist',
+        'hotFile' => __DIR__.'/../resources/dist/hot',
+    ];
 
     public function boot()
     {

vite.config.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+import vue from '@vitejs/plugin-vue2';
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: [
+                'resources/js/collaboration.js'
+            ],
+            refresh: true,
+            publicDirectory: 'resources/dist',
+            hotFile: 'resources/dist/hot',
+        }),
+        vue(),
+    ],
+});