Migrate demo app to Vite (#70)

Author: pascalbaljet

.eslintrc.js renamed to .eslintrc.cjs

@@ -13,5 +13,8 @@ module.exports = {
         "vue/require-default-prop": 0,
         "indent": ["error", 4],
         "quotes": ["error", "double"],
+        "object-curly-spacing": ["error", "always"],
+        "semi": ["error", "always"],
+        "comma-spacing": ["error", { "before": false, "after": true }]
     }
-}
+};

.github/workflows/php.yml

@@ -40,11 +40,11 @@ jobs:
       - name: "Install locked dependencies with npm"
         run: |
           npm ci --ignore-scripts
-          cd app
-          npm ci --ignore-scripts
 
       - name: Build package
-        run: npm run build
+        run: |
+          npm run build
+          npm pack
 
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
@@ -58,7 +58,8 @@ jobs:
           cd app
           cp .env.example .env
           composer update --${{ matrix.dependency-version }} --prefer-dist --no-interaction --no-suggest
-          npm run production
+          npm ci --ignore-scripts
+          npm run build
           touch database/database.sqlite
           php artisan migrate:fresh --seed
           php artisan dusk:chrome-driver `/opt/google/chrome/chrome --version | cut -d " " -f3 | cut -d "." -f1`

.gitignore

@@ -31,3 +31,5 @@ coverage
 app/public/css/app.css
 app/public/js/app.js
 app/public/mix-manifest.json
+
+protonemedia-inertiajs-tables-laravel-query-builder-*.tgz

app/composer.json

@@ -10,15 +10,15 @@
     "require": {
         "php": "^8.0.2",
         "guzzlehttp/guzzle": "^7.2",
-        "inertiajs/inertia-laravel": "^0.5.4",
+        "inertiajs/inertia-laravel": "^0.6.3",
         "laravel/breeze": "^1.9",
         "laravel/dusk": "^6.24",
-        "laravel/framework": "^9.11",
+        "laravel/framework": "^9.19.0",
         "laravel/sanctum": "^2.8",
         "laravel/tinker": "^2.7",
+        "protonemedia/inertiajs-tables-laravel-query-builder": "@dev",
         "spatie/laravel-query-builder": "^5.0",
-        "tightenco/ziggy": "^1.0",
-        "protonemedia/inertiajs-tables-laravel-query-builder": "@dev"
+        "tightenco/ziggy": "^1.0"
     },
     "require-dev": {
         "fakerphp/faker": "^1.9.1",

app/package-lock.json

@@ -1,35 +1,26 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "mix",
-        "watch": "mix watch",
-        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "hot": "mix watch --hot",
-        "prod": "npm run production",
-        "production": "mix --production --mix-config=webpack.ssr.mix.js && mix --production"
-    },
-    "dependencies": {
-        "@protonemedia/inertiajs-tables-laravel-query-builder": "file:.."
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
+        "@protonemedia/inertiajs-tables-laravel-query-builder": "file:../protonemedia-inertiajs-tables-laravel-query-builder-2.1.0.tgz",
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue3": "^0.6.0",
         "@inertiajs/progress": "^0.2.7",
         "@inertiajs/server": "^0.1.0",
         "@tailwindcss/forms": "^0.5.0",
-        "@vue/compiler-sfc": "^3.2.31",
-        "@vue/server-renderer": "^3.2.31",
+        "@vitejs/plugin-vue": "^3.0",
         "autoprefixer": "^10.4.2",
         "axios": "^0.25",
         "eslint": "^8.18.0",
         "eslint-plugin-vue": "^9.1.1",
-        "laravel-mix": "^6.0.6",
+        "laravel-vite-plugin": "^0.5.0",
         "lodash": "^4.17.19",
         "postcss": "^8.4.6",
         "tailwindcss": "^3.1.0",
-        "vue": "^3.2.31",
-        "vue-loader": "^17.0.0",
-        "webpack-node-externals": "^3.0.0"
+        "vite": "^3.0",
+        "vue": "^3.2.31"
     }
 }

app/package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

app/postcss.config.js

@@ -5,7 +5,7 @@ import { Table } from "@protonemedia/inertiajs-tables-laravel-query-builder";
 // use this one for development:
 // import Table from "../../../../js/Components/Table.vue"
 
-defineProps(["users"])
+defineProps(["users"]);
 </script>
 
 <template>

app/resources/js/Pages/CustomTable.vue

@@ -5,7 +5,7 @@ import { Table } from "@protonemedia/inertiajs-tables-laravel-query-builder";
 // use this one for development:
 // import Table from "../../../../js/Components/Table.vue"
 
-defineProps(["companies", "users"])
+defineProps(["companies", "users"]);
 </script>
 
 <template>

app/resources/js/Pages/TwoTables.vue

@@ -5,7 +5,7 @@ import { Table } from "@protonemedia/inertiajs-tables-laravel-query-builder";
 // use this one for development:
 // import Table from "../../../../js/Components/Table.vue"
 
-defineProps(["users"])
+defineProps(["users"]);
 </script>
 
 <template>