Using Vite instead of webpack

main
Jeroen De Meerleer 3 months ago
parent c8eb551321
commit 2bd10a66e5
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
  1. 14
      .gitignore
  2. 12
      assets/app.js
  3. 11
      assets/bootstrap.js
  4. 4
      assets/controllers.json
  5. 16
      assets/controllers/hello_controller.js
  6. 10
      assets/js/job/add.js
  7. 7
      assets/js/job/index.js
  8. 32
      assets/js/job/momentjs-parse.js
  9. 3
      assets/js/job/view.js
  10. 1
      assets/js/security/login.js
  11. 4
      assets/scss/base.scss
  12. 2
      assets/scss/icons.scss
  13. 2
      assets/scss/job/add.scss
  14. 4
      assets/scss/job/index.scss
  15. 2
      assets/scss/job/view.scss
  16. 2
      assets/scss/vars.scss
  17. 3
      assets/styles/app.css
  18. 4
      composer.json
  19. 696
      composer.lock
  20. 2
      config/bundles.php
  21. 49
      config/packages/webpack_encore.yaml
  22. 3
      config/routes/dev/pentatrion_vite.yaml
  23. 14740
      package-lock.json
  24. 20
      package.json
  25. 40
      symfony.lock
  26. 4
      templates/job/add.html.twig
  27. 4
      templates/job/edit.html.twig
  28. 4
      templates/job/index.html.twig
  29. 4
      templates/job/view.html.twig
  30. 4
      templates/security/login.html.twig
  31. 33
      vite.config.js
  32. 73
      webpack.config.js

14
.gitignore vendored

@ -1,4 +1,3 @@
###> symfony/framework-bundle ###
/.env.local
/.env.local.php
@ -8,14 +7,11 @@
/var/
/vendor/
###< symfony/framework-bundle ###
###> symfony/webpack-encore-bundle ###
/node_modules/
/public/build/
npm-debug.log
yarn-error.log
###< symfony/webpack-encore-bundle ###
.idea/
.env
###> pentatrion/vite-bundle ###
/node_modules/
/public/build/
###< pentatrion/vite-bundle ###

@ -1,12 +0,0 @@
/*
* Welcome to your app's main JavaScript file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/
// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';
// start the Stimulus application
import './bootstrap';

@ -1,11 +0,0 @@
import { startStimulusApp } from '@symfony/stimulus-bridge';
// Registers Stimulus controllers from controllers.json and in the controllers/ directory
export const app = startStimulusApp(require.context(
'@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
true,
/\.[jt]sx?$/
));
// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);

@ -1,4 +0,0 @@
{
"controllers": [],
"entrypoints": []
}

@ -1,16 +0,0 @@
import { Controller } from '@hotwired/stimulus';
/*
* This is an example Stimulus controller!
*
* Any element with a data-controller="hello" attribute will cause
* this controller to be executed. The name "hello" comes from the filename:
* hello_controller.js -> "hello"
*
* Delete this file or adapt it for your use!
*/
export default class extends Controller {
connect() {
this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
}
}

@ -1,7 +1,8 @@
const bootstrap = require('bootstrap');
const moment = require('moment');
const tempusDominus = require('@eonasdan/tempus-dominus');
const momentparse = require('./momentjs-parse')
import 'bootstrap';
import moment from 'moment';
import * as tempusDominus from '@eonasdan/tempus-dominus';
import momentparse from './momentjs-parse';
import '/assets/scss/job/add.scss';
document.addEventListener("readystatechange", event => {
if(event.target.readyState === 'complete') {
@ -40,7 +41,6 @@ const timepickerOptions = {
}
function initDatePickers()
{
tempusDominus.extend(momentparse, 'DD/MM/yyyy HH:mm:ss');
new tempusDominus.TempusDominus(document.querySelector('#nextrunselector'), timepickerOptions);
new tempusDominus.TempusDominus(document.querySelector('#lastrunselector'), timepickerOptions);

@ -1,5 +1,6 @@
const bootstrap = require('bootstrap');
const image = require('../../images/ajax-loader.gif');
import {Modal} from 'bootstrap';
import image from '/assets/images/ajax-loader.gif'
import '/assets/scss/job/index.scss';
document.addEventListener("readystatechange", event => {
if(event.target.readyState === 'complete') {
@ -76,7 +77,7 @@ function initRunNowButtons() {
modal.querySelector('.modal-body').innerHTML = content;
}
var bsModal = new bootstrap.Modal('#runnow_result').show();
var bsModal = new Modal('#runnow_result').show();
document.querySelector('.container-fluid').classList.remove('blur');
document.querySelector('.runnow-overlay').classList.remove('d-block');

@ -1,19 +1,23 @@
const moment = require('moment');
//obviously, loading moment js is required.
export const load = (option, tdClasses, tdFactory) => {
tdClasses.Dates.prototype.setFromInput = function(value, index) {
let converted = moment(value, option);
if (converted.isValid()) {
let date = tdFactory.DateTime.convert(converted.toDate(), this.optionsStore.options.localization.locale);
this.setValue(date, index);
}
else {
console.warn('Momentjs failed to parse the input date.');
import moment from "moment";
export default {
//obviously, loading moment js is required.
load: (option, tdClasses, tdFactory) => {
tdClasses.Dates.prototype.setFromInput = function(value, index) {
let converted = moment(value, option);
if (converted.isValid()) {
let date = tdFactory.DateTime.convert(converted.toDate(), this.optionsStore.options.localization.locale);
this.setValue(date, index);
}
else {
console.warn('Momentjs failed to parse the input date.');
}
}
}
tdClasses.Dates.prototype.formatInput = function(date) {
return moment(date).format(option);
tdClasses.Dates.prototype.formatInput = function(date) {
return moment(date).format(option);
}
}
}

@ -1,4 +1,5 @@
const bootstrap = require('bootstrap');
import 'bootstrap';
import '/assets/scss/job/view.scss';
document.addEventListener("readystatechange", event => {
if(event.target.readyState === 'complete') {

@ -0,0 +1 @@
import '/assets/scss/security/login.scss';

@ -1,2 +1,2 @@
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-dark-5/dist/css/bootstrap-dark.css";
@import "/node_modules/bootstrap/dist/css/bootstrap.css";
@import "/node_modules/bootstrap-dark-5/dist/css/bootstrap-dark.css";

@ -1,4 +1,4 @@
@import "vars";
@import "/assets/scss/vars";
@font-face {
font-family: '#{$icomoon-font-family}';

@ -1,4 +1,4 @@
@import "assets/scss/base";
@import "assets/scss/icons";
@import "~@eonasdan/tempus-dominus/dist/css/tempus-dominus.css";
@import "/node_modules/@eonasdan/tempus-dominus/dist/css/tempus-dominus.css";
@import "assets/scss/tempus-dominus-dark";

@ -1,5 +1,5 @@
@import "assets/scss/base";
@import "assets/scss/icons";
@import "/assets/scss/base";
@import "/assets/scss/icons";
tr.norun td {
background-color: #f8d7da;

@ -1,4 +1,4 @@
@import "assets/scss/base";
@import "/assets/scss/base";
.tag {

@ -1,5 +1,5 @@
$icomoon-font-family: "icomoon" !default;
$icomoon-font-path: "../fonts" !default;
$icomoon-font-path: "/assets/fonts" !default;
$icon-close: "\f00d";
$icon-remove: "\f00d";

@ -1,3 +0,0 @@
body {
background-color: lightgray;
}

@ -14,6 +14,7 @@
"doctrine/doctrine-migrations-bundle": "^3.2",
"doctrine/orm": "^2.12",
"guzzlehttp/guzzle": "~7.4.0",
"pentatrion/vite-bundle": "^1.2",
"phpseclib/phpseclib": "^3.0",
"symfony/console": "6.0.*",
"symfony/dotenv": "6.0.*",
@ -24,7 +25,6 @@
"symfony/runtime": "6.0.*",
"symfony/security-bundle": "6.0.*",
"symfony/twig-bundle": "6.0.*",
"symfony/webpack-encore-bundle": "^1.14",
"symfony/yaml": "6.0.*"
},
"config": {
@ -74,7 +74,7 @@
},
"extra": {
"symfony": {
"allow-contrib": false,
"allow-contrib": true,
"require": "6.0.*"
}
},

696
composer.lock generated

File diff suppressed because it is too large Load Diff

@ -6,9 +6,9 @@ return [
Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle::class => ['all' => true],
Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true],
Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true],
Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true],
Pentatrion\ViteBundle\PentatrionViteBundle::class => ['all' => true],
];

@ -1,49 +0,0 @@
webpack_encore:
# The path where Encore is building the assets - i.e. Encore.setOutputPath()
output_path: '%kernel.project_dir%/public/build'
# If multiple builds are defined (as shown below), you can disable the default build:
# output_path: false
# Set attributes that will be rendered on all script and link tags
script_attributes:
defer: true
# Uncomment (also under link_attributes) if using Turbo Drive
# https://turbo.hotwired.dev/handbook/drive#reloading-when-assets-change
# 'data-turbo-track': reload
# link_attributes:
# Uncomment if using Turbo Drive
# 'data-turbo-track': reload
# If using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
# crossorigin: 'anonymous'
# Preload all rendered script and link tags automatically via the HTTP/2 Link header
# preload: true
# Throw an exception if the entrypoints.json file is missing or an entry is missing from the data
# strict_mode: false
# If you have multiple builds:
# builds:
# pass "frontend" as the 3rg arg to the Twig functions
# {{ encore_entry_script_tags('entry1', null, 'frontend') }}
# frontend: '%kernel.project_dir%/public/frontend/build'
# Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
# Put in config/packages/prod/webpack_encore.yaml
# cache: true
framework:
assets:
json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
#when@prod:
# webpack_encore:
# # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
# # Available in version 1.2
# cache: true
#when@test:
# webpack_encore:
# strict_mode: false

@ -0,0 +1,3 @@
_pentatrion_vite:
prefix: /build
resource: "@PentatrionViteBundle/Resources/config/routing.yaml"

14740
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -6,15 +6,19 @@
"license": "AGPL-3.0-or-later",
"private": true,
"dependencies": {
"@eonasdan/tempus-dominus": "^6.0.0-beta1",
"@popperjs/core": "^2.11.2",
"bootstrap": "^5.1.3",
"bootstrap-dark-5": "^1.1.3",
"moment": "^2.29.2"
"@eonasdan/tempus-dominus": "latest",
"@popperjs/core": "^2.11",
"bootstrap": "^5.1",
"bootstrap-dark-5": "^1.1",
"moment": "^2.29"
},
"devDependencies": {
"@symfony/webpack-encore": "^1.8.1",
"sass": "^1.49.0",
"sass-loader": "^12.4.0"
"sass": "^1.5",
"vite": "^2.8",
"vite-plugin-symfony": "^0.3"
},
"scripts": {
"dev": "vite",
"build": "vite build"
}
}

@ -104,6 +104,18 @@
"paragonie/random_compat": {
"version": "v9.99.100"
},
"pentatrion/vite-bundle": {
"version": "1.2",
"recipe": {
"repo": "github.com/symfony/recipes-contrib",
"branch": "main",
"version": "1.0",
"ref": "33d48a1c831b2d29641175c8320e66a9f1c9911f"
},
"files": [
"config/routes/dev/pentatrion_vite.yaml"
]
},
"phpseclib/phpseclib": {
"version": "3.0.14"
},
@ -131,9 +143,6 @@
"ralouphie/getallheaders": {
"version": "3.0.3"
},
"symfony/asset": {
"version": "v6.0.7"
},
"symfony/cache": {
"version": "v6.0.6"
},
@ -225,6 +234,12 @@
"src/Kernel.php"
]
},
"symfony/http-client": {
"version": "v6.0.8"
},
"symfony/http-client-contracts": {
"version": "v3.0.1"
},
"symfony/http-foundation": {
"version": "v6.0.7"
},
@ -381,25 +396,6 @@
"config/routes/web_profiler.yaml"
]
},
"symfony/webpack-encore-bundle": {
"version": "1.14",
"recipe": {
"repo": "github.com/symfony/recipes",
"branch": "master",
"version": "1.10",
"ref": "2858aeed7e1d81a45365c049eb533cc8827e380b"
},
"files": [
"assets/app.js",
"assets/bootstrap.js",
"assets/controllers.json",
"assets/controllers/hello_controller.js",
"assets/styles/app.css",
"config/packages/webpack_encore.yaml",
"package.json",
"webpack.config.js"
]
},
"symfony/yaml": {
"version": "v6.0.3"
},

@ -247,9 +247,9 @@
{% endblock %}
{% block styles %}
{{ encore_entry_link_tags('job.add') }}
{{ vite_entry_link_tags('job.add') }}
{% endblock %}
{% block scripts %}
{{ encore_entry_script_tags('job.add') }}
{{ vite_entry_script_tags('job.add') }}
{% endblock %}

@ -287,9 +287,9 @@
{% endblock %}
{% block styles %}
{{ encore_entry_link_tags('job.add') }}
{{ vite_entry_link_tags('job.add') }}
{% endblock %}
{% block scripts %}
{{ encore_entry_script_tags('job.add') }}
{{ vite_entry_script_tags('job.add') }}
{% endblock %}

@ -63,9 +63,9 @@
{% endblock %}
{% block styles %}
{{ encore_entry_link_tags('job.index') }}
{{ vite_entry_link_tags('job.index') }}
{% endblock %}
{% block scripts %}
{{ encore_entry_script_tags('job.index') }}
{{ vite_entry_script_tags('job.index') }}
{% endblock %}

@ -36,9 +36,9 @@
{% endblock %}
{% block styles %}
{{ encore_entry_link_tags('job.view') }}
{{ vite_entry_link_tags('job.view') }}
{% endblock %}
{% block scripts %}
{{ encore_entry_script_tags('job.view') }}
{{ vite_entry_script_tags('job.view') }}
{% endblock %}

@ -4,9 +4,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Webcron management :: Log in</title>
{{ encore_entry_link_tags('security.login') }}
{{ vite_entry_link_tags('security.login') }}
{{ encore_entry_script_tags('security.login') }}
{{ vite_entry_script_tags('security.login') }}
</head>
<body>

@ -0,0 +1,33 @@
import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";
/* if you're using React */
// import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
/* react(), // if you're using React */
symfonyPlugin(),
],
root: ".",
base: "/build/",
build: {
manifest: true,
emptyOutDir: true,
assetsDir: "",
outDir: "./public/build",
rollupOptions: {
input: {
'security.login' : "./assets/js/security/login.js",
'job.index' : "./assets/js/job/index.js",
'job.view' : "./assets/js/job/view.js",
'job.add' : "./assets/js/job/add.js"
},
},
},
server: {
hmr: {
protocol: 'ws'
}
}
});

@ -1,73 +0,0 @@
const Encore = require('@symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('security.login', ['./assets/js/security/login.js', './assets/scss/security/login.scss'])
.addEntry('job.index', ['./assets/js/job/index.js', './assets/scss/job/index.scss'])
.addEntry('job.view', ['./assets/js/job/view.js', './assets/scss/job/view.scss'])
.addEntry('job.add', ['./assets/js/job/add.js', './assets/scss/job/add.scss'])
//.addEntry('page1', './assets/page1.js')
//.addEntry('page2', './assets/page2.js')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
// .splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
//.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables Sass/SCSS support
.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
// uncomment if you use API Platform Admin (composer require api-admin)
//.enableReactPreset()
//.addEntry('admin', './assets/admin.js')
//.autoProvideVariables({ })
;
module.exports = Encore.getWebpackConfig();
Loading…
Cancel
Save