From 018c0ae683e19136a2f3177ea33d6b5b09d94b12 Mon Sep 17 00:00:00 2001 From: Jess Archer Date: Wed, 1 Jun 2022 23:44:02 +1000 Subject: [PATCH] [1.x] Improve Vite compatibility (#154) * Use jsx extension for files containing JSX * Switch to ESM imports This improves the transition for Vite users. --- src/Console/InstallsInertiaStacks.php | 12 +++++++----- stubs/default/resources/js/app.js | 2 +- .../{ApplicationLogo.js => ApplicationLogo.jsx} | 0 .../js/Components/{Button.js => Button.jsx} | 0 .../js/Components/{Checkbox.js => Checkbox.jsx} | 0 .../js/Components/{Dropdown.js => Dropdown.jsx} | 0 .../resources/js/Components/{Input.js => Input.jsx} | 0 .../resources/js/Components/{Label.js => Label.jsx} | 0 .../js/Components/{NavLink.js => NavLink.jsx} | 0 .../{ResponsiveNavLink.js => ResponsiveNavLink.jsx} | 0 .../{ValidationErrors.js => ValidationErrors.jsx} | 0 .../Layouts/{Authenticated.js => Authenticated.jsx} | 0 .../resources/js/Layouts/{Guest.js => Guest.jsx} | 0 .../Auth/{ConfirmPassword.js => ConfirmPassword.jsx} | 0 .../Auth/{ForgotPassword.js => ForgotPassword.jsx} | 0 .../resources/js/Pages/Auth/{Login.js => Login.jsx} | 0 .../js/Pages/Auth/{Register.js => Register.jsx} | 0 .../Auth/{ResetPassword.js => ResetPassword.jsx} | 0 .../Pages/Auth/{VerifyEmail.js => VerifyEmail.jsx} | 0 .../js/Pages/{Dashboard.js => Dashboard.jsx} | 0 .../resources/js/Pages/{Welcome.js => Welcome.jsx} | 0 stubs/inertia-react/resources/js/{app.js => app.jsx} | 2 +- stubs/inertia-react/resources/js/bootstrap.js | 9 ++++++--- stubs/inertia-react/resources/js/{ssr.js => ssr.jsx} | 0 stubs/inertia-react/webpack.ssr.mix.js | 2 +- stubs/inertia-vue/resources/js/app.js | 2 +- stubs/inertia-vue/resources/js/bootstrap.js | 9 ++++++--- 27 files changed, 23 insertions(+), 15 deletions(-) rename stubs/inertia-react/resources/js/Components/{ApplicationLogo.js => ApplicationLogo.jsx} (100%) rename stubs/inertia-react/resources/js/Components/{Button.js => Button.jsx} (100%) rename stubs/inertia-react/resources/js/Components/{Checkbox.js => Checkbox.jsx} (100%) rename stubs/inertia-react/resources/js/Components/{Dropdown.js => Dropdown.jsx} (100%) rename stubs/inertia-react/resources/js/Components/{Input.js => Input.jsx} (100%) rename stubs/inertia-react/resources/js/Components/{Label.js => Label.jsx} (100%) rename stubs/inertia-react/resources/js/Components/{NavLink.js => NavLink.jsx} (100%) rename stubs/inertia-react/resources/js/Components/{ResponsiveNavLink.js => ResponsiveNavLink.jsx} (100%) rename stubs/inertia-react/resources/js/Components/{ValidationErrors.js => ValidationErrors.jsx} (100%) rename stubs/inertia-react/resources/js/Layouts/{Authenticated.js => Authenticated.jsx} (100%) rename stubs/inertia-react/resources/js/Layouts/{Guest.js => Guest.jsx} (100%) rename stubs/inertia-react/resources/js/Pages/Auth/{ConfirmPassword.js => ConfirmPassword.jsx} (100%) rename stubs/inertia-react/resources/js/Pages/Auth/{ForgotPassword.js => ForgotPassword.jsx} (100%) rename stubs/inertia-react/resources/js/Pages/Auth/{Login.js => Login.jsx} (100%) rename stubs/inertia-react/resources/js/Pages/Auth/{Register.js => Register.jsx} (100%) rename stubs/inertia-react/resources/js/Pages/Auth/{ResetPassword.js => ResetPassword.jsx} (100%) rename stubs/inertia-react/resources/js/Pages/Auth/{VerifyEmail.js => VerifyEmail.jsx} (100%) rename stubs/inertia-react/resources/js/Pages/{Dashboard.js => Dashboard.jsx} (100%) rename stubs/inertia-react/resources/js/Pages/{Welcome.js => Welcome.jsx} (100%) rename stubs/inertia-react/resources/js/{app.js => app.jsx} (95%) rename stubs/inertia-react/resources/js/{ssr.js => ssr.jsx} (100%) diff --git a/src/Console/InstallsInertiaStacks.php b/src/Console/InstallsInertiaStacks.php index 61cb593be..66bc6ff1c 100644 --- a/src/Console/InstallsInertiaStacks.php +++ b/src/Console/InstallsInertiaStacks.php @@ -173,8 +173,8 @@ protected function installInertiaReactStack() copy(__DIR__.'/../../stubs/inertia-common/routes/auth.php', base_path('routes/auth.php')); // "Dashboard" Route... - $this->replaceInFile('/home', '/dashboard', resource_path('js/Pages/Welcome.js')); - $this->replaceInFile('Home', 'Dashboard', resource_path('js/Pages/Welcome.js')); + $this->replaceInFile('/home', '/dashboard', resource_path('js/Pages/Welcome.jsx')); + $this->replaceInFile('Home', 'Dashboard', resource_path('js/Pages/Welcome.jsx')); $this->replaceInFile('/home', '/dashboard', app_path('Providers/RouteServiceProvider.php')); // Tailwind / Webpack... @@ -182,10 +182,12 @@ protected function installInertiaReactStack() copy(__DIR__.'/../../stubs/inertia-common/tailwind.config.js', base_path('tailwind.config.js')); copy(__DIR__.'/../../stubs/inertia-common/webpack.mix.js', base_path('webpack.mix.js')); copy(__DIR__.'/../../stubs/inertia-common/jsconfig.json', base_path('jsconfig.json')); - copy(__DIR__.'/../../stubs/inertia-react/resources/js/app.js', resource_path('js/app.js')); + copy(__DIR__.'/../../stubs/inertia-react/resources/js/app.jsx', resource_path('js/app.jsx')); + unlink(resource_path('js/app.js')); $this->replaceInFile('.vue()', '.react()', base_path('webpack.mix.js')); - $this->replaceInFile('.vue', '.js', base_path('tailwind.config.js')); + $this->replaceInFile('app.js', 'app.jsx', base_path('webpack.mix.js')); + $this->replaceInFile('.vue', '.jsx', base_path('tailwind.config.js')); if ($this->option('ssr')) { $this->installInertiaReactSsrStack(); @@ -210,7 +212,7 @@ protected function installInertiaReactSsrStack() }); copy(__DIR__.'/../../stubs/inertia-react/webpack.ssr.mix.js', base_path('webpack.ssr.mix.js')); - copy(__DIR__.'/../../stubs/inertia-react/resources/js/ssr.js', resource_path('js/ssr.js')); + copy(__DIR__.'/../../stubs/inertia-react/resources/js/ssr.jsx', resource_path('js/ssr.jsx')); (new Process([$this->phpBinary(), 'artisan', 'vendor:publish', '--provider=Inertia\ServiceProvider', '--force'], base_path())) ->setTimeout(null) diff --git a/stubs/default/resources/js/app.js b/stubs/default/resources/js/app.js index 08dba8d9a..a8093bee7 100644 --- a/stubs/default/resources/js/app.js +++ b/stubs/default/resources/js/app.js @@ -1,4 +1,4 @@ -require('./bootstrap'); +import './bootstrap'; import Alpine from 'alpinejs'; diff --git a/stubs/inertia-react/resources/js/Components/ApplicationLogo.js b/stubs/inertia-react/resources/js/Components/ApplicationLogo.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Components/ApplicationLogo.js rename to stubs/inertia-react/resources/js/Components/ApplicationLogo.jsx diff --git a/stubs/inertia-react/resources/js/Components/Button.js b/stubs/inertia-react/resources/js/Components/Button.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Components/Button.js rename to stubs/inertia-react/resources/js/Components/Button.jsx diff --git a/stubs/inertia-react/resources/js/Components/Checkbox.js b/stubs/inertia-react/resources/js/Components/Checkbox.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Components/Checkbox.js rename to stubs/inertia-react/resources/js/Components/Checkbox.jsx diff --git a/stubs/inertia-react/resources/js/Components/Dropdown.js b/stubs/inertia-react/resources/js/Components/Dropdown.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Components/Dropdown.js rename to stubs/inertia-react/resources/js/Components/Dropdown.jsx diff --git a/stubs/inertia-react/resources/js/Components/Input.js b/stubs/inertia-react/resources/js/Components/Input.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Components/Input.js rename to stubs/inertia-react/resources/js/Components/Input.jsx diff --git a/stubs/inertia-react/resources/js/Components/Label.js b/stubs/inertia-react/resources/js/Components/Label.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Components/Label.js rename to stubs/inertia-react/resources/js/Components/Label.jsx diff --git a/stubs/inertia-react/resources/js/Components/NavLink.js b/stubs/inertia-react/resources/js/Components/NavLink.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Components/NavLink.js rename to stubs/inertia-react/resources/js/Components/NavLink.jsx diff --git a/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.js b/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Components/ResponsiveNavLink.js rename to stubs/inertia-react/resources/js/Components/ResponsiveNavLink.jsx diff --git a/stubs/inertia-react/resources/js/Components/ValidationErrors.js b/stubs/inertia-react/resources/js/Components/ValidationErrors.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Components/ValidationErrors.js rename to stubs/inertia-react/resources/js/Components/ValidationErrors.jsx diff --git a/stubs/inertia-react/resources/js/Layouts/Authenticated.js b/stubs/inertia-react/resources/js/Layouts/Authenticated.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Layouts/Authenticated.js rename to stubs/inertia-react/resources/js/Layouts/Authenticated.jsx diff --git a/stubs/inertia-react/resources/js/Layouts/Guest.js b/stubs/inertia-react/resources/js/Layouts/Guest.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Layouts/Guest.js rename to stubs/inertia-react/resources/js/Layouts/Guest.jsx diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js rename to stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js rename to stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.js b/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Pages/Auth/Login.js rename to stubs/inertia-react/resources/js/Pages/Auth/Login.jsx diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Register.js b/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Pages/Auth/Register.js rename to stubs/inertia-react/resources/js/Pages/Auth/Register.jsx diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js rename to stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx diff --git a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js rename to stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.jsx diff --git a/stubs/inertia-react/resources/js/Pages/Dashboard.js b/stubs/inertia-react/resources/js/Pages/Dashboard.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Pages/Dashboard.js rename to stubs/inertia-react/resources/js/Pages/Dashboard.jsx diff --git a/stubs/inertia-react/resources/js/Pages/Welcome.js b/stubs/inertia-react/resources/js/Pages/Welcome.jsx similarity index 100% rename from stubs/inertia-react/resources/js/Pages/Welcome.js rename to stubs/inertia-react/resources/js/Pages/Welcome.jsx diff --git a/stubs/inertia-react/resources/js/app.js b/stubs/inertia-react/resources/js/app.jsx similarity index 95% rename from stubs/inertia-react/resources/js/app.js rename to stubs/inertia-react/resources/js/app.jsx index f17380d8a..70552c55f 100644 --- a/stubs/inertia-react/resources/js/app.js +++ b/stubs/inertia-react/resources/js/app.jsx @@ -1,4 +1,4 @@ -require('./bootstrap'); +import './bootstrap'; import React from 'react'; import { render } from 'react-dom'; diff --git a/stubs/inertia-react/resources/js/bootstrap.js b/stubs/inertia-react/resources/js/bootstrap.js index 692257769..bbcdba42b 100644 --- a/stubs/inertia-react/resources/js/bootstrap.js +++ b/stubs/inertia-react/resources/js/bootstrap.js @@ -1,4 +1,5 @@ -window._ = require('lodash'); +import _ from 'lodash'; +window._ = _; /** * We'll load the axios HTTP library which allows us to easily issue requests @@ -6,7 +7,8 @@ window._ = require('lodash'); * CSRF token as a header based on the value of the "XSRF" token cookie. */ -window.axios = require('axios'); +import axios from 'axios'; +window.axios = axios; window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; @@ -18,7 +20,8 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; // import Echo from 'laravel-echo'; -// window.Pusher = require('pusher-js'); +// import Pusher from 'pusher-js'; +// window.Pusher = Pusher; // window.Echo = new Echo({ // broadcaster: 'pusher', diff --git a/stubs/inertia-react/resources/js/ssr.js b/stubs/inertia-react/resources/js/ssr.jsx similarity index 100% rename from stubs/inertia-react/resources/js/ssr.js rename to stubs/inertia-react/resources/js/ssr.jsx diff --git a/stubs/inertia-react/webpack.ssr.mix.js b/stubs/inertia-react/webpack.ssr.mix.js index 90aacaa9d..bc24a32d8 100644 --- a/stubs/inertia-react/webpack.ssr.mix.js +++ b/stubs/inertia-react/webpack.ssr.mix.js @@ -2,7 +2,7 @@ const mix = require('laravel-mix'); const webpackNodeExternals = require('webpack-node-externals'); mix.options({ manifest: false }) - .js('resources/js/ssr.js', 'public/js') + .js('resources/js/ssr.jsx', 'public/js') .react() .alias({ '@': 'resources/js', diff --git a/stubs/inertia-vue/resources/js/app.js b/stubs/inertia-vue/resources/js/app.js index c5c7b6df5..e4d15699e 100644 --- a/stubs/inertia-vue/resources/js/app.js +++ b/stubs/inertia-vue/resources/js/app.js @@ -1,4 +1,4 @@ -require('./bootstrap'); +import './bootstrap'; import { createApp, h } from 'vue'; import { createInertiaApp } from '@inertiajs/inertia-vue3'; diff --git a/stubs/inertia-vue/resources/js/bootstrap.js b/stubs/inertia-vue/resources/js/bootstrap.js index 692257769..bbcdba42b 100644 --- a/stubs/inertia-vue/resources/js/bootstrap.js +++ b/stubs/inertia-vue/resources/js/bootstrap.js @@ -1,4 +1,5 @@ -window._ = require('lodash'); +import _ from 'lodash'; +window._ = _; /** * We'll load the axios HTTP library which allows us to easily issue requests @@ -6,7 +7,8 @@ window._ = require('lodash'); * CSRF token as a header based on the value of the "XSRF" token cookie. */ -window.axios = require('axios'); +import axios from 'axios'; +window.axios = axios; window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; @@ -18,7 +20,8 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; // import Echo from 'laravel-echo'; -// window.Pusher = require('pusher-js'); +// import Pusher from 'pusher-js'; +// window.Pusher = Pusher; // window.Echo = new Echo({ // broadcaster: 'pusher',