Skip to content

Commit

Permalink
[4.x] Migrate to Vite (#7485)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasonvarga
jasonvarga authored Feb 7, 2023
1 parent a2d6216 commit 9f1d5bb
Show file tree
Hide file tree
Showing 47 changed files with 10,256 additions and 26,250 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/release.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ jobs:
run: npm ci

- name: Compile assets
run: npm run production
run: npm run build

- name: Compile frontend assets
run: npm run frontend-prod
run: npm run frontend-build

- name: Create dist zip
run: cd resources && tar -czvf dist.tar.gz dist
Expand Down
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ tests/Fakes/Composer/Package/test-package/composer.json
resources/dist
resources/dist-frontend
composer.lock
.env
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"facade/ignition-contracts": "^1.0",
"guzzlehttp/guzzle": "^6.3 || ^7.0",
"james-heinrich/getid3": "^1.9.21",
"laravel/framework": "^9.0",
"laravel/framework": "^9.49.0",
"laravel/helpers": "^1.1",
"league/commonmark": "^1.5 || ^2.2",
"league/csv": "^9.0",
Expand Down
30,953 changes: 9,676 additions & 21,277 deletions package-lock.json
View file

Large diffs are not rendered by default.

28 changes: 11 additions & 17 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,13 @@
"name": "statamic",
"private": true,
"scripts": {
"dev": "npm run development",
"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",
"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",
"watch-poll": "npm run watch -- --watch-poll",
"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",
"prod": "npm run production",
"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",
"dev": "vite",
"build": "vite build",
"svgo": "svgo -f ./resources/svg/ -r",
"test": "cross-env NODE_ENV=test jest --silent",
"test-watch": "npm run test -- --watch --notify",
"frontend-dev": "npm run development -- --env.mixfile=frontend.mix",
"frontend-prod": "npm run production -- --env.mixfile=frontend.mix",
"frontend-watch": "npm run watch -- --env.mixfile=frontend.mix"
"frontend-dev": "vite -c vite-frontend.config.js",
"frontend-build": "vite build -c vite-frontend.config.js"
},
"dependencies": {
"@popperjs/core": "^2.5.3",
Expand Down Expand Up @@ -56,14 +50,13 @@
"body-scroll-lock": "^2.6.4",
"codemirror": "^5.58.2",
"cookies-js": "^1.2.2",
"dmuploader": "file:resources/js/vendor/dmuploader",
"dm-file-uploader": "^1.0.2",
"dropzone": "^4.0.1",
"element-resize-detector": "^1.2.1",
"fuse.js": "^3.4.6",
"generate-password": "^1.5.1",
"highlight.js": "^9.18.1",
"jquery": "^3.5.0",
"jquery-ui": "file:resources/js/vendor/jquery-ui",
"laravel-echo": "^1.6.1",
"lowlight": "^2.6.1",
"luminous-lightbox": "^0.2.0",
Expand All @@ -90,7 +83,7 @@
"v-calendar": "^2.3.0",
"v-tooltip": "^2.0.3",
"validator": "^13.7.0",
"vue": "^2.6.11",
"vue": "^2.7.14",
"vue-clickaway": "~2.2.2",
"vue-countable": "^1.0.9",
"vue-draggable-nested-tree": "^2.2.20",
Expand All @@ -102,15 +95,16 @@
"vuex": "^3.1.2"
},
"devDependencies": {
"@babel/preset-env": "^7.20.2",
"@rollup/plugin-inject": "^5.0.3",
"@vitejs/plugin-vue2": "^2.2.0",
"babel-jest": "^24.9.0",
"cross-env": "^5.2.1",
"jest": "^24.9.0",
"kind-of": ">=6.0.3",
"laravel-mix": "^5.0.9",
"sass": "^1.26.2",
"sass-loader": "^8.0.2",
"laravel-vite-plugin": "^0.7.2",
"tailwindcss": "^1.9.0",
"vue-template-compiler": "^2.6.11"
"vite": "^4.0.0"
},
"jest": {
"roots": [
Expand Down
6 changes: 6 additions & 0 deletions postcss.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
};
190 changes: 121 additions & 69 deletions resources/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,34 @@ import Statamic from './components/Statamic.js';
import Alpine from 'alpinejs'
import * as Globals from './bootstrap/globals'
import { default as underscore } from 'underscore'
import Cookies from 'cookies-js';
import jQuery from 'jquery';
import rangy from 'rangy';

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

Vue.config.silent = false;
Vue.config.devtools = true;
Vue.config.productionTip = false

window.Cookies = Cookies;
window.Alpine = Alpine
window.Vue = Vue;
window.Statamic = Statamic;
window._ = underscore;
window.$ = window.jQuery = require('jquery');
window.rangy = require('rangy');

require('./bootstrap/polyfills');
require('./bootstrap/underscore-mixins');
require('./bootstrap/jquery-plugins');
require('./bootstrap/plugins');
require('./bootstrap/filters');
require('./bootstrap/mixins');
require('./bootstrap/components');
require('./bootstrap/fieldtypes');
require('./bootstrap/directives');
window.$ = window.jQuery = jQuery;
window.rangy = rangy;

import './bootstrap/polyfills';
import './bootstrap/underscore-mixins';
import './bootstrap/jquery-plugins';
import './bootstrap/plugins';
import './bootstrap/filters';
import './bootstrap/mixins';
import './bootstrap/components';
import './bootstrap/fieldtypes';
import './bootstrap/directives';

import axios from 'axios';
import PortalVue from "portal-vue";
Expand Down Expand Up @@ -69,7 +72,8 @@ Vue.prototype.$echo = Statamic.$echo;
Vue.prototype.$bard = Statamic.$bard;
Vue.prototype.$keys = Statamic.$keys;

window.moment = Vue.moment = Vue.prototype.$moment = require('moment');
import Moment from 'moment';
window.moment = Vue.moment = Vue.prototype.$moment = Moment;

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

require('./components/ToastBus');
require('./components/ModalBus');
require('./components/stacks/Stacks');
require('./components/panes/Panes');
require('./components/ProgressBar');
require('./components/DirtyState');
require('./components/Config');
require('./components/Preference');
require('./components/Permission');
import './components/ToastBus';
import './components/ModalBus';
import './components/stacks/Stacks';
import './components/panes/Panes';
import './components/ProgressBar';
import './components/DirtyState';
import './components/Config';
import './components/Preference';
import './components/Permission';


import GlobalSearch from './components/GlobalSearch.vue';
import GlobalSiteSelector from './components/GlobalSiteSelector.vue';
import Login from './components/login/login';
import LoginModal from './components/login/LoginModal.vue';
import BaseEntryCreateForm from './components/entries/BaseCreateForm.vue';
import BaseTermCreateForm from './components/terms/BaseCreateForm.vue';
import CreateTermButton from './components/terms/CreateTermButton.vue';
import Importer from './components/importer/importer';
import FieldsetListing from './components/fieldsets/Listing.vue';
import FieldsetCreateForm from './components/fieldsets/CreateForm.vue';
import FieldsetEditForm from './components/fieldsets/EditForm.vue';
import BlueprintListing from './components/blueprints/Listing.vue';
import BlueprintBuilder from './components/blueprints/Builder.vue';
import FormCreateForm from './components/forms/CreateForm.vue';
import FormListing from './components/forms/Listing.vue';
import FormSubmissionListing from './components/forms/SubmissionListing.vue';
import GlobalListing from './components/globals/Listing.vue';
import GlobalEditForm from './components/globals/EditForm.vue';
import GlobalPublishForm from './components/globals/PublishForm.vue';
import GlobalCreateForm from './components/globals/Create.vue';
import UserListing from './components/users/Listing.vue';
import UserWizard from './components/users/Wizard.vue';
import RoleListing from './components/roles/Listing.vue';
import RolePublishForm from './components/roles/PublishForm.vue';
import UserGroupListing from './components/user-groups/Listing.vue';
import UserGroupPublishForm from './components/user-groups/PublishForm.vue';
import CollectionCreateForm from './components/collections/CreateForm.vue';
import CollectionScaffolder from './components/collections/Scaffolder.vue';
import CollectionEditForm from './components/collections/EditForm.vue';
import CollectionView from './components/collections/View.vue';
import CollectionBlueprintListing from './components/collections/BlueprintListing.vue';
import SessionExpiry from './components/SessionExpiry.vue';
import NavigationListing from './components/navigation/Listing.vue';
import NavigationCreateForm from './components/navigation/CreateForm.vue';
import NavigationEditForm from './components/navigation/EditForm.vue';
import PreferencesEditForm from './components/preferences/EditForm.vue';
import NavigationView from './components/navigation/View.vue';
import TaxonomyCreateForm from './components/taxonomies/CreateForm.vue';
import TaxonomyEditForm from './components/taxonomies/EditForm.vue';
import TaxonomyBlueprintListing from './components/taxonomies/BlueprintListing.vue';
import AssetContainerCreateForm from './components/asset-containers/CreateForm.vue';
import AssetContainerEditForm from './components/asset-containers/EditForm.vue';
import NavBuilder from './components/nav/Builder.vue';
import Updater from './components/updater/Updater.vue';
import PortalTargets from './components/PortalTargets.vue';


Statamic.app({
el: '#statamic',
Expand All @@ -108,51 +160,51 @@ Statamic.app({
store: Statamic.$store,

components: {
GlobalSearch: require('./components/GlobalSearch.vue').default,
GlobalSiteSelector: require('./components/GlobalSiteSelector.vue').default,
Login: require('./components/login/login'),
LoginModal: require('./components/login/LoginModal.vue').default,
BaseEntryCreateForm: require('./components/entries/BaseCreateForm.vue').default,
BaseTermCreateForm: require('./components/terms/BaseCreateForm.vue').default,
CreateTermButton: require('./components/terms/CreateTermButton.vue').default,
Importer: require('./components/importer/importer'),
FieldsetListing: require('./components/fieldsets/Listing.vue').default,
FieldsetCreateForm: require('./components/fieldsets/CreateForm.vue').default,
FieldsetEditForm: require('./components/fieldsets/EditForm.vue').default,
BlueprintListing: require('./components/blueprints/Listing.vue').default,
BlueprintBuilder: require('./components/blueprints/Builder.vue').default,
FormCreateForm: require('./components/forms/CreateForm.vue').default,
FormListing: require('./components/forms/Listing.vue').default,
FormSubmissionListing: require('./components/forms/SubmissionListing.vue').default,
GlobalListing: require('./components/globals/Listing.vue').default,
GlobalEditForm: require('./components/globals/EditForm.vue').default,
GlobalPublishForm: require('./components/globals/PublishForm.vue').default,
GlobalCreateForm: require('./components/globals/Create.vue').default,
UserListing: require('./components/users/Listing.vue').default,
UserWizard: require('./components/users/Wizard.vue').default,
RoleListing: require('./components/roles/Listing.vue').default,
RolePublishForm: require('./components/roles/PublishForm.vue').default,
UserGroupListing: require('./components/user-groups/Listing.vue').default,
UserGroupPublishForm: require('./components/user-groups/PublishForm.vue').default,
CollectionCreateForm: require('./components/collections/CreateForm.vue').default,
CollectionScaffolder: require('./components/collections/Scaffolder.vue').default,
CollectionEditForm: require('./components/collections/EditForm.vue').default,
CollectionView: require('./components/collections/View.vue').default,
CollectionBlueprintListing: require('./components/collections/BlueprintListing.vue').default,
SessionExpiry: require('./components/SessionExpiry.vue').default,
NavigationListing: require('./components/navigation/Listing.vue').default,
NavigationCreateForm: require('./components/navigation/CreateForm.vue').default,
NavigationEditForm: require('./components/navigation/EditForm.vue').default,
PreferencesEditForm: require('./components/preferences/EditForm.vue').default,
NavigationView: require('./components/navigation/View.vue').default,
TaxonomyCreateForm: require('./components/taxonomies/CreateForm.vue').default,
TaxonomyEditForm: require('./components/taxonomies/EditForm.vue').default,
TaxonomyBlueprintListing: require('./components/taxonomies/BlueprintListing.vue').default,
AssetContainerCreateForm: require('./components/asset-containers/CreateForm.vue').default,
AssetContainerEditForm: require('./components/asset-containers/EditForm.vue').default,
NavBuilder: require('./components/nav/Builder.vue').default,
Updater: require('./components/updater/Updater.vue').default,
PortalTargets: require('./components/PortalTargets.vue').default,
GlobalSearch,
GlobalSiteSelector,
Login,
LoginModal,
BaseEntryCreateForm,
BaseTermCreateForm,
CreateTermButton,
Importer,
FieldsetListing,
FieldsetCreateForm,
FieldsetEditForm,
BlueprintListing,
BlueprintBuilder,
FormCreateForm,
FormListing,
FormSubmissionListing,
GlobalListing,
GlobalEditForm,
GlobalPublishForm,
GlobalCreateForm,
UserListing,
UserWizard,
RoleListing,
RolePublishForm,
UserGroupListing,
UserGroupPublishForm,
CollectionCreateForm,
CollectionScaffolder,
CollectionEditForm,
CollectionView,
CollectionBlueprintListing,
SessionExpiry,
NavigationListing,
NavigationCreateForm,
NavigationEditForm,
PreferencesEditForm,
NavigationView,
TaxonomyCreateForm,
TaxonomyEditForm,
TaxonomyBlueprintListing,
AssetContainerCreateForm,
AssetContainerEditForm,
NavBuilder,
Updater,
PortalTargets,
},

data: {
Expand Down
Loading

0 comments on commit 9f1d5bb

Please sign in to comment.