ENHANCEMENT: using vite instead of webpack

This commit is contained in:
Jeroen De Meerleer 2022-04-29 12:23:26 +02:00
parent ccb77c95fe
commit 7942801015
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
15 changed files with 1036 additions and 12368 deletions

6
.gitignore vendored
View File

@ -12,9 +12,7 @@ public/assets/
/vendor/ /vendor/
###< symfony/framework-bundle ### ###< symfony/framework-bundle ###
###> symfony/webpack-encore-bundle ### ###> pentatrion/vite-bundle ###
/node_modules/ /node_modules/
/public/build/ /public/build/
npm-debug.log ###< pentatrion/vite-bundle ###
yarn-error.log
###< symfony/webpack-encore-bundle ###

View File

@ -1,4 +1,5 @@
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import '/assets/scss/page.scss';
document.addEventListener("readystatechange", event => { document.addEventListener("readystatechange", event => {
if(event.target.readyState === 'complete') { if(event.target.readyState === 'complete') {
@ -16,7 +17,6 @@ function initOverflow() {
} }
function initNinetiesToggle() { function initNinetiesToggle() {
let nineties = document.querySelector('.nineties-toggle'); let nineties = document.querySelector('.nineties-toggle');
let container = document.querySelector('.container'); let container = document.querySelector('.container');
nineties.addEventListener('click', function() { nineties.addEventListener('click', function() {
@ -30,7 +30,6 @@ function initNinetiesToggle() {
} }
}) })
if( if(
nineties.getBoundingClientRect().left < container.getBoundingClientRect().right && nineties.getBoundingClientRect().left < container.getBoundingClientRect().right &&
nineties.getBoundingClientRect().bottom > container.getBoundingClientRect().top nineties.getBoundingClientRect().bottom > container.getBoundingClientRect().top

View File

@ -1,5 +1,5 @@
@import "custom"; @import "custom";
@import "~bootstrap"; @import "/node_modules/bootstrap";
@import "fonts"; @import "fonts";
$black: #141414; $black: #141414;

View File

@ -1,6 +1,6 @@
@import "~bootstrap/scss/functions"; @import "/node_modules/bootstrap/scss/functions";
@import "~bootstrap/scss/variables"; @import "/node_modules/bootstrap/scss/variables";
@import "~bootstrap/scss/utilities"; @import "/node_modules/bootstrap/scss/utilities";
$utilities: map-merge( $utilities: map-merge(
$utilities, $utilities,

View File

@ -8,13 +8,13 @@
"ext-ctype": "*", "ext-ctype": "*",
"ext-iconv": "*", "ext-iconv": "*",
"erusev/parsedown": "^1.7", "erusev/parsedown": "^1.7",
"pentatrion/vite-bundle": "^1.2",
"symfony/console": "6.0.*", "symfony/console": "6.0.*",
"symfony/dotenv": "6.0.*", "symfony/dotenv": "6.0.*",
"symfony/flex": "^2", "symfony/flex": "^2",
"symfony/framework-bundle": "6.0.*", "symfony/framework-bundle": "6.0.*",
"symfony/runtime": "6.0.*", "symfony/runtime": "6.0.*",
"symfony/twig-bundle": "6.0.*", "symfony/twig-bundle": "6.0.*",
"symfony/webpack-encore-bundle": "^1.14",
"symfony/yaml": "6.0.*" "symfony/yaml": "6.0.*"
}, },
"config": { "config": {
@ -64,7 +64,7 @@
}, },
"extra": { "extra": {
"symfony": { "symfony": {
"allow-contrib": false, "allow-contrib": true,
"require": "6.0.*" "require": "6.0.*"
} }
} }

359
composer.lock generated
View File

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically" "This file is @generated automatically"
], ],
"content-hash": "2177a2836bbfc39008301d88d369c3be", "content-hash": "24c6daa971fc8eb4aaf0c6d5337a8fc5",
"packages": [ "packages": [
{ {
"name": "erusev/parsedown", "name": "erusev/parsedown",
@ -56,6 +56,58 @@
}, },
"time": "2019-12-30T22:54:17+00:00" "time": "2019-12-30T22:54:17+00:00"
}, },
{
"name": "pentatrion/vite-bundle",
"version": "v1.2.0",
"source": {
"type": "git",
"url": "https://github.com/lhapaipai/vite-bundle.git",
"reference": "bbb4683beed5cf1f5c8af17e0f677964ce3fa21b"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/lhapaipai/vite-bundle/zipball/bbb4683beed5cf1f5c8af17e0f677964ce3fa21b",
"reference": "bbb4683beed5cf1f5c8af17e0f677964ce3fa21b",
"shasum": ""
},
"require": {
"php": "^7.2.5 || ^8.0",
"symfony/config": "^4.4 || ^5.0 || ^6.0",
"symfony/dependency-injection": "^4.4 || ^5.0 || ^6.0",
"symfony/framework-bundle": "^4.4 || ^5.0 || ^6.0",
"symfony/http-client": "^4.4 || ^5.0 || ^6.0",
"symfony/http-kernel": "^4.4 || ^5.0 || ^6.0",
"symfony/twig-bundle": "^4.4 || ^5.0 || ^6.0"
},
"type": "symfony-bundle",
"autoload": {
"psr-4": {
"Pentatrion\\ViteBundle\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Hugues Tavernier",
"email": "hugues.tavernier@protonmail.com"
}
],
"description": "Vite integration for your Symfony app",
"keywords": [
"bundle",
"symfony",
"vite",
"vitejs"
],
"support": {
"issues": "https://github.com/lhapaipai/vite-bundle/issues",
"source": "https://github.com/lhapaipai/vite-bundle/tree/v1.2.0"
},
"time": "2022-02-20T20:07:53+00:00"
},
{ {
"name": "psr/cache", "name": "psr/cache",
"version": "3.0.0", "version": "3.0.0",
@ -258,78 +310,6 @@
}, },
"time": "2021-07-14T16:46:02+00:00" "time": "2021-07-14T16:46:02+00:00"
}, },
{
"name": "symfony/asset",
"version": "v6.0.7",
"source": {
"type": "git",
"url": "https://github.com/symfony/asset.git",
"reference": "ccbcf5cdc864929e64f2ca138a61bb6afb0fb710"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/asset/zipball/ccbcf5cdc864929e64f2ca138a61bb6afb0fb710",
"reference": "ccbcf5cdc864929e64f2ca138a61bb6afb0fb710",
"shasum": ""
},
"require": {
"php": ">=8.0.2"
},
"conflict": {
"symfony/http-foundation": "<5.4"
},
"require-dev": {
"symfony/http-client": "^5.4|^6.0",
"symfony/http-foundation": "^5.4|^6.0",
"symfony/http-kernel": "^5.4|^6.0"
},
"suggest": {
"symfony/http-foundation": ""
},
"type": "library",
"autoload": {
"psr-4": {
"Symfony\\Component\\Asset\\": ""
},
"exclude-from-classmap": [
"/Tests/"
]
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Fabien Potencier",
"email": "fabien@symfony.com"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Manages URL generation and versioning of web assets such as CSS stylesheets, JavaScript files and image files",
"homepage": "https://symfony.com",
"support": {
"source": "https://github.com/symfony/asset/tree/v6.0.7"
},
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2022-03-18T16:06:28+00:00"
},
{ {
"name": "symfony/cache", "name": "symfony/cache",
"version": "v6.0.6", "version": "v6.0.6",
@ -1470,6 +1450,168 @@
], ],
"time": "2022-04-01T08:04:06+00:00" "time": "2022-04-01T08:04:06+00:00"
}, },
{
"name": "symfony/http-client",
"version": "v6.0.8",
"source": {
"type": "git",
"url": "https://github.com/symfony/http-client.git",
"reference": "d347895193283e08b4c3ebf2f2974a1df3e1f670"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/http-client/zipball/d347895193283e08b4c3ebf2f2974a1df3e1f670",
"reference": "d347895193283e08b4c3ebf2f2974a1df3e1f670",
"shasum": ""
},
"require": {
"php": ">=8.0.2",
"psr/log": "^1|^2|^3",
"symfony/http-client-contracts": "^3",
"symfony/service-contracts": "^1.0|^2|^3"
},
"provide": {
"php-http/async-client-implementation": "*",
"php-http/client-implementation": "*",
"psr/http-client-implementation": "1.0",
"symfony/http-client-implementation": "3.0"
},
"require-dev": {
"amphp/amp": "^2.5",
"amphp/http-client": "^4.2.1",
"amphp/http-tunnel": "^1.0",
"amphp/socket": "^1.1",
"guzzlehttp/promises": "^1.4",
"nyholm/psr7": "^1.0",
"php-http/httplug": "^1.0|^2.0",
"psr/http-client": "^1.0",
"symfony/dependency-injection": "^5.4|^6.0",
"symfony/http-kernel": "^5.4|^6.0",
"symfony/process": "^5.4|^6.0",
"symfony/stopwatch": "^5.4|^6.0"
},
"type": "library",
"autoload": {
"psr-4": {
"Symfony\\Component\\HttpClient\\": ""
},
"exclude-from-classmap": [
"/Tests/"
]
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Nicolas Grekas",
"email": "p@tchwork.com"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Provides powerful methods to fetch HTTP resources synchronously or asynchronously",
"homepage": "https://symfony.com",
"support": {
"source": "https://github.com/symfony/http-client/tree/v6.0.8"
},
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2022-04-12T16:11:42+00:00"
},
{
"name": "symfony/http-client-contracts",
"version": "v3.0.1",
"source": {
"type": "git",
"url": "https://github.com/symfony/http-client-contracts.git",
"reference": "f7525778c712be78ad5b6ca31f47fdcfd404c280"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/http-client-contracts/zipball/f7525778c712be78ad5b6ca31f47fdcfd404c280",
"reference": "f7525778c712be78ad5b6ca31f47fdcfd404c280",
"shasum": ""
},
"require": {
"php": ">=8.0.2"
},
"suggest": {
"symfony/http-client-implementation": ""
},
"type": "library",
"extra": {
"branch-alias": {
"dev-main": "3.0-dev"
},
"thanks": {
"name": "symfony/contracts",
"url": "https://github.com/symfony/contracts"
}
},
"autoload": {
"psr-4": {
"Symfony\\Contracts\\HttpClient\\": ""
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Nicolas Grekas",
"email": "p@tchwork.com"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Generic abstractions related to HTTP clients",
"homepage": "https://symfony.com",
"keywords": [
"abstractions",
"contracts",
"decoupling",
"interfaces",
"interoperability",
"standards"
],
"support": {
"source": "https://github.com/symfony/http-client-contracts/tree/v3.0.1"
},
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2022-03-13T20:10:05+00:00"
},
{ {
"name": "symfony/http-foundation", "name": "symfony/http-foundation",
"version": "v6.0.7", "version": "v6.0.7",
@ -2754,77 +2896,6 @@
], ],
"time": "2022-03-31T17:18:25+00:00" "time": "2022-03-31T17:18:25+00:00"
}, },
{
"name": "symfony/webpack-encore-bundle",
"version": "v1.14.0",
"source": {
"type": "git",
"url": "https://github.com/symfony/webpack-encore-bundle.git",
"reference": "1729c314574f32e49f9660a0cee870f7e603864f"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/webpack-encore-bundle/zipball/1729c314574f32e49f9660a0cee870f7e603864f",
"reference": "1729c314574f32e49f9660a0cee870f7e603864f",
"shasum": ""
},
"require": {
"php": ">=7.1.3",
"symfony/asset": "^4.4 || ^5.0 || ^6.0",
"symfony/config": "^4.4 || ^5.0 || ^6.0",
"symfony/dependency-injection": "^4.4 || ^5.0 || ^6.0",
"symfony/http-kernel": "^4.4 || ^5.0 || ^6.0",
"symfony/service-contracts": "^1.0 || ^2.0 || ^3.0"
},
"require-dev": {
"symfony/framework-bundle": "^4.4 || ^5.0 || ^6.0",
"symfony/phpunit-bridge": "^5.3 || ^6.0",
"symfony/twig-bundle": "^4.4 || ^5.0 || ^6.0",
"symfony/web-link": "^4.4 || ^5.0 || ^6.0"
},
"type": "symfony-bundle",
"extra": {
"thanks": {
"name": "symfony/webpack-encore",
"url": "https://github.com/symfony/webpack-encore"
}
},
"autoload": {
"psr-4": {
"Symfony\\WebpackEncoreBundle\\": "src"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Integration with your Symfony app & Webpack Encore!",
"support": {
"issues": "https://github.com/symfony/webpack-encore-bundle/issues",
"source": "https://github.com/symfony/webpack-encore-bundle/tree/v1.14.0"
},
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2022-02-14T15:06:55+00:00"
},
{ {
"name": "symfony/yaml", "name": "symfony/yaml",
"version": "v6.0.3", "version": "v6.0.3",

View File

@ -3,5 +3,5 @@
return [ return [
Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true], Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true], Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true], Pentatrion\ViteBundle\PentatrionViteBundle::class => ['all' => true],
]; ];

View File

@ -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

View File

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

12819
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -11,12 +11,14 @@
"js-cookie": "^3.0.1" "js-cookie": "^3.0.1"
}, },
"devDependencies": { "devDependencies": {
"@symfony/webpack-encore": "^1.8.1",
"sass": "^1.45.2", "sass": "^1.45.2",
"sass-loader": "^12.4.0" "sass-loader": "^12.4.0",
"vite": "~2.8",
"vite-plugin-symfony": "^0.3.0"
}, },
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "dev": "vite",
"build": "vite build"
}, },
"repository": { "repository": {
"type": "git", "type": "git",

View File

@ -2,6 +2,18 @@
"erusev/parsedown": { "erusev/parsedown": {
"version": "1.7.4" "version": "1.7.4"
}, },
"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"
]
},
"psr/cache": { "psr/cache": {
"version": "3.0.0" "version": "3.0.0"
}, },
@ -14,9 +26,6 @@
"psr/log": { "psr/log": {
"version": "3.0.0" "version": "3.0.0"
}, },
"symfony/asset": {
"version": "v6.0.7"
},
"symfony/cache": { "symfony/cache": {
"version": "v6.0.6" "version": "v6.0.6"
}, },
@ -93,6 +102,12 @@
"src/Kernel.php" "src/Kernel.php"
] ]
}, },
"symfony/http-client": {
"version": "v6.0.8"
},
"symfony/http-client-contracts": {
"version": "v3.0.1"
},
"symfony/http-foundation": { "symfony/http-foundation": {
"version": "v6.0.7" "version": "v6.0.7"
}, },
@ -158,25 +173,6 @@
"symfony/var-exporter": { "symfony/var-exporter": {
"version": "v6.0.7" "version": "v6.0.7"
}, },
"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": { "symfony/yaml": {
"version": "v6.0.3" "version": "v6.0.3"
}, },

View File

@ -6,9 +6,9 @@
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
{{ encore_entry_link_tags('page') }} {{ vite_entry_link_tags('page') }}
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
{{ encore_entry_script_tags('page') }} {{ vite_entry_script_tags('page') }}
{% endblock %} {% endblock %}

25
vite.config.js Normal file
View File

@ -0,0 +1,25 @@
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: {
page: "./assets/js/page.js"
},
},
},
});

View File

@ -1,70 +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('page', ['./assets/js/page.js', './assets/scss/page.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(true)
// 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();