b13 / assetcollector Goto Github PK
View Code? Open in Web Editor NEWAdd CSS / SVG / JS to Content templates, and load them only once
License: GNU General Public License v2.0
Add CSS / SVG / JS to Content templates, and load them only once
License: GNU General Public License v2.0
Just by reading the code, i stumbled upon this line https://github.com/b13/assetcollector/blob/master/Classes/Middleware/InlineSvgInjector.php#L34.
As far as i know the method isOutputting does not exist anymore in Version 11.
Is it possible to add possibility to include JS files into the footer area like you do it within includeJSFooter in Typoscript?
When i make a composer updaten on a 10TLS PHP7.4 install version 2.x is loaded via composer. This leads to
PHP Fatal error: Uncaught ArgumentCountError: Too few arguments to function TYPO3\CMS\Core\Localization\LanguageServiceFactory::__construct(), 0 passed in /typo3/sysext/core/Classes/Utility/GeneralUtility.php on line 3492 and exactly 2 expected in typo3/sysext/core/Classes/Localization/LanguageServiceFactory.php:37
It seems like Version 2 needs PHP >= 8.0. There must be something wrong in the composer.json that i could load 2.x on 7.4
Is it possible to add a option that allows the compression of css and js assets, similar to what is possible with typoscript?
The typo3 native assetcollector has unfortunately not received this option since version 10.3.
Thanks for your feedback.
Is it possible to append a unique ID to the SVG identifier?
This should avoid trouble with same named SVG files from diffrent folders on same page, eg:
<ac:svg file="EXT:myext/Resources/Public/Svg/myIconFile.svg" class="b_myIconClass"/>
<ac::svg file="EXT:otherext/Resources/Public/Svg/myIconFile.svg" class="b_myIconClass"/>
<ac::svg file="fileadmin/myIconFile.svg" class="b_myIconClass"/>
Maybe change the SvgViewHelper.php from ~66:
$this->assetCollector->addXmlFile($file);
$iconIdentifier = $this->assetCollector->getIconIdentifierFromFileName($file);
to:
$fileAbsPath = GeneralUtility::getFileAbsFileName($file);
// early return if it seems that the file does not exist (is_file or file_exists, not sure here)
if (!is_file($fileAbsPath)) {
return '<!-- Please check path: ' . $file . ' -->';
}
$this->assetCollector->addXmlFile($fileAbsPath);
// feed in absolute path, to have same value as in AssetCollector Class
$iconIdentifier = $this->assetCollector->getIconIdentifierFromFileName($fileAbsPath);
and in the AssetCollector.php ~118 then:
public function getIconIdentifierFromFileName(string $xmlFile): string
{
// maybe other approach here for unique ID without messing up generated HTML to much
$uniqueId = substr(sha1($xmlFile), 0, 8);
return str_replace('.svg', '', basename($xmlFile)) . '-'. $uniqueId;
}
and in the AssetCollector.php ~102, too:
public function addXmlFile(string $xmlFile): void
{
// maybe security check, if file is in public path and a SVG file (is_file or file_exists, not sure here)
if (file_exists($xmlFile)) {
$this->xmlFiles[] = $xmlFile;
} else {
$xmlFile = preg_replace('/^\//', '', $xmlFile); // or: ltrim($xmlFile, '/');
$this->xmlFiles[] = GeneralUtility::getFileAbsFileName($xmlFile);
}
}
Best regards and many thanks for the extension :-)
Steps to reproduce:
My solution:
I've completely removed the InlineSvgInjector Middleware, and added the SVG asset collector as footer data:
in ext_localconf.php add:
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['t3lib/class.t3lib_pagerenderer.php']['render-postProcess'][]
= \B13\Assetcollector\Hooks\PageRenderer\PostProcessHook::class . '->execute';
add Classes/Hooks/PageRenderer/PostProcessHook.php :
<?php
declare(strict_types=1);
namespace B13\Assetcollector\Hooks\PageRenderer;
use B13\Assetcollector\AssetCollector;
use Psr\Http\Message\ServerRequestInterface;
use TYPO3\CMS\Core\Http\ApplicationType;
use TYPO3\CMS\Core\Page\PageRenderer;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Frontend\Controller\TypoScriptFrontendController;
/**
* PostProcessHook, this is referenced in ext_localconf.php
* and should be executed once after all page rendering
*/
class PostProcessHook
{
/**
* @param array $params The already used JS and CSS files and the header and footer data
* @param PageRenderer $pageRenderer The back reference to the TYPO3\CMS\Core\Page\PageRenderer class
*/
public function execute(array &$params, PageRenderer &$pageRenderer): void
{
if (!($GLOBALS['TYPO3_REQUEST'] ?? null) instanceof ServerRequestInterface ||
!ApplicationType::fromRequest($GLOBALS['TYPO3_REQUEST'])->isFrontend()) {
return;
}
$assetCollector = GeneralUtility::makeInstance(AssetCollector::class);
// seems always empty, solution will follow
// $cached = $this->getTypoScriptFrontendController()->config['b13/assetcollector'] ?? [];
// if (!empty($cached['xmlFiles'] ?? null) && is_array($cached['xmlFiles'])) {
// $assetCollector->mergeXmlFiles($cached['xmlFiles']);
// }
$svgReferences = $assetCollector->buildInlineXmlTag();
$pageRenderer->addFooterData('<!-- SVG asset renderer -->' . PHP_EOL . $svgReferences);
// not working with INT objects...
// $params['bodyContent'] = $params['bodyContent'] . '<!-- SVG asset renderer -->' . PHP_EOL . $svgReferences;
}
// not used, see WIP comment above
protected function getTypoScriptFrontendController(): ?TypoScriptFrontendController
{
return $GLOBALS['TSFE'] ?? null;
}
}
Maybe you can check this solution?
I'm working on a solution for the "set SVG defs via TypoScript", too.
Best regards
Matthias
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.