Skip to content

Commit 9f1d5bb

Browse files
authored
[4.x] Migrate to Vite (#7485)
1 parent a2d6216 commit 9f1d5bb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+10256
-26250
lines changed

.github/workflows/release.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ jobs:
1919
run: npm ci
2020

2121
- name: Compile assets
22-
run: npm run production
22+
run: npm run build
2323

2424
- name: Compile frontend assets
25-
run: npm run frontend-prod
25+
run: npm run frontend-build
2626

2727
- name: Create dist zip
2828
run: cd resources && tar -czvf dist.tar.gz dist

.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@ tests/Fakes/Composer/Package/test-package/composer.json
99
resources/dist
1010
resources/dist-frontend
1111
composer.lock
12+
.env

composer.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"facade/ignition-contracts": "^1.0",
1616
"guzzlehttp/guzzle": "^6.3 || ^7.0",
1717
"james-heinrich/getid3": "^1.9.21",
18-
"laravel/framework": "^9.0",
18+
"laravel/framework": "^9.49.0",
1919
"laravel/helpers": "^1.1",
2020
"league/commonmark": "^1.5 || ^2.2",
2121
"league/csv": "^9.0",

package-lock.json

+9,676-21,277
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

+11-17
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,13 @@
22
"name": "statamic",
33
"private": true,
44
"scripts": {
5-
"dev": "npm run development",
6-
"development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
7-
"watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
8-
"watch-poll": "npm run watch -- --watch-poll",
9-
"hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
10-
"prod": "npm run production",
11-
"production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
5+
"dev": "vite",
6+
"build": "vite build",
127
"svgo": "svgo -f ./resources/svg/ -r",
138
"test": "cross-env NODE_ENV=test jest --silent",
149
"test-watch": "npm run test -- --watch --notify",
15-
"frontend-dev": "npm run development -- --env.mixfile=frontend.mix",
16-
"frontend-prod": "npm run production -- --env.mixfile=frontend.mix",
17-
"frontend-watch": "npm run watch -- --env.mixfile=frontend.mix"
10+
"frontend-dev": "vite -c vite-frontend.config.js",
11+
"frontend-build": "vite build -c vite-frontend.config.js"
1812
},
1913
"dependencies": {
2014
"@popperjs/core": "^2.5.3",
@@ -56,14 +50,13 @@
5650
"body-scroll-lock": "^2.6.4",
5751
"codemirror": "^5.58.2",
5852
"cookies-js": "^1.2.2",
59-
"dmuploader": "file:resources/js/vendor/dmuploader",
53+
"dm-file-uploader": "^1.0.2",
6054
"dropzone": "^4.0.1",
6155
"element-resize-detector": "^1.2.1",
6256
"fuse.js": "^3.4.6",
6357
"generate-password": "^1.5.1",
6458
"highlight.js": "^9.18.1",
6559
"jquery": "^3.5.0",
66-
"jquery-ui": "file:resources/js/vendor/jquery-ui",
6760
"laravel-echo": "^1.6.1",
6861
"lowlight": "^2.6.1",
6962
"luminous-lightbox": "^0.2.0",
@@ -90,7 +83,7 @@
9083
"v-calendar": "^2.3.0",
9184
"v-tooltip": "^2.0.3",
9285
"validator": "^13.7.0",
93-
"vue": "^2.6.11",
86+
"vue": "^2.7.14",
9487
"vue-clickaway": "~2.2.2",
9588
"vue-countable": "^1.0.9",
9689
"vue-draggable-nested-tree": "^2.2.20",
@@ -102,15 +95,16 @@
10295
"vuex": "^3.1.2"
10396
},
10497
"devDependencies": {
98+
"@babel/preset-env": "^7.20.2",
99+
"@rollup/plugin-inject": "^5.0.3",
100+
"@vitejs/plugin-vue2": "^2.2.0",
105101
"babel-jest": "^24.9.0",
106102
"cross-env": "^5.2.1",
107103
"jest": "^24.9.0",
108104
"kind-of": ">=6.0.3",
109-
"laravel-mix": "^5.0.9",
110-
"sass": "^1.26.2",
111-
"sass-loader": "^8.0.2",
105+
"laravel-vite-plugin": "^0.7.2",
112106
"tailwindcss": "^1.9.0",
113-
"vue-template-compiler": "^2.6.11"
107+
"vite": "^4.0.0"
114108
},
115109
"jest": {
116110
"roots": [

postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: [
3+
require('tailwindcss'),
4+
require('autoprefixer'),
5+
],
6+
};

resources/js/app.js

+121-69
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,34 @@ import Statamic from './components/Statamic.js';
44
import Alpine from 'alpinejs'
55
import * as Globals from './bootstrap/globals'
66
import { default as underscore } from 'underscore'
7+
import Cookies from 'cookies-js';
8+
import jQuery from 'jquery';
9+
import rangy from 'rangy';
710

811
let global_functions = Object.keys(Globals)
9-
global_functions.forEach(fnName => { global[fnName] = Globals[fnName] })
10-
global.Cookies = require('cookies-js');
12+
global_functions.forEach(fnName => { window[fnName] = Globals[fnName] })
1113

1214
Vue.config.silent = false;
1315
Vue.config.devtools = true;
1416
Vue.config.productionTip = false
1517

18+
window.Cookies = Cookies;
1619
window.Alpine = Alpine
1720
window.Vue = Vue;
1821
window.Statamic = Statamic;
1922
window._ = underscore;
20-
window.$ = window.jQuery = require('jquery');
21-
window.rangy = require('rangy');
22-
23-
require('./bootstrap/polyfills');
24-
require('./bootstrap/underscore-mixins');
25-
require('./bootstrap/jquery-plugins');
26-
require('./bootstrap/plugins');
27-
require('./bootstrap/filters');
28-
require('./bootstrap/mixins');
29-
require('./bootstrap/components');
30-
require('./bootstrap/fieldtypes');
31-
require('./bootstrap/directives');
23+
window.$ = window.jQuery = jQuery;
24+
window.rangy = rangy;
25+
26+
import './bootstrap/polyfills';
27+
import './bootstrap/underscore-mixins';
28+
import './bootstrap/jquery-plugins';
29+
import './bootstrap/plugins';
30+
import './bootstrap/filters';
31+
import './bootstrap/mixins';
32+
import './bootstrap/components';
33+
import './bootstrap/fieldtypes';
34+
import './bootstrap/directives';
3235

3336
import axios from 'axios';
3437
import PortalVue from "portal-vue";
@@ -69,7 +72,8 @@ Vue.prototype.$echo = Statamic.$echo;
6972
Vue.prototype.$bard = Statamic.$bard;
7073
Vue.prototype.$keys = Statamic.$keys;
7174

72-
window.moment = Vue.moment = Vue.prototype.$moment = require('moment');
75+
import Moment from 'moment';
76+
window.moment = Vue.moment = Vue.prototype.$moment = Moment;
7377

7478
Vue.use(Popover, { tooltip: true })
7579
Vue.use(PortalVue)
@@ -90,15 +94,63 @@ Statamic.$store = new Vuex.Store({
9094
}
9195
});
9296

93-
require('./components/ToastBus');
94-
require('./components/ModalBus');
95-
require('./components/stacks/Stacks');
96-
require('./components/panes/Panes');
97-
require('./components/ProgressBar');
98-
require('./components/DirtyState');
99-
require('./components/Config');
100-
require('./components/Preference');
101-
require('./components/Permission');
97+
import './components/ToastBus';
98+
import './components/ModalBus';
99+
import './components/stacks/Stacks';
100+
import './components/panes/Panes';
101+
import './components/ProgressBar';
102+
import './components/DirtyState';
103+
import './components/Config';
104+
import './components/Preference';
105+
import './components/Permission';
106+
107+
108+
import GlobalSearch from './components/GlobalSearch.vue';
109+
import GlobalSiteSelector from './components/GlobalSiteSelector.vue';
110+
import Login from './components/login/login';
111+
import LoginModal from './components/login/LoginModal.vue';
112+
import BaseEntryCreateForm from './components/entries/BaseCreateForm.vue';
113+
import BaseTermCreateForm from './components/terms/BaseCreateForm.vue';
114+
import CreateTermButton from './components/terms/CreateTermButton.vue';
115+
import Importer from './components/importer/importer';
116+
import FieldsetListing from './components/fieldsets/Listing.vue';
117+
import FieldsetCreateForm from './components/fieldsets/CreateForm.vue';
118+
import FieldsetEditForm from './components/fieldsets/EditForm.vue';
119+
import BlueprintListing from './components/blueprints/Listing.vue';
120+
import BlueprintBuilder from './components/blueprints/Builder.vue';
121+
import FormCreateForm from './components/forms/CreateForm.vue';
122+
import FormListing from './components/forms/Listing.vue';
123+
import FormSubmissionListing from './components/forms/SubmissionListing.vue';
124+
import GlobalListing from './components/globals/Listing.vue';
125+
import GlobalEditForm from './components/globals/EditForm.vue';
126+
import GlobalPublishForm from './components/globals/PublishForm.vue';
127+
import GlobalCreateForm from './components/globals/Create.vue';
128+
import UserListing from './components/users/Listing.vue';
129+
import UserWizard from './components/users/Wizard.vue';
130+
import RoleListing from './components/roles/Listing.vue';
131+
import RolePublishForm from './components/roles/PublishForm.vue';
132+
import UserGroupListing from './components/user-groups/Listing.vue';
133+
import UserGroupPublishForm from './components/user-groups/PublishForm.vue';
134+
import CollectionCreateForm from './components/collections/CreateForm.vue';
135+
import CollectionScaffolder from './components/collections/Scaffolder.vue';
136+
import CollectionEditForm from './components/collections/EditForm.vue';
137+
import CollectionView from './components/collections/View.vue';
138+
import CollectionBlueprintListing from './components/collections/BlueprintListing.vue';
139+
import SessionExpiry from './components/SessionExpiry.vue';
140+
import NavigationListing from './components/navigation/Listing.vue';
141+
import NavigationCreateForm from './components/navigation/CreateForm.vue';
142+
import NavigationEditForm from './components/navigation/EditForm.vue';
143+
import PreferencesEditForm from './components/preferences/EditForm.vue';
144+
import NavigationView from './components/navigation/View.vue';
145+
import TaxonomyCreateForm from './components/taxonomies/CreateForm.vue';
146+
import TaxonomyEditForm from './components/taxonomies/EditForm.vue';
147+
import TaxonomyBlueprintListing from './components/taxonomies/BlueprintListing.vue';
148+
import AssetContainerCreateForm from './components/asset-containers/CreateForm.vue';
149+
import AssetContainerEditForm from './components/asset-containers/EditForm.vue';
150+
import NavBuilder from './components/nav/Builder.vue';
151+
import Updater from './components/updater/Updater.vue';
152+
import PortalTargets from './components/PortalTargets.vue';
153+
102154

103155
Statamic.app({
104156
el: '#statamic',
@@ -108,51 +160,51 @@ Statamic.app({
108160
store: Statamic.$store,
109161

110162
components: {
111-
GlobalSearch: require('./components/GlobalSearch.vue').default,
112-
GlobalSiteSelector: require('./components/GlobalSiteSelector.vue').default,
113-
Login: require('./components/login/login'),
114-
LoginModal: require('./components/login/LoginModal.vue').default,
115-
BaseEntryCreateForm: require('./components/entries/BaseCreateForm.vue').default,
116-
BaseTermCreateForm: require('./components/terms/BaseCreateForm.vue').default,
117-
CreateTermButton: require('./components/terms/CreateTermButton.vue').default,
118-
Importer: require('./components/importer/importer'),
119-
FieldsetListing: require('./components/fieldsets/Listing.vue').default,
120-
FieldsetCreateForm: require('./components/fieldsets/CreateForm.vue').default,
121-
FieldsetEditForm: require('./components/fieldsets/EditForm.vue').default,
122-
BlueprintListing: require('./components/blueprints/Listing.vue').default,
123-
BlueprintBuilder: require('./components/blueprints/Builder.vue').default,
124-
FormCreateForm: require('./components/forms/CreateForm.vue').default,
125-
FormListing: require('./components/forms/Listing.vue').default,
126-
FormSubmissionListing: require('./components/forms/SubmissionListing.vue').default,
127-
GlobalListing: require('./components/globals/Listing.vue').default,
128-
GlobalEditForm: require('./components/globals/EditForm.vue').default,
129-
GlobalPublishForm: require('./components/globals/PublishForm.vue').default,
130-
GlobalCreateForm: require('./components/globals/Create.vue').default,
131-
UserListing: require('./components/users/Listing.vue').default,
132-
UserWizard: require('./components/users/Wizard.vue').default,
133-
RoleListing: require('./components/roles/Listing.vue').default,
134-
RolePublishForm: require('./components/roles/PublishForm.vue').default,
135-
UserGroupListing: require('./components/user-groups/Listing.vue').default,
136-
UserGroupPublishForm: require('./components/user-groups/PublishForm.vue').default,
137-
CollectionCreateForm: require('./components/collections/CreateForm.vue').default,
138-
CollectionScaffolder: require('./components/collections/Scaffolder.vue').default,
139-
CollectionEditForm: require('./components/collections/EditForm.vue').default,
140-
CollectionView: require('./components/collections/View.vue').default,
141-
CollectionBlueprintListing: require('./components/collections/BlueprintListing.vue').default,
142-
SessionExpiry: require('./components/SessionExpiry.vue').default,
143-
NavigationListing: require('./components/navigation/Listing.vue').default,
144-
NavigationCreateForm: require('./components/navigation/CreateForm.vue').default,
145-
NavigationEditForm: require('./components/navigation/EditForm.vue').default,
146-
PreferencesEditForm: require('./components/preferences/EditForm.vue').default,
147-
NavigationView: require('./components/navigation/View.vue').default,
148-
TaxonomyCreateForm: require('./components/taxonomies/CreateForm.vue').default,
149-
TaxonomyEditForm: require('./components/taxonomies/EditForm.vue').default,
150-
TaxonomyBlueprintListing: require('./components/taxonomies/BlueprintListing.vue').default,
151-
AssetContainerCreateForm: require('./components/asset-containers/CreateForm.vue').default,
152-
AssetContainerEditForm: require('./components/asset-containers/EditForm.vue').default,
153-
NavBuilder: require('./components/nav/Builder.vue').default,
154-
Updater: require('./components/updater/Updater.vue').default,
155-
PortalTargets: require('./components/PortalTargets.vue').default,
163+
GlobalSearch,
164+
GlobalSiteSelector,
165+
Login,
166+
LoginModal,
167+
BaseEntryCreateForm,
168+
BaseTermCreateForm,
169+
CreateTermButton,
170+
Importer,
171+
FieldsetListing,
172+
FieldsetCreateForm,
173+
FieldsetEditForm,
174+
BlueprintListing,
175+
BlueprintBuilder,
176+
FormCreateForm,
177+
FormListing,
178+
FormSubmissionListing,
179+
GlobalListing,
180+
GlobalEditForm,
181+
GlobalPublishForm,
182+
GlobalCreateForm,
183+
UserListing,
184+
UserWizard,
185+
RoleListing,
186+
RolePublishForm,
187+
UserGroupListing,
188+
UserGroupPublishForm,
189+
CollectionCreateForm,
190+
CollectionScaffolder,
191+
CollectionEditForm,
192+
CollectionView,
193+
CollectionBlueprintListing,
194+
SessionExpiry,
195+
NavigationListing,
196+
NavigationCreateForm,
197+
NavigationEditForm,
198+
PreferencesEditForm,
199+
NavigationView,
200+
TaxonomyCreateForm,
201+
TaxonomyEditForm,
202+
TaxonomyBlueprintListing,
203+
AssetContainerCreateForm,
204+
AssetContainerEditForm,
205+
NavBuilder,
206+
Updater,
207+
PortalTargets,
156208
},
157209

158210
data: {

0 commit comments

Comments
 (0)